mm

src/api/dashboard-json.js

@@ -163,3 +163,10 @@ export function chartDlbpdsbyDetail(url, parameter) {
     method: 'get'
   })
 }
+export function chartJxdxqkbyDetail(url, parameter) {
+  return request({
+    url: '/chart/jxdxqkby/detail',
+    params: parameter,
+    method: 'get'
+  })
+}

src/views/dashboard-screen/index.vue

@@ -129,7 +129,7 @@ import * as _ from 'lodash'
 require('dayjs/locale/zh-cn')
 export default {
   name: 'Dashboard',
-  components: {ChartMap, Jryl, QbDlsbxjdx, Jxdxqk, Zydbsx, Dlbpds, Dlsdxl, CardWrap, SyjhdxqkChart, Dlydtssx},
+  components: { ChartMap, Jryl, QbDlsbxjdx, Jxdxqk, Zydbsx, Dlbpds, Dlsdxl, CardWrap, SyjhdxqkChart, Dlydtssx },
   data() {
     return {
       render: true,
@@ -170,10 +170,13 @@ export default {
         '检修兑现情况': ScreenJxdxqk,
         '变电-电力异常信息': ScreenBdDlYcxx,
         '试验计划本月兑现情况': ScreenSyjhbydxqk,
-        '待办事项': ScreenDbsx,
+        // '待办事项': ScreenDbsx,
         '电力远动调试本月兑现情况': ScreenDlts,
         '设备巡检兑现情况': ScreenSbxjdxqk
       }
+      if (!map[title]) {
+        return
+      }
       this.drawer.title = title
       this.drawer.visible = true
       this.drawer.comp = map[title]
@@ -260,7 +263,7 @@ export default {
   background-image: url("/static/images/bg.png");
   background-repeat: no-repeat;
   background-size: cover;
-  padding-bottom: 7 vh;
+  padding-bottom: 7vh;
 
   .header {
     width: 100%;
@@ -423,7 +426,8 @@ export default {
         outline: none !important;
       }
     }
-    .el-drawer__body{
+
+    .el-drawer__body {
       height: calc(100% - 100px);
     }
 

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

@@ -286,8 +286,8 @@ export default {
             data: legendData,
             position: 'right',
             selectedMode: false,
-            right: '10%',
-            top: '30%',
+            right: '00%',
+            top: '25%',
             width: '100%',
             // height: '',
             orient: 'vertical',
@@ -381,7 +381,7 @@ export default {
           type: 'pie',
           hoverAnimation: false, // 悬停不放大
           labelLine: {
-            length: this.EchartfontSize(30),
+            length: this.EchartfontSize(20),
             length2: this.EchartfontSize(60),
             lineStyle: {
               width: this.EchartfontSize(2)
@@ -415,7 +415,7 @@ export default {
           startAngle: 25, // 起始角度，支持范围[0, 360]。
           clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
           radius: ['50%', '50%'],
-          center: ['50%', '53%'],
+          center: ['50%', '49%'],
           data: optionData,
           itemStyle: {
             opacity: 0 // 这里必须是0，不然2d的图会覆盖在表面

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

@@ -2,42 +2,70 @@
   <div class="common-warp">
     <div class="left">
       <div class="c-w">
-        <Jxdxqk></Jxdxqk>
+        <Jxdxqk/>
       </div>
     </div>
 
     <div class="right">
       <div class="r-c-w">
-        <Zydbsx :data="rightData"></Zydbsx>
+        <Zydbsx v-if="dataReady" :fetch-data="false" :data="rightData"/>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Jxdxqk from "@/views/dashboard-screen/jxdxqk/index.vue";
-import Zydbsx from "@/views/dashboard-screen/zydbsx/index.vue";
+import Jxdxqk from '@/views/dashboard-screen/jxdxqk/index.vue'
+import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'
+import { chartJxdxqkbyDetail } from '@/api/dashboard-json'
 
 export default {
   name: 'ScreenJxdxqk',
+  components: { Zydbsx, Jxdxqk },
   data() {
     return {
       rightData: [
-        {value: 4, name: '本月已完成站数'},
-        {value: 3, name: '本月未完成站数'},
+        { value: 4, name: '本月已完成站数' },
+        { value: 3, name: '本月未完成站数' },
         {
           value: '', name: '未完成站名', children: [
-            {name: '长春西牵引变电所'},
-            {name: '英安河AT所'},
-            {name: '珲春分区所'},
+            { name: '长春西牵引变电所' },
+            { name: '英安河AT所' },
+            { name: '珲春分区所' }
           ]
         },
-        {value: 0, name: '下月计划完成站数'},
-        {value: 0, name: '年度剩余站数'}
-      ]
+        { value: 0, name: '下月计划完成站数' },
+        { value: 0, name: '年度剩余站数' }
+      ],
+      dataReady: false
     }
   },
-  components: {Zydbsx, Jxdxqk}
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      chartJxdxqkbyDetail().then(res => {
+        res = res.info
+        const arrMap = [
+          'byywc', 'bywwc', 'wwcmx', 'ndsys', 'xyjhwc'
+        ]
+        this.rightData.forEach((dIitem, dIndex) => {
+          const mapKey = arrMap[dIndex]
+          dIitem.value = res?.[mapKey]
+          if (mapKey === 'wwcmx') {
+            dIitem.children = res?.[mapKey].map(nameValue => {
+              return { name: nameValue }
+            }) || []
+            dIitem.value = ''
+          }
+        })
+
+        this.rightData = _.cloneDeep(this.rightData)
+        this.dataReady = true
+      })
+    }
+  }
 }
 </script>
 

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

@@ -64,7 +64,6 @@ export default {
     getData() {
       chartTodoList().then(res => {
         const mapArr = ['ydts', 'dlsdxl', 'dlbpds', 'dlsbxj', 'bdsdsy']
-        debugger
         this.mapValues.forEach((item, index) => {
           item.value = res.info?.[mapArr[index]]
         })