1128 lines
43 KiB
Vue
1128 lines
43 KiB
Vue
<template>
|
|
<div class="detail-container">
|
|
<div class="map-container">
|
|
<MapboxMap
|
|
:imageList="imageList"
|
|
:geomsList="geomsList"
|
|
:mapConfig="mapConfig"
|
|
@handlerDrawComplete="handlerDrawComplete"
|
|
@mapOnLoad="onMapboxLoad"
|
|
ref="MapboxComponent"
|
|
/>
|
|
</div>
|
|
<div class="info-container" id="info-container">
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<a-tab-pane key="1" tab="详情">
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="图斑编号">{{ caseInfo.case_no }}</a-descriptions-item>
|
|
<a-descriptions-item label="所属年度">{{ caseInfo.syear_base }}</a-descriptions-item>
|
|
<a-descriptions-item label="接收时间">{{ caseInfo.jieshou_time }}</a-descriptions-item>
|
|
<a-descriptions-item label="发放批次">{{
|
|
caseInfo.fafangpici_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="经纬度"
|
|
>{{ caseInfo.centerlng_base }} / {{ caseInfo.centerlat_base }}</a-descriptions-item
|
|
>
|
|
<a-descriptions-item label="图斑来源">{{ caseInfo.tubanlaiyuan }}</a-descriptions-item>
|
|
<a-descriptions-item label="疑似违法涉矿图斑面积(亩)">{{
|
|
// dataProcessing(caseInfo.weifaarea_base)
|
|
caseInfo.weifaarea_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="图斑描述">{{
|
|
caseInfo.case_description
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否重点矿区">{{
|
|
caseInfo.zhongdianflag_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="重点矿区名称">{{
|
|
caseInfo.zhongdianname_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否在国家自然保护区范围内">{{
|
|
caseInfo.ziranbaohuflag_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="所属国家自然保护区名称">{{
|
|
caseInfo.ziranbaohuname_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="违法开采面积(亩)">{{
|
|
caseInfo.weifakaicaiarea_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="下发时间">{{
|
|
caseInfo.xiafatime_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="区/县">{{ caseInfo.countyname }}</a-descriptions-item>
|
|
<a-descriptions-item label="镇/街">{{ caseInfo.streetname }}</a-descriptions-item>
|
|
<a-descriptions-item label="村/社">{{ caseInfo.communityname }}</a-descriptions-item>
|
|
<a-descriptions-item label="基本农田面积(加工)(平方米)">{{
|
|
caseInfo.jbntarea_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="城市开发边界面积(加工)(平方米)">{{
|
|
caseInfo.cskfbjarea_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="生态保护红线面积(加工)(平方米)">{{
|
|
caseInfo.stbhhxarea_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否符合土地利用总体规划（加工）">{{
|
|
caseInfo.tudiliyongflag_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="违法占地面积（加工）(亩)">{{
|
|
caseInfo.weifazhandiarea_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="到期时限">{{
|
|
caseInfo.chulishixian_base
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="图斑图片">
|
|
<div class="image-div">
|
|
<a-image-preview-group
|
|
:preview="{
|
|
getContainer: getContainer,
|
|
}"
|
|
>
|
|
<template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
|
|
<a-image
|
|
v-if="imageItem"
|
|
width="100px"
|
|
height="100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
|
:preview="{
|
|
getContainer,
|
|
}"
|
|
/>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</div>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="填报" force-render>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="图斑类型">{{ caseInfo.typename }}</a-descriptions-item>
|
|
<a-descriptions-item label="合法性判定" v-if="caseInfo.typename">{{
|
|
getLabel('hefapanding_fill', caseInfo.hefapanding_fill)
|
|
}}</a-descriptions-item>
|
|
<!-- 开采 -->
|
|
<template v-if="caseInfo.typename == '开采'">
|
|
<!-- 开采-合法 -->
|
|
<template v-if="caseInfo.hefapanding_fill == 1">
|
|
<a-descriptions-item label="合法情形（开采）">{{
|
|
getLabel('hefaqingxing_kcfill', caseInfo.hefaqingxing_kcfill)
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审批类型（开采）">{{
|
|
caseInfo.shenpitype_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审批时间（开采）">{{
|
|
caseInfo.shenpitime_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审批文号（开采）">{{
|
|
caseInfo.shenpinum_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="有效期（开采）">{{
|
|
caseInfo.youxiaoqi_kcfill
|
|
}}</a-descriptions-item>
|
|
</template>
|
|
<!-- 开采-违法 -->
|
|
<template v-if="caseInfo.hefapanding_fill == 2">
|
|
<a-descriptions-item label="违法类型（开采）">{{
|
|
getLabel('weifaleixing', caseInfo.weifaleixing)
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否属于国家规划矿区（开采）">{{
|
|
caseInfo.isguihua_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否重大典型问题（开采）">{{
|
|
caseInfo.iszhongda_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否重点敏感区域范围内（开采）">{{
|
|
caseInfo.iszhongdian_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="开采主体（开采）">{{
|
|
caseInfo.kaicaizhuti_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="主体类型（开采）">{{
|
|
getLabel('zhutitype_kcfill', caseInfo.zhutitype_kcfill)
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="发生时间（开采）">{{
|
|
caseInfo.fashentime_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="结束时间（开采）">{{
|
|
caseInfo.endtime_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="矿种">{{
|
|
caseInfo.kuangzhong_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="开采面积（开采）">{{
|
|
caseInfo.kaicaiarea_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="方量（开采）">{{
|
|
caseInfo.fangliang_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="采出的矿产品查封方量（开采）">{{
|
|
caseInfo.chafengliang_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="采出的矿产品价值（开采）">{{
|
|
caseInfo.caichujiazhi_kcfill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否新增（开采）">{{
|
|
caseInfo.isnewadd_kcfill
|
|
}}</a-descriptions-item>
|
|
</template>
|
|
<!-- 开采-其他 -->
|
|
<template v-if="caseInfo.hefapanding_fill == 2">
|
|
<a-descriptions-item label="是否河道采砂（开采）">{{
|
|
caseInfo.ishedaocaisha_kcfill
|
|
}}</a-descriptions-item>
|
|
</template>
|
|
</template>
|
|
<!-- 加工 -->
|
|
<template v-if="caseInfo.typename == '加工'">
|
|
<a-descriptions-item label="违法类型">{{
|
|
getLabel('weifatype_jgfill', caseInfo.weifatype_jgfill)
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="设计产能（加工）">{{
|
|
caseInfo.shejichanneng_base
|
|
}}</a-descriptions-item>
|
|
</template>
|
|
<a-descriptions-item label="图斑变化情况说明">{{
|
|
caseInfo.shuoming_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="现场照片">
|
|
<div class="image-div">
|
|
<a-image-preview-group
|
|
:preview="{
|
|
getContainer: getContainer,
|
|
onVisibleChange: handlerImageChange,
|
|
}"
|
|
>
|
|
<template
|
|
v-for="(imageItem, imageIndex) in xianchangzhaopianList"
|
|
:key="imageIndex"
|
|
>
|
|
<a-image
|
|
v-if="imageItem"
|
|
@click="handlerPreviewImage(imageIndex, imageItem)"
|
|
width="100px"
|
|
height="100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
|
:preview="{
|
|
getContainer,
|
|
}"
|
|
/>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="附件">
|
|
<a-image-preview-group :preview="{ getContainer }">
|
|
<template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
|
|
<a-image
|
|
v-if="showImage(item)"
|
|
style="width: 100px; height: 100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
|
:preview="{ getContainer }"
|
|
/>
|
|
<div v-else>
|
|
<Icon
|
|
v-if="item"
|
|
:style="`font-size: 30px; cursor: pointer;`"
|
|
icon="ion:document-attach-outline"
|
|
@click="downLoadFile(item)"
|
|
/>
|
|
{{ item }}
|
|
</div>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="填报人">{{ caseInfo.tianbaoren_fill }}</a-descriptions-item>
|
|
<a-descriptions-item label="填报时间">{{
|
|
caseInfo.tianbaotime_fill
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
<template v-if="caseInfo.typename == '开采' && caseInfo.hefapanding_fill == 2">
|
|
<a-tab-pane key="4" tab="填报审核">
|
|
<a-divider>县级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="审核结果">{{
|
|
caseInfo.xianshenhejieguo_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.xianbohuinote_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核人">{{
|
|
caseInfo.xianshenheren_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核时间">{{
|
|
caseInfo.xianshenhetime_fill
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-divider>市级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="市级审核人">{{
|
|
caseInfo.shishenheren_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="市级审核时间">{{
|
|
caseInfo.shishenhetime_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否通过">{{
|
|
caseInfo.shishenhejieguo_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.shibohuinote_fill
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="5" tab="查处">
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="是否立案">{{
|
|
caseInfo.islian_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="立案时间">{{
|
|
caseInfo.liantime_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="立案机关">{{
|
|
caseInfo.lianjiguan_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否结案">{{
|
|
caseInfo.isjiean_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="违法主体">{{
|
|
caseInfo.weifazhuti_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="违法开采矿产品数量（吨）">{{
|
|
caseInfo.weifashuliang_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="违法开采矿产品价值（万元）">{{
|
|
caseInfo.weifajiazhi_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="违法面积（亩）">{{
|
|
caseInfo.weifaarea_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="相关地类">{{
|
|
caseInfo.xiangguandilei_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="渉嫌犯罪移送司法机关">{{
|
|
caseInfo.isyisongsifa_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="党纪政务处分情况">{{
|
|
caseInfo.dangjichufen_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否作出行政处罚决定">{{
|
|
caseInfo.isxingzhengchufa_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="行政处罚决定书编号">{{
|
|
caseInfo.xingzhengchufanum_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="没收违法所得金额（万元)">{{
|
|
caseInfo.moshoujine_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="罚款金额（万元)">{{
|
|
caseInfo.fakuanjine_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="没收矿产品数量（吨)">{{
|
|
caseInfo.moshoushuliang_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="处罚附件">
|
|
<a-image-preview-group :preview="{ getContainer }">
|
|
<template v-for="(item, itemIndex) in chufafujianList" :key="itemIndex">
|
|
<a-image
|
|
v-if="showImage(item)"
|
|
style="width: 100px; height: 100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
|
:preview="{ getContainer }"
|
|
/>
|
|
<div v-else>
|
|
<Icon
|
|
v-if="item"
|
|
:style="`font-size: 30px; cursor: pointer;`"
|
|
icon="ion:document-attach-outline"
|
|
@click="downLoadFile(item)"
|
|
/>
|
|
{{ item }}
|
|
</div>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="落实到位文件">
|
|
<a-image-preview-group :preview="{ getContainer }">
|
|
<template v-for="(item, itemIndex) in luoshidaoweiwenjianList" :key="itemIndex">
|
|
<a-image
|
|
v-if="showImage(item)"
|
|
style="width: 100px; height: 100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
|
:preview="{ getContainer }"
|
|
/>
|
|
<div v-else>
|
|
<Icon
|
|
v-if="item"
|
|
:style="`font-size: 30px; cursor: pointer;`"
|
|
icon="ion:document-attach-outline"
|
|
@click="downLoadFile(item)"
|
|
/>
|
|
{{ item }}
|
|
</div>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="是否移送法院强制执行">{{
|
|
caseInfo.isqiangzhizhixing_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="查处人">{{
|
|
caseInfo.chachuren_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="查处时间">{{
|
|
caseInfo.chachutime_punish
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="6" tab="查处审核">
|
|
<a-divider>县级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="审核结果">{{
|
|
caseInfo.xianshenhejieguo_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.xianbohuinote_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核人">{{
|
|
caseInfo.xianshenheren_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核时间">{{
|
|
caseInfo.xianshenhetime_punish
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-divider>市级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="审核结果">{{
|
|
caseInfo.shishenhejieguo_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.shibohuinote_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="市级审核人">{{
|
|
caseInfo.shishenheren_punish
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="市级审核时间">{{
|
|
caseInfo.shishenhetime_punish
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="7" tab="整改">
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="情况说明">{{
|
|
caseInfo.qingkuangnote_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="现场照片">
|
|
<div class="image-div">
|
|
<a-image-preview-group
|
|
:preview="{
|
|
getContainer: getContainer,
|
|
onVisibleChange: handlerImageChange,
|
|
}"
|
|
>
|
|
<template
|
|
v-for="(imageItem, imageIndex) in zhenggaizhaopianList"
|
|
:key="imageIndex"
|
|
>
|
|
<a-image
|
|
v-if="imageItem"
|
|
@click="handlerPreviewImage(imageIndex, imageItem)"
|
|
width="100px"
|
|
height="100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
|
:preview="{
|
|
getContainer,
|
|
}"
|
|
/>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="附件">
|
|
<a-image-preview-group :preview="{ getContainer }">
|
|
<template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
|
|
<a-image
|
|
v-if="showImage(item)"
|
|
style="width: 100px; height: 100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
|
:preview="{ getContainer }"
|
|
/>
|
|
<div v-else>
|
|
<Icon
|
|
v-if="item"
|
|
:style="`font-size: 30px; cursor: pointer;`"
|
|
icon="ion:document-attach-outline"
|
|
@click="downLoadFile(item)"
|
|
/>
|
|
{{ item }}
|
|
</div>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="整改人">{{
|
|
caseInfo.zhenggairen_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="整改时间">{{
|
|
caseInfo.zhenggaitime_reform
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="8" tab="整改审核">
|
|
<a-divider>县级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="审核结果">{{
|
|
caseInfo.xianshenhejieguo_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.xianbohuinote_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核人">{{
|
|
caseInfo.xianshenheren_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核时间">{{
|
|
caseInfo.xianshenhetime_reform
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-divider>市级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="是否通过">{{
|
|
caseInfo.shishenhejieguo_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.shibohuinote_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="市级审核人">{{
|
|
caseInfo.shishenheren_reform
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="市级审核时间">{{
|
|
caseInfo.shishenhetime_reform
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
</template>
|
|
<a-tab-pane
|
|
key="3"
|
|
tab="审核"
|
|
v-if="caseInfo.typename == '开采' && caseInfo.hefapanding_fill != 2"
|
|
>
|
|
<a-divider>县级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="县级审核人">{{
|
|
caseInfo.xianshenheren_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="县级审核时间">{{
|
|
caseInfo.xianshenhetime_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否通过">{{
|
|
caseInfo.xianshenhejieguo_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.xianbohuinote_fill
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-divider>市级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="市级审核人">{{
|
|
caseInfo.shishenheren_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="市级审核时间">{{
|
|
caseInfo.shishenhetime_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="是否通过">{{
|
|
caseInfo.shishenhejieguo_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.shibohuinote_fill
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
|
|
<!-- 整改类型（加工） -->
|
|
<template v-if="caseInfo.typename == '加工' && caseInfo.hefapanding_jgfill == 2">
|
|
<a-tab-pane key="9" tab="整改">
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="整改类型">{{
|
|
caseInfo.zhenggaitype_jgzhg
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="保留承诺">{{
|
|
caseInfo.baoliuchengnuo_jgzhg
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="单位或个人名称">{{
|
|
caseInfo.danweiname_jgzhg
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="具体位置">{{
|
|
caseInfo.jutiweizhi_jgzhg
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="存在问题">{{
|
|
caseInfo.cunzaiwenti_jgzhg
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="图斑变化情况说明">{{
|
|
caseInfo.shuoming_jgzhg
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="现场照片-整改前">
|
|
<div class="image-div">
|
|
<a-image-preview-group
|
|
:preview="{
|
|
getContainer: getContainer,
|
|
onVisibleChange: handlerImageChange,
|
|
}"
|
|
>
|
|
<template
|
|
v-for="(imageItem, imageIndex) in zhenggaiqianzhaopianList"
|
|
:key="imageIndex"
|
|
>
|
|
<a-image
|
|
v-if="imageItem"
|
|
@click="handlerPreviewImage(imageIndex, imageItem)"
|
|
width="100px"
|
|
height="100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
|
:preview="{
|
|
getContainer,
|
|
}"
|
|
/>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="现场照片-整改后">
|
|
<div class="image-div">
|
|
<a-image-preview-group
|
|
:preview="{
|
|
getContainer: getContainer,
|
|
onVisibleChange: handlerImageChange,
|
|
}"
|
|
>
|
|
<template
|
|
v-for="(imageItem, imageIndex) in zhenggaihouzhaopianList"
|
|
:key="imageIndex"
|
|
>
|
|
<a-image
|
|
v-if="imageItem"
|
|
@click="handlerPreviewImage(imageIndex, imageItem)"
|
|
width="100px"
|
|
height="100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
|
:preview="{
|
|
getContainer,
|
|
}"
|
|
/>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="附件">
|
|
<a-image-preview-group :preview="{ getContainer }">
|
|
<template v-for="(item, itemIndex) in jiagongzhenggaifujianList" :key="itemIndex">
|
|
<a-image
|
|
v-if="showImage(item)"
|
|
style="width: 100px; height: 100px"
|
|
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
|
|
:preview="{ getContainer }"
|
|
/>
|
|
<div v-else>
|
|
<Icon
|
|
v-if="item"
|
|
:style="`font-size: 30px; cursor: pointer;`"
|
|
icon="ion:document-attach-outline"
|
|
@click="downLoadFile(item)"
|
|
/>
|
|
{{ item }}
|
|
</div>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="整改确认人">{{
|
|
caseInfo.zhenggairen_jgzhg
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="整改时间">{{
|
|
caseInfo.zhenggaitime_jgzhg
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="10" tab="审核">
|
|
<a-divider>县级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="审核结果">{{
|
|
caseInfo.xianshenhejieguo_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.xianbohuinote_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核人">{{
|
|
caseInfo.xianshenheren_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核时间">{{
|
|
caseInfo.xianshenhetime_fill
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-divider>市级审核</a-divider>
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="审核结果">{{
|
|
caseInfo.shishenhejieguo_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核意见">{{
|
|
caseInfo.shibohuinote_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核人">{{
|
|
caseInfo.shishenheren_fill
|
|
}}</a-descriptions-item>
|
|
<a-descriptions-item label="审核时间">{{
|
|
caseInfo.shishenhetime_fill
|
|
}}</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-tab-pane>
|
|
</template>
|
|
</a-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, ref, computed, onBeforeMount, onMounted } from 'vue';
|
|
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
|
import { getConfig, getGeom } from '@/api/sys/layerManagement';
|
|
import { getLoadCaseImgList } from '@/api/tiankongdi';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import axios from 'axios';
|
|
import Icon from '@/components/Icon/Icon.vue';
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
import { asyncGetOptions } from '@/utils/global';
|
|
import { getCaseInfoById } from '@/api/minerals/index';
|
|
|
|
const { createMessage } = useMessage();
|
|
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
|
|
|
const MapboxComponent = ref();
|
|
const mapConfig = ref({});
|
|
getConfig({ code: 'mapsetting' }).then((res) => {
|
|
mapConfig.value = JSON.parse(res.codeValue);
|
|
});
|
|
|
|
const props = defineProps(['id']);
|
|
const activeKey = ref('1');
|
|
|
|
const geomsList = ref();
|
|
const caseInfo: any = ref({});
|
|
function getCaseInfo() {
|
|
getCaseInfoById({ id: props.id }).then((res) => {
|
|
console.log(res);
|
|
caseInfo.value = res;
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
getCaseInfo();
|
|
getOptions();
|
|
});
|
|
const imageList = ref([]);
|
|
async function getCaseImgList() {
|
|
imageList.value = await getLoadCaseImgList({ caseid: props.id });
|
|
|
|
// 匹配去除无效图片
|
|
let zhengshiImageList = [];
|
|
imageList.value?.forEach((item, index) => {
|
|
let obj = anjianzhaopianList.value?.find((it, idx) => {
|
|
return item.filePath == it;
|
|
});
|
|
if (obj) {
|
|
zhengshiImageList.push(imageList.value[index]);
|
|
}
|
|
});
|
|
|
|
// console.log("imageList",imageList.value);
|
|
// console.log("anjianzhaopianList",anjianzhaopianList.value);
|
|
// console.log("zhengshiImageList",zhengshiImageList);
|
|
|
|
MapboxComponent.value.handlerLoadPictureAzimuth(zhengshiImageList);
|
|
}
|
|
|
|
function handlerPreviewImage(index, url) {
|
|
const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
|
|
const match = url.match(regex);
|
|
if (match) {
|
|
MapboxComponent.value.handlerCurrentImageChange(match[1]);
|
|
}
|
|
}
|
|
|
|
const isInitImageLisener = ref<Boolean>(false);
|
|
// 监听预览图片地址变化进行箭头切换
|
|
function handlerImageChange(e): void {
|
|
if (e && !isInitImageLisener.value) {
|
|
setTimeout(function () {
|
|
const targetNode = document.getElementsByClassName('ant-image-preview-img');
|
|
// 创建一个观察器实例，并传入回调函数
|
|
const observer = new MutationObserver((mutationsList) => {
|
|
for (const mutation of mutationsList) {
|
|
if (mutation.type === 'attributes') {
|
|
if (targetNode[0].getAttribute(mutation.attributeName).match('http')) {
|
|
handlerPreviewImage(0, targetNode[0].getAttribute(mutation.attributeName));
|
|
}
|
|
}
|
|
}
|
|
});
|
|
// 配置观察选项
|
|
const config = { attributes: true };
|
|
// 开始观察目标节点
|
|
observer.observe(targetNode[0], config);
|
|
isInitImageLisener.value = true;
|
|
}, 250);
|
|
}
|
|
}
|
|
|
|
onBeforeMount(() => {});
|
|
|
|
const anjianzhaopianList = computed(() => {
|
|
getCaseImgList();
|
|
return caseInfo.value.tubanpic_base ? caseInfo.value.tubanpic_base.split(',') : [];
|
|
});
|
|
const xianchangzhaopianList = computed(() => {
|
|
return caseInfo.value.zhaopian_fill ? caseInfo.value.zhaopian_fill.split(',') : [];
|
|
});
|
|
const zhenggaizhaopianList = computed(() => {
|
|
return caseInfo.value.zhaopian_reform ? caseInfo.value.zhaopian_reform.split(',') : [];
|
|
});
|
|
const zhenggaiqianzhaopianList = computed(() => {
|
|
return caseInfo.value.zhaopianqian_jgzhg ? caseInfo.value.zhaopianqian_jgzhg.split(',') : [];
|
|
});
|
|
const zhenggaihouzhaopianList = computed(() => {
|
|
return caseInfo.value.zhaopianhou_jgzhg ? caseInfo.value.zhaopianhou_jgzhg.split(',') : [];
|
|
});
|
|
|
|
const qitafujianList = computed(() => {
|
|
return caseInfo.value.fujian ? caseInfo.value.fujian.split(',') : [];
|
|
});
|
|
const chufafujianList = computed(() => {
|
|
return caseInfo.value.chufafile_punish ? caseInfo.value.chufafile_punish.split(',') : [];
|
|
});
|
|
const luoshidaoweiwenjianList = computed(() => {
|
|
return caseInfo.value.luoshifile_punish ? caseInfo.value.luoshifile_punish.split(',') : [];
|
|
});
|
|
const zhenggaifujianList = computed(() => {
|
|
return caseInfo.value.fujian_reform ? caseInfo.value.fujian_reform.split(',') : [];
|
|
});
|
|
const jiagongzhenggaifujianList = computed(() => {
|
|
return caseInfo.value.fujian_jgzhg ? caseInfo.value.fujian_jgzhg.split(',') : [];
|
|
});
|
|
|
|
function onMapboxLoad() {
|
|
changeTask();
|
|
}
|
|
const kcpandingjieguo = ref([]);
|
|
const hefaqingxing = ref([]);
|
|
const kaicaiweifa = ref([]);
|
|
const zhutileixing = ref([]);
|
|
const jiagongweifa = ref([]);
|
|
async function getOptions() {
|
|
kcpandingjieguo.value = await asyncGetOptions('kcpandingjieguo');
|
|
hefaqingxing.value = await asyncGetOptions('hefaqingxing');
|
|
kaicaiweifa.value = await asyncGetOptions('kaicaiweifa');
|
|
zhutileixing.value = await asyncGetOptions('zhutileixing');
|
|
jiagongweifa.value = await asyncGetOptions('jiagongweifa');
|
|
}
|
|
const getLabel = (type, value) => {
|
|
let result: any[] = [];
|
|
let label = '';
|
|
switch (type) {
|
|
case 'hefapanding_fill':
|
|
result = kcpandingjieguo.value;
|
|
break;
|
|
case 'hefaqingxing_kcfill':
|
|
result = hefaqingxing.value;
|
|
break;
|
|
case 'weifaleixing':
|
|
result = kaicaiweifa.value;
|
|
break;
|
|
case 'zhutitype_kcfill':
|
|
result = zhutileixing.value;
|
|
break;
|
|
case 'weifatype_jgfill':
|
|
result = jiagongweifa.value;
|
|
break;
|
|
}
|
|
result.forEach((item) => {
|
|
if (item.value == value) {
|
|
label = item.label;
|
|
}
|
|
});
|
|
return label;
|
|
};
|
|
const getName = (value) => {
|
|
let name = '';
|
|
if (value == 1) {
|
|
name = '是';
|
|
} else if (value == 2) {
|
|
name = '否';
|
|
}
|
|
return name;
|
|
};
|
|
async function changeTask() {
|
|
let getGeomPrams = {
|
|
TableName: 'drone_shp_data ',
|
|
FieldName: 'gid',
|
|
FieldValue: caseInfo.value.geomid?.split(','),
|
|
page: 1,
|
|
limit: 999,
|
|
key: null,
|
|
};
|
|
if (caseInfo.value.geomid) {
|
|
getGeom(getGeomPrams).then((res) => {
|
|
let geoms = [];
|
|
if (res) {
|
|
if (res.items?.length > 0) {
|
|
res.items.forEach((item, index) => {
|
|
let geom = {
|
|
key: item.gid,
|
|
mapgeom: item.geometry,
|
|
};
|
|
geoms.push(geom);
|
|
geomsList.value = geoms;
|
|
});
|
|
}
|
|
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
|
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
|
} else {
|
|
geomsList.value = null;
|
|
createMessage.error('当前数据没有图斑！');
|
|
}
|
|
});
|
|
} else {
|
|
createMessage.error('当前数据没有图斑！');
|
|
}
|
|
}
|
|
const downLoadFile = (url) => {
|
|
if (url.indexOf('.pdf') !== -1) {
|
|
axios({
|
|
method: 'get',
|
|
url: `${VITE_GLOB_INFO_IMAGE_URL}/${url}`,
|
|
responseType: 'blob',
|
|
headers: {
|
|
'Content-Disposition': 'inline',
|
|
},
|
|
})
|
|
.then((response) => {
|
|
let blob = new Blob([response.data], { type: 'application/pdf' });
|
|
let url = window.URL.createObjectURL(blob);
|
|
window.open(url);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
});
|
|
} else {
|
|
window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, '_blank');
|
|
}
|
|
};
|
|
const getContainer = () => {
|
|
return document.getElementById('info-container');
|
|
};
|
|
const dataProcessing = (value) => {
|
|
if (!value) {
|
|
return '0';
|
|
}
|
|
if (value.indexOf('.') == -1) {
|
|
return value;
|
|
} else {
|
|
if (value.split('.')[1].length <= 2) {
|
|
return value;
|
|
}
|
|
let resultString = value.replace('㎡', '');
|
|
return Number(resultString).toFixed(2);
|
|
}
|
|
};
|
|
const showImage = (url) => {
|
|
if (url.indexOf('.png') !== -1 || url.indexOf('.jpg') !== -1 || url.indexOf('.jpeg') !== -1) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-div {
|
|
min-width: 340px;
|
|
max-height: 220px;
|
|
overflow: auto;
|
|
}
|
|
.detail-container {
|
|
width: 100vw;
|
|
height: calc(100vh - 120px);
|
|
display: flex;
|
|
padding: 0px 20px;
|
|
}
|
|
.detail-container::after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
height: 0;
|
|
visibility: none;
|
|
}
|
|
.map-container {
|
|
float: left;
|
|
width: 45vw;
|
|
height: calc(100vh - 100px);
|
|
margin-right: 20px;
|
|
}
|
|
:deep(.ant-image) {
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
:deep(.ant-image-preview-switch-left) {
|
|
position: absolute;
|
|
}
|
|
:deep(.ant-image-preview-switch-right) {
|
|
position: absolute;
|
|
}
|
|
.info-container {
|
|
// float: left;
|
|
position: relative;
|
|
flex: 1;
|
|
:deep(.ant-image-preview-wrap) {
|
|
position: absolute;
|
|
}
|
|
:deep(.ant-image-preview-mask) {
|
|
position: absolute;
|
|
}
|
|
:deep(.ant-image-preview-operations-wrapper) {
|
|
height: 100%;
|
|
position: absolute;
|
|
.ant-image-preview-operations {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
.ant-image-preview-operations-operation {
|
|
// flex:1;
|
|
}
|
|
}
|
|
.ant-image-preview-operations-operation:nth-last-child(1) {
|
|
display: none;
|
|
}
|
|
.ant-image-preview-operations-operation:nth-last-child(2) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .ant-tabs .ant-tabs-content-holder {
|
|
overflow: auto;
|
|
height: 80vh;
|
|
overflow: auto;
|
|
padding-right: 10px;
|
|
}
|
|
</style>
|