185 lines
4.1 KiB
Vue
185 lines
4.1 KiB
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>
|