From 8bb5942235c86ea771c4215a77c46b1245c30a93 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 12 四月 2021 11:31:58 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue | 220 +++++++++++++++++++++++++++++------------------------- 1 files changed, 118 insertions(+), 102 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue index 492d4f2..8e0f659 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue @@ -1,73 +1,65 @@ <!-- 鏃ユ暟鎹� --> <template> - <div id="Tab"> - <div class="infomation"> - <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"> - <div class="from-search"> - <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"> + <div id="Tab"> + <div class="animation"> + <div class="infomation"> + <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="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" + 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:5rem;height:2rem;" id="echarts" ref="main"> - </div> + </div> </div> + <div> + 閲囨牱鐐规暟: + <input list="source" id="ipt" class="echatsInput" @change="datalistBtn"> + <datalist id="source" @click="datalistBtn"> + <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> <script> @@ -282,12 +274,7 @@ data: data[k] }) } - // -------------------------- - var arr = [] - for (var x = 0; x < dataWatch.length; x++) { - arr.push(dataWatch[x].MonTimeStr) - } - console.log(arr) + console.log(series) const opitons = this.initOptions(dateDate, series) this.myChart = this.$echarts.init(this.$refs.main) this.myChart.setOption(opitons) @@ -297,46 +284,70 @@ </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; - } - - .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; - } - +//.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 !important; + background-color: #2e4967; + text-align: center; + margin: 0 2px 4px 2px; + border-radius: 2px; + } +.animation { + //width: 600px; + //height: 0.06rem; + .Infomation { + margin-left: 10px; + } +} .form-echrts { width: 100%; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; .from-search{ - margin-top: 6px; + display: flex; + padding:5px; + >div{margin-left: 10px} .pickerMon{ - display: flex; + display: flex; + >div:first-child { + margin-right: 10px; + } .pickerData{ flex: 1; display: flex; + >span{line-height: 22px} .pickerTable{ margin-left: 6px; - width: 40px; - + /deep/.el-input{ + font-size: 0px; + .el-input__prefix{ + width: 100%; + } + } /deep/.el-input__icon { - width: 0.9rem; + width: 100%; font-size: 0; } } @@ -351,18 +362,23 @@ 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; } .echatsInput{ - color: #00ffff; - background-color: #2e4967; - border: none; - border-radius: 6px; - width: 40px; + color: #00ffff; + background-color: #2e4967; + border: none; + border-radius: 6px; + width: 80px; + height: 22px; } + input::-webkit-calendar-picker-indicator { + opacity: 100; + } .detailbtn{ background-color:#2e4967; text-align: center; -- Gitblit v1.8.0