Changes

src/router/index.js

@@ -56,7 +56,7 @@ export const constantRoutes = [
       path: 'index',
       name: 'index',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'icon-shouye' }
+      meta: {title: '首页', icon: 'icon-shouye'}
     }]
   },
 
@@ -91,12 +91,12 @@ export const constantRoutes = [
     children: [
       {
         path: '',
-        component: () => import('@/views/dashboard-screen/jryl/index'), // Parent router-view
+        component: () => import('@/views/dashboard-screen/index'), // Parent router-view
         name: 'fault',
-        meta: { title: '大屏', pages: ['pc:catenary:jlgz'] }
+        meta: {title: '大屏', pages: ['pc:catenary:jlgz']}
       }
     ]
-  },
+  }
 
 ]
 export const asyncRoutes = [
@@ -116,25 +116,25 @@ export const asyncRoutes = [
         path: 'fault',
         component: () => import('@/views/catenary/fault/index'), // Parent router-view
         name: 'fault',
-        meta: { title: '故障数据管理', pages: ['pc:catenary:jlgz'] }
+        meta: {title: '故障数据管理', pages: ['pc:catenary:jlgz']}
       },
       {
         path: 'checklist',
         component: () => import('@/views/catenary/checklist/index'),
         name: 'checklist',
-        meta: { title: '检查表记录管理', pages: ['pc:catenary:jcab'] }
+        meta: {title: '检查表记录管理', pages: ['pc:catenary:jcab']}
       },
       {
         path: 'record',
         component: () => import('@/views/catenary/record/index'),
         name: 'record',
-        meta: { title: '检测记录管理', pages: ['pc:catenary:jceb'] }
+        meta: {title: '检测记录管理', pages: ['pc:catenary:jceb']}
       },
       {
         path: 'stand',
         component: () => import('@/views/catenary/stand/index'),
         name: 'stand',
-        meta: { title: '九防台账数据管理', pages: ['pc:prevent'] }
+        meta: {title: '九防台账数据管理', pages: ['pc:prevent']}
       }
     ]
   },
@@ -154,13 +154,13 @@ export const asyncRoutes = [
         path: 'seStand',
         component: () => import('@/views/security/stand/index'),
         name: 'seStand',
-        meta: { title: '安全工具台账', pages: ['pc:safety:tool'] }
+        meta: {title: '安全工具台账', pages: ['pc:safety:tool']}
       },
       {
         path: 'checklist',
         component: () => import('@/views/security/checkList/index'),
         name: 'checklist',
-        meta: { title: '安全工具检验记录', pages: ['pc:safety:experiment'] }
+        meta: {title: '安全工具检验记录', pages: ['pc:safety:experiment']}
       }
     ]
   },
@@ -179,43 +179,43 @@ export const asyncRoutes = [
         path: 'line',
         component: () => import('@/views/basics/line/index'), // Parent router-view
         name: 'line',
-        meta: { title: '线路数据', pages: ['pc:baseinfo:line'] }
+        meta: {title: '线路数据', pages: ['pc:baseinfo:line']}
       },
       {
         path: 'section',
         component: () => import('@/views/basics/section/index'), // Parent router-view
         name: 'section',
-        meta: { title: '区间站场数据', pages: ['pc:baseinfo:station'] }
+        meta: {title: '区间站场数据', pages: ['pc:baseinfo:station']}
       },
       {
         path: 'pillar',
         component: () => import('@/views/basics/pillar/index'), // Parent router-view
         name: 'pillar',
-        meta: { title: '支柱数据', pages: ['pc:baseinfo:pillar'] }
+        meta: {title: '支柱数据', pages: ['pc:baseinfo:pillar']}
       },
       {
         path: 'suoting',
         component: () => import('@/views/basics/suoting/index'), // Parent router-view
         name: 'suoting',
-        meta: { title: '所亭数据', pages: ['pc:baseinfo:substation'] }
+        meta: {title: '所亭数据', pages: ['pc:baseinfo:substation']}
       },
       {
         path: 'tunnel',
         component: () => import('@/views/basics/tunnel/index'), // Parent router-view
         name: 'tunnel',
-        meta: { title: '隧道数据', pages: ['pc:baseinfo:sdtz'] }
+        meta: {title: '隧道数据', pages: ['pc:baseinfo:sdtz']}
       },
       {
         path: 'add',
         component: () => import('@/views/basics/add/index'), // Parent router-view
         name: 'add',
-        meta: { title: '附加悬挂锚段数据', pages: ['pc:baseinfo:fjxgmd'] }
+        meta: {title: '附加悬挂锚段数据', pages: ['pc:baseinfo:fjxgmd']}
       },
       {
         path: 'check',
         component: () => import('@/views/basics/check/index'), // Parent router-view
         name: 'check',
-        meta: { title: '检查表数据', pages: ['pc:baseinfo:jcab'] }
+        meta: {title: '检查表数据', pages: ['pc:baseinfo:jcab']}
       }
     ]
   },
