lcw

src/views/backOfficeSystem/ApprovalInformation/deploycontrol/deploymentApproval.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="" style="overflow: auto;height: 100%;">
+    <el-card shadow="never" style="border: none;">
+      <template #header>
+        <h3 class="card-header">
+          基础信息
+        </h3>
+      </template>
+      <div class="flex  flex-warp just-between">
+        <div class="flex flex-1" v-for="(item,index) in basicInformation" :key="index">
+          <div class="lable">{{item.label}}：</div>
+          <div v-if="item.showSolt">
+            <DictTag :tag="false" :value="listQuery[item.key]" color="#000"
+            :options="item.options"/>
+          </div>
+          <div v-else>
+        {{ listQuery[item.key] }}
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <el-card shadow="never" style="border: none;">
+      <template #header>
+        <h3 class="card-header">
+          布控信息
+        </h3>
+      </template>
+    <ObjectInformation :item='listQuery' :dict="{D_BZ_XB}"/>
+    </el-card>
+    <el-card shadow="never" style="border: none;">
+      <template #header>
+        <h3 class="card-header">
+          布控附件
+        </h3>
+      </template>
+      <div class="grid-container">
+        <div v-for="(item,index) in listQuery.ossList" class="grid-item" :key="index">
+          <el-image :src="setAddress(item.id)" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList"
+            show-progress :initial-index="4" fit="cover">
+            <template #error>
+              <div class="image-slot">
+                <el-icon><icon-picture /></el-icon>
+              </div>
+            </template>
+          </el-image>
+        </div>
+      </div>
+    </el-card>
+
+  </div>
+
+</template>
+
+<script setup>
+import { Picture as IconPicture } from '@element-plus/icons-vue'
+import ObjectInformation from './objectInformation.vue'
+import {qcckGet} from '@/api/qcckApi'
+import { onMounted ,getCurrentInstance,ref, reactive} from 'vue'
+import { useRoute } from 'vue-router'
+import {setAddress} from '@/utils/tools'
+const { proxy } = getCurrentInstance();
+const { D_GS_BK_DJ, D_GS_BK_DX,D_GS_BK_CZYQ,D_BZ_XB } = proxy.$dict("D_GS_BK_BKYS","D_BZ_XB","D_GS_BK_SJLX","D_GS_BK_DJ","D_GS_BK_DX","D_GS_BK_ZT","D_GS_BK_CZYQ","D_GS_BK_CZJSDWLX","D_GS_BK_TJFS"); //获取字典数据
+
+// 基础信息
+const basicInformation = ref(
+  [
+  {
+    label: '布控对象',
+    key: 'bkDx',
+    showSolt: true,
+    options:D_GS_BK_DX
+  },
+  {
+    label: '布控开始时间',
+    key:'bkSjKs'
+  },
+  {
+    label: '布控结束时间',
+    key:'bkSjJs'
+  },
+  {
+    label: '处置要求',
+    key: 'czYq',
+    showSolt: true,
+    options:D_GS_BK_CZYQ
+  },
+  {
+    label: '布控等级',
+    key: 'bkDj',
+    showSolt: true,
+    options:D_GS_BK_DJ
+  },
+  {
+    label: '布控事由',
+    key:'bkSy'
+  }
+]
+)
+//根据id获取数据query的id获取数据
+const listQuery = ref({})
+// 图片信息
+const srcList = ref([])
+const getDataById = (id) => {
+  qcckGet({}, '/mosty-gsxt/tbGsxtBk/selectVoById/' + id).then(res => {
+    listQuery.value=res
+    srcList.value=res.ossList.map(v=>setAddress(v.id))
+  })
+}
+const route=useRoute()
+onMounted(() => {
+  const id = route.query.id
+  getDataById(id)
+})
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.card-header {
+  font-size: 18px;
+  color: #303133;
+  font-weight: 600;
+  margin: 0;
+}
+
+::v-deep .el-card {
+  border: none !important;
+}
+
+.flex-1 {
+  width: 48%;
+  font-family: verdana;
+  font-size: 14px;
+  margin-bottom: 20px;
+
+  .lable {
+    font-size: 14px;
+    width: 13%;
+    font-weight: 700;
+  }
+}
+
+.el-image {
+  padding: 0 5px;
+  max-width: 300px;
+  max-height: 200px;
+  width: 100%;
+  height: 200px;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+  border: 1px solid silver ;
+  border-radius: 5px;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  /* 5等分列 */
+  gap: 0px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.grid-item {
+  width: 290px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+  }
+}
+</style>