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

<template>
  <div class="app-container">
    <div class="dark-el-input dark-el-button">
      <el-form ref="queryForm" size="small" :inline="true" popper-class="cpp-popper">
        <el-form-item label="预测日期">
          <el-date-picker
              :clearable="false"
              v-model="dateTime"
              type="date"
              :picker-options="expireDateOption"
              placeholder="选择生成日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="场站名称">
          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
            <el-option
                v-for="item in stationList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" style="margin-left: 5px" icon="el-icon-search" @click="dataQuery">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="7">
        <div class="divDescribe">调控策略</div>
        <div class="divDescribe">调控截止时间：{{ this.dqEndTime }}</div>
        <div class="divDescribe">调控方式：调控值=原始值*系数+数值</div>
        <div class="divDescribeBtn">
          <div class="dark-el-input dark-el-button">
            <el-button type="primary" size="small" style="margin-left: 5px" @click="quickUse">一键应用</el-button>
            <el-button type="primary" size="small" style="margin-left: 5px" @click="usualSet">设为常用</el-button>
          </div>
        </div>

        <div class="divTable">
          <el-table
              :data="tableData"
              height="550px"
              :loading="loading"
              size="mini"
              style="width: 100%">
            <el-table-column
                prop="time"
                header-align="center"
                align="center"
                label="时间"
            >
            </el-table-column>
            <el-table-column
                prop="xs"
                header-align="center"
                align="center"
                label="系数">
              <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="数值">
              <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="原始值">
            </el-table-column>
            <el-table-column
                prop="tkValue"
                header-align="center"
                align="center"
                label="调控值"
                :max="capacity"
                :min="0"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="tkBtn">
          <div class="dark-el-input dark-el-button">
            <el-button type="primary" size="small" style="margin-left: 5px" @click="tkDialog">调控功率</el-button>
          </div>
        </div>

      </el-col>
      <el-col :span="17">
        <div style="float:left;width: 95%;height: 750px" id="tkcharts"></div>
      </el-col>
    </el-row>
    <div class="dark-el-dialog">
      <el-dialog :visible.sync="usualOpen" :before-close="cancelUsual" :close-on-click-modal="false" width="450px"
                 height="600px">

        <el-form ref="usualForm" :model="usualForm" width="430px" label-width="70px">
          <el-row class="mb4">
            <el-col :span="24">
              <el-form-item label="常用名称" prop="name">
                <el-input style="width: 100%" v-model="usualForm.usualName" maxlength="15" popper-class="cpp-popper"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mb4">
            <el-col>
              <div style="color: #fff">保存常用名可以在一键应用中找到历史调控策略。</div>
            </el-col>

          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="commitUsual">确 定</el-button>
          <el-button @click="cancelUsual">取 消</el-button>
        </div>

      </el-dialog>
    </div>
    <div class="dark-el-dialog">
      <el-dialog :visible.sync="tkOpen" :close-on-click-modal="false" width="700px" height="600px">
        <div class="flex" style="color:#ffffff;">
          确认对
          <span style="background: #d3a4ff">{{ this.tkrq }}</span>
          日，
          <span style="background: #d3a4ff">{{ this.stationName }}</span>
          的短期功率调控，调控后数据将下发到对应场站上报调度。
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="tkCommit">确 定</el-button>
          <el-button @click="tkCancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!--  策略选择弹窗     -->
    <div class="dark-el-dialog">
      <el-dialog :visible.sync="quickUseOpen" :before-close="cancelQuickUse" :close-on-click-modal="false"
                 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">
                <el-radio v-model="vradio" label="1" @click.native.prevent="radioChange('1')">快捷选择历史策略：
                </el-radio>
              </div>

              <div class="flex-column reg-config-btu">
                <!-- 循环生成按钮 -->
                <el-button
                    v-for="(button, index) in buttons"
                    :key="index"
                    @click="handleButtonClick(button.usualName)"
                >
                  {{ button.usualName }}
                </el-button>
              </div>
            </div>
            <div class="reg-config flex items-center">
              <div class="reg-config-radio">
                <el-radio v-model="vradio" label="2" @click.native.prevent="radioChange('2')">选择历史策略：</el-radio>
              </div>
              <div>
                <el-select ref="selectUsualName" v-model="usualId" placeholder="请选择" popper-class="cpp-popper"
                           :disabled="disabled" @change="changeUsualName">
                  <el-option
                      v-for="item in usualList"
                      :key="item.id"
                      :label="item.usualName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div id="currentSelectFunction" style="display: none;margin-top: 30px;margin-left: 24px;" class="reg-config flex items-center">
              <div>当前选择策略：</div>
              <div style="width: 215px">
                {{ this.currentStrategy }}
              </div>
              <div>
                <el-button @click="trialPreview">预览</el-button>
                <el-button @click="trialDelete">删除</el-button>
              </div>
            </div>
            <div slot="footer" class="reg-dialog-footer">
              <el-button type="primary" @click="quickUseCommit">一键应用</el-button>
              <el-button @click="cancelQuickUse">取 消</el-button>
            </div>
          </div>
          <!--          <el-divider direction="vertical" style="height: calc(100% - 30px)"></el-divider>-->
          <div>
            <!--   预览表格         -->
            <span class="flex justify-center dialog-text-title">预览策略展示</span>
            <el-table
                :data="trialData"
                height="550px"
                :loading="loading"
                size="mini"
                style="width: 100%;margin-top: 13px;">
              <el-table-column
                  prop="time"
                  header-align="center"
                  align="center"
                  label="时间"
              >
              </el-table-column>
              <el-table-column
                  prop="xs"
                  header-align="center"
                  align="center"
                  label="系数">
              </el-table-column>
              <el-table-column
                  prop="sz"
                  header-align="center"
                  align="center"
                  label="数值">
              </el-table-column>
              <el-table-column
                  prop="ysValue"
                  header-align="center"
                  align="center"
                  label="原始值">
              </el-table-column>
              <el-table-column
                  prop="tkValue"
                  header-align="center"
                  align="center"
                  label="调控值"
                  :max="capacity"
                  :min="0"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>


      </el-dialog>
    </div>

  </div>
