~xingchuan/SewerAndRainNetwork.git

			@@ -2,31 +2,23 @@
			<div class="echarts-box">
			<div class="tab-scroll">
			<PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
			<span class="time-select">{{ formData.startTime }}—{{ formData.endTime }}</span>
			</div>
			<div class="echarts-form">
			<span class="demonstration">开始时间：</span>
			<el-date-picker
			v-model="formData.startTime"
			value-format="yyyy-MM-dd HH:mm:ss"
			type="datetime">
			</el-date-picker>
			<el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
			<span class="demonstration">结束时间：</span>
			<el-date-picker
			v-model="formData.endTime"
			value-format="yyyy-MM-dd HH:mm:ss"
			type="datetime">
			</el-date-picker>
			<el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
			<span class="demonstration">采样点数：</span>
			<el-select v-model="region" placeholder="请选择" style="width: 80px">
			<el-option v-for="(item,index) in regionList" :key="index" :label="item" :value="item"></el-option>
			<el-select v-model="formData.region" placeholder="请选择" size="mini">
			<el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
			</el-select>
			<el-button @click="querySearch()">查询</el-button>
			<!-- <el-button>明细表</el-button>-->
			</div>
			<div class="echarts-chart">
			<div style="width:5rem;height:1.5rem;" ref="echarts"></div>
			<div ref="echarts"></div>
			</div>
			<span class="time-select">{{ formData.startTime }}—{{ formData.endTime }}</span>
			</div>
			</template>

			@@ -45,7 +37,6 @@
			},
			data () {
			return {
			a: '',
			// tab栏传递接收数据
			dataStandard: [
			{
			@@ -88,19 +79,22 @@
			val: null
			}
			}],
			// 表单数据绑定值
			formData: {
			region: '25',
			regionList: [25, 50, 75, 100],
			startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
			endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
			},
			region: '25',
			regionList: [25, 50, 75, 100],
			datatype: 1,
			// 数据分类处理存储列表
			RealTimeDataList: [],
			bzz: null,
			bzzList: [],
			// 用于处理标准值
			standardValues: null,
			// 标准值列表
			standardValuesList: [],
			// 用于图表展示设置数组
			nameList: [],
			// legend类别图表展示设置数组
			lengList: [],
			legendList: [],
			ydatas: []
			}
			},
			@@ -122,29 +116,31 @@
			$endTime: this.formData.endTime,
			$step: 15
			}
			// console.log(data)
			const result = (await mapApi.getDataItems(data)).data
			// 数据按类别分组
			this.pointsSet(result)
			// 图标存储处理
			this.legendSet()
			// ydata数据
			// y轴data数据
			this.yDataSet()
			// 根据已有数据绘制图表
			this.drawRealTimeDateChart()
			},
			// 接口数据按照数据内分类别设置
			pointsSet (d) {
			let data = []
			let datalist = []
			// 数组数据置空
			this.nameList = []
			this.RealTimeDataList = []

			let data = []
			let datalist = []

			for (let i = 0; i < d.length; i++) {
			// this.RealTimeDataList = []
			// 判断是否继续执行
			if (d[i].ErrorMessage != null) {
			continue
			}

			// temp 临时数据判断方法
			const tempList = [
			{
			@@ -155,13 +151,12 @@
			'TJIP45.lscl2tb552AISA11202A': '废水流量'
			}
			]
			// 指标
			// 指标临时用于数据处理
			const name = tempList[0][d[i].UnionTagCode]
			// 判断市局类型进行分组

			// 判断市局类型进行分组 =>数组为空时
			if (this.nameList.length === 0) {
			// 数组为空时
			this.nameList.push(name)
			// todo 用dayjs
			const newDate = new Date(d[i].ReadTime)
			data = {
			name: name,
			@@ -171,7 +166,6 @@
			name: name,
			data: [data]
			}
			// console.log('1111111')
			this.RealTimeDataList.push(datalist)
			} else if (this.nameList.indexOf(name) < 0) {
			// 没有指标时
			@@ -185,7 +179,6 @@
			name: name,
			data: [data]
			}
			// console.log('222222222')
			this.RealTimeDataList.push(datalist)
			} else if (i === d.length - 1) {
			// 循环到最后
			@@ -200,7 +193,6 @@
			name: name,
			data: [data]
			}
			// console.log('3333333')
			this.RealTimeDataList.push(datalist)
			} else {
			const newDate = new Date(d[i].ReadTime)
			@@ -208,7 +200,6 @@
			name: name,
			value: [newDate, d[i].TagValue]
			}
			// console.log('444444')
			for (let k = 0; k < this.RealTimeDataList.length; k++) {
			if (this.RealTimeDataList[k].name === name) {
			this.RealTimeDataList[k].data.push(data)
			@@ -228,11 +219,10 @@
			}
			}
			}
			// console.log(this.RealTimeDataList)
			},
			// legend类别图表展示设置数组
			legendSet () {
			this.lengList = []
			this.legendList = []
			let objTemp
			for (let l = 0; l < this.nameList.length; l++) {
			let obj
			@@ -268,34 +258,34 @@
			itemWidth: 20,
			itemHeight: 5
			}
			this.lengList.push(obj)
			this.legendList.push(obj)
			}
			}
			this.lengList.push(objTemp)
			this.legendList.push(objTemp)
			},
			// yDataSet 数据处理
			yDataSet () {
			this.bzzList = []
			// 数组添加数据置空
			this.standardValuesList = []
			this.ydatas = []
			for (let j = 0; j < this.nameList.length; j++) {
			let zdcbcolor, zxcolor
			let pointColor, lineColor
			if (this.nameList[j] === 'COD') {
			zdcbcolor = 'red'
			zxcolor = '#ffff00'
			pointColor = 'red'
			lineColor = '#ffff00'
			} else if (this.nameList[j] === '氨氮') {
			zdcbcolor = 'red'
			zxcolor = '#00B0F0'
			pointColor = 'red'
			lineColor = '#00B0F0'
			} else if (this.nameList[j] === '总磷') {
			zdcbcolor = 'red'
			zxcolor = '#f48183'
			pointColor = 'red'
			lineColor = '#f48183'
			} else if (this.nameList[j] === '总氮') {
			zdcbcolor = 'red'
			zxcolor = '#e0ffff'
			pointColor = 'red'
			lineColor = '#e0ffff'
			} else if (this.nameList[j] === '废水流量') {
			zdcbcolor = 'red'
			zxcolor = '#9ACD32'
			pointColor = 'red'
			lineColor = '#9ACD32'
			}
			let ydata

			// 临时数据
			const BBZMAPPING = {
			@@ -308,26 +298,20 @@
			for (let m = 0; m < this.RealTimeDataList.length; m++) {
			let stdValue = null
			if (this.RealTimeDataList[m].name === this.nameList[j]) {
			for (const p in BBZMAPPING) {
			// console.log('p' + p)
			this.a = p
			stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
			}
			// console.log(stdValue)
			this.bzz = {
			stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
			this.standardValues = {
			name: this.nameList[j],
			bzhui: stdValue
			standardValue: stdValue
			}
			ydata = {
			const yData = {
			name: this.nameList[j],
			data: this.RealTimeDataList[m].data,
			zdcbcolor: zdcbcolor,
			zxcolor: zxcolor,
			bzz: stdValue
			pointColor: pointColor,
			lineColor: lineColor,
			standardValue: stdValue
			}
			// console.log(stdValue)
			this.bzzList.push(this.bzz)
			this.ydatas.push(ydata)
			this.standardValuesList.push(this.standardValues)
			this.ydatas.push(yData)
			}
			}
			}
			@@ -337,53 +321,58 @@
			this.myChart = this.$echarts.init(this.$refs.echarts)
			this.myChart.clear()

			const legend = this.lengList
			const yname = '浓度(mg/m³)'
			const bzzList = this.bzzList
			// y轴侧边标题neme
			const ySideName = '浓度(mg/m³)'
			// 标准值列表
			const standardValuesList = this.standardValuesList

			// 应用于数据结果判断标准值
			let standardValue

			// series数据存储
			const serLists = []

			for (let i = 0; i < this.ydatas.length; i++) {
			const zdcbcolor = this.ydatas[i].zdcbcolor
			const bz = this.ydatas[i].bzz
			// console.log(bz)
			let obj
			// 应用于数据处理
			const pointColor = this.ydatas[i].pointColor
			// 数据标准值
			const bz = this.ydatas[i].standardValue
			let seriesObj

			if (bz) {
			obj = {
			seriesObj = {
			name: this.ydatas[i].name,
			// symbol:'circle', // 折点形状
			// symbolSize: 3, //大小
			smooth: true, // 直线，true 为曲线
			smooth: true,
			type: 'line',
			data: this.ydatas[i].data,
			// borderColor: this.ydatas[i].pointColor,
			borderColor: '#fff',
			itemStyle: {
			normal: {
			color: function (c) { // 根据value 显示不同的折点颜色
			let biaozhuiz
			for (let i = 0; i < bzzList.length; i++) {
			if (bzzList[i].name === c.seriesName) {
			biaozhuiz = bzzList[i].bzhui
			color: function (c) {
			for (let i = 0; i < standardValuesList.length; i++) {
			if (standardValuesList[i].name === c.seriesName) {
			standardValue = standardValuesList[i].standardValue
			}
			}
			if (c.value[1] > biaozhuiz) {
			return zdcbcolor
			} else if (c.value[1] > biaozhuiz * 0.9) {
			if (c.value[1] > standardValue) {
			return pointColor
			} else if (c.value[1] > standardValue * 0.7) {
			return '#FFA500'
			} else {
			return '#33c95f'
			}
			},
			lineStyle: { // 折线的颜色
			color: this.ydatas[i].zxcolor,
			lineStyle: {
			color: this.ydatas[i].lineColor,
			width: 2
			},
			// borderColor:'black', //折点边框的颜色
			label: { // 显示值
			show: false
			}
			}
			},
			type: 'line',
			data: this.ydatas[i].data,
			markLine: { // 平均值，和指标上限
			markLine: {
			symbol: 'none',
			data: [{
			label: {
			@@ -396,16 +385,15 @@
			yAxis: bz,
			lineStyle: {
			normal: {
			color: function (c) { // 根据value 显示不同的折点颜色
			let biaozhuiz
			for (let i = 0; i < bzzList.length; i++) {
			if (bzzList[i].name === c.seriesName) {
			biaozhuiz = bzzList[i].bzhui
			color: function (c) {
			for (let i = 0; i < standardValuesList.length; i++) {
			if (standardValuesList[i].name === c.seriesName) {
			standardValue = standardValuesList[i].standardValue
			}
			}
			if (c.value[1] > biaozhuiz) {
			return zdcbcolor
			} else if (c.value[1] > biaozhuiz * 0.9) {
			if (c.value[1] > standardValue) {
			return pointColor
			} else if (c.value[1] > standardValue * 0.7) {
			return '#FFA500'
			} else {
			return '#33c95f'
			@@ -413,62 +401,55 @@
			}
			}
			}
			}
			]
			}]
			}
			}
			} else {
			obj = {
			seriesObj = {
			name: this.ydatas[i].name,
			symbol: 'circle', // 折点形状
			symbolSize: 10, // 大小
			smooth: false, // 直线，true 为曲线
			symbol: 'circle',
			symbolSize: 10,
			smooth: false,
			yAxisIndex: 1,
			// itemStyle: {
			// normal: {
			// color: function (c) { // 根据value 显示不同的折点颜色
			// for (let i = 0; i < this.bzzList.length; i++) {
			// let biaozhuizs
			// if (this.bzzList[i].name === c.seriesName) {
			// biaozhuizs = this.bzzList[i].bzhui
			// }
			// console.log(biaozhuizs)
			// }
			// if (c.value[1] > 9) {
			// return zdcbcolor
			// } else {
			// return '#33c95f'
			// }
			// },
			// lineStyle: { // 折线的颜色
			// color: this.ydatas[i].zxcolor,
			// width: 5
			// },
			// borderColor: 'black', // 折点边框的颜色
			// label: { // 显示值
			// show: false
			// }
			// }
			// },
			// borderColor:'black',
			type: 'line',
			data: this.ydatas[i].data
			data: this.ydatas[i].data,
			itemStyle: {
			normal: {
			color: function (c) {
			for (let i = 0; i < standardValuesList.length; i++) {
			if (standardValuesList[i].name === c.seriesName) {
			standardValue = standardValuesList[i].standardValue
			}
			}
			if (c.value[1] > standardValue) {
			return pointColor
			} else if (c.value[1] > standardValue * 0.9) {
			return '#FFA500'
			} else {
			return '#33c95f'
			}
			},
			lineStyle: { // 折线的颜色
			color: this.ydatas[i].lineColor,
			width: 2
			},
			label: { // 显示值
			show: false
			}
			}
			}
			}
			}
			if (this.ydatas[i].name === '废气流量' \|\| this.ydatas[i].name === '废气') {
			obj.yAxisIndex = 1
			if (this.ydatas[i].name === '废水流量' \|\| this.ydatas[i].name === '废水') {
			seriesObj.yAxisIndex = 1
			}
			serLists.push(obj)
			serLists.push(seriesObj)
			}
			// console.log(serLists)
			let dataUnit = ''
			if (this.datatype === 1) {
			dataUnit = '流量(m³/d)'
			} else {
			dataUnit = '流量(m³/h)'
			}
			const dataUnit = '流量(m³/h)'
			// echarts图表option数据
			const options = {
			tooltip: { // 提示框
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'cross',
			@@ -479,8 +460,6 @@
			formatter: function (params) {
			let s = params[0].name + '<br />'
			for (let i = 0; i < params.length; i++) {
			// let name = params[i].name
			// 图表title名称
			const seriesName = params[i].seriesName
			// 值
			const value = params[i].value[1]
			@@ -516,18 +495,17 @@
			return s
			}
			},
			toolbox: { // 打印等工具
			toolbox: {
			show: false,
			feature: {
			saveAsImage: {}
			}
			},
			grid: { // 网格
			top: '20%',
			left: '15%'
			grid: {
			top: '20%'
			},
			legend: {
			data: legend
			data: this.legendList
			},
			dataZoom: [{
			type: 'inside',
			@@ -547,10 +525,10 @@
			shadowOffsetY: 2
			}
			}],
			xAxis: { // x 轴设置
			xAxis: {
			type: 'time',
			boundaryGap: false,
			axisLabel: { // x轴全部显示
			axisLabel: {
			// rotate: 30,
			margin: 6,
			interval: 0,
			@@ -558,7 +536,7 @@
			color: '#fff'
			}
			},
			splitLine: { // 网格垂直线为虚线
			splitLine: {
			show: true,
			lineStyle: {
			type: 'dashed'
			@@ -570,14 +548,13 @@
			axisLine: {
			lineStyle: {
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			width: 1
			}
			}
			// data: xdata
			},
			yAxis: [{
			type: 'value',
			name: yname,
			name: ySideName,
			max: function (value) {
			return parseInt(value.max + 3)
			},
			@@ -592,11 +569,11 @@
			},
			splitLine: {
			show: false
			}, // y轴网格线不显示,
			},
			axisLine: {
			lineStyle: {
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			width: 1
			}
			}
			}, {
			@@ -613,14 +590,14 @@
			},
			splitLine: {
			show: false
			}, // y轴网格线不显示,
			},
			// inverse: true,
			// nameLocation: 'start',
			// max:500,
			axisLine: {
			lineStyle: {
			color: '#FFFFFF',
			width: 1// 这里是为了突出显示加上的
			width: 1
			}
			}
			}],