diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js
new file mode 100644
index 00000000..ab52e40c
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js
@@ -0,0 +1,391 @@
+var res = [
+   { value: 50, name: '情报板发布' },
+   { value: 1, name: '' },
+   { value: 20, name: '微博发布' },
+   { value: 1, name: '' },
+   { value: 30, name: '服务网站' },
+   { value: 1, name: '' },
+  ];
+ //  var res = this.evaluatedCountList;
+  var data1 = [], data2 = [], data3 = [], legendData = [];
+  var curIndex = 0;
+  var index = 0;
+  let angle = 0; //角度，用来做简单的动画效果的
+
+  for (var i = 0; i < res.length; i++) {
+
+    data1.push({
+      value: res[i].value,
+      name: res[i].name,
+    })
+    data2.push({
+      value: res[i].value,
+      name: res[i].name,
+      itemStyle: {
+        opacity: 0.4,
+      },
+    })
+
+    data3.push({
+      value: res[i].value,
+      name: res[i].name,
+      itemStyle: {
+        opacity: 0.1,
+      },
+    })
+    if ( res[i].name != "" )
+    legendData.push(res[i].name);
+  }
+
+ var  options = {
+    color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'],
+    title: [
+      {
+        text:'999',
+        top: '25%',
+        textAlign: 'center',
+        left: '50%',
+        textStyle: {
+          color: '#ffffff',
+          fontSize: 30,
+          fontFamily: 'SourceHanSansCN',
+        },
+      },
+      {
+        text: '总数',
+        top: '38%',
+        textAlign: 'center',
+        left: '50%',
+        textStyle: {
+          color: 'rgba(242, 252, 253, 0.84)',
+          fontSize: 16,
+          fontFamily: 'SourceHanSansCN',
+        },
+      },
+    ],
+    grid: {
+      top: '3%',
+      left: '6%',
+      right: '6%',
+      bottom: '3%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c}:{d}'
+    },
+    legend: {
+      orient: '',
+      left: '10%',
+      top: '68%',
+      itemWidth: 10,
+      itemHeight: 10,
+      icon:"circle",
+      textStyle: {
+        color: "#ffffff",
+        fontSize: 14,
+        lineHeight: 22,
+        rich: {
+          text: {
+            marginLeft:32,
+            fontSize: 14,
+          },
+          number: {
+            fontSize: 14,
+            color: "#37E7FF",
+            marginLeft:32,
+            fontWeight: 'bold'
+          },
+          unit: {
+            fontSize: 14,
+          }
+        }
+      },
+      data: legendData,
+      formatter(name) {
+        if ( name == "" ) return ""; 
+        const newData = res;
+        let tarValue = 0;
+        let total = 0;
+        for (let i = 0; i < newData.length; i++) {
+          total += newData[i].value;
+          if (newData[i].name === name) {
+            tarValue = newData[i].value;
+          }
+        }
+        var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+        const arr = name + '  ' + tarValue;
+        return `{text|${name}} {number|${percert}%}`;;
+      },
+    },
+    series: [
+              /** 饼图上刻度 */
+    {
+      type: 'gauge',
+      center: ['50%', '35%'],
+      radius: '40%', // 错位调整此处
+      startAngle: 0,
+      endAngle: 360,
+      splitNumber: 52,
+      axisLine: { show: false },
+      splitLine: { 
+        // length: 39,
+        length: '2',
+        lineStyle: {
+          width: 5,
+          color: '#5CC5FF'
+        }
+      },
+      axisTick: { show: false },
+      axisLabel: { show: false }
+    },
+        /** 绘制外部圆弧-2-开始圆点 <left-top> */
+    {
+      type: 'custom',
+      coordinateSystem: 'none',
+      renderItem: (params, api) => {
+        let x0 = api.getWidth() / 2;
+        let y0 = api.getHeight() / 2 - 59;
+        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
+        return {
+          type: 'circle',
+          shape: {
+            /** 角度175° 外弧2开始角度 */
+            cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180),
+            cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180),
+            r: 4
+          },
+          style: {
+            fill: '#5BC4FF',
+            stroke: '#5BC4FF'
+          },
+          silent: true
+        }
+      },
+      data: [0]
+    },
+      {
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: (params, api) => {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2 - 59,
+              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
+              startAngle: (350 + -angle) * Math.PI / 180,
+              endAngle: (120 + -angle) * Math.PI / 180
+            },
+            style: {
+              fill: 'transparent',
+              stroke: '#5BC4FF66',
+              lineWidth: 2.6
+            },
+            silent: true
+          }
+        },
+        data: [0]
+      },
+      {
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: (params, api) => {
+          let x0 = api.getWidth() / 2;
+          let y0 = api.getHeight() / 2 - 59;
+          let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50;
+          return {
+            type: 'circle',
+            shape: {
+              /** 角度175° 外弧2开始角度 */
+              cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180),
+              cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180),
+              r: 4
+            },
+            style: {
+              fill: '#5BC4FF',
+              stroke: '#5BC4FF'
+            },
+            silent: true
+          }
+        },
+        data: [0]
+      },
+        {
+          type: 'custom',
+          coordinateSystem: 'none',
+          renderItem: (params, api) => {
+            return {
+              type: 'arc',
+              shape: {
+                cx: api.getWidth() / 2,
+                cy: api.getHeight() / 2 - 59,
+                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50,
+                startAngle: (150 + -angle) * Math.PI / 180,
+                endAngle: (-30 + -angle) * Math.PI / 180
+              },
+              style: {
+                fill: 'transparent',
+                stroke: '#5BC4FF66',
+                lineWidth: 2.6
+              },
+              silent: true
+            }
+          },
+          data: [0]
+        },
+      {
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: (params, api) => {
+          let x0 = api.getWidth() / 2;
+          let y0 = api.getHeight() / 2 - 59;
+          let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
+          return {
+            type: 'circle',
+            shape: {
+              /** 角度175° 外弧2开始角度 */
+              cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180),
+              cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180),
+              r: 4
+            },
+            style: {
+              fill: '#5BC4FF',
+              stroke: '#5BC4FF'
+            },
+            silent: true
+          }
+        },
+        data: [0]
+      },
+      {
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: (params, api) => {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2 - 59,
+              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
+              startAngle: (590 + -angle) * Math.PI / 180,
+              endAngle: (350 + -angle) * Math.PI / 180
+            },
+            style: {
+              fill: 'transparent',
+              stroke: '#5BC4FF66',
+              lineWidth: 2.6
+            },
+            silent: true
+          }
+        },
+        data: [0]
+      },
+      {
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: (params, api) => {
+          let x0 = api.getWidth() / 2;
+          let y0 = api.getHeight() / 2 - 59;
+          let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
+          return {
+            type: 'circle',
+            shape: {
+              /** 角度175° 外弧2开始角度 */
+              cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180),
+              cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180),
+              r: 4
+            },
+            style: {
+              fill: '#5BC4FF',
+              stroke: '#5BC4FF'
+            },
+            silent: true
+          }
+        },
+        data: [0]
+      },
+      {
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: (params, api) => {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2 - 59,
+              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56,
+              startAngle: (90 + -angle) * Math.PI / 180,
+              endAngle: (160 + -angle) * Math.PI / 180
+            },
+            style: {
+              fill: 'transparent',
+              stroke: '#5BC4FF66',
+              lineWidth: 2.6
+            },
+            silent: true
+          }
+        },
+        data: [0]
+      },
+      {
+        type: 'pie',
+        radius: ['45%', '39%'],
+        center: ['50%', '35%'],
+        z: 10,
+        label: {
+          show: false,
+          position: 'center',
+          formatter: (params) => {
+            return params.name + "\r\n" + params.value
+          },
+          rich: {
+            total: {
+              fontSize: 16,
+              color: '#04F5FE',
+            },
+            efficiency: {
+              fontSize: 12,
+              color: '#00FD6D',
+            },
+          },
+          color: '#FFFFFF',
+          fontSize: 12,
+          lineHeight: 16,
+        },
+        data: data1,
+        labelLine: {
+          show: false,
+        },
+         itemStyle: {
+          normal: {
+             borderWidth: 6,
+             shadowBlur: 10,
+             borderRadius: 50, // 圆角
+          }
+       }
+      },
+      {
+        type: 'pie',
+        radius: ['25%', '39%'],
+        center: ['50%', '35%'],
+        label: {
+          show: false,
+        },
+        data: data2,
+        labelLine: {
+          show: false,
+        },
+         itemStyle: {
+          normal: {
+             borderWidth: 6,
+             shadowBlur: 10,
+             borderRadius: 0, // 圆角
+          }
+       }
+      },
+    ],
+
+  };
+
+  export default options
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue
new file mode 100644
index 00000000..023484e6
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'收费站管制分析'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="auditAnalytics"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'RailWayDay',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+       
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+  
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('auditAnalytics'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:346px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 0.8;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:376px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
new file mode 100644
index 00000000..fd4fab3a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
@@ -0,0 +1,284 @@
+var res = [
+   { value: 20, name: '交通事故' },
+   { value: 1, name: '' },
+   { value: 20, name: '车辆故障' },
+   { value: 1, name: '' },
+   { value: 15, name: '路障清除' },
+   { value: 1, name: '' },
+   { value: 10, name: '交通管制' },
+   { value: 1, name: '' },
+   { value: 5, name: '道路拥堵' },
+   { value: 1, name: '' },
+   { value: 5, name: '异常天气' },
+   { value: 1, name: '' },
+  ];
+  let angle = 0; //角度，用来做简单的动画效果的
+  
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+let color = ['#4278F8F9', 'transparent','#5372C4', 'transparent', '#0046FFF9',  'transparent','#FB9434F9',  'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',];
+let colorend = ['#4278F800', 'transparent', '#5372C400',  'transparent','#0046FF00', 'transparent', '#FB943400',  'transparent','#85410100',  'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',];
+
+ //  var res = this.evaluatedCountList;
+  var data1 = [], data2 = [], data3 = [], legendData = [];
+  var curIndex = 0;
+  var index = 0;
+
+  for (var i = 0; i < res.length; i++) {
+    data1.push({
+      value: res[i].value,
+      name: res[i].name,
+    })
+    data2.push({
+      value: res[i].value,
+      name: res[i].name,
+      itemStyle: {
+        opacity: 0.4,
+      },
+    })
+
+    data3.push({
+      value: res[i].value,
+      name: res[i].name,
+      itemStyle: {
+        opacity: 0.1,
+      },
+    })
+    if ( res[i].name != "" )
+    legendData.push(res[i].name);
+  }
+
+ var  options = {
+    color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',],
+    title: [
+      {
+        text:'999',
+        top: '25%',
+        textAlign: 'center',
+        left: '50%',
+        textStyle: {
+          color: '#ffffff',
+          fontSize: 30,
+          fontFamily: 'SourceHanSansCN',
+        },
+      },
+      {
+        text: '总数',
+        top: '38%',
+        textAlign: 'center',
+        left: '50%',
+        textStyle: {
+          color: 'rgba(242, 252, 253, 0.84)',
+          fontSize: 16,
+          fontFamily: 'SourceHanSansCN',
+        },
+      },
+    ],
+    grid: {
+      top: '38%',
+      left: '6%',
+      right: '6%',
+      bottom: '3%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c}:{d}'
+    },
+    legend: {
+      orient: '',
+      left: '10%',
+      top: '68%',
+      itemWidth: 10,
+      itemHeight: 10,
+      icon:"circle",
+      textStyle: {
+        color: "#ffffff",
+        fontSize: 14,
+        lineHeight: 22,
+        rich: {
+          text: {
+            marginLeft:32,
+            fontSize: 14,
+          },
+          number: {
+            fontSize: 14,
+            color: "#37E7FF",
+            marginLeft:32,
+            fontWeight: 'bold'
+          },
+          unit: {
+            fontSize: 14,
+          }
+        }
+      },
+      data: legendData,
+      formatter(name) {
+        const newData = res;
+        let tarValue = 0;
+        let total = 0;
+        for (let i = 0; i < newData.length; i++) {
+          total += newData[i].value;
+          if (newData[i].name === name) {
+            tarValue = newData[i].value;
+          }
+        }
+        var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+        const arr = name + '  ' + tarValue;
+        return `{text|${name}} {number|${percert}%}`;;
+      },
+    },
+    series: [
+       /** 饼图上刻度 */
+    {
+      type: 'gauge',
+      center: ['50%', '35%'],
+      radius: '46%', // 错位调整此处
+      startAngle: 0,
+      endAngle: 360,
+      splitNumber: 52,
+      axisLine: { show: false },
+      splitLine: { 
+        // length: 39,
+        length: '2',
+        lineStyle: {
+          width: 5,
+          color: '#5CC5FF'
+        }
+      },
+      axisTick: { show: false },
+      axisLabel: { show: false }
+    },
+    {
+      name: '中心效果圆',
+      type: 'gauge',
+      radius: '30%',
+      center: ['50%', '35%'],
+      startAngle: 0,
+      endAngle: 360,
+      axisLine: {
+         lineStyle: {
+            color: [[1, '#0AFFE950']],
+            width: 1
+         }
+      },
+      axisTick: {
+         show: false
+      },
+      splitLine: {
+         show: false
+      },
+      axisLabel: {
+         show: false
+      },
+      detail: {
+         show: false
+      },
+      pointer: {
+         show: false
+      },
+      progress: {
+         show: true,
+         width: 80,
+         itemStyle: {
+            color: {
+               type: 'radial',
+               x: 0.5,
+               y: 0.5,
+               r: 0.5,
+               colorStops: [
+                  {
+                     offset: 0,
+                     color: 'rgb(0, 224, 205, 0)'
+                  },
+                  {
+                     offset: 0.7,
+                     color: 'rgba(0, 224, 205, 0)'
+                  },
+                  {
+                     offset: 1,
+                     color: 'rgba(10, 255, 233, 0.5)'
+                  }
+               ]
+            }
+         }
+      },
+      data: [
+         {
+            value: 100
+         }
+      ]
+   },
+    {
+      type: 'pie',
+      radius: ['50%', '40%'],
+      center: ['50%', '35%'],
+      z: 10,
+      label: {
+        show: false,
+        position: 'center',
+        formatter: (params) => {
+          return params.name + "\r\n" + params.value
+        },
+        rich: {
+          total: {
+            fontSize: 16,
+            color: '#04F5FE',
+          },
+          efficiency: {
+            fontSize: 12,
+            color: '#00FD6D',
+          },
+        },
+        color: '#FFFFFF',
+        fontSize: 12,
+        lineHeight: 16,
+      },
+      data: data1,
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+            borderRadius: "5",
+            borderWidth:0,
+            borderType:"solid",
+            borderCap:"round",
+            borderJoin:"round",
+            borderColor:"#064258",
+            borderMiterLimit:"20",
+            color: function(params) {
+                return {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 1,
+                    colorStops: [{
+                            offset: 0,
+                            color:  color[params.dataIndex] // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: colorend[params.dataIndex] // 100% 处的颜色
+                        }
+                    ],
+                    globalCoord: false // 缺省为 false
+                }
+            }
+        },
+     },
+    }
+    ],
+
+  };
+
+  export default options
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue
new file mode 100644
index 00000000..d3a60c57
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'事件源分析'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="channelAnalytics"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'RailWayDay',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+       
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+  
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('channelAnalytics'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:346px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 0.8;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:376px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
new file mode 100644
index 00000000..fd4fab3a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
@@ -0,0 +1,284 @@
+var res = [
+   { value: 20, name: '交通事故' },
+   { value: 1, name: '' },
+   { value: 20, name: '车辆故障' },
+   { value: 1, name: '' },
+   { value: 15, name: '路障清除' },
+   { value: 1, name: '' },
+   { value: 10, name: '交通管制' },
+   { value: 1, name: '' },
+   { value: 5, name: '道路拥堵' },
+   { value: 1, name: '' },
+   { value: 5, name: '异常天气' },
+   { value: 1, name: '' },
+  ];
+  let angle = 0; //角度，用来做简单的动画效果的
+  
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+let color = ['#4278F8F9', 'transparent','#5372C4', 'transparent', '#0046FFF9',  'transparent','#FB9434F9',  'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',];
+let colorend = ['#4278F800', 'transparent', '#5372C400',  'transparent','#0046FF00', 'transparent', '#FB943400',  'transparent','#85410100',  'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',];
+
+ //  var res = this.evaluatedCountList;
+  var data1 = [], data2 = [], data3 = [], legendData = [];
+  var curIndex = 0;
+  var index = 0;
+
+  for (var i = 0; i < res.length; i++) {
+    data1.push({
+      value: res[i].value,
+      name: res[i].name,
+    })
+    data2.push({
+      value: res[i].value,
+      name: res[i].name,
+      itemStyle: {
+        opacity: 0.4,
+      },
+    })
+
+    data3.push({
+      value: res[i].value,
+      name: res[i].name,
+      itemStyle: {
+        opacity: 0.1,
+      },
+    })
+    if ( res[i].name != "" )
+    legendData.push(res[i].name);
+  }
+
+ var  options = {
+    color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',],
+    title: [
+      {
+        text:'999',
+        top: '25%',
+        textAlign: 'center',
+        left: '50%',
+        textStyle: {
+          color: '#ffffff',
+          fontSize: 30,
+          fontFamily: 'SourceHanSansCN',
+        },
+      },
+      {
+        text: '总数',
+        top: '38%',
+        textAlign: 'center',
+        left: '50%',
+        textStyle: {
+          color: 'rgba(242, 252, 253, 0.84)',
+          fontSize: 16,
+          fontFamily: 'SourceHanSansCN',
+        },
+      },
+    ],
+    grid: {
+      top: '38%',
+      left: '6%',
+      right: '6%',
+      bottom: '3%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c}:{d}'
+    },
+    legend: {
+      orient: '',
+      left: '10%',
+      top: '68%',
+      itemWidth: 10,
+      itemHeight: 10,
+      icon:"circle",
+      textStyle: {
+        color: "#ffffff",
+        fontSize: 14,
+        lineHeight: 22,
+        rich: {
+          text: {
+            marginLeft:32,
+            fontSize: 14,
+          },
+          number: {
+            fontSize: 14,
+            color: "#37E7FF",
+            marginLeft:32,
+            fontWeight: 'bold'
+          },
+          unit: {
+            fontSize: 14,
+          }
+        }
+      },
+      data: legendData,
+      formatter(name) {
+        const newData = res;
+        let tarValue = 0;
+        let total = 0;
+        for (let i = 0; i < newData.length; i++) {
+          total += newData[i].value;
+          if (newData[i].name === name) {
+            tarValue = newData[i].value;
+          }
+        }
+        var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+        const arr = name + '  ' + tarValue;
+        return `{text|${name}} {number|${percert}%}`;;
+      },
+    },
+    series: [
+       /** 饼图上刻度 */
+    {
+      type: 'gauge',
+      center: ['50%', '35%'],
+      radius: '46%', // 错位调整此处
+      startAngle: 0,
+      endAngle: 360,
+      splitNumber: 52,
+      axisLine: { show: false },
+      splitLine: { 
+        // length: 39,
+        length: '2',
+        lineStyle: {
+          width: 5,
+          color: '#5CC5FF'
+        }
+      },
+      axisTick: { show: false },
+      axisLabel: { show: false }
+    },
+    {
+      name: '中心效果圆',
+      type: 'gauge',
+      radius: '30%',
+      center: ['50%', '35%'],
+      startAngle: 0,
+      endAngle: 360,
+      axisLine: {
+         lineStyle: {
+            color: [[1, '#0AFFE950']],
+            width: 1
+         }
+      },
+      axisTick: {
+         show: false
+      },
+      splitLine: {
+         show: false
+      },
+      axisLabel: {
+         show: false
+      },
+      detail: {
+         show: false
+      },
+      pointer: {
+         show: false
+      },
+      progress: {
+         show: true,
+         width: 80,
+         itemStyle: {
+            color: {
+               type: 'radial',
+               x: 0.5,
+               y: 0.5,
+               r: 0.5,
+               colorStops: [
+                  {
+                     offset: 0,
+                     color: 'rgb(0, 224, 205, 0)'
+                  },
+                  {
+                     offset: 0.7,
+                     color: 'rgba(0, 224, 205, 0)'
+                  },
+                  {
+                     offset: 1,
+                     color: 'rgba(10, 255, 233, 0.5)'
+                  }
+               ]
+            }
+         }
+      },
+      data: [
+         {
+            value: 100
+         }
+      ]
+   },
+    {
+      type: 'pie',
+      radius: ['50%', '40%'],
+      center: ['50%', '35%'],
+      z: 10,
+      label: {
+        show: false,
+        position: 'center',
+        formatter: (params) => {
+          return params.name + "\r\n" + params.value
+        },
+        rich: {
+          total: {
+            fontSize: 16,
+            color: '#04F5FE',
+          },
+          efficiency: {
+            fontSize: 12,
+            color: '#00FD6D',
+          },
+        },
+        color: '#FFFFFF',
+        fontSize: 12,
+        lineHeight: 16,
+      },
+      data: data1,
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+            borderRadius: "5",
+            borderWidth:0,
+            borderType:"solid",
+            borderCap:"round",
+            borderJoin:"round",
+            borderColor:"#064258",
+            borderMiterLimit:"20",
+            color: function(params) {
+                return {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 1,
+                    colorStops: [{
+                            offset: 0,
+                            color:  color[params.dataIndex] // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: colorend[params.dataIndex] // 100% 处的颜色
+                        }
+                    ],
+                    globalCoord: false // 缺省为 false
+                }
+            }
+        },
+     },
+    }
+    ],
+
+  };
+
+  export default options
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue
new file mode 100644
index 00000000..f83ed3af
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'事件类型分析'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="eventTypeAnalysis"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'RailWayDay',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+       
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+  
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('eventTypeAnalysis'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:346px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 0.8;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:376px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/assets/charts3.js
new file mode 100644
index 00000000..44d47f95
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/assets/charts3.js
@@ -0,0 +1,308 @@
+import * as echarts from "echarts";
+
+let xData = [
+    "1月",
+    "2月",
+    "3月",
+    "4月",
+    "5月",
+    "6月",
+    "7月",
+    "8月",
+    "9月",
+    "10月",
+    "11月",
+    "12月"
+  ];
+  let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
+  let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500];
+  let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
+  let options = {
+    tooltip: {
+      show:false,
+      trigger: "axis",
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+      },
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
+      borderColor: "rgba(3, 31, 71, .0)",
+      formatter: "健康监测<br>{b1}：{c1}人",
+    },
+    grid: {
+      left: "2%",
+      right: "4%",
+      top: "20%",
+      bottom: "10%",
+      containLabel: true,
+    },
+    xAxis: {
+      data: xData,
+      show: true,
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#1C82C5",
+        },
+      },
+      axisLabel: {
+        interval: 0,
+        align: "center",
+        rotate: "1",
+        margin: "20",
+        textStyle: {
+          fontSize: 12,
+          color: "#50A2C1",
+        },
+      },
+    },
+    yAxis: [
+      {
+        min: 0,
+        axisLine: {
+          lineStyle: {
+            color: "#1C82C5",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(28, 130, 197, .3)",
+            type: "solid",
+          },
+        },
+        axisLabel: {
+          color: "#DEEBFF",
+          textStyle: {
+            fontSize: 12,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+    ],
+    legend: {
+      // orient: 'vertical',
+      icon: "circle",
+      itemHeight: 6,
+      itemWidth: 6,
+      top: "5%",
+      right: "10%",
+      textStyle: {
+        color: "#fff",
+      },
+    
+      data:[
+        {
+          name:"审核通过",
+          itemStyle:{
+            color:'#00A3FF',
+          },
+        },
+        {
+          name:"待审核",
+          itemStyle:{
+            color:'#51BFA4',
+          },
+        },
+        {
+          name:"审核不通过",
+          itemStyle:{
+            color:'#E2BA74',
+          },
+        }
+      ],
+    },
+    series: [
+      {
+        name: "审核通过",
+        type: "bar",
+        barWidth: "10px",
+        selectedMode:false,
+        select:{
+          itemStyle:{
+            opacity: 1,
+            color: function (params) {
+              var a = params;
+             
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#1AC5FD", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#003B4E", // 100% 处的颜色
+                  },
+                ],
+                false
+              );
+            },
+          },
+        },
+        itemStyle: {
+          // lenged文本
+          opacity: 0.6,
+          color: function (params) {
+            var a = params.name;
+            console.log("==========a=============",a);
+            return new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#1AC5FD", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#003B4E", // 100% 处的颜色
+                },
+              ],
+              false
+            );
+          },
+        },
+        data: data2,
+      },
+      // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
+      {
+        name: "待审核",
+        type: "bar",
+        barWidth: "10px",
+        barGap: "120%",
+        selectedMode:false,
+        select:{
+          itemStyle:{
+            opacity: 1,
+            color: function (params) {
+              var a = params;
+             
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#00E4BB53", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#00E4BB53", // 100% 处的颜色
+                  },
+                ],
+                false
+              );
+            },
+          },
+        },
+        itemStyle: {
+          // lenged文本
+          opacity: 0.6,
+          color: function (params) {
+            var a = params.name;
+            console.log("==========a=============",a);
+            return new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#00E4BB", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#00E4BB00", // 100% 处的颜色
+                },
+              ],
+              false
+            );
+          },
+        },
+        data: data1,
+      },
+  
+{
+  name: "审核不通过",
+  type: "bar",
+  barWidth: "10px",
+  selectedMode:false,
+  select:{
+    itemStyle:{
+      opacity: 1,
+      color: function (params) {
+        var a = params;
+       
+        return new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: "#1AC5FD", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#003B4E", // 100% 处的颜色
+            },
+          ],
+          false
+        );
+      },
+    },
+  },
+  itemStyle: {
+    // lenged文本
+    opacity: 0.6,
+    color: function (params) {
+      var a = params.name;
+      console.log("==========a=============",a);
+      return new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+          {
+            offset: 0,
+            color: "#FCBE39", // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: "#FCBE3900", // 100% 处的颜色
+          },
+        ],
+        false
+      );
+    },
+  },
+  data: data2,
+},
+    ],
+  };
+
+
+  export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/index.vue
new file mode 100644
index 00000000..8ddc301c
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/index.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'月审核通过趋势分析'"></WgtTitle>
+      <div class="board">
+        <div class="searchPanel_1" >
+          <el-date-picker
+          size="mini"
+          v-if="year != 'quarter'"
+          class="selectRoad"
+            v-model="dateTime"
+            style="width:140px;"
+          
+            placeholder="请选择"
+        />
+        <el-quarter-picker  size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" />
+
+          <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
+          <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
+        </div>
+        <div class="charts" id="nucleusThrough"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts3";
+  export default {
+    name: 'nucleusThrough',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+       
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+  
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('nucleusThrough'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      position: relative;
+      height:300px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 1;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+
+      .searchPanel_1{
+        position:absolute;
+        display: flex;
+        align-items: center;
+        height: 40px;
+        width:100%;
+        font-size: 14px;
+        margin-bottom: 10px;
+        left:20px;
+        top:2px;
+        z-index: 10000;
+    div{
+      white-space: nowrap;
+      margin-right: 4px;
+    }
+    .inputZh{
+      width: 47px;
+      ::v-deep{
+        .el-input__inner{
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+    .inputJl{
+      margin-left: 5px;
+      margin-right: 10px;
+    }
+    .selectRoad{
+      width:89px;
+      border:1px solid #00B3CC;
+      ::v-deep{
+        .el-input__inner{
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+    .btnSearch{
+      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+      margin-left: 10px;
+      border-color: transparent;
+    }
+    .btnReset{
+      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);;
+      border-color: transparent;
+      color: white;
+    }
+   }
+     
+    }
+  }
+      .charts {
+        height:300px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
new file mode 100644
index 00000000..a98339fc
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
@@ -0,0 +1,180 @@
+
+/* 数据 */
+let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别
+let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903  ]; // 人数
+var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+/* 数据整合 */
+let dataList = [];
+nameList.map((item, index) => {
+   if (index === 4) {
+      dataList.push({
+         name: item,
+         value: valueList[index],
+         itemStyle: {
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [{
+                  offset: 0, color: '#FFB904' // 0% 处的颜色
+               }, {
+                  offset: 1, color: '#FF6969' // 100% 处的颜色
+               }],
+               global: false // 缺省为 false
+            },
+            borderRadius: 6
+         },
+         label: { show: false }
+      })
+   } else {
+      dataList.push({
+         name: item,
+         value: valueList[index],
+         itemStyle:{
+            borderRadius: 6
+         }
+      })
+   }
+})
+
+var options = {
+   legend: {
+      // orient: 'vertical',
+      icon: "circle",
+      itemHeight: 8,
+      itemWidth: 8,
+      top: "5%",
+      x: "right",
+      textStyle: {
+        color: "#fff",
+      },
+    },
+   grid: {
+      top: '15%',//上边距
+      right: '0',//右边距
+      left: '0',//左边距
+      bottom: "10%",//下边距
+      containLabel: true,
+   },
+   xAxis: {
+      type: 'category',
+      data: nameList,
+      axisTick: {
+         show: false //隐藏X轴刻度
+      },
+      axisLine: {
+         lineStyle: {
+            color: "rgba(49, 217, 255, 0.8)"
+         }
+      },
+      axisLabel: {
+         show: true,
+         color: '#B6E6FF',
+         fontSize:8,
+         fontFamily: 'Source Han Sans CN-Regular',
+      },
+   },
+   yAxis: [{
+      type: 'value',
+      name: "",
+      max: 1200,
+      min:0,
+      splitNumber:5,
+      nameTextStyle: {
+         color: '#B6E6FF',
+         fontSize: 13,
+         fontFamily: 'Source Han Sans CN-Regular',
+         align: "left",
+         verticalAlign: "center",
+      },
+      axisLabel: {
+         fontSize: 13,
+         color: '#B6E6FF',
+         fontFamily: 'HarmonyOS Sans-Regular',
+         // formatter:function(value,index){
+         //    return yList[index]
+         // }
+      },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false
+      },
+      splitLine: {
+         lineStyle: {
+            color: 'rgba(49, 217, 255, 0.5)',
+         }
+      },
+   }],
+   series: [
+      {
+         name: '情报板发布',
+         type: 'line',
+         symbol: 'circle',
+         symbolSize: 0,
+         smooth: true,
+         areaStyle: {
+            width: 4,
+            opacity: 0.25,
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+                  { offset: 0.389, color: "#32BB8A99" },
+                  { offset: 1, color: "#32BB8A00" },
+               ],
+               global: false,
+            },
+         },
+         // yAxisIndex: 1, // 与第二个 y 轴关联
+         itemStyle: {
+           color: '#32BB8A90',
+         },
+         lineStyle: {
+           width:2,
+         },
+         
+         data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
+       },
+       {
+         name: '服务网站',
+         type: 'line',
+         symbol: 'circle',
+         symbolSize: 0,
+
+         // yAxisIndex: 1, // 与第二个 y 轴关联
+         itemStyle: {
+           color: '#E2BA7490',
+         },
+         lineStyle: {
+           width: 2,
+         },
+         smooth: true,
+         areaStyle: {
+            width: 4,
+            opacity: 0.25,
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+                  { offset: 0.389, color: "#E2BA7490" },
+                  { offset: 1, color: "#E2BA7400" },
+               ],
+               global: false,
+            },
+         },
+         data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
+       },
+   ]
+}
+
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/index.vue
new file mode 100644
index 00000000..606d6f7e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'今日事件趋势'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="postTrendsDay"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'RailWayDay',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+       
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+  
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('postTrendsDay'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:346px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 1;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:346px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js
new file mode 100644
index 00000000..c4411f48
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js
@@ -0,0 +1,180 @@
+
+/* 数据 */
+let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别
+let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903  ]; // 人数
+var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+/* 数据整合 */
+let dataList = [];
+nameList.map((item, index) => {
+   if (index === 4) {
+      dataList.push({
+         name: item,
+         value: valueList[index],
+         itemStyle: {
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [{
+                  offset: 0, color: '#FFB904' // 0% 处的颜色
+               }, {
+                  offset: 1, color: '#FF6969' // 100% 处的颜色
+               }],
+               global: false // 缺省为 false
+            },
+            borderRadius: 6
+         },
+         label: { show: false }
+      })
+   } else {
+      dataList.push({
+         name: item,
+         value: valueList[index],
+         itemStyle:{
+            borderRadius: 6
+         }
+      })
+   }
+})
+
+var options = {
+   legend: {
+      // orient: 'vertical',
+      icon: "circle",
+      itemHeight: 8,
+      itemWidth: 8,
+      top: "5%",
+      x: "right",
+      textStyle: {
+        color: "#fff",
+      },
+    },
+   grid: {
+      top: '20%',//上边距
+      right: '0',//右边距
+      left: '0',//左边距
+      bottom: "10%",//下边距
+      containLabel: true,
+   },
+   xAxis: {
+      type: 'category',
+      data: nameList,
+      axisTick: {
+         show: false //隐藏X轴刻度
+      },
+      axisLine: {
+         lineStyle: {
+            color: "rgba(49, 217, 255, 0.8)"
+         }
+      },
+      axisLabel: {
+         show: true,
+         color: '#B6E6FF',
+         fontSize:8,
+         fontFamily: 'Source Han Sans CN-Regular',
+      },
+   },
+   yAxis: [{
+      type: 'value',
+      name: "",
+      max: 1000,
+      min:0,
+      splitNumber:5,
+      nameTextStyle: {
+         color: '#B6E6FF',
+         fontSize: 13,
+         fontFamily: 'Source Han Sans CN-Regular',
+         align: "left",
+         verticalAlign: "center",
+      },
+      axisLabel: {
+         fontSize: 13,
+         color: '#B6E6FF',
+         fontFamily: 'HarmonyOS Sans-Regular',
+         // formatter:function(value,index){
+         //    return yList[index]
+         // }
+      },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false
+      },
+      splitLine: {
+         lineStyle: {
+            color: 'rgba(49, 217, 255, 0.5)',
+         }
+      },
+   }],
+   series: [
+      {
+         name: '感知事件',
+         type: 'line',
+         symbol: 'circle',
+         symbolSize: 0,
+         smooth: true,
+         areaStyle: {
+            width: 4,
+            opacity: 0.25,
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+                  { offset: 0.389, color: "#32BB8A99" },
+                  { offset: 1, color: "#32BB8A00" },
+               ],
+               global: false,
+            },
+         },
+         // yAxisIndex: 1, // 与第二个 y 轴关联
+         itemStyle: {
+           color: '#32BB8A',
+         },
+         lineStyle: {
+           width:2,
+         },
+         
+         data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
+       },
+       {
+         name: '交通事件',
+         type: 'line',
+         symbol: 'circle',
+         symbolSize: 0,
+
+         // yAxisIndex: 1, // 与第二个 y 轴关联
+         itemStyle: {
+           color: '#E2BA74',
+         },
+         lineStyle: {
+           width: 2,
+         },
+         smooth: true,
+         areaStyle: {
+            width: 4,
+            opacity: 0.25,
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [
+                  { offset: 0.389, color: "##E2BA7490" },
+                  { offset: 1, color: "##E2BA7400" },
+               ],
+               global: false,
+            },
+         },
+         data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
+       },
+   ]
+}
+
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
new file mode 100644
index 00000000..be895be9
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue
@@ -0,0 +1,134 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'今日发布趋势分析'"></WgtTitle>
+      <div class="board">
+        <div class="searchPanel_1" >
+          <el-date-picker
+          size="mini"
+          v-if="year != 'quarter'"
+          class="selectRoad"
+            v-model="dateTime"
+            style="width:140px;"
+          
+            placeholder="请选择"
+        />
+        <el-quarter-picker  size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" />
+
+          <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
+          <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
+        </div>
+        <div class="charts" id="postTrendsMonth"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from "../../../../../perception/widgets/title";
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'postTrendsMonth',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+       
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+  
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('postTrendsMonth'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      position: relative;
+      height:300px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+        opacity: 0.8;
+        border: 1px solid;
+        border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+
+      .searchPanel_1{
+        position:absolute;
+        display: flex;
+        align-items: center;
+        height: 40px;
+        width:100%;
+        font-size: 14px;
+        margin-bottom: 10px;
+        left:20px;
+        top:2px;
+        z-index: 100;
+    div{
+      white-space: nowrap;
+      margin-right: 4px;
+    }
+    .inputZh{
+      width: 47px;
+      ::v-deep{
+        .el-input__inner{
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+    .inputJl{
+      margin-left: 5px;
+      margin-right: 10px;
+    }
+    .selectRoad{
+      width:89px;
+      border:1px solid #00B3CC;
+      ::v-deep{
+        .el-input__inner{
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+    .btnSearch{
+      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+      margin-left: 10px;
+      border-color: transparent;
+    }
+    .btnReset{
+      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);;
+      border-color: transparent;
+      color: white;
+    }
+   }
+
+     
+    }
+  }
+      .charts {
+        height:300px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通事故.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通事故.png
new file mode 100644
index 00000000..ca288136
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通事故.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通拥堵.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通拥堵.png
new file mode 100644
index 00000000..9ee3ddeb
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通拥堵.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通管制.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通管制.png
new file mode 100644
index 00000000..baf87026
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通管制.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/其他事件.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/其他事件.png
new file mode 100644
index 00000000..e3f3da33
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/其他事件.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/异常天气.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/异常天气.png
new file mode 100644
index 00000000..a4f41870
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/异常天气.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/施工建设.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/施工建设.png
new file mode 100644
index 00000000..d1042784
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/施工建设.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/服务区异常.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/服务区异常.png
new file mode 100644
index 00000000..12d1c69f
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/服务区异常.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/路障清除.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/路障清除.png
new file mode 100644
index 00000000..e7be2ee1
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/路障清除.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/车辆故障.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/车辆故障.png
new file mode 100644
index 00000000..f002ed8c
Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/车辆故障.png differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
new file mode 100644
index 00000000..b778310b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue
@@ -0,0 +1,256 @@
+<template>
+    <div class='TrafficFlow'>
+      <section class="foot">
+        <div class="item" v-for="(item,index) in topDatas" >
+            <div class="item-title" >
+               <span> {{ item.text }} <span class="num">{{ item.textNum }}</span>{{ item.textEnd }}</span>
+            </div>
+            <div class="item-body" >
+                <div class="icon-left" >
+                    <img :src="item.icon"  />
+                </div>
+                <div class="text-right" >
+                    <div class="topText" >
+                        已处理 <span  class="num">{{ item.reviewed }}</span> 起
+                    </div>
+                    <div  class="bottomText"  >
+                        处理中 <span  class="num" >{{ item.noReviewed }}</span> 起
+                    </div>    
+                    <div  class="bottomText"  >
+                        待处理 <span  class="num" >{{ item.noReviewed }}</span> 起
+                    </div>                  
+                </div>
+            </div>
+        </div>
+      </section>
+    </div>
+  </template>
+  
+  <script> 
+ 
+  export default {
+    name: 'publicService',
+    components: {
+     
+    },
+    data(){
+        return {
+            activeName:"first",
+            topDatas:[ {
+                text:"其他事件",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/其他事件.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"路障清除",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/路障清除.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"车辆故障",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/车辆故障.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"服务区异常",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/服务区异常.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"交通管制",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/交通管制.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"交通拥堵",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/交通拥堵.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"施工建设",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/施工建设.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"异常天气",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/异常天气.png"),
+                reviewed:4,
+                noReviewed:5
+            },{
+                text:"交通事故",
+                textEnd:"起",
+                textNum:9,
+                icon:require("./assets/交通事故.png"),
+                reviewed:4,
+                noReviewed:5
+            }
+              
+            ]
+        }
+    },
+    methods:{
+      changeTabs(){
+         
+      }
+    }
+    
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+   ::v-deep .el-tabs__item{
+    display: inline-flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    min-width:128px;
+    position: relative;
+    left:10px;
+   }
+
+   ::v-deep .el-tabs__active-bar {
+    min-width:128px;
+   }
+
+   ::v-deep .el-tabs__nav-wrap::after {
+    background-color: #133242;
+    opacity: 0.1;
+   }
+
+   .footTabs {
+     display: inline;
+     width:99%;
+
+   }
+
+  .TrafficFlow {
+    width: 100%;
+    height: 182px;
+    display: inline-flex;
+    position: relative;
+    z-index: 6;
+    color: white;
+    background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425804 93%);
+    border-radius: 0px 0px 0px 0px;
+   
+    .foot {
+        display: inline-flex;
+        flex-direction: row;
+        width:100%;
+        height:100%;
+
+        .item {
+            position: relative;
+            display: inline-flex;
+            width: calc(100% / 9);
+            height:100%;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .item-title {
+                position: relative;
+                display: inline-flex;
+                width: 162px;
+                height:35px;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center; 
+                background: linear-gradient(180deg, rgba(3,60,82,0) 0%, #033C52 100%);
+                border-radius: 4px 4px 4px 4px;
+                font-size: 16px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                color: #FFFFFF;
+
+                span.num {
+                    font-size: 22px;
+                    font-family: PangMenZhengDao, PangMenZhengDao;
+                    font-weight: 400;
+                    color: #E2B066;
+                }
+            }
+
+            .item-body {
+                position: relative;
+                display: inline-flex;
+                width: 162px;
+                height:100%;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center; 
+                font-size: 14px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                color: #FFFFFF;
+                margin-top:0px;
+
+                .text-right {
+                    display: inline-flex;
+                    flex-direction: column;
+                    align-items: space-between;
+                    justify-content: space-between;
+
+                    >div {
+                        margin:5px;
+                    }
+                }
+
+                img {
+                    width:47px;
+                    height:47px;
+                    margin:0 10px;
+                    margin-right:20px;
+                }
+
+                
+                span.num {
+                    font-size: 14px;
+                    font-family: PangMenZhengDao, PangMenZhengDao;
+                    font-weight: 400;
+                    color: #E2B066;
+                }
+
+            }
+
+        }
+
+        .item::after {
+            content: "";
+            position: absolute;
+            display: inline-flex;
+            top:20px;
+            right:0px;
+            width: 1px;
+            height: 116px;
+            background: linear-gradient(90deg, rgba(8, 135, 182, 0.2), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0.2));
+            opacity: 1;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center; 
+        }
+
+    }
+    
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue
new file mode 100644
index 00000000..30cd160f
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue
@@ -0,0 +1,178 @@
+<template>
+    <div class='TrafficFlow'>
+      <section class="foot">
+        <el-tabs class="footTabs" v-model="activeName"  @tab-click="changeTabs">
+            <el-tab-pane label="公众服务统计分析" name="first">
+              <div class="header-shot" >
+                 <TopComponent  />
+              </div>
+              <div class="content" >
+                <ChannelAnalytics  class="content-l"  />
+                <EventTypeAnalysis class="content-l"  />
+                <PostTrendsDay class="content-r"  />
+                <AuditAnalytics class="content-r"  />
+              </div>
+              <div class="content" >
+                <PostTrendsMonth   class="content-mi" />
+                <NucleusThrough   class="content-mi" />
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="公众服务统计查询" name="second">
+              
+            </el-tab-pane>
+        </el-tabs>
+      </section>
+    </div>
+  </template>
+  
+  <script> 
+  import TopComponent from './components/topComponent';
+  import ChannelAnalytics from './components/channelAnalytics';
+  import EventTypeAnalysis from './components/eventTypeAnalysis';
+  import AuditAnalytics from './components/auditAnalytics';
+  import PostTrendsDay from './components/postTrendsDay';
+  import PostTrendsMonth from './components/postTrendsMonth';
+  import NucleusThrough from './components/nucleusThrough';
+
+  export default {
+    name: 'publicService',
+    components: {
+      TopComponent,
+      ChannelAnalytics,
+      EventTypeAnalysis,
+      AuditAnalytics,
+      PostTrendsDay,
+      PostTrendsMonth,
+      NucleusThrough
+    },
+    data(){
+        return {
+            activeName:"first"
+        }
+    },
+    methods:{
+      changeTabs(){
+         
+      }
+    }
+    
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+   ::v-deep .el-tabs__item{
+    display: inline-flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    min-width:128px;
+    position: relative;
+    left:10px;
+   }
+
+   ::v-deep .el-tabs__active-bar {
+    min-width:128px;
+   }
+
+   ::v-deep .el-tabs__nav-wrap::after {
+    background-color: #133242;
+    opacity: 0.1;
+   }
+
+   .footTabs {
+     display: inline;
+     width:100%;
+
+   }
+
+  .TrafficFlow {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 6;
+    color: white;
+  
+    .header-shot{
+      width: 98%;
+      margin: auto;
+      margin-top: 15px;
+      height:160px;
+
+    }
+
+    .content {
+      width: 100%;
+      margin: auto;
+      display: flex;
+      flex: 1;
+      pointer-events: none;
+      margin-top: 19px;
+
+      >div {
+        pointer-events: auto;
+      }
+  
+      .content-l {
+        width: calc(20%);
+     
+        margin-right:20px;
+
+      }
+
+      .content-mi {
+        width: calc(50%);
+     
+        margin-right:20px;
+      }
+  
+  
+      .content-m {
+        display: inline-flex;
+        flex-direction: column;
+        width: calc(100% / 4 );
+        margin-right:20px;
+
+        .content-m-t {
+            width:100%;
+            height:240px;
+            margin-bottom: 20px;
+        }
+      }
+      .content-r {
+        width:29%;
+        margin-right:20px;
+      }
+    }
+    .foot{
+      width: 98%;
+      margin: auto;
+      display: flex;
+      justify-content: space-between;
+      flex: 1;
+      pointer-events: none;
+      margin-top: 8px;
+      >div {
+        pointer-events: auto;
+      }
+
+      .foot-w {
+        width:100%;
+
+      }
+  
+      .foot-l {
+        width: 726px;
+      }
+      .foot-m {
+        width: 613px;
+      }
+      .foot-r {
+        width: 493px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js
index cf0fac1d..d5fde08a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js
@@ -20,7 +20,7 @@ let options = {
          fontSize: 14,
          color: "#000",
       },
-      formatter: "{a}<br/>{b} :\n\n{c} 个",
+      formatter: "{a}<br/>{b} :\n\n{c} ",
    },
    legend: {
       top: 10,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js
index 4b35b669..48948996 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js
@@ -50,7 +50,7 @@ let options = {
     series: [{
         type: 'radar',
         data: [data],
-        name: '安全作业',
+        name: '设备在线率',
         label: {
             show: true,
             formatter: function (params) {
@@ -80,7 +80,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100],
         ],
@@ -100,7 +100,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80]
         ],
@@ -120,7 +120,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
         ],
@@ -140,7 +140,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
         ],
@@ -159,7 +159,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
         ],
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js
index dfd3d256..9204ae69 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js
@@ -50,7 +50,7 @@ let options = {
     series: [{
         type: 'radar',
         data: [data],
-        name: '安全作业',
+        name: '设备在线率',
         label: {
             show: true,
             formatter: function (params) {
@@ -80,7 +80,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100],
         ],
@@ -100,7 +100,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80]
         ],
@@ -120,7 +120,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60],
         ],
@@ -140,7 +140,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40],
         ],
@@ -159,7 +159,7 @@ let options = {
     },
     {
         type: 'radar',
-        name: '安全作业',
+        name: '设备在线率',
         data: [
             [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
         ],