museums-ui/src/views/museums/specimeninfo/specimenDetails.vue

<template>
  <el-skeleton :loading="loading" animated>
  <el-row :gutter="8" justify="space-between">
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24">
      <div>
        <el-row>
          <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" style="margin-outside: 0px">
            <el-card style="margin-bottom: 5px" >
              <template #header>
                <div class="card-header" style="text-align: center">
                  <h1 class="text1">标本基本信息</h1>
                </div>
              </template>
              <el-descriptions
                v-if="specimenData"
                :column="2"
                :size="size"
                border
              >
                <el-descriptions-item label-class-name="my-label" label="序号:" label-align="right">{{ specimenData.id }}</el-descriptions-item>

                <el-descriptions-item  label-class-name="my-label" label="标本类型:" label-align="right" >{{ specimenTypeText }}
                </el-descriptions-item>
                <el-descriptions-item  label-class-name="my-label" label="标本编号:" label-align="right">{{
                    specimenData.specimenNumber
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="资产号:" label-align="right" label-class-name="my-label" >{{
                    specimenData.assetNumber
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="存放位置:" label-align="right" label-class-name="my-label" >{{
                    specimenData.storageLocation
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="中文名称:" label-align="right" label-class-name="my-label" >{{
                    specimenData.chineseName
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="英文名称:" label-align="right" label-class-name="my-label" >{{
                    specimenData.englishName
                  }}
                </el-descriptions-item>
              </el-descriptions>

            </el-card>

            <el-card style="margin-bottom: 5px">
              <template #header>
                <div class="card-header" style="text-align: center;">
                  <h1 class="text1">标本特征</h1>
                </div>
              </template>
              <el-descriptions
                v-if="specimenData"
                :column="2"
                :size="size"
                border
              >
                <el-descriptions-item label="成分:"  label-align="right" label-class-name="my-label" > {{
                    specimenData.composition
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="产地:" label-align="right" label-class-name="my-label" >{{
                    specimenData.origin
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="时代:" label-align="right" label-class-name="my-label" >{{ specimenData.era }}</el-descriptions-item>
                <el-descriptions-item label="保存地层:" label-width="100px" label-align="right" label-class-name="my-label" >{{
                    specimenData.discoveryTime
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="陨石类型:" label-width="100px" label-align="right" label-class-name="my-label" >{{ specimenData.meteoriteType }}
                </el-descriptions-item>
                <el-descriptions-item label="国际命名:" label-width="100px" label-align="right" label-class-name="my-label" >{{
                    specimenData.internationalName
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="重量(g):" label-width="100px" label-align="right" label-class-name="my-label" >{{
                    specimenData.weight
                  }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            <el-card style="margin-bottom: 5px">
              <template #header>
                <div class="card-header" style="text-align: center">
                  <h1 class="text1">标本保存与来源</h1>
                </div>
              </template>
              <el-descriptions

                v-if="specimenData"
                :column="2"
                :size="size"
                border
              >
                <el-descriptions-item label="保存类型" label-class-name="my-label" >{{ preservationTypeText }}
                </el-descriptions-item>
                <el-descriptions-item label="来源" label-class-name="my-label" >{{ sourceText }}</el-descriptions-item>
                <el-descriptions-item label="标本提供者" label-class-name="my-label" >{{
                    specimenData.provider
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="发现时间" label-class-name="my-label" >  {{
                    specimenData.discoveryTime
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="降落时间" label-class-name="my-label" >{{
                    specimenData.fallTime
                  }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            <el-card style="margin-bottom: 5px">
              <template #header>
                <div class="card-header" style="text-align: center">
                  <h1 class="text1" style="">标本用途与状态</h1>
                </div>
              </template>
              <el-descriptions
                v-if="specimenData"
                :column="2"
                :size="size"
                border
              >
                <el-descriptions-item label="入馆时间" label-class-name="my-label" >{{
                    specimenData.acquisitionTime
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="描述" label-class-name="my-label" >{{
                    specimenData.description
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="用途" label-class-name="my-label" >{{
                    specimenData.purpose
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="备注" label-class-name="my-label" >{{
                    specimenData.notes
                  }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>

        </el-row>

      </div>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card>
        <template #header>
          <div class="card-header" style="text-align: center">
            <h1>标本图片</h1>
          </div>
        </template>
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="mb-8px">
          <div class="demo-image__preview" v-if="specimenData ">
            <el-image
              style=" align-items: center"
              :src="specimenData.imagePath[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="specimenData.imagePath"
              :initial-index="4"
              fit="cover"
            />
          </div>

          <div>
            <el-space style="margin-top: 10px"  v-if="specimenData ">
              <div class="demo-image__preview" v-for="(url, index) in specimenData.imagePath"
                   :key="index">
                <el-image
                  style="width: 50px; height: 40px"
                  :src="url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :initial-index="4"
                  :preview-src-list="[url]"
                  fit="cover"
                />
              </div>
      </el-space>
          </div>
        </el-col>


      </el-card>
      <el-card style="margin-top: 10px">
        <template #header>
          <div class="card-header" >
            <h1 class="text1" style="margin-bottom: 10px">馆藏状态</h1>
            <span v-if="specimenRecord">{{collectionStatusText}}</span>
          </div>
        </template>
        <el-scrollbar height="600px">
          <el-timeline style="max-width: 600px;margin-left: 15px" >
            <el-timeline-item
              v-for="(item, index) in specimenData"
              :key="index"
              :timestamp="item.outgoingTime"
              placement="top">
              <el-card>
                <p>{{  }}</p>
                <p>状态：{{  }}</p>
                <p>申请人或单位:{{item.applicantName }}</p>
                <p>用途：{{item.applicationUsage}}</p>
                <p>审批员：{{item.approveUsers}}</p>
                <p>审批时间:{{}}</p>
                <p>出库员：{{ item.operator }}</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              v-for="(item, index) in specimenData"
              :key="index"
              :timestamp="item.acquisitionTime"
              placement="top">
              <el-card>
                <p>回库</p>
                <p>退还人：{{ item.operator }}</p>
                <p>点收人：{{item.applicationUsage}}</p>
                <p>退还日期：{{item.approveUsers}}</p>
                <p>标本情况:{{}}</p>
              </el-card>
            </el-timeline-item>

          </el-timeline>
        </el-scrollbar>
      </el-card>

    </el-col>
  </el-row>
  </el-skeleton>




</template>

<script setup lang="ts">

import {ref, onMounted, computed} from "vue";
import {useRouter} from 'vue-router';
import  {SpecimenInfoApi} from "@/api/museums/specimeninfo";
import {ElCol, ElImage} from 'element-plus';
const loading = ref(false)
const router = useRouter() // 路由
const {query} = useRoute() // 查询参数
import type {ComponentSize} from 'element-plus'
import {formatDate} from "@/utils/formatTime";


const size = ref<ComponentSize>('large')



const url = ref()
const srcList = ref([])




let specimenData = ref(null); // 初始化响应式数据
const fetchData = async () => {
  try {
    console.log(query.dataId)
    let res: any = await SpecimenInfoApi.getSpecimenInfo(query.dataId)
    console.log(res)
    res.discoveryTime = formatDate(res.discoveryTime)
    res.fallTime = formatDate(res.fallTime)
    res.acquisitionTime = formatDate(res.acquisitionTime)


    specimenData.value = res
    console.log(specimenData.value)
  }  finally {
  }
}

// // 在组件加载时获取数据
onMounted(async () => {
  console.log(1)
  await fetchData()


})


/**标本类型**/
const specimenTypeText = computed(() => {
  if (specimenData.value === null) {
    return '';
  }
  switch (specimenData.value.specimenType) {
    case 0:
      return '矿物';
    case 1:
      return '岩石矿石';
    case 2:
      return '化石';
    case 3:
      return '陨石';
    default:
      return '';
  }
});
/**保存类型**/
const preservationTypeText = computed(() => {
  if (specimenData.value === null) {
    return '';
  }
  switch (specimenData.value.preservationType) {
    case 0:
      return '标本';
    case 1:
      return '光片';
    case 2:
      return '薄片模型';
    default:
      return '';
  }
});
/**来源**/
const collectionStatusText = computed(() => {
  if (specimenData.value === null) {
    return '';
  }
  switch (specimenData.value.collectionStatus) {
    case 0:
      return '在馆';
    case 1:
      return '借出';
    default:
      return '';
  }
});
/**馆藏状态（在馆、借出）**/
const sourceText = computed(() => {
  if (specimenData.value === null) {
    return '';
  }
  switch (specimenData.value.source) {
    case 0:
      return '采购';
    case 1:
      return '捐赠';
    case 2:
      return '采集';
    default:
      return '';
  }
});


</script>

<style scoped lang="scss">
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;

}

.text1 {
  font-weight: bold;
  color: #0f2438;
}
:deep(.my-label) {
  background: #FAF8F7 !important;
}
.label {
  display: inline-block;
  text-align: right;
  width: 100px;
  font-weight: bold;
  color: black;
}


.scrollbar-imag-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
.label-width .el-descriptions-item__label  {
  width: 90px;
  flex: 1;
}
.el-descriptions-item {
  margin-bottom: 20px;
  margin-top: 20px;
}

</style>