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">新增</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 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 #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.total
            }"
          ></Pages>
        </div>
      </div>
    </div>
  </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 { 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 searchConfiger = ref([
  { label: "管辖部门", prop: 'department', placeholder: "请选择管辖部门", showType: "select" },
  { label: "是否关注", prop: 'sfgz', showType: "defaultSlot" },
]);
const checkData = reactive({
  list: ["是", "否"],
  hasChoose: ["是", "否"]
});
const btnsList = ref(['全部','警情','人力情报','线索','民警处置文本','交通事故']);
const searchBox = ref();
const pageData = reactive({
  tableData: [
    {nrbh:'测试内容',lx:'1',nr:'测试内容'},
    {nrbh:'测试内容',lx:'1',nr:'测试内容'},
  ],
  tableData2: [],
  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,
  tableColumn: [
    { label: "内容编号", prop: "nrbh" },
    { label: "类型", prop: "lx" },
    { label: "内容", prop: "nr" },
  ],
  tableColumn2: [
    { label: "积分排名", prop: "nrbh" },
    { label: "照片", prop: "lx" },
    { label: "姓名", prop: "nr" },
    { label: "身份证号", prop: "nr" },
    { label: "居住地址", prop: "nr" },
    { label: "人员类别", prop: "nr" },
    { label: "布控原因", prop: "nr" },
    { label: "风险等级", prop: "nr" },
    { label: "风险积分", prop: "nr" },
    { label: "模型标签", prop: "nr" },
    { label: "是否关注", prop: "nr" },
  ],
})


// 树形菜单数据
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 handleDateChange = () => {
  // 处理日期变化
};

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

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;
    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% - 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>