Changes

src/views/dashboard-screen/chard-wrap/card-wrap.vue

@@ -2,11 +2,11 @@
   <div class="card-wrap">
     <div class="header">
       <div class="h-c-wrap">
-        <slot name="title"></slot>
+        <slot name="title"/>
       </div>
     </div>
     <div class="content">
-      <slot name="content" class="slot"></slot>
+      <slot name="content" class="slot"/>
     </div>
   </div>
 </template>
@@ -64,4 +64,46 @@ export default {
     }
   }
 }
+
+/*控制整个滚动条*/
+
+::-webkit-scrollbar {
+
+  background-color: transparent;
+
+  width: 8px;
+
+  height: 8px;
+
+  background-clip: padding-box;
+
+}
+
+/*滚动条两端方向按钮*/
+
+::-webkit-scrollbar-button {
+
+  height: 0px;
+
+  width: 0px;
+
+}
+
+/*滚动条中间滑动部分*/
+
+::-webkit-scrollbar-thumb {
+
+  background-color: #dbdbdb;
+
+  border-radius: 4px;
+
+}
+
+/*滚动条右下角区域*/
+
+::-webkit-scrollbar-corner {
+
+  background-color: transparent;
+
+}
 </style>

src/views/dashboard-screen/index.vue

@@ -308,7 +308,16 @@ export default {
           //border: 1px solid teal;
 
           &.sop-1 {
-            flex: 1.5
+            flex: 1.5;
+
+            ::v-deep {
+              .card-wrap {
+                .content {
+                  height: calc(100% - 20px);
+                  overflow-y: auto;
+                }
+              }
+            }
           }
 
           &.sop-2 {
@@ -330,4 +339,6 @@ export default {
   background-repeat: no-repeat;
   background-size: cover;
 }
+
+
 </style>

src/views/dashboard-screen/jxdxqk/index.vue

@@ -13,7 +13,7 @@
 // import { getPie3D, getParametricEquation } from 'chart.js' // 工具类js，页面路径自己修改
 import * as echarts from 'echarts'
 import {param} from '@/utils'
-import {chartJxdxqky, chartSyjhdxqk} from "@/api/dashboard-json";
+import {chartJxdxqky, chartSyjhdxqk} from '@/api/dashboard-json'
 
 export default {
   name: 'Jxdxqk',
@@ -37,7 +37,7 @@ export default {
           res.info.series[0].data[0],
           res.info.series[1].data[0]
         ]
-        this.arrMap = arrMap;
+        this.arrMap = arrMap
       }
 
       /** ***********************
@@ -155,7 +155,7 @@ export default {
             return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
           },
 
-          y: function (u, v) {
+          y: function(u, v) {
             if (u < startRadian) {
               return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
             }
@@ -165,7 +165,7 @@ export default {
             return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
           },
 
-          z: function (u, v) {
+          z: function(u, v) {
             if (u < -Math.PI * 0.5) {
               return Math.sin(u)
             }
@@ -254,13 +254,13 @@ export default {
               max: Math.PI,
               step: Math.PI / 1.4
             },
-            x: function (u, v) {
+            x: function(u, v) {
               return Math.sin(v) * Math.sin(u) + Math.sin(u)
             },
-            y: function (u, v) {
+            y: function(u, v) {
               return Math.sin(v) * Math.cos(u) + Math.cos(u)
             },
-            z: function (u, v) {
+            z: function(u, v) {
               return Math.cos(v) > 0 ? 0.1 : -0.1
             }
           }
@@ -377,50 +377,50 @@ export default {
 
       this.option.series.push(
         {
-        name: '', // 自己根据场景修改
-        type: 'pie',
-        hoverAnimation: false, // 悬停不放大
-        labelLine: {
-          length: this.EchartfontSize(30),
-          length2: this.EchartfontSize(60),
-          lineStyle: {
-            width: this.EchartfontSize(2)
-          }
-        },
-        label: {
-          position: 'outside',
-          padding: [0, -this.EchartfontSize(50)],
-          formatter: (params) => {
-            const arr = [
-              `{a|${params.name}}`,
-              `{b|${params.value}\n\n}`
-            ]
-            return arr.join(' ')
+          name: '', // 自己根据场景修改
+          type: 'pie',
+          hoverAnimation: false, // 悬停不放大
+          labelLine: {
+            length: this.EchartfontSize(30),
+            length2: this.EchartfontSize(60),
+            lineStyle: {
+              width: this.EchartfontSize(2)
+            }
           },
-          rich: {
-            a: {
-              color: '#ffffff',
-              fontSize: this.EchartfontSize(14)
+          label: {
+            position: 'outside',
+            padding: [0, -this.EchartfontSize(50)],
+            formatter: (params) => {
+              const arr = [
+                `{a|${params.name}}`,
+                `{b|${params.value}\n\n}`
+              ]
+              return arr.join(' ')
             },
-            b: {
-              color: 'rgba(33,229,248)',
-              fontSize: this.EchartfontSize(14),
-              verticalAlign: 'top',
-              align: 'center'
+            rich: {
+              a: {
+                color: '#ffffff',
+                fontSize: this.EchartfontSize(14)
+              },
+              b: {
+                color: 'rgba(33,229,248)',
+                fontSize: this.EchartfontSize(14),
+                verticalAlign: 'top',
+                align: 'center'
 
+              }
             }
-          }
 
-        },
-        startAngle: 25, // 起始角度，支持范围[0, 360]。
-        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-        radius: ['50%', '50%'],
-        center: ['50%', '50%'],
-        data: optionData,
-        itemStyle: {
-          opacity: 0 // 这里必须是0，不然2d的图会覆盖在表面
-        }
-      })
+          },
+          startAngle: 25, // 起始角度，支持范围[0, 360]。
+          clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ['50%', '50%'],
+          center: ['50%', '50%'],
+          data: optionData,
+          itemStyle: {
+            opacity: 0 // 这里必须是0，不然2d的图会覆盖在表面
+          }
+        })
     }
 
   }

src/views/dashboard-screen/screen/screenJxdxqk.vue

@@ -7,17 +7,37 @@
     </div>
 
     <div class="right">
-      123
+      <div class="r-c-w">
+        <Zydbsx :data="rightData"></Zydbsx>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import Jxdxqk from "@/views/dashboard-screen/jxdxqk/index.vue";
+import Zydbsx from "@/views/dashboard-screen/zydbsx/index.vue";
 
 export default {
   name: 'ScreenJxdxqk',
-  components: {Jxdxqk}
+  data() {
+    return {
+      rightData: [
+        {value: 4, name: '本月已完成站数'},
+        {value: 3, name: '本月未完成站数'},
+        {
+          value: '', name: '未完成站名', children: [
+            {name: '长春西牵引变电所'},
+            {name: '英安河AT所'},
+            {name: '珲春分区所'},
+          ]
+        },
+        {value: 0, name: '下月计划完成站数'},
+        {value: 0, name: '年度剩余站数'}
+      ]
+    }
+  },
+  components: {Zydbsx, Jxdxqk}
 }
 </script>
 
@@ -42,6 +62,17 @@ export default {
       height: 30vw;
     }
   }
+
+  .right {
+    .r-c-w {
+      width: 30vw;
+      height: 50vh;
+
+      ::v-deep * {
+        font-size: 1.6vw !important;
+      }
+    }
+  }
 }
 
 </style>

src/views/dashboard-screen/zydbsx/index.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="common-wrap">
     <div class="row-item" v-for="item in mapValues">
-      <div class="icon">
-        <img src="/static/images/icon_guide@2x.png">
+      <div class="basic-item">
+        <div class="icon">
+          <img src="/static/images/icon_guide@2x.png">
+        </div>
+        <div class="txt">
+          {{ item.name }}
+        </div>
+        <div class="value">{{ item.value }}</div>
       </div>
-      <div class="txt">
-        {{ item.name }}
+      <div class="child-item" v-if="item.children">
+        <Zydbsx :data="item.children"/>
       </div>
-      <div class="value">{{ item.value }}</div>
     </div>
 
   </div>
@@ -16,10 +21,23 @@
 <script>
 export default {
   name: 'Zydbsx',
+  props: {
+    data: {
+      type: Array,
+      default: null
+    }
+  },
   data() {
     return {
-      mapValues: [
-        {value: 1, name: '远动调试本月还有', children: [{value: 1, name: '电力受电线路'}]},
+      mapValues: []
+    }
+  },
+  created() {
+    if (this.data) {
+      this.mapValues = this.data
+    } else {
+      this.mapValues = [
+        {value: 1, name: '远动调试本月还有'},
         {value: 1, name: '电力受电线路'},
         {value: 1, name: '电力变配电所'},
         {value: 1, name: '电力设备巡检待检'},
@@ -35,40 +53,70 @@ export default {
   width: 100%;
   height: 100%;
   color: white;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
 
   .row-item {
+    flex: 1;
     width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+
     font-size: 0.8vw;
     padding: 8px 28px;
+    display: flex;
+    flex-direction: column ;
+    align-items: flex-start;
+    justify-content: center;
 
-    .icon {
-      flex-shrink: 0;
-      margin-right: 14px;
+    .basic-item {
+      width: 100%;
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: space-between;
+
+      .icon {
+        flex-shrink: 0;
+        margin-right: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-      img {
-        width: 0.8vw;
-        height: 0.8vw;
+        img {
+          width: 0.8vw;
+          height: 0.8vw;
+        }
       }
-    }
 
-    .txt {
-      flex-grow: 1;
+      .txt {
+        flex-grow: 1;
+        height: fit-content;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .value {
+        font: normal 18px hxb;
+        color: #25e3fa;
+        margin-left: auto;
+      }
     }
 
-    .value {
-      font: normal 18px hxb;
-      color: #25e3fa;
-      margin-left: auto;
+    .child-item {
+      ::v-deep {
+        .common-wrap {
+          height: auto !important;
+
+          .row-item {
+            padding-right: 0 !important;
+
+          }
+        }
+
+      }
     }
+
   }
 
 }