交换机监控策略、图形监控

src/components/echartsList/dateTimeSelect.vue

@@ -26,13 +26,15 @@
       </ul>
       <el-date-picker
               v-model="dateRange"
-              :type="dateShowType === 'month' ? 'monthrange' : 'daterange'"
+              :class="dateShowType === 'datetimerange' ? null : 'timeIconSty'"
+              :type="dateShowType === 'month' ? 'monthrange' : dateShowType === 'day' ? 'daterange' : dateShowType ? dateShowType : 'daterange'"
               :start-placeholder="dateShowType === 'month' ? '开始日期' : '开始时间'"
               :end-placeholder="dateShowType === 'month' ? '结束日期' : '结束时间'"
               range-separator="至"
-              :format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
-              :value-format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
-              style="display: inline-block!important;width: 45%!important;vertical-align: middle;float: right;margin-right: 10px;"
+              :format="dateShowType === 'month' ? 'yyyy-MM' : dateShowType === 'datetimerange' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd' "
+              :value-format="dateShowType === 'month' ? 'yyyy-MM' : dateShowType === 'datetimerange' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
+              :style="{display: 'inline-block!important', verticalAlign: 'middle', marginRight: '10px', float: 'right', width: dateShowType === 'datetimerange' ? '75%!important' : '45%!important'}"
+              :default-time="dateShowType === 'datetimerange' ? ['12:00:00', '12:00:00'] : null"
               @change="dateChange"/>
     </div>
 </template>
@@ -48,6 +50,21 @@
         sideIcon: {
           type: Object,
           default: () => {}
+        },
+        dateDataTrans: {
+          type: Object,
+          default: () => {}
+        }
+      },
+      watch: {
+        dateDataTrans: {
+          handler(val) {
+            if (val && val.dateRange) {
+              this.dateRange = val.dateRange;
+            }
+          },
+          deep: true,
+          immediate: true
         }
       },
       data() {
@@ -80,9 +97,12 @@
         },
         // 时间选择器
         dateChange() {
-          this.$emit("dataChange", this.isActive, this.dateRange);
-          this.isActive = '';
-          // this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
+          if (this.dateDataTrans && this.dateDataTrans.transList) {
+            this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
+          } else {
+            this.$emit("dataChange", this.isActive, this.dateRange);
+            this.isActive = '';
+          }
         },
         // 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
         getLastDays(num) {
@@ -107,15 +127,29 @@
         // 获取前一个月的所有日期
         getDaysOfPreviousMonth(star, end) {
           // 1. 获取当前日期（终点日期）
-          const currentDate = new Date();
+          let currentDate = new Date();
+          if (end) {
+            currentDate = new Date(end);
+          }
           const endYear = currentDate.getFullYear();
           const endMonth = currentDate.getMonth(); // 0=1月，11=12月
           const endDay = currentDate.getDate();     // 当前日（如8）
 
           // 2. 计算起点日期（当前日期的“上月同日”，处理边界：如3月31日→2月28/29日）
-          const startDate = new Date(endYear, endMonth, endDay);
-          // 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题）
-          startDate.setMonth(startDate.getMonth() - 1);
+          let startDate = new Date(endYear, endMonth, endDay);
+          if (star) {
+            startDate = new Date(star);
+          } else {
+            // 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题）
+            startDate.setMonth(startDate.getMonth() - 1);
+          }
+          // 日期后面的时间
+          let timeStar = '';
+          let timeEnd = '';
+          if (this.dateShowType === 'datetimerange') {
+            timeStar = String(new Date(startDate).getHours()).padStart(2, '0') + ':' + String(new Date(startDate).getMinutes()).padStart(2, '0') + ':' + String(new Date(startDate).getSeconds()).padStart(2, '0');
+            timeEnd = String(new Date(currentDate).getHours()).padStart(2, '0') + ':' + String(new Date(currentDate).getMinutes()).padStart(2, '0') + ':' + String(new Date(currentDate).getSeconds()).padStart(2, '0');
+          }
 
           // 3. 提取起点日期的年、月、日（用于循环判断）
           const startYear = startDate.getFullYear();
@@ -133,15 +167,20 @@
             const year = tempDate.getFullYear();
             const month = String(tempDate.getMonth() + 1).padStart(2, '0');
             const day = String(tempDate.getDate()).padStart(2, '0');
-            const formattedDate = `${year}-${month}-${day}`;
-
+            let formattedDate = `${year}-${month}-${day}`;
+            if (this.dateShowType === 'datetimerange') {
+              if (dateCollection && dateCollection.length <= 0) {
+                formattedDate = formattedDate + ' ' + timeStar;
+              } else {
+                formattedDate = formattedDate + ' ' + timeEnd;
+              }
+            }
             dateCollection.push(formattedDate);
-
             // 临时日期加1天（进入下一天）
             tempDate.setDate(tempDate.getDate() + 1);
           }
           let timeArr = [dateCollection[0], dateCollection[dateCollection.length - 1]];
-          this.$emit("dataChange", this.isActive, timeArr);
+          this.$emit("dataChange", this.isActive, {timeArr: timeArr, timeList: dateCollection});
           // this.$emit("dataChange", this.isActive, oneMonthDays);
         },
         // 获取前三个月的月
@@ -181,7 +220,7 @@
   ::v-deep .el-date-editor .el-range-separator {
     vertical-align: super!important;
   }
-  ::v-deep .el-date-editor .el-range__close-icon {
+  ::v-deep .timeIconSty .el-range__close-icon {
     margin-top: -38px;
     margin-right: -14px;
   }