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

<template>
  <div class="statistical-analysis">
    <!-- 左侧树形菜单 -->
    <div class="left-menu">
      <!-- 这个部分用的是组件-后期替换 -->
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        default-expand-all
      />
    </div>

    <!-- 右侧内容区 -->
    <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">新增</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="danger" @click="deleteRow(row)"
                >删除</el-link
              >
              <el-link size="small" type="primary" @click="viewDetails(row)"
                >查看</el-link
              >
            </template>
          </MyTable>
          <!-- <div class="ww100 flex just-center mt8">
            <el-button type="primary">智能解析</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
            v-for="(it, idx) in btns"
            :key="idx"
            :type="it.type"
            :icon="it.icon"
            size="small"
            @click="importData"
          >
            {{ it.label }}
          </el-button>
        </div>
        <div>
          <MyTable
            :tableData="pageData.tableData2"
            :tableColumn="pageData.tableColumn2"
            :tableHeight="pageData.tableHeight2"
            :key="pageData.keyCount"
            :tableConfiger="pageData.tableConfiger2"
            :controlsWidth="pageData.controlsWidth2"
            @chooseData="chooseData"
          >
            <!-- 操作 -->
            <template #controls="{ row }">
              <el-link size="small" type="primary" @click="handleDeepIn(row.id)"
                >深度研判</el-link
              >
              <el-link size="small" type="primary" @click="viewDetails(row)"
                >查看</el-link
              >
              <el-link size="small" type="primary" @click="viewDetails(row)"
                >修改</el-link
              >
              <el-link size="small" type="danger" @click="deleteRow(row)"
                >删除</el-link
              >
            </template>
          </MyTable>
          <Pages
            @changeNo="changeNo"
            @changeSize="changeSize"
            :tableHeight="pageData.tableHeight2"
            :pageConfiger="{
              ...pageData.pageConfiger,
              total: pageData.total
            }"
          ></Pages>
        </div>
      </div>
    </div>
  </div>
  <DeepIn ref="deepIn" @getList="getList" ></DeepIn>
</template>

<script setup>
import DeepIn from "./components/deepIn.vue";
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 { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_GS_RQFJ_LX } = proxy.$dict("D_GS_RQFJ_LX"); //获取字典数据
const searchConfiger = ref([
  {
    label: "管辖部门",
    prop: "department",
    placeholder: "请选择管辖部门",
    showType: "select"
  },
  { label: "是否关注", prop: "sfgz", showType: "defaultSlot" }
]);
const checkData = reactive({
  list: ["是", "否"],
  hasChoose: ["是", "否"]
});
const pageData = reactive({
  tableData: [
    { nrbh: "测试内容", lx: "1", nr: "测试内容" },
    { nrbh: "测试内容", lx: "1", nr: "测试内容" }
  ],
  tableData2: [
    {
      pm: "1",
      lx: "1",
      zp: "xx",
      xm: "张三",
      sfzh: "12345619900101001X",
      jzdz: "浙江省杭州市西湖区",
      rylb: "xx",
      bkyy: "xx",
      fxdj: "xx",
      fxjf: "xx",
      mxbq: "xx",
      sfgz: "是"
    }
  ],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false
  },
  tableConfiger2: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
    showIndex: false
  },
  tableHeight: 230,
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
  controlsWidth: 120,
  controlsWidth2: 220,
  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 btns = reactive([
  { label: "新增", type: "primary", icon: "CirclePlus" },
  { label: "一件布控", type: "primary" },
  { label: "级别变更", type: "primary" },
  { label: "警种变更", type: "primary" },
  { label: "指定分配", type: "primary" },
  { label: "添加标签", type: "primary" },
  { label: "协控申请", type: "primary" },
  { label: "撤控申请", type: "primary" },
  { label: "移交管控", type: "primary" },
  { label: "批量导入", type: "primary" },
  { label: "导出", type: "primary" },
  { label: "批量删除", type: "danger", icon: "Delete" }
]);
const queryFrom = ref({});
const searchBox = ref();

// 树形菜单数据
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 deleteRow = (row) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/closeById/" + row.id)
    .then((res) => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(() => {});
};
// 事件处理函数
const handleNodeClick = (data) => {
  console.log(data);
};

const deepIn = ref();
// 处理深度研判
const handleDeepIn = (id) => {
  deepIn.value.init(id);
};

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;
  }
  .right-content {
    float: left;
    width: calc(100% - 452px);
    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>