From c58ff44fc3daa98e0256b7b6f02a1024ad776c65 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Wed, 5 Mar 2025 09:13:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(datepicker):=20=E6=9B=BF=E6=8D=A2=20el-dat?=
 =?UTF-8?q?e-picker=20=E4=B8=BA=20vue2-datepicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在多个组件中将 el-date-picker 替换为 vue2-datepicker
- 调整日期选择器的样式和配置，以适应项目需求
- 在 package.json 中添加 vue2-datepicker 依赖
---
 package.json                                  |  1 +
 .../ems/record/recordSteamInstant/index.vue   | 30 ++++++++-----
 .../ems/report/currentSteamCurve/index.vue    | 29 ++++++++----
 .../ems/report/pointSteamCurve/index.vue      | 45 ++++++++++++-------
 .../ems/report/reportPointSteam/index.vue     | 29 ++++++++----
 5 files changed, 90 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index 0ae02f2..5d3114b 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue2-datepicker": "^3.11.1",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xlsx": "^0.17.0"
diff --git a/src/views/ems/record/recordSteamInstant/index.vue b/src/views/ems/record/recordSteamInstant/index.vue
index e67b5ef..81dd473 100644
--- a/src/views/ems/record/recordSteamInstant/index.vue
+++ b/src/views/ems/record/recordSteamInstant/index.vue
@@ -50,15 +50,15 @@
             ></el-date-picker>
           </el-form-item>-->
           <el-form-item label="记录时间">
-            <el-date-picker
+            <date-picker
               v-model="daterangeRecordTime"
-              style="width: 340px"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="datetimerange"
-              range-separator="-"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            ></el-date-picker>
+              range
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-type="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              :lang="lang"
+            ></date-picker>
           </el-form-item>
 
 <!--          <el-form-item label="记录日期范围">
