{"remainingRequest":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\test\\ssi-satoken\\ui\\src\\views\\bizManager\\nwp\\charts\\index.vue?vue&type=style&index=0&id=5daa9b8b&scoped=true&lang=css&","dependencies":[{"path":"D:\\test\\ssi-satoken\\ui\\src\\views\\bizManager\\nwp\\charts\\index.vue","mtime":1696909835000},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgojbndwY2hhcnRzewogIHdpZHRoOiAxMDAlOwogIGhlaWdodDpjYWxjKDgwdmggLSA1MHB4KTsKfQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6ZA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/bizManager/nwp/charts","sourcesContent":["<template>\r\n  <div style=\"width: 100%;height: 100%\" >\r\n    <div id=\"nwpcharts\"></div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import resize from '../../../../components/Charts/mixins/resize'\r\n  import * as echarts from 'echarts';\r\n  import cc from '../../../curvecolors'\r\n  export default {\r\n    mixins: [resize],\r\n    watch: {\r\n      drawData:{\r\n        handler(newValue, oldValue) {\r\n          this.cName = newValue.cName\r\n          if(newValue.cName.ws10==undefined){\r\n            this.company = 'W/㎡'\r\n            this.thFormat = [\r\n              {key:\"directRadiation\",value:'直辐射'},\r\n              {key:\"diffuseRadiation\",value:'散辐射'},\r\n              {key:\"swr\",value:'总辐射'}\r\n              ]\r\n          }else {\r\n            this.thFormat = [{key:\"ws10\",value:this.cName.ws10},\r\n              {key:\"ws30\",value:this.cName.ws30},\r\n              {key:\"ws50\",value:this.cName.ws50},\r\n              {key:\"ws70\",value:this.cName.ws70}]\r\n          }\r\n\r\n          this.draw(newValue.times, newValue.datas)\r\n\r\n        },\r\n        deep: true\r\n      },\r\n      resizeKey:function(newQuestion, oldQuestion){\r\n        if(this.chart !=null){\r\n          this.chart.resize();\r\n        }\r\n      }\r\n    },\r\n    props: {\r\n      drawData:{\r\n        type:Object,\r\n      },\r\n      resizeKey:{\r\n        type:Number\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        lineColor:'',\r\n        cName:{},\r\n        chart: null,\r\n        thFormat:[],\r\n        company:'m/s',\r\n        lineStyle:[\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(219,50,51,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                borderColor: 'rgba(219,50,51,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(219,196,50,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws30,\r\n                borderColor: 'rgba(219,196,50,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(101,219,50,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws50,\r\n                borderColor: 'rgba(101,219,50,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(50,219,171,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws70,\r\n                borderColor: 'rgba(50,219,171,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(50,118,219,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws80,\r\n                borderColor: 'rgba(50,118,219,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(140,50,219,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws90,\r\n                borderColor: 'rgba(140,50,219,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(202,50,219,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws100,\r\n                borderColor: 'rgba(202,50,219,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(50,199,219,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws110,\r\n                borderColor: 'rgba(50,199,219,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          },\r\n          {\r\n            areaStyle: {\r\n              normal: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\r\n                  offset: 0,\r\n                  color: 'rgba(219,143,50,0.3)'\r\n                }, {\r\n                  offset: 0.8,\r\n                  color: 'rgba(219, 50, 51, 0)'\r\n                }], false),\r\n                shadowColor: 'rgba(0, 0, 0, 0.1)',\r\n                shadowBlur: 10\r\n              }\r\n            },\r\n            itemStyle: {\r\n              normal: {\r\n                color: cc.ws120,\r\n                borderColor: 'rgba(219,143,50,0.2)',\r\n                borderWidth: 12\r\n              }\r\n            },\r\n          }\r\n        ]\r\n      }\r\n    },\r\n    mounted() {\r\n      if(localStorage.getItem('styleSwitch') === 'blue'){\r\n        this.lineColor = 'white'\r\n      }else{\r\n        this.lineColor = '#3b3b3b'\r\n      }\r\n    },\r\n    beforeDestroy() {\r\n      if (!this.chart) {\r\n        return\r\n      }\r\n      this.chart.dispose()\r\n      this.chart = null\r\n    },\r\n    methods: {\r\n      draw(timeaxis,datas) {\r\n        this.chart = echarts.init(document.getElementById('nwpcharts'))\r\n        var option = {\r\n          backgroundColor: 'transparent',\r\n          title: {\r\n            top: 20,\r\n            text: 'nwp信息',\r\n            textStyle: {\r\n              fontWeight: 'normal',\r\n              fontSize: 16,\r\n              color: this.lineColor\r\n            },\r\n            left: '1%'\r\n          },\r\n          tooltip: {\r\n            trigger: 'axis',\r\n            axisPointer: {\r\n              lineStyle: {\r\n                color: '#57617B'\r\n              }\r\n            }\r\n          },\r\n          legend: {\r\n            top: 20,\r\n            width:'70%',\r\n            icon: 'rect',\r\n            itemWidth: 14,\r\n            itemHeight: 5,\r\n            itemGap: 13,\r\n            data: [],\r\n            right: '4%',\r\n            textStyle: {\r\n              fontSize: 12,\r\n              color: this.lineColor\r\n            },\r\n            selected:{\r\n            }\r\n          },\r\n          dataZoom: [{\r\n            show: true,\r\n            realtime: true,\r\n            start: 0,\r\n            end: 100,\r\n            left: \"15%\",\r\n            right: \"15%\",\r\n            textStyle: {\r\n              color: this.lineColor\r\n            }\r\n          }, {\r\n            type: 'inside'\r\n          }],\r\n          grid: {\r\n            top: 100,\r\n            left: '2%',\r\n            right: '2%',\r\n            bottom: '10%',\r\n            containLabel: true\r\n          },\r\n          xAxis: [{\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisLine: {\r\n              lineStyle: {\r\n                color: this.lineColor\r\n              }\r\n            },\r\n            data:[]\r\n          }],\r\n          yAxis: [{\r\n            type: 'value',\r\n            name: this.company,\r\n            axisTick: {\r\n              show: false\r\n            },\r\n            axisLine: {\r\n              lineStyle: {\r\n                color: this.lineColor\r\n              }\r\n            },\r\n\r\n            axisLabel: {\r\n              margin: 10,\r\n              textStyle: {\r\n                fontSize: 14,\r\n                color: this.lineColor\r\n              },\r\n              formatter: '{value}',\r\n            },\r\n            splitLine: {\r\n              lineStyle: {\r\n                color: '#57617B'\r\n              }\r\n            }\r\n          }],\r\n          series: []\r\n        }\r\n        option.xAxis[0].data = timeaxis\r\n        var index = 0;\r\n        for(var key in datas){\r\n          var keyName='';\r\n          for(var i = 0 ;i<this.thFormat.length;i++){\r\n            if(key ==this.thFormat[i].key ){\r\n              keyName =this.thFormat[i].value;\r\n            }\r\n          }\r\n          option.legend.data.push(keyName)\r\n          if(index>5){\r\n            option.legend.selected[keyName] = false\r\n          }else{\r\n            option.legend.selected[keyName] = true\r\n          }\r\n          var sValue = {\r\n            name: '',\r\n            type: 'line',\r\n            smooth: false,\r\n            symbol: 'circle',\r\n            symbolSize: 5,\r\n            showSymbol: false,\r\n            lineStyle: {\r\n              normal: {\r\n                width: 2\r\n              }\r\n            },\r\n            // areaStyle: {},\r\n            itemStyle: {},\r\n            data: []\r\n          }\r\n          sValue.name = keyName\r\n          sValue.data = datas[key]\r\n          // sValue.areaStyle = this.lineStyle[index].areaStyle\r\n          sValue.itemStyle = this.lineStyle[index].itemStyle\r\n          option.series.push(sValue)\r\n          index++;\r\n        }\r\n        this.chart.setOption(option,true)\r\n      },\r\n\r\n    }\r\n  }\r\n</script>\r\n<style scoped>\r\n  #nwpcharts{\r\n    width: 100%;\r\n    height:calc(80vh - 50px);\r\n  }\r\n</style>\r\n"]}]}