Merge branch 'ly'

src/api/monitor/index.ts

@@ -1,7 +1,7 @@
 
 // WFProcess 流程模版基本信息 
 import { defHttp } from '@/utils/http/axios';
-import { caseFlowLogParams , flowLogModel} from './model/index'
+import { caseFlowLogParams , flowLogModel , droneCaseDealModel ,droneCaseDealParams} from './model/index'
 
 enum Api {
   // 获取案件详情步骤条
@@ -12,7 +12,8 @@ enum Api {
    GetCaseInfo = '/api/DroneCaseinfo/GetCaseInfo',
   // 案件列表
   LoadCaseInfoList = '/api/DroneCaseinfo/LoadCaseInfoList',
-  
+  // 获取GeoJson图层
+  GetDroneGeoJson='/api/DroneCaseinfo/GetDroneGeoJson'
 }
 
 /**
@@ -24,8 +25,8 @@ enum Api {
 /**
  * @description: getCaseFlowLog
  */
-export function getDroneCaseDeal(params?: caseFlowLogParams) {
+export function getDroneCaseDeal(params?: droneCaseDealParams) {
-  return defHttp.get<flowLogModel>({ url: Api.GetDroneCaseDeal, params });
+  return defHttp.get<droneCaseDealModel>({ url: Api.GetDroneCaseDeal, params });
 }
 /**
  * @description: getCaseFlowLog
@@ -39,4 +40,11 @@ export function getCaseInfo(params?: caseFlowLogParams) {
 export function getCaseInfoList(params?: caseFlowLogParams) {
   return defHttp.get<flowLogModel>({ url: Api.LoadCaseInfoList, params });
 }
+/**
+ * @description: getCaseFlowLog
+ */
+export function getDroneGeoJson(params?: caseFlowLogParams) {
+  return defHttp.get<flowLogModel>({ url: Api.GetDroneGeoJson, params });
+}
+
 

src/api/monitor/model/index.ts

@@ -1,6 +1,9 @@
 export interface caseFlowLogParams {
   id?: string;
 }
+export interface droneCaseDealParams{
+  caseid?:string;
+}
 export interface flowLog {
   name: string;
   time: string;
@@ -9,3 +12,23 @@ export interface flowLog {
   state?:string;
 }
 export type flowLogModel = flowLog[];
+
+export interface fileList{
+  filePath?:string | undefined;
+  s_filePath?:string;
+}
+export type fileListModel = fileList[];
+
+export type droneCaseDealModel = {
+  video_list?: any;
+  pic_info_list?: any;
+  after_pic_list?: any;
+  remove_video_list?: any;
+  evidence_file_list?: any;
+  boundary_pic_list?: any;
+  punish_pic_list?: any;
+  payment_pic_list?: any;
+  agree_checkout_pic_list?: any;
+  checkout_pic_list?: any;
+  
+}

src/views/demo/monitor/caselist/index.vue

@@ -39,7 +39,7 @@
   import { PermissionBtn } from '@/components/PermissionBtn/index';
   import { searchFormSchema, columns } from './list.data';
   import { BasicModal, useModal } from '@/components/Modal';
-  import { CaseView } from '../index';
+  import { CaseView } from '@/views/demo/monitor/index';
   const { createConfirm, createMessage } = useMessage();
   const searchInfo = reactive<Recordable>({});
 

src/views/demo/monitor/caseview/index.vue

@@ -6,7 +6,6 @@
         type="navigation"
         size="small"
         :style="stepStyle"
-        @change="setpChange"
       >
         <a-step
           v-for="(item, index) in flowLog"
@@ -18,23 +17,129 @@
       </a-steps>
     </div>
     <div class="case-view_content">
-      <CollapseContainer :title="descriptionTitle" :canExpan="false" class="w-1/2 xl:w-1/2">
+      <div class="file-box w-1/2 xl:w-1/2" v-if="caseHandleInfo">
-        <Issue v-if="currentName == '下发'" :data="detailData"></Issue>
+        <CollapseContainer
-        <Inspect
+          title="【案件下发信息】"
-          v-else-if="currentName == '核查'"
+          :canExpan="false"
-          :data="caseHandleInfo"
+          v-if="current == 0 || current == 4"
-          :playerOptions="playerOptions"
+        >
-          :threadImageList="threadImageList"
+          <Issue :data="detailData"></Issue>
-        ></Inspect>
+        </CollapseContainer>
-        <Audit v-else-if="currentName == '审核'" :data="flowLog[3]"></Audit>
+
-        <div v-else-if="currentName == '伪变化'"> 伪变化没有案件办理信息 </div>
+        <CollapseContainer
-        <Dismantle
+          title="【案件核查信息】"
-          v-else-if="currentName == '拟拆除'"
+          :canExpan="false"
-          :data="caseHandleInfo"
+          v-if="current == 1 || current == 4"
-          :videoOptions="videoOptions"
+        >
-        ></Dismantle>
+          <Inspect
-      </CollapseContainer>
+            :data="caseHandleInfo"
-      <CollapseContainer title="地图位置" :canExpan="false" class="ml-1 w-1/2 xl:w-1/2">
+            :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>
@@ -44,80 +149,63 @@
   // 拟拆除 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 } from '../index';
+  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 currentName = ref('下发');
   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) => {
-      // getCaseFlowLogData();
+      console.log(newVal);
+      getCaseFlowLogData();
       loadDetailCaseInfo();
       getCaseHandleInfo();
     },
   );
-  const descriptionTitle = ref('案件下发信息');
   const detailData = ref();
   const caseHandleInfo = ref();
   const playerOptions = ref();
   //现场照片
-  const threadImageList = ref([]);
+  const threadImageList = ref<fileListModel>([]);
   // 整改后、处理后照片
-  const threadAfterImageList = ref([]);
+  const threadAfterImageList = ref<any>([]);
   //   视频
   const videoOptions = ref();
   //合法举证材料列表
-  const evidenceFileList = ref([]);
+  const evidenceFileList = ref<fileListModel>([]);
   //   勘测定界图
-  const boundaryImageList = ref([]);
+  const boundaryImageList = ref<fileListModel>([]);
   //处罚通知书照片
-  const punishImageList = ref([]);
+  const punishImageList = ref<fileListModel>([]);
   //交罚款通知书照片
-  const paymentImageList = ref([]);
+  const paymentImageList = ref<fileListModel>([]);
   //政府同意完善手续证明照片
-  const agreeImageList = ref([]);
+  const agreeImageList = ref<fileListModel>([]);
   //办理手续证明照片
-  const checkoutImageList = ref([]);
+  const checkoutImageList = ref<fileListModel>([]);
 
-  const flowLog = ref([
+  const flowLog = ref();
-    {
-      status: 1,
-      name: '下发',
-      user_name: '孙月芝',
-      state: 'finish',
-      time: '2024-04-23 09:22:51',
-    },
-    {
-      status: 1,
-      name: '核查',
-      user_name: '',
-      time: '',
-      state: 'finish',
-    },
-    { name: '伪变化', status: 1, time: '', user_name: '', state: 'finish' },
-    {
-      status: 1,
-      name: '审核',
-      user_name: '',
-      state: 'finish',
-      time: '',
-    },
-    {
-      status: 1,
-      name: '归档',
-      user_name: '',
-      state: 'finish',
-      time: '',
-    },
-  ]);
   //   获取步骤条数据
   async function getCaseFlowLogData() {
     current.value = 0;
@@ -128,7 +216,7 @@
         name: '伪变化',
         status: 1,
         time: '',
-        state: '',
+        state: 'finish',
         user_name: '',
       };
       flowLog.value.splice(2, 0, obj);
@@ -142,237 +230,20 @@
         flowLog.value[index].state = 'wait';
       }
     });
