更新

更新

src/pages/index/components/business_overview.vue

@@ -26,7 +26,7 @@
           :top="60"
           yAxisName="(元)"
           :tooltip="tooltipFormat"
-          :dataset="bardata"
+          :dataset="modelData2"
           :encode="[
             {x: 'month', y: 'hs', seriesName: '应收'},
             {x: 'month', y: 'cs', seriesName: '实收'}]"
@@ -35,7 +35,7 @@
         />
       </div>
       <div style="width: 33%;height: 400px;">
-        <h4 style="color: white">满位显示器</h4>
+        <h4 style="color: white">事件数据</h4>
         <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
           <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
           </el-table-column>
@@ -48,17 +48,126 @@
       </div>
       <br>
     </div>
+    <br>
+    <br>
+    <div style="width: 100%;display: flex;justify-content: space-between;">
+      <div style="width: 33%;height: 400px;">
+        <div align="center" style="color: white">停车趋势</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat1"
+          :encode="[
+              { x: 'month', y: 'lastAmount', seriesName: '停车总时长（时）',bool:'true' },
+            ]"
+          id="sxcyfzqk1"
+        />
+      </div>
+      <div style="width: 33%;height: 400px;">
+        <div align="center" style="color: white">泊位周转趋势</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata2"
+          :tooltipFormat="lineTooltipFormat1"
+          :encode="[
+              { x: 'month', y: 'lastAmount', seriesName: '当日平均周转次数',bool:'true' },
+            ]"
+          id="bwzzqs"
+        />
+      </div>
+      <div style="width: 33%;height: 400px;">
+        <div align="center" style="color: white">泊位利用率趋势</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata3"
+          :tooltipFormat="lineTooltipFormat1"
+          :encode="[
+              { x: 'month', y: 'lastAmount', seriesName: '当日平均利用率（%）',bool:'true' },
+            ]"
+          id="bwlylqs"
+        />
+      </div>
+    </div>
+    <br>
+    <br>
+    <div style="width: 100%;display: flex;justify-content: space-between;">
+      <div style="width: 33%;height: 400px;">
+        <div align="center" style="color: white">实缴趋势</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata4"
+          :tooltipFormat="lineTooltipFormat1"
+          :encode="[
+              { x: 'month', y: 'lastAmount', seriesName: '实缴率(%)',bool:'true' },
+            ]"
+          id="sjqs"
+        />
+      </div>
+      <div style="width: 33%;height: 400px;">
+        <div align="center" style="color: white">泊位实时占用率</div>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(%)"
+          :dataset="linedata5"
+          :tooltipFormat="lineTooltipFormat1"
+          :encode="[
+              { x: 'month', y: 'lastAmount', seriesName: '实时占用率',bool:'true' },
+            ]"
+          id="bwsszyl"
+        />
+      </div>
+      <div style="width: 33%;height: 400px;">
+        <h4 style="color: white">动态信息监控</h4>
+        <el-table :data="tableData2" style="background: #2a2a2a;border-color: #333;">
+          <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
+          </el-table-column>
+        </el-table>
+        <div class="table-pagination">
+          <el-pagination :background="false" layout="total, prev, pager, next" :total="total2" @current-change="handlePageChange"
+                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
 
 
   </div>
 </template>
 <script>
 import piechart from "@/components/pieChart";
+import barchart from "@/components/barChart";
+import linechart from "@/components/lineChart";
 import api from "@/api/article_z";
 
 export default {
   components: {
-    piechart
+    piechart,
+    barchart,
+    linechart
   },
   data() {
     return {
@@ -72,16 +181,68 @@ export default {
           key: 'deviceState'
         }
       ],
-      modelPieColor: ["#2E8B57","#9078f8"],
-      modelData: [],
-      modelPieColor2: ["#2E8B57","#9078f8"],
-      modelData2: [],
-      modelPieColor3: ["#2E8B57","#9078f8"],
+      columns2: [
+        {
+          label: '时间',
+          key: 'deviceName'
+        },
+        {
+          label: '事件',
+          key: 'deviceState'
+        },
+        {
+          label: '车牌号',
+          key: 'deviceState'
+        },
+        {
+          label: '停车场',
+          key: 'deviceState'
+        }
+      ],
+      modelPieColor: ["#2E8B57","#9078f8","#00FFFF","#DAA520","#20B2AA"],
+      modelData: [{"name":"A区","value":"300"},{"name":"B区","value":"600"},{"name":"C区","value":"100"}],
+      modelPieColor2: ["#2E8B57","#9078f8","#00FFFF","#DAA520","#20B2AA"],
+      modelData2: [{
+        "mouth": "市图书馆停车场",
+        "hs": 6053,
+        "cs": 1921
+      },
+        {
+          "mouth": "中山公园停车场",
+          "hs": 6033,
+          "cs": 3766
+        },
+        {
+          "mouth": "天地广场停车场",
+          "hs": 2258,
+          "cs": 2513
+        }],
+      modelPieColor3: ["#2E8B57","#9078f8","#00FFFF","#DAA520","#20B2AA"],
       modelData3: [],
       tableData: [],
+      tableData2: [],
+      linedata:[{
+        "mouth": "星期一",
+        "lastAmount": 14
+      },
+        {
+          "mouth": "星期二",
+          "lastAmount": 46
+        },
+        {
+          "mouth": "星期三",
+          "lastAmount": 59
+        },],
+      linedata2:[],
+      linedata3:[],
+      linedata4:[],
+      linedata5:[],
       total: 0,
       pageSize: 5,
       pageNum: 1,
+      total2: 0,
+      pageSize2: 5,
+      pageNum2: 1,
       radio: '2',
       dialogVisible: false,
       selRow: {},
@@ -93,8 +254,8 @@ export default {
     let params4 = {current: pageNum, size: pageSize}
     let requestList = [api.queryEquipmentRunning_Sxt(), api.queryEquipmentRunning_Zj(),api.queryEquipmentRunning_Mwxsq(), api.sbyxjcList(params4)];
     Promise.all(requestList).then(res => {
-      that.modelData = res[0].data || []
-      that.modelData2 = res[1].data || []
+      //that.modelData = res[0].data || []
+      //that.modelData2 = res[1].data || []
       that.modelData3 = res[2].data || []
       this.tableData = res[3].data.records || []
       this.total = res[3].data.total || 0
@@ -113,6 +274,36 @@ export default {
         this.total = res.data.total
       })
     },
+    lineTooltipFormat1(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastAmount || "--"
+      }(%)</div>`;
+    },
+    tooltipFormat(params) {
+      const type = params[0].seriesType;
+      const data = params[0].data;
+      // ${params[0].name || "--"}月：
+      return `<div class="line-tooltip">
+<div>${params[0].seriesName}: ${
+        params[0].data.hs || "--"}个</div>
+<div>${params[1].seriesName}: ${
+        params[0].data.cs || "--"}个</div>
+</div>`;
+    },
+    xLabelFormat(name) {
+      const nameArr = []
+      for (let i = 0; i < name.length; i += 7) {
+        nameArr.push(name.substring(i, i + 7))
+      }
+      return nameArr.join('\n');
+    },
+    dashAccessDataAnalysisStat1(){
+      api.dashAccessDataAnalysisStat1().then(res =>{
+        this.bardata = res.data
+      })
+    },
   }
 }
 </script>