Changes

src/main.js

@@ -94,6 +94,8 @@ Object.keys(filters).forEach(key => {
 
 Vue.config.productionTip = false
 
+import globalFunction from './utils/globalFunction.js'
+Vue.use(globalFunction)
 new Vue({
   el: '#app',
   router,

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

@@ -37,11 +37,11 @@ export default {
     flex-shrink: 0;
     background-image: url("/static/images/biaoti_short@2x.png");
     background-repeat: no-repeat;
-    background-size: auto 34px;
+    background-size: auto 2vw;
     background-position: left bottom;
     font-size: 1.1vw;
     color: white;
-    padding-left: 40px;
+    padding-left: 2vw;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

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

@@ -21,8 +21,8 @@ export default {
 
 <style scoped lang="scss">
 .card-wrap {
-  width: 153px;
-  height: 59px;
+  width: 100%;
+  height: 100%;
   background-image: url("/static/images/bianpin_Text Box@2x.png");
   background-size: contain;
   background-position: center;
@@ -31,6 +31,7 @@ export default {
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
   grid-auto-flow: row;
+  padding: 1.3vh 0;
 
   .o-item {
 
@@ -38,7 +39,7 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
-    font-size: 14px;
+    font-size: 0.8vw;
     font-weight: 500;
     width: 100%;
     height: 100%;
@@ -47,7 +48,7 @@ export default {
     &.o-left {
       grid-row-start: 1;
       grid-row-end: 3;
-      font-size: 14px;
+      font-size: 0.8vw;
       display: flex;
       flex-direction: row;
       align-items: center;

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

@@ -55,6 +55,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-around;
-
+  .card-wrap{
+    margin: 0 0.3vw;
+  }
 }
 </style>

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

@@ -62,9 +62,10 @@ export default {
             axisTick: 'none',
             axisLine: 'none',
             axisLabel: {
+              show: false,
               textStyle: {
                 color: '#ffffff',
-                fontSize: '12'
+                fontSize: this.EchartfontSize(12)
               }
             },
             data: ['4', '13', '25', '29', '38']
@@ -72,7 +73,7 @@ export default {
           {
             nameTextStyle: {
               color: '#ffffff',
-              fontSize: '12'
+              fontSize: this.EchartfontSize(12)
             },
             axisLine: {
               lineStyle: {
@@ -90,15 +91,15 @@ export default {
             data: [4, 13, 25, 29, 38],
             label: {
               normal: {
-                show: false,
-                position: 'left',
+                show: true,
+                position: [this.EchartfontSize(240), -this.EchartfontSize(18)],
                 textStyle: {
                   color: '#ffffff',
-                  fontSize: '12'
+                  fontSize: this.EchartfontSize(12)
                 }
               }
             },
-            barWidth: 10,
+            barWidth: this.EchartfontSize(10),
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#205047'}, {
                 offset: 1,
@@ -128,7 +129,7 @@ export default {
             yAxisIndex: 2,
             // barGap: '-100%',
             data: [100, 100, 100, 100],
-            barWidth: 6,
+            barWidth: this.EchartfontSize(10),
             itemStyle: {
               normal: {
                 color: 'rgb(31, 46, 55)'
@@ -139,9 +140,9 @@ export default {
                 show: true,
                 textStyle: {
                   color: '#ffffff',
-                  fontSize: '14'
+                  fontSize: this.EchartfontSize(14)
                 },
-                position: [0, '-24px'],
+                position: [0, -this.EchartfontSize(18)],
                 formatter: (a, b) => {
                   return labelList[a.dataIndex]
                 }
@@ -184,9 +185,10 @@ $xHeight: 120px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 18px;
+      font-size: 1.2vw;
       font-weight: 600;
       color: white;
+
       &.cr-1, &.cr-3 {
         background-image: url("/static/images/shoudian_circular_1@2x.png");
       }

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

@@ -159,7 +159,7 @@ export default {
         legend: {
           show: true,
           icon: 'circle',
-          top: '2%',
+          top: '5%',
           left: '60%',
           width: '100%',
           height: '100%',
@@ -175,12 +175,12 @@ export default {
           textStyle: {
             rich: {
               title: {
-                fontSize: 14,
+                fontSize: this.EchartfontSize(14),
                 lineHeight: 30,
                 color: '#ffffff'
               },
               value: {
-                fontSize: 14,
+                fontSize: this.EchartfontSize(14),
                 lineHeight: 30,
                 color: '#fff'
               }
@@ -194,14 +194,14 @@ export default {
         },
         grid: {
           top: '3%',
-          left: '40%',
+          left: '45%',
           width: '40%',
           height: '30%',
           containLabel: true
         },
         yAxis: [{
           type: 'category',
-          inverse: true,
+          inverse: false,
           axisLine: {
             show: false
           },
@@ -209,13 +209,15 @@ export default {
             show: false
           },
           axisLabel: {
+            formatter: (name) => {
+              return name
+            },
             interval: 0,
-            left: 30,
             inside: true,
 
             textStyle: {
               color: '#fff',
-              fontSize: 14
+              fontSize: this.EchartfontSize(14),
             },
             show: true
           },

src/views/dashboard-screen/index.vue

@@ -115,9 +115,8 @@ export default {
 .dashboard-container {
   width: 100%;
   height: 100%;
-  //min-height: 977px;
-  //min-width: 1920px;
-  overflow-y: scroll;
+  min-height: fit-content;
+  min-width: 1920px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -125,6 +124,7 @@ export default {
   background-image: url("/static/images/bg.png");
   background-repeat: no-repeat;
   background-size: cover;
+  overflow-y: auto;
 
   .header {
     width: 100%;
@@ -143,7 +143,8 @@ export default {
 
     .coner {
       &.left {
-        flex-grow: 1;
+        flex: 6.3;
+        flex-shrink: 0;
         height: 100%;
         display: grid;
         grid-template-rows: 2fr 1fr;
@@ -180,7 +181,8 @@ export default {
       }
 
       &.right {
-        width: 450px;
+        flex: 1;
+        width: 100%;
         height: 100%;
         flex-shrink: 0;
         display: flex;

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

@@ -4,11 +4,11 @@
       <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 class="c-item">100%</div>
+      <div class="c-item">100%</div>
+      <div class="c-item">100%</div>
+      <div class="c-item">100%</div>
+      <div class="c-item">100%</div>
     </div>
   </div>
 </template>
@@ -81,14 +81,16 @@ export default {
         grid: {
           left: 0,
           right: 0,
-          bottom: '0',
+          bottom: 0,
           top: 0,
+          width: '100%',
           height: '100%',
           containLabel: true
         },
         yAxis: {
           type: 'category',
           data: NAMES,
+          show: false,
           axisLine: {
             show: false,
             lineStyle: {
@@ -99,14 +101,15 @@ export default {
           axisTick: {
             show: false,
             length: 9,
-            alignWithLabel: true,
+            alignWithLabel: false,
             lineStyle: {
               color: '#7DFFFD'
             }
           },
           axisLabel: {
-            fontSize: 10
+            fontSize: this.EchartfontSize(10)
           }
+
         },
         xAxis: {
           type: 'value',
@@ -124,14 +127,19 @@ export default {
           },
           axisLabel: {
             show: true,
-            fontSize: 16
-          },
-          boundaryGap: ['20%', '20%']
+            fontSize: this.EchartfontSize(10)
+          }
         },
         series: [{
           type: 'custom',
           renderItem: function(params, api) {
+            window.console.log('params', params)
+            window.console.log('api', api)
+            window['params'] = params
+            window['api'] = api
             const location = api.coord([api.value(0), api.value(1)])
+            window.console.log('location', location)
+
             return {
               type: 'group',
               children: [{
@@ -258,20 +266,40 @@ export default {
 
             normal: {
               show: true,
-              position: ['100%', -10],
+              position: [0, '10%'],
               formatter: (e) => {
-                return 'value'
+                return e.name
               },
-              fontSize: 16,
-              color: '#fff',
-              offset: [25, 4]
+              fontSize: this.EchartfontSize(14),
+              color: '#fff'
             }
           },
           itemStyle: {
             color: 'transparent'
           },
-          data: MAX
-        }]
+          data: VALUE
+        },
+        {
+          type: 'bar',
+          label: {
+
+            normal: {
+              show: true,
+              position: ['90%', '-100%'],
+              formatter: (e) => {
+                return e.value
+              },
+              fontSize: this.EchartfontSize(14),
+              color: '#fff'
+            }
+          },
+          itemStyle: {
+            color: 'transparent'
+          },
+          data: MAX,
+          zlevel: 2
+        }
+        ]
       }
     }
   }
@@ -286,20 +314,27 @@ export default {
   height: 100%;
   display: flex;
 
-  .l-coner{
+  .l-coner {
     flex-grow: 1;
     width: 100%;
     height: 100%;
   }
-  .r-coner{
-    width: 80px;
+
+  .r-coner {
+    width: 4vw;
     height: 100%;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
-    .c-item{
+
+    .c-item {
+      color: #91FFFF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75vw;
       flex: 1;
       flex-shrink: 0;
       width: 100%;

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

@@ -19,8 +19,8 @@ export default {
 
   methods: {
     getOption() {
-      const baseWidth = 20
-      const offsetWidth = 15
+      const baseWidth = this.EchartfontSize(16)
+      const offsetWidth = this.EchartfontSize(14)
       const triangleHeight = 8
       this.option = {
         backgroundColor: 'rgb(2, 10, 33)',
@@ -29,19 +29,29 @@ export default {
           containLabel: true,
           left: 20,
           right: 20,
-          bottom: 60,
+          bottom: 10,
           top: 40
         },
         xAxis: {
 
           data: ['第一季度', '第二季度', '第三季度', '第四季度'],
+          type: 'category',
+          axisLabel: {
+            color: '#ffffff',
+            fontSize: this.EchartfontSize(14),
+            formatter: (name) => {
+              return `\n` + name
+            }
+          },
           position: 'bottom',
-          type: 'category'
+          label: {}
+          // offset: [0]
+
         },
         yAxis: {
           axisLabel: {
             color: '#ffffff',
-            fontSize: 14
+            fontSize: this.EchartfontSize(14)
           },
           axisTick: {
             lineStyle: {
@@ -164,7 +174,8 @@ export default {
               show: true,
               distance: 10,
               color: '#fff',
-              position: [-baseWidth + 5, -20]
+              fontSize: this.EchartfontSize(12),
+              position: [-baseWidth - offsetWidth / this.EchartfontSize(10), -this.EchartfontSize(20)]
             },
             zlevel: -1
 
@@ -294,7 +305,8 @@ export default {
               show: true,
               distance: 10,
               color: '#fff',
-              position: [baseWidth - 5, -20]
+              fontSize: this.EchartfontSize(12),
+              position: [baseWidth - offsetWidth / this.EchartfontSize(2), -this.EchartfontSize(20)]
             },
             zlevel: -1
 

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

@@ -5,18 +5,12 @@
         <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">
-        远动调试本月还有
+        {{ item.name }}
       </div>
+      <div class="value">{{item.value}}</div>
     </div>
 
+
   </div>
 </template>
 
@@ -26,11 +20,11 @@ export default {
   data() {
     return {
       mapValues: [
-        {id: 1, value: '远动调试本月还有'},
-        {id: 1, value: '电力受电线路'},
-        {id: 1, value: '电力变配电所'},
-        {id: 1, value: '电力设备巡检待检'},
-        {id: 1, value: '变电所待实验'}
+        {value: 1, name: '远动调试本月还有'},
+        {value: 1, name: '电力受电线路'},
+        {value: 1, name: '电力变配电所'},
+        {value: 1, name: '电力设备巡检待检'},
+        {value: 1, name: '变电所待实验'}
       ]
     }
   }
@@ -41,15 +35,17 @@ export default {
 .common-wrap {
   width: 100%;
   height: 100%;
-  overflow-y: auto;
   color: white;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
 
   .row-item {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 18px;
+    font-size: 0.8vw;
     padding: 8px 28px;
 
     .icon {
@@ -58,14 +54,20 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
-      img{
-        width: 15px;
-        height: 15px;
+
+      img {
+        width: 0.8vw;
+        height: 0.8vw;
       }
     }
-    .txt{
+
+    .txt {
       flex-grow: 1;
     }
+
+    .value{
+      margin-left: auto;
+    }
   }
 
 }