短期调控样式调整

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

@@ -149,6 +149,7 @@
                  style="height: calc(100% - 50px)">
         <div class="reg-config-container flex justify-between">
           <div class="reg-config-con">
+            <span class="flex justify-center dialog-text-title">策略选择</span>
             <!--  策略列表          -->
             <div class="reg-config flex">
               <div class="reg-config-radio" style="margin-top: 15px">
@@ -183,7 +184,7 @@
                 </el-select>
               </div>
             </div>
-            <div id="currentSelectFunction" style="display: none;margin-top: 10px" class="reg-config flex items-center">
+            <div id="currentSelectFunction" style="display: none;margin-top: 30px;margin-left: 24px;" class="reg-config flex items-center">
               <div>当前选择策略：</div>
               <div style="width: 200px">
                 {{ this.currentStrategy }}
@@ -193,7 +194,7 @@
                 <el-button @click="trialDelete">删除</el-button>
               </div>
             </div>
-            <div slot="footer" class="dialog-footer">
+            <div slot="footer" class="reg-dialog-footer">
               <el-button type="primary" @click="quickUseCommit">一键应用</el-button>
               <el-button @click="cancelQuickUse">取 消</el-button>
             </div>
@@ -201,13 +202,13 @@
           <!--          <el-divider direction="vertical" style="height: calc(100% - 30px)"></el-divider>-->
           <div>
             <!--   预览表格         -->
-            <span class="flex justify-center" style="font-size: 16px;font-weight: bold;">预览策略展示</span>
+            <span class="flex justify-center dialog-text-title">预览策略展示</span>
             <el-table
                 :data="trialData"
                 height="550px"
                 :loading="loading"
                 size="mini"
-                style="width: 100%">
+                style="width: 100%;margin-top: 13px;">
               <el-table-column
                   prop="time"
                   header-align="center"
@@ -306,7 +307,6 @@ export default {
           textStyle: {
             fontWeight: 'normal',
             fontSize: 16,
-            // color: this.lineColor
           },
           left: 'center'
         },
@@ -355,12 +355,6 @@ export default {
           bottom: '10%',
           containLabel: true
         },
