禅道bug更改

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,

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,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js

@@ -1,40 +1,57 @@
-
 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',
+    name: "客1",
     // num:''
     value: 13456,
   },
   {
-       name: '客2',
+    name: "客2",
     value: 13456,
   },
   {
-       name: '客3',
+    name: "客3",
     value: 13456,
   },
   {
-        name: '专1',
+    name: "专1",
     // num:''
     value: 13456,
   },
   {
-        name: '专2',
+    name: "专2",
     value: 13456,
   },
   {
-        name: '专3',
+    name: "专3",
     value: 13456,
   },
   {
-        name: '货1',
+    name: "货1",
     value: 13456,
   },
   {
-        name: '货2',
+    name: "货2",
     value: 13456,
   },
 ];
@@ -47,127 +64,132 @@ for (var i of datas) {
 var options = {
   tooltip: {
     show: true,
-        trigger: 'item',
-        formatter: '{a} <br/>{b}: {c} ({d}%)',
-        backgroundColor:"#ffffff",
-        textStyle:{
-            color:"#666"
-        }
+    // trigger: "item",
+    // formatter: "{a} <br/>{b}: {c} ({d}%)",
+    // backgroundColor: "#ffffff",
+    // textStyle: {
+    //   color: "#666",
+    // },
   },
   legend: {
-        orient: 'vertical',
+    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',
+      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:{
-  
-        },
+    itemStyle: {},
     textStyle: {
       rich: {
         background: {
-                   background: '#DEDEDE',
+          background: "#DEDEDE",
           fontSize: 14,
-                   align: 'left',
+          align: "left",
           padding: [0, 10, 20, 0],
         },
         name1: {
-                   color: '#fff',
+          color: "#fff",
           fontSize: 14,
           Width: 12,
-                   align: 'left',
+          align: "left",
           padding: [0, 0, 0, 10],
         },
         name2: {
-                   color: '#37E7FF',
+          color: "#37E7FF",
           fontSize: 14,
-                   align: 'left',
+          align: "left",
           padding: [0, 0, 0, 10],
         },
         value: {
-                   color: '#ccc',
+          color: "#ccc",
           fontSize: 14,
-                   align: 'left',
+          align: "left",
         },
         title: {
           //  color: '#fff',
           color: "#C60020",
-                   fontWeight:'bold',
+          fontWeight: "bold",
           fontSize: 40,
-                }
+        },
       },
       color: "#fff",
     },
     data: [
       {
-                name:'客1',
-                backgroundColor:'#5CC5FF',
-        }, '客2', '客3', '货1', 
-                '货2', '专1', '专2', '专3']
+        name: "客1",
+        backgroundColor: "#5CC5FF",
+      },
+      "客2",
+      "客3",
+      "货1",
+      "货2",
+      "专1",
+      "专2",
+      "专3",
+    ],
   },
   series: [
     {
-            name: '',
-            type: 'pie',
-            selectedMode: 'single',
-            radius: [0, '50%'],
-            center:['25%','50%'],
+      name: "",
+      type: "pie",
+      selectedMode: "single",
+      radius: [0, "50%"],
+      center: ["25%", "50%"],
       label: {
         normal: {
-                    position: 'inner',
+          position: "inner",
           show: true,
-                    color:'#fff',
+          color: "#fff",
           fontSize: 14,
-                    formatter: '{b}\n{c}辆',
-                }
+          formatter: "{b}\n{c}辆",
+        },
       },
       data: [
-                {value: 2290, name: '客车\n'},
-                {value: 1020, name: '货车\n'},
-                {value: 3000, name: '专项车\n'},
+        { value: 2290, name: "客车\n" },
+        { value: 1020, name: "货车\n" },
+        { value: 3000, name: "专项车\n" },
       ],
-            color:['#708FFF','#FB9434','#219F73']
+      color: ["#708FFF", "#FB9434", "#219F73"],
     },
     {
-            name: '',
-            type: 'pie',
-            radius: ['60%', '70%'],
-            center:['25%','50%'],
+      name: "",
+      type: "pie",
+      radius: ["60%", "70%"],
+      center: ["25%", "50%"],
       label: {
-                position: 'inner',
-                show: false
+        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: ''},
+        { 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:0,
+          borderWidth: 2,
           borderType: "solid",
           borderCap: "round",
           borderJoin: "round",
@@ -175,29 +197,29 @@ var options = {
           borderMiterLimit: "20",
           color: function (params) {
             return {
-                            type: 'linear',
+              type: "linear",
               x: 0,
               y: 0,
               x2: 1,
               y2: 1,
-                            colorStops: [{
+              colorStops: [
+                {
                   offset: 0,
-                                    color:  color[params.dataIndex] // 0% 处的颜色
+                  color: color[params.dataIndex], // 0% 处的颜色
                 },
                 {
                   offset: 1,
-                                    color: colorend[params.dataIndex] // 100% 处的颜色
-                                }
+                  color: colorend[params.dataIndex], // 100% 处的颜色
+                },
               ],
-                            globalCoord: false // 缺省为 false
-                        }
-                    }
+              globalCoord: false, // 缺省为 false
+            };
           },
         },
-            color:['#009688','#63BA79','#FFB800','#F7ED46','#666666']
-        }
-    ]
-}
-
+      },
+      //   color: ["#009688", "#63BA79", "#FFB800", "#F7ED46", "#666666"],
+    },
+  ],
+};
 
 export default options;

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];

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue

@@ -1,24 +1,37 @@
 <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>
+        <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"></el-input>
-          <el-input class="inputZh inputJl" v-model="start3"></el-input>
+        <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">
+            :value="item.value"
+          >
           </el-option>
         </el-select>
-          <el-button type="primary" class="btnSearch" @click="onSubmit">搜索</el-button>
+        <el-button type="primary" class="btnSearch" @click="onSubmit"
+          >搜索</el-button
+        >
         <el-button class="btnReset">重置</el-button>
       </div>
       <div class="tblResult">
@@ -29,10 +42,13 @@
           <div>平均车速</div>
           <div>总车流量</div>
         </div>
-          <div :class="'tblTd ' + (index%2===0?'tblTwo':'')" v-for="(item,index) of list">
+        <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 style="color: #00ebc1">{{ item.state }}</div>
           <div>{{ item.speed }}</div>
           <div>{{ item.follow }}</div>
         </div>
@@ -42,55 +58,96 @@
 </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: '济南',
+      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'}
-        ]
-    
-    }
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
         },
-
-  created() {
-    
+        {
+          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() {},
   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%;
@@ -101,7 +158,12 @@ export default {
     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;
+    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;
@@ -113,14 +175,14 @@ export default {
       align-items: center;
       height: 40px;
       width: 100%;
-    font-size: 14px;
+      font-size: 13px;
       margin-bottom: 10px;
       div {
         white-space: nowrap;
         margin-right: 4px;
       }
       .inputZh {
-      width: 47px;
+        width: 60px;
         ::v-deep {
           .el-input__inner {
             background-color: #064258 !important;
@@ -129,6 +191,7 @@ export default {
         }
       }
       .inputJl {
+        // width: 60px;
         margin-left: 5px;
         margin-right: 10px;
       }
@@ -138,17 +201,22 @@ export default {
           .el-input__inner {
             background-color: #064258 !important;
             border-width: 0px !important;
+            font-size: 12px;
           }
         }
       }
       .btnSearch {
-      background-color: #00B3CC;
+        background-color: #00b3cc;
         margin-left: 10px;
+        padding: 6px 15px;
+        font-size: 13px;
       }
       .btnReset {
         background-color: transparent;
-      border-color: #00B3CC;
+        border-color: #00b3cc;
         color: white;
+        padding: 6px 15px;
+        font-size: 13px;
       }
     }
   }
@@ -171,7 +239,7 @@ export default {
     }
     .tblTd:first-child {
       background-color: #0d3646;
-        color: #00D1FF;
+      color: #00d1ff;
     }
     .tblTd > div:first-child {
       width: 35%;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js

@@ -1,29 +1,40 @@
 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
-}
+  end: 4,
+};
 var options = {
-      
   grid: {
     containLabel: true,
     // 边距自行修改
-         bottom: '0%',
-         left: '0%',
-         top: '20%',
-         right: '10%',
+    bottom: "0%",
+    left: "0%",
+    top: "8%",
+    right: "10%",
   },
   xAxis: {
-         type: 'value',
+    type: "value",
     axisLabel: {
-            show: false
+      show: false,
     },
     axisLine: {
       show: false,
@@ -37,29 +48,29 @@ var options = {
   },
   yAxis: [
     {
-            type: 'category',
+      type: "category",
       data: xdata.value,
       inverse: true,
       axisLabel: {
-               fontSize: '14px',
+        fontSize: "14px",
         inside: true,
-               verticalAlign: 'bottom',
-               color:'#fff',
+        verticalAlign: "bottom",
+        color: "#fff",
         padding: 10,
         margin: -5,
         formatter: function (value) {
           let index = xdata.value.indexOf(value);
-                  return `{a|Top${index+1}} {b|${value}}`
+          return `{a|Top${(ind += 1)}} {b|${value}}`;
         },
         rich: {
           a: {
-                     fontSize: '14px',
+            fontSize: "10px",
           },
 
           b: {
-                     fontSize: '14px',
+            fontSize: "12px",
             padding: [0, 0, 0, 70],
-                  }
+          },
         },
       },
       axisLine: {
@@ -67,18 +78,19 @@ var options = {
       },
       axisTick: {
         show: false,
-            }
-         }
+      },
+    },
   ],
   series: [
     {
+      realtimeSort: true,
       data: sdata.value,
-            type: 'bar',
+      type: "bar",
       barWidth: 8,
       itemStyle: {
         borderRadius: 40,
         color: {
-                  type: 'linear',
+          type: "linear",
           x: 0,
           y: 0,
           x2: 1,
@@ -86,40 +98,40 @@ var options = {
           colorStops: [
             {
               offset: 0,
-                        color: '#1cd0f000', // 0% 处的颜色
+              color: "#1cd0f000", // 0% 处的颜色
             },
             {
               offset: 1,
-                        color: '#1cd0f0', // 100% 处的颜色
+              color: "#1cd0f0", // 100% 处的颜色
             },
           ],
           global: false, // 缺省为 false
-               }
+        },
       },
       label: {
         show: true,
-               position: 'right',
+        position: "right",
         distance: -10,
         data: sdata,
-               color:'#fff',
+        color: "#fff",
         formatter: (c) => {
-                  return `{a|}{b|${c.value}辆}`
+          return `{a|}{b|${c.value}辆}`;
         },
         rich: {
           a: {
             widht: 20,
             height: 20,
             backgroundColor: {
-                        image: chartIcon
+              image: chartIcon,
             },
           },
           b: {
-                     padding:[0,0,0,10]
-                  }
-               }
-            }
-         }
-      ]
-}
+            padding: [0, 0, 0, 10],
+          },
+        },
+      },
+    },
+  ],
+};
 
 export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue

@@ -1,10 +1,14 @@
 <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>
@@ -12,39 +16,41 @@
 </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 {
@@ -55,19 +61,24 @@ export default {
     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;
+    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;
+    // margin-top: -40px;
     height: 400px;
     width: 100%;
   }
   .tag {
-    margin-top: 20px;
+    margin-top: 15px;
     display: flex;
     width: 100%;
     justify-content: flex-start;
@@ -77,11 +88,11 @@ export default {
       line-height: 25px;
       border-radius: 20px;
       text-align: center;
-      background-color: #C87800;
+      background-color: #00b3cc;
       margin-right: 10px;
     }
     .checked {
-      background-color: #00B3CC;;
+      background-color: #c87800 !important;
     }
   }
 }

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%;
@@ -80,7 +77,6 @@ export default {
       margin-right: 20px;
     }
 
-
     .content-m {
       width: 260px;
     }
@@ -104,17 +100,17 @@ export default {
     }
 
     .foot-l {
-      width: 726px;
+      width: 756px;
       margin-right: 20px;
     }
 
     .foot-m {
-      width: 613px;
+      width: 580px;
       margin-right: 20px;
     }
 
     .foot-r {
-      width: 493px;
+      width: 500px;
     }
   }
 }