-    if (current.value == 0) {
+    if (current.value != 0) {
-      current.value = 1;
+      current.value--;
     }
-    flowLog.value[current.value - 1].state = 'success';
   }
   //   获取详情
   async function loadDetailCaseInfo() {
-    // const data = await getCaseInfo({id:props.caseId})
+    const data = await getCaseInfo({ id: props.caseId });
-    const data = {
-      lng: 118.042605,
-      lat: 35.10077,
-      work_area: '',
-      info: {
-        id: 'a310575e-9734-42cb-a3f2-e3361eb32505',
-        case_no: '202404221357378830',
-        case_name: null,
-        case_description: '豹窝村 疑似新增简易棚',
-        start_time: null,
-        end_time: null,
-        address: '',
-        lng: 118.042415,
-        lat: 35.100842,
-        typeid: '64560cc6-0ce9-4fc0-a6de-31d6c83892cc',
-        typename: '非农化-建设',
-        handle_status_id: 1,
-        handle_status_name: '待审核',
-        case_status_id: null,
-        case_status_name: null,
-        createtime: '2024-04-22 13:57:37',
-        createuser: 'f10c0e32-8e53-4ec8-8712-e93c2f07488b',
-        createusername: '葛孝城',
-        drone_no: null,
-        deal_userid: '356d6ae4-bf0e-4a37-8a7f-f7f291894ba2',
-        deal_username: '王大刚',
-        is_delete: 0,
-        countyid: 'e49b02f6-70b0-4f47-bdda-41a69002be11',
-        countyname: '费县',
-        streetid: 'c0069852-a10c-4017-b8da-3386c165968e',
-        streetname: '马庄镇',
-        communityid: 'f2b31306-655a-4558-8c0b-bc683dd2cf17',
-        communityname: '豹窝村',
-        remark: '疑似新建',
-        is_closed: 0,
-        area: '35.79',
-        is_illegal: 2,
-        close_user: null,
-        close_time: null,
-        identification_user: '许婷',
-        identification_time: '2024-04-22 14:11:19',
-        is_intact: 1,
-        close_userid: null,
-        identification_userid: '834ff436-d931-4da9-9c4f-859e5c90b369',
-        verifyuserid: null,
-        verifyuser: null,
-        verifytime: null,
-        is_improve: 0,
-        improve_reason: null,
-        is_dispense: null,
-        dispense_userid: null,
-        dispense_time: null,
-        dispense_username: null,
-        verifystatus: 0,
-        verifystatusname: '国土所长（乡镇）',
-        is_checked: null,
-        deal_time: '2024-04-22 16:51:32',
-        pre_phase_time: '2024-04-22 00:00:00',
-        later_phase_time: '2024-04-22 00:00:00',
-        pre_phase_img: '',
-        later_phase_img: '',
-        is_verification: null,
-        verification_userid: null,
-        verification_username: null,
-        verification_time: null,
-        is_drawback: null,
-        drawbackcount: null,
-        back_to_userid: null,
-        back_to_username: null,
-        drawback_type: null,
-        drawback_description: null,
-        is_tentative_complete: null,
-        tentative_userid: null,
-        tentative_username: null,
-        tentative_time: null,
-        is_examine: 1,
-        examiner_id: '356d6ae4-bf0e-4a37-8a7f-f7f291894ba2',
-        examiner_name: '王大刚',
-        examine_time: '2024-04-22 16:51:32',
-        measure_name: null,
-      },
-      pic_list: [
-        'DroneEnforcement\\2024\\20240422\\2024042213573513520131.png',
-        'DroneEnforcement\\2024\\20240422\\2024042214105714450132.jpg',
-        'DroneEnforcement\\2024\\20240422\\2024042214110534770120.jpg',
-      ],
-      video_list: [],
-      relationCaseNo: [],
-      tags: [],
-      pics: [
-        {
-          id: '9f94cde6-dcf9-42fe-8ed5-097ecd7d053f',
-          path: 'DroneEnforcement\\2024\\20240422\\2024042213573513520131.png',
-          type: 0,
-          tablename: 'drone_caseinfo',
-          createtime: '2024-04-22 13:57:38',
-          createuser: 'f10c0e32-8e53-4ec8-8712-e93c2f07488b',
-          createusername: '葛孝城',
-          is_delete: 0,
-          relid: 'a310575e-9734-42cb-a3f2-e3361eb32505',
-          latitude: null,
-          longitude: null,
-          angle: null,
-          tag: null,
-        },
-        {
-          id: '643781da-c7ba-4591-ade7-1413630f7a6f',
-          path: 'DroneEnforcement\\2024\\20240422\\2024042214105714450132.jpg',
-          type: 0,
-          tablename: 'drone_caseinfo',
-          createtime: '2024-04-22 14:11:15',
-          createuser: '834ff436-d931-4da9-9c4f-859e5c90b369',
-          createusername: '许婷',
-          is_delete: 0,
-          relid: 'a310575e-9734-42cb-a3f2-e3361eb32505',
-          latitude: null,
-          longitude: null,
-          angle: null,
-          tag: null,
-        },
-        {
-          id: 'b104cfd0-6ff1-48af-a6f4-ee960930b947',
-          path: 'DroneEnforcement\\2024\\20240422\\2024042214110534770120.jpg',
-          type: 0,
-          tablename: 'drone_caseinfo',
-          createtime: '2024-04-22 14:11:15',
-          createuser: '834ff436-d931-4da9-9c4f-859e5c90b369',
-          createusername: '许婷',
-          is_delete: 0,
-          relid: 'a310575e-9734-42cb-a3f2-e3361eb32505',
-          latitude: null,
-          longitude: null,
-          angle: null,
-          tag: null,
-        },
-      ],
-      videos: [],
-    };
     console.log(data);
     detailData.value = data;
   }
   //   获取处理详情
   async function getCaseHandleInfo() {
-    // const data = await getDroneCaseDeal({ id: props.caseId });
+    const data = await getDroneCaseDeal({ caseid: props.caseId });
-    const data = {
+    console.log(data);
-      is_temp_save: null,
-      info: {
-        id: '44576eda-405e-4029-b0b5-afe217022a5b',
-        caseid: '17f33737-3d89-43be-95fe-16fdbcbe11c8',
-        opinion: null,
-        result: null,
-        result_name: '实地未变化',
-        opinion_name: null,
-        createtime: '2022-05-22 16:37:10',
-        createuser: '4370859c-7c63-4c04-9d07-90a483aa376c',
-        createusername: '王昌福',
-        is_delete: 0,
-        is_assist: 0,
-        assist_people: null,
-        assist_company: null,
-        measure_name: '其他',
-        illegal_contact: '王贵安',
-        illegal_contact_phone: '15964889218',
-        actual_scene_case: '烟苗培育鹏',
-        investigation_type: null,
-        investigation_result: null,
-        registr_number: null,
-        is_build_complete: null,
-        evidence_file_name: null,
-        evidence_file_number: null,
-        evidence_file_indate: null,
-        actual_use_to: null,
-        pseudo_change_reason: null,
-        illegal_contact_idcard: null,
-        contacts_people: null,
-        contacts_phone: null,
-        scene_verification_condition: null,
-        scene_deal_condition: null,
-        expiry_date: null,
-        build_structure: null,
-        actual_area: null,
-        is_have_build: null,
-        is_forever_build: null,
-        transactor_id: null,
-        transactor_name: null,
-        transact_time: null,
-        examiner_id: null,
-        examiner_name: null,
-        examine_time: null,
-        illegal_type: null,
-        procedure_indate: null,
-        is_out_boundary: null,
-        is_over_floor: null,
-        is_have_checkout_condition: null,
-        remark: '',
-      },
-      pic_info_list: [
-        {
-          filePath: 'DroneEnforcement\\2022\\20220522\\2022052216365719870132.jpeg',
-          latitude: '35.286084',
-          longitude: '117.84411',
-          angle: '299.34375',
-        },
-        {
-          filePath: 'DroneEnforcement\\2022\\20220522\\2022052216370332790074.jpeg',
-          latitude: '35.286084',
-          longitude: '117.84411',
-          angle: '270.0',
-        },
-      ],
-      after_pic_list: [],
-      evidence_file_list: [],
-      punish_pic_list: [],
-      payment_pic_list: [],
-      agree_checkout_pic_list: [],
-      checkout_pic_list: [],
-      boundary_pic_list: [],
-      video_list: [],
-      remove_video_list: [],
-      handle_status_id: 2,
-      is_illegal: 0,
-      can_verify: null,
-    };
     caseHandleInfo.value = data;
     if (caseHandleInfo.value.is_illegal == 0) {
       caseHandleInfo.value.is_illegal = '合法';
@@ -411,7 +282,6 @@
           },
         };
         playerOptions.value.push(options);
