更新目录

2025-07-10 20:07:17 +08:00
parent a487cf59a1
commit 529089b73c
4 changed files with 10 additions and 32 deletions
--- a/src/views/backOfficeSystem/JudgmentHome/ResearchHome/index.vue
+++ b/src/views/backOfficeSystem/JudgmentHome/ResearchHome/index.vue
@ -0,0 +1,352 @@
+<template>
+  <div class="yp—home flex">
+    <!-- 左边 -->
+    <div class="leftbox">
+      <div class="title">
+        <span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
+        <span class="ml10 mr10">专题统计</span>
+        <span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
+      </div>
+      <div class="commCnt">
+        <div class="hh50">
+          <div class="comm-title">类型统计</div>
+          <div class="echartsBox">
+            <MoreBarEcharts echartsId="cztjEcharts" :data="obj.data_lxtj"></MoreBarEcharts>
+          </div>
+        </div>
+        <div class="hh50">
+          <div class="comm-title">会商统计</div>
+          <div class="echartsBox">
+            <LineEcharts echartsId="hstjEcharts" :data="obj.data_hstj"></LineEcharts>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 右边 -->
+    <div class="rightbox">
+      <div class="title">
+        <span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
+        <span class="ml10 mr10">研判首页</span>
+        <span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
+         <el-button class="btn" type="primary">研判报告</el-button>
+      </div>
+      <div class="commCnt">
+        <div ref="searchBox">
+          <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
+        </div>
+        <ul class="listBox" :style="{height:pageData.boxHeight+'px'}">
+          <li class="list-item" ref="listBoxRef" v-for="(it,idx) in list" :key="idx">
+            <div class="comm-title title-s">{{ it.title }}</div>
+            <div class="list-table" >
+              <MyTable
+                :tableData="it.tableList"
+                :tableColumn="pageData.tableColumn"
+                :tableHeight="pageData.tableHeight"
+                :key="it.keyCount"
+                :isScroll="true"
+                :fixed="false"
+                :tabelModel="it.title"
+                :tableConfiger="pageData.tableConfiger"
+                :controlsWidth="pageData.controlsWidth"
+                @changePage="changePage"
+              >
+                <!-- 操作 -->
+                <template #controls="{ row }">
+                  <el-link type="primary" size="small">网上会商</el-link>
+                  <el-link type="primary" size="small">处置</el-link>
+                </template>
+              </MyTable>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckPost, qcckGet } from "@/api/qcckApi.js";
+import MoreBarEcharts from "@/views/home/echarts/moreBarEcharts.vue";
+import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { nextTick, onMounted, reactive,getCurrentInstance ,ref, watch } from 'vue';
+import { set } from "lodash";
+const { proxy } = getCurrentInstance();
+const {D_BZ_SSZT,D_GS_XS_LY} = proxy.$dict("D_BZ_SSZT","D_GS_XS_LY"); //获取字典数据
+const searchBox = ref();
+const listBoxRef = ref();
+// 图数据
+const obj = reactive({
+   data_lxtj:{
+    xData:['上访','诈骗','敲诈勒索','盗窃','涉黄','涉毒','强奸猥亵','灾害事故','自杀'],
+    color:[['#0DBAC5','#28EEBF'],['#F06C0D','#EEB416']],
+    labelColor:'#000',
+    list:[
+      {label:'总数',val:[30,20,10,60,50,60,35,45,20]},
+    ]
+  },
+  data_hstj:{
+    xData:['上访','诈骗','敲诈勒索','盗窃','涉黄','涉毒','强奸猥亵','灾害事故','自杀'],
+    color:['#0386FB','#00FFFF'],
+    labelColor:'#000',
+    list:[
+      {label:'总数',val:[30,20,10,60,50,60,35,45,20]},
+    ]
+  }
+})
+// 搜索
+const searchConfiger = ref([
+  { label: "线索来源", prop: 'qbLy', placeholder: "请选择线索来源", showType: "select",options:D_GS_XS_LY },
+  { label: "线索内容", prop: "xsNr", placeholder: "请输入",  showType: "input"},
+  { label: "开始时间", prop: 'zxkssj', placeholder: "请选择开始时间", showType: "date" },
+  { label: "结束时间", prop: 'zxjssj', placeholder: "请选择结束时间", showType: "date" },
+])
+// 每个列表对应的值
+const list = ref([
+  // { title:'诈骗', tableList:[]},
+])
+// 列表公用
+const pageData = reactive({
+ tableColumn:[
+    { label: "线索标题", prop: "xsMc",showOverflowTooltip: true},
+    { label: "线索内容", prop: "xsNr",showOverflowTooltip: true},
+    { label: "涉及人数", prop: "sjrs",showOverflowTooltip: true},
+    { label: "上报时间", prop: "sxsbsj",showOverflowTooltip: true},
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    showIndex:false,
+    rowHeight: 30,
+  },
+  controlsWidth: 120, //操作栏宽度
+});
+onMounted(() => {
+  getCount(); //获取统计数据
+});
+
+const getCount = () => {
+  // 获取处置状态统计
+  qcckPost({}, '/mosty-gsxt/qbcj/getXscjTjByXslx').then(res => {
+    let arr = res || [];
+    obj.data_lxtj.xData = arr.map(v => v.zdmc);
+    obj.data_lxtj.list = [{ label: '总数', val: arr.map(v => v.count) }];
+  });
+  // 会商统计
+  qcckPost({}, '/mosty-gsxt/wshs/getWshyZttj').then(res => {
+    let arr = res || [];
+    obj.data_hstj.xData = arr.map(v => v.zdmc);
+    obj.data_hstj.list = [{ label: '总数', val: arr.map(v => v.count) }];
+  });
+};
+
+
+
+// 滚动加载
+const changePage = (val) => {
+  list.value.forEach((item, index) => {
+    if(val == item.title && item.tableList.length  < item.total) {
+      item.page++;
+      let params = { sszt: item.dm, pageNum: item.page, pageSize: 20, };
+      qcckPost(params, '/mosty-gsxt/qbcj/selectPage').then(res => {
+        let arr = res.records || [];
+        list.value[index].tableList = item.page == 1 ? arr : [...list.value[index].tableList, ...arr];
+        list.value[index].total = res.total;
+        item.keyCount++;
+      });
+    }
+  });
+};
+
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.boxHeight = window.innerHeight - searchBox.value.offsetHeight - 250
+  nextTick(() => {
+    pageData.tableHeight = listBoxRef.value[0].offsetHeight - 40;
+  }); 
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+
+const handleGetList = () => {
+  list.value.forEach((item, index) => {
+    let params = { sszt: item.dm, pageNum: 1, pageSize: 20 };
+    qcckGet(params, '/mosty-gsxt/qbcj/selectPage').then(res => {
+      list.value[index].tableList = res.records || [];
+      list.value[index].total = res.total;
+      item.keyCount++;
+    });
+  });
+};
+
+watch(()=>D_BZ_SSZT.value, (val) => {
+  let zdlist = val || [];
+  list.value = zdlist.map(v => ({ title: v.zdmc,dm:v.dm,keyCount:0, tableList: [],page:1,total:0 }));
+  if(list.value.length > 0) handleGetList();
+  setTimeout(() => {
+    tabHeightFn();
+  }, 400);
+}, { immediate: true });
+
+</script>
+
+<style lang="scss" scoped>
+.yp—home{
+  width: 100%;
+  height: 100%;
+  padding-top: 15px;
+  box-sizing: border-box;
+  color: #000;
+  .leftbox{
+    width:500px;
+    height: 100%;
+    margin-right: 10px;
+    background: #fff;
+  }
+  .rightbox{
+    flex: 1 0 0;
+    background: #fff;
+  }
+}
+
+@mixin common($width: 16px,$opacity:1){
+  height: $width;
+  width: $width;
+  border-radius: 50%;
+  background: #0386FB;
+  opacity: $opacity;
+}
+
+// 共同
+.title{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  font-size: 24px;
+  position: relative;
+  .sircle{
+    display: inline-block;
+  }
+  .sircleL1{
+    @include common(8px,0.5);
+  }
+  .sircleL2{
+    @include common(12px,0.75);
+  }
+  .sircleL3{
+    @include common(16px);
+  }
+  .sircleR1{
+    @include common(16px);
+  }
+  .sircleR2{
+    @include common(12px,0.75);
+  }
+  .sircleR3{
+    @include common(8px,0.5);
+  }
+  .btn{
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+  }
+}
+
+.commCnt{
+  height: calc(100% - 60px);
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  .comm-title{
+    position: relative;
+    font-size: 20px;
+    &::before{
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 78px;
+      height: 4px;
+      background: linear-gradient( 90deg, #3596F9 0%, rgba(53,150,249,0) 100%);
+      border-radius: 4px 4px 4px 4px;
+    }
+  }
+  
+  .echartsBox{
+    height: calc(100% - 30px);
+    margin-top: 4px;
+  }
+  
+}
+
+.listBox{
+  margin-top: 4px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  overflow-y: auto;
+  .list-item{
+    width: 49.5%;
+    height: calc(100% / 2 - 5px);
+    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.02);
+    border-radius: 8px 8px 8px 8px;
+    border: 1px solid #E8EDF6;
+    padding: 4px 4px;
+    box-sizing: border-box;
+    margin-bottom: 5px;
+    .title-s{
+      font-size: 16px;
+    }
+    .list-table{
+      height: calc(100% - 30px);
+      margin-top: 5px;
+    }
+  }
+  .list-item:nth-child(2n+1){
+    margin-right: 1%;
+  }
+}
+::v-deep .searchBox{
+  margin-bottom:0 !important;
+  padding: 2px !important;
+}
+
+::v-deep .el-table .table_blue_row {
+  background: #fff !important;
+}
+::v-deep .el-table th.el-table__cell{
+  font-size: 13px;
+  background: #EFF5F7;
+}
+
+::v-deep .el-table__empty-block{
+  width: 100%!important;
+}
+
+::v-deep .el-scrollbar__view{
+  border-right: none;
+}
+
+::v-deep .el-table .el-table__cell{
+  padding: 0;
+}
+
+::v-deep .el-table th.el-table__cell>.cell{
+  padding: 8px 0;
+}
+
+::v-deep .el-link {
+  margin: 3px;
+}
+
+</style>