From 437572e28d08194a55b6fab0213b01492b1fff3d Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Tue, 20 Feb 2024 16:43:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A6=85=E9=81=93bug=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../channelAnalytics/assets/charts.js         |  30 +-
 .../eventTypeAnalysis/assets/charts.js        |   7 +-
 .../classification/assets/charts.js           | 396 +++++++++---------
 .../components/congestion/assets/charts.js    |  12 +-
 .../components/heightway/index.vue            | 356 +++++++++-------
 .../components/situation/assets/charts.js     | 234 ++++++-----
 .../components/situation/index.vue            |  77 ++--
 .../pages/perception/trafficFlow/index.vue    |  40 +-
 8 files changed, 631 insertions(+), 521 deletions(-)

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
index e4c896ab..a18985fa 100644
--- 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
@@ -21,17 +21,17 @@ let colorend = [
 var legendData = [];
 
 var options = {
-  color: [
-    "#2867FF",
-    "#58C3FF",
-    "#FF6A3B",
-    "#FDA474",
-    "#FEE58F",
-    "#8DFEBF",
-    "#66F4DC",
-    "#33E27D",
-    "#5D8CFE",
-  ],
+  // color: [
+  //   "#2867FF",
+  //   "#58C3FF",
+  //   "#FF6A3B",
+  //   "#FDA474",
+  //   "#FEE58F",
+  //   "#8DFEBF",
+  //   "#66F4DC",
+  //   "#33E27D",
+  //   "#5D8CFE",
+  // ],
   title: [
     {
       text: "999",
@@ -65,7 +65,7 @@ var options = {
   },
   tooltip: {
     show: true,
-    trigger: "item",
+    // trigger: "item",
     // formatter: "{b} : {c}",
   },
   legend: {
@@ -198,7 +198,7 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["50%", "40%"],
+      radius: ["40%", "50%"],
       center: ["50%", "35%"],
       z: 10,
       label: {
@@ -211,7 +211,7 @@ var options = {
       itemStyle: {
         normal: {
           borderRadius: "5",
-          borderWidth: 0,
+          borderWidth: 2,
           borderType: "solid",
           borderCap: "round",
           borderJoin: "round",
@@ -227,7 +227,7 @@ var options = {
               colorStops: [
                 {
                   offset: 0,
-                  color: "transparent", // 0% 处的颜色
+                  color: colors[params.dataIndex], // 0% 处的颜色
                 },
                 {
                   offset: 1,
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
index 4d8979bd..cb3b31d3 100644
--- 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
@@ -212,7 +212,7 @@ var options = {
     },
     {
       type: "pie",
-      radius: ["50%", "40%"],
+      radius: ["40%", "50%"],
       center: ["50%", "35%"],
       z: 10,
       label: {
@@ -225,7 +225,7 @@ var options = {
       itemStyle: {
         normal: {
           borderRadius: "5",
-          borderWidth: 0,
+          borderWidth: 2,
           borderType: "solid",
           borderCap: "round",
           borderJoin: "round",
@@ -241,7 +241,8 @@ var options = {
               colorStops: [
                 {
                   offset: 0,
-                  color: "transparent", // 0% 处的颜色
+                  // color: "transparent", // 0% 处的颜色
+                  color: colors[params.dataIndex],
                 },
                 {
                   offset: 1,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
index 02ba49b5..a5b3aa1a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
@@ -1,203 +1,225 @@
-
 import * as echarts from "echarts";
-let color = ['#4278F8F9', 'transparent','#5372C4F9', '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',];
+let color = [
+  "#4278F8F9",
+  "#5372C4F9",
+  "#0046FFF9",
+  "#FB9434F9",
+  "#854101F9",
+  "#05E599F9",
+  "#219F73F9",
+  "#7CEDD5F9",
+];
+let colorend = [
+  "#4278F800",
+  "#5372C400",
+  "#0046FF00",
+  "#FB943400",
+  "#85410100",
+  "#05E59900",
+  "#219F7300",
+  "#7CEDD500",
+];
 const datas = [
-    {
-       name: '客1',
-       // num:''
-       value: 13456,
-    },
-    {
-       name: '客2',
-       value: 13456,
-    },
-    {
-       name: '客3',
-       value: 13456,
-    },
-    {
-        name: '专1',
-        // num:''
-        value: 13456,
-     },
-     {
-        name: '专2',
-        value: 13456,
-     },
-     {
-        name: '专3',
-        value: 13456,
-     },
-     {
-        name: '货1',
-        value: 13456,
-     },
-     {
-        name: '货2',
-        value: 13456,
-     },
- ];
+  {
+    name: "客1",
+    // num:''
+    value: 13456,
+  },
+  {
+    name: "客2",
+    value: 13456,
+  },
+  {
+    name: "客3",
+    value: 13456,
+  },
+  {
+    name: "专1",
+    // num:''
+    value: 13456,
+  },
+  {
+    name: "专2",
+    value: 13456,
+  },
+  {
+    name: "专3",
+    value: 13456,
+  },
+  {
+    name: "货1",
+    value: 13456,
+  },
+  {
+    name: "货2",
+    value: 13456,
+  },
+];
 
- let sum = 0;
+let sum = 0;
 for (var i of datas) {
-   sum += i.value;
+  sum += i.value;
 }
 
 var options = {
-    tooltip: {
-        show:true,
-        trigger: 'item',
-        formatter: '{a} <br/>{b}: {c} ({d}%)',
-        backgroundColor:"#ffffff",
-        textStyle:{
-            color:"#666"
-        }
+  tooltip: {
+    show: true,
+    // trigger: "item",
+    // formatter: "{a} <br/>{b}: {c} ({d}%)",
+    // backgroundColor: "#ffffff",
+    // textStyle: {
+    //   color: "#666",
+    // },
+  },
+  legend: {
+    orient: "vertical",
+    right: 40,
+    top: 50,
+    formatter: (name) => {
+      let res = datas.filter((v) => v.name === name);
+      let str = "";
+      str =
+        "{name1|" +
+        res[0].name +
+        "}{name2|" +
+        res[0].value +
+        "}辆" +
+        "{name2|" +
+        (res[0].value / sum) * 100 +
+        "}%";
+      return str;
     },
-    legend: {
-        orient: 'vertical',
-        right: 40,
-        top:50,
-        formatter:(name)=>{
-            let res = datas.filter(v => v.name === name);
-            let str = ''
-            str = '{name1|' + res[0].name + '}{name2|' + res[0].value + '}辆'+ '{name2|' + res[0].value/sum * 100 + '}%'
-            return str
+    icon: "circle",
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 20,
+    borderRadius: 50,
+    itemStyle: {},
+    textStyle: {
+      rich: {
+        background: {
+          background: "#DEDEDE",
+          fontSize: 14,
+          align: "left",
+          padding: [0, 10, 20, 0],
         },
-        icon: 'circle',
-        itemWidth:10,
-        itemHeight:10,
-        itemGap: 20,
-        borderRadius:50,
-        itemStyle:{
-  
+        name1: {
+          color: "#fff",
+          fontSize: 14,
+          Width: 12,
+          align: "left",
+          padding: [0, 0, 0, 10],
         },
-        textStyle:{
-            rich:{
-                background: {
-                   background: '#DEDEDE',
-                   fontSize: 14,
-                   align: 'left',
-                   padding: [0, 10, 20, 0],
-                },
-                name1: {
-                   color: '#fff',
-                   fontSize: 14,
-                   Width: 12,
-                   align: 'left',
-                   padding: [0, 0, 0, 10],
-                },
-                name2: {
-                   color: '#37E7FF',
-                   fontSize: 14,
-                   align: 'left',
-                   padding: [0, 0, 0, 10],
-                },
-                value: {
-                   color: '#ccc',
-                   fontSize: 14,
-                   align: 'left',
-                },
-                title: {
-                   //  color: '#fff',
-                   color: "#C60020",
-                   fontWeight:'bold',
-                   fontSize: 40,
-                }
-            },
-            color:"#fff",
+        name2: {
+          color: "#37E7FF",
+          fontSize: 14,
+          align: "left",
+          padding: [0, 0, 0, 10],
+        },
+        value: {
+          color: "#ccc",
+          fontSize: 14,
+          align: "left",
+        },
+        title: {
+          //  color: '#fff',
+          color: "#C60020",
+          fontWeight: "bold",
+          fontSize: 40,
         },
-        data: [
-            {
-                name:'客1',
-                backgroundColor:'#5CC5FF',
-        }, '客2', '客3', '货1', 
-                '货2', '专1', '专2', '专3']
+      },
+      color: "#fff",
     },
-    series: [
-        {
-            name: '',
-            type: 'pie',
-            selectedMode: 'single',
-            radius: [0, '50%'],
-            center:['25%','50%'],
-            label: {
-                normal: {
-                    position: 'inner',
-                    show: true,
-                    color:'#fff',
-                    fontSize:14,
-                    formatter: '{b}\n{c}辆',
-                }
-            },
-            data: [
-                {value: 2290, name: '客车\n'},
-                {value: 1020, name: '货车\n'},
-                {value: 3000, name: '专项车\n'},
-            ],
-            color:['#708FFF','#FB9434','#219F73']
+    data: [
+      {
+        name: "客1",
+        backgroundColor: "#5CC5FF",
+      },
+      "客2",
+      "客3",
+      "货1",
+      "货2",
+      "专1",
+      "专2",
+      "专3",
+    ],
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      selectedMode: "single",
+      radius: [0, "50%"],
+      center: ["25%", "50%"],
+      label: {
+        normal: {
+          position: "inner",
+          show: true,
+          color: "#fff",
+          fontSize: 14,
+          formatter: "{b}\n{c}辆",
         },
-        {
-            name: '',
-            type: 'pie',
-            radius: ['60%', '70%'],
-            center:['25%','50%'],
-            label: {
-                position: 'inner',
-                show: false
-            },
-            data: [
-                {value: 13456, name: '客1'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '客2'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '客3'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '货1'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '货2'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '专1'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '专2'},
-                {value: 2000, name: ''},
-                {value: 13456, name: '专3'},
-                {value: 2000, name: ''},
-            ],
-            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
-                        }
-                    }
+      },
+      data: [
+        { value: 2290, name: "客车\n" },
+        { value: 1020, name: "货车\n" },
+        { value: 3000, name: "专项车\n" },
+      ],
+      color: ["#708FFF", "#FB9434", "#219F73"],
+    },
+    {
+      name: "",
+      type: "pie",
+      radius: ["60%", "70%"],
+      center: ["25%", "50%"],
+      label: {
+        position: "inner",
+        show: false,
+      },
+      data: [
+        { value: 13456, name: "客1" },
+        { value: 13456, name: "客2" },
+        { value: 13456, name: "客3" },
+        { value: 13456, name: "货1" },
+        { value: 13456, name: "货2" },
+        { value: 13456, name: "专1" },
+        { value: 13456, name: "专2" },
+        { value: 13456, name: "专3" },
+      ],
+      itemStyle: {
+        normal: {
+          borderRadius: "5",
+          borderWidth: 2,
+          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% 处的颜色
                 },
-            },
-            color:['#009688','#63BA79','#FFB800','#F7ED46','#666666']
-        }
-    ]
-}
-
+                {
+                  offset: 1,
+                  color: colorend[params.dataIndex], // 100% 处的颜色
+                },
+              ],
+              globalCoord: false, // 缺省为 false
+            };
+          },
+        },
+      },
+      //   color: ["#009688", "#63BA79", "#FFB800", "#F7ED46", "#666666"],
+    },
+  ],
+};
 
 export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
index d7c486c9..46e65aa3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
@@ -75,8 +75,8 @@ var options = {
     },
     axisLabel: {
       show: true,
-      color: "#B6E6FF",
-      fontSize: 13,
+      color: "#fff",
+      fontSize: 12,
       fontFamily: "Source Han Sans CN-Regular",
     },
   },
@@ -88,15 +88,15 @@ var options = {
       min: 0,
       splitNumber: 4,
       nameTextStyle: {
-        color: "#B6E6FF",
-        fontSize: 13,
+        color: "#fff",
+        fontSize: 12,
         fontFamily: "Source Han Sans CN-Regular",
         align: "left",
         verticalAlign: "center",
       },
       axisLabel: {
-        fontSize: 13,
-        color: "#B6E6FF",
+        fontSize: 12,
+        color: "#fff",
         fontFamily: "HarmonyOS Sans-Regular",
         formatter: function (value, index) {
           return yList[index];
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
index b9fa03dc..387c2a8c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
@@ -1,188 +1,256 @@
 <template>
-  <div class='heightway'>
+  <div class="heightway">
     <WgtTitle :title="'交通路段状态'"></WgtTitle>
     <div class="board">
-        <div class="searchPanel">
-          <div >起始桩号：k</div>
-          <el-input class="inputZh" v-model="start"></el-input>
-          <el-input class="inputZh inputJl" v-model="start1"></el-input>
-          <div >结束桩号：k</div>
-          <el-input class="inputZh" v-model="start2"></el-input>
-          <el-input class="inputZh inputJl" v-model="start3"></el-input>
-          <div >路段方向：</div>
-          <el-select v-model="area" class="selectRoad" placeholder="请选择">
-            <el-option
-              v-for="item in areaOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <el-button type="primary" class="btnSearch" @click="onSubmit">搜索</el-button>
-          <el-button class="btnReset">重置</el-button>
+      <div class="searchPanel">
+        <div>起始桩号：k</div>
+        <el-input class="inputZh" v-model="start" placeholder="55"></el-input>
+        <span>+</span>
+        <el-input
+          class="inputZh inputJl"
+          v-model="start1"
+          placeholder="378"
+        ></el-input>
+        <div>结束桩号：k</div>
+        <el-input class="inputZh" v-model="start2" placeholder="208"></el-input>
+        <span>+</span>
+        <el-input
+          class="inputZh inputJl"
+          v-model="start3"
+          placeholder="153"
+        ></el-input>
+        <div>路段方向：</div>
+        <el-select v-model="area" class="selectRoad" placeholder="请选择">
+          <el-option
+            v-for="item in areaOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button type="primary" class="btnSearch" @click="onSubmit"
+          >搜索</el-button
+        >
+        <el-button class="btnReset">重置</el-button>
+      </div>
+      <div class="tblResult">
+        <div class="tblTd">
+          <div>路段名称</div>
+          <div>方向</div>
+          <div>状态</div>
+          <div>平均车速</div>
+          <div>总车流量</div>
         </div>
-        <div class="tblResult">
-          <div class="tblTd">
-            <div>路段名称</div>
-            <div>方向</div>
-            <div>状态</div>
-            <div>平均车速</div>
-            <div>总车流量</div>
-          </div>
-          <div :class="'tblTd ' + (index%2===0?'tblTwo':'')" v-for="(item,index) of list">
-            <div>{{ item.name }}</div>
-            <div>{{ item.direction }}</div>
-            <div style="color:#00EBC1">{{ item.state }}</div>
-            <div>{{ item.speed }}</div>
-            <div>{{ item.follow }}</div>
-          </div>
+        <div
+          :class="'tblTd ' + (index % 2 === 0 ? 'tblTwo' : '')"
+          v-for="(item, index) of list"
+        >
+          <div>{{ item.name }}</div>
+          <div>{{ item.direction }}</div>
+          <div style="color: #00ebc1">{{ item.state }}</div>
+          <div>{{ item.speed }}</div>
+          <div>{{ item.follow }}</div>
         </div>
-     </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
 export default {
-  name: 'Heightway',
+  name: "Heightway",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-     start:'',
-     start1:'',
-     start2:'',
-     start3:'',
-     areaOptions: [{
-          value: '济南',
-          label: '济南'
-        }, {
-          value: '菏泽',
-          label: '菏泽'
-      }],
-      area: '济南',
-        list:[
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
-          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}
-        ]
-    
-    }
+      start: "",
+      start1: "",
+      start2: "",
+      start3: "",
+      areaOptions: [
+        {
+          value: "济南",
+          label: "济南",
+        },
+        {
+          value: "菏泽",
+          label: "菏泽",
+        },
+      ],
+      area: "济南",
+      list: [
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+      ],
+    };
   },
 
-  created() {
-    
-  },
+  created() {},
   methods: {
     onSubmit() {
-        console.log('submit!');
-      }
-  }
-}
+      console.log("submit!");
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
-
-
+<style lang="scss" scoped>
 .el-input__inner {
   background-color: transparent !important;
+  font-size: 12px;
+}
+::v-deep .el-input__inner {
+  padding: 0 10px;
+}
+::v-deep .el-input__inner::placeholder {
+  color: #9f9f9f;
+  font-size: 12px;
 }
 .heightway {
   width: 100%;
-  .board{
+  .board {
     height: 400px;
     width: 100%;
-    background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    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;
+    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: center;
     align-items: center;
     flex-direction: column;
-    padding:15px 10px;
-   .searchPanel{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width:100%;
-    font-size: 14px;
-    margin-bottom: 10px;
-    div{
-      white-space: nowrap;
-      margin-right: 4px;
-    }
-    .inputZh{
-      width: 47px;
-      ::v-deep{
-        .el-input__inner{
-          background-color: #064258 !important;
-          border-width: 0px !important;
+    padding: 15px 10px;
+    .searchPanel {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      width: 100%;
+      font-size: 13px;
+      margin-bottom: 10px;
+      div {
+        white-space: nowrap;
+        margin-right: 4px;
+      }
+      .inputZh {
+        width: 60px;
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+          }
         }
       }
-    }
-    .inputJl{
-      margin-left: 5px;
-      margin-right: 10px;
-    }
-    .selectRoad{
-      width:87px;
-      ::v-deep{
-        .el-input__inner{
-          background-color: #064258 !important;
-          border-width: 0px !important;
+      .inputJl {
+        // width: 60px;
+        margin-left: 5px;
+        margin-right: 10px;
+      }
+      .selectRoad {
+        width: 87px;
+        ::v-deep {
+          .el-input__inner {
+            background-color: #064258 !important;
+            border-width: 0px !important;
+            font-size: 12px;
+          }
         }
       }
+      .btnSearch {
+        background-color: #00b3cc;
+        margin-left: 10px;
+        padding: 6px 15px;
+        font-size: 13px;
+      }
+      .btnReset {
+        background-color: transparent;
+        border-color: #00b3cc;
+        color: white;
+        padding: 6px 15px;
+        font-size: 13px;
+      }
     }
-    .btnSearch{
-      background-color: #00B3CC;
-      margin-left: 10px;
-    }
-    .btnReset{
-      background-color: transparent;
-      border-color: #00B3CC;
-      color: white;
-    }
-   }
   }
 
-  .tblResult{
-      height: 300px;
+  .tblResult {
+    height: 300px;
+    width: 100%;
+    .tblTd {
       width: 100%;
-      .tblTd{
-        width:100%;
-        display: flex;
-        justify-content: space-between;
-        background-color: #064258;
-        height: 42px;
-        line-height: 42px;
-        color: #fff;
-        div{
-          text-align: left;
-          width: 25%;
-        }
-      }
-      .tblTd:first-child{
-        background-color: #0d3646;
-        color: #00D1FF;
-      }
-      .tblTd>div:first-child{
-        width: 35%;
-        margin-left: 20px;
-      }
-      .tblTd>div:last-child{
-        text-align: center;
-      }
-      .tblTwo{
-        background-color: transparent !important;
+      display: flex;
+      justify-content: space-between;
+      background-color: #064258;
+      height: 42px;
+      line-height: 42px;
+      color: #fff;
+      div {
+        text-align: left;
+        width: 25%;
       }
     }
+    .tblTd:first-child {
+      background-color: #0d3646;
+      color: #00d1ff;
+    }
+    .tblTd > div:first-child {
+      width: 35%;
+      margin-left: 20px;
+    }
+    .tblTd > div:last-child {
+      text-align: center;
+    }
+    .tblTwo {
+      background-color: transparent !important;
+    }
+  }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js
index 90565066..30676b00 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js
@@ -1,125 +1,137 @@
 let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`;
 let xdata = {
-   value: ['大学城-长清', '长清-孝里', '孝里-平阴北', '平阴北-平阴', '平阴-东平', '东平-梁山东', '梁山东-嘉祥']
+  value: [
+    "大学城-长清",
+    "长清-孝里",
+    "孝里-平阴北",
+    "平阴北-平阴",
+    "平阴-东平",
+    "东平-梁山东",
+    "梁山东-嘉祥",
+    "平阴2-东平",
+    "东平2-梁山东",
+    "梁山东2-嘉祥",
+  ],
 };
+let ind = -30;
 let sdata = {
-   value: [32774, 30067, 28774, 30067, 30021, 30067, 32774]
-}
+  value: [32774, 30067, 28774, 30067, 30021, 30067, 32774, 30021, 30067, 32774],
+};
 
 let dataZoomMove = {
-   start: 0,
-   end: 4
-}
+  start: 0,
+  end: 4,
+};
 var options = {
-      
-      grid: {
-         containLabel: true,
-         // 边距自行修改
-         bottom: '0%',
-         left: '0%',
-         top: '20%',
-         right: '10%',
+  grid: {
+    containLabel: true,
+    // 边距自行修改
+    bottom: "0%",
+    left: "0%",
+    top: "8%",
+    right: "10%",
+  },
+  xAxis: {
+    type: "value",
+    axisLabel: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    splitLine: {
+      show: false,
+    },
+  },
+  yAxis: [
+    {
+      type: "category",
+      data: xdata.value,
+      inverse: true,
+      axisLabel: {
+        fontSize: "14px",
+        inside: true,
+        verticalAlign: "bottom",
+        color: "#fff",
+        padding: 10,
+        margin: -5,
+        formatter: function (value) {
+          let index = xdata.value.indexOf(value);
+          return `{a|Top${(ind += 1)}} {b|${value}}`;
+        },
+        rich: {
+          a: {
+            fontSize: "10px",
+          },
+
+          b: {
+            fontSize: "12px",
+            padding: [0, 0, 0, 70],
+          },
+        },
+      },
+      axisLine: {
+        show: false,
       },
-      xAxis: {
-         type: 'value',
-         axisLabel: {
-            show: false
-         },
-         axisLine: {
-            show: false,
-         },
-         axisTick: {
-            show: false,
-         },
-         splitLine: {
-            show: false,
-         },
+      axisTick: {
+        show: false,
       },
-      yAxis: [
-         {
-            type: 'category',
-            data: xdata.value,
-            inverse: true,
-            axisLabel: {
-               fontSize: '14px',
-               inside: true,
-               verticalAlign: 'bottom',
-               color:'#fff',
-               padding:10,
-               margin:-5,
-               formatter: function (value) {
-                  let index = xdata.value.indexOf(value);
-                  return `{a|Top${index+1}} {b|${value}}`
-               },
-               rich: {
-                  a: {
-                     fontSize: '14px',
-                  },
-   
-                  b: {
-                     fontSize: '14px',
-                     padding: [0, 0, 0, 70],
-                  }
-               },
+    },
+  ],
+  series: [
+    {
+      realtimeSort: true,
+      data: sdata.value,
+      type: "bar",
+      barWidth: 8,
+      itemStyle: {
+        borderRadius: 40,
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#1cd0f000", // 0% 处的颜色
             },
-            axisLine: {
-               show: false,
+            {
+              offset: 1,
+              color: "#1cd0f0", // 100% 处的颜色
             },
-            axisTick: {
-               show: false,
-            }
-         }
-      ],
-      series: [
-         {
-            data: sdata.value,
-            type: 'bar',
-            barWidth: 8,
-            itemStyle: {
-               borderRadius: 40,
-               color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 1,
-                  y2: 0,
-                  colorStops: [
-                     {
-                        offset: 0,
-                        color: '#1cd0f000', // 0% 处的颜色
-                     },
-                     {
-                        offset: 1,
-                        color: '#1cd0f0', // 100% 处的颜色
-                     },
-                  ],
-                  global: false, // 缺省为 false
-               }
+          ],
+          global: false, // 缺省为 false
+        },
+      },
+      label: {
+        show: true,
+        position: "right",
+        distance: -10,
+        data: sdata,
+        color: "#fff",
+        formatter: (c) => {
+          return `{a|}{b|${c.value}辆}`;
+        },
+        rich: {
+          a: {
+            widht: 20,
+            height: 20,
+            backgroundColor: {
+              image: chartIcon,
             },
-            label: {
-               show: true,
-               position: 'right',
-               distance: -10,
-               data: sdata,
-               color:'#fff',
-               formatter: (c) => {
-                  return `{a|}{b|${c.value}辆}`
-               },
-               rich: {
-                  a: {
-                     widht: 20,
-                     height: 20,
-                     backgroundColor: {
-                        image: chartIcon
-                     },
-                  },
-                  b:{
-                     padding:[0,0,0,10]
-                  }
-               }
-            }
-         }
-      ]
-}
+          },
+          b: {
+            padding: [0, 0, 0, 10],
+          },
+        },
+      },
+    },
+  ],
+};
 
 export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
index 86816291..0a55d39a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
@@ -1,87 +1,98 @@
 <template>
-  <div class='situation'>
+  <div class="situation">
     <WgtTitle :title="'路段交通量情况'"></WgtTitle>
     <div class="board">
       <div class="tag">
-        <div class="checked">路段车流量Top10</div>
-        <div>断面交通量Top10</div>
+        <div :class="active == 1 ? 'checked' : ''" @click="handleChange(1)">
+          路段车流量Top10
+        </div>
+        <div :class="active == 2 ? 'checked' : ''" @click="handleChange(2)">
+          断面交通量Top10
+        </div>
       </div>
-      <div class="charts keep-ratio " id="situationEchartBox"></div>
-     </div>
+      <div class="charts keep-ratio" id="situationEchartBox"></div>
+    </div>
   </div>
 </template>
 
 <script>
-
-import WgtTitle from '../../../widgets/title'
+import WgtTitle from "../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-  name: 'Situation',
+  name: "Situation",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-     
-    }
+      active: "2",
+    };
   },
 
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('situationEchartBox'));
+        var myChart = echarts.init(
+          document.getElementById("situationEchartBox")
+        );
         myChart.setOption(chartsStatistics);
       });
     });
   },
-  created() {
-    
-  },
+  created() {},
   methods: {
-
-  }
-}
+    handleChange(value) {
+      console.log(value);
+      this.active = value;
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .situation {
   width: 100%;
-  .board{
+  .board {
     height: 400px;
     width: 100%;
     padding: 0px 30px;
-    background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    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;
+    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: flex-start;
     align-items: center;
     flex-direction: column;
   }
   .charts {
-    margin-top: -40px;
-      height: 400px;
-      width: 100%;
+    // margin-top: -40px;
+    height: 400px;
+    width: 100%;
   }
-  .tag{
-    margin-top: 20px;
+  .tag {
+    margin-top: 15px;
     display: flex;
     width: 100%;
     justify-content: flex-start;
-    div{
+    div {
       width: 150px;
       height: 25px;
       line-height: 25px;
       border-radius: 20px;
       text-align: center;
-      background-color: #C87800;
+      background-color: #00b3cc;
       margin-right: 10px;
     }
-    .checked{
-      background-color: #00B3CC;;
+    .checked {
+      background-color: #c87800 !important;
     }
   }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
index c41886ed..10733273 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='TrafficFlow'>
+  <div class="TrafficFlow">
     <!-- 交通路网状况 -->
     <Traffic class="head" />
     <section class="content">
@@ -11,7 +11,6 @@
       <!-- <Unblocked class="content-m" /> -->
       <!-- 全路车流量状况 -->
       <Flowstate class="content-r" />
-
     </section>
     <section class="foot">
       <!-- 交通路段状态 -->
@@ -24,18 +23,16 @@
 </template>
 
 <script>
-
-
-import Traffic from './components/traffic/'
-import Classification from './components/classification/'
-import Unblocked from './components/unblocked/'
-import Congestion from './components/congestion/'
-import Heightway from './components/heightway/'
-import Flowstate from './components/flowstate/'
-import Situation from './components/situation/'
+import Traffic from "./components/traffic/";
+import Classification from "./components/classification/";
+import Unblocked from "./components/unblocked/";
+import Congestion from "./components/congestion/";
+import Heightway from "./components/heightway/";
+import Flowstate from "./components/flowstate/";
+import Situation from "./components/situation/";
 
 export default {
-  name: 'TrafficFlow',
+  name: "TrafficFlow",
   components: {
     Traffic,
     Classification,
@@ -43,12 +40,12 @@ export default {
     Congestion,
     Heightway,
     Flowstate,
-    Situation
-  }
-}
+    Situation,
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .TrafficFlow {
   width: 100%;
   height: 100%;
@@ -71,7 +68,7 @@ export default {
     pointer-events: none;
     margin-top: 19px;
 
-    >div {
+    > div {
       pointer-events: auto;
     }
 
@@ -80,7 +77,6 @@ export default {
       margin-right: 20px;
     }
 
-
     .content-m {
       width: 260px;
     }
@@ -99,22 +95,22 @@ export default {
     pointer-events: none;
     margin-top: 19px;
 
-    >div {
+    > div {
       pointer-events: auto;
     }
 
     .foot-l {
-      width: 726px;
+      width: 756px;
       margin-right: 20px;
     }
 
     .foot-m {
-      width: 613px;
+      width: 580px;
       margin-right: 20px;
     }
 
     .foot-r {
-      width: 493px;
+      width: 500px;
     }
   }
 }