Changes

src/main.js

@@ -26,7 +26,8 @@ import {
   Option,
   Switch,
   Submenu,
-  ColorPicker
+  ColorPicker,
+  Drawer
 } from 'element-ui'
 
 import './styles/element-variables.scss'
@@ -66,6 +67,7 @@ Vue.use(JMultiSelectTag)
 // }
 
 Vue.use(ELScrollbar)
+Vue.use(Drawer)
 Vue.use(ColorPicker)
 Vue.use(Switch)
 Vue.use(Option)

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

@@ -233,6 +233,7 @@ $xHeight: 120px;
       }
 
       .cr-1, .cr-3 {
+        font: 400 1.2vw hxb;
         flex-grow: 1;
         font-size: 1.2vw;
         width: 100%;
@@ -246,6 +247,7 @@ $xHeight: 120px;
       }
 
       .cr-2, .cr-4 {
+        font: 400 1.2vw hxb;
         flex-grow: 1;
         font-size: 1.2vw;
         width: 100%;

src/views/dashboard-screen/index.vue

@@ -73,7 +73,7 @@
         </div>
         <div class="sop sop-2">
           <CardWrap>
-            <span slot="title" @click="openDrawer">检修兑现情况</span>
+            <span slot="title" @click="openDrawer('检修兑现情况')">检修兑现情况</span>
             <div slot="content">
               <Jxdxqk/>
             </div>
@@ -92,11 +92,14 @@
       </div>
     </div>
     <el-drawer
+      custom-class="drawer-wrap"
       :title="drawer.title"
       :visible.sync="drawer.visible"
+      :with-header="true"
+      size="100%"
       :direction="drawer.direction"
     >
-      <span>我来啦!</span>
+      <component :is="drawer.comp"/>
     </el-drawer>
   </div>
 </template>
@@ -114,6 +117,7 @@ import QbDlsbxjdx from '@/views/dashboard-screen/qb-dlsbxjdx/index.vue'
 import Jryl from '@/views/dashboard-screen/jryl/index.vue'
 import ChartMap from '@/views/dashboard-screen/chart-map/chartMap.vue'
 import dayjs from 'dayjs'
+import ScreenJxdxqk from '@/views/dashboard-screen/screen/screenJxdxqk.vue'
 
 require('dayjs/locale/zh-cn')
 export default {
@@ -125,7 +129,8 @@ export default {
       drawer: {
         title: '',
         visible: false,
-        direction: 'btt'
+        direction: 'btt',
+        comp: null
       }
     }
   },
@@ -143,9 +148,14 @@ export default {
     }, 1000)
   },
   methods: {
-    openDrawer(type, title) {
+
+    openDrawer(title) {
+      const map = {
+        '检修兑现情况': ScreenJxdxqk
+      }
       this.drawer.title = title
       this.drawer.visible = true
+      this.drawer.comp = map[title]
       this.drawer = Object.assign({}, this.drawer)
     }
   }
@@ -314,4 +324,10 @@ export default {
     }
   }
 }
+
+::v-deep .drawer-wrap {
+  background-image: url("/static/images/bg.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
 </style>

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

@@ -16,7 +16,7 @@ import {param} from '@/utils'
 import {chartJxdxqky, chartSyjhdxqk} from "@/api/dashboard-json";
 
 export default {
-  name: 'Chart',
+  name: 'Jxdxqk',
   data() {
     return {
       option: {},
@@ -415,7 +415,7 @@ export default {
         startAngle: 25, // 起始角度，支持范围[0, 360]。
         clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
         radius: ['50%', '50%'],
-        center: ['50%', '58%'],
+        center: ['50%', '50%'],
         data: optionData,
         itemStyle: {
           opacity: 0 // 这里必须是0，不然2d的图会覆盖在表面

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

@@ -1,14 +1,23 @@
 <template>
   <div class="common-warp">
-    <div class="left"/>
+    <div class="left">
+      <div class="c-w">
+        <Jxdxqk></Jxdxqk>
+      </div>
+    </div>
 
-    <div class="right"/>
+    <div class="right">
+      123
+    </div>
   </div>
 </template>
 
 <script>
+import Jxdxqk from "@/views/dashboard-screen/jxdxqk/index.vue";
+
 export default {
-  name: 'ScreenJxdxqk'
+  name: 'ScreenJxdxqk',
+  components: {Jxdxqk}
 }
 </script>
 
@@ -16,6 +25,23 @@ export default {
 .common-warp {
   width: 100%;
   height: 100%;
+  display: flex;
+
+  .left, .right {
+    flex: 1;
+    flex-shrink: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .left {
+    .c-w {
+      width: 30vw;
+      height: 30vw;
+    }
+  }
 }
 
 </style>

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

@@ -7,10 +7,9 @@
       <div class="txt">
         {{ item.name }}
       </div>
-      <div class="value">{{item.value}}</div>
+      <div class="value">{{ item.value }}</div>
     </div>
 
-
   </div>
 </template>
 
@@ -20,7 +19,7 @@ export default {
   data() {
     return {
       mapValues: [
-        {value: 1, name: '远动调试本月还有'},
+        {value: 1, name: '远动调试本月还有', children: [{value: 1, name: '电力受电线路'}]},
         {value: 1, name: '电力受电线路'},
         {value: 1, name: '电力变配电所'},
         {value: 1, name: '电力设备巡检待检'},
@@ -65,7 +64,7 @@ export default {
       flex-grow: 1;
     }
 
-    .value{
+    .value {
       font: normal 18px hxb;
       color: #25e3fa;
       margin-left: auto;

vue.config.js

@@ -28,7 +28,7 @@ module.exports = {
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
-  productionSourceMap: false,
+  productionSourceMap: true,
   devServer: {
     port: port,
     open: true,