样式调整

src/views/datav/LeftChart1.vue

@@ -246,11 +246,12 @@ export default {
         }
         .word {
           margin-top: 5px;
-          font-size: 16px;
+          font-size: 18px;
+          font-weight: bold;
         }
         .number {
           color: #fcca00;
-          font-size: 20px;
+          font-size: 30px;
           font-weight: bold;
         }
         .color {

src/views/datav/LeftChart11.vue

@@ -62,12 +62,60 @@ export default {
           //   </div>
           //   `,
           // ],
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</div>
+          //   </div>
+          //   `,
+          // ],
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</div>
+          //   </div>
+          //   `,
+          // ],
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</div>
+          //   </div>
+          //   `,
+          // ],
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</div>
+          //   </div>
+          //   `,
+          // ],
         ],
         // data: [],
         // index: true,
         columnWidth: [50],
         align: ["center"],
-        rowNum: 5,
+        rowNum: 6,
         waitTime: 1500,
         // headerBGC: "#1981f6",
         // headerHeight: 20,
@@ -170,8 +218,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .dv-scroll-board .rows{
+  // overflow: visible !important;
+}
 ::v-deep .dv-scroll-board .rows .row-item {
-  height: 20% !important;
+  height: 16.5% !important;
   line-height: normal !important;
   display: flex;
   align-items: center;
@@ -242,7 +293,7 @@ export default {
     }
   }
   .right-container {
-    height: 90%;
+    height: 94%;
     border: 1px solid #22659e;
     border-radius: 5px;
     background: rgba(1, 58, 131, 0.4);

src/views/equBigData/BottomCharts.vue

@@ -37,10 +37,11 @@ export default {
     .header-center-decoration {
       width: 95%;
       height: 70px;
+      margin-top:22px;
     }
     .center-title {
       position: absolute;
-      font-size: 12px;
+      font-size: 22px;
       font-weight: bold;
       left: 50%;
       top: 14px;

src/views/equBigData/LeftChart1.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="left-chart-middle">
     <dv-charts class="lc1-chart" :option="option" />
+    <!-- dv-active-ring-chart -->
   </div>
 </template>
 
@@ -28,7 +29,7 @@ export default {
             },
             outsideLabel:{
               show:true,
-              formatter:"{name}  {value}个  {percent}%",
+              formatter:"{name}  {percent}%",
               style:{
                 fontSize:18,
               }

src/views/equBigData/LeftChart2.vue

@@ -31,13 +31,23 @@ export default {
         },
         xAxis: {
           name: "",
-          data: this.xlist,
+          splitNumber : 10,
+          nameGap :400,
+          // data: this.xlist,
+          data: ['周一', '周二', '周三'],
           axisLine: {
             style: {
               stroke: "#324686",
               lineWidth: 1,
             },
           },
+          axisLabel: {
+            style: {
+              fill: "#fff",
+              fontSize: 10,
+              rotate: 0,
+            },
+          },
           axisTick:{
             show: false,
           }
@@ -56,6 +66,13 @@ export default {
             fill: '#09111e',
             fontSize: 10
           },
+          axisLabel: {
+            style: {
+              fill: "#fff",
+              fontSize: 10,
+              rotate: 0,
+            },
+          },
           axisLine: {
             style: {
               stroke: "#324686",
@@ -68,8 +85,12 @@ export default {
         },
         series: [
           {
-            data: this.ylist,
+            // data: this.ylist,
+            data: [12,13,15],
             type: "line",
+            smooth: true,
+            // animationCurve : 'easeOutCubic',
+            animationFrame :50,
             lineArea: {
               show: true,
               gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"],

src/views/equBigData/MiddleChart.vue

@@ -8,15 +8,15 @@
 import { addUser } from "@/api/system/equdata";
 export default {
   name: "LeftChart4",
-  props:{
-   xlist:{
-    type:Array,
-    default:[],
-   },
-   ylist:{
-    type:Array,
-    default:[],
-   }
+  props: {
+    xlist: {
+      type: Array,
+      default: [],
+    },
+    ylist: {
+      type: Array,
+      default: [],
+    },
   },
   data() {
     return {
@@ -30,6 +30,12 @@ export default {
               rotate: 0,
             },
           },
+          axisLine: {
+            style: {
+              stroke: "#324686",
+              lineWidth: 1,
+            },
+          },
         },
         grid: {
           top: 30,
@@ -40,29 +46,46 @@ export default {
           splitLine: {
             show: false,
           },
+          axisLabel: {
+            style: {
+              fill: "#fff",
+              fontSize: 10,
+              rotate: 0,
+            },
+          },
+          axisLine: {
+            style: {
+              stroke: "#324686",
+              lineWidth: 1,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
         },
+
         series: [
           {
             data: this.ylist,
             type: "bar",
-            barWidth: 10,
+            barWidth: 15,
           },
         ],
       },
     };
   },
   created() {
-    this.getAddUser()
+    this.getAddUser();
   },
   methods: {
-    getAddUser(){
-      addUser().then(res=>{
-        let xlist=res.data.map(item=>item.month)
-        let ylist=res.data.map(item=>item.count)
-        this.option.xAxis.data=xlist
-        this.option.series[0].data=ylist
-      })
-    }
+    getAddUser() {
+      addUser().then((res) => {
+        let xlist = res.data.map((item) => item.month);
+        let ylist = res.data.map((item) => item.count);
+        this.option.xAxis.data = xlist;
+        this.option.series[0].data = ylist;
+      });
+    },
   },
 };
 </script>

src/views/equBigData/bbb.vue

@@ -50,6 +50,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -75,7 +76,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
           },
@@ -88,6 +89,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -113,7 +115,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
           },
@@ -126,6 +128,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -151,7 +154,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
           },
@@ -164,6 +167,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -189,7 +193,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
             animationFrame: 10,
@@ -218,7 +222,9 @@ export default {
       position: relative;
     }
     .item-chart-word{
-      font-size: 16px;
+      font-size: 20px;
+      margin-top: 15px;
+      font-weight: bold;
     }
     .zongshu{
       color:rgb(0, 253, 250);

src/views/equBigData/equTotal.vue

@@ -2,22 +2,22 @@
   <div class="left-charts">
     <div class="left-chart-item">
       <dv-charts class="item-chart" :option="option" />
-      <div class="item-chart-word zongshu">总数</div>
+      <div class="item-chart-word-num zongshu">总数</div>
     </div>
 
     <div class="left-chart-item">
       <dv-charts class="item-chart" :option="option1" />
-      <div class="item-chart-word zaixianshu">在线数</div>
+      <div class="item-chart-word-num zaixianshu">在线数</div>
     </div>
 
     <div class="left-chart-item">
       <dv-charts class="item-chart" :option="option2" />
-      <div class="item-chart-word lixianshu">离线数</div>
+      <div class="item-chart-word-num lixianshu">离线数</div>
     </div>
 
     <div class="left-chart-item">
       <dv-charts class="item-chart" :option="option3" />
-      <div class="item-chart-word gaojingshu">告警数</div>
+      <div class="item-chart-word-num gaojingshu">告警数</div>
     </div>
   </div>
 </template>
@@ -48,6 +48,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -73,7 +74,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
           },
@@ -86,6 +87,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -111,7 +113,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
           },
@@ -124,6 +126,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -149,7 +152,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
           },
@@ -162,6 +165,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
+            radius:'80%',
             data: [
               {
                 name: "itemA",
@@ -187,7 +191,7 @@ export default {
               formatter: "{value}",
               style: {
                 fill: "#1ed3e5",
-                fontSize: 20,
+                fontSize: 30,
               },
             },
             animationFrame: 10,
@@ -221,8 +225,10 @@ export default {
       height: calc(100% - 80px);
       position: relative;
     }
-    .item-chart-word {
-      font-size: 16px;
+    .item-chart-word-num {
+      font-size: 20px;
+      margin-top: 15px;
+      font-weight: bold;
     }
     .zongshu {
       color: rgb(0, 253, 250);

src/views/equBigData/index.vue

@@ -62,8 +62,8 @@
             <Border-Item title="月新增用户">
               <Middle-Chart
                 v-if="xyUserFlag"
-                :xlist="xDataList"
-                :ylist="yDataList"
+                :xlist="xUserList"
+                :ylist="yUserList"
             /></Border-Item>
           </dv-border-box-13>
         </div>