b3e8ff6619bf82da19edfe09d88ca4bf.json 14 KB

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