sgxt_web/src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/index.vue

<template>
  <div class="statistical-analysis">
    <div class="left">
      <div style="background:#fff" class="pl10 pr10 pb10 pt10">
        <div class="title">图像信息</div>
        <MyTable
          :tableData="pageData.tableData"
          :tableColumn="pageData.tableColumn"
          :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger"
          :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseData"
        >
          <template #cjhx>
            <img width="60" height="60" :src="pro" alt="" />
          </template>
          <template #ytp>
            <img width="60" height="60" :src="pro" alt="" />
          </template>
          <template #controls="{ row }">
            <el-link size="small" type="success" @click="addEdit('edit', row)" >研判确认</el-link >
            <el-link size="small" type="primary">查看</el-link>
            <el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
          </template>
        </MyTable>
      </div>
      <div style="background:#fff" class="mt10 pl10 pr10 pb10 pt10" >
        <div class="title">人员信息</div>
        <MyTable
          :tableData="pageData.tableDataPeople"
          :tableColumn="pageData.tableColumnPeople"
          :tableHeight="pageData.tableHeight1"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger1"
          :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseData"
        >
          <template #ryXm="{ row }">
            <div>姓名：{{ row.ryXm }}  &nbsp;；</div>
            <div>电话：{{ row.rySjhm }} &nbsp;；</div>
            <div>身份证：{{ row.rySfzh }} </div>
          </template>
          <template #fxDj="{ row }">
            <DictTag :tag="false" :value="row.fxDj" :options="D_GS_RQFJ_FXDJ"/>
          </template>
          <template #fxLb="{ row }">
            <DictTag :tag="false" :value="row.fxLb" :options="D_GS_RQFJ_FXLB"/>
          </template>
          <template #czfs="{ row }">
            <div>关注：<DictTag :tag="false" style="display: inline;" :value="row.sfGz" :options="D_BZ_SF" /> &nbsp;；</div>
            <div>布控人员：<DictTag :tag="false" style="display: inline;" :value="row.sfZbkry" :options="D_BZ_SF" />&nbsp;；</div>
            <div>重点人员<DictTag :tag="false" style="display: inline;" :value="row.sfZzdry" :options="D_BZ_SF" /></div>
          </template>
        </MyTable>
        <Pages
          @changeNo="changeNo"
          @changeSize="changeSize"
          :tableHeight="pageData.tableHeight1"
          :pageConfiger="{ ...pageData.pageConfiger,  total: pageData.total }"
        />
      </div>
    </div>
    <div class="right">
      <div class="title">轨迹信息</div>
      <ul class="cntBox">
        <li class="step" v-for="(item, index) in stepList" :key="index">
            <div style="color: #000;">{{ item.time }}</div>
            <div class="desc">
              <div class="ellipsis mb5">事由：{{ item.sy }}</div>
              <div class="ellipsis mb5">数据来源：{{ item.sjly }}</div>
              <div class="ellipsis">所在地址：{{ item.szdz }}</div>
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost } from "@/api/qcckApi.js";
const { proxy } = getCurrentInstance();
const { D_GS_RQFJ_FXDJ, D_GS_RQFJ_FXLB } = proxy.$dict("D_GS_RQFJ_FXDJ","D_GS_RQFJ_FXLB"); //获取字典数据
const pageData = reactive({
  tableData: [
    {
      tpzy: "GBJD01",
      dwmc: "工布江达重点人",
      zylyxz: "涉稳",
      cjhx: "系统新增",
      ytp: "低级",
      rxxsd: "2025/05/05"
    },
    {
      tpzy: "GBJD01",
      dwmc: "工布江达重点人",
      zylyxz: "涉稳",
      cjhx: "系统新增",
      ytp: "低级",
      rxxsd: "2025/05/05"
    },
    {
      tpzy: "GBJD01",
      dwmc: "工布江达重点人",
      zylyxz: "涉稳",
      cjhx: "系统新增",
      ytp: "低级",
      rxxsd: "2025/05/05"
    },
    {
      tpzy: "GBJD01",
      dwmc: "工布江达重点人",
      zylyxz: "涉稳",
      cjhx: "系统新增",
      ytp: "低级",
      rxxsd: "2025/05/05"
    },
    {
      tpzy: "GBJD01",
      dwmc: "工布江达重点人",
      zylyxz: "涉稳",
      cjhx: "系统新增",
      ytp: "低级",
      rxxsd: "2025/05/05"
    }
  ],
  tableDataPeople: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false
  },
  tableConfiger1: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
    haveControls:false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
  controlsWidth: 220,
  tableColumn: [
    { label: "图片资源", prop: "tpzy" },
    { label: "单位名称", prop: "dwmc" },
    { label: "资源来源详址", prop: "zylyxz" },
    { label: "采集画像", prop: "cjhx", showSolt: true },
    { label: "原图片", prop: "ytp", showSolt: true },
    { label: "人像相似度", prop: "rxxsd" }
  ],
  tableColumnPeople: [
    { label: "姓名", prop: "ryXm",showOverflowTooltip:true ,showSolt: true},
    { label: "户籍地址", prop: "ryHjdz" ,showOverflowTooltip:true},
    { label: "护照号码", prop: "ryHzhm" ,showOverflowTooltip:true},
    { label: "现住地址", prop: "ryXzdz" ,showOverflowTooltip:true},
    { label: "附件照片", prop: "ryFjZp" ,showOverflowTooltip:true},
    { label: "管辖单位", prop: "gxDwDm" ,showOverflowTooltip:true},
    { label: "责任部门", prop: "ssbm",showOverflowTooltip:true},
    { label: "风险等级", prop: "fxDj",showOverflowTooltip:true, showSolt: true },
    { label: "风险类别", prop: "fxLb",showOverflowTooltip:true, showSolt: true },
    { label: "处置方式", prop: "czfs",showOverflowTooltip:true, showSolt: true },
  ]
});
const stepList = ref([
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  },
  {
    time: "2025-4-25 16:40",
    sy: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    sjly: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高",
    szdz: "乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高铁到站乘坐高"
  }
]);


