| 1 |
- {"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"]}]}
|
