派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
@@ -2,20 +2,28 @@ <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-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">--> <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>–>--> <!-- <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"--> @@ -36,35 +44,83 @@ <!-- <el-form-item>--> <!-- <el-button type="primary" @click="onSubmit">查询</el-button>--> <!-- </el-form-item>--> <!-- </el-form>--> <!-- <el-button size="mini" round @click="dialogVisible = true">明细表</el-button>--> <!-- <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>--> <div style="width:750px;height:260px;" id="echarts" ref="main"> <!-- <input list="students">--> <!-- <datalist id="students">--> <!-- <option value="Lily">--> <!-- <option value="Lucy">--> <!-- <option value="Jim">--> <!-- <option value="Lily">--> <!-- </datalist>--> <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" style="height: 500px"> <public-detailed-list v-bind="$attrs"></public-detailed-list> </div> </el-dialog> </el-col> </el-row> </div> <div style="width:100%;height:300px;" id="echarts" ref="main"> </div> </div> </div> </template> <script> // import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' export default { name: 'ECharts', components: { // PublicDetailedList PublicDetailedList }, data () { return { value1: '', value2: '', watchData: [], dialogVisible: false, dataDate: [], @@ -231,72 +287,123 @@ drawChart: function () { const myChart = this.$echarts.init(this.$refs.main) myChart.setOption(this.options) window.onresize = function () { var h1 = document.documentElement.clientHeight// 获取屏幕的高度 if (h1 > 700) { myChart.getDom().style.height = 3 + 'rem' myChart.getDom().style.width = 6 + 'rem' } else { myChart.getDom().style.height = 3 + 'rem' myChart.getDom().style.width = 6 + 'rem' } myChart.resize() } } }, mounted () { this.drawChart() const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring)) console.log(dataWatch) for (var i = 0; i < dataWatch.length; i++) { this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17)) } console.log(this.dataDate) this.$nextTick(() => { this.drawChart() const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring)) // console.log(dataWatch) for (var i = 0; i < dataWatch.length; i++) { this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17)) } // console.log(this.dataDate) }) } } </script> <style scoped lang="less"> .infomation { margin-left: 10px; } .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; 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: 100%; border: 1px solid #396d83; //margin: 10px 10px 10px 10px; .el-dialog-div { //height: 50vh!important; overflow: auto; //overflow: hidden; .form-echrts { width: 100%; height: 2rem; 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; /deep/.el-input__icon { width: 0.9rem; font-size: 0; } } .block{ .date{ width: 300px; height: 30px; } } .text-size{ display: flex; justify-content: space-around; } .from-search{ display: flex; justify-content: space-around; .demo-form-inline{ display: flex; justify-content: space-around; } .el-button--mini, .el-button--mini.is-round{ height: 30px; } } #echarts { margin: 0; padding: 0; //border: 1px solid #396d83; //margin: 10px 10px 10px 10px; } } } /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 { margin: 0; padding: 0; //height: 3rem; //border: 1px solid #396d83; //margin: 10px 10px 10px 10px; } } </style>
