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

<template>
  <div class="statistical-analysis">
    <!-- 左侧树形菜单 -->
    <div class="left-menu">
      <CheckBox :data="checkData" customClass="all" @changeData="changeData"></CheckBox>
    </div>
    <!-- 右侧内容区 -->
    <div class="right-content">
      <Search :searchArr="searchConfiger"  @submit="onSearch"> </Search>
      <div class="tableCnt1 mb10 pl10 pr10">
        <PageTitle title="发掘内容" style="color: #333">
          <el-button type="primary" size="small" @click="handleData('add', '')">
            <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
            <span style="vertical-align: middle" @click="handleData('add', '')" >新增</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <span style="vertical-align: middle">导入内容</span>
          </el-button>
          <el-button type="danger" size="small" @click="exportData">
            <el-icon style="vertical-align: middle"><Delete /></el-icon>
            <span style="vertical-align: middle">删除</span>
          </el-button>
        </PageTitle>
        <MyTable
          :tableData="pageData.tableData"
          :tableColumn="pageData.tableColumn"
          :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger0"
          :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseData"
        >
          <template #fjLx="{ row }">
            <DictTag :tag="false" :value="row.fjLx" :options="D_GS_RQFJ_LX" />
          </template>
          <!-- 操作 -->
          <template #controls="{ row }">
            <el-link size="small" type="success" @click="handleData('edit', row)">编辑</el-link>
            <el-link size="small" type="primary" @click="handleData('info', row)">查看</el-link>
            <el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
          </template>
        </MyTable>
        <div class="ww100 flex just-center mt8">
          <el-button type="primary" @click="intelligent">智能解析</el-button>
        </div>
      </div>
      <div class="tableCnt mb10 pl10 pr10">
        <PageTitle title="模型智能识别/LP解析结果" style="color: #333" ></PageTitle>
        <div ref="searchBox" class="mb8">
          <el-button :type="it == '批量删除' ? 'danger':'primary'" size="small" v-for="it in btnsList" :key="it"  @click="chooseType(it)"> {{ it }} </el-button>
        </div>
        <div>
          <MyTable
            :tableData="pageData.tableData2"
            :tableColumn="pageData.tableColumn2"
            :tableHeight="pageData.tableHeight2"
            :key="pageData.keyCount"
            :tableConfiger="pageData.tableConfiger"
            :controlsWidth="pageData.controlsWidth"
            @chooseData="chooseDataBottom"
          >
            <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 #sfGz="{ row }">
              <DictTag :tag="false" :value="row.sfGz" :options="D_BZ_SF" />
            </template>
            <template #sfZbkry="{ row }">
              <DictTag :tag="false" :value="row.sfZbkry" :options="D_BZ_SF" />
            </template>
            <template #sfZzdry="{ row }">
              <DictTag :tag="false" :value="row.sfZzdry" :options="D_BZ_SF" />
            </template>
            <!-- 操作 -->
            <template #controls="{ row }">
              <el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
              <el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
            </template>
          </MyTable>
          <Pages
            @changeNo="changeNo"
            @changeSize="changeSize"
            :tableHeight="pageData.tableHeight2"
            :pageConfiger="{
              ...pageData.pageConfiger,
              total: pageData.total  }"></Pages>
        </div>
      </div>
    </div>
    <!-- 弹窗智能分析 -->
    <IntelligentParsing :tableData="pageData.tableData" ref="IntelligentParsingRef"  @upadate="getModelList" />
    <addForm ref="addFormDiloag" @onSearch="onSearch" />
    <Jbbg v-model="isShow" :type="chooselx" :ids="ids" @change="getModelList" :dic="{D_GS_RQFJ_FXDJ}"></Jbbg>
  </div>
</template>

<script setup>
import CheckBox from "@/components/checkBox/index.vue";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import addForm from "./components/addForm.vue";
import Jbbg from "./components/model.vue";
import IntelligentParsing from "./components/IntelligentParsing.vue";
import { ElMessage } from "element-plus";
import { qcckGet } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_GS_RQFJ_LX, D_GS_RQFJ_FXDJ, D_BZ_SF, D_GS_RQFJ_FXLB } = proxy.$dict('D_GS_RQFJ_FXDJ',"D_GS_RQFJ_LX","D_GS_RQFJ_FXDJ","D_BZ_SF","D_GS_RQFJ_FXLB"); //获取字典数据
const searchConfiger = ref([
  { label: "管辖部门", prop: "ssbm", placeholder: "请选择管辖部门", showType: "department" },
  { label: "是否关注", prop: "sfgz", placeholder: "请选择是否关注", showType: "select", options:D_BZ_SF },
]);
const checkData = reactive({
  hasChoose: ["警情"],
  list: ["警情","人力情报","线索","民警处置文本", "交通事故"],
});
const btnsList = reactive(['级别变更','警种变更','指定分配','添加标签','批量导入','导出','批量删除'])

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

