~xingchuan/SewerAndRainNetwork.git

			@@ -1,52 +1,39 @@
			<!-- 日数据 -->
			<template>
			<div id="Tab">
			<div class="infomation">
			<!-- <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>-->
			<!-- <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>-->
			<!-- <el-tag>烟尘 : 6.93 标准 : 30</el-tag>-->
			<!-- <el-tag>废气流量 : 120343.18</el-tag>-->
			<el-row>
			<el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
			<el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
			<el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
			<el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
			<!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
			</el-row>
			</div>
			<div class="form-echrts">
			<div class="from-search">
			<el-row type="flex">
			<el-col :span="14">
			<div class="pickerMon">
			<div class="pickerData">
			<span> 开始时间:</span>
			<span class="pickerTable"><el-date-picker
			type="datetime"
			v-model="value1">
			</el-date-picker></span>
			</div>
			<div class="pickerData">
			<span >结束时间:</span>
			<span class="pickerTable">
			<el-date-picker
			type="datetime"
			v-model="value2"
			>
			</el-date-picker>
			</span>
			<div id="Tab">
			<div class="animation">
			<div class="infomation">
			<span class="grid-content">氮氧化物 :<i>29.93</i> 标准 : 100</span>
			<span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
			<span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
			<span class="grid-content">废气流量 : <i>120343.18</i></span>
			</div>
			</div>
			<div class="form-echrts">
			<div class="from-search">
			<div class="pickerMon">
			<div class="pickerData">
			<span> 开始时间:</span>
			<span class="pickerTable">
			<el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
			</span>
			</div>
			<div class="pickerData">
			<span >结束时间:</span>
			<span class="pickerTable">
			<el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
			</span>
			</div>
			</div>
			<div>
			采样点数:
			<input list="source" id="ipt" class="echatsInput" v-model="value" @change="datalistBtn">
			<datalist id="source" @click="datalistBtn">
			<option value="0" />
			<option value="25" />
			<option value="50" />
			<option value="75" />
			<option value="100" />
			</datalist>
			<el-select v-model="formInline.region" placeholder="50">
			<el-option label="0" value="0"></el-option>
			<el-option label="25" value="25"></el-option>
			<el-option label="50" value="50"></el-option>
			<el-option label="75" value="75"></el-option>
			<el-option label="100" value="100"></el-option>
			</el-select>
			</div>
			<div class="detailbtn" @click="onSubmit">查询</div>
			<div class="detailbtn" @click="dialogVisible = true" >明细表</div>
			@@ -79,96 +66,275 @@
			},
			data () {
			return {
			value1: '',
			value2: '',
			watchData: [],
			dialogVisible: false,
			myChar: null,
			value: '50',
			value: '',
			formInline: {
			user: '',
			region: ''
			region: '',
			timeStart: '',
			timeEnd: ''
			},
			source: {

			info: this.series,
			JsonDayCharts: {
			id: 'mychartsDay',
			title: '加热炉烟气',
			legend: [
			{
			icon: 'image://../assets/imgs/legend/NOX.png',
			itemHeight: 5,
			itemWidth: 20,
			textStyle: {
			color: '#CCC'
			},
			name: '氮氧化物'
			},
			{
			icon: 'image://../assets/imgs/legend/SO2.png',
			itemHeight: 5,
			itemWidth: 20,
			name: '二氧化硫',
			textStyle: {
			color: '#CCC'
			}
			},
			{
			icon: 'image://../assets/imgs/legend/YanChen.png',
			itemHeight: 5,
			itemWidth: 20,
			name: '烟尘',
			textStyle: { color: '#ccc' }
			},
			{
			icon: 'image://../assets/imgs/legend/WenDu.png',
			itemHeight: 5,
			itemWidth: 20,
			name: '温度',
			textStyle: { color: '#ccc' }
			},
			{
			icon: 'image://../assets/imgs/legend/VOCs.png',
			itemHeight: 5,
			itemWidth: 20,
			name: '废气流量',
			textStyle: { color: '#ccc' }
			}
			],
			xdata: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
			ydatas: [
			{ name: '氮氧化物', data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 100 },
			{ name: '二氧化硫', data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 },
			{
			name: '废气流量',
			data: ['2827518.25', '2763525.75', '2776435.50', '2742003.50', '2856001.75', '2890287.00', '2832898.25', '2803715.50', '2513925.75', '2753303.50', '2749836.00', '2786188.50', '2738838.00', '2733660.25', '2815521.25', '2830217.25', '2798918.00', '2803543.50', '2770175.25', '2823321.25', '2856329.25', '2801588.00', '2798103.50', '2766343.00', '2750489.50', '2697786.25', '2796775.50', '2808028.50', '2813561.75', '2757129.25', '2720755.50'],
			zdcbcolor: 'red',
			zxcolor: '#9ACD32',
			bzz: null
			},
			{ name: '烟尘', data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 30 }
			],
			yname: ' 浓度(mg/m³)',
			// id:'mychartDay',
			datatype: 1
			}
			}
			},
			mounted () {
			this.onSubmit()
			// this.CreateChart(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype)
			},
			methods: {
			datalistBtn (value) {
			// var inputSelect = document.getElementById('#ipt').value
			// var optionlength = document.getElementsByTagName('option').length
			// var optionId = ''
			// for (var i = 0; i < optionlength; i++) {
			// // var optionValue = $('option').eq(i).attr('data-value')
			// if (inputSelect == optionValue) {
			// optionId = $('option').eq(i).attr('data-id')
			// }
			// }
			console.log(1)
			// this.value = value
			},
			onSubmit () {
			console.log('submit!')
			this.CreateChart(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype)
			},
			drawChart: function () {
			window.onresize = function () {
			var h1 = document.documentElement.clientHeight// 获取屏幕的高度
			if (h1 > 700) {
			this.myChart.getDom().style.height = 3 + 'rem'
			this.myChart.getDom().style.width = 6 + 'rem'
			} else {
			this.myChart.getDom().style.height = 3 + 'rem'
			this.myChart.getDom().style.width = 6 + 'rem'
			}
			this.myChart.resize()

			CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
			this.mychartDay = this.$echarts.init(this.$refs.main)
			this.mychartDay.clear()
			var dataUnit = ''
			if (datatype === 1) {
			dataUnit = '气量(m³/d)'
			} else {
			dataUnit = '气量(m³/h)'
			}
			},
			initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) {
			var options = {
			title: {
			// text: '折线图堆叠'
			},
			color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
			tooltip: {

			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
			}
			},
			legend: {
			x: '200px',
			y: '30px',
			data: [{
			name: 'COD',
			textStyle: {
			color: '#00d0f9'
			}
			},
			{
			name: '氨氮',
			textStyle: {
			color: '#00d0f9'
			}
			},
			{
			name: '废水流量',
			textStyle: {
			color: '#00d0f9'
			}
			}]
			toolbox: { // 打印等工具
			show: false,
			feature: {
			saveAsImage: {}
			}
			},
			grid: {
			left: '3%',
			right: '3%',
			bottom: '3%',
			containLabel: true
			grid: { // 网格
			top: '20%',
			left: '5%'
			// containLabel: true
			},
			toolbox: {},
			// 图标缩放设置
			legend: { // 图例
			data: legend
			},
			dataZoom: [{
			type: 'inside',
			start: 0,
			@@ -177,7 +343,7 @@
			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',
			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',
			@@ -187,20 +353,17 @@
			shadowOffsetY: 2
			}
			}],
			// x轴的设置
			xAxis: {
			xAxis: { // x 轴设置
			type: 'category',
			boundaryGap: ['10%', '10%'],
			data: dataDate,
			boundaryGap: false,
			axisLabel: { // x轴全部显示
			rotate: 20,
			interval: 0,
			textStyle: {
			color: '#fff',
			fontSize: 10
			color: '#fff'
			}
			},
			splitLine: { // 网格垂直线为虚线
			splitLine: { // 网格垂直线为虚线
			show: true,
			lineStyle: {
			type: 'dashed'
			@@ -212,137 +375,345 @@
			axisLine: {
			lineStyle: {
			color: '#FFFFFF',
			width: 1 // 这里是为了突出显示加上的
			width: 1// 这里是为了突出显示加上的
			}
			}
			},
			data: xdata
			},
			// Y 轴的设置
			yAxis: [{
			type: 'value',
			position: 'left', // 多 Y 轴使用
			name: '浓度(mg/m³)',
			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' // 坐标的字体颜色
			color: '#fff'
			}
			},
			axisPointer: {
			snap: true // 自动吸附最近的点
			snap: true
			},
			splitLine: {
			show: false // y轴网格线不显示
			},
			show: false
			}, // y轴网格线不显示,
			axisLine: {
			lineStyle: {
			color: '#ffffff', // 坐标轴的颜色
			width: 1
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			}
			}
			},
			{
			}, {
			type: 'value',
			position: 'right', // 多 Y 轴使用
			name: '流量(m³/h³)',
			name: dataUnit,
			max: function (value) {
			var ma = value.max > 120 ? value.max : 120
			return parseInt(ma)
			},
			axisLabel: {
			formatter: '{value}',
			textStyle: {
			color: '#fff' // 坐标的字体颜色
			color: '#fff'
			}
			},
			axisPointer: {
			snap: true // 自动吸附最近的点
			snap: true
			},
			splitLine: {
			show: false // y轴网格线不显示
			},
			show: false
			}, // y轴网格线不显示,
			axisLine: {
			lineStyle: {
			color: '#ffffff', // 坐标轴的颜色
			width: 1
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			}
			}
			}],
			series: [
			{
			name: 'COD',
			type: 'line',
			stack: '总量',
			data: dataValue1,
			yAxisIndex: 0
			},
			{
			name: '氨氮',
			type: 'line',
			stack: '总量',
			data: dataValue2,
			yAxisIndex: 0
			},
			{
			name: '废水流量',
			type: 'line',
			stack: '总量',
			data: dataValue3,
			yAxisIndex: 1
			}
			]
			series: serLists
			}
			return options
			}
			},
			mounted () {
			this.$nextTick(() => {
			this.drawChart()
			const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse()
			console.log(dataWatch)
			var dataValue1 = []
			var dataValue2 = []
			var dataValue3 = []
			var dataDate = []
			for (var i = 0; i < 24; i++) {
			dataDate.push(dataWatch[i].MonTimeStr.substring(0, 8))
			}
			for (var n = 0; n < dataWatch.length; n++) {
			if (dataWatch[n].PoltmtrlName === 'COD') {
			dataValue1.push(dataWatch[n].MonQty)
			} else if (dataWatch[n].PoltmtrlName === '氨氮') {
			dataValue2.push(dataWatch[n].MonQty)
			} else if (dataWatch[n].PoltmtrlName === '废水流量') {
			dataValue3.push(dataWatch[n].MonQty)
			this.mychartDay.setOption(option)

			// this.mychartDay.on('legendselectchanged', function (params) {
			// var StdVal = null
			// var op = { yAxis: {} }
			// var 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.mychartDay.setOption(op)
			// })

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

			/**
			* 图标点击事件
			* 20190426 add
			* */
			// this.mychartDay.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);
			// })
			},
			drawChart: function () {
			window.onresize = function () {
			var h1 = document.documentElement.clientHeight// 获取屏幕的高度
			if (h1 > 700) {
			this.mychartDay.getDom().style.height = 3 + 'rem'
			this.mychartDay.getDom().style.width = 6 + 'rem'
			} else {
			this.mychartDay.getDom().style.height = 3 + 'rem'
			this.mychartDay.getDom().style.width = 6 + 'rem'
			}
			this.mychartDay.resize()
			}
			const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
			this.myChart = this.$echarts.init(this.$refs.main)
			this.myChart.setOption(opitons)
			})
			}
			// initOptions: function (dateDate, series) {
			// var options = {
			// title: {
			// // text: '折线图堆叠'
			// },
			// color: ['#446cdc', '#c4c916', '#c1187e'],
			// tooltip: {
			// trigger: 'axis',
			// axisPointer: {
			// type: 'cross',
			// label: {
			// color: '#1a4245'
			// }
			// }
			// },
			// legend: {
			// x: '200px',
			// y: '30px',
			// data: [{
			// name: 'COD',
			// textStyle: {
			// color: '#00d0f9'
			// }
			// },
			// {
			// name: '氨氮',
			// textStyle: {
			// color: '#00d0f9'
			// }
			// },
			// {
			// name: '废水流量',
			// textStyle: {
			// color: '#00d0f9'
			// }
			// }]
			// },
			// grid: {
			// left: '3%',
			// right: '3%',
			// bottom: '3%',
			// containLabel: true
			// },
			// toolbox: {},
			// // 图标缩放设置
			// dataZoom: [{
			// type: 'inside',
			// start: 0,
			// end: 100
			// }, {
			// start: 0,
			// end: 100,
			// show: false,
			// handleSize: '80%',
			// handleStyle: {
			// color: '#fff',
			// shadowBlur: 3,
			// shadowColor: 'rgba(0, 0, 0, 0.6)',
			// shadowOffsetX: 2,
			// shadowOffsetY: 2
			// }
			// }],
			// // x轴的设置
			// xAxis: {
			// type: 'category',
			// boundaryGap: false,
			// data: dateDate,
			// axisLabel: { // x轴全部显示
			// rotate: 20,
			// interval: 0,
			// textStyle: {
			// color: '#fff',
			// fontSize: 10
			// }
			// },
			// splitLine: { // 网格垂直线为虚线
			// show: true,
			// lineStyle: {
			// type: 'dashed'
			// }
			// },
			// axisTick: { // x 轴刻度显示
			// show: false
			// },
			// axisLine: {
			// lineStyle: {
			// color: '#FFFFFF',
			// width: 1 // 这里是为了突出显示加上的
			// }
			// }
			// },
			// // Y 轴的设置
			// yAxis: [{
			// type: 'value',
			// position: 'left', // 多 Y 轴使用
			// name: '浓度(mg/m³)',
			// axisLabel: {
			// formatter: '{value}',
			// textStyle: {
			// color: '#fff' // 坐标的字体颜色
			// }
			// },
			// axisPointer: {
			// snap: true // 自动吸附最近的点
			// },
			// splitLine: {
			// show: false // y轴网格线不显示
			// },
			// axisLine: {
			// lineStyle: {
			// color: '#ffffff', // 坐标轴的颜色
			// width: 1
			// }
			// }
			// },
			// {
			// type: 'value',
			// position: 'right', // 多 Y 轴使用
			// name: '流量(m³/h³)',
			// axisLabel: {
			// formatter: '{value}',
			// textStyle: {
			// color: '#fff' // 坐标的字体颜色
			// }
			// },
			// axisPointer: {
			// snap: true // 自动吸附最近的点
			// },
			// splitLine: {
			// show: false // y轴网格线不显示
			// },
			// axisLine: {
			// lineStyle: {
			// color: '#ffffff', // 坐标轴的颜色
			// width: 1
			// }
			// }
			// }],
			// series: series
			// }
			// return options
			// }
			}
			}
			</script>

			<style scoped lang="less">
			.grid-content{
			font-size: 8px!important;
			background-color:#2e4967;
			text-align: center;
			margin: 0 2px 4px 2px;
			border-radius: 2px;
			}
			.Infomation {
			margin-left: 10px;
			}

			.el-tag {
			height: 25px;
			width: 140px;
			line-height: 25px;
			margin-right: 10px;
			font-size: 10px;
			background-color: rgba(0, 255, 246, 0.14);
			color: #00d0f9;
			border: none;
			padding: 0 15px;
			}

			//.animation{
			// padding: 0 1rem;
			// overflow: hidden;
			// //width: 1rem;
			// .infomation{
			// display: flex;
			// //margin: 0 1rem;
			// overflow: hidden;
			// animation: move 1s linear 0s infinite;
			// @keyframes move {
			// 0% {
			// }
			// 100% {
			// transform: translateX(-10%);
			// }
			// }
			// /* 鼠标经过marquee 就停止动画 */
			// &:hover {
			// //z-index: 9999999;
			// animation-play-state: paused;
			// }
			// }
			//}
			.grid-content {
			font-size: 8px;
			background-color: #2e4967;
			text-align: center;
			border-radius: 2px;
			margin-right: 10px;
			padding:0 10px
			}
			.animation {
			//width: 600px;
			//height: 0.06rem;
			.infomation {
			padding: 5px 10px;
			}
			}
			.form-echrts {
			width: 100%;
			border-top: 1px solid #396d83;
			@@ -360,18 +731,8 @@
			flex: 1;
			display: flex;
			>span{line-height: 22px}
			.pickerTable{
			margin-left: 6px;
			/deep/.el-input{
			font-size: 0px;
			.el-input__prefix{
			width: 100%;
			}
			}
			/deep/.el-input__icon {
			width: 100%;
			font-size: 0;
			}
			.pickerTable {
			margin-left: 3px;
			}
			}
			}
			@@ -380,16 +741,25 @@
			}
			/deep/.el-input__inner{
			position: relative;
			width: 0.9rem!important;
			height: 0.125rem!important;
			width:140px;
			background-color: #2e4967;
			color: #ffffff;
			color: #fff;
			font-size: 12px;
			height: 24px;
			padding: 0;
			border-color:#00fff6;
			text-align: center;
			//padding-left:20px ;
			//padding: 0!important;
			}
			/deep/.el-input__icon{
			display: block;
			width: 140px;
			height: 22px;
			line-height: 22px;
			cursor: pointer;
			font-size: 0;
			}
			.echatsInput{
			color: #00ffff;
			background-color: #2e4967;