6.13

src/views/monitor/components/box-1.vue

@@ -37,7 +37,7 @@
           <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalAlarm" />
         </div>
         <div class="scenic-item">
-          <span class="scenic-item__label">已处理</span>
+          <span class="scenic-item__label">已解除</span>
           <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
         </div>
       </div>
@@ -83,7 +83,12 @@
       <div class="flex pt-20">
         <div class="box">
           <Title3 title="拥堵告警" />
-          <Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
+          <!-- <Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" /> -->
+		  
+		  <traffic-jam :width="760" 
+		  :series="jamlData[0].data" 
+		  :data="jamXAxisData" :height="180" />
+		  
         </div>
       </div>
     </template>
@@ -178,6 +183,7 @@
             <Title3 title="异常告警占比" />
             <div class="flex">
               <alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
+			  
             </div>
           </div>
         </div>
@@ -192,7 +198,7 @@
   import alarmRate from './alarmRate'
   import alarmList from './alarmList'
   import alarmToday from './alarmToday'
-
+  import trafficJam from './traffic-jam'
   import { useWebSocket } from '@/hooks/socket'
   import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
   import {getPreviewUrlApi} from "@/api/home.js";

src/views/monitor/components/traffic-jam.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="traffic-jam" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
+
+  let props = defineProps({
+    series: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  watch(
+    () => props.series,
+    (val) => {
+      if (val.length) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  let params = null
+
+  const getSeriesData = () => {
+    return props.series
+  }
+  const getXAxisData = () => {
+    return props.data
+  }
+  const init = () => {
+    if (!params) {
+      params = {
+        grid: {
+          left: '4%',
+          right: '8%',
+          top: '10%',
+          bottom: '14%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(5, 72, 134, 1)'
+            }
+          },
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          },
+          data: getXAxisData()
+        },
+		 dataZoom: [
+			  {
+				type: 'slider', // 滑动条型dataZoom
+				show: true, // 显示dataZoom组件
+				xAxisIndex: [0], // 控制第一个x轴
+				start: 0, // 初始起始位置
+				end: 50 // 初始结束位置，可以根据数据量调整
+			  }
+		],
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            show: true,
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(0, 150, 255,0.4)',
+              type: 'dashed'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            data: getSeriesData(),
+            barWidth: fitChartSize(40),
+            label: {
+              show: true,
+              position: 'top',
+              color: '#fff',
+              fontSize: fitChartSize(12),
+              formatter: (res) => {
+                let valueMap = {
+                  1: '畅通',
+                  2: '缓行',
+                  3: '拥堵',
+                  4: '严重拥堵'
+                }
+                return valueMap[res.value]
+              }
+            },
+            itemStyle: {
+              color: (res) => {
+				  if(res.value>30){
+					  return '#00c000'
+				  }else{
+					  return '#b50000'
+				  }
+                // let colorMap = {
+                //   1: '#00c000',
+                //   2: '#ffa700',
+                //   3: '#ff0000',
+                //   4: '#b50000'
+                // }
+                // return '#b50000'
+              }
+            }
+          }
+        ]
+      }
+    } else {
+      params.xAxis.data = getXAxisData()
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
+  }
+</script>
+
+<style scoped lang="scss">
+  .traffic-jam {
+    width: vw(760);
+    height: vh(180);
+  }
+</style>