派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
@@ -1,123 +1,70 @@ <!-- 小时数据 --> <!-- 日数据 --> <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> <ul> <li></li> </ul> <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-row> </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> </el-dialog> </el-col> </el-row> <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> </div> </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> </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"> <public-detailed-list v-bind="$attrs"></public-detailed-list> </div> </el-dialog> </el-col> </el-row> </div> <div style="width:600px;height:200px;" id="echarts" ref="main"> <div style="width:5rem;height:2rem;" id="echarts" ref="main"> </div> </div> </div> @@ -125,6 +72,7 @@ <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' // import dayjs from 'dayjs' export default { name: 'ECharts', @@ -133,6 +81,8 @@ }, data () { return { value1: '', value2: '', watchData: [], dialogVisible: false, myChar: null, @@ -140,7 +90,8 @@ formInline: { user: '', region: '' } }, info: this.series } }, methods: { @@ -160,12 +111,12 @@ this.myChart.resize() } }, initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) { initOptions: function (dateDate, series) { var options = { title: { // text: '折线图堆叠' }, color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], color: ['#446cdc', '#c4c916', '#c1187e'], tooltip: { trigger: 'axis', axisPointer: { @@ -199,7 +150,7 @@ }, grid: { left: '3%', right: '6%', right: '3%', bottom: '3%', containLabel: true }, @@ -213,7 +164,6 @@ 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', @@ -226,8 +176,8 @@ // x轴的设置 xAxis: { type: 'category', boundaryGap: ['10%', '10%'], data: dataDate, boundaryGap: false, data: dateDate, axisLabel: { // x轴全部显示 rotate: 20, interval: 0, @@ -299,29 +249,7 @@ } } }], 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: series } return options } @@ -329,31 +257,38 @@ mounted () { this.$nextTick(() => { this.drawChart() const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse() const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse() console.log(dataWatch) var dataValue1 = [] var dataValue2 = [] var dataValue3 = [] var dataDate = [] for (var i = 0; i < 24; i++) { if (i === 0 || i === 23) { dataDate.push(dataWatch[i].MonTimeStr.substring(0, 8)) } } var dateDate = [] // {COD:[3,4,5]} var data = {} for (var n = 0; n < dataWatch.length; n++) { if (dataWatch[n].PoltmtrlName === 'COD') { const valueData1 = [] valueData1.push(dataWatch[n].MonQty) } else if (dataWatch[n].PoltmtrlName === '氨氮') { const valueData2 = [] valueData2.push(dataWatch[n].MonQty) console.log(dataValue2) } else if (dataWatch[n].PoltmtrlName === '废水流量') { const valueData3 = [] valueData3.push(dataWatch[n].MonQty) var d = dataWatch[n].MonTimeStr.substring(5, 9) if (dateDate.indexOf(d) < 0) { dateDate.push(d) } if (data[dataWatch[n].PoltmtrlName]) { data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty) } else { data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty] } } const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3) var series = [] for (var k in data) { series.push({ name: k, type: 'line', yAxisIndex: k === '废水流量' ? 1 : 0, data: data[k] }) } // -------------------------- var arr = [] for (var x = 0; x < dataWatch.length; x++) { arr.push(dataWatch[x].MonTimeStr) } console.log(arr) const opitons = this.initOptions(dateDate, series) this.myChart = this.$echarts.init(this.$refs.main) this.myChart.setOption(opitons) }) @@ -362,80 +297,85 @@ </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; height: 0.2rem; } .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; } .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; } .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; } .form-echrts { width: 100%; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; .from-search{ margin-top: 6px; .pickerMon{ display: flex; .pickerData{ flex: 1; display: flex; .pickerTable{ margin-left: 6px; width: 40px; .from-search { background-color: red; .date{ width: 200px; height: 30px; padding: 0; border: none; .el-icon-time{ line-height: 30px; /deep/.el-input__icon { width: 0.9rem; font-size: 0; } } } } /deep/.el-date-editor--datetime{ width: 100%; } /deep/.el-input__inner{ position: relative; width: 0.9rem!important; height: 0.125rem!important; background-color: #2e4967; color: #ffffff; font-size: 8px; padding: 0; //padding-left:20px ; //padding: 0!important; } .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; } #echarts {
