派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
@@ -1,130 +1,64 @@ <!-- 小时数据 --> <!-- 日数据 --> <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"> <!-- :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> </div> <div style="width:600px;height:200px;" id="echarts" ref="main"> </div> </div> <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="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> <div> 采样点数: <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> </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> <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' // import dayjs from 'dayjs' export default { name: 'ECharts', @@ -133,6 +67,8 @@ }, data () { return { value1: '', value2: '', watchData: [], dialogVisible: false, myChar: null, @@ -140,7 +76,8 @@ formInline: { user: '', region: '' } }, info: this.series } }, methods: { @@ -160,12 +97,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 +136,7 @@ }, grid: { left: '3%', right: '6%', right: '3%', bottom: '3%', containLabel: true }, @@ -213,7 +150,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 +162,8 @@ // x轴的设置 xAxis: { type: 'category', boundaryGap: ['10%', '10%'], data: dataDate, boundaryGap: false, data: dateDate, axisLabel: { // x轴全部显示 rotate: 20, interval: 0, @@ -299,29 +235,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 +243,33 @@ 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] }) } console.log(series) const opitons = this.initOptions(dateDate, series) this.myChart = this.$echarts.init(this.$refs.main) this.myChart.setOption(opitons) }) @@ -362,88 +278,129 @@ </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; } .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; //.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 >i{ font-style: normal; color: #eef309; } } .el-dialog-div { //height: 50vh!important; overflow: auto; //overflow: hidden; .animation { //width: 600px; //height: 0.06rem; .infomation { padding: 5px 10px; } .from-search { background-color: red; .date{ width: 200px; height: 30px; padding: 0; border: none; .el-icon-time{ line-height: 30px; } .form-echrts { 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; } } } /deep/.el-date-editor--datetime{ width: 100%; } /deep/.el-input__inner{ position: relative; width:140px; background-color: #2e4967; 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; 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; //height: 3rem; //border: 1px solid #396d83; //margin: 10px 10px 10px 10px; } } </style>