-        console.log(playerOptions);
       });
     }
     // 现场照片
@@ -430,16 +300,16 @@
 
     // 处理后照片 整改后照片 恢复后照片
     if (data.after_pic_list.length > 0) {
-      data.after_pic_list.forEach((item: { filePath: string }) => {
+      threadAfterImageList.value = [];
-        threadAfterImageList.value.push(item.filePath);
+      data.after_pic_list.forEach((item: fileList) => {
+        threadAfterImageList.value.push(BASE_IMAGE_URL + '/S_' + item.filePath);
       });
     }
-    for (let i = 0; i < threadAfterImageList.value.length; i++) {
+
-      threadAfterImageList.value[i] = BASE_IMAGE_URL + '/S_' + threadAfterImageList.value[i];
-    }
     // 处理后视频
     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], //可选择的播放速度
@@ -467,110 +337,89 @@
           },
         };
         videoOptions.value.push(options);
-        // this.videoList.push(item)
-        // console.log("playOptions",playerOptions.value);
       });
     }
     // 合法 - 举证材料合法文件  evidence_file_list
     if (data.evidence_file_list.length > 0) {
-      data.evidence_file_list.forEach((item: { filePath: string }) => {
+      evidenceFileList.value = [];
-        evidenceFileList.value.push(item.filePath);
+      data.evidence_file_list.forEach((item: fileList) => {
-      });
-      for (let i = 0; i < evidenceFileList.value.length; i++) {
         let obj = {
-          filePath: BASE_IMAGE_URL + '/' + evidenceFileList.value[i],
+          filePath: BASE_IMAGE_URL + '/' + item.filePath,
-          s_filePath: BASE_IMAGE_URL + '/' + evidenceFileList.value[i],
+          s_filePath: BASE_IMAGE_URL + '/' + item.filePath,
         };
-        evidenceFileList.value[i] = obj;
+        evidenceFileList.value.push(obj);
-      }
+      });
     }
 
     if (data.boundary_pic_list.length > 0) {
+      boundaryImageList.value = [];
       data.boundary_pic_list.forEach((item) => {
-        boundaryImageList.value.push(item);
-      });
-      for (let i = 0; i < boundaryImageList.value.length; i++) {
         let obj = {
-          filePath: BASE_IMAGE_URL + '/' + boundaryImageList.value[i],
+          filePath: BASE_IMAGE_URL + '/' + item,
-          s_filePath: BASE_IMAGE_URL + '/' + boundaryImageList.value[i],
+          s_filePath: BASE_IMAGE_URL + '/' + item,
         };
-        console.log('boundary', obj);
+        boundaryImageList.value.push(obj);
-        boundaryImageList.value[i] = obj;
+      });
-        console.log('boundary', boundaryImageList.value);
-      }
     }
 
     // 违法 查处 - 处罚通知书 punish_pic_list
     if (data.punish_pic_list.length > 0) {
+      punishImageList.value = [];
       data.punish_pic_list.forEach((item) => {
-        punishImageList.value.push(item);
-      });
-      for (let i = 0; i < punishImageList.value.length; i++) {
         let obj = {
-          filePath: BASE_IMAGE_URL + '/' + punishImageList.value[i],
+          filePath: BASE_IMAGE_URL + '/' + item,
-          s_filePath: BASE_IMAGE_URL + '/S_' + punishImageList.value[i],
+          s_filePath: BASE_IMAGE_URL + '/S_' + item,
         };
-        punishImageList.value[i] = obj;
+        punishImageList.value.push(obj);
-      }
+      });
     }
 
     // 违法 查处 - 交款通知书 payment_pic_list
     if (data.payment_pic_list.length > 0) {
+      paymentImageList.value = [];
       data.payment_pic_list.forEach((item) => {
-        paymentImageList.value.push(item);
-      });
-      for (let i = 0; i < paymentImageList.value.length; i++) {
         let obj = {
-          filePath: BASE_IMAGE_URL + '/' + paymentImageList.value[i],
+          filePath: BASE_IMAGE_URL + '/' + item,
-          s_filePath: BASE_IMAGE_URL + '/S_' + paymentImageList.value[i],
+          s_filePath: BASE_IMAGE_URL + '/S_' + item,
         };
-        paymentImageList.value[i] = obj;
+        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) => {
-        agreeImageList.value.push(item);
-      });
-      for (let i = 0; i < agreeImageList.value.length; i++) {
         let obj = {
-          filePath: BASE_IMAGE_URL + '/' + agreeImageList.value[i],
+          filePath: BASE_IMAGE_URL + '/' + item,
-          s_filePath: BASE_IMAGE_URL + '/S_' + agreeImageList.value[i],
+          s_filePath: BASE_IMAGE_URL + '/S_' + item,
         };
-        agreeImageList.value[i] = obj;
+        agreeImageList.value.push(obj);
-      }
+      });
     }
 
     // 违法 完善手续 - 办理手续 checkout_pic_list
     if (data.checkout_pic_list.length > 0) {
+      checkoutImageList.value = [];
       data.checkout_pic_list.forEach((item) => {
-        checkoutImageList.value.push(item);
-      });
-      for (let i = 0; i < checkoutImageList.value.length; i++) {
         let obj = {
-          filePath: BASE_IMAGE_URL + '/' + checkoutImageList.value[i],
+          filePath: BASE_IMAGE_URL + '/' + item,
-          s_filePath: BASE_IMAGE_URL + '/S_' + checkoutImageList.value[i],
+          s_filePath: BASE_IMAGE_URL + '/S_' + item,
         };
-        checkoutImageList.value[i] = obj;
+        checkoutImageList.value.push(obj);
-        // checkoutImageList.value_a[i] =BASE_IMAGE_URL+"/"+checkoutImageList.value[i];
+      });
-        // checkoutImageList.value[i] =BASE_IMAGE_URL+"/S_"+checkoutImageList.value[i];
-      }
     }
   }