@@ -234,43 +234,43 @@ export const asyncRoutes = [
         path: 'dept',
         component: () => import('@/views/sys/dept/index'), // Parent router-view
         name: 'dept',
-        meta: { title: '部门数据', pages: ['pc:system:dept:list'] }
+        meta: {title: '部门数据', pages: ['pc:system:dept:list']}
       },
       {
         path: 'role',
         component: () => import('@/views/sys/role/index'), // Parent router-view
         name: 'role',
-        meta: { title: '职务管理', pages: ['pc:system:role:list'] }
+        meta: {title: '职务管理', pages: ['pc:system:role:list']}
       },
       {
         path: 'user',
         component: () => import('@/views/sys/user/index'), // Parent router-view
         name: 'user',
-        meta: { title: '职工管理', pages: ['pc:system:user:list'] }
+        meta: {title: '职工管理', pages: ['pc:system:user:list']}
       },
       {
         path: 'dict',
         component: () => import('@/views/sys/dict/index'), // Parent router-view
         name: 'dict',
-        meta: { title: '字典管理', pages: ['pc:system:dict:list'] }
+        meta: {title: '字典管理', pages: ['pc:system:dict:list']}
       },
       {
         path: 'menu',
         component: () => import('@/views/sys/menu/index'), // Parent router-view
         name: 'menu',
-        meta: { title: '菜单管理', pages: ['pc:system:menu:list'] }
+        meta: {title: '菜单管理', pages: ['pc:system:menu:list']}
       },
       {
         path: 'app',
         component: () => import('@/views/sys/app/index'), // Parent router-view
         name: 'app',
-        meta: { title: 'APP管理', pages: ['pc:system:app:list'] }
+        meta: {title: 'APP管理', pages: ['pc:system:app:list']}
       },
       {
         path: 'log',
         component: () => import('@/views/sys/log/index'), // Parent router-view
         name: 'log',
-        meta: { title: '日志管理', pages: ['pc:system:operlog:list'] }
+        meta: {title: '日志管理', pages: ['pc:system:operlog:list']}
       }
     ]
   },
@@ -282,7 +282,7 @@ export const asyncRoutes = [
 ]
 const createRouter = () => new Router({
   mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
+  scrollBehavior: () => ({y: 0}),
   routes: constantRoutes
 })
 

src/views/dashboard-screen/index.vue

@@ -168,7 +168,7 @@ export default {
 
             .jryl-wrap {
               width: 25%;
-              height: 260px;
+              height: 20vh;
               position: absolute;
               z-index: 1;
               bottom: 0;

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

@@ -1,6 +1,8 @@
 <template>
   <div class="chart-wrap">
-    <v-chart autoresize :option="option"/>
+    <div class="wrap-fix">
+      <v-chart autoresize :option="option"/>
+    </div>
   </div>
 </template>
 
@@ -15,6 +17,7 @@ export default {
     }
   },
   created() {
+    window['is'] = this
     this.getOption()
   },
 
@@ -26,7 +29,7 @@ export default {
         [100, 100, 100],
         [80, 80, 80]
       ]
-      const sealingData = []
+      let sealingData = []
       const gapPerSize = 10
       const gapData = data.map(() => [gapPerSize, gapPerSize, gapPerSize])
 
@@ -49,9 +52,17 @@ export default {
         // })
         // gapData.push(gapItem)
       })
+
+      // 三条数据变两条
+      sealingData = JSON.parse(JSON.stringify(sealingData))
+      sealingData.forEach((item, index) => {
+        const start = item[0].splice(0, 2)
+        const end = item[1].splice(0, 2)
+        sealingData[index] = [start, end]
+      })
       window['sealingData'] = sealingData
       const gapWidth = this.EchartfontSize(125)
