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>
  <teleport to="#app" v-if="showScreen">
    <!-- 深度研判 -->
    <DeepIn v-model="showScreen"></DeepIn>
  </teleport>
</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 showScreen = ref(false);
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 handleDeepIn = (id) => {
  showScreen.value = true;
};


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>