Changes

.eslintrc.js

@@ -47,7 +47,7 @@ module.exports = {
     'curly': [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
+    'eqeqeq': ['error', 'always', {'null': 'ignore'}],
     'generator-star-spacing': [2, {
       'before': true,
       'after': true
@@ -190,11 +190,16 @@ module.exports = {
     'yoda': [2, 'never'],
     'prefer-const': 2,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
+    // 'object-curly-spacing': [2, 'always', {
+    //   objectsInObjects: false
+    // }],
     'array-bracket-spacing': [2, 'never'],
     'vue/no-unused-components': 'off',
-    'no-unused-vars': 'off'
+    'no-unused-vars': 'off',
+    "vue/html-indent": 'off',
+    "vue/attributes-order": "off",
+    "vue/html-closing-bracket-spacing": "off",
+    "vue/vue/html-self-closing": "off",
+    "object-curly-spacing": "off",
   }
 }

src/router/index.js

@@ -91,7 +91,7 @@ export const constantRoutes = [
     children: [
       {
         path: '',
-        component: () => import('@/views/dashboard-screen/syjhdxqk/index'), // Parent router-view
+        component: () => import('@/views/dashboard-screen/index'), // Parent router-view
         name: 'fault',
         meta: { title: '大屏', pages: ['pc:catenary:jlgz'] }
       }

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

@@ -32,22 +32,22 @@ export default {
   border: 1px solid teal;
 
   .header {
-    height: 48px;
-    width: 80%;
+    height: 4vh;
+    width: 100%;
     flex-shrink: 0;
     background-image: url("/static/images/biaoti_short@2x.png");
     background-repeat: no-repeat;
     background-size: auto 34px;
     background-position: left bottom;
-    font-size: 24px;
+    font-size: 1.1vw;
     color: white;
-    padding-left: 15%;
+    padding-left: 40px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 
     & > .h-c-wrap {
       line-height: 1;

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="card-wrap">
+    <div class="o-item o-left">
+      <slot name="left"></slot>
+    </div>
+    <div class="o-item o-r-1">
+      <slot name="r1"></slot>
+    </div>
+    <div class="o-item o-r-2">
+      <slot name="r2"></slot>
+    </div>
+    <div class="o-item"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CardWrap2'
+}
+</script>
+
+<style scoped lang="scss">
+.card-wrap {
+  width: 153px;
+  height: 59px;
+  background-image: url("/static/images/bianpin_Text Box@2x.png");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-flow: row;
+
+  .o-item {
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 14px;
+    font-weight: 500;
+    width: 100%;
+    height: 100%;
+    color: white;
+
+    &.o-left {
+      grid-row-start: 1;
+      grid-row-end: 3;
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      //grid-column-start: 1;
+      //grid-column-end: 3;
+    }
+
+    .value {
+      color: #00F2FF
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="chart-wrap">
+    <CardWrap2>
+      <span slot="left">第一季度</span>
+      <div slot="r1">计划  <span class="value">6</span></div>
+      <div slot="r2">完成  <span class="value">6</span></div>
+    </CardWrap2>
+    <CardWrap2>
+      <span slot="left">第二季度</span>
+      <div slot="r1">计划  <span class="value">6</span></div>
+      <div slot="r2">完成  <span class="value">6</span></div>
+    </CardWrap2>
+    <CardWrap2>
+      <span slot="left">第三季度</span>
+      <div slot="r1">计划  <span class="value">6</span></div>
+      <div slot="r2">完成  <span class="value">6</span></div>
+    </CardWrap2>
+    <CardWrap2>
+      <span slot="left">第四季度</span>
+      <div slot="r1">计划  <span class="value">6</span></div>
+      <div slot="r2">完成  <span class="value">6</span></div>
+    </CardWrap2>
+  </div>
+</template>
+
+<script>
+import CardWrap2 from "@/views/dashboard-screen/chard-wrap/card-wrap2.vue";
+
+export default {
+  name: 'Dlbpds',
+  components: {CardWrap2},
+  data() {
+    return {
+      option: {}
+    }
+  },
+  created() {
+    this.getOption()
+  },
+
+  methods: {
+    getOption() {
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+
+.chart-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+}
+</style>

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="chart-wrap">
+    <div class="child c-1">
+      <div class="cr cr-1">100%</div>
+      <div class="cr cr-2">100%</div>
+      <div class="cr cr-3">100%</div>
+      <div class="cr cr-4">100%</div>
+    </div>
+    <div class="child c-2">
+      <v-chart autoresize :option="option"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'Dlsdxl',
+  data() {
+    return {
+      option: {}
+    }
+  },
+  created() {
+    this.getOption()
+  },
+
+  methods: {
+    getOption() {
+      const labelList = ['第一季度', '第二季度', '第三季度', '第四季度']
+      this.option = {
+
+        grid: {
+          left: '8%',
+          top: '8%',
+          right: '10%',
+          bottom: '8%',
+          height: '100%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            show: false
+          }
+        ],
+        yAxis: [
+          {
+            axisTick: 'none',
+            axisLine: 'none',
+            offset: '2',
+            axisLabel: {
+              show: false,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: '12'
+              }
+            },
+            data: labelList.reverse()
+          },
+          {
+            axisTick: 'none',
+            axisLine: 'none',
+            axisLabel: {
+              textStyle: {
+                color: '#ffffff',
+                fontSize: '12'
+              }
+            },
+            data: ['4', '13', '25', '29', '38']
+          },
+          {
+            nameTextStyle: {
+              color: '#ffffff',
+              fontSize: '12'
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            },
+            data: []
+          }
+        ],
+        series: [
+          {
+            name: 'front-bar',
+            type: 'bar',
+            yAxisIndex: 0,
+            data: [4, 13, 25, 29, 38],
+            label: {
+              normal: {
+                show: false,
+                position: 'left',
+                textStyle: {
+                  color: '#ffffff',
+                  fontSize: '12'
+                }
+              }
+            },
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#205047'}, {
+                offset: 1,
+                color: '#28CABD'
+              }], false)
+            },
+            animation: true,
+            animationEasing: 'cubicOut'
+          },
+          {
+            type: 'scatter',
+            yAxisIndex: 0,
+            symbol: 'rect',
+            symbolSize: [4, 10],
+            data: [4, 13, 25, 29],
+            itemStyle: {
+              normal: {
+                borderRadius: 10,
+                borderColor: '#ffffff',
+                color: '#24C8B8'
+              }
+            }
+          },
+          {
+            name: 'back-bar',
+            type: 'bar',
+            yAxisIndex: 2,
+            // barGap: '-100%',
+            data: [100, 100, 100, 100],
+            barWidth: 6,
+            itemStyle: {
+              normal: {
+                color: 'rgb(31, 46, 55)'
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+                textStyle: {
+                  color: '#ffffff',
+                  fontSize: '14'
+                },
+                position: [0, '-24px'],
+                formatter: (a, b) => {
+                  return labelList[a.dataIndex]
+                }
+              }
+            },
+            z: 0
+          }
+
+        ]
+      }
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+$xHeight: 120px;
+.chart-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .c-1 {
+    flex: 1.5;
+    height: 100%;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .cr {
+      flex: 1;
+      flex-shrink: 0;
+      height: 75%;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-weight: 600;
+      color: white;
+      &.cr-1, &.cr-3 {
+        background-image: url("/static/images/shoudian_circular_1@2x.png");
+      }
+
+      &.cr-2, &.cr-4 {
+        background-image: url("/static/images/shoudian_circular_2@2x.png");
+      }
+    }
+  }
+
+  .c-2 {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    flex-shrink: 0;
+  }
+
+}
+</style>

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

@@ -5,9 +5,10 @@
 </template>
 
 <script>
+import * as echarts from 'echarts'
 
 export default {
-  name: 'SyjhdxqkChart',
+  name: 'Dlydtssx',
   data() {
     return {
       option: {}
@@ -19,7 +20,6 @@ export default {
 
   methods: {
     getOption() {
-
       const data = [{
         name: '第一季度',
         value: 40
@@ -40,19 +40,19 @@ export default {
       })
       const colors = [
         [
-          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(82, 113, 195)' }, {
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(82, 113, 195)'}, {
             offset: 1,
             color: 'rgb(120, 142, 237)'
           }], false),
-          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(81, 129, 192)' }, {
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(81, 129, 192)'}, {
             offset: 1,
             color: 'rgb(123, 148, 234)'
           }], false),
-          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(89, 137, 188)' }, {
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(89, 137, 188)'}, {
             offset: 1,
             color: 'rgb(113, 173, 229)'
           }], false),
-          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(88, 166, 191)' }, {
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(88, 166, 191)'}, {
             offset: 1,
             color: 'rgb(128, 230, 226)'
           }], false)
@@ -72,8 +72,8 @@ export default {
           type: 'pie',
           clockWise: false, // 顺时加载
           hoverAnimation: false, // 鼠标移入变大
-          radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
-          center: ['50%', '50%'],
+          radius: [90 - i * 15 + '%', 84 - i * 15 + '%'],
+          center: ['45%', '50%'],
           label: {
             show: false
           },
@@ -91,19 +91,19 @@ export default {
             value: data[i].value,
             name: data[i].name
           },
-            {
-              value: sum - data[i].value,
-              name: '',
-              itemStyle: {
-                color: 'transparent',
-                borderRadius: 60 // 设置每一段子项目的圆角
+          {
+            value: sum - data[i].value,
+            name: '',
+            itemStyle: {
+              color: 'transparent',
+              borderRadius: 60 // 设置每一段子项目的圆角
 
-              },
-              tooltip: {
-                show: false
-              },
-              hoverAnimation: false
-            }
+            },
+            tooltip: {
+              show: false
+            },
+            hoverAnimation: false
+          }
           ]
         })
         series.push({
@@ -113,8 +113,8 @@ export default {
           z: 1,
           clockWise: false, // 顺时加载
           hoverAnimation: false, // 鼠标移入变大
-          radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
-          center: ['50%', '50%'],
+          radius: [90 - i * 15 + '%', 84 - i * 15 + '%'],
+          center: ['45%', '50%'],
           label: {
             show: false
           },
@@ -138,32 +138,31 @@ export default {
             },
             hoverAnimation: false
           },
-            {
-              value: 2.5,
-              itemStyle: {
-                color: 'rgba(0,0,0,0)',
-                borderWidth: 0,
-                borderRadius: 60 // 设置每一段子项目的圆角
-              },
-              tooltip: {
-                show: false
-              },
-              hoverAnimation: false
-            }
+          {
+            value: 2.5,
+            itemStyle: {
+              color: 'rgba(0,0,0,0)',
+              borderWidth: 0,
+              borderRadius: 60 // 设置每一段子项目的圆角
+            },
+            tooltip: {
+              show: false
+            },
+            hoverAnimation: false
+          }
           ]
         })
-        yAxis.push(((data[i].value / sum) * 100).toFixed(2) + '%')
+        yAxis.push(((data[i].value / sum) * 100).toFixed(0) + '%')
       }
       this.option = {
-        backgroundColor: '#012248',
         color: colors[0],
         legend: {
           show: true,
           icon: 'circle',
-          top: '15%',
+          top: '2%',
           left: '60%',
-          width: '40%',
-          height: '60%',
+          width: '100%',
+          height: '100%',
           data: name,
           orient: 'vertical',
           formatter: (name) => {
@@ -178,7 +177,7 @@ export default {
               title: {
                 fontSize: 14,
                 lineHeight: 30,
-                color: 'rgb(0, 178, 246)'
+                color: '#ffffff'
               },
               value: {
                 fontSize: 14,
@@ -195,10 +194,10 @@ export default {
         },
         grid: {
           top: '3%',
-          left: '50%',
+          left: '40%',
           width: '40%',
-          height: '21%',
-          containLabel: false
+          height: '30%',
+          containLabel: true
         },
         yAxis: [{
           type: 'category',
@@ -211,7 +210,9 @@ export default {
           },
           axisLabel: {
             interval: 0,
+            left: 30,
             inside: true,
+
             textStyle: {
               color: '#fff',
               fontSize: 14
@@ -225,7 +226,6 @@ export default {
         }],
         series: series
       }
-
     }
   }
 

src/views/dashboard-screen/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard-container">
-    <div class="header" />
+    <div class="header"/>
     <div class="content-wrap">
       <div class="coner left">
         <div class="o-item map">
@@ -8,24 +8,73 @@
         </div>
         <div class="o-item">
           <CardWrap>
-<!--            <span slot="title">试验计划兑现情况</span>-->
+            <span slot="title">试验计划兑现情况</span>
             <div slot="content">
-              <SyjhdxqkChart />
+              <SyjhdxqkChart/>
             </div>
           </CardWrap>
         </div>
         <div class="o-item">
-          <CardWrap />
+          <CardWrap>
+
+            <span slot="title">电力远动调试兑现情况</span>
+            <div slot="content">
+              <Dlydtssx/>
+            </div>
+          </CardWrap>
         </div>
-        <div class="o-item">
-          <CardWrap />
+        <div class="o-item b-r-3">
+          <div class="t-1">
+
+            <CardWrap>
+
+              <span slot="title">电力受电线路</span>
+              <div slot="content">
+                <Dlsdxl/>
+              </div>
+            </CardWrap>
+          </div>
+          <div class="t-2">
+            <CardWrap>
+
+              <span slot="title">电力变配电所</span>
+              <div slot="content">
+                <Dlbpds/>
+              </div>
+            </CardWrap>
+          </div>
 
         </div>
-        <div class="o-item">
-          <CardWrap />
+      </div>
+      <div class="coner right">
+        <div class="sop sop-1">
+          <CardWrap>
+            <span slot="title">重要待办事项</span>
+            <div slot="content">
+              <Zydbsx/>
+            </div>
+          </CardWrap>
+        </div>
+        <div class="sop sop-2">
+          <CardWrap>
+            <span slot="title">检修兑现情况</span>
+            <div slot="content">
+              <Jxdxqk/>
+            </div>
+          </CardWrap>
+
+        </div>
+        <div class="sop sop-3">
+          <CardWrap>
+            <span slot="title">牵变、电力设备巡视兑现（本月）</span>
+            <div slot="content">
+              <QbDlsbxjdx/>
+            </div>
+          </CardWrap>
+
+
         </div>
       </div>
-      <div class="coner right" />
     </div>
 
   </div>
@@ -35,10 +84,16 @@
 
 import CardWrap from '@/views/dashboard-screen/chard-wrap/card-wrap.vue'
 import SyjhdxqkChart from '@/views/dashboard-screen/syjhdxqk/index.vue'
+import Dlydtssx from '@/views/dashboard-screen/dlydtssx/index.vue'
+import Dlsdxl from '@/views/dashboard-screen/dlsdxl/index.vue'
+import Dlbpds from '@/views/dashboard-screen/dlbpds/index.vue'
+import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'
+import Jxdxqk from "@/views/dashboard-screen/jxdxqk/index.vue";
+import QbDlsbxjdx from "@/views/dashboard-screen/qb-dlsbxjdx/index.vue";
 
 export default {
   name: 'Dashboard',
-  components: { CardWrap, SyjhdxqkChart },
+  components: {QbDlsbxjdx, Jxdxqk, Zydbsx, Dlbpds, Dlsdxl, CardWrap, SyjhdxqkChart, Dlydtssx},
   data() {
     return {}
   },
@@ -60,9 +115,9 @@ export default {
 .dashboard-container {
   width: 100%;
   height: 100%;
-  min-height: 977px;
-  min-width: 1920px;
-  overflow-y: auto;
+  //min-height: 977px;
+  //min-width: 1920px;
+  overflow-y: scroll;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -92,7 +147,7 @@ export default {
         height: 100%;
         display: grid;
         grid-template-rows: 2fr 1fr;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 2fr;
         grid-auto-flow: row;
 
         .o-item {
@@ -101,6 +156,26 @@ export default {
             grid-column-start: 1;
             grid-column-end: 5;
           }
+
+          &.b-r-3 {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+
+            .t-1 {
+              flex: 1.5;
+              width: 100%;
+              flex-shrink: 0;
+
+            }
+
+            .t-2 {
+              flex: 1;
+              width: 100%;
+              flex-shrink: 0;
+            }
+          }
         }
       }
 
@@ -108,7 +183,29 @@ export default {
         width: 450px;
         height: 100%;
         flex-shrink: 0;
-        background: snow;
+        display: flex;
+        flex-direction: column;
+
+        .sop {
+          width: 100%;
+          height: 100%;
+          flex-direction: 0;
+          overflow: hidden;
+          border: 1px solid teal;
+
+          &.sop-1 {
+            flex: 1.5
+          }
+
+          &.sop-2 {
+            flex: 1.2
+          }
+
+          &.sop-3 {
+            flex: 2
+          }
+        }
+
       }
     }
   }

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

@@ -0,0 +1,11 @@
+<template/>
+
+<script>
+export default {
+  name: 'Jxdxqk'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard-screen/qb-dlsbxjdx/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="chart-wrap">
+    <div class="l-coner">
+      <v-chart autoresize :option="option"/>
+    </div>
+    <div class="r-coner">
+      <div class="c-item"></div>
+      <div class="c-item"></div>
+      <div class="c-item"></div>
+      <div class="c-item"></div>
+      <div class="c-item"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'QbDlsbxjdx',
+  data() {
+    return {
+      option: {}
+    }
+  },
+  created() {
+    this.getOption()
+  },
+
+  methods: {
+    getOption() {
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function(ctx, shape) {
+          console.log(ctx, shape)
+          const yAxisPoint = shape.yAxisPoint
+          const c0 = [shape.x, shape.y]
+          const c1 = [shape.x + 9, shape.y - 9]
+          const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]
+          const c3 = [yAxisPoint[0], yAxisPoint[1]]
+          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
+        }
+      })
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function(ctx, shape) {
+          const yAxisPoint = shape.yAxisPoint
+          const c1 = [shape.x, shape.y]
+          const c2 = [yAxisPoint[0], yAxisPoint[1]]
+          const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18]
+          const c4 = [shape.x + 9, shape.y + 18]
+          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+        }
+      })
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0
+        },
+        buildPath: function(ctx, shape) {
+          const c1 = [shape.x, shape.y]
+          const c2 = [shape.x + 9, shape.y + 18]
+          const c3 = [shape.x + 18, shape.y + 9]
+          const c4 = [shape.x + 9, shape.y - 9]
+          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+        }
+      })
+      echarts.graphic.registerShape('CubeLeft', CubeLeft)
+      echarts.graphic.registerShape('CubeRight', CubeRight)
+      echarts.graphic.registerShape('CubeTop', CubeTop)
+      const MAX = [100, 220, 200, 150, 200]
+      const VALUE = [20, 10, 30, 50, 150]
+      const NAMES = ['箱变', '电源线', '配电所', '变电所', '单元']
+      this.option = {
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: '0',
+          top: 0,
+          height: '100%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'category',
+          data: NAMES,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: 'white'
+            }
+          },
+          offset: 0,
+          axisTick: {
+            show: false,
+            length: 9,
+            alignWithLabel: true,
+            lineStyle: {
+              color: '#7DFFFD'
+            }
+          },
+          axisLabel: {
+            fontSize: 10
+          }
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: 'white'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            fontSize: 16
+          },
+          boundaryGap: ['20%', '20%']
+        },
+        series: [{
+          type: 'custom',
+          renderItem: function(params, api) {
+            const location = api.coord([api.value(0), api.value(1)])
+            return {
+              type: 'group',
+              children: [{
+                type: 'CubeLeft',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  yAxisPoint: api.coord([0, api.value(1)])
+                },
+                style: {
+                  fill: 'rgb(19, 39, 46) '
+                }
+              }, {
+                type: 'CubeRight',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  yAxisPoint: api.coord([0, api.value(1)])
+                },
+                style: {
+                  fill: 'rgb(19, 39, 46) '
+                }
+              }, {
+                type: 'CubeTop',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  yAxisPoint: api.coord([0, api.value(1)])
+                },
+                style: {
+                  fill: 'rgb(19, 39, 46)'
+                }
+              }]
+            }
+          },
+          data: MAX
+        },
+        {
+          type: 'custom',
+          renderItem: (params, api) => {
+            const location = api.coord([api.value(0), api.value(1)])
+            return {
+              type: 'group',
+              children: [{
+                type: 'CubeLeft',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  yAxisPoint: api.coord([0, api.value(1)])
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                    offset: 0,
+                    color: '#50B9E0'
+                  },
+                  {
+                    offset: 1,
+                    color: '#88DDF2'
+                  }
+                  ])
+                }
+              }, {
+                type: 'CubeRight',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  yAxisPoint: api.coord([0, api.value(1)])
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                    offset: 0,
+                    color: '#399AB2'
+                  },
+                  {
+                    offset: 1,
+                    color: '#6BCAD9'
+                  }
+                  ])
+                }
+              }, {
+                type: 'CubeTop',
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  yAxisPoint: api.coord([0, api.value(1)])
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                    offset: 0,
+                    color: 'rgba(127,217,254,0.78)'
+                  },
+                  {
+                    offset: 1,
+                    color: '#7FD9FE'
+                  }
+                  ])
+                }
+              }]
+            }
+          },
+          data: VALUE
+        },
+        {
+          type: 'bar',
+          label: {
+
+            normal: {
+              show: true,
+              position: ['100%', -10],
+              formatter: (e) => {
+                return 'value'
+              },
+              fontSize: 16,
+              color: '#fff',
+              offset: [25, 4]
+            }
+          },
+          itemStyle: {
+            color: 'transparent'
+          },
+          data: MAX
+        }]
+      }
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+.chart-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .l-coner{
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+  }
+  .r-coner{
+    width: 80px;
+    height: 100%;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    .c-item{
+      flex: 1;
+      flex-shrink: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url("/static/images/qianbian_circular@2x.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+  }
+}
+</style>

src/views/dashboard-screen/syjhdxqk/1.js

@@ -1,211 +1,137 @@
-const data = [{
-  name: '第一季度',
-  value: 40
-}, {
-  name: '第二季度',
-  value: 30
-}, {
-  name: '第三季度',
-  value: 20
-}, {
-  name: '第四季度',
-  value: 10
-}]
-const name = data.map((item) => item.name)
-const value = data.map((item) => item.value)
-const sum = value.reduce((a, b) => {
-  return a + b
-})
-const colors = [
-  [
-    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(82, 113, 195)' }, {
-      offset: 1,
-      color: 'rgb(120, 142, 237)'
-    }], false),
-    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(81, 129, 192)' }, {
-      offset: 1,
-      color: 'rgb(123, 148, 234)'
-    }], false),
-    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(89, 137, 188)' }, {
-      offset: 1,
-      color: 'rgb(113, 173, 229)'
-    }], false),
-    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(88, 166, 191)' }, {
-      offset: 1,
-      color: 'rgb(128, 230, 226)'
-    }], false),
-
-
-
+// import echarts from 'echarts'
+var charts = { // 按顺序排列从大到小
+  cityList: ['38号点（1）', '38号点（2）', '15号点', '16号点', '24号点'],
+  cityData: [7500, 6200, 5700, 4200, 3500]
+}
+var top10CityList = charts.cityList
+var top10CityData = charts.cityData
+var color = ['rgba(248,195,248', 'rgba(100,255,249', 'rgba(135,183,255', 'rgba(248,195,248', 'rgba(100,255,249']
 
