最新前端

src/views/system/text/index.vue

@@ -0,0 +1,484 @@
+<template>
+
+
+
+      <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;min-height: 300px">
+                  <template #header>
+                    <div class="card-header" style="text-align: center">
+                      <h1 class="text1">标本基本信息</h1>
+                    </div>
+                  </template>
+                  <el-descriptions
+                    direction="vertical"
+                    v-if="specimenData"
+                    :column="4"
+                    :size="size"
+                    border
+                  >
+                    <el-descriptions-item label="序号">{{ specimenData.id }}</el-descriptions-item>
+                    <el-descriptions-item label="标本类型">{{ specimenTypeText }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="标本编号">{{
+                        specimenData.specimenNumber
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="资产号">{{
+                        specimenData.assetNumber
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="存放位置">{{
+                        specimenData.storageLocation
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="中文名称">{{
+                        specimenData.chineseName
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="英文名称">{{
+                        specimenData.englishName
+                      }}
+                    </el-descriptions-item>
+                  </el-descriptions>
+                </el-card>
+
+                <el-card style="margin-bottom: 5px;min-height: 300px">
+                  <template #header>
+                    <div class="card-header" style="text-align: center;">
+                      <h1 class="text1">标本特征</h1>
+                    </div>
+                  </template>
+                  <el-descriptions
+                    direction="vertical"
+                    v-if="specimenData"
+                    :column="4"
+                    :size="size"
+                    border
+                  >
+                    <el-descriptions-item label="成分">{{
+                        specimenData.composition
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="产地">{{
+                        specimenData.origin
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="时代">{{ specimenData.era }}</el-descriptions-item>
+                    <el-descriptions-item label="保存地层">{{
+                        specimenData.discoveryTime
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="陨石类型">{{ specimenData.meteoriteType }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="国际命名">{{
+                        specimenData.internationalName
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="重量">{{
+                        specimenData.weight
+                      }}
+                    </el-descriptions-item>
+                  </el-descriptions>
+                </el-card>
+                <el-card style="margin-bottom: 5px;;min-height: 300px">
+                  <template #header>
+                    <div class="card-header" style="text-align: center">
+                      <h1 class="text1">标本保存与来源</h1>
+                    </div>
+                  </template>
+                  <el-descriptions
+                    direction="vertical"
+                    v-if="specimenData"
+                    :column="4"
+                    :size="size"
+                    border
+                  >
+                    <el-descriptions-item label="保存类型">{{ preservationTypeText }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="来源">{{ sourceText }}</el-descriptions-item>
+                    <el-descriptions-item label="标本提供者">{{
+                        specimenData.provider
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="发现时间">{{
+                        specimenData.discoveryTime
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="降落时间">{{
+                        specimenData.fallTime
+                      }}
+                    </el-descriptions-item>
+                  </el-descriptions>
+                </el-card>
+                <el-card style="margin-bottom: 5px;min-height: 300px">
+                  <template #header>
+                    <div class="card-header" style="text-align: center">
+                      <h1 class="text1" style="">标本用途与状态</h1>
+                    </div>
+                  </template>
+                  <el-descriptions
+                    direction="vertical"
+                    v-if="specimenData"
+                    :column="4"
+                    :size="size"
+                    border
+                  >
+                    <el-descriptions-item label="入馆时间">{{
+                        specimenData.acquisitionTime
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="描述">{{
+                        specimenData.description
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="用途">{{
+                        specimenData.purpose
+                      }}
+                    </el-descriptions-item>
+                    <el-descriptions-item 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="url"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                  :preview-src-list="srcList"
+                  :initial-index="4"
+                  fit="cover"
+                />
+              </div>
+
+                            <div>
+                              <el-space style="margin-top: 10px">
+                                <div class="demo-image__preview">
+                                  <el-image
+                                    style="width: 50px; height: 40px"
+                                    :src="url"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="srcList"
+                                    :initial-index="4"
+                                    fit="cover"
+                                  />
+                                </div>
+                                <div class="demo-image__preview">
+                                  <el-image
+                                    style="width: 50px; height: 40px"
+                                    :src="url"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="srcList"
+                                    :initial-index="4"
+                                    fit="cover"
+                                  />
+                                </div>
+                                <div class="demo-image__preview">
+                                  <el-image
+                                    style="width: 50px; height: 40px"
+                                    :src="url"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="srcList"
+                                    :initial-index="4"
+                                    fit="cover"
+                                  />
+                                </div>
+                                <div class="demo-image__preview">
+                                  <el-image
+                                    style="width: 50px; height: 40px"
+                                    :src="url"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="srcList"
+                                    :initial-index="4"
+                                    fit="cover"
+                                  />
+                                </div>
+                                <div class="demo-image__preview">
+                                  <el-image
+                                    style="width: 50px; height: 40px"
+                                    :src="url"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="srcList"
+                                    :initial-index="4"
+                                    fit="cover"
+                                  />
+                                </div>
+                                <div class="demo-image__preview">
+                                  <el-image
+                                    style="width: 50px; height: 40px"
+                                    :src="url"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="srcList"
+                                    :initial-index="4"
+                                    fit="cover"
+                                  />
+                                </div>
+                                <div class="demo-image__preview">
+                                  <el-image
+                                    style="width: 50px; height: 40px"
+                                    :src="url"
+                                    :zoom-rate="1.2"
+                                    :max-scale="7"
+                                    :min-scale="0.2"
+                                    :preview-src-list="srcList"
+                                    :initial-index="4"
+                                    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 specimenRecord"
+                :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 specimenRecord"
+                :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>
+
+
+
+
+
+</template>
+
+<script setup lang="ts">
+
+import {ref, onMounted, computed} from "vue";
+import {useRouter} from 'vue-router';
+import * as textApi from "@/api/system/text";
+import {ElCol, ElImage} from 'element-plus';
+
+const router = useRouter() // 路由
+const {query} = useRoute() // 查询参数
+import type {ComponentSize} from 'element-plus'
+import {getRecord} from "@/api/system/text";
+
+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 textApi.getDetail(query.dataId)
+   console.log(res)
+    specimenData.value = res
+    console.log('tj',specimenData.value)
+    srcList.value = specimenData.value.imagePath.split(',')
+    url.value = srcList.value[0]
+    console.log('tj',srcList.value)
+  }  finally {
+  }
+  }
+/**馆藏状态记录**/
+let specimenRecord = ref(null);
+const  fetchRecord = async () => {
+  try {
+
+    console.log(query.dataId)
+    let res: any = await textApi.getRecord(query.dataId)
+    console.log(res)
+    specimenRecord.value = res
+
+  } finally {
+  }
+}
+// // 在组件加载时获取数据
+onMounted(async () => {
+  console.log(1)
+  await fetchData()
+   await fetchRecord()
+
+})
+
+
+/**标本类型**/
+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 (specimenRecord.value === null) {
+    return '';
+  }
+  switch (specimenRecord.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;
+}
+
+.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);
+}
+
+</style>