+ 大屏网接口对接

ems-ui-cloud/src/api/device/device.js

@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-import area from '@/views/basecfg/area/index.vue'
 
 // 查询能源设备列表
 export function listDevice(query) {
@@ -26,6 +25,7 @@ export function devTreeByFacs(areaCode, deviceCategory) {
     method: 'get'
   })
 }
+
 //设备（计量绑定）
 export function getTreeByFacs(areaCode, deviceCategory) {
   return request({
@@ -71,50 +71,73 @@ export function delDevice(id) {
     method: 'delete'
   })
 }
+
 // 查询设备
 export function getByCondition(params) {
   return request({
-    url: '/ems/device/getByCondition' ,
+    url: '/ems/device/getByCondition',
     method: 'get',
     params
   })
 }
+
 // 查询设备信息
 export function getDeviceDetail(params) {
   return request({
-    url: '/ems/device/getDetail' ,
+    url: '/ems/device/getDetail',
     method: 'get',
     params
   })
 }
+
 //查询上游设备
 export function getByFlowRel(params) {
   return request({
-    url: '/ems/device/getByFlowRel' ,
+    url: '/ems/device/getByFlowRel',
     method: 'get',
     params
   })
 }
+
 // 查询设备属性信息
 export function getObjAttr(params) {
   return request({
-    url: '/ems/object/attr/getObjAttr' ,
+    url: '/ems/object/attr/getObjAttr',
     method: 'get',
     params
   })
 }
+
 // 查询设备最新1条指标
 export function getNewIndex(params) {
   return request({
-    url: '/ems/object/loadIndex/getNewIndex' ,
+    url: '/ems/object/loadIndex/getNewIndex',
     method: 'get',
     params
   })
 }
+
 //查询设备下的设备部件
 export function listByDevice(params) {
   return request({
-    url: '/ems/device/component/listByDevice' ,
+    url: '/ems/device/component/listByDevice',
+    method: 'get',
+    params
+  })
+}
+
+
+export function listDeviceType(params) {
+  return request({
+    url: '/ems/device/type/online',
+    method: 'get',
+    params
+  })
+}
+
+export function listDeviceStatus(params) {
+  return request({
+    url: '/ems/device/total/status',
     method: 'get',
     params
   })

ems-ui-cloud/src/views/largeScreen/device/left.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <CusModule title="设备类型统计">
-      <Pie3d :pieData="pieData" />
+      <Pie3d :pieData="pieData"/>
     </CusModule>
     <CusModule class="module-top" title="设备状态分析">
       <div class="dev-top">
@@ -29,13 +29,13 @@
     <CusModule class="module-top" title="处置状态">
       <div class="dev-flex">
         <div class="dev-item" v-for="item in deal" :key="item.name">
-          <div class="percent">{{item.percent}} %</div>
+          <div class="percent">{{ item.percent }} %</div>
           <div class="details">
             <div class="alarm">
-              {{item.name}}：<span class="alarm-count">{{item.value}}次</span>
+              {{ item.name }}：<span class="alarm-count">{{ item.value }}次</span>
             </div>
             <div>
-              <span class="value">{{item.dealValue}}</span><span class="unit">次</span>
+              <span class="value">{{ item.dealValue }}</span><span class="unit">次</span>
             </div>
             <div>已处理</div>
           </div>
@@ -49,31 +49,31 @@ import CusModule from '../components/CusModule.vue';
 import BaseChart from '@/components/BaseChart/index.vue'
 import Pie3d from './pie3d.vue'
 import {mapState} from 'vuex';
+import {listDeviceStatus, listDeviceType} from "@/api/device/device";
+
 export default {
   name: 'DeviceLeft',
-  data () {
+  data() {
     return {
       pieData: [],
-      deviceTotal:1220,
+      deviceTotal: 0,
       equipList: [
         {
           name: "在线设备",
           value: 530,
-          pct: 50,
-          unit: "件",
-          image: require("@/assets/images/device/l2-item1_bg.png"),
-        },
-        {
-          name: "故障设备",
-          value: 12,
-          pct: 30,
           unit: "次",
-          image: require("@/assets/images/device/l2-item2_bg.png"),
+          image: require("@/assets/images/device/l2-item1_bg.png"),
         },
+        // {
+        //   name: "故障设备",
+        //   value: 12,
+        //   pct: 30,
+        //   unit: "次",
+        //   image: require("@/assets/images/device/l2-item2_bg.png"),
+        // },
         {
           name: "离线设备",
           value: 6,
-          pct: 20,
           unit: "次",
           image: require("@/assets/images/device/l2-item3_bg.png"),
         },
@@ -83,13 +83,13 @@ export default {
           name: '今日报警',
           percent: 70,
           value: 10,
-          dealValue:7
+          dealValue: 7
         },
         {
           name: '本月报警',
           percent: 80,
           value: 300,
-          dealValue:240
+          dealValue: 240
         },
       ]
     };
@@ -103,16 +103,16 @@ export default {
     ...mapState('userState', ['areaType']),
   },
   watch: {
-    areaType () {
+    areaType() {
       this.getDeviceData()
     }
   },
-  mounted () {
+  mounted() {
     this.getDeviceData()
   },
   methods: {
     //字符串转数组 总数
-    countFormat (val, total = 0) {
+    countFormat(val, total = 0) {
       let str = String(val);
       let numArr = str.split("");
       if (total === 0) return numArr;
@@ -130,24 +130,38 @@ export default {
         return arr;
       }
     },
-    getDeviceData () {
-      const equip = ['空调', '照明', '电梯', '其他']
-      this.pieData = equip.map(item => ({
-        name: item,
-        value: Math.floor(Math.random() * 100)
-      }))
-      this.deviceTotal = this.areaType=='1'?600:this.areaType=='2'?620:1220
-      this.equipList = this.equipList.map((item,index) => ({
+    getDeviceData() {
+      this.cntListDeviceType()
+      this.cntListDeviceStatus()
+      this.deal = this.deal.map((item, index) => ({
         ...item,
-        value: index === 0 ? Math.floor(Math.random() * 100 + 500) : Math.floor(Math.random() * 100),
-        pct:Math.floor(Math.random() * 100)
+        percent: Math.floor(Math.random() * 100),
+        value: Math.floor(Math.random() * 100 + (index + 1) * 100),
+        dealValue: Math.floor(Math.random() * 100 + index * 100)
       }))
-      this.deal = this.deal.map((item,index) => ({
-        ...item,
-        percent:Math.floor(Math.random()*100),
-        value:Math.floor(Math.random()*100+(index+1)*100),
-        dealValue:Math.floor(Math.random()*100+index*100)
+    },
+    async cntListDeviceType() {
+      const {data} = await listDeviceType({
+        areaCode: this.areaType
+      })
+      this.pieData = data.map(item => ({
+        name: item.typeName || '其他',
+        value: item.total
       }))
+    },
+    async cntListDeviceStatus() {
+      const {data} = await listDeviceStatus({
+        areaCode: this.areaType
+      })
+      const {
+        total,
+        onlineCount
+      } = data
+      const [online, offline] = this.equipList
+      this.deviceTotal = total
+      const onlinePct = (onlineCount / total * 100).toFixed(1)
+      online.pct = onlinePct
+      offline.pct = (100 - onlinePct).toFixed(1)
     }
   }
 }
@@ -183,7 +197,7 @@ export default {
 
 .dev-flx {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   margin-top: 4px;
 
   .dev-itm {

ems-ui-cloud/src/views/largeScreen/device/pie3d.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script>
-const color = ['#005aff', '#f8b551', '#EF6666', '#3FA7FD']
+const color = ['#005aff', '#f8b551', '#EF6666', '#2fe30f','#fefefe']
 import * as echarts from 'echarts';
 import 'echarts-gl';
+
 export default {
   name: 'chart',
   props: ['pieData'],
-  data () {
+  data() {
     return {
       statusChart: null,
       option: {}
@@ -19,7 +20,7 @@ export default {
   },
   watch: {
     pieData: {
-      handler (val) {
+      handler(val) {
         if (val.length) {
           this.$nextTick(() => {
             this.initChart()
@@ -30,8 +31,9 @@ export default {
       immediate: true
     }
   },
-  mounted () {},
-  beforeDestroy () {
+  mounted() {
+  },
+  beforeDestroy() {
     if (!this.statusChart) {
       return
     }
@@ -41,19 +43,19 @@ export default {
   },
   methods: {
     // 图表初始化
-    initChart () {
+    initChart() {
       if (!this.statusChart) {
         this.statusChart = echarts.init(this.$refs.chart)
       }
       const pieData = this.pieData.map((item, index) => ({
         ...item,
         itemStyle: {
-          color: color[index]
+          color: color[index % color.length]
         },
         label: {
           normal: {
             show: true,
-            color: color[index],
+            color: color[index % color.length],
             formatter: [
               '{b|{b}}',
               '{c|{c}}{b|件}',
@@ -118,7 +120,7 @@ export default {
     },
     // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
     // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
-    bindListen (myChart, optionName = 'option') {
+    bindListen(myChart, optionName = 'option') {
       let selectedIndex = ''
       let hoveredIndex = ''
       // 监听点击事件，实现选中效果（单选）
@@ -126,36 +128,36 @@ export default {
         // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
         const isSelected = !this[optionName].series[hoveredIndex].pieStatus.isSelected
         const isHovered =
-          this[optionName].series[params.seriesIndex].pieStatus.hovered
+            this[optionName].series[params.seriesIndex].pieStatus.hovered
         const k = this[optionName].series[params.seriesIndex].pieStatus.k
         const startRatio =
-          this[optionName].series[params.seriesIndex].pieData.startRatio
+            this[optionName].series[params.seriesIndex].pieData.startRatio
         const endRatio =
-          this[optionName].series[params.seriesIndex].pieData.endRatio
+            this[optionName].series[params.seriesIndex].pieData.endRatio
         // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
         if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
           this[optionName].series[
-            selectedIndex
-          ].parametricEquation = this.getParametricEquation(
-            this[optionName].series[selectedIndex].pieData.startRatio,
-            this[optionName].series[selectedIndex].pieData.endRatio,
-            false,
-            false,
-            k,
-            this[optionName].series[selectedIndex].pieData.value
+              selectedIndex
+              ].parametricEquation = this.getParametricEquation(
+              this[optionName].series[selectedIndex].pieData.startRatio,
+              this[optionName].series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              this[optionName].series[selectedIndex].pieData.value
           )
           this[optionName].series[selectedIndex].pieStatus.selected = false
         }
         // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
         this[optionName].series[
-          params.seriesIndex
-        ].parametricEquation = this.getParametricEquation(
-          startRatio,
-          endRatio,
-          isSelected,
-          isHovered,
-          k,
-          this[optionName].series[params.seriesIndex].pieData.value
+            params.seriesIndex
+            ].parametricEquation = this.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            this[optionName].series[params.seriesIndex].pieData.value
         )
         this[optionName].series[params.seriesIndex].pieStatus.selected = isSelected
         // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
@@ -185,14 +187,14 @@ export default {
             k = this[optionName].series[hoveredIndex].pieStatus.k
             // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
             this[optionName].series[
-              hoveredIndex
-            ].parametricEquation = this.getParametricEquation(
-              startRatio,
-              endRatio,
-              isSelected,
-              isHovered,
-              k,
-              this[optionName].series[hoveredIndex].pieData.value
+                hoveredIndex
+                ].parametricEquation = this.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
             )
             this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
             // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
@@ -200,30 +202,30 @@ export default {
           }
           // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
           if (
-            params.seriesName !== 'mouseoutSeries' &&
-            params.seriesName !== 'pie2d'
+              params.seriesName !== 'mouseoutSeries' &&
+              params.seriesName !== 'pie2d'
           ) {
             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
             isSelected = this[optionName].series[hoveredIndex].pieStatus.isSelected
             isHovered = true
             startRatio =
-              this[optionName].series[params.seriesIndex].pieData.startRatio
+                this[optionName].series[params.seriesIndex].pieData.startRatio
             endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
             k = this[optionName].series[params.seriesIndex].pieStatus.k
             // 对当前点击的扇形，执行高亮操作（对 option 更新）
             this[optionName].series[
-              params.seriesIndex
-            ].parametricEquation = this.getParametricEquation(
-              startRatio,
-              endRatio,
-              isSelected,
-              isHovered,
-              k,
-              this[optionName].series[params.seriesIndex].pieData.value + 60
+                params.seriesIndex
+                ].parametricEquation = this.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
             )
             this[optionName].series[
-              params.seriesIndex
-            ].pieStatus.hovered = isHovered
+                params.seriesIndex
+                ].pieStatus.hovered = isHovered
             // 记录上次高亮的扇形对应的系列号 seriesIndex
             hoveredIndex = params.seriesIndex
           }
@@ -233,19 +235,19 @@ export default {
       })
     },
     // 自适应宽高
-    changeSize () {
+    changeSize() {
       this.statusChart.resize()
     },
     /**
-   * 绘制3d图
-   * @param pieData 总数据
-   * @param internalDiameterRatio:透明的空心占比
-   * @param distance 视角到主体的距离
-   * @param alpha 旋转角度
-   * @param pieHeight 立体的高度
-   * @param opacity 饼或者环的透明度
-   */
-    getPie3D (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
+     * 绘制3d图
+     * @param pieData 总数据
+     * @param internalDiameterRatio:透明的空心占比
+     * @param distance 视角到主体的距离
+     * @param alpha 旋转角度
+     * @param pieHeight 立体的高度
+     * @param opacity 饼或者环的透明度
+     */
+    getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
       const series = []
       let sumValue = 0
       let startValue = 0
@@ -261,9 +263,9 @@ export default {
         sumValue += pieData[i].value
         const seriesItem = {
           name:
-            typeof pieData[i].name === 'undefined'
-              ? `series${i}`
-              : pieData[i].name,
+              typeof pieData[i].name === 'undefined'
+                  ? `series${i}`
+                  : pieData[i].name,
           type: 'surface',
           parametric: true,
           wireframe: {
@@ -280,13 +282,13 @@ export default {
         if (typeof pieData[i].itemStyle !== 'undefined') {
           const itemStyle = {}
           itemStyle.color =
-            typeof pieData[i].itemStyle.color !== 'undefined'
-              ? pieData[i].itemStyle.color
-              : opacity
+              typeof pieData[i].itemStyle.color !== 'undefined'
+                  ? pieData[i].itemStyle.color
+                  : opacity
           itemStyle.opacity =
-            typeof pieData[i].itemStyle.opacity !== 'undefined'
-              ? pieData[i].itemStyle.opacity
-              : opacity
+              typeof pieData[i].itemStyle.opacity !== 'undefined'
+                  ? pieData[i].itemStyle.opacity
+                  : opacity
           seriesItem.itemStyle = itemStyle
         }
         series.push(seriesItem)
@@ -301,12 +303,12 @@ export default {
         series[i].pieData.startRatio = startValue / sumValue
         series[i].pieData.endRatio = endValue / sumValue
         series[i].parametricEquation = this.getParametricEquation(
-          series[i].pieData.startRatio,
-          series[i].pieData.endRatio,
-          false,
-          false,
-          k,
-          series[i].pieData.value
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
         )
         startValue = endValue
         const bfb = this.fomatFloat(series[i].pieData.value / sumValue, 4)
@@ -383,7 +385,7 @@ export default {
     /**
      * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
      */
-    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
       // 计算
       const midRatio = (startRatio + endRatio) / 2
       const startRadian = startRatio * Math.PI * 2
@@ -415,13 +417,13 @@ export default {
         x: function (u, v) {
           if (u < startRadian) {
             return (
-              offsetX +
-              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
             )
           }
           if (u > endRadian) {
             return (
-              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
             )
           }
           return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
@@ -429,13 +431,13 @@ export default {
         y: function (u, v) {
           if (u < startRadian) {
             return (
-              offsetY +
-              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
             )
           }
           if (u > endRadian) {
             return (
-              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
             )
           }
           return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
@@ -455,7 +457,7 @@ export default {
     /**
      * 获取3d丙图的最高扇区的高度
      */
-    getHeight3D (series, height) {
+    getHeight3D(series, height) {
       series.sort((a, b) => {
         return b.pieData.value - a.pieData.value
       })
@@ -465,7 +467,7 @@ export default {
     /**
      * 格式化浮点数
      */
-    fomatFloat (num, n) {
+    fomatFloat(num, n) {
       let f = parseFloat(num)
       if (isNaN(f)) {
         return false