From 43dce609c5858099cf8670bd9288213a00d69c64 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Sat, 30 Jul 2022 18:29:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F(=E9=A6=96=E9=A1=B5=E6=A6=82?=
 =?UTF-8?q?=E5=86=B5)=EF=BC=9A=E6=9B=B4=E6=94=B9=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataBoard/homePage/smartDevices.vue       | 365 +++---------------
 src/views/projectAdmin/dataBoard/index.vue    |  87 ++---
 2 files changed, 83 insertions(+), 369 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue b/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue
index a33db8c7..2ebd4378 100644
--- a/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue
+++ b/src/views/projectAdmin/dataBoard/homePage/smartDevices.vue
@@ -1,327 +1,52 @@
-
 <template>
-  <div ref="device1" class="device1"></div>
+  <div class="smartDevices">
+    <div class="title">
+      {{ $t('message.companyDiagram.smartDev') }}
+    </div>
+    <div class="content">
+      <slot>
+        <vue-scroll :ops="ops">
+          <devNumChart
+            v-for="(device, index) in devices"
+            :key="index"
+            style="width: 50%; height: 100%; float: left"
+            :title="$t('message.' + device.label)"
+            :num="device.value"
+            :totalDevNum="totalCount"
+          ></devNumChart>
+        </vue-scroll>
+      </slot>
+    </div>
+  </div>
 </template>
+
 <script>
