1.首页自适应 短期调控自适应

cpp-ui/src/assets/styles/dark.scss

@@ -2,6 +2,7 @@ $white: #fff;
 $default-border-color: #2986ce;
 $table-border-color: #3e6b98;
 $table-header-background-color: #284266;
+$table-fixed-background-color: #0a293e;
 
 #app {
 
@@ -44,22 +45,22 @@ $table-header-background-color: #284266;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 50px;
+    height: 5vh;
     background-image: url('../images/topTitleBg.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 
     .title-text {
-      font-size: 30px;
+      font-size: 1.55vw;
       font-weight: bold;
     }
   }
 
   .sys-time {
     width: 10%;
-    height: 50px;
-    font-size: 16px;
+    height: 5vh;
+    font-size: 0.85vw;
     text-align: center;
     position: absolute;
     left: 0;
@@ -165,7 +166,7 @@ $table-header-background-color: #284266;
   color: $white !important;
 }
 
-.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell ,.el-table__body .el-table__row.hover-row td{
   background-color: transparent !important;
 }
 
@@ -193,7 +194,16 @@ $table-header-background-color: #284266;
 .el-table::before, .el-table--group::after, .el-table--border::after {
   background-color: $table-border-color;
 }
-
+.el-table__fixed::before, .el-table__fixed-right::before {
+  background-color: $table-border-color !important;
+}
+.el-table th.el-table__cell > .cell,.el-table .cell{
+  padding-left: .3vw !important;
+  padding-right: .3vw !important;
+}
+.el-table__fixed-body-wrapper {
+  background: $table-fixed-background-color;
+}
 /*element 分頁*/
 .el-pagination__total, .el-pagination__jump {
   color: $white !important;

cpp-ui/src/assets/styles/sidebar.scss

@@ -8,7 +8,7 @@
   }
 
   .sidebarHide {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .sidebar-container {
@@ -29,8 +29,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -93,7 +93,7 @@
       color: $base-menu-color-active !important;
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $base-sidebar-width !important;
 
@@ -102,10 +102,13 @@
       }
     }
 
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
       //background-color: $base-sub-menu-background !important;
-      background-color: transparent !important;
+      background-image: url('../images/navBg.png');
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
@@ -138,7 +141,7 @@
     .el-submenu {
       overflow: hidden;
 
-      &>.el-submenu__title {
+      & > .el-submenu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -148,10 +151,11 @@
       }
     }
 
