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/HourData.vue |  174 +++++++++++++---------------------------------------------
 1 files changed, 39 insertions(+), 135 deletions(-)

diff --git a/src/components/BaseNav/WasteGas/HourData.vue b/src/components/BaseNav/WasteGas/HourData.vue
index 170357c..520590d 100644
--- a/src/components/BaseNav/WasteGas/HourData.vue
+++ b/src/components/BaseNav/WasteGas/HourData.vue
@@ -1,27 +1,31 @@
-<!--  灏忔椂鏁版嵁  -->
 <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 class="detailbtn">鏌ヨ</div>
-        <div class="detailbtn" @click="ScheduleShow">鏄庣粏琛�</div>
-      </div>
-      <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div>
+  <div class="echarts-box">
+    <div class="tab-scroll">
+      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
+      <span class="time-select">{{ formData.timeStart }}鏃垛�攞{ formData.timeEnd }}鏃�</span>
+    </div>
+    <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 @click="querySearch">鏌ヨ</el-button>
+      <el-button @click="ScheduleShow">鏄庣粏琛�</el-button>
+    </div>
+    <div class="echarts-chart">
+      <div style="width:5rem;height:1.5rem;" ref="wastegashour"></div>
     </div>
     <!--    鏄庣粏寮规-->
     <el-dialog :visible.sync="showSchedule"
@@ -36,10 +40,10 @@
 </template>
 
 <script>
-// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
 import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof'
 import PublicDataStandard from '../PublicDataStandard'
 
+import 'dayjs/locale/es'
 import dayjs from 'dayjs'
 import mapApi from '@/api/mapApi'
 
@@ -94,9 +98,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')
       },
       showSchedule: false,
       dataType: 2,
@@ -115,15 +121,15 @@
     ScheduleShow () {
       this.showSchedule = !this.showSchedule
     },
+    querySearch () {
+      console.log('鏌ヨ')
+    },
     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
@@ -530,7 +536,7 @@
         },
         grid: { // 缃戞牸
           top: '20%',
-          left: '5%'
+          left: '15%'
           // containLabel: true
         },
         legend: { // 鍥句緥
@@ -655,106 +661,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;
-      z-index: 9999;
-      text-align: center;
-      //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