派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
@@ -2,61 +2,134 @@ <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"> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-date-picker class="date" v-model="value" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <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-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> </el-form> <!-- <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:100%;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main"> <div style="width:100%;height:200px;" 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 { @@ -283,30 +356,68 @@ </script> <style scoped lang="less"> .infomation { height: 0.2rem; display: flex; justify-content: space-around; margin-bottom: 5px; .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; } .el-tag { height: 25px; line-height: 25px; background-color: rgba(0, 255, 246, 0.14); color: #00d0f9; border: none; /deep/.el-input__inner{ width: 40px!important; height: 16px!important; background-color: #2e4967; } .form-echrts { height: 1rem; border-top: 1px solid #396d83; .el-dialog-div { //height: 50vh!important; overflow: auto; //overflow: hidden; } .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;