-  ],
-  ['rgb(41, 73, 110)',
-    'rgb(41, 73, 110)',
-    'rgb(41, 73, 110)',
-    'rgb(41, 73, 110)'
-  ]
-]
-const series = []
-const yAxis = []
-for (let i = 0; i < data.length; i++) {
-  series.push({
-    name: '',
-    type: 'pie',
-    clockWise: false, // 顺时加载
-    hoverAnimation: false, // 鼠标移入变大
-    radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
-    center: ['50%', '50%'],
-    label: {
-      show: false
-    },
+let lineY = []
+for (var i = 0; i < charts.cityList.length; i++) {
+  var x = i
+  if (x > color.length - 1) {
+    x = color.length - 1
+  }
+  var data = {
+    name: charts.cityList[i],
+    color: color[x] + ')',
+    value: top10CityData[i],
     itemStyle: {
-      label: {
-        show: false
+      normal: {
+        show: true,
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+          offset: 0,
+          color: color[x] + ', 0.3)'
+        }, {
+          offset: 1,
+          color: color[x] + ', 1)'
+        }], false),
+        barBorderRadius: 10
       },
-      labelLine: {
-        show: false
-      },
-      borderRadius: 60, // 设置每一段子项目的圆角
-
-
-
-
-    },
-    data: [{
-      value: data[i].value,
-      name: data[i].name
-    },
-      {
-        value: sum - data[i].value,
-        name: '',
-        itemStyle: {
-          color: 'transparent',
-          borderRadius: 60, // 设置每一段子项目的圆角
-
-        },
-        tooltip: {
-          show: false
-        },
-        hoverAnimation: false
-      }
-    ]
-  })
-  series.push({
-    name: '',
-    type: 'pie',
-    silent: true,
-    z: 1,
-    clockWise: false, // 顺时加载
-    hoverAnimation: false, // 鼠标移入变大
-    radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
-    center: ['50%', '50%'],
-    label: {
-      show: false
-    },
-    itemStyle: {
-      label: {
-        show: false
-      },
-      labelLine: {
-        show: false
-      },
-      borderRadius: 60, // 设置每一段子项目的圆角
-
-    },
-    data: [{
-      value: 7.5,
-      itemStyle: {
-        color: colors[1][i]
-      },
-      tooltip: {
-        show: false
-      },
-      hoverAnimation: false
-    },
-      {
-        value: 2.5,
-        itemStyle: {
-          color: 'rgba(0,0,0,0)',
-          borderWidth: 0,
-          borderRadius: 60, // 设置每一段子项目的圆角
-        },
-        tooltip: {
-          show: false
-        },
-        hoverAnimation: false
-      }
-    ]
-  })
-  yAxis.push(((data[i].value / sum) * 100).toFixed(2) + '%')
-}
-option = {
-  backgroundColor: '#012248',
-  color: colors[0],
-  legend: {
-    show: true,
-    icon: 'circle',
-    top: "15%",
-    left: "60%",
-    width:"40%",
-    height:"60%",
-    data: name,
-    orient: 'vertical',
-    formatter: (name) => {
-      return (
-        '{title|' + name + '}   {value|' + data.find((item) => {
-          return item.name === name
-        }).value + '}'
-      )
-    },
-    textStyle: {
-      rich: {
-        title: {
-          fontSize: 14,
-          lineHeight: 30,
-          color: 'rgb(0, 178, 246)'
-        },
-        value: {
-          fontSize: 14,
-          lineHeight: 30,
-          color: '#fff'
-        }
+      emphasis: {
+        shadowBlur: 15,
+        shadowColor: 'rgba(0, 0, 0, 0.1)'
       }
     }
+  }
+  lineY.push(data)
+}
+
+console.log(lineY)
+option= {
+  backgroundColor:'#000',
+  title: {
+    show: false
   },
   tooltip: {
-    show: true,
-    trigger: 'item',
-    formatter: '{a}<br>{b}:{c}({d}%)'
+    trigger: 'item'
   },
   grid: {
-    top: "3%",
-    left: "50%",
-    width:"40%",
-    height:"21%",
-    containLabel: false
+    borderWidth: 0,
+    top: '10%',
+    left: '5%',
+    right: '15%',
+    bottom: '3%'
   },
+  color: color,
   yAxis: [{
     type: 'category',
     inverse: true,
+    axisTick: {
+      show: false
+    },
     axisLine: {
       show: false
     },
+    axisLabel: {
+      show: false,
+      inside: false
+    },
+    data: top10CityList
+  }, {
+    type: 'category',
+    axisLine: {
+      show: true
+    },
     axisTick: {
-      show: false
+      show: true
     },
     axisLabel: {
-      interval: 0,
-      inside: true,
+      show: true,
+      inside: false,
       textStyle: {
-        color: '#fff',
-        fontSize: 14
+        color: '#b3ccf8',
+        fontSize: '14',
+        fontFamily: 'PingFangSC-Regular'
       },
-      show: true
+      formatter: function (val) {
+        return `${val}k`
+      }
+    },
+    splitArea: {
+      show: false
+    },
+    splitLine: {
+      show: false
     },
-    data: yAxis
+    data: top10CityData
   }],
-  xAxis: [{
-    show: false
+  xAxis: {
+    type: 'value',
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    }
+  },
+  series: [{
+    name: '',
+    type: 'bar',
+    zlevel: 2,
+    barWidth: '10px',
+    data: lineY,
+    animationDuration: 1500,
+    label: {
+      normal: {
+        color: '#b3ccf8',
+        show: true,
+        position: [0, '-24px'],
+        textStyle: {
+          fontSize: 16
+        },
+        formatter: function (a, b) {
+          return a.name
+        }
+      }
+    }
   }],
-  series: series
+  animationEasing: 'cubicOut'
 }

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

@@ -21,6 +21,7 @@ export default {
     getOption() {
       const baseWidth = 20
       const offsetWidth = 15
+      const triangleHeight = 8
       this.option = {
         backgroundColor: 'rgb(2, 10, 33)',
         color: [],
@@ -107,7 +108,7 @@ export default {
             symbol: 'triangle',
             symbolRotate: 180,
             symbolOffset: [-offsetWidth, '96%'],
-            symbolSize: ['100%', 12],
+            symbolSize: ['100%', triangleHeight],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
             itemStyle: {
@@ -121,7 +122,7 @@ export default {
             symbolPosition: 'end',
             symbol: 'triangle',
             symbolRotate: 180,
-            symbolSize: [baseWidth, 12],
+            symbolSize: [baseWidth, triangleHeight],
             symbolOffset: [-offsetWidth, '-0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
@@ -177,7 +178,7 @@ export default {
             symbol: 'triangle',
             symbolRotate: 180,
 
-            symbolSize: [baseWidth, 12],
+            symbolSize: [baseWidth, triangleHeight],
             symbolOffset: [-offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
@@ -231,7 +232,7 @@ export default {
             symbol: 'triangle',
             symbolRotate: 180,
 
-            symbolSize: [baseWidth, 12],
+            symbolSize: [baseWidth, triangleHeight],
             symbolOffset: [offsetWidth, '96%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
@@ -249,7 +250,7 @@ export default {
             symbol: 'triangle',
             symbolRotate: 180,
 
-            symbolSize: [baseWidth, 12],
+            symbolSize: [baseWidth, triangleHeight],
             symbolOffset: [offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,
@@ -306,7 +307,7 @@ export default {
             symbol: 'triangle',
             symbolRotate: 180,
 
-            symbolSize: [baseWidth, 12],
+            symbolSize: [baseWidth, triangleHeight],
             symbolOffset: [offsetWidth, '0%'],
             barMaxWidth: 'auto',
             barWidth: baseWidth,

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

@@ -0,0 +1,73 @@
+<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>
+      <div class="txt">
+        {{ item.value }}
+      </div>
+    </div>
+    <div class="row-item">
+      <div class="icon">
+        <img src="/static/images/icon_guide@2x.png">
+      </div>
+      <div class="txt">
+        远动调试本月还有
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Zydbsx',
+  data() {
+    return {
+      mapValues: [
+        {id: 1, value: '远动调试本月还有'},
+        {id: 1, value: '电力受电线路'},
+        {id: 1, value: '电力变配电所'},
+        {id: 1, value: '电力设备巡检待检'},
+        {id: 1, value: '变电所待实验'}
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.common-wrap {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  color: white;
+
+  .row-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 18px;
+    padding: 8px 28px;
+
+    .icon {
+      flex-shrink: 0;
+      margin-right: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img{
+        width: 15px;
+        height: 15px;
+      }
+    }
+    .txt{
+      flex-grow: 1;
+    }
+  }
+
+}
+
+</style>