-        visualMap: {
-          show: false,
-          dimension: 0,
-          seriesIndex: 1,
-          pieces: this.visualMapPieces
-        },
         xAxis: [{
           type: 'category',
           boundaryGap: false,
@@ -426,12 +420,6 @@ export default {
                 borderWidth: 50
               }
             },
-            markLine: {
-              symbol: ['none', 'none'],
-              label: {show: false},
-              data: this.markLineData
-            },
-            areaStyle: {},
             data: []
           },
           {
@@ -498,51 +486,6 @@ export default {
   },
   computed: {},
   methods: {
-    // 对改动区域阴影展示
-    getShadow() {
-      this.visualMapPieces = []
-      this.markLineData = []
-      // 定义临时暂存调控点位
-      let tempTkPoint = new Array()
-      // 遍历调控曲线数据，组装阴影修改的部分·
-      for (let i = 0; i < this.tableData.length; i++) {
-        if (this.tableData[i].ysValue != this.tableData[i].tkValue) {
-          tempTkPoint.push(i)
-        }
-      }
-
-      // 封装阴影数据
-      if (!Array.isArray(tempTkPoint) || tempTkPoint.length === 0) {
-        return
-      }
-      tempTkPoint.sort((a, b) => a - b); // 先对数组进行排序
-      let currentGroup = [];
-      let prevNum = tempTkPoint[0] - 1; // 初始化为一个不可能的值
-      for (let num of tempTkPoint) {
-        if (num === prevNum + 1) {
-          currentGroup.push(num);
-        } else {
-          if (currentGroup.length > 0) {
-            const minNum = Math.min(...currentGroup);
-            const maxNum = Math.max(...currentGroup);
-            this.visualMapPieces.push({gt: minNum, lt: maxNum, color: 'rgba(0, 0, 180, 0.4)'});
-            this.markLineData.push({xAxis: minNum})
-            this.markLineData.push({xAxis: maxNum})
-            currentGroup = [];
-          }
-          currentGroup.push(num);
-        }
-        prevNum = num;
-      }
-      // 处理最后一组
-      if (currentGroup.length > 0) {
-        const minNum = Math.min(...currentGroup);
-        const maxNum = Math.max(...currentGroup);
-        this.visualMapPieces.push({gt: minNum, lt: maxNum, color: 'rgba(0, 0, 180, 0.4)'});
-        this.markLineData.push({xAxis: minNum})
-        this.markLineData.push({xAxis: maxNum})
-      }
-    },
     // 策略名称下拉框选择
     changeUsualName(id) {
       const item = this.usualList.find(item => item.id == id)
@@ -797,11 +740,6 @@ export default {
         }
         this.tkData = tkArray
         this.chartOption.series[1].data = this.tkData
-        // 获取阴影
-        this.getShadow()
-        this.chartOption.visualMap.pieces = this.visualMapPieces
-        this.chartOption.series[1].markLine.data = this.markLineData
-
         this.chart.setOption(this.chartOption)
         //再调用updatePosition
         this.updatePosition()
@@ -845,10 +783,6 @@ export default {
       this.chartOption.series[1].data = this.tkData
       this.chartOption.series[2].data = this.refUpData
       this.chartOption.series[3].data = this.refDownData
-      // 获取阴影
-      this.getShadow()
-      this.chartOption.visualMap.pieces = this.visualMapPieces
-      this.chartOption.series[1].markLine.data = this.markLineData
 
       let myChart = this.chart
       let cap = this.capacity
@@ -882,11 +816,8 @@ export default {
       // window.addEventListener('resize', this1.updatePosition);
       myChart.on('dataZoom', this1.updatePosition);
 
-
       // 拖动曲线后，将数值重新赋值给表格
-      // this.tableData = form1
       this.chartOption.yAxis[0].max = this.capacity
-
       myChart.setOption(this.chartOption)
     },
     updatePosition() {
@@ -928,11 +859,6 @@ export default {
       this1.tableData[dataIndex].tkValue = this1.tkData[dataIndex][1]
       // 根据调控值更新表格中数值字段，数值=调控值-（原始值*系数）
       this1.tableData[dataIndex].sz = (this1.tkData[dataIndex][1] - (this1.tableData[dataIndex].ysValue * this1.tableData[dataIndex].xs)).toFixed(2)
-      // 获取阴影
-      this.getShadow()
-      this.chartOption.visualMap.pieces = this.visualMapPieces
-      this.chartOption.series[1].markLine.data = this.markLineData
-
       myChart.setOption(this.chartOption)
       // Update data
       myChart.setOption({
@@ -1001,34 +927,50 @@ export default {
   text-align: center
 }
 
+.dialog-text-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.reg-config-container {
+  height: 100%;
+}
+
 .reg-config-con {
-//width: 50%; height: 350px;
+  width: 50%;
   position: relative;
 }
 
 .reg-config {
   margin-top: 5px;
 }
-.reg-config-radio{
+
+.reg-config-radio {
   width: 150px;
 }
+
 .reg-config-btu {
   width: 215px;
-  height: 190px;
+  //height: 190px;
   margin-top: 5px;
 }
 
-.dialog-footer {
+.reg-dialog-footer {
   position: absolute;
   bottom: 0;
   left: 35%;
 //text-align: center;
 }
 
-/deep/ .reg-config-btu .el-button {
+/deep/ .reg-config-btu .el-button:first-child {
   margin-top: 5px;
 }
-
+/deep/ .reg-config-btu .el-button {
+  margin-top: 10px;
+}
+/deep/ .reg-config-btu .el-button:last-child {
+  margin-bottom: 10px;
+}
 /deep/ .reg-config-btu .el-button + .el-button {
   margin-left: 0px;
 }