integrated_traffic_vue/src/mobile/identifying_parts/hidden_danger_view.vue

<template>
  <div class="mobile">
    <van-cell-group>
      <van-cell title="隐患来源">
        <template #value>
          <span v-if="data.info.SOURCE === '1'"> 隐患快报 </span>
          <span v-else-if="data.info.SOURCE === '2'"> 隐患排查 </span>
          <span v-else-if="data.info.SOURCE === '3'"> 隐患排查 </span>
        </template>
      </van-cell>
      <template v-if="data.info.SOURCE === '2'">
        <van-cell title="风险点（单元）" :value="data.info.RISK_UNIT" />
        <van-cell title="辨识部位" :value="data.info.IDENTIFICATION" />
        <van-cell title="存在风险" :label="data.info.RISK_DESCR" />
        <van-cell title="风险分级" :value="data.info.LEVEL" />
        <van-cell title="检查内容" :label="data.info.CHECK_CONTENT" />
      </template>
      <van-cell title="隐患级别" :value="data.info.HIDDENLEVELNAME" />
      <van-cell title="隐患状态">
        <template #value>
          <span v-if="data.info.STATE === '1'"> 未整改 </span>
          <span v-else-if="data.info.STATE === '2'"> 已整改 </span>
          <span v-else-if="data.info.STATE === '3'"> 已验收 </span>
        </template>
      </van-cell>
      <van-cell title="隐患描述" :label="data.info.HIDDENDESCR" />
      <van-cell title="隐患部位" :value="data.info.HIDDENPART" />
      <van-cell title="隐患发现部门" :value="data.info.HIDDENFINDDEPTNAME" />
      <van-cell title="发现人" :value="data.info.CREATORNAME" />
      <van-cell title="发现时间" :value="data.info.CREATTIME" />
      <van-cell title="隐患处置">
        <template #value>
          <span v-if="data.info.RECTIFICATIONTYPE === '1'"> 立即整改 </span>
          <span v-else-if="data.info.RECTIFICATIONTYPE === '2'">
            限期整改
          </span>
        </template>
      </van-cell>
      <van-cell
        v-if="data.info.RECTIFICATIONTYPE === '2'"
        title="整改期限"
        :value="data.info.RECTIFICATIONDEADLINE"
      />
      <van-cell title="隐患图片">
        <template #label>
          <img
            v-for="(item, index) in data.hImgs"
            :key="item"
            :src="item"
            width="100"
            height="100"
            class="ml-10"
            @click="fnImagePreview(data.hImgs, index)"
          />
        </template>
      </van-cell>
      <template v-if="data.info.STATE >= 3">
        <van-cell title="整改描述" :value="data.info.RECTIFYDESCR" />
        <van-cell title="整改部门" :value="data.info.RECTIFICATIONDEPTNAME" />
        <van-cell title="整改人" :value="data.info.RECTIFICATIONORNAME" />
        <van-cell title="整改时间" :value="data.info.RECTIFICATIONTIME" />
        <van-cell title="整改后图片">
          <template #label>
            <img
              v-for="(item, index) in data.rImgs"
              :key="item"
              :src="item"
              width="100"
              height="100"
              class="ml-10"
              @click="fnImagePreview(data.rImgs, index)"
            />
          </template>
        </van-cell>
        <van-cell title="整改计划">
          <template #value>
            {{ data.info.HAVEPLAN === "0" ? "无" : "" }}
            {{ data.info.HAVEPLAN === "1" ? "有" : "" }}
          </template>
        </van-cell>
        <van-cell v-if="data.info.HAVEPLAN === '1'" title="计划图片">
          <template #label>
            <img
              v-for="(item, index) in data.pImgs"
              :key="item"
              :src="item"
              alt=""
              width="100"
              height="100"
              class="ml-10"
              @click="fnImagePreview(data.pImgs, index)"
            />
          </template>
        </van-cell>
        <van-cell v-if="data.info.RECTIFICATIONTYPE === '2'" title="整改方案">
          <template #value>
            {{ data.info.HAVESCHEME === "0" ? "无" : "" }}
            {{ data.info.HAVESCHEME === "1" ? "有" : "" }}
          </template>
        </van-cell>
        <template v-if="data.hs && data.info.HAVESCHEME === '1'">
          <van-cell title="排查日期" :value="data.hs.SCREENINGDATE" />
          <van-cell title="隐患清单" :value="data.hs.LISTNAME" />
          <van-cell title="治理标准要求" :value="data.hs.GOVERNSTANDARDS" />
          <van-cell title="治理方法" :value="data.hs.GOVERNMETHOD" />
          <van-cell title="经费和物资的落实" :value="data.hs.EXPENDITURE" />
          <van-cell title="负责治理人员" :value="data.hs.PRINCIPAL" />
          <van-cell title="工时安排" :value="data.hs.PROGRAMMING" />
          <van-cell title="时限要求" :value="data.hs.TIMELIMITFOR" />
          <van-cell title="工作要求" :value="data.hs.JOBREQUIREMENT" />
          <van-cell title="其他事项" :value="data.hs.OTHERBUSINESS" />
          <van-cell title="方案图片">
            <template #label>
              <img
                v-for="(item, index) in data.sImgs"
                :key="item"
                :src="item"
                width="100"
                height="100"
                class="ml-10"
                @click="fnImagePreview(data.sImgs, index)"
              />
            </template>
          </van-cell>
        </template>
      </template>
      <template
        v-if="data.info.STATE >= 4 && data.info.RECTIFICATIONTYPE === '2'"
      >
        <template v-for="(item, index) in data.checkList" :key="index">
          <van-cell title="验收描述" :value="item.CHECKDESCR" />
          <van-cell title="是否合格">
            <template #value>
              <span v-if="item.STATUS === '1'"> 是 </span>
              <span v-else-if="item.STATUS === '0'"> 否 </span>
            </template>
          </van-cell>
          <van-cell title="验收部门" :value="item.CHECKDEPTNAME" />
          <van-cell title="验收人" :value="item.CHECKORNAME" />
          <van-cell title="验收时间" :value="item.CHECK_TIME" />
          <van-cell title="验收图片">
            <template #label>
              <img
                v-for="(item1, index1) in item.cImgs"
                :key="index1"
                :src="item1"
                alt=""
                width="100"
                height="100"
                class="ml-10"
                @click="fnImagePreview(item.cImgs, index1)"
              />
            </template>
          </van-cell>
        </template>
      </template>
    </van-cell-group>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { showImagePreview } from "vant";