@@ -272,11 +272,15 @@ import { getMonitorInfoTree, listBaseMonitorInfo } from '@/api/ems/base/baseMoni
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { parseTime } from '@/utils/ruoyi'
+import DatePicker from 'vue2-datepicker';
+import 'vue2-datepicker/index.css';
+import 'vue2-datepicker/locale/zh-cn';
 
 export default {
   name: 'RecordSteamInstant',
   components: {
-    Treeselect
+    Treeselect,
+    DatePicker
   },
   data() {
     return {
@@ -356,7 +360,13 @@ export default {
         { key: 9, label: `压力差值`, visible: false },
         { key: 10, label: `记录时间`, visible: true },
         /*{ key: 12, label: `计量设备名称`, visible: true }*/
-      ]
+      ],
+      lang: {
+        formatLocale: {
+          firstDayOfWeek: 1
+        },
+        monthBeforeYear: false
+      }
     }
   },
   created() {
diff --git a/src/views/ems/report/currentSteamCurve/index.vue b/src/views/ems/report/currentSteamCurve/index.vue
index 1cd481b..b76ebb3 100644
--- a/src/views/ems/report/currentSteamCurve/index.vue
+++ b/src/views/ems/report/currentSteamCurve/index.vue
@@ -40,15 +40,16 @@
           <!--            />-->
           <!--          </el-form-item>-->
           <el-form-item label="采集时间">
-            <el-date-picker
+            <date-picker
               v-model="daterangeRecordTime"
+              range
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-type="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              :lang="lang"
               style="width: 340px"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="datetimerange"
-              range-separator="-"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            ></el-date-picker>
+            ></date-picker>
           </el-form-item>
 
 <!--          <el-form-item label="采集日期范围">
@@ -97,13 +98,17 @@ import Chart from '@/components/Charts/Chart'
 import * as echarts from 'echarts'
 import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
 import {listRecordSteamInstant, steamInstantAvg, steamInstantList} from "@/api/ems/record/recordSteamInstant";
+import DatePicker from 'vue2-datepicker';
+import 'vue2-datepicker/index.css';
+import 'vue2-datepicker/locale/zh-cn';
 
 export default {
   name: 'currentSteamCurve',
   dicts: ['collect_type'],
   components: {
     Chart,
-    Treeselect
+    Treeselect,
+    DatePicker
   },
   data() {
     return {
@@ -183,7 +188,13 @@ export default {
         { key: 10, label: `压力差值`, visible: false },
         { key: 11, label: `记录时间`, visible: true },
         { key: 12, label: `计量设备名称`, visible: true }
-      ]
+      ],
+      lang: {
+        formatLocale: {
+          firstDayOfWeek: 1
+        },
+        monthBeforeYear: false
+      }
     }
   },
   created() {
diff --git a/src/views/ems/report/pointSteamCurve/index.vue b/src/views/ems/report/pointSteamCurve/index.vue
index b327957..d3ecbdc 100644
--- a/src/views/ems/report/pointSteamCurve/index.vue
+++ b/src/views/ems/report/pointSteamCurve/index.vue
@@ -30,24 +30,25 @@
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                  label-width="100px"
         >
-          <!--          <el-form-item label="计量设备编号" prop="monitorCode">-->
-          <!--            <el-input-->
-          <!--              v-model="queryParams.monitorCode"-->
-          <!--              placeholder="请输入计量设备编号"-->
-          <!--              clearable-->
-          <!--              @keyup.enter.native="handleQuery"-->
-          <!--            />-->
-          <!--          </el-form-item>-->
+          <!--          <el-form-item label="计量设备编号" prop="monitorCode">
+            <el-input
+              v-model="queryParams.monitorCode"
+              placeholder="请输入计量设备编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>-->
           <el-form-item label="记录时间">
-            <el-date-picker
+            <date-picker
               v-model="daterangeRecordTime"
+              range
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-type="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              :lang="lang"
               style="width: 340px"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="datetimerange"
-              range-separator="-"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            ></el-date-picker>
+            ></date-picker>
           </el-form-item>
 
 <!--          <el-form-item label="采集日期范围">
@@ -96,13 +97,17 @@ import { parseTime } from '@/utils/ruoyi'
 import Chart from '@/components/Charts/Chart'
 import * as echarts from 'echarts'
 import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
+import DatePicker from 'vue2-datepicker';
+import 'vue2-datepicker/index.css';
+import 'vue2-datepicker/locale/zh-cn';
 
 export default {
   name: 'currentSteamCurve',
   dicts: ['collect_type'],
   components: {
     Chart,
-    Treeselect
+    Treeselect,
+    DatePicker
   },
   data() {
     return {
@@ -176,7 +181,13 @@ export default {
         { key: 10, label: `更新人`, visible: false },
         { key: 11, label: `更新时间`, visible: false },
         { key: 12, label: `计量设备名称`, visible: true }
-      ]
+      ],
+      lang: {
+        formatLocale: {
+          firstDayOfWeek: 1
+        },
+        monthBeforeYear: false
+      },
     }
   },
   created() {
diff --git a/src/views/ems/report/reportPointSteam/index.vue b/src/views/ems/report/reportPointSteam/index.vue
index 5fce5e5..f0c31b2 100644
--- a/src/views/ems/report/reportPointSteam/index.vue
+++ b/src/views/ems/report/reportPointSteam/index.vue
@@ -39,15 +39,16 @@
           <!--        />-->
           <!--      </el-form-item>-->
           <el-form-item label="开始时间">
-            <el-date-picker
+            <date-picker
               v-model="daterangeBeginTime"
+              range
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-type="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              :lang="lang"
               style="width: 340px"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="datetimerange"
-              range-separator="-"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            ></el-date-picker>
+            ></date-picker>
           </el-form-item>
 <!--          <el-form-item label="采集日期范围">
             <el-date-picker
@@ -272,10 +273,16 @@ import {
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { parseTime } from '@/utils/ruoyi'
 import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo'
+import DatePicker from 'vue2-datepicker'
+import 'vue2-datepicker/index.css'
+import 'vue2-datepicker/locale/zh-cn'
 
 export default {
   name: 'reportPointSteam',
   dicts: ['update_flag'],
+  components: {
+    DatePicker
+  },
   data() {
     return {
       //左侧树结构List
@@ -342,7 +349,13 @@ export default {
         { key: 10, label: `更新人`, visible: false },
         { key: 11, label: `更新时间`, visible: false },
         { key: 12, label: `计量设备名称`, visible: true }
-      ]
+      ],
+      lang: {
+        formatLocale: {
+          firstDayOfWeek: 1
+        },
+        monthBeforeYear: false
+      }
     }
   },
   created() {