历史趋势时间选择样式排版加对接

src/assets/css/index.css

@@ -170,11 +170,11 @@ header {
 
 /* el-select 下拉框 样式 */
 
-.el-input__suffix {
+.select-trigger .el-input__suffix {
     line-height: 1rem !important;
 }
 
-.el-input--suffix .el-input__inner {
+.select-trigger .el-input--suffix .el-input__inner {
     margin-top: 0.2rem;
     width: 2rem !important;
     height: 0.375rem !important;
@@ -185,18 +185,18 @@ header {
     border-radius: 0px !important;
 }
 
-.el-input--suffix .el-input__icon {
+.select-trigger .el-input--suffix .el-input__icon {
     width: 0.3125rem;
     line-height: 0.375rem !important;
 }
 
-.el-input--suffix .el-select__caret {
+.select-trigger .el-input--suffix .el-select__caret {
     color: #4BF4F9 !important;
     font-size: 0.175rem !important;
 }
 
-.el-input__prefix,
-.el-input__suffix {
+.select-trigger .el-input__prefix,
+.select-trigger .el-input__suffix {
     top: -0.30rem !important;
 }
 
@@ -755,4 +755,53 @@ p {
 /* 站点信息弹框 end */
 
 
+/* 时间选择器样式 start */
+
+.filterSec .el-date-editor .el-range-input {
+    color: #fff
+}
+
+.filterSec .el-input__inner {
+    /* width: 5.25rem !important;
+  width: 80%; */
+    height: 24px !important;
+    line-height: 24px !important;
+    background-color: rgba(3, 107, 119, 0.5);
+    border: 1px solid rgba(3, 107, 119, 1);
+    z-index: 199;
+    color: #fff
+}
+
+.filterSec .el-range-input {
+    background-color: transparent;
+    color: #fff;
+    width: 55%;
+}
+
+.filterSec .el-range-separator {
+    line-height: 24px;
+    color: #fff;
+}
+
+.filterSec .el-time-panel {
+    left: -0.3rem !important;
+}
+
+
+/* 历史趋势 */
+
+.hisTrend .el-date-editor.el-input,
+.hisTrend .el-date-editor.el-input__inner {
+    width: 2.5rem
+}
+
+.hisTrend .el-input__icon,
+.hisTrend .el-input {
+    line-height: 24px
+}
+
+
+/* 时间选择器样式end */
+
+
 /* ming end */

src/views/home/index.vue

@@ -504,26 +504,5 @@ export default {
   background: #fff;
 }
 
-// 时间选择器样式
-.filterSec .el-input__inner {
-  // width: 5.25rem !important;
-  width: 80%;
-  height: 0.375rem !important;
-  line-height: 0.375rem !important;
-  background-color: rgba(3, 107, 119, 0.5);
-  border: 1px solid rgba(3, 107, 119, 1);
-  z-index: 199;
-}
-.filterSec .el-range-input {
-  background-color: transparent;
-  color: #fff;
-      width: 55%;
-}
-.filterSec .el-range-separator {
-  line-height: 0.25rem;
-  color: #fff;
-}
-.el-time-panel {
-  left: -0.3rem !important;
-}
+
 </style>

src/views/site/Overview.vue

@@ -83,12 +83,21 @@
           </div>
         </div>
         <div class="column">
-          <div class="panel currentUsage" style="height: 100%">
+          <div class="panel currentUsage hisTrend" style="height: 100%">
             <div class="filterSec">
-              <select ref="select_filterSec" @change="select_filterSec">
+              <el-date-picker
+                v-model="hisDefaultTime"
+                align="right"
+                type="date"
+                placeholder="选择日期"
+                :picker-options="pickerOptions"
+              >
+              </el-date-picker>
+
+              <!-- <select ref="select_filterSec" @change="select_filterSec">
                 <option :value="1">日</option>
                 <option :value="2">月</option>
-              </select>
+              </select> -->
             </div>
             <h2>历史趋势</h2>
             <ul class="histTab">
@@ -98,6 +107,7 @@
             <hist-trend-chart
               :msg="msg"
               :filterSec_value="filterSec_value"
+              :hisDefaultTime="hisDefaultTime"
               style="width: 100%"
             ></hist-trend-chart>
             <div class="panel-footer"></div>
@@ -146,6 +156,8 @@ export default {
       epLoad: null,
       select_value: 1,
       filterSec_value: 1,
+
+      hisDefaultTime: "2021-07-01",
     };
   },
   created() {},

src/views/site/components/Overview/histTrendChart.vue

@@ -9,6 +9,7 @@ export default {
   props: {
     msg: Object,
     filterSec_value: Object,
+    hisDefaultTime: Object,
   },
   data() {
     return {};
@@ -27,6 +28,9 @@ export default {
     "$store.state.siteId"() {
       this.electricIco();
     },
+    hisDefaultTime() {
+      this.electricIco();
+    },
     msg() {
       this.electricIco();
     },
@@ -36,10 +40,12 @@ export default {
   },
   methods: {
     electricIco() {
+      this.$store.commit("TimeAll_function", [this.hisDefaultTime]);
+      var time = this.$store.state.Time_Data;
       api
         .electricIco({
           siteId: this.$store.state.siteId,
-          date: "2021-07-01 00:00:00",
+          date: time[0],
         })
         .then((requset) => {
           if (requset.status === "SUCCESS") {