Merge branch 'main' of http://61.139.16.27:26684/zy_oyj/sgxt_web

package.json

@@ -23,6 +23,7 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
+    "draggable-resizable-vue3": "1.0.94-beta",
     "echarts": "^5.3.3",
     "echarts-gl": "^2.0.9",
     "el-table-infinite-scroll": "^3.0.6",
@@ -36,6 +37,7 @@
     "moment": "^2.30.1",
     "ol": "^6.14.1",
     "pinia": "^3.0.1",
+    "siriwave": "2.3.0",
     "tesseract.js": "^6.0.1",
     "vue": "^3.2.8",
     "vue-draggable-plus": "^0.6.0",

src/views/home/model/qblyType.vue

@@ -16,7 +16,8 @@
     </el-popover>
   </div>
   <div class="comom-cnt">
-    <BarHatEcharts echartsId="qbltBox" :autoTooltip="true" :data="list"></BarHatEcharts>
+        <!-- <BarHatEcharts echartsId="qbltBox" :autoTooltip="true" :data="list"></BarHatEcharts> -->
+    <QingBaoTable ref="qingbaoTable" />
   </div>
 </template>
 
@@ -25,6 +26,7 @@ import { qcckPost } from "@/api/qcckApi.js";
 import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
 import { onMounted, reactive, ref } from "vue";
 import TimeData from '@/views/home/model/mesgSwitch/timeData.vue'
+import QingBaoTable from './qingBaowbTable.vue'
 const list = reactive({
   xDate: ['110警情', '人力情报', '系统采集', '民警处置单'],
   list: [
@@ -34,8 +36,9 @@ const list = reactive({
 })
 const emit = defineEmits(['reversalPush'])
 const visible = ref(false)
+const qingbaoTable = ref()
 onMounted(() => {
-  getCount()
+  // getCount() // 柱状图先不要了
 });
 const listQuery = ref()
 const getCount = () => {
@@ -61,6 +64,8 @@ const changeTime = (val) => {
     ...val
   }
   getCount()
+  // 触发表格数据刷新
+  qingbaoTable.value && qingbaoTable.value.fetchData()
 }
 const reversalPush = () => {
   emit('reversalPush')

src/views/home/model/qingBaowbTable.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="qingbao-table-container">
+    <div class="tab-buttons">
+      <div class="tab-button" :class="{ active: activeTab === 'xxy' }" @click="switchTab('xxy')">
+        优秀信息员
+      </div>
+      <div class="tab-button" :class="{ active: activeTab === 'ypy' }" @click="switchTab('ypy')">
+        优秀研判的列表
+      </div>
+    </div>
+
+
+    <div class="table-wrapper">
+      <el-table :data="tableData" style="width: 100%" height="calc(100% - 1px)" :header-cell-style="{
+        background: 'transparent',
+        color: '#0d4b8a',
+        borderColor: '#0d4b8a'
+      }" :row-style="{
+        background: 'transparent',
+        color: '#fff',
+        borderColor: '#0d4b8a'
+      }" stripe>
+        <el-table-column prop="ssbm" label="部门名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="xm" label="姓名" min-width="80" show-overflow-tooltip />
+        <!-- 信息员积分 和 研判员积分 -->
+        <el-table-column :prop="scoreField" :label="scoreLabel" min-width="80" show-overflow-tooltip />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { qcckGet } from "@/api/qcckApi.js"
+
+const activeTab = ref('xxy') // 默认选中优秀信息员
+const tableData = ref([])
+const tableHeight = ref(300)
+
+// 根据当前标签页确定积分字段和标签
+const scoreField = computed(() => {
+  return activeTab.value === 'xxy' ? 'xxyjf' : 'ypyjf'
+})
+
+const scoreLabel = computed(() => {
+  return activeTab.value === 'xxy' ? '信息员积分' : '研判员积分'
+})
+
+
+// 切换标签页
+const switchTab = (tab) => {
+  activeTab.value = tab
+  fetchData()
+}
+
+
+// 获取表格数据
+const fetchData = () => {
+  const params = {
+  }
+  const url = activeTab.value === 'xxy' ? '/mosty-gsxt/xxcj/mjjf/cjrList' : '/mosty-gsxt/xxcj/mjjf/ypyList'
+  qcckGet(params, url).then(res => {
+    tableData.value = Array.isArray(res) ? res : []
+    tableData.value = tableData.value.slice(0, 100) // 取前100条数据，避免卡顿
+  }).catch(error => {
+    tableData.value = []
+  })
+}
+
+onMounted(() => {
+  // 设置表格高度
+  // tableHeight.value = calc(100% - 50px)
+  fetchData()
+})
+
+// 暴露方法给父组件，用于时间查询
+defineExpose({
+  fetchData
+})
+</script>
+
+<style lang="scss" scoped>
+.qingbao-table-container {
+  height: 100%;
+  padding: 2px 10px;
+
+  .tab-buttons {
+    display: flex;
+    margin-bottom: 4px;
+    gap: 10px;
+
+    .tab-button {
+      padding: 0px 4px;
+      background: rgba(0, 77, 167, 0.6);
+      color: #fff;
+      border: 1px solid #0099ff;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-size: 14px;
+
+      &:hover {
+        background: rgba(0, 77, 167, 0.8);
+      }
+
+      &.active {
+        background: rgba(0, 244, 255, 0.8);
+        color: #000;
+        border-color: #00f4ff;
+      }
+    }
+  }
+
+  .table-wrapper {
+    height: calc(100% - 30px);
+
+    :deep(.el-table) {
+      background: transparent;
+
+      tr {
+        background-color: rgba(0, 78, 167, 0.041) !important;
+      }
+
+      .el-table__header-wrapper {
+        background: transparent;
+      }
+
+      .el-table__body-wrapper {
+        background: transparent;
+      }
+
+      .el-table__row {
+        background: transparent !important;
+
+        &:hover>td.el-table__cell {
+          background: transparent !important;
+        }
+      }
+
+      // 设置行高
+      .el-table__row td {
+        height: 32px !important;
+        line-height: 32px !important;
+      }
+
+      // 设置表头行高
+      .el-table__header th {
+        height: 36px !important;
+        line-height: 36px !important;
+        padding: 0 !important;
+        background: transparent !important;
+      }
+
+      // 去掉所有白色背景
+      &::before {
+        display: none;
+      }
+
+      .el-table__cell {
+        background: transparent !important;
+      }
+
+      .el-table__header th.el-table__cell {
+        background: transparent !important;
+      }
+
+      .el-table__cell {
+        border-bottom: 1px solid #0d4b8a;
+        padding: 0 12px;
+      }
+
+      // 去掉表格的白色背景
+      .el-table__inner {
+        background-color: transparent !important;
+      }
+
+      .el-table__header {
+        background-color: transparent !important;
+      }
+
+      .el-table__body {
+        background-color: transparent !important;
+      }
+    }
+  }
+}
+</style>