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

<template>
  <div class="statistical-analysis">
    <!-- 左侧树形菜单 -->
    <div class="left-menu">
      <el-radio-group :disabled="isEdit" v-model="active" @change="changeRadio">
        <el-radio :label="it.dm" v-for="it in D_GS_RQFJ_LX" :key="it.dm">{{ it.zdmc }}</el-radio>
      </el-radio-group>
      <div class="cancelBtn" @click="active = ''">取消</div>
    </div>
    <!-- 右侧内容区 -->
    <div class="right-content">
      <Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
      <div class="tableCnt1 mb10 pl10 pr10">
        <PageTitle title="发掘内容" style="color: #333"></PageTitle>
        <MyTable 
          :tableData="pageData.tableData" 
          :tableColumn="pageData.tableColumn" 
          :tableHeight="pageData.tableHeight"
          :key="pageData.keyCount" 
          :tableConfiger="pageData.tableConfiger0" 
          :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseDataTop">
          <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.id])">删除</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 #bqList="{ row }">
              <div v-if="row.bqList">
                <el-tag v-for="(it, idx) in row.bqList" :key="idx">{{ it.bqMc }}、</el-tag>
              </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 #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="deleteRowBottom(row.id)">删除</el-link>
              <el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
            </template>
          </MyTable>
          <Pages 
            @changeNo="changeNo" 
            @changeSize="changeSize" 
            :tableHeight="pageData.tableHeight" 
            :pageConfiger="{
            ...pageData.pageConfiger,
            total: pageData.total
          }"></Pages>
        </div>
      </div>
    </div>
    <!-- 弹窗智能分析 -->
    <IntelligentParsing :tableData="pageData.tableData" ref="IntelligentParsingRef" @upadate="getModelList" />
    <!-- 新增 -->
    <addForm ref="addFormDiloag" @onSearch="onSearch" />
    <!-- 弹窗 -->
    <ListDialog ref="modelList" v-model="showDialog" v-if="showDialog" @cancel="active = ''" :dic="{D_GS_RQFJ_LX}"></ListDialog>
  </div>
</template>

<script setup>
import ListDialog from './components/listDialog.vue'
import { download } from "@/utils/request";
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 IntelligentParsing from "./components/IntelligentParsing.vue";
import { ElMessage } from "element-plus";
import { qcckGet, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } 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 showDialog = ref(false)
const modelList = ref()
const searchConfiger = ref([
  {
    label: "管辖部门",
    prop: "ssbm",
    placeholder: "请选择管辖部门",
    showType: "department"
  },
  {
    label: "是否关注",
    prop: "sfgz",
    placeholder: "请选择是否关注",
    showType: "select",
    options: D_BZ_SF
  }
]);
const active = ref('');
const btnsList = reactive(["级别变更","警种变更","指定分配","添加标签","导出","批量删除"]);
const chooselx = ref("");
const idsTop = ref([]);
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: "checkBox",
    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: "gxMj", showOverflowTooltip: true },
    { label: "责任部门", prop: "ssbm", showOverflowTooltip: true },
    { label: "标签", prop: "bqList", showSolt: true, 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 = () => {
  pageData.tableConfiger.loading = true;
  let data = { ...queryFrom.value };
  qcckGet(data, "/mosty-gsxt/tbGsxtRqfjNr/selectPage").then((res) => {
    pageData.tableData = res.records || [];
    pageData.tableConfiger.loading = false;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

//获取模型识别列表
const getModelList = () => {
  let data = { ...pageData.pageConfiger };
  pageData.tableConfiger0.loading = true;
  qcckGet(data, "/mosty-gsxt/tbGsxtRqfjRy/selectPage").then((res) => {
    pageData.tableConfiger0.loading = false;
    pageData.tableData2 = res.records || [];
    pageData.total = res.total;
    ids.value = [];
  }).catch(() => {
    pageData.tableConfiger0.loading = false;
  });
};
//新增- 编辑
const handleData = (type, row) => {
  addFormDiloag.value.init(type, row);
};
// 智能解析
const intelligent = () => {
  IntelligentParsingRef.value.init();
};

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

//删除操作
const deleteRow = (ids) => {
  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
    ids.forEach((id) => {
      qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/closeById/" + id).then((res) => {
        ElMessage.success("删除成功");
        getList();
      });
    });
  });
};
const deleteRowBottom = (id) => {
  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
    qcckDelete({}, "/mosty-gsxt/tbGsxtRqfjRy/" + id).then((res) => {
      ElMessage.success("删除成功");
      getModelList();
    });
  });
};

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

const chooseType = (val) => {
  chooselx.value = val;
  switch (val) {
    case "级别变更":
    case "警种变更":
    case "指定分配":
    case "添加标签":
      if (ids.value.length == 0) return ElMessage.warning("请选择对应的数据");
      isShow.value = true;
      break;
    case "导出":
      // download("/mosty-api/mosty-gsxt/tbGsxtRqfjRy/exportRyfjFxjg", {"bkBt":"1"},`模型智能识别/LP解析结果_${new Date().getTime()}.xlsx`);
      break;
    case "批量删除":
      if (ids.value.length == 0) return ElMessage.warning("请选择对应删除的数据");
      ids.value.forEach((id) => {
        deleteRowBottom(id);
      });
      break;
  }
};


const changeRadio = () =>{
  showDialog.value = true;
  nextTick(()=>{
    modelList.value.init(active.value)
  })
}

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 .el-radio-group{
      display: flex;
      flex-direction: column;
      padding-left: 10px;
      box-sizing: border-box;
    }
    ::v-deep .el-radio{
      width: 100%;
      margin-right: 0;
      color: #333;
    }
    .cancelBtn{
      text-align: center;
      height: 40px;
      line-height: 40px;
      background: #6da4e8;
      color: #fff;
      border-radius: 4px;
      margin: 10px;
      cursor: pointer;
    }
  }

  .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>