概览俩个

src/components/lineChart.vue

@@ -4,7 +4,7 @@ smooth:encode.bool,<template>
 
 <script>
 import * as echarts from 'echarts'
-const colors = ["#00F5FC", "#D5920F", "#FA6894","#4cff37"];
+const colors = ["#00F5FC", "#D5920F", "#FA6894","#4cff37","#8439f8", "#e7d65f"];
 export default {
   props: {
     id: { type: String, required: true },

src/pages/index/components/event_monitoring.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="body-wrapper">
+    <el-table :data="tableData1" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+    <div style="height: 300px">
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(件)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'blacklistEvent', seriesName: '黑名单入场事件',bool:'true' },
+              { x: 'month', y: 'deckEvent', seriesName: '套牌车事件',bool:'true' },
+              { x: 'month', y: 'customerEvent', seriesName: '客诉事件',bool:'true' },
+              { x: 'month', y: 'deviceEvent', seriesName: '设备事件',bool:'true' },
+              { x: 'month', y: 'longEvent', seriesName: '超长停车事件',bool:'true' },
+              { x: 'month', y: 'largeEvent', seriesName: '大额欠费事件',bool:'true' },
+            ]"
+          id="sxcyfzqk"
+        />
+    </div>
+    <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>
+    </el-table>
+    <div class="table-pagination">
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
+                     :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    linechart,
+  },
+  data() {
+    return {
+      columns1: [
+        {
+          label: '实时事件数',
+          key: 'liveEvents'
+        },
+        {
+          label: '近日事件数',
+          key: 'recentEvents'
+        },
+        {
+          label: '历史事件数',
+          key: 'historicalEvents'
+        }
+      ],
+      tableData1: [],
+      linedata: [{month: '12-26', blacklistEvent:11,deckEvent:12,customerEvent:13,deviceEvent:11,longEvent:12,largeEvent:21},
+        {month: '12-27', blacklistEvent:12,deckEvent:13,customerEvent:12,deviceEvent:11,longEvent:11,largeEvent:12},
+        {month: '12-28', blacklistEvent:20,deckEvent:12,customerEvent:11,deviceEvent:22,longEvent:22,largeEvent:15},
+        {month: '12-29', blacklistEvent:13,deckEvent:14,customerEvent:21,deviceEvent:13,longEvent:13,largeEvent:12},
+        {month: '12-30', blacklistEvent:12,deckEvent:12,customerEvent:13,deviceEvent:12,longEvent:14,largeEvent:15},
+        {month: '12-31', blacklistEvent:13,deckEvent:12,customerEvent:12,deviceEvent:14,longEvent:21,largeEvent:21},],
+      columns: [
+        {
+          label: '停车场',
+          key: 'resourceName'
+        },
+        {
+          label: '泊位',
+          key: 'resourceType'
+        },
+        {
+          label: '车牌号',
+          key: 'plateno'
+        },
+        {
+          label: '日期',
+          key: 'creatTime'
+        },
+        {
+          label: '事件类型',
+          key: 'eventType'
+        }
+      ],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {
+  },
+  methods: {
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.blacklistEvent || "--"
+      }(件)</div>
+        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[0].data.deckEvent || "--"
+      }(件)</div>
+        <div style="color: ${params[2].color}">${params[2].seriesName}: ${
+        params[0].data.customerEvent || "--"
+      }(件)</div>
+        <div style="color: ${params[3].color}">${params[3].seriesName}: ${
+        params[0].data.deviceEvent || "--"
+      }(件)</div>
+        <div style="color: ${params[4].color}">${params[4].seriesName}: ${
+        params[0].data.longEvent || "--"
+      }(件)</div>
+        <div style="color: ${params[5].color}">${params[5].seriesName}: ${
+        params[0].data.largeEvent || "--"
+      }(件)</div>
+      </div>`;
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if(res.success) {
+          this.dialogVisible = false
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</script>
+
+<style  lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+  .table-pagination{
+    text-align: right;
+  }
+}
+</style>

src/pages/index/components/resource_access.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="body-wrapper">
+    <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>
+    </el-table>
+    <div class="table-pagination">
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total"
+                     @current-change="handlePageChange"
+                     :current-page.sync="pageNum" :page-size.sync="pageSize">
+      </el-pagination>
+    </div>
+    <div style="display: flex; justify-content: space-between;">
+      <div style="width: 50%; height: 300px">
+        <h5 style="color: white">设备实时在线情况</h5>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(个)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '在线设备数' },
+              { x: 'month', y: 'thisYearAmount', seriesName: '总设备数' },
+            ]"
+          id="sxcyfzqk"
+        />
+      </div>
+      <div style="width: 50%; height: 300px">
+        <h5 style="color: white">接口实时调用趋势</h5>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(次)"
+          :dataset="linedata1"
+          :tooltipFormat="lineTooltipFormat1"
+          :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '接口调用次数',bool:'true' },
+            ]"
+          id="sxcyfzqk1"
+        />
+      </div>
+    </div>
+    <div style="display: flex; justify-content: space-between;">
+      <div style="width: 50%; height: 300px">
+        <h5 style="color: white">接入累计图</h5>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(次)"
+          :dataset="linedata2"
+          :tooltipFormat="lineTooltipFormat2"
+          :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '接入次数',bool:'true' },
+            ]"
+          id="sxcyfzqk2"
+        />
+      </div>
+      <div style="width: 50%; height: 300px">
+        <h5 style="color: white">设备掉线趋势</h5>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(次)"
+          :dataset="linedata3"
+          :tooltipFormat="lineTooltipFormat3"
+          :encode="[
+              { x: 'month', y: 'lastYearAmount', seriesName: '设备掉线次数',bool:'true' },
+            ]"
+          id="sxcyfzqk3"
+        />
+      </div>
+    </div>
+    <div style="width: 50%; height: 400px" class="pie-div">
+      <h5 style="color: white">各区接入设备数</h5>
+      <piechart
+        class="model-pie-body"
+        id="chart1"
+        :roseType="false"
+        :radiusArr="['30%', '70%']"
+        :colorArr="modelPieColor"
+        :labelFormat="['{name|{b}}', '{sub|{@value}个 {d}%}', '{hr|}']"
+        :dataset="modelData.list"
+        :encode="{ itemName: 'name', value: 'value' }"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import api from "@/api/audit.js";
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+
+export default {
+  components: {
+    piechart,
+    linechart,
+  },
+  data() {
+    return {
+      modelPieColor: ["#4382f6","#9078f8","#ac4cb0"],
+      modelData: {
+        list: [{name: '源汇区', value: 30}, {name: '郾城区', value: 25}, {name: '召陵区', value: 15}]
+      },
+      linedata: [{month: '0:00-3:00', lastYearAmount: 65, thisYearAmount: 69}
+        , {month: '3:00-6:00', lastYearAmount: 65, thisYearAmount: 69}
+        , {month: '6:00-9:00', lastYearAmount: 64, thisYearAmount: 69}
+        , {month: '9:00-12:00', lastYearAmount: 64, thisYearAmount: 69}],
+      linedata1: [{month: '0:00-3:00', lastYearAmount: 12}
+        , {month: '3:00-6:00', lastYearAmount: 23}
+        , {month: '6:00-9:00', lastYearAmount: 34}
+        , {month: '9:00-12:00', lastYearAmount: 24}
+        , {month: '12:00-15:00', lastYearAmount: 26}],
+      linedata2: [{month: '智泊', lastYearAmount: 1020}
+        , {month: '现代智停', lastYearAmount: 1520}
+        , {month: '云慧智慧停车', lastYearAmount: 602}],
+      linedata3: [{month: '一月', lastYearAmount: 3}
+        , {month: '二月', lastYearAmount: 4}
+        , {month: '三月', lastYearAmount: 4}
+        , {month: '四月', lastYearAmount: 5}
+        , {month: '五月', lastYearAmount: 5}
+        , {month: '六月', lastYearAmount: 3}],
+      columns: [
+        {
+          label: '平台名称',
+          key: 'platformName'
+        },
+        {
+          label: '接入时间',
+          key: 'accessTime'
+        },
+        {
+          label: '接入状态',
+          key: 'accessType'
+        },
+        {
+          label: '接口版本',
+          key: 'accessVersion'
+        },
+        {
+          label: '累计调用次数',
+          key: 'cumulativeCalls'
+        },
+        {
+          label: '今日调用次数',
+          key: 'todayCumulativeCalls'
+        }
+      ],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      selRow: {},
+      searchWords: undefined
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  watch: {},
+  methods: {
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || "--"
+      }(件)</div>
+        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[0].data.thisYearAmount || "--"
+      }(件)</div>
+      </div>`;
+    },
+    handlePageChange() {
+      this.getTableData()
+    },
+    handleAudit(row) {
+      this.selRow = row
+      this.dialogVisible = true
+    },
+    handleConfirm() {
+      const {id} = this.selRow
+      console.log('radio', this.radio)
+      api.applyResource({id, applyType: this.radio}).then(res => {
+        if (res.success) {
+          this.dialogVisible = false
+          this.getTableData()
+        }
+      })
+    },
+    getTableData() {
+      const {pageNum, pageSize, searchWords} = this
+      api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
+        this.tableData = []
+        this.total = res.data.total
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.body-wrapper {
+  padding: 20px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+
+  .table-pagination {
+    text-align: right;
+  }
+  .pie-div{
+    margin: auto;
+    margin-top: 20px;
+  }
+}
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -87,6 +87,8 @@ export default {
         {name: '泊位列表', url: '/berth_list'},
         {name: '业务概览', url: '/business_overview'},
         {name: '经营情况', url: '/business_conditions'},
+        {name: '事件监测', url: '/event_monitoring'},
+        {name: '资源接入', url: '/resource_access'},
       ]
     }
   },

src/router/index.js

@@ -272,6 +272,16 @@ export default new Router({
           path: "/business_conditions",
           component: () => import("../pages/index/components/business_conditions.vue")
         },
+        {
+          name: "event_monitoring",
+          path: "/event_monitoring",
+          component: () => import("../pages/index/components/event_monitoring.vue")
+        },
+        {
+          name: "resource_access",
+          path: "/resource_access",
+          component: () => import("../pages/index/components/resource_access.vue")
+        },
       ]
     }
   ]