湖里大屏(数字工地)：AI分析联调

src/views/projectAdmin/jlw/digitalSite/index.vue

@@ -77,8 +77,6 @@ export default {
       ufaceList: {}, // 人脸闸机列表
       uface: [],
       ufaceInCount: 0, //人脸闸机今日进场人数
-      dangerAlarmTypeList: [], // 预警类型列表
-      totalDangerAlarmType: 0,
       totalTowerDev: 0, //塔吊数量
       totalDangerTowerDev: 0, // 塔吊报警数量
       totalLifterDev: 0, //升降机数量
@@ -205,15 +203,6 @@ export default {
       let data2 = {
         sn: this.$store.state.projectSn
       }
-      // AI分析
-      getAITypeStatistics(data2).then(res => {
-        if (res.code === 200) {
-          let { result } = res
-          console.log(result)
-          this.dangerAlarmTypeList = result.alarmList
-          this.totalDangerAlarmType = result.totalAlarmNum
-        }
-      })
     }
   }
 }

src/views/projectAdmin/jlw/digitalSite/leftCenter.vue

@@ -1,10 +1,16 @@
 <template>
   <Card :title="title">
-    <JNestedRingChart :title="{ text: 652, subTitle: '本周总任务' }" :series="series" />
+    <!-- <JNestedRingChart :title="{ text: 652, subTitle: '本周总任务' }" :series="series" /> -->
+
+    <div class="air">
+      <div class="pieAnalyse2" ref="pieAnalyse" style="width: 100%; height: 60%"></div>
+      <img class="image" src="~@/assets/images/longguang/cutimage/AI_empty.png" v-if="!aiWarning.total" />
+    </div>
   </Card>
 </template>
 
 <script>
+import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
 import Card from '../components/Card.vue'
 import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 export default {
@@ -15,30 +21,133 @@ export default {
       default: ''
     }
   },
+  mounted() {
+    this.getAiWarningInfo()
+  },
   data() {
     return {
-      series: [
-        {
-          color: ['#3CABFD', '#F43A8B', '#F294C6', '#56EC6F', '#786FF0', '#6EE4EE'],
-          data: [
-            { value: 45, name: '未戴安全帽' },
-            { value: 5, name: '危险区域闯入' },
-            { value: 15, name: '人员聚集报警' },
-            { value: 10, name: '未穿反光衣' },
-            { value: 45, name: '明火监测报警' },
-            { value: 45, name: '烟雾监测报警' }
-          ]
-        },
-        {
-          roseType: 'area',
-          radius: ['58%', '54%'],
-          color: ['#0B1B35', '#244D8F'],
-          data: [30, 40, 30, 40]
+      // series: [
+      //   {
+      //     color: ['#3CABFD', '#F43A8B', '#F294C6', '#56EC6F', '#786FF0', '#6EE4EE'],
+      //     data: [
+      //       { value: 45, name: '未戴安全帽' },
+      //       { value: 5, name: '危险区域闯入' },
+      //       { value: 15, name: '人员聚集报警' },
+      //       { value: 10, name: '未穿反光衣' },
+      //       { value: 45, name: '明火监测报警' },
+      //       { value: 45, name: '烟雾监测报警' }
+      //     ]
+      //   },
+      //   {
+      //     roseType: 'area',
+      //     radius: ['58%', '54%'],
+      //     color: ['#0B1B35', '#244D8F'],
+      //     data: [30, 40, 30, 40]
+      //   }
+      // ]
+      aiWarning: {
+        total: 0,
+        list: []
+      }
+    }
+  },
+  methods: {
+    getAiWarningInfo() {
+      getAITypeStatistics({ sn: this.$store.state.projectSn }).then(res => {
+        if (res.code === 200) {
+          const data = res.result || {}
+          const { alarmList, totalAlarmNum } = data
+
+          this.$set(this.aiWarning, 'total', totalAlarmNum)
+          this.$set(this.aiWarning, 'list', alarmList)
         }
-      ]
+      })
+    },
+    // AI分析
+    pieAnalyse() {
+      console.log(this.$refs.pieAnalyse)
+      let pieAnalyse = echarts.init(this.$refs.pieAnalyse, 'dark')
+      let total = this.totalDangerAlarmType
+      let dataArray = this.dangerAlarmTypeList.map(x => {
+        return {
+          value: x.alarmNum,
+          name: x.alarmTypeName
+        }
+      })
+      console.log(dataArray)
+      pieAnalyse.setOption({
+        color: ['#49B6A0', '#C16C28', '#F4A968', '#4378D8', '#D94916', '#9FD6F4', '#24A79A', '#786FF0'],
+        animation: false,
+        legend: {
+          show: true,
+          orient: 'vertical',
+          icon: 'circle',
+          itemWidth: 5,
+          itemHeight: 5,
+          right: 60,
+          itemGap: 20,
+          formatter: function(params) {
+            var tagvalue
+            for (var i = 0; i < dataArray.length; i++) {
+              if (dataArray[i].name === params) {
+                tagvalue = dataArray[i].value ? dataArray[i].value : '0'
+              }
+            }
+            return `${params}    ${tagvalue}`
+          }
+        },
+        tooltip: {
+          show: true
+        },
+        backgroundColor: 'rgba(3,6,9,0)',
+        series: [
+          {
+            // name: '总数',
+            type: 'pie',
+            center: ['25%', '50%'],
+            radius: ['70%', '95%'],
+            label: {
+              normal: {
+                show: true,
+                position: 'center',
+                color: 'white',
+                formatter: '{total|' + total + '}' + '\n\n' + '{active|预警总数}',
+                rich: {
+                  total: {
+                    fontSize: 17
+                  },
+                  active: {
+                    fontSize: 14,
+                    itemHeight: 15,
+                    itemWidth: 50,
+                    color: 'rgba(254,254,254,0.3)'
+                  }
+                }
+              }
+            },
+            data: dataArray
+          }
+        ]
+      })
     }
   }
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.air {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .pieAnalyse2 {
+    position: absolute;
+    top: 20%;
+    left: 4%;
+  }
+  .image {
+    position: absolute;
+    top: 15%;
+    left: 30%;
+  }
+}
+</style>