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">{{
                      specimenData.specimenNumber
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" label="标本类型:"
                                        label-align="right">
                    <dict-tag :type="DICT_TYPE.MUSEUMS_SPECIMEN_TYPE" :value="specimenData.specimenType" />
                  </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-class-name="my-label"
                                        label-align="right">
                    <dict-tag :type="DICT_TYPE.MUSEUMS_SPECIMEN_INFO" :value="specimenData.preservationType" />
                  </el-descriptions-item>
                  <el-descriptions-item label="中文名称:" label-align="right"
                                        label-class-name="my-label">{{
                      specimenData.chineseName
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" label="保存状态:"
                                        label-align="right">
                    <dict-tag :type="DICT_TYPE.MUSEUMS_SPECIMEN_PRESERVATION_STATUS" :value="specimenData.saveStatus" />
                  </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.englishName
                    }}
                  </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.country-->
                  <!--                    }}-->
                  <!--                  </el-descriptions-item>-->
                  <el-descriptions-item label="国际命名:" label-align="right"
                                        label-class-name="my-label"
                                        v-if="specimenData.specimenType !== 2 && specimenData.specimenType !== 0 && specimenData.specimenType !== 1 ">
                    {{
                      specimenData.internationalName
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="国家:" label-align="right"
                                        label-class-name="my-label">{{
                      specimenData.country
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="省:" label-align="right" label-class-name="my-label">
                    {{
                      specimenData.economize
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="备注:" label-class-name="my-label"
                                        label-align="right">{{
                      specimenData.notes
                    }}
                  </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"
                                        v-if="specimenData.specimenType !== 2"> {{
                      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-width="100px" label-align="right"-->
                  <!--                                        label-class-name="my-label">{{-->
                  <!--                      specimenData.preservedLayer-->
                  <!--                    }}-->
                  <!--                  </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"
                                        v-if="specimenData.specimenType !== 1 && specimenData.specimenType !== 3 ">
                    {{
                      specimenData.era
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="地质产状或层位:" label-width="100px"
                                        label-align="right" label-class-name="my-label">{{
                      specimenData.preservedLayer
                    }}
                  </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-class-name="my-label"
                                        label-align="right"
                                        v-if="specimenData.specimenType !== 2 && specimenData.specimenType !== 0 && specimenData.specimenType !== 1 ">
                    {{
                      specimenData.discoveryTime
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="降落时间:" label-class-name="my-label"
                                        label-align="right"
                                        v-if="specimenData.specimenType !== 2 && specimenData.specimenType !== 0 && specimenData.specimenType !== 1 ">
                    {{
                      specimenData.fallTime
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="重量(g):" label-width="100px" label-align="right"
                                        label-class-name="my-label"
                                        v-if="specimenData.specimenType !== 2">{{
                      specimenData.weight
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="规格(cm):" label-align="right"
                                        label-class-name="my-label">{{
                      specimenData.size
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="主要用途:" label-class-name="my-label"
                                        label-align="right">
                    <dict-tag :type="DICT_TYPE.MUSEUMS_SPECIMEN_MAIN_USES" :value="specimenData.mainPurpose" />
                  </el-descriptions-item>
                  <el-descriptions-item label="具体用途:" label-class-name="my-label"
                                        label-align="right">
                    {{
                      specimenData.purpose
                    }}

                  </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"
                                        label-align="right">{{ sourceText }}
                  </el-descriptions-item>
                  <el-descriptions-item label="单价:" label-class-name="my-label"
                                        label-align="right">{{
                      specimenData.specimenPrice
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="入馆时间:" label-class-name="my-label"
                                        label-align="right">{{
                      specimenData.acquisitionTime
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="数量（件/套）:" label-align="right"
                                        label-class-name="my-label">{{
                      specimenData.specimenAmount
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="标本提供者:" label-class-name="my-label"
                                        label-align="right">{{
                      specimenData.provider
                    }}
                  </el-descriptions-item>
                  <!--                  <el-descriptions-item label="发现时间:" label-class-name="my-label"-->
                  <!--                                        label-align="right"-->
                  <!--                                        v-if="specimenData.specimenType !== 2 && specimenData.specimenType !== 0 && specimenData.specimenType !== 1 ">-->
                  <!--                    {{-->
                  <!--                      specimenData.discoveryTime-->
                  <!--                    }}-->
                  <!--                  </el-descriptions-item>-->
                  <!--                  <el-descriptions-item label="降落时间:" label-class-name="my-label"-->
                  <!--                                        label-align="right"-->
                  <!--                                        v-if="specimenData.specimenType !== 2 && specimenData.specimenType !== 0 && specimenData.specimenType !== 1 ">-->
                  <!--                    {{-->
                  <!--                      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
                  style="margin-bottom: 30px"
                  v-if="specimenData"
                  :column="2"
                  :size="size"
                  border
                >
                  <el-descriptions-item label="文献资料：" label-class-name="my-label"
                                        label-align="right">
                    <div v-html="specimenData.description">
                    </div>
                  </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 v-if="specimenData.imagePath && specimenData.imagePath.length">
              <div class="demo-image__preview">
                <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="index"
                  fit="cover"
                />
              </div>

              <div>
                <el-space style="margin-top: 10px">
                  <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>
            </div>
            <el-empty v-else description="暂无图片"/>
          </el-col>


        </el-card>
        <el-card style="margin-top: 10px">
          <template #header>
            <div class="card-header">
              <h1 class="text1" style="margin-bottom: 10px">馆藏状态：
                <dict-tag  :type="DICT_TYPE.MUSEUMS_COLLECTION_STATUS" :value="specimenData.collectionStatus" />
              </h1>
            </div>
          </template>
          <el-scrollbar height="650px">
            <el-timeline style="max-width: 600px;margin-left: 15px">
              <el-timeline-item
                v-for="(item, index) in stustuss"
                :key="index"
                type="primary"
                :hollow="true"
              >
                <h4>{{ formatDate(item.createTime) }}</h4>
                <el-card>
                  <h4>操作类型：{{ item.subType }}</h4>
                  <div style="line-height: 30px">操作人：{{ item.userName }}</div>
                  <div style="line-height: 20px">操作内容：{{ item.action }}</div>
                </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";
import {DICT_TYPE} from "@/utils/dict";

const stustuss = ref()
const specimenData = ref({
  imagePath: []
}); // 初始化响应式数据
const size = ref<ComponentSize>('large')


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


const fetchData = async () => {
  loading.value = true
  try {
    console.log(query.dataId)
    let res: any = await SpecimenInfoApi.getSpecimenInfo(query.dataId)
    const stutus = await SpecimenInfoApi.getStustusInfo(query.dataId)
    stustuss.value = stutus
    console.log('stustuss', stustuss.value)
    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 {
    loading.value = false
  }
}



/**保存状态**/
const saveStatusText = computed(() => {
  if (specimenData.value === null) {
    return '';
  }
  switch (specimenData.value.saveStatus) {
    case 0:
      return '完整';
    case 1:
      return '受损';
    case 2:
      return '严重受损';
    case 3:
      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 '';
  }
});
/**主要用途**/
const mainPurposeText = computed(() => {
  if (specimenData.value === null) {
    return '';
  }
  switch (specimenData.value.mainPurpose) {
    case 0:
      return '工业原料';
    case 1:
      return '药用';
    case 2:
      return '建材';
    case 3:
      return '科学研究';
    case 4:
      return '观赏';
    case 5:
      return '其他';
    default:
      return '';
  }
});

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

</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;
}

:deep(.my-label) {
  background: #FAF8F7 !important;
  width: 150px;
}
</style>