Merge remote-tracking branch 'origin/dashboard-screen' into dashboard-screen

src/api/dashboard-json.js

@@ -45,7 +45,6 @@ export function chartDlydts(params) {
   })
 }
 
-
 // 电力远动调试本月
 export function chartDlydtsby(params) {
   return request({
@@ -64,7 +63,6 @@ export function chartJxdxqky(params) {
   })
 }
 
-
 // 检修兑现情况本月
 export function chartJxdxqkyby(params) {
   return request({
@@ -74,7 +72,6 @@ export function chartJxdxqkyby(params) {
   })
 }
 
-
 // map
 export function chartMap(params) {
   return request({
@@ -102,7 +99,6 @@ export function chartSyjhbydxqk(params) {
   })
 }
 
-
 // 试验计划兑现情况
 export function chartSyjhdxqk(params) {
   return request({
@@ -128,7 +124,6 @@ export function bdycList(params) {
   })
 }
 
-
 export function dlycList(params) {
   return request({
     url: '/show/dlyc/list',
@@ -136,3 +131,35 @@ export function dlycList(params) {
     params
   })
 }
+
+export function chartTodoList(url, parameter) {
+  return request({
+    url: '/chart/todoList',
+    params: parameter,
+    method: 'get'
+  })
+}
+
+
+export function chartDlydtsbyDetail(url, parameter) {
+  return request({
+    url: '/chart/dlydtsby/detail',
+    params: parameter,
+    method: 'get'
+  })
+}
+export function chartDlsdxlbyDetail(url, parameter) {
+  return request({
+    url: '/chart/dlsdxlby/detail',
+    params: parameter,
+    method: 'get'
+  })
+}
+
+export function chartDlbpdsbyDetail(url, parameter) {
+  return request({
+    url: '/chart/dlbpdsby/detail',
+    params: parameter,
+    method: 'get'
+  })
+}

src/views/dashboard-screen/index.vue

@@ -182,8 +182,50 @@ export default {
   }
 }
 </script>
+<style>
+::-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>
 
 <style lang="scss" scoped>
+
 @font-face {
   font-family: "hxb";
   src: url("hxb.woff2") format('woff2'),;
@@ -381,6 +423,9 @@ export default {
         outline: none !important;
       }
     }
+    .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,
-            left: '-20%',
-            top: '10%',
+            right: '10%',
+            top: '30%',
             width: '100%',
             // height: '',
             orient: 'vertical',
@@ -432,6 +432,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  margin-left: -3vw;
 
   .chart {
     width: 100%;

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

@@ -12,29 +12,36 @@
     <div class="o-item">
       <v-chart autoresize :option="options[2]"/>
     </div>
-    <div class="o-item">
-      <Zydbsx :data="dataList[0]"/>
+    <div class="o-item a-scrool">
+      <Zydbsx v-if="dataListReady" :fetchData="false" :data="dataList[0]"/>
     </div>
-    <div class="o-item">
-      <Zydbsx :data="dataList[1]"/>
+    <div class="o-item a-scrool">
+      <Zydbsx v-if="dataListReady" :fetchData="false"  :data="dataList[1]"/>
     </div>
 
-    <div class="o-item">
-      <Zydbsx :data="dataList[2]"/>
+    <div class="o-item a-scrool">
+      <Zydbsx v-if="dataListReady" :fetchData="false"  :data="dataList[2]"/>
     </div>
   </div>
 </template>
 
 <script>
 import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'
-import {chartDlbpdsby, chartDlsdxlBy, chartDlydtsby} from '@/api/dashboard-json'
+import {
+  chartDlbpdsby,
+  chartDlbpdsbyDetail,
+  chartDlsdxlBy,
+  chartDlsdxlbyDetail,
+  chartDlydtsby,
+  chartDlydtsbyDetail
+} from '@/api/dashboard-json'
 import _ from 'lodash'
+
 export default {
   name: 'ScreenDlts',
   components: {Zydbsx},
   data() {
     return {
-      color: ['rgb(96, 150, 230)', 'rgb(88, 182, 229)'],
       basicOption: {
         xAxis: {
           type: 'category',
@@ -46,7 +53,15 @@ export default {
         series: [
           {
             data: [10, 20],
-            type: 'bar'
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: (params) => {
+                  const color = ['rgb(96, 150, 230)', 'rgb(4,245,69)']
+                  return color[params.dataIndex]
+                }
+              }
+            }
           }
         ]
       },
@@ -55,45 +70,47 @@ export default {
         1: {},
         2: {}
       },
-      dataList: {
-        0: [
-          {name: '本月已完成数', value: 4},
-          {name: '本月未完成数', value: 8},
+      dataList: [
+        [
+          {name: '本月已完成数', value: 0},
+          {name: '本月未完成数', value: 0},
           {
             name: '未完成明细',
             value: null,
-            children: [{name: '吉蛟03号箱变（吉林隧道）'}, {name: '吉蛟12号箱变（草木沟隧道）'}, {name: '吉蛟20号箱变（拉法山隧道）'}]
+            children: [{name: '-'}]
           },
           {name: '年度剩余数', value: 0},
           {name: '下月计划完成数', value: 0}
         ],
-        1: [
-          {name: '本月已完成数', value: 4},
-          {name: '本月未完成数', value: 8},
+        [
+          {name: '本月已完成数', value: 0},
+          {name: '本月未完成数', value: 0},
           {
             name: '未完成明细',
             value: null,
-            children: [{name: '吉蛟03号箱变（吉林隧道）'}, {name: '吉蛟12号箱变（草木沟隧道）'}, {name: '吉蛟20号箱变（拉法山隧道）'}]
+            children: [{name: '-'}]
           },
           {name: '年度剩余数', value: 0},
           {name: '下月计划完成数', value: 0}
         ],
-        2: [
-          {name: '本月已完成数', value: 4},
-          {name: '本月未完成数', value: 8},
+        [
+          {name: '本月已完成数', value: 0},
+          {name: '本月未完成数', value: 0},
           {
             name: '未完成明细',
             value: null,
-            children: [{name: '吉蛟03号箱变（吉林隧道）'}, {name: '吉蛟12号箱变（草木沟隧道）'}, {name: '吉蛟20号箱变（拉法山隧道）'}]
+            children: [{name: '-'}]
           },
           {name: '年度剩余数', value: 0},
           {name: '下月计划完成数', value: 0}
         ]
-      }
+      ],
+      dataListReady: false
     }
   },
   created() {
     this.getOption()
+    this.getData()
   },
   methods: {
     getOption() {
@@ -113,6 +130,32 @@ export default {
         this.options[2].series[0].data = [res3.info.series[0].data[0], res3.info.series[1].data[0]]
       })
       window['tis'] = this
+    },
+
+    getData() {
+      const arrMap = [
+        'byywc', 'bywwc', 'wwcmx', 'ndsys', 'xyjhwc'
+      ]
+      const r1 = chartDlydtsbyDetail()
+      const r2 = chartDlsdxlbyDetail()
+      const r3 = chartDlbpdsbyDetail()
+      Promise.all([r1, r2, r3]).then(res => {
+        const resArr = [res[0].info, res[1].info, res[2].info]
+        resArr.forEach((item, index) => {
+          this.dataList[index].forEach((dIitem, dIndex) => {
+            const mapKey = arrMap[dIndex]
+            dIitem.value = item?.[mapKey]
+            if (mapKey === 'wwcmx') {
+              dIitem.children = item?.[mapKey].map(nameValue => {
+                return {name: nameValue}
+              }) || []
+              dIitem.value = ''
+            }
+          })
+        })
+      })
+      this.dataList = _.cloneDeep(this.dataList)
+      this.dataListReady = true
     }
   }
 }
@@ -121,7 +164,7 @@ export default {
 <style scoped lang="scss">
 .dlts-wrap {
   width: 100%;
-  height: calc(100% - 70px);
+  height: 100%;
   display: grid;
   grid-auto-flow: row;
   grid-template-columns: 1fr 1fr 1fr;
@@ -129,6 +172,7 @@ export default {
   grid-row-gap: 1fr;
   grid-column-gap: 200px;
   color: #ffffff;
+  padding-bottom: 4vh;
 
   .o-item {
     position: relative;
@@ -139,6 +183,10 @@ export default {
     align-items: center;
     justify-content: center;
 
+    &.a-scrool{
+      overflow-y: auto;
+    }
+
     ::v-deep {
       .row-item {
         font-size: 1.0vw;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="common-wrap">
+  <div class="common-wrap" v-if="mapValues.length > 0">
     <div class="row-item" v-for="item in mapValues">
       <div class="basic-item">
         <div class="icon">
@@ -8,23 +8,29 @@
         <div class="txt">
           {{ item.name }}
         </div>
-        <div class="value">{{ item.value }}</div>
+        <div class="value">{{ item.value }}{{ item.unit }}</div>
       </div>
-      <div class="child-item" v-if="item.children">
-        <Zydbsx :data="item.children"/>
+      <div class="child-item" v-if="item.children && item.children.length >0 ">
+        <Zydbsx :data="item.children" :fetchData="fetchData"/>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
+
+import {chartTodoList} from '@/api/dashboard-json'
+
 export default {
   name: 'Zydbsx',
   props: {
     data: {
       type: Array,
       default: null
+    },
+    fetchData: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -32,23 +38,45 @@ export default {
       mapValues: []
     }
   },
+  watch: {
+    data: {
+      immediate: true,
+      handler(newVal) {
+        if (Array.isArray(newVal) && !this.fetchData) {
+          this.mapValues = newVal
+        }
+      }
+    }
+  },
   created() {
-    if (this.data) {
-      this.mapValues = this.data
-    } else {
+    if (this.fetchData) {
       this.mapValues = [
-        {value: 1, name: '远动调试本月还有'},
-        {value: 1, name: '电力受电线路'},
-        {value: 1, name: '电力变配电所'},
-        {value: 1, name: '电力设备巡检待检'},
-        {value: 1, name: '变电所待实验'}
+        {value: 0, name: '远动调试本月还有', unit: '个特检'},
+        {value: 0, name: '电力受电线路', unit: '条'},
+        {value: 0, name: '电力变配电所', unit: '座'},
+        {value: 0, name: '电力设备巡检待检', unit: '个'},
+        {value: 0, name: '变电所待实验', unit: '个'}
       ]
+      this.getData()
+    }
+  },
+  methods: {
+    getData() {
+      chartTodoList().then(res => {
+        const mapArr = ['ydts', 'dlsdxl', 'dlbpds', 'dlsbxj', 'bdsdsy']
+        debugger
+        this.mapValues.forEach((item, index) => {
+          item.value = res.info?.[mapArr[index]]
+        })
+      })
     }
   }
 }
 </script>
 
+
 <style scoped lang="scss">
+
 .common-wrap {
   width: 100%;
   height: 100%;
@@ -57,6 +85,7 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
+  /*控制整个滚动条*/
 
   .row-item {
     flex: 1;
@@ -100,6 +129,8 @@ export default {
         font: normal 18px hxb;
         color: #25e3fa;
         margin-left: auto;
+        width: 5vw;
+        text-align: right;
       }
     }