提交最新代码，统计分析

ruoyi-ui/package.json

@@ -103,7 +103,8 @@
     "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",
     "vuescroll": "^4.18.1",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "zrender": "^5.4.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

ruoyi-ui/src/common/menuData.js

@@ -97,14 +97,19 @@ export default [
     name: "maintain",
     position: "left",
     path: "/maintain",
-    component: "developing.vue",
     children: [
       {
         title: "收费运营",
         name: "chargeableOperations",
         path: "/maintain/board",
         component: "maintenanceOperations/chargeableOperations/index.vue",
-      }]
+      },
+     {
+      title: "统计分析",
+      name: "statisticalAnalysis",
+      path: "/maintain/statisticalAnalysis",
+      component: "maintenanceOperations/statisticalAnalysis/index.vue", 
+     }]
   },
   {
     title: "公众服务",

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js

@@ -0,0 +1,193 @@
+import * as echarts from "echarts";
+
+var data1 = [50, 32, 41, 61, 70, 39, 40, 55, 63, 55, 36, 45, 62, 74, 46, 73, 92, 60, 45, 33, 45,66,55, 32, 46, 36, 67, 49, 60, 55, 33, 35, 66]
+var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15,12, 4, 6, 7, 9, 10, 15, 3, 5, 6,5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6]
+var options = {
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(17,95,182,0.5)',
+    textStyle: {
+      color: "#fff"
+    },
+    formatter: function (params) {
+      return params[1].marker + '' + params[1].name + '\n' +
+        "<div>" +
+        "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
+        "<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' +
+        "</div>" +
+        "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
+        '' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value;
+    }
+  },
+  grid: {
+    left: '2%',
+    right: '2%',
+    top: '15%',
+    bottom: '12%'
+  },
+  xAxis: {
+    data: ['1日', '2日', '3日', '4日', '5日', '6日','7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
+    show: true,
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        type: 'solid',
+        color: '#2D4377',
+        opacity: 1
+      }
+    },
+    // lineStyle: {
+    //     show: true,
+    //     type: 'solid'
+    // },
+    axisLabel: {
+      interval: 0,
+      textStyle: {
+        color: 'rgba(255,255,255,0.8)',
+        fontSize: 14
+      },
+      margin: 12 // 刻度标签与轴线之间的距离。
+    }
+
+  },
+  yAxis: [{
+    min: 0,
+    max: 100,
+    type: 'value',
+    minInterval:20,
+    maxInterval:20,
+    name: '(单位：万)',
+    nameTextStyle: {
+      align: 'left',
+      color: 'rgba(255,255,255,0.8)',
+      padding: [0, 0, 0, -20],
+      fontSize: 14
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+        color: '#2D4377',
+        opacity: 0.5
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#2D4377',
+      }
+    },
+    axisLabel: {
+      textStyle: {
+        color: 'rgba(255,255,255,0.8)',
+        fontSize: 14
+      }
+    },
+    data:[
+      '0','3','6','9','12','15','18'
+    ],
+  }],
+  legend: {
+    top: '5%',
+    right: '5%',
+    icon: 'rect',
+    itemWidth: 25,
+    itemHeight: 10,
+    textStyle: {
+      color: '#fff',
+      fontSize: 14
+    },
+    lineStyle:{
+      show:false,
+      color:"#00E4BB",
+    },
+    data:[{
+      name:'增收金额',
+      itemStyle:{
+        color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: '#00E4BB' // 0% 处的颜色
+        }, {
+          offset: 1,
+          color: '#003B4E' // 100% 处的颜色
+        }], false)
+      },
+    },
+    {
+      name:'增涨率',
+      itemStyle:{
+        color:"#755400"
+      }
+    }],
+    itemGap: 12 // 设置间距
+  },
+  series: [
+   
+  // 下半截柱状图
+    {
+      name: '增收金额',
+      type: 'bar',
+      barWidth: 12,
+      barGap: '-100%',
+      itemStyle: { // lenged文本
+        opacity: 1,
+        barBorderRadius: [13, 13, 13, 13],
+        color: function (params) {
+          var a = params.name.slice(0, 2)
+          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: '#00E4BB' // 0% 处的颜色
+          }, {
+            offset: 1,
+            color: '#003B4E' // 100% 处的颜色
+          }], false)
+        }
+      },
+
+      data: data1
+    },
+  
+
+
+    {
+      name: '',
+      type: 'bar',
+      barWidth: 12,
+      barGap: '-100%',
+      z: 0,
+      itemStyle: {
+        color: '#0BA7DA',
+        opacity: .1,
+      },
+      data: [100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100,100, 100, 100, 100, 100, 100,100, 100, 100, 100]
+    }
+  ]
+}
+
+// option && myChart3.setOption(option);
+// if (option && typeof option === "object") {
+//     myChart3.setOption(option, true);
+//     refreshChart(myChart3,option);
+//     var index3 = 0; //播放所在下标
+//     var mTime = setInterval(function () {
+//             myChart3.dispatchAction({
+//                 type: 'showTip',
+//                 seriesIndex: 0,
+//                 dataIndex: index3
+//             });
+//             index3++;
+//             if (index3 >= 6) {
+//                 //console.log('data4', fxdata.length)
+//                 index3 = 0;
+//                 //console.log(fxdata)
+//             }
+//     }, 2600);
+// }
+
+export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@@ -0,0 +1,438 @@
+<template>
+    <div class='TrafficFlow'>
+      <section class="foot">
+        <el-tabs class="footTabs" v-model="activeName"  @tab-click="changeTabs">
+            <el-tab-pane label="设备分析" name="first">
+             
+            </el-tab-pane>
+            <el-tab-pane label="设备查询" name="second">
+              <div class="topdiv" >
+                <div class="left-div" >
+                    <el-button >刷新</el-button>
+                    <el-button >导出Excel</el-button>
+                </div>
+              </div>
+              <div class="middleDiv" >
+                <div id="chart1" >
+
+                </div>
+              </div>
+              <div >
+                <el-table
+                    :border="false"
+                    :data="tableData"
+                    height="480"
+                    style="width: 100%">
+                    <el-table-column
+                    prop="nem"
+                    label="序号"
+                    width="80">
+                    </el-table-column>
+                    <el-table-column
+                    prop="address"
+                    label="设备类型"
+                    width="">
+                    </el-table-column>
+                    <el-table-column
+                    prop="root"
+                    label="方向"
+                    class-name="showClass"
+                    width="">
+                    <template slot-scope="scope">
+                        <span class="showClass">{{scope.row.name}}</span>
+                    </template>
+                    </el-table-column>
+                    <el-table-column
+                    prop="ip"
+                    label="设备IP"
+                    width=""
+                    >
+                    </el-table-column>
+                    <el-table-column
+                    prop="cj"
+                    label="厂家"
+                    width=""
+                    >
+                    </el-table-column>
+                    <el-table-column
+                    prop="xh"
+                    label="型号"
+                    width=""
+                    >
+                    </el-table-column>
+                    <el-table-column
+                    prop="wd"
+                    label="网段"
+                    width=""
+                    >
+                    </el-table-column>
+                    <el-table-column
+                    prop="jcsj"
+                    label="监测时间"
+                    width=""
+                    >
+                    </el-table-column>
+                    <el-table-column
+                    prop="cz"
+                    label="操作"
+                    width=""
+                    >
+                    </el-table-column>
+                </el-table>
+              </div>
+            </el-tab-pane>
+        </el-tabs>
+      </section>
+    </div>
+  </template>
+  
+  <script> 
+
+import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'publicService',
+    components: {
+ 
+    },
+    data(){
+        return {
+            activeName:"first",
+            tableData: [{
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        },
+        {
+          date: '2023-12-31 13:00:00',
+          name: '高清网络球形摄像机',
+          address: 'K234+235',
+          root:"中央分隔带",
+          ip:"10.0.61.43",
+          cj:"海康威视",
+          xh:"XXX",
+          wd:"梁山收费站监控网段",
+          jcsj:"2024-01-17",
+          cz:"在线",
+        }
+        ]
+        }
+    },
+    methods:{
+      changeTabs(){
+        console.log("======================", this.myChart);
+        this.$nextTick(() => {
+            this.myChart.resize();
+        });
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('chart1'));
+          myChart.setOption(chartsStatistics);
+          this.myChart = myChart;
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+  
+::v-deep .el-table .cell {
+    padding-left:0px !important;
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th {
+    background-color: #064258 !important;
+    color:#00D1FF;
+    border-color: #064258 !important;
+    border:0px !important;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+  }
+
+  ::v-deep .el-table {
+    border:0px !important;
+    background-color: transparent;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table__body-wrapper {
+    background-color: #064258;
+    color: #fff;
+  }
+ ::v-deep .el-table .el-table__cell {
+    height:47px;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+ }
+
+  ::v-deep .el-table tr:hover td {
+    background: #1b2528 !important;
+    color:#00D1FF;
+    height: 47px;
+  }
+
+  ::v-deep .el-table tr:nth-child(odd) td{
+    background-color: #13272F ;
+    border:0px !important; 
+  }
+  ::v-deep .el-table tr:nth-child(even) td{
+    border:0px !important; 
+  }
+
+  ::v-deep .el-table tr {
+    background-color: #133242 !important;
+    border-collapse:0;
+    border:0px !important;
+    background-color: transparent !important;
+  }
+
+   ::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;
+
+    }
+
+    .middleDiv {
+        display: inline-flex;
+        width:100%;
+        height:343px;
+        background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425860 100%);
+        margin-bottom:30px;
+
+        > div {
+            display: inline-flex;
+            width:100%;
+            height:100%;
+        }
+    }
+
+    .content {
+      width: 100%;
+      margin: auto;
+      display: flex;
+      flex: 1;
+      pointer-events: none;
+      margin-top: 19px;
+
+      >div {
+        pointer-events: auto;
+      }
+  
+      .content-l {
+        width: calc(25%);
+     
+        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: 49.4%;
+      }
+    }
+    .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>
+