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 #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"></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 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: "nrbh" },
      { label: "类型", prop: "lx" },
      { label: "内容", prop: "nr" }
    ],
    tableColumn2: [
      { label: "积分排名", prop: "pm" },
      { label: "照片", prop: "zp" },
      { label: "姓名", prop: "xm" },
      { label: "身份证号", prop: "sfzh", showOverflowTooltip: true },
      { label: "居住地址", prop: "jzdz", showOverflowTooltip: true },
      { label: "人员类别", prop: "rylb", showOverflowTooltip: true },
      { label: "布控原因", prop: "bkyy", showOverflowTooltip: true },
      { label: "风险等级", prop: "fxdj", showOverflowTooltip: true },
      { label: "风险积分", prop: "fxjf", showOverflowTooltip: true },
      { label: "模型标签", prop: "mxbq", showOverflowTooltip: true },
      { label: "是否关注", prop: "sfgz", showOverflowTooltip: 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 searchBox = ref();

  // 树形菜单数据
  const treeData = ref([
    {
      label: "林芝市公安局（200）",
      children: [
        { label: "工布江达县公安局（100）" },
        { label: "工布江达城区派出所（10）" },
        { label: "某某某派出所（10）" },
        { label: "某某某公安局（100）" }
      ]
    }
  ]);
  const defaultProps = {
    children: "children",
    label: "label"
  };

  // 事件处理函数
  const handleNodeClick = data => {
    console.log(data);
  };

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

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

  onMounted(() => {
    tabHeightFn();
  });
</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% - 290px);
      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>