const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getList();
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList();
};


//获取模型识别列表
const getList = () => {
  let data = { ...pageData.pageConfiger };
  qcckGet(data, "/mosty-gsxt/tbGsxtRqfjRy/selectPage").then((res) => {
    pageData.tableDataPeople = res.records || [];
    pageData.total = res.total;
  })
};

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight =( window.innerHeight - 280 ) / 2;
  pageData.tableHeight1 =(( window.innerHeight - 280 ) / 2 )- 50;
  window.onresize = function () {
    tabHeightFn();
  };
};

onMounted(()=>{
  tabHeightFn();
  getList()
})
</script>

<style lang="scss" scoped>
.statistical-analysis {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0 10px ;
  box-sizing: border-box;
  overflow: hidden;
  .title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    color: #333;
    &::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 78px;
      height: 4px;
      background: linear-gradient( 90deg, #3597f9c4 0%, rgba(53, 150, 249, 0) 100%);
      border-radius: 4px 4px 4px 4px;
    }
  }
  .left {
    width: calc(100% - 410px);
    height: 100%;
    float: left;
  }
  .right {
    width: 400px;
    height: 100%;
    padding: 10px 10px 0 10px;
    margin-left: 10px;
    float: right;
    box-sizing: border-box;
    background: #fff;
    .cntBox{
      height: calc(100% - 60px);
      overflow: hidden;
      overflow-y: auto;
      .step {
        padding-left: 20px;
        box-sizing: border-box;
        position: relative;
        border-left: 3px dashed #0072ff;
        margin-left: 10px;
        &::before{
          position: absolute;
          content: '';
          width: 20px;
          height: 20px;
          background: #0072ff;
          border-radius: 50%;
          left: -12px;
          top: 0;
        }
        .desc {
          margin: 5px;
          color: #929090;
        }
      }
    }
  }

  .form-row {
    display: flex;

    .el-form-item {
      flex: 1;
    }
  }

  .upload-group {
    display: flex;
    // gap: 20px;

    .el-form-item {
      flex: 1;
    }
  }

  .unit {
    margin-left: 5px;
  }
  ::v-deep .el-input__inner {
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 0;
    color: #777575;
  }
}
.el-form-item--default {
  margin-bottom: 0px;
}
</style>