ming 3 年 前
コミット
82c7de845f

+ 4 - 4
src/assets/css/index.css

@@ -188,9 +188,9 @@ header {
     width: 2rem !important;
     height: 0.375rem !important;
     background-color: transparent !important;
-    color: #4BF4F9;
+    color: #0081FF;
     font-size: 0.18rem !important;
-    border: 1px #4BF4F9 solid !important;
+    border: 1px #0081FF solid !important;
     border-radius: 0px !important;
 }
 
@@ -200,7 +200,7 @@ header {
 }
 
 .select-trigger .el-input--suffix .el-select__caret {
-    color: #4BF4F9 !important;
+    color: #0081FF !important;
     font-size: 0.175rem !important;
 }
 
@@ -474,7 +474,7 @@ p {
 
 .alarm,
 .text-red {
-    color: #FA0D1B
+    color: #F66167
 }
 
 .statisSec ul {

BIN
src/assets/images/home.png


+ 13 - 21
src/views/home/components/lineChart.vue

@@ -68,7 +68,7 @@ export default {
         },
         // 图列组件
         legend: {
-          itemHeight: 10, //改变圆圈大小
+          itemHeight: 8, //改变圆圈大小
           itemWidth: 26, //改变圆圈大小
           itemGap: 30,
           textStyle: {
@@ -131,16 +131,16 @@ export default {
             //   24, 40, 101, 134, 90, 230,
             // ],
             symbolSize: 6, //拐点圆的大小
-            symbol: 'circle',
-            lineStyle: {
-              color: "#00F4FD",
-              width:1
-            },
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: "#00F4FD",
-              color: "#000",
-            },
+            // symbol: "circle",
+            // lineStyle: {
+            //   color: "#00F4FD",
+            //   width: 1,
+            // },
+            // itemStyle: {
+            //   borderWidth: 1,
+            //   borderColor: "#00F4FD",
+            //   color: "#000",
+            // },
           },
           {
             name: this.ftrendIcoCount[1].name,
@@ -152,17 +152,9 @@ export default {
             //   240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
             //   130, 30, 50, 110, 144, 110, 240, 228, 240,
             // ],
-            symbol: "circle",
+            // symbol: "circle",
             symbolSize: 6,
-            lineStyle: {
-              color: "#2FA4EE",
-              width:1
-            },
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: "#2FA4EE",
-              color: "#000",
-            },
+            
           },
         ],
       };

+ 31 - 18
src/views/home/components/pieChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="pieChart"
-    style="width: 100%; height: 100%;padding-top:10px"
+    style="width: 100%; height: 100%; padding-top: 10px"
   ></div>
 </template>
 <script>
@@ -43,19 +43,27 @@ export default {
 
       var pie = [
         {
-          value: this.fdeviceTypeCount.normalCount?this.fdeviceTypeCount.normalCount:0,
+          value: this.fdeviceTypeCount.normalCount
+            ? this.fdeviceTypeCount.normalCount
+            : 0,
           name: "正常",
         },
         {
-          value: this.fdeviceTypeCount.faultCount?this.fdeviceTypeCount.faultCount:0,
+          value: this.fdeviceTypeCount.faultCount
+            ? this.fdeviceTypeCount.faultCount
+            : 0,
           name: "故障",
         },
         {
-          value: this.fdeviceTypeCount.offLineCount?this.fdeviceTypeCount.offLineCount:0,
+          value: this.fdeviceTypeCount.offLineCount
+            ? this.fdeviceTypeCount.offLineCount
+            : 0,
           name: "离线",
         },
         {
-          value: this.fdeviceTypeCount.deviceCount?this.fdeviceTypeCount.deviceCount:0,
+          value: this.fdeviceTypeCount.deviceCount
+            ? this.fdeviceTypeCount.deviceCount
+            : 0,
           name: "预警",
         },
       ];
@@ -104,29 +112,34 @@ export default {
             );
           },
         },
