去除dayjs 增加moment，修改部分代码结构

package.json

@@ -10,12 +10,12 @@
   "dependencies": {
     "animate.css": "^4.1.1",
     "ant-design-vue": "^1.7.8",
-    "axios": "^1.2.6",
-    "dayjs": "^1.11.7",
+    "axios": "^1.2.6", 
     "echarts": "^5.4.1",
     "echarts-liquidfill": "^3.1.0",
     "element-resize-detector": "^1.2.4",
     "element-ui": "^2.15.12",
+    "moment": "^2.29.4",
     "pinia": "^2.0.16",
     "qs": "^6.11.0",
     "vue": "^2.7.14",

src/components/doubleCarbon/overview/doubleCarbonOverview.vue

@@ -281,12 +281,13 @@ export default {
     // 查询事件
     search() {
       this.searchLoading = true;
-      console.log(
-        "查询条件：",
-        this.searchParam.nameOfUnit,
-        this.searchParam.timeRange[0] ? this.$dayjs(this.searchParam.timeRange[0]).format("YYYY-MM-DD 00:00:00") : "",
-        this.searchParam.timeRange[1] ? this.$dayjs(this.searchParam.timeRange[1]).format("YYYY-MM-DD 00:00:00") : ""
-      );
+      /* dayjs舍弃，使用moment.js */
+      // console.log(
+      //   "查询条件：",
+      //   this.searchParam.nameOfUnit,
+      //   this.searchParam.timeRange[0] ? this.$dayjs(this.searchParam.timeRange[0]).format("YYYY-MM-DD 00:00:00") : "",
+      //   this.searchParam.timeRange[1] ? this.$dayjs(this.searchParam.timeRange[1]).format("YYYY-MM-DD 00:00:00") : ""
+      // );
       setTimeout(() => {
         this.searchLoading = false;
       }, 1000);

src/components/home/ContainerAside.vue

@@ -12,11 +12,11 @@ export default {
   },
   mounted() {
     let app = this;
-    let ele = document.getElementsByClassName('home-page')[0];
-    this.$util.eleResizeListener(ele, function () {
-      let height = ele.clientHeight;
-      app.height = height+'px'
-    })
+    // let ele = document.getElementsByClassName('home-page')[0];
+    // this.$util.eleResizeListener(ele, function () {
+    //   let height = ele.clientHeight;
+    //   app.height = height+'px'
+    // })
 
     this.routers = this.$router.options.routes;
     this.$nextTick(()=>{
@@ -62,7 +62,7 @@ export default {
 </script>
 
 <template>
-  <div class="containerAside" :style="{height: height}">
+  <div class="containerAside" :style="{height: '100%'}">
     <div class="containerAside-title">
       {{ title }}
     </div>
@@ -76,7 +76,7 @@ export default {
 .containerAside {
   width: 220px;
   height: 100%;
-  border: 1px solid #eeeeee;
+  border-right: 1px solid #eeeeee;
   display: inline-block;
   vertical-align: top;
   .containerAside-title {

src/components/work/overview/workOverview.vue

@@ -1,11 +1,107 @@
 <template>
-
+  <div>
+    <a-select :default-value="1" style="width: 120px" @change="handleChange">
+      <a-select-option
+        v-for="(item, index) in options"
+        :key="index"
+        :value="item.value"
+      >
+        {{ item.name }}
+      </a-select-option>
+    </a-select>
+    <a-select :default-value="7" style="width: 120px" @change="handleChange">
+      <a-select-option
+        v-for="(item, index) in floors"
+        :key="index"
+        :value="item.value"
+      >
+        {{ item.name }}
+      </a-select-option>
+    </a-select>
+    <a-range-picker
+      :disabled-date="disabledDate"
+      :disabled-time="disabledRangeTime"
+      :show-time="{
+        hideDisabledOptions: true,
+        defaultValue: [
+          $moment('00:00:00', 'HH:mm:ss'),
+          $moment('23:59:59', 'HH:mm:ss'),
+        ],
+      }"
+      format="YYYY-MM-DD HH:mm:ss"
+    />
+  </div>
 </template>
-
 <script>
-export default {}
+
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: 1,
+          name: "中讯1",
+        },
+        {
+          value: 2,
+          name: "中讯2",
+        },
+      ],
+      floors: [
+        {
+          value: 7,
+          name: "7层",
+        },
+        {
+          value: 8,
+          name: "8层",
+        },
+      ],
+    };
+  },
+  mounted() {
+     },
+  methods: {
+    range(start, end) {
+      const result = [];
+      for (let i = start; i < end; i++) {
+        result.push(i);
+      }
+      return result;
+    },
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current < this.$moment().endOf("day");
+    },
+
+    disabledDateTime() {
+      return {
+        disabledHours: () => this.range(0, 24).splice(4, 20),
+        disabledMinutes: () => this.range(30, 60),
+        disabledSeconds: () => [55, 56],
+      };
+    },
+    disabledRangeTime(_, type) {
+      if (type === "start") {
+        return {
+          disabledHours: () => this.range(0, 60).splice(24, 4),
+          disabledMinutes: () => this.range(30, 60),
+          disabledSeconds: () => [55, 56],
+        };
+      }
+      return {
+        disabledHours: () => this.range(0, 60).splice(24, 4),
+        disabledMinutes: () => this.range(0, 31),
+        disabledSeconds: () => [55, 56],
+      };
+    },
+    handleChange(value) {
+      console.log(`selected ${value}`);
+    },
+  },
+};
 </script>
+  
 
 <style lang="less" scoped>
-
 </style>

src/main.js

@@ -1,38 +1,48 @@
 import Vue from 'vue'
-import { PiniaVuePlugin, createPinia } from 'pinia'
 
-import Antd from 'ant-design-vue'
-import ElementUI from 'element-ui';
 import App from './App.vue'
 import router from './router'
 
-import * as echarts from 'echarts';
-import 'animate.css/animate.min.css'
+import Antd from 'ant-design-vue'
+
+import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import locale from 'element-ui/lib/locale/lang/zh-CN'
+
+import * as echarts from 'echarts';
+import 'animate.css/animate.min.css'
+
+import { PiniaVuePlugin, createPinia } from 'pinia'
+
+/* 自定义滚动条 */
+// 组件引入
 import { HappyScroll } from 'vue-happy-scroll'
-import dayjs from "dayjs"
-//自定义组件名
+// 组件命名
 Vue.component('happy-scroll', HappyScroll)
-// 引入css
+// 组件样式引入
 import 'vue-happy-scroll/docs/happy-scroll.css'
 
 // 全局方法
 import util from '@/utils/index'
 // 常量
 import constant from '@/utils/constant.js'
+// 时间插件
+import moment from '@/utils/moment_set.js'
 
 Vue.prototype.$util = util
 Vue.prototype.$constant = constant
 Vue.prototype.$echarts = echarts
-Vue.prototype.$dayjs = dayjs
+Vue.prototype.$moment = moment
 
 Vue.use(Antd)
-Vue.use(ElementUI, {locale});
+Vue.use(ElementUI, { locale });
 Vue.use(PiniaVuePlugin)
 
 new Vue({
   router,
+  data: {
+    moment,
+  },
   pinia: createPinia(),
   render: h => h(App),
 }).$mount('#app')

src/style/common.css

@@ -0,0 +1,18 @@
+.pageContainer-body {
+    width: calc(100% - 220px - 2px - 16px);
+    height: 100%;
+    display: inline-block;
+    margin-left: 8px;
+  }
+  .pageContainer-content {
+    width: 100%;
+    height: calc(100% - 25px - 20px - 8px - 2px);
+    border: 1px solid #e7eaf1;
+    padding: 8px 2px 2px 10px;
+  }
+  .happy-scroll-content {
+    width: 99% !important;
+  }
+  .ant-btn {
+    margin: 0 3px !important;
+  }

src/utils/moment_set.js

@@ -0,0 +1,101 @@
+import moment from "moment";
+moment.locale("zh-cn", {
+    months:
+        "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split(
+            "_"
+        ),
+    monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
+        "_"
+    ),
+    weekdays: "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
+    weekdaysShort: "周日_周一_周二_周三_周四_周五_周六".split("_"),
+    weekdaysMin: "日_一_二_三_四_五_六".split("_"),
+    longDateFormat: {
+        LT: "HH:mm",
+        LTS: "HH:mm:ss",
+        L: "YYYY-MM-DD",
+        LL: "YYYY年MM月DD日",
+        LLL: "YYYY年MM月DD日Ah点mm分",
+        LLLL: "YYYY年MM月DD日ddddAh点mm分",
+        l: "YYYY-M-D",
+        ll: "YYYY年M月D日",
+        lll: "YYYY年M月D日 HH:mm",
+        llll: "YYYY年M月D日dddd HH:mm",
+    },
+    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
+    meridiemHour: function (hour, meridiem) {
+        if (hour === 12) {
+            hour = 0;
+        }
+        if (meridiem === "凌晨" || meridiem === "早上" || meridiem === "上午") {
+            return hour;
+        } else if (meridiem === "下午" || meridiem === "晚上") {
+            return hour + 12;
+        } else {
+            // '中午'
+            return hour >= 11 ? hour : hour + 12;
+        }
+    },
+    meridiem: function (hour, minute, isLower) {
+        const hm = hour * 100 + minute;
+        if (hm < 600) {
+            return "凌晨";
+        } else if (hm < 900) {
+            return "早上";
+        } else if (hm < 1130) {
+            return "上午";
+        } else if (hm < 1230) {
+            return "中午";
+        } else if (hm < 1800) {
+            return "下午";
+        } else {
+            return "晚上";
+        }
+    },
+    calendar: {
+        sameDay: "[今天]LT",
+        nextDay: "[明天]LT",
+        nextWeek: "[下]ddddLT",
+        lastDay: "[昨天]LT",
+        lastWeek: "[上]ddddLT",
+        sameElse: "L",
+    },
+    dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
+    ordinal: function (number, period) {
+        switch (period) {
+            case "d":
+            case "D":
+            case "DDD":
+                return number + "日";
+            case "M":
+                return number + "月";
+            case "w":
+            case "W":
+                return number + "周";
+            default:
+                return number;
+        }
+    },
+    relativeTime: {
+        future: "%s内",
+        past: "%s前",
+        s: "几秒",
+        ss: "%d秒",
+        m: "1分钟",
+        mm: "%d分钟",
+        h: "1小时",
+        hh: "%d小时",
+        d: "1天",
+        dd: "%d天",
+        M: "1个月",
+        MM: "%d个月",
+        y: "1年",
+        yy: "%d年",
+    },
+    week: {
+        // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+        dow: 1, // Monday is the first day of the week.
+        doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+});
+export default moment

src/views/HomeView.vue

@@ -1,69 +1,74 @@
+
+<template>
+  <div class="home">
+    <a-layout id="components-layout-demo-top-side-2">
+      <a-layout-header class="header">
+        <HomeHeader :collapse.sync="collapse" :is-login="true" />
+      </a-layout-header>
+      <a-layout>
+        <a-layout-sider
+          v-model="collapse"
+          :trigger="null"
+          width="200"
+          style="background: #fff"
+          :collapsible="true"
+          :collapsed-width="60"
+        >
+          <HomeAside :collapse="collapse" />
+        </a-layout-sider>
+
+        <a-layout>
+          <!-- 内容 -->
+          <a-layout-content class="home-page">
+            <router-view />
+          </a-layout-content>
+        </a-layout>
+      </a-layout>
+    </a-layout>
+  </div>
+</template>
+
 <script>
+import "@/style/common.css"
+
 export default {
-  name: 'HomeView',
+  name: "HomeView",
   components: {
-    HomeHeader: () =>
-      import('@/components/home/HomeHeader.vue'),
-    HomeAside: () =>
-      import('@/components/home/HomeAside.vue'),
+    HomeHeader: () => import("@/components/home/HomeHeader.vue"),
+    HomeAside: () => import("@/components/home/HomeAside.vue"),
   },
   data() {
     return {
       collapse: true, // 侧边栏是否收起
-      asideWidth: '16%',
-      contentWidth: '84%',
+      asideWidth: "16%",
+      contentWidth: "84%",
       contentHeight: 450,
-    }
+    };
   },
   watch: {
     fold(val) {
-      let app = this
+      let app = this;
       setTimeout(() => {
-        app.suitHeight()
-      }, 100)
+        app.suitHeight();
+      }, 100);
     },
   },
   mounted() {
-    this.suitHeight()
+    this.suitHeight();
   },
   methods: {
     suitHeight() {
       let app = this;
       this.$nextTick(() => {
-        const height = document.getElementsByClassName('home')[0].clientHeight
+        const height = document.getElementsByClassName("home")[0].clientHeight;
         app.contentHeight = height - 60 - 24;
         app.$forceUpdate();
-      })
+      });
     },
   },
