From 8e8340911055cea995d410d98e0eeabf84e2e53f Mon Sep 17 00:00:00 2001 From: ChenZeping <chenzeping> Date: 星期二, 27 四月 2021 17:20:47 +0800 Subject: [PATCH] 样式/接口调整 --- src/components/BaseNav/WasteGas/DayData.vue | 196 +++++++++---------------------------------------- 1 files changed, 36 insertions(+), 160 deletions(-) diff --git a/src/components/BaseNav/WasteGas/DayData.vue b/src/components/BaseNav/WasteGas/DayData.vue index 4c50dcb..f81ddbf 100644 --- a/src/components/BaseNav/WasteGas/DayData.vue +++ b/src/components/BaseNav/WasteGas/DayData.vue @@ -1,56 +1,37 @@ -<!-- 鏃ユ暟鎹� --> <template> - <div id="Tab"> - <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> - <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="formInline.timeStart"></el-date-picker> - </span> - </div> - <div class="pickerData"> - <span>缁撴潫鏃堕棿:</span> - <span class="pickerTable"> - <el-date-picker type="datetime" v-model="formInline.timeEnd"></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 hover-bottom">鏌ヨ</div> - <div class="detailbtn hover-bottom">鏄庣粏琛�</div> - </div> - <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegasday"> - </div> + <div class="echarts-box"> + <div class="tab-scroll"> + <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> + <span class="time-select">{{ formData.timeStart }}鏃モ�攞{ formData.timeEnd }}鏃�</span> </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 class="echarts-form"> + <span class="demonstration">寮�濮嬫椂闂达細</span> + <el-date-picker + v-model="formData.timeStart" + value-format="yyyy-MM-dd HH:mm:ss" + type="datetime"> + </el-date-picker> + <span class="demonstration">缁撴潫鏃堕棿锛�</span> + <el-date-picker + v-model="formData.timeEnd" + value-format="yyyy-MM-dd HH:mm:ss" + type="datetime"> + </el-date-picker> + <span class="demonstration">閲囨牱鐐规暟锛�</span> + <el-select v-model="formData.region" placeholder="璇烽�夋嫨" style="width: 80px"> + <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option> + </el-select> + <el-button>鏌ヨ</el-button> + <el-button>鏄庣粏琛�</el-button> + </div> + <div class="echarts-chart"> + <div style="width:5rem;height:1.5rem;" ref="wastegasday"></div> + </div> </div> </template> <script> -// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' + import PublicDataStandard from '../PublicDataStandard' import 'dayjs/locale/es' import dayjs from 'dayjs' @@ -59,7 +40,6 @@ export default { name: 'DayData', components: { - // PublicDetailedList PublicDataStandard }, data () { @@ -106,9 +86,11 @@ val: null } }], - formInline: { - timeStart: null, - timeEnd: null + formData: { + region: '25', + regionList: [25, 50, 75, 100], + timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'), + timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss') }, dataType: 1, myChart: null, @@ -126,14 +108,11 @@ }, methods: { async initnData () { - // 鐢ㄤ簬鎺ュ彛鏁版嵁璇锋眰鐨勫弬鏁� 寮�濮�/缁撴潫鏃堕棿 || 鍙�夋嫨鏌ヨ鐨勫紑濮�/缁撴潫鏃堕棿 - this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') - this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss') const data = { onLineMonEmissPointId: 23, monItemId: 28, - beginTime: this.formInline.timeStart, - endTime: this.formInline.timeEnd, + beginTime: this.formData.timeStart, + endTime: this.formData.timeEnd, dataType: this.dataType } const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo @@ -493,7 +472,7 @@ }, grid: { // 缃戞牸 top: '20%', - left: '5%' + left: '15%' // containLabel: true }, legend: { // 鍥句緥 @@ -618,107 +597,4 @@ </script> <style scoped lang="less"> - -.animation { - .infomation { - padding: 0.02rem 0.04rem; - - .grid-content { - font-size: 0.08rem; - background-color: #2e4967; - text-align: center; - border-radius: 0.01rem; - height: 0.15rem; - line-height: 0.15rem; - margin-right: 0.04rem; - padding: 0 0.04rem - } - } -} - -.form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search { - display: flex; - padding: 0.02rem; - - > 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: 1rem; - background-color: #2e4967; - color: #fff; - font-size: 0.08rem; - height: 0.15rem; - padding: 0; - border: none; - text-align: center; - z-index: 9999; - //padding-left:20px ; - //padding: 0!important; - } - - /deep/ .el-input__icon { - display: block; - width: 1rem; - height: 0.15rem; - line-height: 0.15rem; - cursor: pointer; - font-size: 0; - } - - input::-webkit-calendar-picker-indicator { - opacity: 100; - } - - .detailbtn { - background-color: #2e4967; - text-align: center; - padding: 0 7px; - height: 0.15rem; - line-height: 0.15rem; - border-radius: 4px; - margin-right: 6px; - } - } - - .el-dialog-div { - overflow: auto; - } - - #echarts { - margin: 0; - padding: 0; - } -} </style> -- Gitblit v1.8.0