大屏左右两侧添加东西

gassafetyprogress-web/src/components/bigWindow/leftBar.vue

@@ -53,11 +53,21 @@
         <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
       </div>
     </div>
-    <div id="myCharttwo" :style="{width: '450px', height: '250px'}"></div>
+    <div class="pieone">
+      <div id="myChartpieone" :style="{width: '225px', height: '250px'}"></div>
       <div class="titleTex">
        <span :style="{color: '#00ffff'}"> ● 已完成:{{allNum.typeOne}}</span>
        <span :style="{color: '#0099ff'}"> ● 未完成:{{allNum.typeTwo}}</span>
       </div>
+    </div>
+    <div class="pietwo">
+      <div id="myChartpietwo" :style="{width: '225px', height: '250px'}"></div>
+      <div class="titleTex">
+       <span :style="{color: '#00ffff'}"> ● 已完成:{{allNum.typeOne}}</span>
+       <span :style="{color: '#0099ff'}"> ● 未完成:{{allNum.typeTwo}}</span>
+      </div>
+    </div>
+    
     <!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> -->
       
 
@@ -190,11 +200,12 @@
       initdata(){
           // 基于准备好的dom，初始化echarts实例
           //console.log(data.renwu[0]+"=-=-=-"+data.renwu[1])
-          let myChart2 = this.$echarts.init(document.getElementById('myCharttwo'))
+          let pieone = this.$echarts.init(document.getElementById('myChartpieone'));
+          let pietwo = this.$echarts.init(document.getElementById('myChartpietwo'));
           // 绘制图表
-          myChart2.setOption({
+          pieone.setOption({
               title: {
-                  text: '任务总数量:'+(this.allNum.typeOne+this.allNum.typeTwo),
+                  text: '巡检任务完成率:'+(this.allNum.typeOne+this.allNum.typeTwo),
                   left: 'center',
                   top :20,
                   textStyle:{
@@ -212,7 +223,83 @@
               {
                 name: '任务概况',
                 type: 'pie',
-                radius: '60%',
+                radius: '55%',
+                center: ['50%','58%'],
+                data: [
+                  { 
+                    value: this.allNum.typeTwo,
+                    name: '未完成',
+                    itemStyle: { color: '#09f' }
+                },
+                  { 
+                    value: this.allNum.typeOne,
+                      name: '已完成' ,
+                    itemStyle: { color: '#00ffff' }
+                  },
+                ],
+                labelLine:{
+                        length:20,
+                        length2:50,
+                    },
+                  label:{
+                    color:'#fff',
+                      fontSize: 14,
+                      // formatter:"{b}\n\n",
+                      // padding:[0,-55],
+                      normal: {
+                        show: true,
+                        position: 'outer',
+                        // formatter: '{d}%, {c} \n\n',
+                        //模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
+                        formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
+                        // formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
+                        borderWidth: 20,
+                        borderRadius: 4,
+                        padding: [0, -55],
+                        rich: {
+                            a_set: {
+                                color: "#cddbe4",
+                                lineHeight: 20,
+                                align: "center",
+                                padding: [55, -40, -15, -40],
+                            },
+                            b_set:{
+                                color: "auto",
+                            },
+                        }
+                      }
+                  },
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          });
+          pietwo.setOption({
+              title: {
+                  text: '隐患整治完成率:'+(this.allNum.typeOne+this.allNum.typeTwo),
+                  left: 'center',
+                  top :20,
+                  textStyle:{
+                      color: "#00ffff"
+                  }
+              },
+              grid: {
+                bottom: "7%",
+                containLabel: true,
+              },
+            tooltip: {
+              trigger: 'item',
+            },
+            series: [
+              {
+                name: '任务概况',
+                type: 'pie',
+                radius: '55%',
                 center: ['50%','58%'],
                 data: [
                   { 
@@ -511,4 +598,14 @@
   align-items: center;
   padding: 0px 30px;
 }
+.pieone{
+  width: 50%;
+  height: 50%;
+  float: left;
+}
+.pietwo{
+  width: 50%;
+  height: 50%;
+  float: right;
+}
 </style>

gassafetyprogress-web/src/components/bigWindow/rightBar.vue

@@ -48,6 +48,37 @@
         ></div>
       </div>
     </div>
+    <div class="" style="padding: 0px 10px;">
+      <div class="yujingleft yujing" style="width: 33%;height: 90px;float: left;">
+          <div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;">
+            <img src="@/assets/mapinages/group786.png" alt="" style="width: 60px;height: 60px;" />
+          </div>
+          <div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;">
+            <p>设备预警</p>
+            <span>2</span>
+          </div>
+      </div>
+      <div class="yujingcenter yujing" style="width: 33%;height: 90px;float: left;">
+        <div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;">
+          <img src="@/assets/mapinages/group787.png" alt="" style="width: 60px;height: 60px;" />
+        </div>
+        <div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;">
+          <p>事件情况</p>
+          <span>2</span>
+        </div>
+      </div>
+      <div class="yujingright yujing" style="width: 33%;height: 90px;float: left;">
+        <div class="yujingtop" style="width: 70px;height: 90px;float: left;margin-top: 15px;text-align: right;">
+          <img src="@/assets/mapinages/group788.png" alt="" style="width: 60px;height: 60px;" />
+        </div>
+        <div class="yujingbottom" style="float: left;color: #cddbe4;margin-left: 10px;">
+          <p>隐患数量</p>
+          <span>2</span>
+        </div>
+      </div>
+    </div>
+
+
     <div class="left">
       <div
         class="bottom right-bottom-data-left"
@@ -325,7 +356,7 @@ export default {
       changeTimer: false,
 
       repeatFinshed: false,
-      tableHeight: 215,
+      tableHeight: 135,
       tableData: [],
       scrollHeight: 0,
     };