-        // itemStyle:{
-        //     normal: {
-        //          label: {
-        //              show: true,
-        //         position: 'outside',
-        //              color: 'green',
-        //          }
-        //     }
-        // },
 
         series: [
           {
+            labelLine: {
+              normal: {
+                length: 20,
+                length2: 60,
+              },
+            },
+
             label: {
               normal: {
+                overflow: 'none',
+                position: 'outside',
+                padding:[20,20,20,20],
                 show: true,
+                 lineHeight: 20,
                 textStyle: {
                   color: "#fff",
+                  fontSize:12,
+
                 },
-                formatter: " {b}:{c} ",
-              },
-              emphasis: {
-                show: true,
+                alignTo: 'edge',  //aa 居左的
+                formatter: "{b}:{c}\n",
               },
+              // emphasis: {
+              //   show: true,
+              // },
             },
             name: "访问来源",
             radius: ["45%", "67%"],

+ 4 - 4
src/views/index.vue

@@ -309,7 +309,7 @@ export default {
     text-align: center;
     line-height: .8375rem;
     margin: 0 auto;
-    width: 3.5rem;
+    width: 3rem;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -388,19 +388,19 @@ export default {
 .menu_select .el-popper__arrow::before {
   border-top-color: transparent !important;
   border-left-color: transparent !important;
-  background: rgba(0, 244, 253, 1) !important;
+  background: #0081FF!important;
 }
 .el-select__popper {
   background-color: #082333 !important;
 }
 .menu_select {
-  border: 1px solid rgba(0, 244, 253, 1) !important;
+  border: 1px solid #0081FF!important;
   > div {
     border: transparent !important;
   }
 }
 .el-select-dropdown__item.selected {
-  color: rgba(0, 244, 253, 1) !important;
+  color: #0081FF!important;
 }
 .el-select-dropdown__item {
   color: #fff !important;

+ 5 - 5
src/views/site/components/Overview/barChart.vue

@@ -30,11 +30,11 @@ export default {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: "#FF8A0D",
+                color: "#F66167",
               },
               {
                 offset: 1,
-                color: "#FF8A0D",
+                color: "#F66167",
               },
             ]),
           },
@@ -123,7 +123,7 @@ export default {
           left: "6%",
           top: "18%",
           right: "2%",
-          bottom: "22%",
+          bottom: "25%",
         },
         legend: {
           data: dataName,
@@ -132,8 +132,8 @@ export default {
             color: "#fff",
             fontSize: 12,
           },
-          itemWidth: 12,
-          itemHeight: 10,
+          itemWidth: 15,
+          itemHeight: 8,
         },
         xAxis: {
           data: data[0].listDate,

+ 2 - 2
src/views/site/components/Overview/histTrendChart.vue

@@ -100,13 +100,13 @@ export default {
       // console.log(JSON.stringify(data),JSON.stringify(dataAll));
 
       option = {
-        color: ["#F66167", "#35B8FC", "#32E6FC"],
+        color: ["#FEB70D", "#50F335", "#0DC8FE"],
         tooltip: {
           trigger: "axis",
         },
         // 图列组件
         legend: {
-          itemHeight: 10, //改变圆圈大小
+          itemHeight: 8, //改变圆圈大小
           itemWidth: 26, //改变圆圈大小
           itemGap: 30,
           textStyle: {

+ 8 - 6
src/views/site/components/Overview/pieChart.vue

@@ -115,17 +115,19 @@ export default {
             label: {
                 position:'outer',
               alignTo:'edge',
-              margin:10,
+              // margin:10,
              
               normal: {
                 overflow: 'none',
-                padding:[0,-8,-0,-8], //调整左右位置
                 position: 'outside',
+                padding:[20,-30,20,-30],
                 show: true,
                 textStyle: {
                   color: "#fff",
+                  fontSize:12,
+
                 },
-                formatter: " {b} ",
+                formatter: "{b}\n",
               },
               // emphasis: {
               //   show: true,
@@ -136,13 +138,13 @@ export default {
             data: pie,
             labelLine: {  
               normal: {
-                length: 2, //aa折线长度
-                // length2: 4, //aa折线长度
+                length: 10, //aa折线长度
+                length2: 30, //aa折线长度
               },
             },
           },
         ],
-        color: ["#39BBFE", "#FCCB35", "#FC7735"],
+        color: ["#F66167", "#69C06D", "#37A5EB"],
       };
 
       chart.setOption(option, true);

+ 7 - 9
src/views/site/components/Overview/pieChart2.vue

@@ -121,33 +121,31 @@ export default {
           
             
               normal: {
-                 overflow: 'none',
+                overflow: 'none',
                 position: 'outside',
-                padding:[30,-10,30,-10],
+                padding:[20,-30,20,-30],
                 show: true,
                 textStyle: {
                   color: "#fff",
                   fontSize:12,
 
                 },
-                formatter: "{b}",
+                formatter: "{b}\n",
               },
-              // emphasis: {
-              //   show: true,
-              // },
+             
             },
             radius: ["43%", "60%"],
             type: "pie",
             data: pie,
             labelLine: {
               normal: {
-                length: 2, //aa折线长度
-                // length2: 4, //aa折线长度
+                length: 10, //aa折线长度
+                length2: 30, //aa折线长度
               },
             },
           },
         ],
-        color: ["#39FEFC", "#FC3535"],
+        color: ["#39FEFC", "#E99C5E"],
       };
 
       chart.setOption(option, true);

+ 1 - 1
src/views/site/components/Overview/realTimeChart.vue

@@ -66,7 +66,7 @@ export default {
         },
         // 图列组件
         legend: {
-          itemHeight: 10, //改变圆圈大小
+          itemHeight: 8, //改变圆圈大小
           itemWidth: 26, //改变圆圈大小
           itemGap: 30,
           textStyle: {