rsmonitoring-manage/src/views/remote/farmland/details.vue

<template>
  <div class="details">
    <!--  -->
    <el-tabs v-model="activeName" @tab-change="handleClick(nowObj)">
      <el-tab-pane label="基本信息" name="jbxx">
        <el-descriptions :column="1">
          <el-descriptions-item
            v-for="(item, i) in jbxxs"
            :label="item.name"
            :key="i"
            >{{ infoObj[item.prop] }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane
        label="业务研判"
        name="ywyp"
        v-if="!formde || route.query.dataType != '1'"
      >
        <el-tabs v-model="ywyptab">
          <el-tab-pane
            v-for="ypitem in sheets"
            :label="ypitem.type"
            :name="ypitem.sheet"
            :key="ypitem.sheet"
          >
            <img :src="ypitem.photo" width="100%" />
            <el-row>
              <!-- <el-col :span="5">
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
              </el-col> -->
              <el-col :span="24">
                压占{{ ypitem.type }}面积共{{ ypitem.yzmj }}平方米
                <!-- //，占图斑面积比为23.24%。 -->
                <el-table :data="ypitem.data_list">
                  <el-table-column
                    v-for="(item, i) in tdxzTable"
                    :key="i"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                  >
                    <template #default="{ row }">
                      <div v-if="item.slot == 'ratio'">
                        {{ ((row.yzmj / ypitem.yzmj) * 100).toFixed(2) }}%
                      </div>
                      <div v-else-if="item.slot == 'action'">
                        <el-button link type="primary" @click="todetails(row)"
                          >查看
                        </el-button>
                      </div>
                      <span v-else>{{ row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="核查信息" name="hcxx" v-if="!formde">
        共{{ hcxxList.length }}次外业核查
        <el-collapse v-model="hcxxtab" @change="handleChange">
          <el-collapse-item v-for="(hcit, hi) in hcxxList" :key="hi" :name="hi">
            <template #title>
              核查时间：{{ hcit.createTime }} 核查人员：{{ hcit.createBy }}
            </template>
            <div></div>
            <div>
              <Hcxx ref="hcxxRef" @updateParent="changeData" :jcbh="11"></Hcxx>
            </div>
            <el-descriptions :column="1">
              <el-descriptions-item label="实际地类">
                {{ hcit.dlmc }}
              </el-descriptions-item>
              <el-descriptions-item label="核查初判">
                {{ hgx_decide.find((h) => h.value == hcit.decide).label }}
              </el-descriptions-item>
              <el-descriptions-item label="其它材料">
                <div class="imgList">
                  <div class="imgDiv" v-for="(item, i) in hcit.fjs" :key="i">
                    <span>{{ i + 1 }}</span>
                    <img :src="item.fjPreview" />
                    <p>{{ item.fjDatetime }}</p>
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="其它说明">
                {{ hcit.notes }}
              </el-descriptions-item>
              <el-descriptions-item label="数字签名">
                <img :src="hcit.fjPreview" />
              </el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="业务记录" name="ywjl" v-if="!formde">
        <el-timeline>
          <el-timeline-item
            v-for="(acti, index) in activities"
            :key="index"
            :type="acti.successType == '0' ? 'primary' : ''"
            size="large"
            :hollow="true"
            :timestamp="acti.auditflowStepValue"
            placement="top"
          >
            <div class="timelinediv">
              <span class="name">[{{ acti.createBy }}] </span>
              <span class="operate">
                {{ audiText[acti.auditflowOperateType] || "" }}
              </span>
              <span class="time"> 于 {{ acti.createTime }}</span>
              <span
                v-if="['001', '002', '003'].includes(acti.auditflowOperateType)"
                class="time more"
                @click="moreAct(acti)"
                >更多</span
              >
            </div>
            <div
              v-if="['001', '002', '003'].includes(acti.auditflowOperateType)"
            >
              {{
                audiText[acti.auditflowOperateType].replace("合规性", "")
              }}结论：
              {{ acti.successType == "0" ? "通过" : "不通过" }}
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
    <div class="btns">
      <el-button
        type="primary"
        v-show="route.query.dataType != 'normal'"
        :disabled="
          !steps.find((x) =>
            x.auditflowStep.includes(route.query.dataType + 'SH')
          )
        "
        @click="operate('SH')"
        >审核</el-button
      >
      <el-button
        type="warning"
        v-show="route.query.dataType == 'XJ'"
        :disabled="!steps.find((x) => x.auditflowStep.includes('XJHGX'))"
        @click="operate('HGX')"
        >合法性判定</el-button
      >
      <el-button
        type="success"
        v-show="['XJ', 'SJ', 'SJJ'].includes(route.query.dataType)"
        :disabled="
          !steps.find((x) =>
            x.auditflowStep.includes(route.query.dataType + 'TJ')
          )
        "
        @click="operate('TJ')"
        >提交</el-button
      >
    </div>
    <el-dialog :title="diatitle" v-model="open" width="500px" append-to-body>
      <div v-for="(note, nkey) in Object.keys(sheetinfos)" :key="nkey">
        {{ note }}：{{ sheetinfos[note] }}
      </div>
    </el-dialog>
    <shdialog ref="shdiaRef"></shdialog>
    <hgxdialog ref="hgxdiaRef"></hgxdialog>
    <tjdialog ref="tjdiaRef"></tjdialog>
  </div>
</template>
  
  <script setup name="details">
import Hcxx from "./hcxx.vue";
import shdialog from "./components/shdialog.vue";
import hgxdialog from "./components/hgxdialog.vue";
import tjdialog from "./components/tjdialog.vue";
import { getDetailsDk } from "@/api/rsmonitoring/dataEntry";
import {
  getDkjbxx,
  getDkjbywy,
  getAuditflow,
  getStep,
  getHcInfo,
} from "@/api/rsmonitoring/dkjbxx";

import {
  jbxxs,
  tdxzTable,
  gtkjTable,
  gdTable,
  yjjbntTable,
  stbhTable,
  audiText,
} from "./config";
import { nextTick } from "vue";
const emit = defineEmits(["tabClick"]);
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const formde = ref(route.query.form == "dataEntry");
const props = defineProps({});
let nowObj = ref({});
const shdiaRef = ref(null);
const hgxdiaRef = ref(null);
const tjdiaRef = ref(null);
const hcxxRef = ref(null);

const data = reactive({
  activeName: "jbxx",
  infoObj: { name: "swed" },
  hcxxtab: 0,
  hcxxList: [],
  activities: [],
});
const steps = ref([]);
const { hgx_decide } = proxy.useDict("hgx_decide");
const { activeName, infoObj, hcxxtab, hcxxList, activities } = toRefs(data);
const sheetdata = reactive({
  ywyptab: "1",
  sheets: [],
  open: false,
  diatitle: "",
  sheetinfos: [],
});

const { ywyptab, sheets, open, diatitle, sheetinfos } = toRefs(sheetdata);

function handleClick({ id, auditflowId }, isfirst) {
  if (formde.value) {
    getDetailsDk(id).then((res) => {
      infoObj.value = res.data;
      if (res.data.sheetJson) {
        sheets.value = JSON.parse(res.data.sheetJson);
        ywyptab.value = sheets.value[0].sheet;
      }

      console.log(sheets.value);
    });
  } else {
    if (activeName.value == "jbxx" || isfirst)
      getDkjbxx(id).then((res) => {
        infoObj.value = res.data;
      });
    else if (activeName.value == "ywyp" || isfirst)
      getDkjbywy(id).then((res) => {
        if (res.data && res.data.sheetJson) {
          sheets.value = JSON.parse(res.data.sheetJson);
          ywyptab.value = sheets.value[0].sheet;
          console.log(sheets.value);
        }
      });
    else if (activeName.value == "ywjl" || isfirst)
      getAuditflow({ dkjdxxId: id }).then((res) => {
        activities.value = res.data;
      });
    else if (activeName.value == "hcxx" || isfirst)
      getHcInfo({ dkid: id, auditflowStep: "WYDC", auditflowId }).then(
        (res) => {
          hcxxList.value = res.data || [];
          nextTick(() => {
            for (let index = 0; index < hcxxList.value.length; index++) {
              hcxxRef.value[index].init(hcxxList.value[index].sdfjs);
            }
          });
        }
      );
    if (activeName.value !== "hcxx") {
      for (let index = 0; index < hcxxList.value.length; index++) {
        hcxxRef.value[index].delatePoi();
      }
    }
    emit("tabClick", activeName.value);
  }
  getStep({ dkjdxxId: id }).then((res) => {
    steps.value = res.data;
  });
}
function todetails(row) {
  open.value = true;
  diatitle.value = row.swid + "详情";
  sheetinfos.value = JSON.parse(row.sheetJson);
}
function getDetails({ pcsjid, id, auditflowId }) {
  activeName.value = "jbxx";
  infoObj.value = {};
  activities.value = [];
  nowObj.value = { pcsjid, id, auditflowId };
  handleClick({ pcsjid, id, auditflowId }, true);
}
function moreAct(actitem) {
  if (actitem.auditflowOperateType == "001")
    hgxdiaRef.value.moreAct(actitem, infoObj.value);
  else if (actitem.auditflowOperateType == "002")
    shdiaRef.value.moreAct(actitem, infoObj.value);
  else if (actitem.auditflowOperateType == "003")
    tjdiaRef.value.moreAct(actitem, infoObj.value);
}

function operate(oname) {
  let aStep = route.query.dataType + oname;
  if (oname == "SH") shdiaRef.value.operate(infoObj.value, aStep);
  else if (oname == "HGX") hgxdiaRef.value.operate(infoObj.value, aStep);
  else if (oname == "TJ") tjdiaRef.value.operate(infoObj.value, aStep);
}

defineExpose({ getDetails });
</script>
<style scoped lang="scss">
.details {
  .el-button {
    // margin: 0px !important;
    margin-bottom: 12px !important;
  }
  .btns {
    position: absolute;
    bottom: 20px;
    .el-button {
      margin-left: 20px !important;
    }
  }

  .imgList {
    .imgDiv {
      width: 126px;
      height: 83px;
      margin-right: 10px;
      // background-color: rgba(0, 255, 255, 0.413);
      position: relative;
      margin: 4px 4px;
      img {
        width: 126px;
        height: 83px;
      }
      span {
        width: 26px;
        height: 26px;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        background: #dbad70;
        text-align: center;
        line-height: 26px;
      }
      p {
        position: absolute;
        bottom: 0;
        font-size: 10px;
        color: #33ccff;
        text-align: center;
        width: 100%;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .timelinediv {
    .name {
      color: #95f204;
    }
    .operate {
      color: #f59a23;
    }
    .time {
      color: #5ba7f0;
    }
    .more {
      display: inline-block;
      position: absolute;
      right: 20px;
      cursor: pointer;
    }
  }
}
</style>
<style  lang="scss">
.details {
  height: calc(100% - 40px);
  overflow: hidden;
  .el-tabs {
    height: 100%;
  }
  .el-tabs__content {
    height: calc(100% - 100px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.usable {
  color: #3f93f5;
  cursor: pointer;
}
</style>