更新后台

src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue

@@ -2,95 +2,146 @@
   <div class="echartsBox" ref="chartRef"></div>
 </template>
 
-<script>
+<script setup>
 import * as echarts from 'echarts';
 import 'echarts-gl';
+import { ref, onMounted } from 'vue';
+const chartRef = ref()
+const initChart = () => {
+  const myChart = echarts.init(chartRef.value);
+  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)'
+          }
+        }
+      }
+    ],
+    
+  };
 
-// export default {
+  option && myChart.setOption(option);
-//   name: 'Bkjbtj',
+
-//   data() {
+  // 监听窗口大小变化
-//     return {
+  window.addEventListener('resize', () => {
-//       chart: null,
+    myChart.resize();
-//       chartData: [
+  });
-//         { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
+};
-//         { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
+
-//         { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
+onMounted(() => {
-//         { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
+  initChart();
-//       ]
+});
-//     };
-//   },
-//   mounted() {
-//     this.initChart();
-//     window.addEventListener('resize', this.resizeChart);
-//   },
-//   beforeDestroy() {
-//     window.removeEventListener('resize', this.resizeChart);
-//     this.chart && this.chart.dispose();
-//   },
-//   methods: {
-//     initChart() {
-//       this.chart = echarts.init(this.$refs.chartRef);
-//       const option = {
-//         backgroundColor: 'transparent',
-//         tooltip: {
-//           trigger: 'item',
-//           formatter: '{b}: {c} ({d}%)'
-//         },
-//         legend: {
-//           orient: 'vertical',
-//           right: '5%',
-//           top: 'middle',
-//           textStyle: {
-//             color: '#fff'
-//           }
-//         },
-//         series: [{
-//           name: '告警统计',
-//           type: 'pie3D',
-//           radius: '55%',
-//           center: ['40%', '50%'],
-//           viewControl: {
-//             beta: 40,
-//             alpha: 20,
-//             distance: 200,
-//             rotateSensitivity: 1,
-//             zoomSensitivity: 1
-//           },
-//           label: {
-//             show: true,
-//             formatter: '{d}%',
-//             textStyle: {
-//               color: '#fff',
-//               fontSize: 14,
-//               borderWidth: 1
-//             }
-//           },
-//           labelLine: {
-//             show: true,
-//             lineStyle: {
-//               color: '#fff'
-//             }
-//           },
-//           itemStyle: {
-//             opacity: 0.8,
-//             borderWidth: 1,
-//             borderColor: '#fff'
-//           },
-//           emphasis: {
-//             itemStyle: {
-//               opacity: 1
-//             }
-//           },
-//           data: this.chartData
-//         }]
-//       };
-//       this.chart.setOption(option);
-//     },
-//     resizeChart() {
-//       this.chart && this.chart.resize();
-//     }
-//   }
-// };
 </script>
 
 <style lang="scss" scoped>

src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue

@@ -3,7 +3,7 @@
     <!-- 头部筛选 -->
     <div class="topSearch">
       <el-form v-model="listQuery">
-        <MOSTY.Department clearable width="400px" v-model="listQuery.ssbmdm" />
+        <!-- <MOSTY.Department clearable width="400px" v-model="listQuery.ssbmdm" /> -->
         <MOSTY.Select v-model="listQuery.sd" :dictEnum="search.xd" />
         <MOSTY.Select v-model="listQuery.zs" :dictEnum="search.zs" />
         <MOSTY.Select v-model="listQuery.qy" :dictEnum="search.qy" />
@@ -34,14 +34,7 @@
       <!-- 第一部门 -->
       <div>
         <div class="hed flex align-center">
-          <span
+          <span @click="active = it" :class="active == it ? 'active' : ''" class="f14 mr10 pointer" v-for="it in btn.bkBtn" :key="it">{{ it }}</span>
-            @click="active = it"
-            :class="active == it ? 'active' : ''"
-            class="f14 mr10 pointer"
-            v-for="it in btn.bkBtn"
-            :key="it"
-            >{{ it }}</span
-          >
         </div>
         <Count></Count>
       </div>
@@ -79,7 +72,7 @@
 
     <!-- 底部按钮 -->
     <ul class="footBox">
-      <li class="footItem" v-for="it in btn.footBtn" :key="it">{{ it }}</li>
+      <li class="footItem" v-for="it in btn.footBtn" :key="it"> {{ it }} </li>
     </ul>
   </div>
 </template>
@@ -204,10 +197,10 @@ const active1 = ref("人员身份标签统计");
     border-radius: 6px 6px 6px 6px;
     background: rgba(0, 29, 75, 0.4);
     .listContent {
-      height: calc(100% - 86px);
+      height: calc(100% - 96px);
       overflow: hidden;
       overflow-y: auto;
-      padding: 10px;
+      padding: 10px 10px 0;
       box-sizing: border-box;
     }
     ::v-deep .el-input__inner {
@@ -239,13 +232,18 @@ const active1 = ref("人员身份标签统计");
     display: flex;
     align-items: center;
     .footItem{
-      background: red;
       width: 195px;
       height: 42px;
       text-align: center;
       line-height: 42px;
       margin: 0 10px;
+      background-image: linear-gradient( 95deg,#0072ff 0%,  #0072ff 100%);
+      transform: skew(-20deg);
       font-size: 16px;
+      border-radius: 4px;
+      &:nth-child(2){
+        background-image: linear-gradient( 95deg,#FFA800 0%,  #FFA800 100%);
+      }
     }
   }
   .hed {

src/views/home/model/qbfkCount.vue

@@ -11,7 +11,6 @@
 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');