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

<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: 110px;
    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>