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="flex align-center">
          <div class="title mr20">人员信息</div>
          <div class="mb13">
            <el-button size="small" v-for="it in btnsList" :key="it"  @click="chooseType(it)"> {{ it }} </el-button>
          </div>
        </div>
        <MyTable
          :tableData="pageData.tableDataPeople"
          :tableColumn="pageData.tableColumnPeople"
          :tableHeight="pageData.tableHeight1"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger1"
          :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseDataBottom"
        >
          <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>
    <Model v-model="isShow" :type="chooselx" :ids="ids" @change="getList" :dic="{D_BZ_SF}"></Model>
  </div>
</template>
<script setup>
import { ElMessage,ElMessageBox } from "element-plus";
import Model from "./model.vue";
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 { qcckPost } from "@/api/qcckApi.js";
const { proxy } = getCurrentInstance();
const {D_BZ_SF, D_GS_RQFJ_FXDJ, D_GS_RQFJ_FXLB } = proxy.$dict("D_BZ_SF","D_GS_RQFJ_FXDJ","D_GS_RQFJ_FXLB"); //获取字典数据
const btnsList = reactive(['布控','是否关注','移交管控'])

const chooselx = ref('')
const isShow = ref(false)
const ids = ref([])

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: "checkBox",
    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();
  };
};

// 选择数据
const chooseDataBottom = (val) =>{
  if(Array.isArray(val)) ids.value = val.map(item=>item.id);
}

const chooseType = (val)=>{
  chooselx.value = val;
  switch(val){
    case '布控':
      if(ids.value.length == 0) return ElMessage.warning("请选择对应的数据");
       ElMessageBox.confirm('是否确定布控?','Warning',{ confirmButtonText: 'OK', cancelButtonText: 'Cancel', type: 'warning' }).then(() => {
          let params = { ids:ids.value, sfbk:'1' }
          qcckPost(params,'/mosty-gsxt/tbGsxtRqfjRy/updateBySfbkpz').then(res=>{
            ElMessage.success("成功");
            getList()
          })
        }).catch(() => {
          ElMessage({ type: 'info', message: '取消' })
        })
      break;
    case '是否关注':
    case '移交管控':
      if(ids.value.length == 0) return ElMessage.warning("请选择对应的数据");
      isShow.value = true;
      break;
  }
}

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>