-  function setpChange(current) {
+
-    currentName.value = flowLog.value[current].name;
-    descriptionTitle.value = '案件' + flowLog.value[current].name + '信息';
-  }
   onMounted(() => {
-    // getCaseFlowLogData();
+    getCaseFlowLogData();
     loadDetailCaseInfo();
     getCaseHandleInfo();
   });
 </script>
 <style lang="less" scoped>
-   .case-view {
+  .case-view {
-    padding: 48px 32px;
+    padding: 20px 32px;
     background-color: @component-background;
 
     &__step {
@@ -579,6 +428,13 @@
     }
     &_content {
       display: flex;
+      height: 65vh;
+      .file-box {
+        overflow: auto;
+      }
     }
   }
+  .map-box {
+    height: 100%;
+  }
 </style>

src/views/demo/monitor/caseview/model.ts

@@ -36,6 +36,14 @@ export interface infoObj{
   build_structure?: string;
   illegal_type?: string;
   remark?: string;
+  transactor_name?: string;
+  transact_time?: string;
+  evidence_file_name?: string;
+  evidence_file_number?: string;
+  evidence_file_indate?: string;
+  illegal_contact_idcard?: string;
+  registr_number?: string;
+  procedure_indate?:string;
 }
 export interface caseHandleInfoObj {
   info:infoObj

src/views/demo/monitor/caseview/src/evidence.vue

@@ -0,0 +1,97 @@
+<template>
+    <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
+      <a-descriptions-item label="办理人">{{
+        caseHandleInfo.info.transactor_name
+      }}</a-descriptions-item>
+      <a-descriptions-item label="办理时间">
+        {{ caseHandleInfo.info.transact_time }}
+      </a-descriptions-item>
+      <a-descriptions-item label="批准文件名称">
+        {{ caseHandleInfo.info.evidence_file_name }}
+      </a-descriptions-item>
+      <a-descriptions-item label="批准文件编号">
+        {{ caseHandleInfo.info.evidence_file_number }}
+      </a-descriptions-item>
+      <a-descriptions-item label="批文有效日期">
+        {{ caseHandleInfo.info.evidence_file_indate }}
+      </a-descriptions-item>
+  
+      <a-descriptions-item label="合法举证材料">
+        <div>
+          <ImagePreview :imageList="evidenceFileList" />
+        </div>
+      </a-descriptions-item>
+      <a-descriptions-item label="勘测定界图">
+        <div>
+          <ImagePreview :imageList="boundaryImageList" />
+        </div>
+      </a-descriptions-item>
+    </a-descriptions>
+  </template>
+  <script lang="ts" setup>
+    import { watch, ref } from 'vue';
+    import { ImagePreview } from '@/components/Preview';
+    import { caseHandleInfoObj } from '../model';
+    const labelStyle = ref({
+      width: '100px',
+    });
+    const caseHandleInfo = ref<caseHandleInfoObj>({
+      info: {},
+    });
+    const playerOptions: any = ref([]);
+    const boundaryImageList: any = ref([]);
+    const evidenceFileList: any = ref([]);
+    const props = defineProps({
+      data: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      playerOptions: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      boundaryImageList: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      evidenceFileList: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+    });
+    caseHandleInfo.value = props.data;
+    playerOptions.value = props.playerOptions;
+    boundaryImageList.value = props.boundaryImageList;
+    evidenceFileList.value = props.boundaryImageList;
+    const imgList = ref([
+      'https://picsum.photos/id/66/346/216',
+      'https://picsum.photos/id/67/346/216',
+      'https://picsum.photos/id/68/346/216',
+    ]);
+  
+   
+    watch(
+      () => props.data,
+      (newVal, oldVal) => {
+        caseHandleInfo.value = newVal;
+        playerOptions.value = props.playerOptions;
+        boundaryImageList.value = props.boundaryImageList;
+        evidenceFileList.value = props.boundaryImageList;
+      },
+    );
+  </script>
+  <style lang="less" scoped>
+    ::v-deep .ant-image .ant-image-img {
+      width: 85px;
+      margin-bottom: 10px;
+    }
+  </style>
+  

src/views/demo/monitor/caseview/src/inspect.vue

@@ -220,6 +220,7 @@
       },
     },
   });
