{"remainingRequest":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\test\\ssi-satoken\\ui\\src\\views\\largeScreen\\components\\shortForecastChart.vue?vue&type=style&index=0&id=397e9c24&scoped=true&lang=css&","dependencies":[{"path":"D:\\test\\ssi-satoken\\ui\\src\\views\\largeScreen\\components\\shortForecastChart.vue","mtime":1697181343377},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":1669864554855},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1697679531049},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\postcss-loader\\src\\index.js","mtime":1669864555556},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1669864538178},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1697679531049}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgouc2hvcnRGb3JlY2FzdENoYXJ0RGl2IHsKICBtYXJnaW4tdG9wOiAxJTsKfQoKI3N0RHJhZ0NoYXJ0IHsKICB3aWR0aDogMTAwJTsKICBoZWlnaHQ6IDUyNXB4Owp9CgovKuihqOagvCovCi5zaG9ydEZvcmVjYXN0Q2hhcnREaXYgL2RlZXAvIC5lbC10YWJsZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDsKICBjb2xvcjogd2hpdGU7Cn0KLnNob3J0Rm9yZWNhc3RDaGFydERpdiAvZGVlcC8gIC5lbC10YWJsZSwgLmVsLXRhYmxlX19leHBhbmRlZC1jZWxsIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKfQouc2hvcnRGb3JlY2FzdENoYXJ0RGl2L2RlZXAvIC5lbC10YWJsZSB0ciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQhaW1wb3J0YW50Owp9Ci5zaG9ydEZvcmVjYXN0Q2hhcnREaXYgL2RlZXAvICAuZWwtdGFibGUtLWVuYWJsZS1yb3ctdHJhbnNpdGlvbiAuZWwtdGFibGVfX2JvZHkgdGQsIC5lbC10YWJsZSAuY2VsbHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKfQouc2hvcnRGb3JlY2FzdENoYXJ0RGl2IC9kZWVwLy5lbC10YWJsZSB0Ym9keSB0cjpob3ZlciA+IHRkIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudCAhaW1wb3J0YW50Owp9Cg=="},{"version":3,"sources":["shortForecastChart.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoZA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"shortForecastChart.vue","sourceRoot":"src/views/largeScreen/components","sourcesContent":["<template>\n  <div class=\"shortForecastChartDiv\">\n    <el-form size=\"small\" :inline=\"true\" label-width=\"68px\">\n      <el-form-item>\n        <el-button type=\"danger\" icon=\"el-icon-edit\" plain size=\"mini\">基于AI策略填充</el-button>\n        <el-button type=\"success\" icon=\"el-icon-edit\" plain size=\"mini\">基于预测数据填充</el-button>\n        <el-button type=\"primary\" icon=\"el-icon-document-add\" plain size=\"mini\" @click=\"submit\">保存</el-button>\n        <el-button type=\"warning\" icon=\"el-icon-download\" plain size=\"mini\">导出</el-button>\n        <el-button icon=\"el-icon-refresh\" size=\"mini\">重置</el-button>\n      </el-form-item>\n    </el-form>\n    <el-row class=\"row\" :gutter=\"15\">\n      <el-col :span=\"16\">\n        <div id=\"stDragChart\"/>\n      </el-col>\n      <el-col :span=\"8\">\n        <el-table v-loading=\"tableLoading\" :header-cell-style=\"{background: 'transparent !important',color:'white'}\"\n                  :key=\"Math.random()\" :data=\"gridData\" height=\"500px\" border size=\"mini\">\n          <el-table-column\n            prop=\"timeNode\"\n            header-align=\"center\"\n            align=\"center\"\n            width=\"100px\"\n            label=\"时刻\">\n          </el-table-column>\n          <el-table-column\n            prop=\"fData\"\n            header-align=\"center\"\n            align=\"center\"\n            width=\"120px\"\n            label=\"调整前(MW)\">\n          </el-table-column>\n          <el-table-column\n            :show-overflow-tooltip=\"true\"\n            prop=\"mData\"\n            header-align=\"center\"\n            align=\"center\"\n            label=\"调整后(MW)\">\n            <template slot-scope=\"scope\">\n              <el-input @input=\"changeMessage($event)\" type=\"number\" v-model=\"scope.row.mData\" size=\"small\" style=\"width:100%\" :max=\"capacity\" placeholder=\"\" @change=\"updateRowData(scope.row,scope.column)\"></el-input>\n            </template>\n          </el-table-column>\n        </el-table>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\nimport * as echarts from \"echarts\";\n\nexport default {\n  name: \"shortForecastChart\",\n  data() {\n    return {\n      stDragChart: null,\n      tableLoading: false,\n      capacity: 50,\n      dataForDrawing:{\"forecastPowers\":[[\"00:00\",\"24.87\"],[\"00:15\",\"24.73\"],[\"00:30\",\"24.59\"],[\"00:45\",\"24.43\"],[\"01:00\",\"24.26\"],[\"01:15\",\"24.01\"],[\"01:30\",\"23.53\"],[\"01:45\",\"23.36\"],[\"02:00\",\"23.07\"],[\"02:15\",\"23.05\"],[\"02:30\",\"23.13\"],[\"02:45\",\"23.06\"],[\"03:00\",\"22.94\"],[\"03:15\",\"22.86\"],[\"03:30\",\"22.73\"],[\"03:45\",\"22.49\"],[\"04:00\",\"22.34\"],[\"04:15\",\"22.19\"],[\"04:30\",\"22.02\"],[\"04:45\",\"21.85\"],[\"05:00\",\"21.57\"],[\"05:15\",\"21.44\"],[\"05:30\",\"21.35\"],[\"05:45\",\"21.22\"],[\"06:00\",\"20.92\"],[\"06:15\",\"20.67\"],[\"06:30\",\"20.52\"],[\"06:45\",\"20.29\"],[\"07:00\",\"19.79\"],[\"07:15\",\"19.46\"],[\"07:30\",\"19.06\"],[\"07:45\",\"18.43\"],[\"08:00\",\"17.79\"],[\"08:15\",\"16.86\"],[\"08:30\",\"15.89\"],[\"08:45\",\"14.9\"],[\"09:00\",\"13.85\"],[\"09:15\",\"12.7\"],[\"09:30\",\"11.73\"],[\"09:45\",\"10.45\"],[\"10:00\",\"9.48\"],[\"10:15\",\"8.54\"],[\"10:30\",\"7.13\"],[\"10:45\",\"6.19\"],[\"11:00\",\"5.47\"],[\"11:15\",\"5.04\"],[\"11:30\",\"4.75\"],[\"11:45\",\"4.54\"],[\"12:00\",\"4.26\"],[\"12:15\",\"4.02\"],[\"12:30\",\"3.83\"],[\"12:45\",\"3.64\"],[\"13:00\",\"3.24\"],[\"13:15\",\"3.17\"],[\"13:30\",\"3.07\"],[\"13:45\",\"2.92\"],[\"14:00\",\"2.77\"],[\"14:15\",\"2.98\"],[\"14:30\",\"3.13\"],[\"14:45\",\"3.37\"],[\"15:00\",\"3.62\"],[\"15:15\",\"3.91\"],[\"15:30\",\"4.18\"],[\"15:45\",\"4.48\"],[\"16:00\",\"4.78\"],[\"16:15\",\"5.18\"],[\"16:30\",\"6.01\"],[\"16:45\",\"6.48\"],[\"17:00\",\"7.11\"],[\"17:15\",\"8.42\"],[\"17:30\",\"9.29\"],[\"17:45\",\"10.24\"],[\"18:00\",\"11.51\"],[\"18:15\",\"12.4\"],[\"18:30\",\"13.46\"],[\"18:45\",\"14.78\"],[\"19:00\",\"15.85\"],[\"19:15\",\"16.97\"],[\"19:30\",\"18.03\"],[\"19:45\",\"19.07\"],[\"20:00\",\"20.02\"],[\"20:15\",\"20\"],[\"20:30\",\"19.94\"],[\"20:45\",\"19.9\"],[\"21:00\",\"20\"],[\"21:15\",\"20.13\"],[\"21:30\",\"20.33\"],[\"21:45\",\"20.57\"],[\"22:00\",\"20.8\"],[\"22:15\",\"20.88\"],[\"22:30\",\"21.17\"],[\"22:45\",\"21.45\"],[\"23:00\",\"21.89\"],[\"23:15\",\"22.03\"],[\"23:30\",\"22.26\"],[\"23:45\",\"22.45\"]],\"manualInterventions\":[[\"00:00\",\"24.87\"],[\"00:15\",\"24.73\"],[\"00:30\",\"24.59\"],[\"00:45\",\"24.43\"],[\"01:00\",\"24.26\"],[\"01:15\",\"24.01\"],[\"01:30\",\"23.53\"],[\"01:45\",\"23.36\"],[\"02:00\",\"23.07\"],[\"02:15\",\"23.05\"],[\"02:30\",\"23.13\"],[\"02:45\",\"23.06\"],[\"03:00\",\"22.94\"],[\"03:15\",\"22.86\"],[\"03:30\",\"22.73\"],[\"03:45\",\"22.49\"],[\"04:00\",\"22.34\"],[\"04:15\",\"22.19\"],[\"04:30\",\"22.02\"],[\"04:45\",\"21.85\"],[\"05:00\",\"21.57\"],[\"05:15\",\"21.44\"],[\"05:30\",\"21.35\"],[\"05:45\",\"21.22\"],[\"06:00\",\"20.92\"],[\"06:15\",\"20.67\"],[\"06:30\",\"20.52\"],[\"06:45\",\"20.29\"],[\"07:00\",\"19.79\"],[\"07:15\",\"19.46\"],[\"07:30\",\"19.06\"],[\"07:45\",\"18.43\"],[\"08:00\",\"17.79\"],[\"08:15\",\"16.86\"],[\"08:30\",\"15.89\"],[\"08:45\",\"14.9\"],[\"09:00\",\"13.85\"],[\"09:15\",\"12.7\"],[\"09:30\",\"11.73\"],[\"09:45\",\"10.45\"],[\"10:00\",\"9.48\"],[\"10:15\",\"8.54\"],[\"10:30\",\"7.13\"],[\"10:45\",\"6.19\"],[\"11:00\",\"5.47\"],[\"11:15\",\"5.04\"],[\"11:30\",\"4.75\"],[\"11:45\",\"4.54\"],[\"12:00\",\"4.26\"],[\"12:15\",\"4.02\"],[\"12:30\",\"3.83\"],[\"12:45\",\"3.64\"],[\"13:00\",\"3.24\"],[\"13:15\",\"3.17\"],[\"13:30\",\"3.07\"],[\"13:45\",\"2.92\"],[\"14:00\",\"2.77\"],[\"14:15\",\"2.98\"],[\"14:30\",\"3.13\"],[\"14:45\",\"3.37\"],[\"15:00\",\"3.62\"],[\"15:15\",\"3.91\"],[\"15:30\",\"4.18\"],[\"15:45\",\"4.48\"],[\"16:00\",\"4.78\"],[\"16:15\",\"5.18\"],[\"16:30\",\"6.01\"],[\"16:45\",\"6.48\"],[\"17:00\",\"7.11\"],[\"17:15\",\"8.42\"],[\"17:30\",\"9.29\"],[\"17:45\",\"10.24\"],[\"18:00\",\"11.51\"],[\"18:15\",\"12.4\"],[\"18:30\",\"13.46\"],[\"18:45\",\"14.78\"],[\"19:00\",\"15.85\"],[\"19:15\",\"16.97\"],[\"19:30\",\"18.03\"],[\"19:45\",\"19.07\"],[\"20:00\",\"20.02\"],[\"20:15\",\"20\"],[\"20:30\",\"19.94\"],[\"20:45\",\"19.9\"],[\"21:00\",\"20\"],[\"21:15\",\"20.13\"],[\"21:30\",\"20.33\"],[\"21:45\",\"20.57\"],[\"22:00\",\"20.8\"],[\"22:15\",\"20.88\"],[\"22:30\",\"21.17\"],[\"22:45\",\"21.45\"],[\"23:00\",\"21.89\"],[\"23:15\",\"22.03\"],[\"23:30\",\"22.26\"],[\"23:45\",\"22.45\"]],\"aiRecommendations\":[[\"00:00\",\"24.32\"],[\"00:15\",\"23.46\"],[\"00:30\",\"22.36\"],[\"00:45\",\"22.38\"],[\"01:00\",\"22.28\"],[\"01:15\",\"22.39\"],[\"01:30\",\"22.77\"],[\"01:45\",\"23.46\"],[\"02:00\",\"24.36\"],[\"02:15\",\"24.5\"],[\"02:30\",\"25.73\"],[\"02:45\",\"24.31\"],[\"03:00\",\"23.88\"],[\"03:15\",\"23.96\"],[\"03:30\",\"22.08\"],[\"03:45\",\"21.41\"],[\"04:00\",\"21.59\"],[\"04:15\",\"21.68\"],[\"04:30\",\"20.9\"],[\"04:45\",\"22.16\"],[\"05:00\",\"23.52\"],[\"05:15\",\"22.93\"],[\"05:30\",\"22.2\"],[\"05:45\",\"22.9\"],[\"06:00\",\"22.2\"],[\"06:15\",\"19.83\"],[\"06:30\",\"18.99\"],[\"06:45\",\"18.27\"],[\"07:00\",\"16.83\"],[\"07:15\",\"16.12\"],[\"07:30\",\"16.35\"],[\"07:45\",\"16.21\"],[\"08:00\",\"16.12\"],[\"08:15\",\"14.95\"],[\"08:30\",\"14.63\"],[\"08:45\",\"14.12\"],[\"09:00\",\"12.34\"],[\"09:15\",\"10.97\"],[\"09:30\",\"10.92\"],[\"09:45\",\"10.94\"],[\"10:00\",\"10.36\"],[\"10:15\",\"9.69\"],[\"10:30\",\"7.6\"],[\"10:45\",\"7.02\"],[\"11:00\",\"5.94\"],[\"11:15\",\"4.98\"],[\"11:30\",\"4.72\"],[\"11:45\",\"4.64\"],[\"12:00\",\"4.33\"],[\"12:15\",\"4.96\"],[\"12:30\",\"4.97\"],[\"12:45\",\"4.19\"],[\"13:00\",\"3.47\"],[\"13:15\",\"3.71\"],[\"13:30\",\"4.81\"],[\"13:45\",\"4.04\"],[\"14:00\",\"3.52\"],[\"14:15\",\"4.02\"],[\"14:30\",\"3.88\"],[\"14:45\",\"3.92\"],[\"15:00\",\"4.13\"],[\"15:15\",\"4.81\"],[\"15:30\",\"4.66\"],[\"15:45\",\"4.35\"],[\"16:00\",\"5.01\"],[\"16:15\",\"5.15\"],[\"16:30\",\"5.43\"],[\"16:45\",\"5.73\"],[\"17:00\",\"6.09\"],[\"17:15\",\"7.49\"],[\"17:30\",\"9.71\"],[\"17:45\",\"11.11\"],[\"18:00\",\"12.04\"],[\"18:15\",\"12.18\"],[\"18:30\",\"13.38\"],[\"18:45\",\"15.56\"],[\"19:00\",\"16.74\"],[\"19:15\",\"16.38\"],[\"19:30\",\"17.42\"],[\"19:45\",\"18.16\"],[\"20:00\",\"19.63\"],[\"20:15\",\"20.13\"],[\"20:30\",\"20.01\"],[\"20:45\",\"18.24\"],[\"21:00\",\"21.77\"],[\"21:15\",\"21.84\"],[\"21:30\",\"23.2\"],[\"21:45\",\"23.39\"],[\"22:00\",\"22.98\"],[\"22:15\",\"23.49\"],[\"22:30\",\"22.73\"],[\"22:45\",\"23.28\"],[\"23:00\",\"24.37\"],[\"23:15\",\"24.74\"],[\"23:30\",\"24.59\"],[\"23:45\",\"24.45\"]]},\n      gridData: [{\n        timeNode: '',\n        mData: '',\n        fData: '',\n        interveneType: '',\n        lastModifyTime: '',\n        interveneMethods: ''\n      }],\n      option: {\n        color: ['#18d0f0', '#37ff57', '#FAFE7C'],\n        title: {\n          left: '3%',\n          top: '2px',\n          text: '调整申报曲线',\n          textStyle: {\n            color: '#ffffff'\n          },\n          subtext: \"单位：MW\",\n          // left: 15,// 距离左边位置\n          // top: -10,// 距离上面位置\n          subtextStyle: { // 设置二级标题的样式\n            color: \"#aaa\"\n          }\n        },\n        tooltip: {\n          trigger: 'axis',\n          // axisPointer: { // 会出现横竖2个方向的指示器\n          //   type: 'cross'\n          // },\n        },\n        // 图例名\n        legend: {\n          top: '2%',\n          data: [{\n            name: '短期预测曲线',\n            textStyle: {color: \"#ffffff\"}\n          }, {\n            name: 'AI推荐曲线',\n            textStyle: {color: \"#ffffff\"}\n          }, {\n            name: '调整后申报曲线',\n            textStyle: {color: \"#ffffff\"}\n          }]\n        },\n        grid: {\n          left: '1%',\n          right: '1%',\n          bottom: '3%',\n          // top: 60,\n          containLabel: true\n        },\n        xAxis: [\n          {\n            type: 'category',\n            axisLine: {\n              show: true,\n              lineStyle: {\n                color: '#fff'\n              }\n            },\n          },\n          {\n            type: 'value',\n            min: 0,\n            max: 96, // x轴数据的长度\n            show: false,\n            silent: true,\n            axisPointer: {\n              show: false\n            }\n          }\n        ],\n        yAxis: [{\n          max: 30,\n          min: 0,\n          type: 'value',\n          axisLine: {\n            show: true,\n            lineStyle: {\n              color: '#fff'\n            }\n          }\n        }],\n        dataZoom: [\n          // {\n          //   type: 'slider',\n          //   xAxisIndex: 0,\n          //   filterMode: 'none'\n          // },\n          {\n            type: 'inside',\n            xAxisIndex: 0,\n            filterMode: 'none'\n          },\n          {\n            type: 'inside',\n            xAxisIndex: 1,\n            filterMode: 'none'\n          }\n        ],\n        series: [\n          {\n            name: '调整后申报曲线',\n            id: 'a',\n            type: 'line',\n            smooth: true,\n            // color: ['#FF0087'],\n            symbol: 'circle',\n            symbolSize: 10,\n            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol\n            data: [],\n            max: 30\n          },\n          {\n            name: '短期预测曲线',\n            id: 'b',\n            type: 'line',\n            smooth: true,\n            // color: ['#37A2FF'],\n            symbol: 'circle',\n            symbolSize: 10,\n            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol\n            data: []\n          },\n          {\n            name: 'AI推荐曲线',\n            id: 'c',\n            type: 'line',\n            smooth: true,\n            // color: ['#02e751'],\n            symbol: 'circle',\n            symbolSize: 10,\n            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol\n            data: []\n          },\n          // {\n          //   name: 'markArea1',\n          //   type: 'line',\n          //   xAxisIndex: 1, // 对应第二个x轴\n          //   silent: true,\n          //   markArea: {\n          //     data: [[\n          //       {\n          //         xAxis: '3',\n          //         itemStyle: {\n          //           color: 'rgba(112, 100, 250, 0.3)',\n          //         }\n          //       },\n          //       {\n          //         xAxis: '22'\n          //       }\n          //     ]],\n          //   }\n          // },\n          // {\n          //   name: 'markArea2',\n          //   type: 'line',\n          //   xAxisIndex: 1, // 对应第二个x轴\n          //   silent: true,\n          //   markArea: {\n          //     data: [[\n          //       {\n          //         xAxis: '26',\n          //         itemStyle: {\n          //           color: 'rgba(0,43,255,0.3)'\n          //         }\n          //       },\n          //       {\n          //         xAxis: '35'\n          //       }\n          //     ]],\n          //   }\n          // },\n          // {\n          //   name: 'markArea3',\n          //   type: 'line',\n          //   xAxisIndex: 1, // 对应第二个x轴\n          //   silent: true,\n          //   markArea: {\n          //     data: [[\n          //       {\n          //         xAxis: '45',\n          //         itemStyle: {\n          //           color: 'rgba(251,215,4,0.3)'\n          //         }\n          //       },\n          //       {\n          //         xAxis: '70'\n          //       }\n          //     ]],\n          //   }\n          // },\n          // {\n          //   name: 'markArea4',\n          //   type: 'line',\n          //   xAxisIndex: 1, // 对应第二个x轴\n          //   silent: true,\n          //   markArea: {\n          //     data: [[\n          //       {\n          //         xAxis: '80',\n          //         itemStyle: {\n          //           color: 'rgb(251,2,2,0.3)'\n          //         }\n          //       },\n          //       {\n          //         xAxis: '92'\n          //       }\n          //     ]],\n          //   }\n          // }\n        ]\n      },\n    }\n  },\n  mounted() {\n    this.stDragChart = echarts.init(document.getElementById('stDragChart'))\n    // 初始化图表数据\n    this.queryManualIntervention(this.dataForDrawing.forecastPowers, this.dataForDrawing.manualInterventions, this.dataForDrawing.aiRecommendations)\n  },\n  methods: {\n    changeMessage(){\n      this.$forceUpdate()\n    },\n    submit() {\n      this.$modal.msgSuccess(\"保存成功\");\n    },\n    initChart(dataForecast, dataManual, dataAi, capacity) {\n      this.option.series[0].data = dataManual\n      this.option.series[1].data = dataForecast\n      this.option.series[2].data = dataAi\n      this.option.yAxis[0].max = capacity\n      this.option.series[0].max = capacity\n      // 基于准备好的dom，初始化echarts实例\n      const myChart = this.stDragChart;\n      myChart.setOption(this.option, true)\n      const myGrid = this.gridData;\n      setTimeout(function () {\n        myChart.setOption({\n          graphic: dataManual.map(function (item, dataIndex) {\n            return {\n              type: 'circle',\n              position: myChart.convertToPixel('grid', item),\n              shape: {\n                cx: 0,\n                cy: 0,\n                r: 10\n              },\n              invisible: true,\n              draggable: true,\n              ondrag: function (dx, dy) { //节点拖拽事件\n                onPointDragging(dataIndex, [item[0], dx.offsetY]);\n              },\n              onmousemove: function () { //important\n                showTooltip(dataIndex);\n              },\n              onmouseout: function () { //important\n                hideTooltip(dataIndex);\n              },\n              z: 100 //important\n            };\n          })\n        });\n      }, 0);\n      window.addEventListener('resize', updatePosition);\n      myChart.on('dataZoom', updatePosition);\n\n      function updatePosition() {\n        myChart.setOption({\n          graphic: dataManual.map(function (item, dataIndex) {\n            return {\n              position: myChart.convertToPixel('grid', item)\n            };\n          })\n        });\n      }\n\n      function showTooltip(dataIndex) {\n        myChart.dispatchAction({\n          type: 'showTip',\n          seriesIndex: 0,\n          dataIndex: dataIndex\n        });\n      }\n\n      function hideTooltip(dataIndex) {\n        myChart.dispatchAction({\n          type: 'hideTip'\n        });\n      }\n\n      function onPointDragging(dataIndex, pos) {\n        dataManual[dataIndex][1] = myChart.convertFromPixel('grid', pos)[1].toFixed(2);\n        if (myChart.convertFromPixel('grid', pos)[1].toFixed(2) > capacity) {\n          dataManual[dataIndex][1] = capacity\n        }\n        if (myChart.convertFromPixel('grid', pos)[1].toFixed(2) < 0) {\n          dataManual[dataIndex][1] = 0\n        }\n        myGrid[dataIndex].mData = dataManual[dataIndex][1]\n        // Update data\n        myChart.setOption({\n          series: [\n            {\n              id: 'a',\n              data: dataManual,\n            }\n          ]\n        });\n        updatePosition()\n      }\n\n      this.gridData = myGrid\n    },\n    // 获取干预数据表格，人工干预中使用\n    queryManualIntervention(dataForecast, dataManual, dataAi) {\n      this.tableLoading = true\n      if (dataForecast.length > 0 && dataManual.length > 0) {\n        for (let i = 0; i < 96; i++) {\n          this.gridData[i] = {\n            timeNode: dataForecast[i][0],\n            mData: dataManual[i][1],\n            fData: dataForecast[i][1]\n          }\n        }\n      }\n      this.initChart(dataForecast, dataManual, dataAi, this.capacity)\n      this.tableLoading = false\n    },\n    updateRowData(row, column) {\n      for (let i = 0; i < this.dataForDrawing.manualInterventions.length; i++) {\n        if (row.timeNode === this.dataForDrawing.manualInterventions[i][0]) {\n          this.dataForDrawing.manualInterventions[i][1] = row.mData\n          // 重新绑定图表数据\n          this.initChart(this.dataForDrawing.forecastPowers, this.dataForDrawing.manualInterventions, this.dataForDrawing.aiRecommendations, this.capacity)\n          break\n        }\n      }\n      this.$forceUpdate()\n    }\n  }\n}\n</script>\n\n<style scoped>\n.shortForecastChartDiv {\n  margin-top: 1%;\n}\n\n#stDragChart {\n  width: 100%;\n  height: 525px;\n}\n\n/*表格*/\n.shortForecastChartDiv /deep/ .el-table {\n  background-color: transparent !important;\n  color: white;\n}\n.shortForecastChartDiv /deep/  .el-table, .el-table__expanded-cell {\n  background-color: transparent;\n}\n.shortForecastChartDiv/deep/ .el-table tr {\n  background-color: transparent!important;\n}\n.shortForecastChartDiv /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{\n  background-color: transparent;\n}\n.shortForecastChartDiv /deep/.el-table tbody tr:hover > td {\n  background-color: transparent !important;\n}\n</style>\n"]}]}