日期搜索框

src/views/zdsz/bigscreen/index.vue

@@ -9,7 +9,18 @@
   <div class="app-container">
     <!-- 标题开始 -->
     <div class="mainTitle">
-
+      <div class="searchBox">
+        <el-date-picker
+            v-model="queryParams.begin_end_time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </div>
     </div>
     <!-- 标题结束 -->
       <!-- 上边五个 -->
@@ -128,8 +139,9 @@
       return {
         queryParams:{
           time: formatTimestampToDateString(new Date()), // 当日日期
-          beginTime: '2024-08-03', // 开始时间
+          beginTime: '2024-03-03', // 开始时间
           endTime: '2024-08-05', // 结束时间
+          begin_end_time: [], // 开始结束结束时间
         },
         progress: {
           names: ['不锈钢波纹管', '螺旋焊管', '无缝钢管', '镀锌钢管', '燃气用埋地聚乙烯管'],
@@ -153,8 +165,8 @@
       this.getProjectStatus(); // 工程状态统计
       this.getCountEngineering(); // 今日施工数
       this.getCountPerson(); // 今日使用人数
-      // this.getConstructionMap(); // 地图施工数据分布
-      // this.getConstructionNew(); // 各个区今日施工数
+      this.getConstructionMap(); // 地图施工数据分布
+      this.getConstructionNew(); // 各个区今日施工数
       this.getConstructionOld(); // 各个区今日旧改施工数
     },
     mounted() {
@@ -164,6 +176,9 @@
       },1)
     },
     methods: {
+      handleQuery(){
+        alert(this.queryParams.begin_end_time);
+      },
       getConstructionProgress(){ // 施工进度统计
         getConstructionProgress(this.queryParams).then(res => {
           console.log("施工进度统计", res);
@@ -236,13 +251,13 @@
       getConstructionNew(){ // 各个区今日施工数
         getConstructionNew(this.queryParams).then(res => {
           console.log("各个区今日施工数", res);
-          // this.echartsBottom_1(res.data);
+          this.echartsBottom_1(res.data);
         })
       },
       getConstructionOld(){ // 各个区今日旧改施工数
         getConstructionOld(this.queryParams).then(res => {
           console.log("各个区今日旧改施工数", res);
-          this.echartsBottom_1(res.data);
+          // this.echartsBottom_1(res.data);
           this.echartsBottom_2(res.data);
         })
       },
@@ -786,6 +801,12 @@
     height: 62px;
     margin-bottom: 10px;
     background: url("../../../assets/images/logo.jpg");
+    .searchBox{
+      float: right;
+      width: 450px;
+      height: 40px;
+      background-color: powderblue;
+    }
   }
   /*1920 * 929 Google Chrome*/
   /*1920 * 69 Title*/