Merge branch 'dev-jack' into shenzhen-dev

src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/components/DeviceCard.vue

@@ -50,6 +50,7 @@ export default {
 
 <style lang="less" scoped>
 .h-device-card {
+  position: relative;
   width: 100%;
   height: 100%;
   .counts {

src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue

@@ -1,42 +1,42 @@
 <template>
-<!-- 人员概览 -->
+  <Card :title="title">
-<div class="container">
+    <JProblemChart
-    <div class="titleTxt">{{ title }}</div>
+      :title="{ text: 654, subTitle: '本周总任务', y: '35%' }"
-
+      :color="['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']"
-</div>
+      :data="data"
+      :centerPie="centerPie"
+    />
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
+import JProblemChart from '../jChart/pie/JProblemChart.vue'
 export default {
-
+  components: { Card, JProblemChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
   data() {
     return {
-
+      data: [
-    };
+        { value: 45, name: '未开始' },
-  },
+        { value: 5, name: '未开始延期' },
-
+        { value: 15, name: '进行中' },
-
+        { value: 10, name: '执行中延期' },
+        { value: 45, name: '完成' }
+      ],
+      centerPie: {
+        color: ['#0B1B35', '#244D8F'],
+        radius: ['10%', '12%'],
+        data: [30, 40, 30, 40]
+      }
+    }
+  }
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-

src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftTop.vue

@@ -1,6 +1,10 @@
 <template>
   <Card :title="title">
     <DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
+      <div class="legend">
+        <div class="item">报警数</div>
+        <div class="item">离线</div>
+      </div>
       <JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
     </DeviceCard>
   </Card>
@@ -42,4 +46,30 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.legend {
+  position: absolute;
+  top: 76px;
+  left: 10px;
+  display: flex;
+  .item {
+    margin-right: 36px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    &::before {
+      margin-right: 8px;
+      content: '';
+      width: 16px;
+      height: 6px;
+      border-radius: 2px;
+    }
+    &:first-child:before {
+      background-color: #3cabfd;
+    }
+    &:last-child:before {
+      background-color: #ff6c7f;
+    }
+  }
+}
+</style>

src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/rightTop.vue

@@ -1,6 +1,10 @@
 <template>
   <Card :title="title">
     <DeviceCard :leftCount="{ value: 22, label: '塔吊设备数' }" :rightCount="{ value: 65, label: '今日报警数' }">
+      <div class="legend">
+        <div class="item">报警数</div>
+        <div class="item">离线</div>
+      </div>
       <JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
     </DeviceCard>
   </Card>
@@ -42,4 +46,30 @@ export default {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.legend {
+  position: absolute;
+  top: 76px;
+  left: 10px;
+  display: flex;
+  .item {
+    margin-right: 36px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    &::before {
+      margin-right: 8px;
+      content: '';
+      width: 16px;
+      height: 6px;
+      border-radius: 2px;
+    }
+    &:first-child:before {
+      background-color: #3cabfd;
+    }
+    &:last-child:before {
+      background-color: #ff6c7f;
+    }
+  }
+}
+</style>

src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue

@@ -1,10 +1,10 @@
 <template>
-<!-- 质量问题 -->
+  <!-- 质量问题 -->
   <div class="myChart" ref="myChart" />
 </template>
 
 <script>
-import echarts from "echarts4";
+import echarts from 'echarts4'
 export default {
   props: {
     title: {
@@ -22,24 +22,22 @@ export default {
     },
     color: {
       type: Array,
-      default: () => ['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']
+      default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
-    },
+    }
   },
   data() {
-    return {
+    return {}
-
-    };
   },
-  mounted(){
+  mounted() {
-    this.initMyChart();
+    this.initMyChart()
   },
-  methods:{
+  methods: {
     initMyChart() {
-      const myChart = echarts.init(this.$refs.myChart);
+      const myChart = echarts.init(this.$refs.myChart)
       const option = {
         title: {
-          x: this.title.x || '29%' ,
+          x: this.title.x || '29%',
-          y: this.title.y || '43%' ,
+          y: this.title.y || '43%',
           show: true,
           text: this.title.text,
           subtext: this.title.subTitle,
@@ -47,16 +45,16 @@ export default {
           textStyle: {
             fontSize: 20,
             fontWeight: 'normal',
-            color: '#fff',
+            color: '#fff'
           },
           subtextStyle: {
             fontSize: 16,
             fontWeight: 'normal',
             color: '#fff'
-          },
+          }
         },
         tooltip: {
-          trigger: "item",
+          trigger: 'item'
         },
         legend: {
           type: 'scroll',
@@ -69,48 +67,46 @@ export default {
           icon: 'circle',
           textStyle: {
             color: '#ffffff',
-            fontSize: 14,
+            fontSize: 14
           }
         },
         color: this.color,
         series: [
           {
-            type: "pie",
+            type: 'pie',
-            radius: ["50%", "65%"],
+            radius: ['50%', '65%'],
             center: ['30%', '50%'],
             avoidLabelOverlap: true,
             label: {
               show: false,
-              position: "center",
+              position: 'center'
             },
             emphasis: {
               label: {
                 show: false,
-                fontSize: "20",
+                fontSize: '20',
                 color: '#fff',
-                fontWeight: "bold",
+                fontWeight: 'bold'
               },
-              scaleSize: 12,
+              scaleSize: 12
             },
             labelLine: {
-              show: false,
+              show: false
-            },
-            data: this.data,
-          },
-        ],
-      };
-
-      myChart.setOption(option);
-    },
             },
+            data: this.data
+          }
+        ]
+      }
 
+      myChart.setOption(option)
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-  .myChart {
+.myChart {
   width: 100%;
   height: 100%;
-  }
+}
-
 </style>