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

<template>
  <div class="statistical-analysis">
    <!-- 左侧树形菜单 -->
    <ul class="left-menu">
      <li class="f20">重点人初步发掘</li>
      <li class="left-menu-item" v-for="(it, idx) in btnsList" :key="idx">
        {{ it }}
      </li>
    </ul>
    <!-- 右侧内容区 -->
    <div class="right-content">
      <Search
        :searchArr="searchConfiger"
        @submit="onSearch"
        @reset="onReset"
        :key="pageData.keyCount"
      >
        <template #defaultSlot>
          <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
        </template>
      </Search>
      <div class="tableCnt mb10 pl10 pr10">
        <PageTitle title="发掘内容" style="color: #333">
          <el-button type="primary" size="small" @click="addEdit('add', '')">
            <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
            <span style="vertical-align: middle" @click="addEdit('add', '')"
              >新增</span
            >
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <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>
        <div>
          <MyTable
            :tableData="pageData.tableData"
            :tableColumn="pageData.tableColumn"
            :tableHeight="pageData.tableHeight"
            :key="pageData.keyCount"
            :tableConfiger="pageData.tableConfiger"
            :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="addEdit('edit', row)"
                >编辑</el-link
              >
              <el-link size="small" type="primary" @click="addEdit('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>
      <div class="tableCnt mb10 pl10 pr10">
        <PageTitle
          title="模型智能识别/LP解析结果"
          style="color: #333"
        ></PageTitle>
        <div ref="searchBox" class="mb8">
          <el-button type="primary" size="small" @click="addEdit('add', '')">
            <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
            <span style="vertical-align: middle">新增</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">一件布控</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">级别变更</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">警种变更</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">指定分配</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">添加标签</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">协控申请</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">撤控申请</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">移交管控</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span style="vertical-align: middle">批量导入</span>
          </el-button>
          <el-button type="primary" size="small" @click="importData">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <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>
        </div>
        <div>
          <MyTable
            :tableData="pageData.tableData2"
            :tableColumn="pageData.tableColumn2"
            :tableHeight="pageData.tableHeight2"
            :key="pageData.keyCount"
            :tableConfiger="pageData.tableConfiger2"
            :controlsWidth="pageData.controlsWidth"
            @chooseData="chooseData"
          >
            <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.total2
            }"
          ></Pages>
        </div>
      </div>
    </div>

    <IntelligentParsing
      :tableData="pageData.tableData"
      ref="IntelligentParsingRef"
    />

    <addForm ref="addFormDiloag" @onSearch="onSearch" />
  </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 IntelligentParsing from "./components/IntelligentParsing.vue";
import { ElMessage } from "element-plus";

import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { Delete } from "@element-plus/icons";
import { fa } from "element-plus/es/locale.mjs";
const { proxy } = getCurrentInstance();
const { D_GS_RQFJ_LX, D_GS_RQFJ_FXDJ, D_BZ_SF, D_GS_RQFJ_FXLB } = proxy.$dict(
  "D_GS_RQFJ_LX",
  "D_GS_RQFJ_FXDJ",
  "D_BZ_SF",
  "D_GS_RQFJ_FXLB"
); //获取字典数据
const searchConfiger = ref([
  {
    label: "管辖部门",
    prop: "department",
    placeholder: "请选择管辖部门",
    showType: "select"
  },
  { label: "是否关注", prop: "sfgz", showType: "defaultSlot" }
]);
const addFormDiloag = ref();

const checkData = reactive({
  list: ["是", "否"],
  hasChoose: ["是", "否"]
});
const btnsList = ref([
  "全部",
  "警情",
  "人力情报",
  "线索",
  "民警处置文本",
  "交通事故"
]);
const IntelligentParsingRef = ref();
const searchBox = ref();
const queryFrom = ref({});
const pageData = reactive({
  tableData: [],
  tableData2: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false
  },
  tableConfiger2: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
    showIndex: false
  },
  tableHeight: 230,
  total: 0,
  total2: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
  controlsWidth: 160,
  tableColumn: [
    { label: "发掘类型", prop: "fjLx", showSolt: true },
    { label: "发掘文本	", prop: "fjWb" }
  ],
  tableColumn2: [
    { label: "姓名", prop: "ryXm" },
    { label: "英文姓名", prop: "ryXmYw" },
    { label: "别名", prop: "ryBm" },
    { label: "网名", prop: "ryWm" },
    { label: "绰号", prop: "ryCh" },
    { label: "手机号码", prop: "rySjhm" },
    { label: "身份证号码", prop: "rySfzh" },
    { label: "户籍地址", prop: "ryHjdz" },
    { label: "护照号码", prop: "ryHzhm" },
    { label: "现住地址", prop: "ryXzdz" },
    { label: "银行卡号", prop: "ryYhkh" },
    { label: "附件照片", prop: "ryFjZp" },
    { label: "管辖单位", prop: "gxDwDm" },
    { label: "风险等级", prop: "fxDj", showSolt: true },
    { label: "风险类别", prop: "fxLb", showSolt: true },
    { label: "是否关注", prop: "sfGz", showSolt: true },
    { label: "是否转布控人员", prop: "sfZbkry", showSolt: true },
    { label: "是否转重点人员", prop: "sfZzdry", showSolt: true }
  ]
});
// 树形菜单数据
const treeData = ref([
  {
    label: "林芝市公安局（200）",
    children: [
      { label: "工布江达县公安局（100）" },
      { label: "工布江达城区派出所（10）" },
      { label: "某某某派出所（10）" },
      { label: "某某某公安局（100）" }
    ]
  }
]);

const defaultProps = {
  children: "children",
  label: "label"
};

// 搜索
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) => {
  pageData.tableConfiger2.loading = true;
  let data = { ...pageData.pageConfiger };
  let url = "/mosty-gsxt/tbGsxtRqfjRy/selectPage";
  qcckGet(data, url)
    .then((res) => {
      pageData.tableData2 = res.records || [];
      pageData.total2 = res.total;
      pageData.tableConfiger2.loading = false;
    })
    .catch(() => {
      pageData.tableConfiger2.loading = false;
    });
};
//新增编辑
const addEdit = (type, row) => {
  addFormDiloag.value.init(type, row);
};
const intelligent = () => {
  IntelligentParsingRef.value.init();
};
const submitData = () => {
  dialogVisible.value = false;
};
// 事件处理函数
const handleNodeClick = (data) => {
  console.log(data);
};
//删除操作
const deleteRow = (row) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/closeById/" + row.id)
    .then((res) => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(() => {});
};
const handleDateChange = () => {
  // 处理日期变化
};

const handleExport = () => {
  // 处理导出
};

const tabHeightFn = () => {
  pageData.tableHeight2 =
    window.innerHeight - searchBox.value.offsetHeight - 690;
  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% - 20px);
    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background-color: #fff;
    border-right: 1px solid #e8e8e8;
    color: #333;
    line-height: 32px;
    text-align: center;
    .left-menu-item {
      border-bottom: 1px solid #e8e8e8;
      &:hover {
        color: #409eff;
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .right-content {
    float: left;
    width: calc(100% - 402px);
    height: 100%;
    padding: 0 20px 0;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    .tableCnt {
      height: calc((100vh - 253px) / 2);
      background: #fff;
      border-radius: 4px;
    }
  }
}
</style>