-      const barWidth = this.EchartfontSize(15)
+      const barWidth = this.EchartfontSize(10)
       const symbolOffsetWidth = this.EchartfontSize(5)
       const symbolSizeWidth = this.EchartfontSize(8)
       this.option = {
@@ -68,7 +79,7 @@ export default {
           // orient: 'vertical',
           textStyle: {
             color: '#ffffff',
-            fontSize: this.EchartfontSize(20)
+            fontSize: this.EchartfontSize(16)
           },
           data: [
             {
@@ -103,10 +114,12 @@ export default {
 
         },
         grid: {
-          right: '20%',
-          left: '20%',
-          bottom: '10%',
-          // height: '50%',
+          right: '10%',
+          left: '5%',
+          height: '80%',
+          top: '30%',
+          containLabel: true
+
         },
         xAxis: {
           show: false,
@@ -119,6 +132,14 @@ export default {
           },
           axisLine: {
             show: false
+          },
+          axisLabel: {
+            show: true,
+            fontSize: this.EchartfontSize(16),
+            color: '#ffffff',
+            formatter: (name) => {
+              return name + '    '
+            }
           }
         },
         yAxis: {
@@ -134,7 +155,7 @@ export default {
             show: false
           },
           axisLabel: {
-            fontSize: this.EchartfontSize(20),
+            fontSize: this.EchartfontSize(16),
             color: '#ffffff',
             formatter: (name) => {
               return name + '    '
@@ -147,10 +168,12 @@ export default {
             name: '一级',
             type: 'bar',
             stack: 'total',
+            barGap: 10, /* 多个并排柱子设置柱子之间的间距*/
+            barCategoryGap: 10, /* 多个并排柱子设置柱子之间的间距*/
             barWidth: barWidth,
             itemStyle: { // lenged文本
               opacity: 1,
-              color: function(params) {
+              color: () => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(231, 73, 2, 0.30)' // 0% 处的颜色
@@ -163,12 +186,12 @@ export default {
             label: {
               show: true,
               position: ['50%', -barWidth - 10],
-              fontSize: this.EchartfontSize(20),
-              color: '#fffff'
+              fontSize: this.EchartfontSize(16),
+              color: '#ffffff'
             },
             data: data[0]
           },
-          { //
+          { // gap
             name: '',
             type: 'bar',
             barWidth: gapWidth,
@@ -187,7 +210,7 @@ export default {
             barWidth: barWidth,
             itemStyle: { // lenged文本
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(231, 203, 2, 0.30)' // 0% 处的颜色
@@ -200,12 +223,12 @@ export default {
             label: {
               show: true,
               position: ['50%', -barWidth - 10],
-              fontSize: this.EchartfontSize(20),
+              fontSize: this.EchartfontSize(16),
               color: '#fffff'
             },
             data: data[1]
           },
-          { //
+          { // gap
             name: '',
             type: 'bar',
             barWidth: gapWidth,
@@ -224,7 +247,7 @@ export default {
             barWidth: barWidth,
             itemStyle: { // lenged文本
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(78, 231, 255, 0.30)' // 0% 处的颜色
@@ -237,7 +260,7 @@ export default {
             label: {
               show: true,
               position: ['50%', -barWidth - 10],
-              fontSize: this.EchartfontSize(20),
+              fontSize: this.EchartfontSize(16),
               color: '#fffff'
             },
             data: data[2]
@@ -262,7 +285,7 @@ export default {
             'symbolOffset': [symbolOffsetWidth, 0],
             itemStyle: {
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(237, 118, 101,.4)' // 0% 处的颜色
@@ -272,10 +295,9 @@ export default {
                 }], false)
               }
             },
-            label: {
-            },
+            label: {},
             'symbolPosition': 'start',
-            'data': sealingData[0][0]
+            'data': [sealingData[0][0][0], sealingData[0][0][0]]
           },
 
           { // 封口2
@@ -288,7 +310,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: 'rgba(237, 118, 101,1)' // 0% 处的颜色
@@ -310,7 +332,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(255, 238, 91,.1)' // 0% 处的颜色
@@ -343,7 +365,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 1,
                   color: 'rgba(255, 238, 91, 1)' // 0% 处的颜色
@@ -366,7 +388,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(162, 237, 255,.1)' // 0% 处的颜色
@@ -399,7 +421,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function(params) {
+              color: function (params) {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(162, 237, 255,1)' // 0% 处的颜色
@@ -410,6 +432,41 @@ export default {
               }
             },
             'data': sealingData[2][1]
+          },
+
+          { // right-value
+            'name': '',
+            'type': 'pictorialBar',
+            'symbolSize': [symbolSizeWidth, barWidth],
+            'symbolRotate': 180,
+            'symbolOffset': [symbolOffsetWidth, 0],
+            'symbolPosition': 'end',
+            'z': 12,
+            itemStyle: {
+              opacity: 1,
+              color: function (params) {
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                  offset: 0,
+                  color: 'rgba(162, 237, 255,0)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(162, 237, 255,0)' // 100% 处的颜色
+                }], false)
+              }
+            },
+            'data': sealingData[2][1].map(value => value + 10),
+            label: {
+              show: true,
+
+              distance: 10,
+              color: '#fff',
+              fontSize: this.EchartfontSize(14),
+              // position: [-baseWidth - offsetWidth / this.EchartfontSize(10), -this.EchartfontSize(20)]
+              position: 'right',
+              formatter: (item) => {
+                return '-/-'
+              }
+            }
           }
 
         ]
@@ -423,9 +480,15 @@ export default {
 <style scoped lang="scss">
 
 .chart-wrap {
-  width: 25%;
-  height: 160px;
-  background: teal;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(40, 42, 54, 0);
+
+  .wrap-fix {
+    height: 100%;
+    width: 100%;
+  }
 
 }
 </style>