feat: 更新列表

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,143 @@
+<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: 'rgba(2, 29, 75, 0.1)',
+        color: '#fff',
+        borderColor: '#0d4b8a'
+      }" :row-style="{
+          background: 'rgba(0, 29, 75, 0.3)',
+          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 promes = {
+    startTime: '',
+    endTime: ''
+  }
+  const url = activeTab.value === 'xxy' ? '/mosty-gsxt/xxcj/mjjf/cjrList' : '/mosty-gsxt/xxcj/mjjf/ypyList'
+  qcckGet(promes, url).then(res => {
+    tableData.value = res || []
+  }).catch(error => {
+    console.error('获取表格数据失败:', error)
+    tableData.value = []
+  })
+}
+
+onMounted(() => {
+  // 设置表格高度
+  // tableHeight.value = calc(100% - 50px)
+  fetchData()
+})
+
+// 暴露方法给父组件，用于时间查询
+defineExpose({
+  fetchData
+})
+</script>
+
+<style lang="scss" scoped>
+.qingbao-table-container {
+  height: 100%;
+  padding: 10px;
+
+  .tab-buttons {
+    display: flex;
+    margin-bottom: 15px;
+    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% - 50px);
+
+    :deep(.el-table) {
+      background: transparent;
+
+      .el-table__header-wrapper {
+        background: transparent;
+      }
+
+      .el-table__body-wrapper {
+        background: transparent;
+      }
+
+      .el-table__row {
+        background: rgba(0, 29, 75, 0.3);
+
+        &:hover>td.el-table__cell {
+          background: rgba(0, 77, 167, 0.5) !important;
+        }
+      }
+
+      .el-table__cell {
+        border-bottom: 1px solid #0d4b8a;
+        padding: 8px 12px;
+      }
+    }
+  }
+}
+</style>