+  console.log(props)
   caseHandleInfo.value = props.data;
   playerOptions.value = props.playerOptions;
   threadImageList.value = props.threadImageList;
@@ -229,7 +230,6 @@
     'https://picsum.photos/id/68/346/216',
   ]);
 
- 
   watch(
     () => props.data,
     (newVal, oldVal) => {

src/views/demo/monitor/caseview/src/investigate.vue

@@ -0,0 +1,100 @@
+<template>
+    <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
+      <a-descriptions-item label="办理人">{{
+        caseHandleInfo.info.transactor_name
+      }}</a-descriptions-item>
+      <a-descriptions-item label="办理时间">
+        {{ caseHandleInfo.info.transact_time }}
+      </a-descriptions-item>
+      <a-descriptions-item label="立案号">
+        {{ caseHandleInfo.info.registr_number }}
+      </a-descriptions-item>
+      <a-descriptions-item label="当事人姓名">
+        {{ caseHandleInfo.info.illegal_contact }}
+      </a-descriptions-item>
+      <a-descriptions-item label="身份证号码">
+        {{ caseHandleInfo.info.illegal_contact_idcard }}
+      </a-descriptions-item>
+      <a-descriptions-item label="违法类型">
+        {{ caseHandleInfo.info.illegal_type }}
+      </a-descriptions-item>
+  
+      <a-descriptions-item label="处罚通知书">
+        <div>
+          <ImagePreview :imageList="punishImageList" />
+        </div>
+      </a-descriptions-item>
+      <a-descriptions-item label="交款通知单">
+        <div>
+          <ImagePreview :imageList="paymentImageList" />
+        </div>
+      </a-descriptions-item>
+    </a-descriptions>
+  </template>
+  <script lang="ts" setup>
+    import { watch, ref } from 'vue';
+    import { ImagePreview } from '@/components/Preview';
+    import { caseHandleInfoObj } from '../model';
+    const labelStyle = ref({
+      width: '100px',
+    });
+    const caseHandleInfo = ref<caseHandleInfoObj>({
+      info: {},
+    });
+    const playerOptions: any = ref([]);
+    const paymentImageList: any = ref([]);
+    const punishImageList: any = ref([]);
+    const props = defineProps({
+      data: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      playerOptions: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      paymentImageList: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      punishImageList: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+    });
+    caseHandleInfo.value = props.data;
+    playerOptions.value = props.playerOptions;
+    paymentImageList.value = props.paymentImageList;
+    punishImageList.value = props.paymentImageList;
+    const imgList = ref([
+      'https://picsum.photos/id/66/346/216',
+      'https://picsum.photos/id/67/346/216',
+      'https://picsum.photos/id/68/346/216',
+    ]);
+  
+   
+    watch(
+      () => props.data,
+      (newVal, oldVal) => {
+        caseHandleInfo.value = newVal;
+        playerOptions.value = props.playerOptions;
+        paymentImageList.value = props.paymentImageList;
+        punishImageList.value = props.paymentImageList;
+      },
+    );
+  </script>
+  <style lang="less" scoped>
+    ::v-deep .ant-image .ant-image-img {
+      width: 85px;
+      margin-bottom: 10px;
+    }
+  </style>
+  

src/views/demo/monitor/caseview/src/mapDetail.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="w-full">
+    <MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import rodeImg from '@/assets/images/icon_fly2.png';
+  import { ref, watch } from 'vue';
+  import MapboxMaps from '@/components/MapboxMaps/index.vue';
+  import { getDroneGeoJson } from '@/api/monitor/index';
+  const detailMap = ref();
+  const props = defineProps({
+    ruleForm: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
+  const geojson = ref();
+  const droneMarker = ref();
+  const mapBox = ref();
+
+  const mapOptions = {
+    center: [117.84714891969796, 35.22152309532066],
+    zoom: 10,
+  };
+  watch(
+    () => props.ruleForm,
+    (newVal, oldVal) => {
+      console.log(newVal);
+      loadCaseGeoJson();
+      detailMap.value.flyTo({
+        center: [newVal.lng, newVal.lat], // 中心点
+        zoom: 18, // 缩放比例
+        pitch: 0, // 倾斜度
+      });
+      loadDroneMarker(newVal.lng, newVal.lat);
+    },
+  );
+  const mapOnLoad = (map) => {
+    mapBox.value = map;
+    // 测试地址
+    const testSource =
+      'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
+    map.U.addVector('name', testSource);
+    map.U.addLineLayer('ffff', {
+      source: 'name',
+      'source-layer': 'lindi',
+    });
+    detailMap.value = map;
+    loadImageLayer();
+    loadStreetBorderLayer();
+    loadCaseGeoJson();
+  };
+  //   费县图斑
+  function loadImageLayer() {
+    detailMap.value.addLayer({
+      id: 'wms-test-layer',
+      type: 'raster',
+      source: {
+        type: 'raster',
+        tiles: [
+          'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
+        ],
+        tileSize: 256,
+      },
+      paint: {},
+    });
+  }
+  // 费县镇界
+  function loadStreetBorderLayer() {
+    detailMap.value.addLayer({
+      id: 'street-border',
+      type: 'raster',
+      source: {
+        type: 'raster',
+        tiles: [
+          'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
+        ],
+        tileSize: 256,
+      },
+      paint: {},
+      layout: {
+        visibility: 'visible',
+      },
+    });
+    detailMap.value.resize();
+  }
+  //   获取GeoJSON图层
+  async function loadCaseGeoJson() {
+    const data = await getDroneGeoJson({ id: props.ruleForm.info.id });
+    console.log(data);
+    geojson.value = data;
+    if (geojson.value.features.length == 0) {
+      detailMap.value.addLayer({
+        id: 'points',
+        type: 'symbol',
+        source: {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                geometry: {
+                  type: 'Point',
+                  coordinates: [props.ruleForm.info.lng, props.ruleForm.info.lng],
+                },
+                properties: {
+                  title: 'Mapbox DC',
+                  icon: 'monument',
+                },
+              },
+            ],
+          },
+        },
+        layout: {},
+      });
+    }
+    // 报错的修改方法There is already a source with ID "geojsonfill"
+    if (detailMap.value.getLayer('geojsonfill')) {
+      detailMap.value.removeLayer('geojsonfill');
+      detailMap.value.removeSource('geojsonfill');
+    }
+    if (detailMap.value.getLayer('geojsonline')) {
+      detailMap.value.removeLayer('geojsonline');
+      detailMap.value.removeSource('geojsonline');
+    }
+
+    detailMap.value.addLayer({
+      id: 'geojsonfill',
+      type: 'fill',
+      source: {
+        type: 'geojson',
+        data: geojson.value,
+      },
+      paint: {
+        'fill-color': '#FE9003',
+        'fill-opacity': 0.2,
+        'fill-outline-color': '#FE9003',
+      },
+    });
+
+    detailMap.value.addLayer({
+      id: 'geojsonline',
+      type: 'line',
+      source: {
+        type: 'geojson',
+        data: geojson.value,
+      },
+      layout: {
+        'line-join': 'round',
+        'line-cap': 'round',
+      },
+      paint: {
+        'line-color': '#FE9003',
+        'line-width': 4,
+      },
+    });
+  }
+  //   案件位置显示无人机图标
+  function loadDroneMarker(lng, lat) {
+    if (detailMap.value.getLayer('cat-on-building')) {
+      detailMap.value.removeLayer('cat-on-building');
+      detailMap.value.removeSource('cat-on-building');
+      detailMap.value.removeImage('cat');
+    }
+    detailMap.value.loadImage(rodeImg, (error, image) => {
+      detailMap.value.addImage('cat', image);
+      detailMap.value.addLayer({
+        id: 'cat-on-building',
+        source: {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                geometry: {
+                  type: 'Point',
+                  coordinates: [lng, lat],
+                },
+              },
+            ],
+          },
+        },
+        slot: 'top',
+        type: 'symbol',
+        layout: {
+          'icon-image': 'cat',
+          'icon-size': 0.05,
+          'symbol-placement': 'point',
+          'symbol-z-elevate': true,
+        },
+      });
+    });
+  }
+</script>
+<style scoped lang="less">
+  .w-full {
+    width: 100%;
+    height: 50vh;
+  }
+</style>