-import echarts from 'echarts4';;
+import devNumChart from '@/components/chart/devNumChart'
 export default {
-  props: ["title", "num", "totalDevNum"],
-  data() {
-    return {
-      timer: null,
-      option:null,
-      chart:Object
-    };
-  },
-  watch: {
-    //监听value的变化，进行相应的操作即可
-    num: function (a, b) {
-      console.log('设备数量',a)
-      this.option.title.text="{a|" + this.num + "}\n{c| " + this.title + " }"
-      this.option.series[6].data[0].value=this.num
-      this.option.series[6].data[1].value=this.totalDevNum - this.num
-      this.chart.setOption(this.option, true);
-    },
-  },
-  mounted() {
-    this.createdEchart();
-  },
-  beforeDestroy(){
-      clearInterval(this.timer)
-  },
-  methods: {
-    createdEchart() {
-      let that = this;
-      //设备统计 -- 塔吊设备数
-      let tower = echarts.init(this.$refs.device1);
-      this.chart=tower
-      tower.clear();
-      let angle = 0; //角度，用来做简单的动画效果的
-      //   let totalDevNum = this.statisticsCount.devcount.ufaceDevNum+
-      //   this.statisticsCount.devcount.videoNum+
-      //   +this.statisticsCount.devcount.environmentDevNum;
-
-      this.option = {
-        title: {
-          text: "{a|" + this.num + "}\n{c| " + this.title + " }",
-          x: "center",
-          y: "center",
-          textStyle: {
-            rich: {
-              a: {
-                fontSize: 24,
-                color: "#29EEF3",
-              },
-
-              c: {
-                fontSize: 12,
-                lineHeight: 20,
-                color: "rgba(255, 255, 254, 0.8)",
-                // padding: [5,0]
-              },
-            },
-          },
-        },
-
-        series: [
-          {
-            name: "ring5",
-            type: "custom",
-            coordinateSystem: "none",
-            renderItem: function (params, api) {
-              return {
-                type: "arc",
-                shape: {
-                  cx: api.getWidth() / 2,
-                  cy: api.getHeight() / 2,
-                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
-                  startAngle: ((0 + angle) * Math.PI) / 180,
-                  endAngle: ((90 + angle) * Math.PI) / 180,
-                },
-                style: {
-                  stroke: "#0CD3DB",
-                  fill: "transparent",
-                  lineWidth: 1.5,
-                },
-                silent: true,
-              };
-            },
-            data: [0],
-          },
-          {
-            name: "ring5",
-            type: "custom",
-            coordinateSystem: "none",
-            renderItem: function (params, api) {
-              return {
-                type: "arc",
-                shape: {
-                  cx: api.getWidth() / 2,
-                  cy: api.getHeight() / 2,
-                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
-                  startAngle: ((180 + angle) * Math.PI) / 180,
-                  endAngle: ((270 + angle) * Math.PI) / 180,
-                },
-                style: {
-                  stroke: "#0CC1CD",
-                  fill: "transparent",
-                  lineWidth: 1.5,
-                },
-                silent: true,
-              };
-            },
-            data: [0],
-          },
-          {
-            name: "ring5",
-            type: "custom",
-            coordinateSystem: "none",
-            renderItem: function (params, api) {
-              return {
-                type: "arc",
-                shape: {
-                  cx: api.getWidth() / 2,
-                  cy: api.getHeight() / 2,
-                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
-                  startAngle: ((270 + -angle) * Math.PI) / 180,
-                  endAngle: ((40 + -angle) * Math.PI) / 180,
-                },
-                style: {
-                  stroke: "#0CC1CD",
-                  fill: "transparent",
-                  lineWidth: 1.5,
-                },
-                silent: true,
-              };
-            },
-            data: [0],
-          },
-          {
-            name: "ring5",
-            type: "custom",
-            coordinateSystem: "none",
-            renderItem: function (params, api) {
-              return {
-                type: "arc",
-                shape: {
-                  cx: api.getWidth() / 2,
-                  cy: api.getHeight() / 2,
-                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
-                  startAngle: ((90 + -angle) * Math.PI) / 180,
-                  endAngle: ((220 + -angle) * Math.PI) / 180,
-                },
-                style: {
-                  stroke: "#0CC1CD",
-                  fill: "transparent",
-                  lineWidth: 1.5,
-                },
-                silent: true,
-              };
-            },
-            data: [0],
-          },
-          {
-            name: "ring5",
-            type: "custom",
-            coordinateSystem: "none",
-            renderItem: function (params, api) {
-              let x0 = api.getWidth() / 2;
-              let y0 = api.getHeight() / 2;
-              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
-              let point = that.getCirlPoint(x0, y0, r, 90 + -angle);
-              return {
-                type: "circle",
-                shape: {
-                  cx: point.x,
-                  cy: point.y,
-                  r: 4,
-                },
-                style: {
-                  stroke: "#0CC1CD", //粉
-                  fill: "#0CD3DB",
-                },
-                silent: true,
-              };
-            },
-            data: [0],
-          },
-          {
-            name: "ring5", //绿点
-            type: "custom",
-            coordinateSystem: "none",
-            renderItem: function (params, api) {
-              let x0 = api.getWidth() / 2;
-              let y0 = api.getHeight() / 2;
-              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
-              let point = that.getCirlPoint(x0, y0, r, 270 + -angle);
-              return {
-                type: "circle",
-                shape: {
-                  cx: point.x,
-                  cy: point.y,
-                  r: 4,
-                },
-                style: {
-                  stroke: "#0CC1CD", //绿
-                  fill: "#0CD3DB",
-                },
-                silent: true,
-              };
-            },
-            data: [0],
-          },
-          {
-            type: "pie",
-            radius: ["72%", "58%"],
-            silent: true,
-            clockwise: true,
-            startAngle: 90,
-            z: 0,
-            zlevel: 0,
-            label: {
-              normal: {
-                position: "center",
-              },
-            },
-            data: [
-              {
-                value: this.num,
-                name: "",
-                itemStyle: {
-                  normal: {
-                    color: {
-                      // 完成的圆环的颜色
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: "#4FADFD", // 0% 处的颜色
-                        },
-                        {
-                          offset: 1,
-                          color: "#28E8FA", // 100% 处的颜色
-                        },
-                      ],
-                    },
-                  },
-                },
-              },
-              {
-                value: this.totalDevNum - this.num,
-                name: "",
-                label: {
-                  normal: {
-                    show: false,
-                  },
-                },
-                itemStyle: {
-                  normal: {
-                    color: "#173164",
-                  },
-                },
-              },
-            ],
-          },
-          //划块线
-          {
-            name: "",
-            type: "gauge",
-            radius: "72%",
-            center: ["50%", "50%"],
-            startAngle: 0,
-            endAngle: 359.9,
-            splitNumber: 8,
-            hoverAnimation: true,
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              length: 20,
-              lineStyle: {
-                width: 2,
-                color: "#061740",
-              },
-            },
-            axisLabel: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            axisLine: {
-              lineStyle: {
-                opacity: 0,
-              },
-            },
-            detail: {
-              show: false,
-            },
-            data: [
-              {
-                value: 0,
-                name: "",
-              },
-            ],
-          },
-        ],
-      };
-
-      this.timer=setInterval(() => {
-        //用setInterval做动画感觉有问题
-        angle = angle + 3;
-        tower.setOption(this.option, true);
-      }, 100);
-    },
-    getCirlPoint(x0, y0, r, angle) {
-      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
-      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
-      return {
-        x: x1,
-        y: y1,
-      };
-    },
-  },
-};
+  props: ['devices', 'totalCount', 'ops'],
+  components: { devNumChart }
+}
 </script>
