概述页面

src/views/statistics/overview/dashboard/LineChart.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}"/>
+  <div :style="{height:(height + 100)+'px',width:width}">
+    <div :class="className" :style="{height: height+'px',width:width}"/>
+  </div>
 </template>
 
 <script>
@@ -20,8 +22,8 @@ export default {
       default: '100%'
     },
     height: {
-      type: String,
+      type: Number,
-      default: '350px'
+      default: 350
     },
     autoResize: {
       type: Boolean,
@@ -62,10 +64,17 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({expectedData, actualData} = {}) {
+    setOptions({dataList, title, yType} = {}) {
       this.chart.setOption({
+        title: {
+          text: title,
+          top: 10,
+          textStyle: {
+            height: 100,
+          }
+        },
         xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: yType,
           boundaryGap: false,
           axisTick: {
             show: false
@@ -75,7 +84,7 @@ export default {
           left: 10,
           right: 10,
           bottom: 20,
-          top: 30,
+          top: 60,
           containLabel: true
         },
         tooltip: {
@@ -90,9 +99,6 @@ export default {
             show: false
           }
         },
-        legend: {
-          data: ['expected', 'actual']
-        },
         series: [{
           name: 'expected', itemStyle: {
             normal: {
@@ -105,29 +111,9 @@ export default {
           },
           smooth: true,
           type: 'line',
-          data: expectedData,
+          data: dataList,
           animationDuration: 2800,
           animationEasing: 'cubicInOut'
-        },
-          {
-            name: 'actual',
-            smooth: true,
-            type: 'line',
-            itemStyle: {
-              normal: {
-                color: '#3888fa',
-                lineStyle: {
-                  color: '#3888fa',
-                  width: 2
-                },
-                areaStyle: {
-                  color: '#f3f8ff'
-                }
-              }
-            },
-            data: actualData,
-            animationDuration: 2800,
-            animationEasing: 'quadraticOut'
         }]
       })
     }

src/views/statistics/overview/dashboard/PanelGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="40" class="panel-group">
     <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+      <div class="card-panel" @click="handleSetLineChartData('gatewayNodeSum')">
         <div class="card-panel-icon-wrapper icon-people">
           <svg-icon class-name="card-panel-icon" icon-class="server"/>
         </div>
@@ -16,7 +16,7 @@
       </div>
     </el-col>
     <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
+      <div class="card-panel" @click="handleSetLineChartData('dataParsingSum')">
         <div class="card-panel-icon-wrapper icon-message">
           <svg-icon class-name="card-panel-icon" icon-class="cascader"/>
         </div>
@@ -31,7 +31,7 @@
       </div>
     </el-col>
     <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+      <div class="card-panel" @click="handleSetLineChartData('overallLoad')">
         <div class="card-panel-icon-wrapper icon-money">
           <svg-icon class-name="card-panel-icon" icon-class="validCode"/>
         </div>
@@ -46,7 +46,7 @@
       </div>
     </el-col>
     <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+      <div class="card-panel" @click="handleSetLineChartData('vehicleOnlineSum')">
         <div class="card-panel-icon-wrapper icon-shopping">
           <svg-icon class-name="card-panel-icon" icon-class="carAlt"/>
         </div>

src/views/statistics/overview/index.vue

@@ -10,6 +10,46 @@
     </el-menu>
     <panel-group @handleSetLineChartData="handleSetLineChartData"/>
 
+    <el-form :inline="true" :model="formInline">
+      <el-form-item label="展示时间区间">
+        <el-select v-model="formInline.user" placeholder="展示时间区间" @change="handleSetLineChartData(undefined)">
+          <el-option label="近7秒" value="近7秒"></el-option>
+          <el-option label="近7分" value="近7分"></el-option>
+          <el-option label="近7小时" value="近7小时"></el-option>
+          <el-option label="近7天" value="近7天"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="刷新机制">
+        <el-select v-model="formInline.region" placeholder="展示时间区间">
+          <el-option label="关闭" value="关闭"></el-option>
+          <el-option label="自动" value="自动"></el-option>
+          <el-option label="5秒" value="5秒"></el-option>
+          <el-option label="10秒" value="10秒"></el-option>
+          <el-option label="30秒" value="30秒"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-popover
+          placement="right"
+          width="400"
+          trigger="hover">
+          <el-collapse v-model="activeName" accordion>
+            <el-collapse-item title="关闭" name="1">
+              <div>不再自动刷新图表数据</div>
+            </el-collapse-item>
+            <el-collapse-item title="自动" name="2">
+              <div>根据展示时间区间进行自动刷新</div>
+              <div>近七天、近7小时、近7分：每30秒刷新一次</div>
+              <div>近7秒：每3秒刷新一次</div>
+            </el-collapse-item>
+            <el-collapse-item title="其余" name="3">
+              <div>根据选择刷新机制进行自动刷新</div>
+            </el-collapse-item>
+          </el-collapse>
+          <el-button slot="reference" icon="el-icon-question"></el-button>
+        </el-popover>
+      </el-form-item>
+    </el-form>
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData"/>
     </el-row>
@@ -17,17 +57,62 @@
     <el-row :gutter="32">
       <el-col :lg="8" :sm="24" :xs="24">
         <div class="chart-wrapper">
-          <raddar-chart/>
+          <el-tabs v-model="activeTopName" type="card">
+            <el-tab-pane label="最长在线TOP10" name="最长在线TOP10">
+              <el-card class="box-card">
+                <div v-for="o in 10" :key="o" class="text item">
+                  {{'VIN123456789' + (o - 1) }} <span style="float:right;">{{56 - o}}分钟</span>
+                </div>
+              </el-card>
+            </el-tab-pane>
+            <el-tab-pane label="最新上线车辆" name="最新上线车辆">
+              <el-card class="box-card">
+                <div v-for="o in 10" :key="o" class="text item">
+                  {{'VIN123456789' + (o - 1) }} <span style="float:right;">2024-4-13 23:06:5{{(10-o)}}</span>
+                </div>
+              </el-card>
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </el-col>
       <el-col :lg="8" :sm="24" :xs="24">
         <div class="chart-wrapper">
-          <pie-chart/>
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>网关节点负载</span>
+              <el-switch
+                style="float: right; display: block"
+                v-model="value1"
+                active-color="#13ce66"
+                inactive-color="#5ab1ef"
+                active-text="正序"
+                inactive-text="倒序">
+              </el-switch>
+            </div>
+            <div v-for="o in 10" :key="o" class="text item">
+              {{'node-gateway-' + (o - 1) }} <span style="float:right;">{{(10-o)}}%</span>
+            </div>
+          </el-card>
         </div>
       </el-col>
       <el-col :lg="8" :sm="24" :xs="24">
         <div class="chart-wrapper">
-          <bar-chart/>
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>网关节点负载</span>
+              <el-switch
+                style="float: right; display: block"
+                v-model="value2"
+                active-color="#13ce66"
+                inactive-color="#5ab1ef"
+                active-text="正序"
+                inactive-text="倒序">
+              </el-switch>
+            </div>
+            <div v-for="o in 10" :key="o" class="text item">
+              {{'node-gateway-' + (o - 1)%5 + "-parsing-" + (o - 1)%7  }} <span style="float:right;">{{(40-o)}}%</span>
+            </div>
+          </el-card>
         </div>
       </el-col>
     </el-row>
@@ -43,22 +128,34 @@ import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
 
+
+const yType = {
+  "近7秒": ['34:22','34:23','34:24','34:25','34:26','34:27','34:28'],
+  "近7分": ['32', '33', '34', '35', '36', '37', '38'],
+  "近7小时": ['2', '3', '4', '5', '6', '7', '8'],
+  "近7天":['2024-4-12', '2024-4-13', '2024-4-14', '2024-4-15', '2024-4-16', '2024-4-17', '2024-4-18' ],
+}
+
 const lineChartData = {
-  newVisitis: {
+  gatewayNodeSum: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    title: "网关收集节点数量",
-    actualData: [120, 82, 91, 154, 162, 140, 145]
+    dataList: [100, 120, 161, 134, 105, 160, 165],
+    yType: yType['近7天']
   },
-  messages: {
+  dataParsingSum: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    title: "数据解析节点数量",
-    actualData: [180, 160, 151, 106, 145, 150, 130]
+    dataList: [200, 192, 120, 144, 160, 130, 140],
+    yType: yType['近7天']
   },
-  purchases: {
+  overallLoad: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    title: "整体负载",
-    actualData: [120, 90, 100, 138, 142, 130, 130]
+    dataList: [80, 100, 121, 104, 105, 90, 100],
+    yType: yType['近7天']
   },
-  shoppings: {
+  vehicleOnlineSum: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    title: "车辆在线数",
-    actualData: [120, 82, 91, 154, 162, 140, 130]
+    dataList: [130, 140, 141, 142, 145, 150, 160],
+    yType: yType['近7天']
   }
 }
 
@@ -73,12 +170,26 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: lineChartData.gatewayNodeSum,
+      formInline: {
+        user: '近7天',
+        region: '关闭'
+      },
+      activeName: 1,
+      activeTopName: "最长在线TOP10",
+      value1: true,
+      value2: true
     }
   },
   methods: {
     handleSetLineChartData(type) {
+      if (type){
+        lineChartData[type].yType = yType[this.formInline.user]
         this.lineChartData = lineChartData[type]
+      }else {
+        this.lineChartData.yType = yType[this.formInline.user]
+      }
+
     }
   }
 }
@@ -101,4 +212,11 @@ export default {
     padding: 8px;
   }
 }
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
 </style>