道闸诱导屏

liuqimichale
1 parent e00e4982
Showing 4 changed files with 49 additions and 40 deletions
src/assets/img/bg-wrap.png
src/components/allPieChart.vue
src/views/dicisection.vue
src/views/youdaopingsection.vue
@@ -21,7 +21,7 @@ export default {
     },
     height: {
       type: String,
-      default: '350px'
+      default: '205px'
     },
     autoResize: {
       type: Boolean,
@@ -72,14 +72,16 @@ export default {
           trigger: 'item',
           formatter: "{b} : {c} ({d}%)"
         },
-        series: [{
+        series: [
+
+          {
           name: '内环',
           type: 'pie',
           silent: true,
           clockWise: true,
           hoverAnimation: false,
           animationType: 'scale',
-          radius: '8%',
+          radius: ['10%','16%'],
           center: ['50%', '50%'],
           label: {
             normal: {
@@ -93,10 +95,10 @@ export default {
                 color: {
                   colorStops: [{
                     offset: 0,
-                    color: '#fff' // 0% 处的颜色
+                    color: '#157ADB' // 0% 处的颜色
                   }, {
                     offset: 1,
-                    color: '#cfcfcf' // 100% 处的颜色
+                    color: '#157ADB' // 100% 处的颜色
                   }]
                 }
               }
@@ -107,7 +109,7 @@ export default {
           {
             name: '半径模式',
             type: 'pie',
-            radius: ['10%', '40%'],
+            radius: ['20%', '100%'],
             center: ['50%', '50%'],
             roseType: 'radius',
             label: {
@@ -116,57 +118,42 @@ export default {
             lableLine: {
               show: false
             },
-            data: [{
-              value: 55,
-              name: '待维修',
-              itemStyle: {
-                normal: {
-                  color: {
-                    colorStops: [{
-                      offset: 0,
-                      color: '#FF7671' // 0% 处的颜色
-                    }, {
-                      offset: 1,
-                      color: '#A14AFF' // 100% 处的颜色
-                    }]
-                  },
-                }
-              }
-            },
+            data: [
               {
                 value: 35,
-                name: '维修中',
+                name: '诱导屏',
                 itemStyle: {
                   normal: {
                     color: {
                       colorStops: [{
                         offset: 0,
-                        color: '#FFEA4F' // 0% 处的颜色
+                        color: '#FFBA00' // 0% 处的颜色
                       }, {
                         offset: 1,
-                        color: '#F89212' // 100% 处的颜色
+                        color: '#FF8100' // 100% 处的颜色
                       }]
                     },
                   }
                 }
               },
               {
-                value: 200,
-                name: '运行中',
+                value: 55,
+                name: '道闸',
                 itemStyle: {
                   normal: {
                     color: {
                       colorStops: [{
                         offset: 0,
-                        color: '#57FFE0' // 0% 处的颜色
+                        color: '#00CAFE' // 0% 处的颜色
                       }, {
                         offset: 1,
-                        color: '#3469E2' // 100% 处的颜色
+                        color: '#2772F4' // 100% 处的颜色
                       }]
                     },
                   }
                 }
-              }
+              },
+
             ],
             animationType: 'scale',
             animationEasing: 'elasticOut',
@@ -64,6 +64,7 @@ export default {
   @mixin textStyle($color){
     padding-right: 23px;
     text-align: left;
+    font-size: 12px;
     color: $color;
   }
   @mixin borderStyle($color) {
@@ -83,6 +84,7 @@ export default {
     width: 80px;
     padding-left: 23px;
     text-align: left;
+    font-size: 14px;
     color: $color;
   }
   .dici-wrap{
@@ -5,18 +5,17 @@
       <li>
         <div>
           <div class="bg-wrap">
-            <p>123</p>
-            <p>123</p>
+            <p class="dznum-total">{{ dzNum|formatNum }}</p>
+            <p class="name">道闸</p>
           </div>
         </div>
         <div>
           <div class="bg-wrap">
-            <p>123</p>
-            <p>123</p>
+            <p class="ydpnum-total">{{ ydpNum|formatNum }}</p>
+            <p class="name">诱导屏</p>
           </div>
         </div>
       </li>
-      <!--<allPieChart tag="li"></allPieChart>-->
       <li>
         <allPieChart :chart-data="lineChartData"/>
       </li>
@@ -46,7 +45,9 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: lineChartData.newVisitis,
+      dzNum: '23454',
+      ydpNum: '4454'
     }
   },
   created() {
@@ -66,19 +67,38 @@ export default {
 <style lang="scss"  scoped>
   .ydp-dz-wrap{
     display: flex;
+    text-align: center;
     li{
       height: 100%;
       flex: 1;
       &:nth-of-type(1)>div{
         height: 50%;
         .bg-wrap{
-          width: 111px;
-          height: 52px;
+          width: 115px;
+          height: 59px;
+          padding: 13px 0 0 0;
           position: relative;
           top:50%;
           left: 50%;
           transform: translate(-50%,-50%);
-          background-color: #f00;
+          background:url("../assets/img/bg-wrap.png") no-repeat;
+          .dznum-total,.ydpnum-total{
+            font-size: 17px;
+            font-weight:bold;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+          .dznum-total{
+            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1)));
+          }
+          .ydpnum-total{
+            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1)));
+          }
+          .name{
+            padding-top: 5px;
+            font-size: 12px;
+            color: #fff;
+          }
         }
       }
     }