From 610977c95dec18b78e3e50be5d172d2cb94de86a Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期一, 12 四月 2021 09:55:36 +0800 Subject: [PATCH] 修改废气图表 --- src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue | 203 ++++++++++++++++++-------------------------------- 1 files changed, 74 insertions(+), 129 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue index 46ba2cd..981b512 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue @@ -2,75 +2,63 @@ <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">姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</span> + <span class="grid-content">浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</span> + <span class="grid-content">鐑熷皹 : 6.93 鏍囧噯 : 30</span> + <span class="grid-content">搴熸皵娴侀噺 : 120343.18</span> + </div> </div> <div class="form-echrts"> <div class="from-search"> - <div class="layoutFrom"> <div class="pickerMon"> - <div class="pickerData pickerDataLeft"> - <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"> + <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" + type="datetime" + v-model="value2" > </el-date-picker> </span> - </div> - </div> - <div class="sampling"> - <span> - 閲囨牱鐐规暟: - </span> - <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> - <div class="InquiryBtn"> - <div>鏌ヨ</div> - </div> - <div class="detailBox"> - <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> </div> - </div> - </div> + <div> + 閲囨牱鐐规暟: + <input list="source" id="ipt" class="echatsInput" value="50"> + <datalist id="source" > + <option value="0" /> + <option value="25" /> + <option value="50" /> + <option value="75" /> + <option value="100" /> + </datalist> + </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> @@ -279,26 +267,6 @@ return options } }, - // methods: { - // // onSubmit () { - // // console.log('submit!') - // // }, - // 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.$nextTick(() => { this.drawChart() @@ -340,67 +308,40 @@ 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; -} - .form-echrts { width: 100%; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; .from-search{ - margin-top: 6px; - .layoutFrom{ + display: flex; + padding:5px; + >div{margin-left: 10px} + .pickerMon{ display: flex; - .sampling{ - margin-left: 100px; - >span{ - margin-right: 10px; - } - } - .InquiryBtn{ - margin-left: 30px; - width: 36px; - height: 20px; - font-size: 8px; - background-color:#2e4967 ; - text-align: center; - border-radius: 3px; - } - .detailBox{ - margin-left: 30px; - } - .pickerMon{ + >div:first-child{ + margin-right: 10px; + } + .pickerData{ + flex: 1; display: flex; - .pickerDataLeft{ - margin-left: 10px; - margin-right: 90px; - } - .pickerData{ - flex: 1; - display: flex; - >span{ - margin-right: 15px; - } - .pickerTable{ - margin-left: 6px; - width: 40px; - - /deep/.el-input__icon { - width: 1rem; - font-size: 0; + >span{line-height: 22px} + .pickerTable{ + margin-left: 6px; + /deep/.el-input{ + font-size: 0px; + .el-input__prefix{ + width: 100%; + } } + /deep/.el-input__icon { + //font-size: 0; + width: 100%; } } } + } + /deep/.el-date-editor--datetime{ + width: 100%; } /deep/.el-input__inner{ position: relative; @@ -408,7 +349,8 @@ height: 0.125rem!important; background-color: #2e4967; color: #ffffff; - font-size: 8px; + font-size: 12px; + height: 24px; padding: 0; //padding-left:20px ; //padding: 0!important; @@ -418,7 +360,11 @@ background-color: #2e4967; border: none; border-radius: 6px; - width: 40px; + width: 80px; + height: 22px; + } + input::-webkit-calendar-picker-indicator { + opacity: 100; } .detailbtn{ background-color:#2e4967; @@ -426,7 +372,6 @@ padding: 0 7px; line-height: 20px; border-radius: 4px; - margin-right: 6px; } } .el-dialog-div { -- Gitblit v1.8.0