</template>


<script>
import * as echarts from "echarts";

export default {
  name: 'inverterinfo',
  data() {
    return {
      dqEndTime: '',
      markLineData: new Array(),
      visualMapPieces: new Array(),
      trialData: [],
      disabled: true,
      vradio: '1',
      buttons: new Array(),
      usualId: '',
      usualList: [],
      currentStrategy: '',
      stationName: '',
      tkrq: '',
      quickUseOpen: false,
      tkOpen: false,
      usualOpen: false,
      usualForm: {
        usualName: undefined
      },
      expireDateOption: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      loading: false,
      symbolSize: 8,
      capacity: '',
      tkData: [],
      tableData: [],
      hoursArray: [],
      chart: null,
      form: [],
      dateTime: new Date(new Date().toLocaleDateString()).getTime() + (60 * 60 * 24 * 1000),
      stationList: [],
      stationCode: '',
      ysData: [],
      refUpData: [],
      refDownData: [],
      chartOption: {
        backgroundColor: 'transparent',
        title: {
          top: 20,
          text: '短期调控曲线',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['原始值', '调控值', '参考值上限', '参考值下限'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            // color: this.lineColor
          },
          selected: {
            '原始值': true,
            '调控值': true,
            '参考值上限': true,
            '参考值下限': true,
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          left: "15%",
          right: "15%",
          throttle: 50
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {onZero: false},
        }],
        yAxis: [{
          type: 'value',
          name: 'MW',
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [{
          name: '原始值',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          connectNulls: true,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderWidth: 12
            }
          },
          data: this.ysData
        },
          {
            id: 'a',
            name: '调控值',
            type: 'line',
            showSymbol: false,
            smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            connectNulls: true,
            lineStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                width: 2
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderWidth: 50
              }
            },
            data: []
          },
          {
            name: '参考值上限',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            connectNulls: true,
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
                type: 'dashed'   //设置线条类型
              }
            },
            itemStyle: {
              normal: {
                color: '#00FF00',
                borderWidth: 12
              }
            },
            data: this.refUpData
          },
          {
            name: '参考值下限',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            connectNulls: true,
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
                type: 'dashed'   //设置线条类型
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(167,27,189)',
                borderWidth: 12
              }
            },
            data: this.refDownData
          },
        ]
      }
    }
  },
  created() {
    this.getStationCode()
    this.getDqEndTime()
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {},
  methods: {
    // 策略名称下拉框选择
    changeUsualName(id) {
      const item = this.usualList.find(item => item.id == id)
      let usualName = item ? item.usualName : ''
      this.currentStrategy = usualName
      document.getElementById("currentSelectFunction").style.display = ''
    },
    radioChange(radioValue) {
      document.getElementById("currentSelectFunction").style.display = 'none'
      this.currentStrategy = ''
      this.trialData = []
      if (radioValue == '1') {
        this.vradio = '1'
        this.usualId = ''
        this.disabled = true
      } else {
        this.vradio = '2'
        this.disabled = false

      }
    },
    // 默认常用按钮事件
    handleButtonClick(usualName) {
      if (this.vradio == '1') {
        // 执行常用按钮点击
        this.currentStrategy = usualName
        document.getElementById("currentSelectFunction").style.display = ''
      }
    },
    async executeTrial() {
      const param = {
        "usualName": this.currentStrategy,
        "stationCode": this.tableData[0].stationCode,
        "time": new Date(this.tableData[0].forecastDate).getTime()
      }
      // 获取策略名称的系数和数值
      await this.$axios.get('/dqRegulationController/trialData', {params: param}).then(response => {
        this.trialData = response.data
      })
    },
    // 删除按钮点击
    trialDelete() {
      if (this.currentStrategy == '') {
        this.$message.warning("请选择策略名称进行删除！")
        return
      }
      this.$confirm('是否确认删除【' + this.currentStrategy + '】？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 提交名称及系数配置
        const formData = new FormData()
        formData.append('usualName', this.currentStrategy)
        this.$axios.post('/dqUsualController/deleteUsual', formData, {
          headers: {
            'Content-Type': 'multipart/form-data' // 设置请求头，确保服务器正确解析 FormData
          }
        }).then((res) => {
          this.$message.success('删除策略成功！')
          document.getElementById("currentSelectFunction").style.display = "none"
          this.trialData = []
          // 重新渲染下拉框
          this.renderUsual()
        }).catch((error) => {
        })
      })
    },
    // 预览按钮点击
    trialPreview() {
      if (this.currentStrategy == '') {
        this.$message.warning("请选择策略名称进行预览！")
        return
      }
      this.executeTrial()
    },
    // 一键应用中确定
    async quickUseCommit() {
      if (this.currentStrategy == '') {
        this.$message.warning("请选择策略进行应用！")
        return
      }
      await this.executeTrial()
      // 将列表数据赋值给底层列表
      this.tableData = this.trialData
      // 将预算的调控曲线赋值给底层曲线上
      let tkArray = new Array()
      for (var i = 0; i < this.tableData.length; i++) {
        let array = new Array()
        array.push(this.tableData[i].time)
        array.push(this.tableData[i].tkValue)
        tkArray.push(array)
      }
      this.tkData = tkArray
      this.chartOption.series[1].data = this.tkData
      this.chart.setOption(this.chartOption)
      //再调用updatePosition
      this.updatePosition()
      this.cancelQuickUse()
    },
    // 一键应用中取消按钮
    cancelQuickUse() {
      this.quickUseOpen = false;
      this.trialData = []
      this.currentStrategy = ''
      this.buttons = []
      this.vradio = '1'
      this.disabled = true
      document.getElementById("currentSelectFunction").style.display = 'none'
    },
    renderUsual() {
      this.buttons = []
      this.usualId = ''
      this.currentStrategy = ''
      // 先获取常用下拉框
      this.$axios.get('/dqUsualController/getUsualList').then(response => {
        this.usualList = response.data
        if (this.usualList.length > 0) {
          // 循环list，将前5个给默认常用，将第1个默认选中下拉框
          for (let i = 0; i < this.usualList.length; i++) {
            if (i < 5) {
              this.buttons.push(this.usualList[i])
            }
          }
        }
      })
    },
    quickUse() {
      if (this.tableData.length == 0) {
        this.$message.warning("调控列表为空，不能操作！")
        return
      }
      this.renderUsual()
      this.quickUseOpen = true
    },
    // 点击设为常用按钮触发
    usualSet() {
      if (this.tableData.length == 0) {
        this.$message.warning("调控列表为空，不能操作！")
        return
      }
      this.usualOpen = true
    },
    // 设为常用弹出框保存按钮
    commitUsual() {
      if (this.tableData == undefined || this.tableData.length == 0) {
        this.$message.warning("请查询列表才可以设为常用！")
        return
      }
      if (this.usualForm.usualName == null || this.usualForm.usualName == '' || this.usualForm.usualName == undefined) {
        this.$message.warning("请输入常用名称！")
        return
      } else {
        let tempUsualName = this.usualForm.usualName.trim()
        if (tempUsualName == '') {
          this.$message.warning("请输入常用名称！")
          return
        }
        // 提交名称及系数配置
        const param = {
          "tempShortRegulationDtoList": this.tableData,
          "usualName": tempUsualName
        }
        this.$axios.post('/dqUsualController/saveUsual', param).then((res) => {
          this.$message.success('常用策略保存成功！')
          this.usualOpen = false
          this.resetUsual()
        }).catch((error) => {
        })
      }
    },
    // 表单重置
    resetUsual() {
      this.usualForm = {
        usualName: undefined,
      },
          this.resetForm("usualForm");
    },
    // 取消按钮
    cancelUsual() {
      this.usualOpen = false;
      this.resetUsual();
    },
    tkDialog() {
      // 判断截止时间，超出时间不允许调控
      const now = new Date();
      if (now.getTime() > new Date(this.dqEndTime)) {
        this.$message.warning("截止时间已过，不能进行调控！")
        return
      }

      if (this.tableData.length == 0) {
        this.$message.warning("调控列表为空，不能操作！")
        return
      }
      const date = new Date(this.dateTime); // 如果long是毫秒
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      this.tkrq = `${year}-${month}-${day}`; // 根据需要可以添加时间部分
      const item = this.stationList.find(item => item.value === this.stationCode)
      this.stationName = item ? item.label : ''
      this.tkOpen = true

    },
    tkCancel() {
      this.tkOpen = false
    },
    // 调控列表提交
    tkCommit() {
      if (this.tableData.length == 0) {
        this.$message.warning("调控列表为空，不能进行提交！")
        return
      }
      // 判断系数和数值2个字段是否有为空
      for (let i = 0; i < this.tableData.length; i++) {
        if (isNaN(this.tableData[i].tkValue)) {
          this.$message.warning(this.tableData[i].time + "存在空值，不能进行提交！")
          return
        }
      }

      // 保存调控值列表
      this.$axios.post('/dqRegulationController/updateDqRegulation', this.tableData).then((res) => {
        this.$message.success('调控功率保存成功！')
        // this.dataQuery()
      }).catch((error) => {
      })
      this.tkOpen = false
    },

    //通过表格内系数或固定值修改  生成曲线以及最终预测结果
    setValueByManual(row, index) {
      if (row.xs !== undefined && row.sz !== undefined) {
        // 计算调控值
        row.tkValue = parseFloat((parseFloat(row.ysValue) * parseFloat(row.xs) + parseFloat(row.sz)).toFixed(2))
        if (row.tkValue < 0) {
          row.tkValue = 0
        }
        if (row.tkValue > this.capacity) {
          row.tkValue = this.capacity
        }
        // 赋值给表格
        this.tableData[index] = row
        // 遍历tableData封装调控曲线数组
        let tkArray = new Array()
        for (var i = 0; i < this.tableData.length; i++) {
          let array = new Array()
          array.push(this.tableData[i].time)
          array.push(this.tableData[i].tkValue)
          tkArray.push(array)
        }
        this.tkData = tkArray
        this.chartOption.series[1].data = this.tkData
        this.chart.setOption(this.chartOption)
        //再调用updatePosition
        this.updatePosition()
      }
    },
    dataQuery() {
      this.loading = true
      let queryParams = {
        "stationCode": this.stationCode,
        "time": Math.round(this.dateTime),
      }
      this.$axios.get('/dqRegulationController/queryData', {params: queryParams}).then(response => {
        this.chart.clear()
        this.capacity = response.data.electricField.capacity
        this.tableData = response.data.tempShortRegulationList
        this.ysData = response.data.ysData
        this.refUpData = response.data.refUpData
        this.refDownData = response.data.refDownData
        this.tkData = response.data.tkDataList
        this.draData()

        this.loading = false
      }).catch(() => {
        this.tableData = []
        this.ysData = []
        this.refUpData = []
        this.refDownData = []
        this.tkData = []
        this.chart.clear()
        this.chartOption.series[0].data = this.ysData
        this.chartOption.series[1].data = this.tkData
        this.chartOption.series[2].data = this.refUpData
        this.chartOption.series[3].data = this.refDownData
        this.chart.setOption(this.chartOption)
        this.loading = false
      });
    },
    draData() {
      let this1 = this;
      this.chartOption.series[0].data = this.ysData
      this.chartOption.series[1].data = this.tkData
      this.chartOption.series[2].data = this.refUpData
      this.chartOption.series[3].data = this.refDownData

      let myChart = this.chart
      let cap = this.capacity
      setTimeout(function () {
        myChart.setOption({
          graphic: this1.tkData.map(function (item, dataIndex) {
            return {
              type: 'circle',
              position: myChart.convertToPixel('grid', item),
              shape: {
                cx: 0,
                cy: 0,
                r: 10
              },
              invisible: true,
              draggable: true,
              ondrag: function (dx, dy,) {
                this1.onPointDragging(dataIndex, [item[0], dx.offsetY], cap);
              },
              onmousemove: function () {
                this1.showTooltip(dataIndex);
              },
              onmouseout: function () {
                this1.hideTooltip(dataIndex);
              },
              z: 100
            };
          })
        });
      }, 0);
      // window.addEventListener('resize', this1.updatePosition);
      myChart.on('dataZoom', this1.updatePosition);

      // 拖动曲线后，将数值重新赋值给表格
      this.chartOption.yAxis[0].max = this.capacity
      myChart.setOption(this.chartOption)
    },
    updatePosition() {
      let this1 = this;
      let myChart = this.chart
      myChart.setOption({
        graphic: this1.tkData.map(function (item, dataIndex) {
          return {
            position: myChart.convertToPixel('grid', item)
          };
        })
      });
    },
    showTooltip(dataIndex) {
      let myChart = this.chart
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex
      });
    },
    hideTooltip(dataIndex) {
      let myChart = this.chart
      myChart.dispatchAction({
        type: 'hideTip'
      });
    },
    onPointDragging(dataIndex, pos, capacity) {
      let this1 = this;
      let myChart = this.chart
      this1.tkData[dataIndex][1] = myChart.convertFromPixel('grid', pos)[1].toFixed(2);
      if (myChart.convertFromPixel('grid', pos)[1].toFixed(2) > capacity) {
        this1.tkData[dataIndex][1] = capacity
      }
      if (myChart.convertFromPixel('grid', pos)[1].toFixed(2) < 0) {
        this1.tkData[dataIndex][1] = 0
      }
      // 赋值调控值字段
      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)
      myChart.setOption(this.chartOption)
      // Update data
      myChart.setOption({
        series: [
          {
            id: 'a',
            data: this1.tkData,
          }
        ]
      });
      this.updatePosition()
    },
    // 获取短期截止时间
    getDqEndTime() {
      this.$axios({url: '/dqRegulationController/getDqEndTime', method: 'get'}).then(response => {
        this.dqEndTime = response.data
      })
    },
    getStationCode() {
      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
        }
      })
    },
    initChart() {
      for (let i = 0; i < 24 * 60; i += 15) {
        let hours = Math.floor(i / 60);
        let minutes = i % 60;
        this.hoursArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
      }
      this.chartOption.xAxis[0].data = this.hoursArray
      this.chart = echarts.init(document.getElementById('tkcharts'), 'dark')
      this.chart.setOption(this.chartOption)
    },
  }
}
</script>
<style scoped>
.divDescribe {
  position: relative;
  top: 20px; /* 向下移动15px */
  width: 100%;
  text-align: center
}

.divDescribeBtn {
  position: relative;
  top: 25px; /* 向下移动15px */
  width: 100%;
  text-align: right
}

.divTable {
  position: relative;
  top: 30px; /* 向下移动15px */
  width: 100%;
  text-align: center
}

.tkBtn {
  position: relative;
  top: 50px; /* 向下移动15px */
  width: 100%;
  text-align: center
}

.dialog-text-title {
  font-size: 16px;
  font-weight: bold;
}

.reg-config-container {
  height: 100%;
}

.reg-config-con {
  width: 50%;
  position: relative;
}

.reg-config {
  margin-top: 5px;
}

.reg-config-radio {
  width: 150px;
}

.reg-config-btu {
  width: 215px;
  //height: 190px;
  margin-top: 5px;
}

.reg-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 35%;
//text-align: center;
}

/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;
}
</style>