Merge branch 'product-kk' into product

pages/dncmnc/mnc/compose/echart3.vue

  <template>
   <div>
-    <div id="myChart03" style="width:865px;height:516px;top: 0px;"></div>
+    <div id="myChart03" style="width:865px;height:316px;top: 0px;"></div>
   </div>
 </template>
     <script>

pages/dncmnc/mnc/compose/echart4.vue

  <template>
   <div>
-    <div id="myChart04" style="width:100%;height:340px;margin:20px auto;top: 0px;"></div>
+    <div id="gauge01" style="width:200px;height:150px;top: 0px;"></div>
   </div>
 </template>
     <script>
@@ -17,61 +17,141 @@ export default {
     },
     loadEchart() {
       // 基于准备好的dom，初始化echarts实例
-      var myChart04 = this.$echarts.init(document.getElementById('myChart04'))
-
+      var gauge01 = this.$echarts.init(document.getElementById('gauge01'))
+      var score = 78;
+      var name = '名称';
       var option = {
-        title: {
-            text: ''
-        },
-        legend: {
-            data: ['开机', '关机', '故障', '运行'],
-            right: 55,
-        },
-        tooltip: {
-            trigger: 'axis'
-        },
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-        },
-        xAxis: {
-            data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', 
-            '14日', '15日', '16日', '17日', '18日']
-        },
-        yAxis: {
-            type: 'value'
-        },
-        series: [
+        
+          series: [
             {
-                name: '开机',
-                type: 'bar',
-            barWidth: 8,
-                data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134]
+              type: 'gauge',
+              min: 0,
+              max: 100,
+              radius: '80%',
+              startAngle: 180,
+              endAngle: 0,
+              axisLine: {
+                  show: false,
+                  lineStyle: {
+                      opacity: 0,
+                      width: 12
+                  }
+              },
+              splitLine: {
+                  show: false
+              },
+              pointer: {
+                  show: false
+              },
+              axisTick: {
+                splitNumber: 10,
+                length: 12,
+                lineStyle: {
+                    color: '#004fb0'
+                }
+              },
+              title: {
+                  show: true,
+                  fontSize: 16,
+                  color: '#5faeff',
+                  offsetCenter: [0, '-115%']
+              },
+              detail: {
+                  formatter: function (value) {
+                      return '{a|' + value + '} {b|分}'
+                  },
+                  offsetCenter: [0,-20],
+                  rich: {
+                      a: {
+                          fontSize: 32,
+                          color: '#15e198'
+                      },
+                      b: {
+                          fontSize: 14,
+                          color: '#15e198',
+                          padding: [0, 0, 5, 0]
+                      }
+                  }
+              },
+              data: [{value: [score], name: name}]
             },
             {
-                name: '关机',
-                type: 'bar',
-            barWidth: 8,
-                data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
+              name: 'score',
+              type: 'pie',
+              startAngle: 180,
+              hoverAnimation: false,
+              radius: [105, 115],
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: 0.4,
+                  name: 0.4,
+                  itemStyle: {
+                    normal: {
+                      color: '#fff'
+                    }
+                  }
+                },
+                {
+                  value: 0.4,
+                  itemStyle: {
+                    normal: {
+                      color: 'transparent'
+                    }
+                  }
+                }
+              ]
             },
             {
-                name: '故障', 
-                type: 'bar',
-            barWidth: 8,
-                data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
-            },
-            {
-                name: '运行',
-                type: 'bar',
-            barWidth: 8,
-                data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320]
+              name: 'score',
+              type: 'pie',
+              startAngle: 180,
+              hoverAnimation: false,
+              radius: [105, 115],
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: [(score * 0.5 /100).toFixed(2)],
+                  name: [(score * 0.5 /100).toFixed(2)],
+                  itemStyle: {
+                    normal: {
+                      color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: '#15e198'
+                        }, {
+                            offset: 1, color: '#409eff'
+                        }]
+                      }
+                    }
+                  }
+                },
+                {
+                  value: [1- (score * 0.5 /100).toFixed(2)],
+                  itemStyle: {
+                    normal: {
+                      color: 'transparent'
+                    }
+                  }
+                }
+              ]
             }
-        ]
+          ]
       }
       // 绘制图表
-      myChart04.setOption(option)
+      gauge01.setOption(option)
     }
   },
   mounted() {

pages/dncmnc/mnc/index.vue

@@ -58,7 +58,7 @@
           </div>
       </template>
       <template slot="card" slot-scope="{row}">
-        <div class="body" v-for="i of 15" :key="i">
+        <div class="body" v-for="i of 5" :key="i">
           <Row class="title-i">
             <Col :span="16" class="order-code">
               <Ellipsis :text="row.productName+i" :lines="1" tooltip transfer />

pages/dncmnc/mnc/mnc.less

 
 .set_card{
-    padding: 30px 30px 0;
+    padding: 12px 30px 0;
     .set_card_box{
         border: 1px solid #CACBD0;
         border-radius: 4px;

pages/dncmnc/mnc/monitoring.vue

@@ -105,6 +105,7 @@
                                 <Col span="16">
                                     <div class="echart3">
                                         <Echart3 ></Echart3>
+                                        <Echart4 ></Echart4>
                                     </div>
                                 </Col>
                                 <Col span="8">
@@ -163,10 +164,12 @@
 <script>
 import Echart2 from './compose/echart2'
 import Echart3 from './compose/echart3'
+import Echart4 from './compose/echart4'
 export default {
     components: {
         Echart2,
         Echart3,
+        Echart4,
     },
     data(){
         return{