-}
+};
 </script>
 
-<template>
-  <div class="home">
-    <a-layout id="components-layout-demo-top-side-2">
-      <a-layout-header class="header">
-        <HomeHeader :collapse.sync="collapse" :is-login="true" />
-      </a-layout-header>
-      <a-layout>
-        <a-layout-sider
-          v-model="collapse" :trigger="null" width="200" style="background: #fff" :collapsible="true"
-          :collapsed-width="60"
-        >
-          <HomeAside :collapse="collapse" />
-        </a-layout-sider>
-
-        <a-layout style="padding: 12px 14px;">
-          <!-- 内容 -->
-          <a-layout-content class="home-page" :style="{ height: `${contentHeight}px` }">
-            <router-view />
-          </a-layout-content>
-        </a-layout>
-      </a-layout>
-    </a-layout>
-  </div>
-</template>
-
 <style lang="less" scoped>
 .home {
   width: 100%;
@@ -76,31 +81,11 @@ export default {
   }
 
   .home-page {
+    height: 100%;
     display: inline-block;
     background: #fff;
     margin: 0;
-    transition: all 1s
+    transition: all 1s;
   }
 }
 </style>
-
-<style>
-.pageContainer-body {
-  width: calc(100% - 220px - 2px - 16px);
-  height: 100%;
-  display: inline-block;
-  margin: 0 8px 8px 8px;
-}
-.pageContainer-content {
-  width: 100%;
-  height: calc(100% - 25px - 20px - 8px - 2px);
-  border: 1px solid #e7eaf1;
-  padding: 8px 2px 2px 10px;
-}
-.happy-scroll-content {
-  width: 99% !important;
-}
-.ant-btn {
-  margin: 0 3px !important;
-}
-</style>