~xingchuan/SewerAndRainNetwork.git

			@@ -2,124 +2,62 @@
			<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>
			<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">
			<!-- :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName" -->
			<div class="from-search">
			<!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
			<!-- <el-form-item label="审批人">-->
			<!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input>-->
			<!-- </el-form-item>-->
			<!-- <div class="block">-->
			<!-- <el-date-picker-->
			<!-- size="'mini"-->
			<!-- class="date"-->
			<!-- v-model="value"-->
			<!-- type="datetimerange"-->
			<!-- range-separator="至"-->
			<!-- start-placeholder="开始日期"-->
			<!-- end-placeholder="结束日期">-->
			<!-- </el-date-picker>-->
			<!-- </div>-->
			<!-- <el-form-item label="采样点数" class="text-size">-->
			<!-- <el-select v-model="formInline.region" placeholder="0">-->
			<!-- <el-option label="0" value="shanghai"></el-option>-->
			<!-- <el-option label="25" value="beijing"></el-option>-->
			<!-- <el-option label="50" value="beijing"></el-option>-->
			<!-- <el-option label="75" value="beijing"></el-option>-->
			<!-- <el-option label="100" value="beijing"></el-option>-->
			<!-- </el-select>-->
			<!-- </el-form-item>-->
			<!-- <el-form-item>-->
			<!-- <el-button type="primary" @click="onSubmit">查询</el-button>-->
			<!-- </el-form-item>-->

			<!-- </el-form>-->
			<!-- <input list="students">-->
			<!-- <datalist id="students">-->
			<!-- <option value="Lily">-->
			<!-- <option value="Lucy">-->
			<!-- <option value="Jim">-->
			<!-- <option value="Lily">-->
			<!-- </datalist>-->
			<el-row type="flex" :gutter="20">
			<el-col :span="14">
			<!-- <el-row>-->
			<!-- <el-col :span="12">-->
			<!-- <el-row type="flex" justify="space-between">-->
			<!-- <el-col class="pickerData">-->
			<!-- 开始时间:-->
			<!-- <el-date-picker-->
			<!-- type="date">-->
			<!-- </el-date-picker>-->
			<!-- </el-col>-->
			<!-- </el-row>-->
			<!-- </el-col>-->
			<!-- <el-col :span="12" type="flex">-->
			<!-- <el-row type="flex" justify="center">-->
			<!-- <el-col>-->
			<!-- 结束时间:-->
			<!-- <el-date-picker-->
			<!-- type="date"-->
			<!-- >-->
			<!-- </el-date-picker>-->
			<!-- </el-col>-->
			<!-- </el-row>-->
			<!-- </el-col>-->
			<!-- </el-row>-->
			</el-col>
			<el-col :span="5">
			采样点数:
			<input list="source" id="ipt" class="echatsInput">
			<datalist id="source">
			<option value="0" />
			<option value="25" />
			<option value="50" />
			<option value="75" />
			<option value="100" />
			</datalist>
			<!-- <div data-tap-disabled="true">-->
			<!-- 采样点数:-->
			<!-- <select id="source">-->
			<!-- <option value="1">0</option>-->
			<!-- <option value="2">25</option>-->
			<!-- <option value="3">50</option>-->
			<!-- <option value="4">75</option>-->
			<!-- <option value="5">100</option>-->
			<!-- </select>-->
			<!-- </div>-->
			</el-col>
			<el-col class="detailbtn" :span="2" @click="onSubmit">查询</el-col>
			<el-col :span="3">
			<div class="detailbtn" @click="dialogVisible = true" >明细表</div>
			<el-dialog :visible.sync="dialogVisible"
			:append-to-body="true"
			:title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
			width="68%"
			center
			v-dialogDrag
			>
			<div class="el-dialog-div" style="height: 500px">
			<public-detailed-list v-bind="$attrs"></public-detailed-list>
			<div class="pickerMon">
			<div class="pickerData">
			<span> 开始时间:</span>
			<span class="pickerTable">
			<el-date-picker type="datetime" v-model="value1">
			</el-date-picker>
			</span>
			</div>
			</el-dialog>
			</el-col>
			</el-row>
			</div>
			<div style="width:600px;height:200px;" id="echarts" ref="main">
			<div class="pickerData">
			<span >结束时间:</span>
			<span class="pickerTable">
			<el-date-picker
			type="datetime"
			v-model="value2"
			>
			</el-date-picker>
			</span>
			</div>
			</div>
			<div>
			采样点数:
			<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>
			<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>
			</div>
			<div style="width:5rem;height:2rem;" id="echarts" ref="main">
			</div>
			</div>
			<!-- 明细弹框 -->
			<el-dialog :visible.sync="dialogVisible"
			:append-to-body="true"
			:title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
			width="68%"
			center
			v-dialogDrag
			>
			<div class="el-dialog-div" style="height: 500px">
			<public-detailed-list v-bind="$attrs"></public-detailed-list>
			</div>
			</el-dialog>
			</div>
			</template>

			@@ -133,6 +71,8 @@
			},
			data () {
			return {
			value1: '',
			value2: '',
			watchData: [],
			dialogVisible: false,
			myChar: null,
			@@ -145,7 +85,16 @@
			},
			methods: {
			onSubmit () {
			console.log('submit!')
			const date = [this.value1, this.value2, this.value]
			console.log(date)
			if (date) {
			var date1 = new Date(date)
			date1 = new Date(date1.getTime() - (8 * 3600000))
			console.log(date1)
			// var dateUtil = new DateUtil()
			// var datePkg = dateUtil.getTowDate(date1, "a", 24 * 3600000 - 1);
			// var datatype = 2;
			}
			},
			drawChart: function () {
			window.onresize = function () {
			@@ -199,7 +148,7 @@
			},
			grid: {
			left: '3%',
			right: '6%',
			right: '3%',
			bottom: '3%',
			containLabel: true
			},
			@@ -334,22 +283,41 @@
			var dataValue1 = []
			var dataValue2 = []
			var dataValue3 = []
			var dataValue4 = []
			var dataDate = []
			for (var i = 0; i < 24; i++) {
			dataDate.push(dataWatch[i].MonTimeStr.substring(9))
			}
			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)
			if (this.$attrs.value === 'feishui') {
			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)
			}
			const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
			this.myChart = this.$echarts.init(this.$refs.main)
			this.myChart.setOption(opitons)
			} else if (this.$attrs.value === 'feiqi') {
			if (dataWatch[n].PoltmtrlName === '废气流量') {
			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)
			} else if (dataWatch[n].PoltmtrlName === '"氮氧化物"') {
			dataValue4.push(dataWatch[n].MonQty)
			const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3, dataValue4)
			this.myChart = this.$echarts.init(this.$refs.main)
			this.myChart.setOption(opitons)
			}
			}
			}
			const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
			this.myChart = this.$echarts.init(this.$refs.main)
			this.myChart.setOption(opitons)
			// const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
			// this.myChart = this.$echarts.init(this.$refs.main)
			// this.myChart.setOption(opitons)
			})
			}
			}
			@@ -357,87 +325,98 @@

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

			.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;
			.infomation {
			padding: 5px 10px;
			}

			.form-echrts {
			width: 100%;
			height: 1rem;
			border-top: 1px solid #396d83;
			//margin: 10px 10px 10px 10px;
			.from-search{
			//display: flex;
			//justify-content: space-between;
			.pickerData{
			display: flex;
			justify-content: space-between;
			}
			/deep/.el-input__inner{
			width: 40px!important;
			height: 16px!important;
			background-color: #2e4967;
			}
			.echatsInput{
			color: #00ffff;
			background-color: #2e4967;
			border: none;
			border-radius: 6px;
			width: 40px;
			}
			.detailbtn{
			background-color:#2e4967;
			text-align: center;
			padding: 0 7px;
			line-height: 20px;
			border-radius: 4px;
			margin-right: 6px;
			}
			}
			.el-dialog-div {
			//height: 50vh!important;
			overflow: auto;
			//overflow: hidden;
			}

			.from-search {
			background-color: red;
			.date{
			width: 200px;
			height: 30px;
			padding: 0;
			border: none;
			.el-icon-time{
			line-height: 30px;
			width: 100%;
			border-top: 1px solid #396d83;
			//margin: 10px 10px 10px 10px;
			.from-search{
			display: flex;
			padding:5px;
			>div{margin-left: 10px}
			.pickerMon{
			display: flex;
			>div:first-child {
			margin-right: 10px;
			}
			.pickerData{
			flex: 1;
			display: flex;
			>span{line-height: 22px}
			.pickerTable {
			margin-left: 3px;
			}
			}
			}

			#echarts {
			margin: 0;
			/deep/.el-date-editor--datetime{
			width: 100%;
			}
			/deep/.el-input__inner{
			position: relative;
			width:140px;
			background-color: #2e4967;
			color: #ffffff;
			font-size: 12px;
			height: 24px;
			padding: 0;
			//height: 3rem;
			//border: 1px solid #396d83;
			//margin: 10px 10px 10px 10px;
			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;
			border: none;
			border-radius: 6px;
			width: 80px;
			height: 22px;
			text-align: center;
			}
			input::-webkit-calendar-picker-indicator {
			opacity: 100;
			}
			.detailbtn{
			background-color:#2e4967;
			text-align: center;
			padding: 0 7px;
			line-height: 24px;
			border-radius: 4px;
			margin-right: 6px;
			}
			.detailbtn:hover{
			box-shadow: 0 0 0.03rem #fff700 !important;
			color:#fff700 !important;
			cursor: pointer;
			}
			}
			.el-dialog-div {
			//height: 50vh!important;
			overflow: auto;
			//overflow: hidden;
			}

			#echarts {
			margin: 0;
			padding: 0;
			}
			}
			</style>