const addFormDiloag = ref();
const IntelligentParsingRef = ref();
const searchBox = ref();
const queryFrom = ref({});
const pageData = reactive({
  tableData: [],
  tableData2: [],
  keyCount: 0,
  tableConfiger0: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false
  },
  tableHeight: 190,
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
  controlsWidth: 160,
  tableColumn: [
    { label: "发掘类型", prop: "fjLx", showSolt: true },
    { label: "发掘文本	", prop: "fjWb",showOverflowTooltip:true }
  ],
  tableColumn2: [
    { label: "姓名", prop: "ryXm",showOverflowTooltip:true },
    { label: "手机号码", prop: "rySjhm",showOverflowTooltip:true },
    { label: "身份证号码", prop: "rySfzh",showOverflowTooltip: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: "sfGz",showOverflowTooltip:true, showSolt: true },
    { label: "是否转布控人员", prop: "sfZbkry",showOverflowTooltip:true, showSolt: true },
    { label: "是否转重点人员", prop: "sfZzdry",showOverflowTooltip:true, showSolt: true }
  ]
});

// 搜索
const onSearch = (val) => {
  queryFrom.value = { ...val };
  pageData.pageConfiger.pageCurrent = 1;
  getList();
};

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

// 获取内容列表
const getList = (val) => {
  pageData.tableConfiger.loading = true;
  let data = { ...queryFrom.value };
  let url = "/mosty-gsxt/tbGsxtRqfjNr/selectPage";
  qcckGet(data, url).then((res) => {
    pageData.tableData = res.records || [];
    pageData.tableConfiger.loading = false;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

//获取模型识别列表
const getModelList = (val) => {
  let data = { ...pageData.pageConfiger };
  let url = "/mosty-gsxt/tbGsxtRqfjRy/selectPage";
  qcckGet(data, url).then((res) => {
    pageData.tableData2 = res.records || [];
    pageData.total = res.total;
  })
};
//新增- 编辑
const handleData = (type, row) => {
  addFormDiloag.value.init(type, row);
};
// 智能解析
const intelligent = () => {
  IntelligentParsingRef.value.init();
};
//删除操作
const deleteRow = (row) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/closeById/" + row.id).then((res) => {
    ElMessage.success("删除成功");
    getList();
  })
};


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

const chooseType = (val)=>{
  if(ids.value.length == 0) return ElMessage.warning("请选择对应的数据");
  chooselx.value = val;
  isShow.value = true;
}

const tabHeightFn = () => {
  pageData.tableHeight2 = window.innerHeight - searchBox.value.offsetHeight - 650;
  window.onresize = function () { tabHeightFn(); };
};

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

<style lang="scss" scoped>
.statistical-analysis {
  width: 100%;
  height: 100%;
  .left-menu {
    float: left;
    width: 280px;
    height: calc(100% - 10px);
    padding: 20px 4px;
    margin-top: 20px;
    border-radius: 4px;
    background-color: #fff;
    border-right: 1px solid #e8e8e8;
    color: #333;
    line-height: 32px;
    ::v-deep .checkBox{
      flex-direction: column;
      .checkall{
        margin: 0;
      }
    }
    ::v-deep .el-checkbox-group{
      display: flex;
      flex-direction: column;
    }
    ::v-deep .is-checked{
      background: rgb(242, 249, 255);
      margin-bottom: 4px;
    }
    ::v-deep .el-checkbox{
      padding-left: 8px;
      margin-right: 4px;
    }
    .all{
      width: calc(100% - 4px);
    }
   
  }
  .right-content {
    float: left;
    width: calc(100% - 290px);
    height: 100%;
    padding: 0 20px 0;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    .tableCnt1{
      height: 290px;
      background: #fff;
      border-radius: 4px;
    }
    .tableCnt {
      height: calc(100vh - 257px - 290px);
      background: #fff;
      border-radius: 4px;
    }
  }
}
</style>