import "vant/es/image-preview/style";
import { geHiddenDangerView } from "@/request/mobile.js";
import { useRoute } from "vue-router";
import { getFileSuffix } from "@/assets/js/utils.js";

const route = useRoute();
const { HIDDEN_ID } = route.query;
const FILE_URL = import.meta.env.VITE_FILE_URL;
const data = reactive({
  info: {},
  hImgs: [],
  rImgs: [],
  pImgs: [],
  sImgs: [],
});
const fnGetData = async () => {
  const resData = await geHiddenDangerView({
    HIDDEN_ID,
  });
  data.info = resData.pd;
  data.hs = resData.hs;
  data.checkList = resData.checkList;
  for (let i = 0; i < resData.hImgs.length; i++) {
    if (getFileSuffix(resData.hImgs[i].FILEPATH) !== "mp4") {
      data.hImgs.push(FILE_URL + resData.hImgs[i].FILEPATH);
    }
  }
  for (let i = 0; i < resData.rImgs.length; i++) {
    data.rImgs.push(FILE_URL + resData.rImgs[i].FILEPATH);
  }
  for (let i = 0; i < resData.sImgs.length; i++) {
    data.sImgs.push(FILE_URL + resData.sImgs[i].FILEPATH);
  }
  for (let i = 0; i < resData.pImgs.length; i++) {
    data.pImgs.push(FILE_URL + resData.pImgs[i].FILEPATH);
  }
  for (let i = 0; i < resData.checkList.length; i++) {
    for (let j = 0; j < resData.checkList[i].cImgs.length; j++) {
      resData.checkList[i].cImgs[j] =
        FILE_URL + resData.checkList[i].cImgs[j].FILEPATH;
    }
  }
};
fnGetData();
const fnImagePreview = (images, startPosition) => {
  showImagePreview({
    images,
    startPosition,
  });
};
</script>

<style scoped lang="scss"></style>