Merge remote-tracking branch 'origin/master'

src/api/equipment-management/equipment-model.js

@@ -55,3 +55,12 @@ export function getDataModelByDeviceTypeId(data) {
     data
   })
 }
+
+// 获取设备类型对应的实例数量统计
+export function getDeviceTypeStatistics(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/getDeviceTypeStatistics`,
+    method: 'post',
+    data
+  })
+}

src/settings.js

@@ -25,5 +25,5 @@ module.exports = {
    */
   sidebarLogo: true,
 
-  overview: false
+  overview: true
 }

src/views/overview/index.vue

 <template>
   <div class="overview">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="12" :lg="6">
-        <el-card ref="rowOne" class="box-card row-one">
-          <div slot="header">
-            <span>温度</span>
-          </div>
-          <div class="number">
-            {{ overview.temperature }}摄氏度
-          </div>
-          <div class="content">
-            <div id="gaugePlot" />
-          </div>
+      <el-col
+        v-for="(deviceType, index) in deviceTypeList"
+        :key="index"
+        :span="6"
+      >
+        <el-card style="margin-bottom: 20px">
+          <div :id="'donut' + deviceType.id" style="height: 360px" />
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="12" :lg="6">
-        <el-card class="box-card row-one">
-          <div slot="header">
-            <span>气压</span>
-          </div>
-          <div class="number">
-            1212帕
-          </div>
-          <div class="content">
-            <div id="meterGaugePlot" />
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="6">
-        <el-card class="box-card row-one">
-          <div slot="header">
-            <span>功率</span>
-          </div>
-          <div class="number">
-            6560千瓦时
-          </div>
-          <div class="content">
-            <div id="fanGaugePlot" />
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="6">
-        <el-card class="box-card row-one">
-          <div slot="header">
-            <span>活动营销效果</span>
-          </div>
-          <div class="number">
-            ¥126560
-          </div>
-          <div class="content" />
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="12" style="height: 500px">
-        <div id="line" style="background-color: #fff" />
-      </el-col>
-      <el-col :span="12" style="height: 500px">
-        <chart width="100%" height="100%"/>
-      </el-col>
-      <el-col :span="12" style="height: 500px">
-        <g2-line />
-      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { Line, Gauge, MeterGauge, FanGauge } from '@antv/g2plot'
-import { getLineData, getOverviewData } from '@/api/overview/overview'
-import Chart from '@/components/Charts/LineMarker'
-import G2Line from '@/components/G2Plot/G2Line'
+import {
+  getDeviceTypeStatistics
+} from '@/api/equipment-management/equipment-model'
+import { Donut } from '@antv/g2plot'
 
 export default {
   name: 'Overview',
-  components: {
-    Chart,
-    G2Line
-  },
+  components: {},
   data() {
     return {
-      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-      line: null,
-      timer: 0,
-      count: 0,
-      lineData: [],
-      gaugePlot: null,
-      overview: {
-        temperature: null,
-        pressure: null,
-        power: null
-      }
+      deviceTypeList: []
     }
   },
+  created() {
+    getDeviceTypeStatistics()
+      .then(res => {
+        this.deviceTypeList = res.data
+        this.deviceTypeList.forEach(item => {
+          const data = []
+          data.push({ type: '离线', value: item.instanceOfflineCount })
+          data.push({ type: '在线', value: item.instanceOnlineCount })
+          this.$nextTick()
+            .then(_ => {
+              const el = 'donut' + item.id
+              const donutPlot = new Donut(document.getElementById(el), {
+                forceFit: true,
+                title: {
+                  visible: true,
+                  text: item.name
+                },
+                radius: 0.9,
+                padding: 'auto',
+                data,
+                angleField: 'value',
+                colorField: 'type',
+                statistic: {
+                  visible: true
+                }
+              })
+              donutPlot.render()
+            })
+        })
+      })
+      .catch(err => {
+        this.$message.error(err.message)
+      })
+  },
   mounted() {
-    this.line = new Line(document.getElementById('line'), {
-      data: this.lineData,
-      title: {
-        visible: true,
-        text: '折线图'
-      },
-      description: {
-        visible: true,
-        text: '用平滑的曲线代替折线'
-      },
-      xField: 'time',
-      yField: 'value',
-      xAxis: {
-        type: 'time',
-        mask: 'HH:mm:ss'
-      }
-    })
-    // this.timer = setInterval(() => {
-    //   this.count++
-    //   this.updateData()
-    // }, 1000)
-    this.line.render()
-    this.gaugePlot = new Gauge(document.getElementById('gaugePlot'), {
-      value: 64,
-      min: 0,
-      max: 100,
-      range: [0, 25, 50, 75, 100],
-      height: 200,
-      color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3']
-    })
-    this.gaugePlot.render()
-    const meterGaugePlot = new MeterGauge(document.getElementById('meterGaugePlot'), {
-      value: 64,
-      min: 0,
-      max: 100,
-      height: 200,
-      range: [0, 25, 50, 75, 100],
-      forceFit: true,
-      color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3']
-    })
-    meterGaugePlot.render()
-    const fanGaugePlot = new FanGauge(document.getElementById('fanGaugePlot'), {
-      value: 34,
-      min: 0,
-      max: 100,
-      height: 200,
-      range: [0, 70],
-      format: (v) => {
-        return v + '%'
-      },
-      color: ['l(0) 0:#b0d0ff 1:#5f92f9']
-    })
-    fanGaugePlot.render()
   },
   beforeDestroy() {
-    clearInterval(this.timer)
   },
   methods: {
-    updateData() {
-      getLineData()
-        .then(res => this.line.changeData(res.data))
-        .catch(err => console.error(err))
-      getOverviewData()
-        .then(res => this.updateGaugePlot(res))
-        .catch(err => console.error(err))
-    },
-    updateGaugePlot(res) {
-      const { temperature } = res.data
-      this.overview.temperature = temperature
-      this.gaugePlot.updateConfig({
-        value: temperature
-      })
-      this.gaugePlot.render()
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
   .overview{
-    .row-one{
-      margin-bottom: 20px;
-      .number{
-        font-size: 30px;
-      }
-      .content{
-        height: 200px;
-      }
-      .el-divider{
-        margin-top: 12px;
-      }
-    }
   }
 </style>