-<style lang="less" scoped>
 
+<style lang="less" scoped>
+.smartDevices {
+  position: relative;
+  margin-bottom: 25px;
+  height: calc(100% - 2px);
+  width: 100%;
+  .title {
+    position: relative;
+    top: -10px;
+    font-size: 17px;
+    font-weight: bold;
+    text-align: center;
+    color: #6ce9f0;
+  }
+  .content {
+    position: relative;
+    padding: 10px 20px;
+    height: calc(100% - 20px - 24px);
+    z-index: 2;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/index.vue b/src/views/projectAdmin/dataBoard/index.vue
index 6cb4cf24..8a0d6e1f 100644
--- a/src/views/projectAdmin/dataBoard/index.vue
+++ b/src/views/projectAdmin/dataBoard/index.vue
@@ -11,43 +11,14 @@
       </div>
       <div class="blockBox">
         <!-- 智能设备 -->
-        <div class="blockTitle">
-          {{ $t('message.companyDiagram.smartDev') }}
-        </div>
-        <div class="blockContent">
+        <smartDevices :totalCount="totalDevNum" :devices="deviceData">
           <div
             v-if="COMPANY == 'longguang'"
             style="width: 100%; height: 100%"
             class="echart2"
             ref="echart2"
           ></div>
-          <vue-scroll v-else :ops="ops">
-            <smartDevices
-            style="width: 50%; height: 100%; float: left"
-              :title="$t('message.projectSummary.ufaceDevNum')"
-              :num="statisticsCount.devcount.ufaceDevNum"
-              :totalDevNum="totalDevNum"
-              ></smartDevices>
-            <smartDevices 
-            style="width: 50%; height: 100%; float: left"
-              :title="$t('message.projectSummary.environmentDevNum')"
-              :num="statisticsCount.devcount.environmentDevNum"
-              :totalDevNum="totalDevNum"
-              ></smartDevices>
-            <smartDevices 
-            style="width: 50%; height: 100%; float: left"
-              :title="$t('message.companyDiagram.videoDevNum')"
-              :num="statisticsCount.devcount.videoNum"
-              :totalDevNum="totalDevNum"
-              ></smartDevices>
-            <smartDevices 
-            style="width: 50%; height: 100%; float: left"
-              :title="$t('message.companyDiagram.towerDevNum')"
-              :num="statisticsCount.devcount.towerDevNum"
-              :totalDevNum="totalDevNum"
-              ></smartDevices>
-          </vue-scroll>
-        </div>
+        </smartDevices>
       </div>
     </div>
     <div class="center fullHeight">
@@ -301,7 +272,6 @@
         >
           <safeManage></safeManage>
           <!-- <div class="safeChart" ref="safeChart"></div> -->
-          
         </div>
       </div>
       <!--      </div>-->
@@ -328,8 +298,8 @@
             v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
             class="descBox fullHeight"
           >
-          <qualityManage></qualityManage>
-           <!-- 此处剪切了一部分 -->
+            <qualityManage></qualityManage>
+            <!-- 此处剪切了一部分 -->
           </div>
           <!-- 设备报警内容 -->
           <div class="attendance-cards2" v-else>
@@ -434,8 +404,8 @@
           v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
           class="blockContent"
         >
-        <!-- 环境监测 -->
-          <environmentWatch :show='true' :size='small'></environmentWatch>
+          <!-- 环境监测 -->
+          <environmentWatch :show="true" :size="small"></environmentWatch>
         </div>
         <div v-else class="blockContent alarmBlockContent">
           <vue-scroll>
@@ -493,17 +463,16 @@
   </div>
 </template>
 <script>
-import echarts from "echarts4";
-const echarts5 = require("echarts");
-import safeManage from "./homePage/safeManage"
-import qualityManage from "./homePage/qualityManage"
-import airQulity from "./components/airQulity"
-import smartDevices from "./homePage/smartDevices"
-import environmentWatch from "./homePage/environmentWatch.vue"
-import devNumChart from "@/components/chart/devNumChart";
-import airQulityChart from "@/components/chart/airQulityChart";
-import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
-import { getProjectDetail, editProjectInfo } from "@/assets/js/api/baseInfo.js";
+import echarts from 'echarts4'
+const echarts5 = require('echarts')
+import safeManage from './homePage/safeManage'
+import qualityManage from './homePage/qualityManage'
+import airQulity from './components/airQulity'
+import smartDevices from './homePage/smartDevices'
+import environmentWatch from './homePage/environmentWatch.vue'
+import airQulityChart from '@/components/chart/airQulityChart'
+import { getWorkerStatisticsCountApi } from '@/assets/js/api/company/project'
+import { getProjectDetail, editProjectInfo } from '@/assets/js/api/baseInfo.js'
 import {
   selectSecurityManageStatisticsApi,
   selectQualityStatisticsApi,
@@ -528,9 +497,19 @@ import ProjectInfo from './homePage/projectInfo'
 import PersonOverview from './homePage/personOverview'
 
 export default {
-  components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview ,safeManage , qualityManage ,airQulity,smartDevices ,environmentWatch},
+  components: {
+    airQulityChart,
+    ProjectInfo,
+    PersonOverview,
+    safeManage,
+    qualityManage,
+    airQulity,
+    smartDevices,
+    environmentWatch
+  },
   data() {
     return {
+      deviceData: [],
       COMPANY: '',
       ops: {
         vuescroll: {
@@ -957,13 +936,23 @@ export default {
         (res) => {
           console.log(res)
           this.statisticsCount = res.result
-          console.log('----------------',this.statisticsCount)
+          console.log('----------------', this.statisticsCount)
           this.totalDevNum =
             this.statisticsCount.devcount.ufaceDevNum +
             this.statisticsCount.devcount.videoNum +
             this.statisticsCount.devcount.environmentDevNum +
             this.statisticsCount.devcount.towerDevNum +
             this.statisticsCount.devcount.lifterDevNum
+          const device = this.statisticsCount.devcount
+          this.deviceData = [
+            { label: 'projectSummary.ufaceDevNum', value: device.ufaceDevNum },
+            {
+              label: 'projectSummary.environmentDevNum',
+              value: device.environmentDevNum
+            },
+            { label: 'companyDiagram.videoDevNum', value: device.videoNum },
+            { label: 'companyDiagram.towerDevNum', value: device.towerDevNum }
+          ]
           if (type == 1) {
             this.createdEchart2()
           }