436 lines
15 KiB
Vue
436 lines
15 KiB
Vue
<template>
|
||
<div class="case-view">
|
||
<div class="case-view_step">
|
||
<a-steps v-model:current="current" type="navigation" size="small" :style="stepStyle">
|
||
<a-step
|
||
v-for="(item, index) in flowLog"
|
||
:key="index"
|
||
:title="item.name"
|
||
:status="item.state"
|
||
:disabled="item.status == 0 ? true : false"
|
||
/>
|
||
</a-steps>
|
||
</div>
|
||
<div class="case-view_content">
|
||
<div class="file-box w-1/2 xl:w-1/2" v-if="caseHandleInfo">
|
||
<CollapseContainer
|
||
title="【图斑下发信息】"
|
||
:canExpan="false"
|
||
v-if="current == 0 || current == 4"
|
||
>
|
||
<Issue :data="detailData"></Issue>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑核查信息】"
|
||
:canExpan="false"
|
||
v-if="current == 1 || current == 4"
|
||
>
|
||
<Inspect
|
||
:data="caseHandleInfo"
|
||
:playerOptions="playerOptions"
|
||
:threadImageList="threadImageList"
|
||
></Inspect>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑办理信息-合法举证】"
|
||
:canExpan="false"
|
||
v-if="
|
||
(caseHandleInfo.is_illegal == '合法' && current == 2) ||
|
||
(caseHandleInfo.is_illegal == '合法' && current == 4)
|
||
"
|
||
>
|
||
<Evidence
|
||
:data="caseHandleInfo"
|
||
:evidenceFileList="evidenceFileList"
|
||
:boundaryImageList="boundaryImageList"
|
||
></Evidence>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑办理信息-伪变化】"
|
||
:canExpan="false"
|
||
v-if="
|
||
(caseHandleInfo.is_illegal == '伪变化' && current == 2) ||
|
||
(caseHandleInfo.is_illegal == '伪变化' && current == 4)
|
||
"
|
||
>
|
||
<div> 伪变化没有图斑办理信息 </div>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑办理信息-违法-拟拆除】"
|
||
:canExpan="false"
|
||
v-if="
|
||
(caseHandleInfo.is_illegal == '违法' &&
|
||
caseHandleInfo.info.measure_name == '拟拆除' &&
|
||
current == 2) ||
|
||
(caseHandleInfo.is_illegal == '违法' &&
|
||
caseHandleInfo.info.measure_name == '拟拆除' &&
|
||
current == 4)
|
||
"
|
||
>
|
||
<Dismantle :data="caseHandleInfo" :videoOptions="videoOptions"></Dismantle>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑办理信息-违法-查处】"
|
||
:canExpan="false"
|
||
v-if="
|
||
(caseHandleInfo.is_illegal == '违法' &&
|
||
caseHandleInfo.info.measure_name == '查处' &&
|
||
current == 2) ||
|
||
(caseHandleInfo.is_illegal == '违法' &&
|
||
caseHandleInfo.info.measure_name == '查处' &&
|
||
current == 4)
|
||
"
|
||
>
|
||
<Investigate
|
||
:data="caseHandleInfo"
|
||
:paymentImageList="paymentImageList"
|
||
:punishImageList="punishImageList"
|
||
></Investigate>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑办理信息-违法-拟完善手续】"
|
||
:canExpan="false"
|
||
v-if="
|
||
(caseHandleInfo.is_illegal == '违法' &&
|
||
caseHandleInfo.info.measure_name == '拟完善手续' &&
|
||
current == 2) ||
|
||
(caseHandleInfo.is_illegal == '违法' &&
|
||
caseHandleInfo.info.measure_name == '拟完善手续' &&
|
||
current == 4)
|
||
"
|
||
>
|
||
<Procedure
|
||
:data="caseHandleInfo"
|
||
:agreeImageList="agreeImageList"
|
||
:checkoutImageList="checkoutImageList"
|
||
:boundaryImageList="boundaryImageList"
|
||
></Procedure>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑审核信息】"
|
||
:canExpan="false"
|
||
v-if="current == 3 || current == 4"
|
||
>
|
||
<Audit :data="flowLog[3]"></Audit>
|
||
</CollapseContainer>
|
||
|
||
<CollapseContainer
|
||
title="【图斑退回描述】"
|
||
:canExpan="false"
|
||
v-if="detailData.is_drawback == 1"
|
||
>
|
||
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
|
||
<a-descriptions-item label="退回描述">
|
||
{{ detailData.drawback_description }}
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
</CollapseContainer>
|
||
</div>
|
||
<CollapseContainer title="地图位置" :canExpan="false" class="map-box ml-1 w-1/2 xl:w-1/2">
|
||
<MapDetail :ruleForm="detailData" :isOnce="true"></MapDetail>
|
||
</CollapseContainer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
// 已归档 202205020912205393
|
||
// 拟拆除 202404181541067344
|
||
import { ref, onMounted, reactive, watch } from 'vue';
|
||
import { getCaseFlowLog, getCaseInfo, getDroneCaseDeal } from '@/api/monitor/index';
|
||
import { fileListModel, fileList } from '@/api/monitor/model/index';
|
||
import { CollapseContainer } from '@/components/Container';
|
||
import {
|
||
Issue,
|
||
Inspect,
|
||
Audit,
|
||
Dismantle,
|
||
MapDetail,
|
||
Evidence,
|
||
Investigate,
|
||
Procedure,
|
||
} from '../index';
|
||
const BASE_IMAGE_URL = ref('http://192.168.104:9011');
|
||
const current = ref<number>(0);
|
||
const stepStyle = ref({
|
||
marginBottom: '60px',
|
||
boxShadow: '0px -1px 0 0 #e8e8e8 inset',
|
||
});
|
||
const labelStyle = ref({
|
||
width: '100px',
|
||
});
|
||
const props = defineProps({
|
||
caseId: String,
|
||
});
|
||
console.log(props);
|
||
watch(
|
||
() => props.caseId,
|
||
(newVal, oldVal) => {
|
||
console.log(newVal);
|
||
getCaseFlowLogData();
|
||
loadDetailCaseInfo();
|
||
getCaseHandleInfo();
|
||
},
|
||
);
|
||
const detailData = ref();
|
||
const caseHandleInfo = ref();
|
||
const playerOptions = ref();
|
||
//现场照片
|
||
const threadImageList = ref<fileListModel>([]);
|
||
// 整改后、处理后照片
|
||
const threadAfterImageList = ref<any>([]);
|
||
// 视频
|
||
const videoOptions = ref();
|
||
//合法举证材料列表
|
||
const evidenceFileList = ref<fileListModel>([]);
|
||
// 勘测定界图
|
||
const boundaryImageList = ref<fileListModel>([]);
|
||
//处罚通知书照片
|
||
const punishImageList = ref<fileListModel>([]);
|
||
//交罚款通知书照片
|
||
const paymentImageList = ref<fileListModel>([]);
|
||
//政府同意完善手续证明照片
|
||
const agreeImageList = ref<fileListModel>([]);
|
||
//办理手续证明照片
|
||
const checkoutImageList = ref<fileListModel>([]);
|
||
|
||
const flowLog = ref();
|
||
// 获取步骤条数据
|
||
async function getCaseFlowLogData() {
|
||
current.value = 0;
|
||
const data = await getCaseFlowLog({ id: props.caseId });
|
||
flowLog.value = data;
|
||
if (flowLog.value.length == 4 && flowLog.value[1].status == 1) {
|
||
let obj = {
|
||
name: '伪变化',
|
||
status: 1,
|
||
time: '',
|
||
state: 'finish',
|
||
user_name: '',
|
||
};
|
||
flowLog.value.splice(2, 0, obj);
|
||
}
|
||
current.value = 0;
|
||
flowLog.value.forEach((item, index) => {
|
||
current.value = current.value + item.status;
|
||
if (flowLog.value[index].status == 1) {
|
||
flowLog.value[index].state = 'finish';
|
||
} else {
|
||
flowLog.value[index].state = 'wait';
|
||
}
|
||
});
|
||
if (current.value != 0) {
|
||
current.value--;
|
||
}
|
||
}
|
||
// 获取详情
|
||
async function loadDetailCaseInfo() {
|
||
const data = await getCaseInfo({ id: props.caseId });
|
||
console.log(data);
|
||
detailData.value = data;
|
||
}
|
||
// 获取处理详情
|
||
async function getCaseHandleInfo() {
|
||
const data = await getDroneCaseDeal({ caseid: props.caseId });
|
||
console.log(data);
|
||
caseHandleInfo.value = data;
|
||
if (caseHandleInfo.value.is_illegal == 0) {
|
||
caseHandleInfo.value.is_illegal = '合法';
|
||
} else if (caseHandleInfo.value.is_illegal == 1) {
|
||
caseHandleInfo.value.is_illegal = '违法';
|
||
} else if (caseHandleInfo.value.is_illegal == 2) {
|
||
caseHandleInfo.value.is_illegal = '伪变化';
|
||
}
|
||
// 视频
|
||
playerOptions.value = [];
|
||
if (data.video_list.length > 0) {
|
||
data.video_list.forEach((item, index) => {
|
||
let options = {
|
||
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
|
||
autoplay: false, //如果true,浏览器准备好时开始回放。
|
||
muted: false, // 默认情况下将会消除任何音频。
|
||
loop: false, // 视频一结束就重新开始。
|
||
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||
language: 'zh-CN',
|
||
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||
sources: [
|
||
{
|
||
type: '',
|
||
src: BASE_IMAGE_URL + '/' + item, //url地址
|
||
},
|
||
],
|
||
poster: '', //你的封面地址
|
||
// width: document.documentElement.clientWidth,
|
||
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||
controlBar: {
|
||
timeDivider: true, //当前时间和持续时间的分隔符
|
||
durationDisplay: true, //显示持续时间
|
||
remainingTimeDisplay: false, //是否显示剩余时间功能
|
||
fullscreenToggle: true, //全屏按钮
|
||
},
|
||
};
|
||
playerOptions.value.push(options);
|
||
});
|
||
}
|
||
// 现场照片
|
||
if (data.pic_info_list.length > 0) {
|
||
data.pic_info_list.forEach((item) => {
|
||
threadImageList.value.push(item.filePath);
|
||
});
|
||
for (let i = 0; i < threadImageList.value.length; i++) {
|
||
let obj = {
|
||
filePath: BASE_IMAGE_URL + '/' + threadImageList.value[i],
|
||
s_filePath: BASE_IMAGE_URL + '/S_' + threadImageList.value[i],
|
||
};
|
||
threadImageList.value[i] = obj;
|
||
}
|
||
}
|
||
|
||
// 处理后照片 整改后照片 恢复后照片
|
||
if (data.after_pic_list.length > 0) {
|
||
threadAfterImageList.value = [];
|
||
data.after_pic_list.forEach((item: fileList) => {
|
||
threadAfterImageList.value.push(BASE_IMAGE_URL + '/S_' + item.filePath);
|
||
});
|
||
}
|
||
|
||
// 处理后视频
|
||
videoOptions.value = [];
|
||
if (data.remove_video_list.length > 0) {
|
||
videoOptions.value = [];
|
||
data.remove_video_list.forEach((item, index) => {
|
||
let options = {
|
||
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
|
||
autoplay: false, //如果true,浏览器准备好时开始回放。
|
||
muted: false, // 默认情况下将会消除任何音频。
|
||
loop: false, // 视频一结束就重新开始。
|
||
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||
language: 'zh-CN',
|
||
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||
sources: [
|
||
{
|
||
type: '',
|
||
src: BASE_IMAGE_URL + '/' + item, //url地址
|
||
},
|
||
],
|
||
poster: '', //你的封面地址
|
||
// width: document.documentElement.clientWidth,
|
||
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||
controlBar: {
|
||
timeDivider: true, //当前时间和持续时间的分隔符
|
||
durationDisplay: true, //显示持续时间
|
||
remainingTimeDisplay: false, //是否显示剩余时间功能
|
||
fullscreenToggle: true, //全屏按钮
|
||
},
|
||
};
|
||
videoOptions.value.push(options);
|
||
});
|
||
}
|
||
// 合法 - 举证材料合法文件 evidence_file_list
|
||
if (data.evidence_file_list.length > 0) {
|
||
evidenceFileList.value = [];
|
||
data.evidence_file_list.forEach((item: fileList) => {
|
||
let obj = {
|
||
filePath: BASE_IMAGE_URL + '/' + item.filePath,
|
||
s_filePath: BASE_IMAGE_URL + '/' + item.filePath,
|
||
};
|
||
evidenceFileList.value.push(obj);
|
||
});
|
||
}
|
||
|
||
if (data.boundary_pic_list.length > 0) {
|
||
boundaryImageList.value = [];
|
||
data.boundary_pic_list.forEach((item) => {
|
||
let obj = {
|
||
filePath: BASE_IMAGE_URL + '/' + item,
|
||
s_filePath: BASE_IMAGE_URL + '/' + item,
|
||
};
|
||
boundaryImageList.value.push(obj);
|
||
});
|
||
}
|
||
|
||
// 违法 查处 - 处罚通知书 punish_pic_list
|
||
if (data.punish_pic_list.length > 0) {
|
||
punishImageList.value = [];
|
||
data.punish_pic_list.forEach((item) => {
|
||
let obj = {
|
||
filePath: BASE_IMAGE_URL + '/' + item,
|
||
s_filePath: BASE_IMAGE_URL + '/S_' + item,
|
||
};
|
||
punishImageList.value.push(obj);
|
||
});
|
||
}
|
||
|
||
// 违法 查处 - 交款通知书 payment_pic_list
|
||
if (data.payment_pic_list.length > 0) {
|
||
paymentImageList.value = [];
|
||
data.payment_pic_list.forEach((item) => {
|
||
let obj = {
|
||
filePath: BASE_IMAGE_URL + '/' + item,
|
||
s_filePath: BASE_IMAGE_URL + '/S_' + item,
|
||
};
|
||
paymentImageList.value.push(obj);
|
||
});
|
||
}
|
||
|
||
// 违法 完善手续 - 政府同意完善手续证明 agree_checkout_pic_list
|
||
if (data.agree_checkout_pic_list.length > 0) {
|
||
agreeImageList.value = [];
|
||
data.agree_checkout_pic_list.forEach((item) => {
|
||
let obj = {
|
||
filePath: BASE_IMAGE_URL + '/' + item,
|
||
s_filePath: BASE_IMAGE_URL + '/S_' + item,
|
||
};
|
||
agreeImageList.value.push(obj);
|
||
});
|
||
}
|
||
|
||
// 违法 完善手续 - 办理手续 checkout_pic_list
|
||
if (data.checkout_pic_list.length > 0) {
|
||
checkoutImageList.value = [];
|
||
data.checkout_pic_list.forEach((item) => {
|
||
let obj = {
|
||
filePath: BASE_IMAGE_URL + '/' + item,
|
||
s_filePath: BASE_IMAGE_URL + '/S_' + item,
|
||
};
|
||
checkoutImageList.value.push(obj);
|
||
});
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getCaseFlowLogData();
|
||
loadDetailCaseInfo();
|
||
getCaseHandleInfo();
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.case-view {
|
||
padding: 20px 32px;
|
||
background-color: @component-background;
|
||
|
||
&__step {
|
||
padding: 24px 40px;
|
||
background-color: @app-content-background;
|
||
}
|
||
&_content {
|
||
display: flex;
|
||
height: 65vh;
|
||
.file-box {
|
||
overflow: auto;
|
||
}
|
||
}
|
||
}
|
||
.map-box {
|
||
height: 100%;
|
||
}
|
||
</style>
|