+
     .el-menu--collapse {
       .el-submenu {
-        &>.el-submenu__title {
-          &>span {
+        & > .el-submenu__title {
+          & > span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -198,22 +202,25 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
+    background-color: #0a293e !important;
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      //background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: $base-sub-menu-hover !important;
     }
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 

cpp-ui/src/layout/components/Navbar.vue

@@ -112,14 +112,15 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  //height: 50px;
+  height: 5vh;
   overflow: hidden;
   position: relative;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
-    line-height: 46px;
+    line-height: 4vh;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -176,7 +177,7 @@ export default {
       margin-right: 30px;
 
       .avatar-wrapper {
-        margin-top: 5px;
+        //margin-top: 5px;
         position: relative;
 
         .user-avatar {

cpp-ui/src/layout/index.vue

@@ -1,32 +1,35 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div class="app-title-bg">
-      <span class="sys-time">{{sysTime}}</span>
+      <span class="sys-time">{{ sysTime }}</span>
       <navbar/>
       <div class="titleBg">
         <span class="title-text">集 中 功 率 预 测</span>
       </div>
     </div>
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+
     <sidebar id="sidebar" :style="isFixed ? 'top:0' : ''" v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-<!--      <div :class="{'fixed-header':fixedHeader}">-->
-<!--        <navbar/>-->
-<!--        <tags-view v-if="needTagsView"/>-->
-<!--      </div>-->
-      <app-main/>
+      <!--      <div :class="{'fixed-header':fixedHeader}">-->
+      <!--        <navbar/>-->
+      <!--        <tags-view v-if="needTagsView"/>-->
+      <!--      </div>-->
+      <app-main style="height: 95vh;overflow-y: scroll"/>
+<!--      <app-main/>-->
       <right-panel>
         <settings/>
       </right-panel>
     </div>
+
   </div>
 </template>
 
 <script>
 import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components'
 import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 import variables from '@/assets/styles/variables.scss'
 import {formatToDateTime} from "../utils/dateUtil";
 
@@ -62,11 +65,11 @@ export default {
       return variables;
     }
   },
-  data(){
-    return{
+  data() {
+    return {
       isFixed: false,
       offsetTop: 0,
-      sysTime:'',
+      sysTime: '',
       sysInterval: null
     }
   },
@@ -77,16 +80,16 @@ export default {
       this.offsetTop = document.querySelector("#sidebar").offsetTop;
     });
     const _this = this
-    this.sysInterval = setInterval(function (){
+    this.sysInterval = setInterval(function () {
       _this.sysTime = formatToDateTime(new Date())
-    },1000)
+    }, 1000)
   },
   destroyed() {
     clearInterval(this.sysInterval);
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch('app/closeSideBar', {withoutAnimation: false})
     },
     initHeight() {
       // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
@@ -102,48 +105,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

cpp-ui/src/utils/index.js

@@ -1,5 +1,16 @@
 import { parseTime } from './ruoyi'
+/**
+ * echarts fontSize 分辨率自适应
+ *  12px => res = 0.12
+ **/
+export function fontSize(res){
+  let docEl = document.documentElement,
+    clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = 100 * (clientWidth / 1920);
+  return res*fontSize;
 
+}
 /**
  * 表格时间格式化
  */

cpp-ui/src/views/abnormalAlarm/index.vue

@@ -59,7 +59,7 @@
         class="mytable-style"
         auto-resize
         border
-        height="770px"
+        height="calc(60vh)"
         resizable
         export-config
         highlight-current-row

cpp-ui/src/views/configManager/parsingConf/cdqparsing.vue

@@ -485,7 +485,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/configManager/parsingConf/cftparsing.vue

@@ -894,7 +894,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/configManager/parsingConf/dqparsing.vue

@@ -500,7 +500,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/configManager/parsingConf/fjparsing.vue

@@ -734,7 +734,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/configManager/parsingConf/nbqparsing.vue

@@ -651,7 +651,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/configManager/parsingConf/nwpparsing.vue

@@ -864,7 +864,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/configManager/parsingConf/qxzparsing.vue

@@ -615,7 +615,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/configManager/parsingConf/rpparsing.vue

@@ -575,7 +575,7 @@ export default {
 /deep/ .formulaColor .el-input--small .el-input__inner {
   height: 32px;
   line-height: 32px;
-  background-color: #cccccc;
+  background-color: rgba(204, 204, 204, 0.5);
 }
 
 </style>

cpp-ui/src/views/largeScreen/echarts-data.js

@@ -1,9 +1,10 @@
 import  * as echarts from 'echarts'
+import {fontSize} from "../../utils";
 export const gaugeOption = {
   series: [
     {
       type: 'gauge',
-      center: ['50%', '75%'],
+      center: ['50%', '70%'],
       startAngle: 200,
       endAngle: -20,
       min: 0,
@@ -14,36 +15,36 @@ export const gaugeOption = {
       },
       progress: {
         show: true,
-        width: 20
+        width: fontSize(0.2)
       },
       pointer: {
         show: false
       },
       axisLine: {
         lineStyle: {
-          width: 20
+          width: fontSize(0.2)
         }
       },
       axisTick: {
-        distance: -45,
-        // splitNumber: 5,
+        distance: -fontSize(.45),
+        splitNumber: 5,
         lineStyle: {
           // width: 1,
           color: '#999'
         }
       },
       splitLine: {
-        distance: -52,
-        length: 14,
+        distance: -fontSize(.5),
+        length: fontSize(.14),
         lineStyle: {
           // width: 3,
           color: '#999'
         }
       },
       axisLabel: {
-        distance: -20,
+        distance: -fontSize(.2),
         color: '#999',
-        fontSize: 14
+        fontSize: fontSize(0.16)
       },
       anchor: {
         show: false
@@ -103,7 +104,7 @@ export const gaugeOption = {
         lineHeight: 40,
         borderRadius: 8,
         offsetCenter: [0, '50%'],
-        fontSize: 20,
+        fontSize: fontSize(0.2),
         fontWeight: 'bolder',
         formatter: '限电场站数',
         color: 'inherit'
@@ -134,6 +135,7 @@ export let lineOption = {
     itemStyle:{
       opacity:0
     },
+    textStyle:{fontSize:fontSize(0.14)},
     top:'2%'
   },
   xAxis: [

cpp-ui/src/views/largeScreen/echartsMap/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="mapContainer" style="width: 80%;height: calc(100vh - 50px)"></div>
+    <div ref="mapContainer" style="width: 80%;height: 95vh"></div>
   </div>
 </template>
 
@@ -15,7 +15,7 @@ export default {
     return {
       myChart: null,
       option: {},
-      mapCenter:[87.6, 43.8]
+      mapCenter: [87.6, 43.8]
     };
   },
   mounted() {
@@ -23,8 +23,12 @@ export default {
     this.$echarts.registerMap('xinjiang', {geoJSON: geoJson});
     this.$echarts.registerMap('boundary', {geoJSON: geoJsonBoundary});
     this.init()
-
-
+  },
+  beforeDestroy() {
+    const _this = this
+    window.removeEventListener('resize', function () {
+      _this.myChart.resize();
+    })
   },
   methods: {
     init() {
@@ -249,7 +253,7 @@ export default {
                     image: bg,
                   },
                   // backgroundColor: '#01e9ff',
-                  borderRadius: 5 ,
+                  borderRadius: 5,
                   padding: [0, 5, 0, 5],
                   height: 30
                 }
@@ -281,12 +285,12 @@ export default {
                 formatter: '{b|{b}}',
               },
             },
-            data: scatterData.map(item=>item.value),
+            data: scatterData.map(item => item.value),
             symbol: 'circle',
-            symbolSize: function (value){
+            symbolSize: function (value) {
               // 中心点的标记大
-              if(JSON.stringify(value) === JSON.stringify(_this.mapCenter)){
-                return [20,10]
+              if (JSON.stringify(value) === JSON.stringify(_this.mapCenter)) {
+                return [20, 10]
               }
               return [10, 5]
             },
@@ -308,13 +312,16 @@ export default {
       this.myChart.setOption(this.option);
       this.myChart.on('click', function (params) {
         // 控制台打印点击的数据
-        if(params.componentType === 'series' && params.componentSubType==='scatter'){
-          localStorage.setItem('map-jump-staion',params.data.stationCode)
+        if (params.componentType === 'series' && params.componentSubType === 'scatter') {
+          localStorage.setItem('map-jump-staion', params.data.stationCode)
           // TODO 跳转页面
           _this.$router.push({path: "cloudDataQuery"})
         }
         // 你可以在这里添加你的逻辑代码
       });
+      window.addEventListener("resize", function () {
+        _this.myChart.resize();
+      });
     }
   }
 

cpp-ui/src/views/largeScreen/index.vue

@@ -4,9 +4,10 @@
       <span class="sys-time">{{ sysTime }}</span>
       <div class="top-right-style flex items-center">
         <div class="top-badge">
-          <el-badge :value="badgeValue.alarm">
-            <img src="../../assets/images/svg/remind.svg" width="30px" @click="openAlarm()"/>
+          <el-badge :value="badgeValue.alarm" v-if="badgeValue.alarm !== 0">
+            <img src="../../assets/images/svg/remind.svg" class="badge-img" @click="openAlarm()"/>
           </el-badge>
+          <img src="../../assets/images/svg/remind.svg" class="badge-img" @click="openAlarm()" v-else/>
         </div>
 
         <div class="cpp-btu-background home-jump-btu">
@@ -52,21 +53,21 @@
       <!--     左 -->
       <div class="float-container top-default flex-column justify-around left-container-style">
         <div class="flex">
-          <img src="../../assets/images/dashboard/num3.png"/>
+          <img src="../../assets/images/dashboard/num3.png" class="left-img"/>
           <div class="flex-column justify-center items-center">
             <span>风速(m/s)</span>
             <span>{{ envData.ws }}</span>
           </div>
         </div>
         <div class="flex">
-          <img src="../../assets/images/dashboard/num4.png"/>
+          <img src="../../assets/images/dashboard/num4.png" class="left-img"/>
           <div class="flex-column justify-center items-center">
             <span>辐照度(W/㎡)</span>
             <span>{{ envData.radiance }}</span>
           </div>
         </div>
         <div class="flex">
-          <img src="../../assets/images/dashboard/num2.png"/>
+          <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
           <div class="flex-column justify-center items-center">
             <span>限电比(%)</span>
             <span>{{ xdbl }}</span>
@@ -451,6 +452,15 @@ export default {
 
     }
   },
+  beforeDestroy() {
+    const _this = this
+    window.removeEventListener('resize', function () {
+      _this.myChart0.resize();
+      _this.myChart1.resize();
+    })
+    clearInterval(this.sysInterval);
+    clearInterval(this.sysBizDataTimer);
+  },
   mounted() {
     this.init()
     const _this = this
@@ -465,10 +475,6 @@ export default {
       }, 60000);//每隔60秒刷新一次
     }
   },
-  destroyed() {
-    clearInterval(this.sysInterval);
-    clearInterval(this.sysBizDataTimer);
-  },
   methods: {
     formatNumber(num) {
       if (Number(num)==0){
@@ -631,19 +637,20 @@ export default {
       gaugeOption.series[1].data[0].value = this.xdczs
       gaugeOption.series[0].max = this.zczs
       gaugeOption.series[1].max = this.zczs
-      var myChart = this.$echarts.init(document.getElementById('gauge'));
-      myChart.setOption(gaugeOption, true)
+      this.myChart0 = this.$echarts.init(document.getElementById('gauge'));
+      this.myChart0.setOption(gaugeOption, true)
       lineOption.series[0].data = this.realList
       lineOption.series[1].data = this.ableList
       lineOption.series[2].data = this.theoryList
       lineOption.series[3].data = this.dqList
       lineOption.series[4].data = this.cdqList
 
-      var myChart1 = this.$echarts.init(document.getElementById('line'), 'dark');
-      myChart1.setOption(lineOption, true)
+      this.myChart1 = this.$echarts.init(document.getElementById('line'), 'dark');
+      this.myChart1.setOption(lineOption, true)
+      const _this = this
       window.addEventListener("resize", function () {
-        myChart.zhChart.resize();
-        myChart1.zhChart.resize();
+        _this.myChart0.resize();
+        _this.myChart1.resize();
       });
     },
     formatStartDate(row) {
@@ -859,7 +866,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$top-container-height: 8rem;
+$top-container-height: 11vh;
 .largeScreen {
   width: 100%;
   height: calc(100vh);
@@ -874,34 +881,41 @@ $top-container-height: 8rem;
 .top-right-style {
   width: 15%;
   position: absolute !important;
-  right: 15px;
+  right: .8vw;
   justify-content: end;
 }
 
 .top-badge {
   cursor: pointer;
-  margin-right: 30px;
-  padding-top: 2%;
+  margin-right: 1.5vw;
+  padding-top: .5vh;
 
   ::v-deep .el-badge__content.is-fixed {
     top: 5px;
     right: 5px;
   }
+  ::v-deep .el-badge__content {
+    border-radius: .5vw;
+    font-size: .6vw;
+    height: 2vh;
+    line-height: 2vh;
+    padding: 0 .2vw;
+  }
 }
 
 .home-jump-btu {
-  width: 100px;
-  height: 30px;
+  width: 5vw;
+  height: 3.15vh;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-
+  font-size: .85vw;
 }
 
 .chartStyle {
   width: 100%;
-  height: calc(35vh);
+  height: 35vh;
 }
 
 .home-main-container {
@@ -914,23 +928,29 @@ $top-container-height: 8rem;
 
 .right-container-style {
   width: 30%;
-  height: calc(100% - 10rem);
+  margin-top: 3vh;
+  //height: calc(100vh - 10rem);
 }
 
 .left-container-style {
   width: 12%;
   height: calc(50%);
   left: 4rem;
-  font-size: large;
+  font-size: 1vw;
+}
+.left-img{
+  width: 5vw;
+}
+.badge-img{
+  width: 1.5vw;
 }
-
 .border-style {
   border-radius: 5px;
   box-shadow: inset 0px 1px 8px 5px rgba(29, 128, 218, 0.63);
 }
 
 .right-top-style {
-  font-size: 20px;
+  font-size: 1vw;
   width: 50%;
 }
 
@@ -939,7 +959,7 @@ $top-container-height: 8rem;
 }
 
 .top-2 {
-  top: 3rem;
+  top: 5vh;
 }
 
 .top-default {
@@ -964,20 +984,21 @@ $top-container-height: 8rem;
 
 .text-style {
   width: 70%;
-  height: 30px;
-  padding: 1% 0 0 15%;
+  height: 3.5vh;
+  padding: .6vh 0 0 2.2vw;
+  font-size: .9vw;
 }
 
 .unit-style {
-  margin-left: 10px;
-  font-size: 20px;
+  margin-left: .5vw;
+  font-size: 1vw;
 }
 
 .num-style {
-  width: 30px;
-  height: 50px;
-  font-size: 30px;
-  margin-left: 10px;
+  width: 1.55vw;
+  height: 5vh;
+  font-size: 1.5vw;
+  margin-left: 0.5vw;
 }
 
 .number-bg-style {
@@ -986,9 +1007,9 @@ $top-container-height: 8rem;
 
 .right-title-style {
   width: 90%;
-  padding: 1% 0 0 10%;
-  font-size: 18px;
-  height: 35px;
+  padding: .5vh 0 0 2vw;
+  font-size: 1vw;
+  height: 3.6vh;
 }
 
 .barTitleBg {

cpp-ui/src/views/regulation/dqRegulation/index.vue

@@ -30,7 +30,7 @@
       </el-form>
     </div>
     <el-row>
-      <el-col :span="7">
+      <el-col :span="9">
         <div class="divDescribe">调控策略</div>
         <div class="divDescribe">调控截止时间：{{ this.dqEndTime }}</div>
         <div class="divDescribe">调控方式：调控值=原始值*系数+数值</div>
@@ -43,51 +43,50 @@
 
         <div class="divTable">
           <el-table
-              :data="tableData"
-              height="550px"
-              :loading="loading"
-              size="mini"
-              style="width: 100%">
+            :data="tableData"
+            :loading="loading"
+            size="mini" height="60vh"
+            style="width: 100%;">
             <el-table-column
-                prop="time"
-                header-align="center"
-                align="center"
-                label="时间"
+              prop="time"
+              header-align="center"
+              align="center"
+              label="时间" fixed min-width="50px"
             >
             </el-table-column>
             <el-table-column
-                prop="xs"
-                header-align="center"
-                align="center"
-                label="系数">
+              prop="xs"
+              header-align="center"
+              align="center"
+              label="系数" min-width="50px">
               <template slot-scope="scope">
                 <vxe-input type="number" v-model="scope.row.xs" size="small" style="width:100%" min="0"
                            placeholder="" @change="setValueByManual(scope.row,scope.$index)"></vxe-input>
               </template>
             </el-table-column>
             <el-table-column
-                prop="sz"
-                header-align="center"
-                align="center"
-                label="数值">
+              prop="sz"
+              header-align="center"
+              align="center"
+              label="数值" min-width="50px">
               <template slot-scope="scope">
                 <vxe-input type="number" v-model="scope.row.sz" size="small" style="width:100%"
                            placeholder="" @change="setValueByManual(scope.row,scope.$index)"></vxe-input>
               </template>
             </el-table-column>
             <el-table-column
-                prop="ysValue"
-                header-align="center"
-                align="center"
-                label="原始值">
+              prop="ysValue"
+              header-align="center"
+              align="center"
+              label="原始值" min-width="60px">
             </el-table-column>
             <el-table-column
-                prop="tkValue"
-                header-align="center"
-                align="center"
-                label="调控值"
-                :max="capacity"
-                :min="0"
+              prop="tkValue"
+              header-align="center"
+              align="center"
+              label="调控值"
+              :max="capacity"
+              :min="0" min-width="60px"
             >
             </el-table-column>
           </el-table>
@@ -99,8 +98,8 @@
         </div>
 
       </el-col>
-      <el-col :span="17">
-        <div style="float:left;width: 95%;height: 750px" id="tkcharts"></div>
+      <el-col :span="15">
+        <div style="width: 100%;height: 82vh" id="tkcharts"></div>
       </el-col>
     </el-row>
     <div class="dark-el-dialog">
@@ -328,7 +327,7 @@ export default {
           text: '短期调控曲线',
           textStyle: {
             fontWeight: 'normal',
-            fontSize: 16,
+            fontSize: fontSize(.16),
           },
           left: 'center'
         },
@@ -347,9 +346,10 @@ export default {
           itemHeight: 5,
           itemGap: 13,
           data: ['原始值', '调控值', '参考值上限', '参考值下限'],
-          right: '4%',
+          // right: '4%',
+          right: 0,
           textStyle: {
-            fontSize: 12,
+            fontSize: fontSize(.14),
             // color: this.lineColor
           },
           selected: {