~xingchuan/SewerAndRainNetwork.git

			@@ -32,7 +32,7 @@
			</div>
			<div>
			采样点数:
			<el-select v-model="formInline.region" placeholder="50">
			<el-select v-model="formInline.region">
			<el-option label="0" value="0"></el-option>
			<el-option label="25" value="25"></el-option>
			<el-option label="50" value="50"></el-option>
			@@ -82,6 +82,7 @@
			timeStart: '',
			timeEnd: ''
			},
			myChart: null,
			JsonCtarts: {
			id: 'mychart',
			title: '加热炉烟气',
			@@ -143,8 +144,9 @@
			methods: {
			onSubmit () {
			console.log(1)

			// const date = [this.value1, this.value2, this.formInline.region]
			// this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
			this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
			// console.log(date)
			// if (date) {
			// var date1 = new Date(date)
			@@ -154,372 +156,375 @@
			// var datePkg = dateUtil.getTowDate(date1, "a", 24 * 3600000 - 1);
			// var datatype = 2;
			},
			// CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
			// this.myChart.clear()
			// var dataUnit = ''
			// if (datatype === 1) {
			// dataUnit = '气量(m³/d)'
			// } else {
			// dataUnit = '气量(m³/h)'
			// }
			//
			// var serLists = []
			// for (var j = 0; j < ydatas.length; j++) {
			// var len = ydatas[j].data.length
			// for (var k = 0; k < len; k++) {
			// var it = ydatas[j].data[k]
			// var it2 = parseFloat(it).toFixed(2)
			// ydatas[j].data[k] = it2
			// }
			// }
			//
			// for (var i = 0; i < ydatas.length; i++) {
			// var zdcbcolor = ydatas[i].zdcbcolor
			// var bzz = ydatas[i].bzz
			// var obj
			// if (bzz == null) {
			// obj = {
			// name: ydatas[i].name,
			// symbol: 'circle', // 折点形状
			// symbolSize: 10, // 大小
			// smooth: false, // 直线，true 为曲线
			// yAxisIndex: 1,
			// itemStyle: {
			// normal: {
			// color: function (c) { // 根据value 显示不同的折点颜色
			// /* var biaozhuiz
			// for (var i = 0; i < exhbzzList.length; i++) {
			// if (exhbzzList[i].name == c.seriesName) {
			// biaozhuiz = exhbzzList[i].bzhui
			// }
			// }
			// if (c.value > 999999999999) {
			// return zdcbcolor
			// } else {
			// return '#33c95f'
			// } */
			// },
			// lineStyle: { // 折线的颜色
			// color: ydatas[i].zxcolor,
			// width: 5
			// },
			// borderColor: ydatas[i].zxcolor, // 折点边框的颜色
			// label: { // 显示值
			// show: false
			// }
			// }
			// },
			// type: 'line',
			// data: ydatas[i].data
			// }
			// } else {
			// obj = {
			// name: ydatas[i].name,
			// symbol: 'circle', // 折点形状
			// symbolSize: 10, // 大小
			// smooth: false, // 直线，true 为曲线
			// itemStyle: {
			// normal: {
			// color: function (c) { // 根据value 显示不同的折点颜色
			// var biaozhuiz
			// for (var i = 0; i < exhbzzList.length; i++) {
			// if (exhbzzList[i].name == c.seriesName) {
			// biaozhuiz = exhbzzList[i].bzhui
			// }
			// }
			// if (c.value > biaozhuiz) {
			// return zdcbcolor
			// } else if (c.value > biaozhuiz * 0.9) {
			// return '#FFA500'
			// } else {
			// return '#33c95f'
			// }
			// },
			// lineStyle: { // 折线的颜色
			// color: ydatas[i].zxcolor,
			// width: 5
			// },
			// borderColor: ydatas[i].zxcolor, // 折点边框的颜色
			// label: { // 显示值
			// show: false
			// }
			// }
			// },
			// type: 'line',
			// data: ydatas[i].data,
			// markLine: { // 平均值，和指标上限
			// symbol: 'none',
			// data: [
			// /* {
			// type: 'average',
			// name: '日平均值',
			// label: {
			// normal: {
			// position: 'end', //显示位置
			// formatter: ydatas[i].name+'\n日平均值'+'{c}' //显示样式
			// }
			// },
			// lineStyle:{ // 颜色
			// color: 'yellow',
			// type:'solid'
			// }
			// }, */ {
			// label: {
			// normal: {
			// position: 'end',
			// formatter: '' // ydatas[i].name+'标准值'//+'{c}'
			// }
			// },
			// name: '标准值',
			// yAxis: bzz,
			// lineStyle: {
			// color: ydatas[i].zxcolor,
			// type: 'dashed',
			// width: 2
			// }
			// }
			// ]
			// }
			// }
			// }
			// serLists.push(obj)
			// }
			//
			// var option = {
			// tooltip: { // 提示框
			// trigger: 'axis',
			// axisPointer: {
			// type: 'cross',
			// label: {
			// color: '#1a4245'
			// }
			// },
			// formatter: function (params) {
			// var s = params[0].name + '<br/>'
			// for (var i = 0; i < params.length; i++) {
			// const name = params[i].name
			// // 图表title名称
			// var seriesName = params[i].seriesName
			// // 值
			// var value = params[i].value
			// var valueFliter
			// if (value === 'NaN') {
			// valueFliter = ''
			// } else {
			// valueFliter = formatter(value)
			// }
			// var maker = params[i].marker
			// if (seriesName === '二氧化硫') {
			// maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
			// } else if (seriesName === '氮氧化物') {
			// maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
			// } else if (seriesName === '烟尘') {
			// maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
			// } else if (seriesName === '温度') {
			// maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>'
			// } else {
			// maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
			// }
			// s += maker + seriesName + ':' + valueFliter + '<br />'
			// }
			// return s
			// }
			// },
			// toolbox: { // 打印等工具
			// show: false,
			// feature: {
			// saveAsImage: {}
			// }
			// },
			// grid: { // 网格
			// top: '20%',
			// left: '5%'
			// // containLabel: true
			// },
			// legend: { // 图例
			// data: legend
			// },
			// dataZoom: [{
			// type: 'inside',
			// start: 0,
			// end: 100
			// }, {
			// start: 0,
			// end: 100,
			// show: false,
			// handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
			// handleSize: '80%',
			// handleStyle: {
			// color: '#fff',
			// shadowBlur: 3,
			// shadowColor: 'rgba(0, 0, 0, 0.6)',
			// shadowOffsetX: 2,
			// shadowOffsetY: 2
			// }
			// }],
			// xAxis: { // x 轴设置
			// type: 'category',
			// boundaryGap: false,
			// axisLabel: { // x轴全部显示
			// rotate: 20,
			// interval: 0,
			// textStyle: {
			// color: '#fff'
			// }
			// },
			// splitLine: { // 网格垂直线为虚线
			// show: true,
			// lineStyle: {
			// type: 'dashed'
			// }
			// },
			// axisTick: { // x 轴刻度显示
			// show: false
			// },
			// axisLine: {
			// lineStyle: {
			// color: '#FFFFFF',
			// width: 1// 这里是为了突出显示加上的
			// }
			// },
			// data: xdata
			// },
			// yAxis: [{
			// type: 'value',
			// name: yname,
			// /* max: function (value) {
			// var max_val_list = [] // 所有显示折线的标准值
			// // if(exhbzzList && exhbzzList.length>0){
			// // if (value.max != "-Infinity") { // 获取所有监测指标的max值 2020/12/31
			// // valMax = parseInt(value.max + 5);
			// // }
			// // $.each(exhbzzList, function (index, item) {
			// // if (item.bzhui != null) {
			// // max_val_list.push(item.bzhui);
			// // }
			// // });
			// // }
			// max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序
			// var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
			// return parseInt(ma)
			// }, */
			// axisLabel: {
			// formatter: '{value}',
			// textStyle: {
			// color: '#fff'
			// }
			// },
			// axisPointer: {
			// snap: true
			// },
			// splitLine: {
			// show: false
			// }, // y轴网格线不显示,
			// axisLine: {
			// lineStyle: {
			// color: '#FFFFFF',
			// width: 1// 这里是为了突出显示加上的
			// }
			// }
			// }, {
			// type: 'value',
			// name: dataUnit,
			// max: function (value) {
			// var ma = value.max > 120 ? value.max : 120
			// return parseInt(ma)
			// },
			// axisLabel: {
			// formatter: '{value}',
			// textStyle: {
			// color: '#fff'
			// }
			// },
			// axisPointer: {
			// snap: true
			// },
			// splitLine: {
			// show: false
			// }, // y轴网格线不显示,
			// axisLine: {
			// lineStyle: {
			// color: '#FFFFFF',
			// width: 1// 这里是为了突出显示加上的
			// }
			// }
			// }],
			// series: serLists
			// }
			// this.myChart.setOption(option)
			//
			// this.myChart.on('legendselectchanged', function (params) {
			// var StdVal = null
			// var op = { yAxis: {} }
			// const max_val_list = [] // 所有显示折线的标准值
			// if (exhbzzList && exhbzzList.length > 0) {
			// max_val_list.push(valMax) // 将监测指标的max值也放入数组 2020/12/31
			// $.each(exhbzzList, function (index, item) {
			// params.selected[item.name] ? max_val_list.push(item.bzhui) : ''
			// if (item.name == params.name) {
			// item.name == 'VOCs' ? StdVal = 20 : StdVal = item.bzhui
			// }
			// })
			// }
			// max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序
			// op.yAxis.max = function (value) {
			// var ma = value.max < StdVal ? StdVal : Math.ceil(value.max)
			// max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 选择最大值
			// return ma
			// }
			// this.myChart.setOption(op)
			// })
			//
			// /**
			// * 解决myChart.on('click',function(){...})事件重复触发的问题
			// * Date: 20200720
			// */
			// myChart.off('click')
			//
			// /**
			// * 图标点击事件
			// * 20190426 add
			// * */
			// myChart.on('click', function (params) {
			// // 获取当前时间，小时
			// var nowHours = new Date().Format('hh')
			// // 点击折线图折点对应的时间
			// // 需要传的时间为
			// var _date = null
			// if (params.name.indexOf('时') != -1) {
			// var hours = params.name.substring(0, params.name.indexOf('时'))
			// if (parseInt(hours) < parseInt(nowHours)) {
			// _date = new Date().Format('yyyy-MM-dd') + ' ' + hours + ':00:00'
			// } else {
			// var currentDate = new Date()
			// // 24小时之前时间
			// var stringDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
			// _date = stringDate + ' ' + hours + ':00:00'
			// }
			// } else if (params.name.indexOf('日') != -1) {
			// var day = params.name.substring(0, params.name.indexOf('日') - 1)
			// _date = new Date().Format('yyyy-MM') + '-' + day.trim()
			// }
			//
			// // todo 调接口查凭证
			// if (params.color != 'red') {
			// var poltMtrlId
			// var monItemId = 28
			// for (var i = 0; i < wrwIDS.length; i++) {
			// if (params.seriesName == wrwIDS[i].name) {
			// poltMtrlId = wrwIDS[i].id
			// }
			// }
			// getCBMX(jcdID, poltMtrlId, monItemId, _date, function (res) {
			// createDivByMouse(res, params.event)
			// })
			// }
			// // createDivByMouse("s",params.event);
			// })
			// },
			CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
			this.myChart = this.$echarts.init(this.$refs.main)
			this.myChart.clear()
			var dataUnit = ''
			if (datatype === 1) {
			dataUnit = '气量(m³/d)'
			} else {
			dataUnit = '气量(m³/h)'
			}

			var serLists = []
			for (var j = 0; j < ydatas.length; j++) {
			var len = ydatas[j].data.length
			for (var k = 0; k < len; k++) {
			var it = ydatas[j].data[k]
			var it2 = parseFloat(it).toFixed(2)
			ydatas[j].data[k] = it2
			}
			}

			for (var i = 0; i < ydatas.length; i++) {
			// var zdcbcolor = ydatas[i].zdcbcolor
			var bzz = ydatas[i].bzz
			var obj
			if (bzz == null) {
			obj = {
			name: ydatas[i].name,
			symbol: 'circle', // 折点形状
			symbolSize: 10, // 大小
			smooth: false, // 直线，true 为曲线
			yAxisIndex: 1,
			itemStyle: {
			normal: {
			color: function (c) { // 根据value 显示不同的折点颜色
			/* var biaozhuiz
			for (var i = 0; i < exhbzzList.length; i++) {
			if (exhbzzList[i].name == c.seriesName) {
			biaozhuiz = exhbzzList[i].bzhui
			}
			}
			if (c.value > 999999999999) {
			return zdcbcolor
			} else {
			return '#33c95f'
			} */
			},
			lineStyle: { // 折线的颜色
			color: ydatas[i].zxcolor,
			width: 5
			},
			borderColor: ydatas[i].zxcolor, // 折点边框的颜色
			label: { // 显示值
			show: false
			}
			}
			},
			type: 'line',
			data: ydatas[i].data
			}
			} else {
			obj = {
			name: ydatas[i].name,
			symbol: 'circle', // 折点形状
			symbolSize: 10, // 大小
			smooth: false, // 直线，true 为曲线
			itemStyle: {
			normal: {
			color: function (c) { // 根据value 显示不同的折点颜色
			/* var biaozhuiz
			for (var i = 0; i < exhbzzList.length; i++) {
			if (exhbzzList[i].name == c.seriesName) {
			biaozhuiz = exhbzzList[i].bzhui
			}
			}
			if (c.value > biaozhuiz) {
			return zdcbcolor
			} else if (c.value > biaozhuiz * 0.9) {
			return '#FFA500'
			} else {
			return '#33c95f'
			}
			*/
			},
			lineStyle: { // 折线的颜色
			color: ydatas[i].zxcolor,
			width: 5
			},
			borderColor: ydatas[i].zxcolor, // 折点边框的颜色
			label: { // 显示值
			show: false
			}
			}
			},
			type: 'line',
			data: ydatas[i].data,
			markLine: { // 平均值，和指标上限
			symbol: 'none',
			data: [
			/* {
			type: 'average',
			name: '日平均值',
			label: {
			normal: {
			position: 'end', //显示位置
			formatter: ydatas[i].name+'\n日平均值'+'{c}' //显示样式
			}
			},
			lineStyle:{ // 颜色
			color: 'yellow',
			type:'solid'
			}
			}, */ {
			label: {
			normal: {
			position: 'end',
			formatter: '' // ydatas[i].name+'标准值'//+'{c}'
			}
			},
			name: '标准值',
			yAxis: bzz,
			lineStyle: {
			color: ydatas[i].zxcolor,
			type: 'dashed',
			width: 2
			}
			}
			]
			}
			}
			}
			serLists.push(obj)
			}

			var option = {
			tooltip: { // 提示框
			trigger: 'axis',
			axisPointer: {
			type: 'cross',
			label: {
			color: '#1a4245'
			}
			},
			formatter: function (params) {
			var s = params[0].name + '<br/>'
			for (var i = 0; i < params.length; i++) {
			// const name = params[i].name
			// 图表title名称
			var seriesName = params[i].seriesName
			// 值
			var value = params[i].value
			var valueFliter
			if (value === 'NaN') {
			valueFliter = ''
			} else {
			// valueFliter = formatter(value)
			}
			var maker = params[i].marker
			if (seriesName === '二氧化硫') {
			maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
			} else if (seriesName === '氮氧化物') {
			maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
			} else if (seriesName === '烟尘') {
			maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
			} else if (seriesName === '温度') {
			maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>'
			} else {
			maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
			}
			s += maker + seriesName + ':' + valueFliter + '<br />'
			}
			return s
			}
			},
			toolbox: { // 打印等工具
			show: false,
			feature: {
			saveAsImage: {}
			}
			},
			grid: { // 网格
			top: '20%',
			left: '5%'
			// containLabel: true
			},
			legend: { // 图例
			data: legend
			},
			dataZoom: [{
			type: 'inside',
			start: 0,
			end: 100
			}, {
			start: 0,
			end: 100,
			show: false,
			handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
			handleSize: '80%',
			handleStyle: {
			color: '#fff',
			shadowBlur: 3,
			shadowColor: 'rgba(0, 0, 0, 0.6)',
			shadowOffsetX: 2,
			shadowOffsetY: 2
			}
			}],
			xAxis: { // x 轴设置
			type: 'category',
			boundaryGap: false,
			axisLabel: { // x轴全部显示
			rotate: 20,
			interval: 0,
			textStyle: {
			color: '#fff'
			}
			},
			splitLine: { // 网格垂直线为虚线
			show: true,
			lineStyle: {
			type: 'dashed'
			}
			},
			axisTick: { // x 轴刻度显示
			show: false
			},
			axisLine: {
			lineStyle: {
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			}
			},
			data: xdata
			},
			yAxis: [{
			type: 'value',
			name: yname,
			/* max: function (value) {
			var max_val_list = [] // 所有显示折线的标准值
			// if(exhbzzList && exhbzzList.length>0){
			// if (value.max != "-Infinity") { // 获取所有监测指标的max值 2020/12/31
			// valMax = parseInt(value.max + 5);
			// }
			// $.each(exhbzzList, function (index, item) {
			// if (item.bzhui != null) {
			// max_val_list.push(item.bzhui);
			// }
			// });
			// }
			max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序
			var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
			return parseInt(ma)
			}, */
			axisLabel: {
			formatter: '{value}',
			textStyle: {
			color: '#fff'
			}
			},
			axisPointer: {
			snap: true
			},
			splitLine: {
			show: false
			}, // y轴网格线不显示,
			axisLine: {
			lineStyle: {
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			}
			}
			}, {
			type: 'value',
			name: dataUnit,
			max: function (value) {
			var ma = value.max > 120 ? value.max : 120
			return parseInt(ma)
			},
			axisLabel: {
			formatter: '{value}',
			textStyle: {
			color: '#fff'
			}
			},
			axisPointer: {
			snap: true
			},
			splitLine: {
			show: false
			}, // y轴网格线不显示,
			axisLine: {
			lineStyle: {
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			}
			}
			}],
			series: serLists
			}
			this.myChart.setOption(option)
			/*
			this.myChart.on('legendselectchanged', function (params) {
			var StdVal = null
			var op = { yAxis: {} }
			const max_val_list = [] // 所有显示折线的标准值
			if (exhbzzList && exhbzzList.length > 0) {
			max_val_list.push(valMax) // 将监测指标的max值也放入数组 2020/12/31
			$.each(exhbzzList, function (index, item) {
			params.selected[item.name] ? max_val_list.push(item.bzhui) : ''
			if (item.name == params.name) {
			item.name == 'VOCs' ? StdVal = 20 : StdVal = item.bzhui
			}
			})
			}
			max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序
			op.yAxis.max = function (value) {
			var ma = value.max < StdVal ? StdVal : Math.ceil(value.max)
			max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 选择最大值
			return ma
			}
			this.myChart.setOption(op)
			})
			*/

			/**
			* 解决myChart.on('click',function(){...})事件重复触发的问题
			* Date: 20200720
			*/
			this.myChart.off('click')

			/**
			* 图标点击事件
			* 20190426 add
			* */
			/* this.myChart.on('click', function (params) {
			// 获取当前时间，小时
			var nowHours = new Date().Format('hh')
			// 点击折线图折点对应的时间
			// 需要传的时间为
			const dates = null
			if (params.name.indexOf('时') !== -1) {
			var hours = params.name.substring(0, params.name.indexOf('时'))
			if (parseInt(hours) < parseInt(nowHours)) {
			dates = new Date().Format('yyyy-MM-dd') + ' ' + hours + ':00:00'
			} else {
			var currentDate = new Date()
			// 24小时之前时间
			var stringDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
			dates = stringDate + ' ' + hours + ':00:00'
			}
			} else if (params.name.indexOf('日') !== -1) {
			var day = params.name.substring(0, params.name.indexOf('日') - 1)
			dates = new Date().Format('yyyy-MM') + '-' + day.trim()
			}

			// todo 调接口查凭证
			if (params.color != 'red') {
			var poltMtrlId
			var monItemId = 28
			for (var i = 0; i < wrwIDS.length; i++) {
			if (params.seriesName == wrwIDS[i].name) {
			poltMtrlId = wrwIDS[i].id
			}
			}
			getCBMX(jcdID, poltMtrlId, monItemId, _date, function (res) {
			createDivByMouse(res, params.event)
			})
			}
			// createDivByMouse("s",params.event);
			}) */
			},
			drawChart: function () {
			window.onresize = function () {
			var h1 = document.documentElement.clientHeight// 获取屏幕的高度