更新大屏

2025-04-15 14:38:12 +08:00
parent 8b786df36a
commit 7d1ed23a98
90 changed files with 2828 additions and 1061 deletions
--- a/src/views/home/model/qbfkCount.vue
+++ b/src/views/home/model/qbfkCount.vue
@ -0,0 +1,174 @@
+<template>
+  <div class="comom-title">
+    <span class="title">情报反馈统计</span>
+  </div> 
+  <div class="comom-cnt">
+    <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { fa } from 'element-plus/es/locale.mjs';
+
+const initChart = () => {
+  const chartDom = document.getElementById('qbfk');
+  const myChart = echarts.init(chartDom);
+  
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+      backgroundColor: 'rgba(0,0,0,0.7)',
+      borderColor: '#0C2E5A',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    legend: {
+      top: 'middle',
+      right: '5%',
+      orient: 'vertical',
+      itemGap: 20,
+      textStyle: {
+        color: '#fff',
+        fontSize: 14
+      },
+      itemWidth: 15,
+      itemHeight: 15,
+      icon: 'roundRect',
+      formatter: function(name) {
+        const data = option.series[0].data;
+        const target = data.find(item => item.name === name);
+        if (target) {
+          return `${name}  ${target.value}  ${(target.value / 50 * 100).toFixed(0)}%`;
+        }
+        return name;
+      }
+    },
+    series: [
+      {
+        name: '情报反馈统计',
+        type: 'pie',
+        radius: ['40%', '75%'],
+        center: ['30%', '50%'],
+        startAngle: 90,
+        zlevel: 10,
+        itemStyle: {
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: '#0C2E5A'
+        },
+        selectedMode: 'single',
+        selectedOffset: 30,
+        animation: true,
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+        animationDelay: function (idx) {
+          return Math.random() * 200;
+        },
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: '#0C2E5A',
+          opacity: 0.8,
+          shadowBlur: 20,
+          shadowColor: 'rgba(0,0,0,0.5)'
+        },
+        data: [
+          { 
+            value: 18, 
+            name: '实反馈', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FF6B9A' },
+                { offset: 1, color: '#FF4B7A' }
+              ])
+            } 
+          },
+          { 
+            value: 13, 
+            name: '超时反馈', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FFAA33' },
+                { offset: 1, color: '#FF8A00' }
+              ])
+            } 
+          },
+          { 
+            value: 17, 
+            name: '处置下发', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FFE699' },
+                { offset: 1, color: '#FFD666' }
+              ])
+            } 
+          },
+          { 
+            value: 2, 
+            name: '未反馈', 
+            itemStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#66B5FF' },
+                { offset: 1, color: '#3AA1FF' }
+              ])
+            } 
+          }
+        ],
+        zlevel: 10,
+        emphasis: {
+          scale: true,
+          scaleSize: 10,
+          itemStyle: {
+            shadowBlur: 30,
+            shadowColor: 'rgba(0,0,0,0.6)'
+          }
+        }
+      }
+    ],
+    
+  };
+
+  option && myChart.setOption(option);
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
+};
+
+onMounted(() => {
+  initChart();
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.xsBox{
+    background: #052249;
+    .xs-item{
+        width: 31%;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        background: url("~@/assets/images/content-item.png") no-repeat center center;
+        background-size: 100% 100%;
+    }
+}
+
+.qbfkBox {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>