src/views/demo/monitor/caseview/src/procedure.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
+    <a-descriptions-item label="办理人">{{
+      caseHandleInfo.info.transactor_name
+    }}</a-descriptions-item>
+    <a-descriptions-item label="办理时间">
+      {{ caseHandleInfo.info.transact_time }}
+    </a-descriptions-item>
+
+    <a-descriptions-item label="政府统一完善手续证明">
+      <div>
+        <ImagePreview :imageList="agreeImageList" />
+      </div>
+    </a-descriptions-item>
+    <a-descriptions-item label="办理手续照片">
+      <div>
+        <ImagePreview :imageList="checkoutImageList" />
+      </div>
+    </a-descriptions-item>
+
+    <a-descriptions-item label="手续有效期">
+      {{ caseHandleInfo.info.procedure_indate }}
+    </a-descriptions-item>
+    <a-descriptions-item label="批准文件编号">
+      {{ caseHandleInfo.info.evidence_file_number }}
+    </a-descriptions-item>
+    <a-descriptions-item label="批文有效日期">
+      {{ caseHandleInfo.info.evidence_file_indate }}
+    </a-descriptions-item>
+
+    <a-descriptions-item label="勘测定界图">
+      <div>
+        <ImagePreview :imageList="boundaryImageList" />
+      </div>
+    </a-descriptions-item>
+  </a-descriptions>
+</template>
+<script lang="ts" setup>
+  import { watch, ref } from 'vue';
+  import { ImagePreview } from '@/components/Preview';
+  import { caseHandleInfoObj } from '../model';
+  const labelStyle = ref({
+    width: '100px',
+  });
+  const caseHandleInfo = ref<caseHandleInfoObj>({
+    info: {},
+  });
+  const playerOptions: any = ref([]);
+  const checkoutImageList: any = ref([]);
+  const boundaryImageList: any = ref([]);
+  const agreeImageList: any = ref([]);
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    playerOptions: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    checkoutImageList: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    boundaryImageList: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    agreeImageList: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
+  caseHandleInfo.value = props.data;
+  playerOptions.value = props.playerOptions;
+  boundaryImageList.value = props.checkoutImageList;
+  checkoutImageList.value = props.checkoutImageList;
+  agreeImageList.value = props.checkoutImageList;
+  const imgList = ref([
+    'https://picsum.photos/id/66/346/216',
+    'https://picsum.photos/id/67/346/216',
+    'https://picsum.photos/id/68/346/216',
+  ]);
+
+  watch(
+    () => props.data,
+    (newVal, oldVal) => {
+      caseHandleInfo.value = newVal;
+      playerOptions.value = props.playerOptions;
+      boundaryImageList.value = props.checkoutImageList;
+      checkoutImageList.value = props.checkoutImageList;
+      agreeImageList.value = props.checkoutImageList;
+    },
+  );
+</script>
+<style lang="less" scoped>
+  ::v-deep .ant-image .ant-image-img {
+    width: 85px;
+    margin-bottom: 10px;
+  }
+</style>

src/views/demo/monitor/index.ts

@@ -1,5 +1,22 @@
+// 案件详情首页
 export { default as CaseView } from './caseview/index.vue';
+// 【案件下发信息】
 export { default as Issue } from './caseview/src/issue.vue';
+// 【案件核查信息】
 export { default as Inspect } from './caseview/src/inspect.vue';
+// 【案件审核信息】
 export { default as Audit } from './caseview/src/audit.vue';
+// 【案件办理信息-违法-拟拆除】
 export { default as Dismantle } from './caseview/src/dismantle.vue';
+// 地图位置
+export { default as MapDetail } from './caseview/src/mapDetail.vue';
+// 案件办理信息-合法举证
+export { default as Evidence } from './caseview/src/evidence.vue';
+// 【案件办理信息-违法-查处】
+export { default as Investigate } from './caseview/src/investigate.vue';
+// 【案件办理信息-违法-拟完善手续】
+export { default as Procedure } from './caseview/src/procedure.vue';
+
+
+
+