时间问题，搜索问题修改

package-lock.json

@@ -12699,6 +12699,11 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.4.6.tgz",
+      "integrity": "sha512-oqAWKAin07ip/QuT/p4bL1LegE3MYPbfojrOcj80RATZDSnJyco2PZD8QuIzd0RhYfdAuSTkY8elvHsLu90RuQ=="
+    },
     "vuex": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.5.1.tgz?cache=0&sync_timestamp=1604065438225&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.5.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "vue": "^2.6.11",
     "vue-dompurify-html": "^2.3.0",
     "vue-router": "^3.2.0",
+    "vuetify": "^2.4.6",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/common/portrait.styl

@@ -46,6 +46,7 @@
 .mx-2{
   margin-left: 8px;
   margin-right: 8px;
+  color: #fff;
 }
 
 .my-2{

src/components/Search/Search.vue

@@ -3,28 +3,10 @@
 <template>
   <div class="d-flex flex-wrap pb-3">
     <div>
-      <a-date-picker
+      <a-range-picker
-        v-model="startValue"
+        :default-value="[$moment(timeObj.startTime, dateFormat), $moment(timeObj.endTime, dateFormat)]"
-        :disabled-date="disabledStartDate"
-        show-time
-        placeholder="开始时间"
-        :default-value="$moment(`${timeObj.startTime}`, dateFormat)"
         :format="dateFormat"
-        @openChange="handleStartOpenChange"
+        @change="onChange"
-        @change="getStartDate"
-        :allow-clear="clear"
-      />
-      <a-date-picker
-        v-model="endValue"
-        :disabled-date="disabledEndDate"
-        show-time
-        placeholder="结束时间"
-        :open="endOpen"
-        :default-value="$moment(timeObj.endTime, dateFormat)"
-        :format="dateFormat"
-        @openChange="handleEndOpenChange"
-        @change="getEndDate"
-        :allow-clear="clear"
       />
       <a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button>
       <a-button @click="downFile" icon="download" class="mx-2 down-btn" type="primary">下载</a-button>
@@ -44,40 +26,15 @@ export default {
         endTime: this.$moment(Date.parse(new Date())).format('YYYY-MM-DD'),
       },
       dateFormat: 'YYYY-MM-DD',
-      startValue: null,
+      clear: true,
-      endValue: null,
-      endOpen: false,
-      clear: false,
     };
   },
   methods: {
-    disabledStartDate(startValue) {
+    onChange(e) {
-      const endValue = this.endValue;
+      // this.timeObj.endTime = this.$moment(e._d).unix() * 1000 + 3600 * 24 * 1000;
-      if (!startValue || !endValue) {
+      console.log(e);
-        return false;
+      this.timeObj.startTime = this.$moment(e[0]._d).unix() * 1000;
-      }
+      this.timeObj.endTime = this.$moment(e[1]._d).unix() * 1000;
-      return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() < endValue.valueOf() - 3600 * 30 * 24 * 1000;
-    },
-    disabledEndDate(endValue) {
-      const startValue = this.startValue;
-      if (!endValue || !startValue) {
-        return false;
-      }
-      return startValue.valueOf() >= endValue.valueOf() || startValue.valueOf() < endValue.valueOf() - 3600 * 30 * 24 * 1000;
-    },
-    handleStartOpenChange(open) {
-      if (!open) {
-        this.endOpen = true;
-      }
-    },
-    handleEndOpenChange(open) {
-      this.endOpen = open;
-    },
-    getStartDate(e) {
-      this.timeObj.startTime = this.$moment(e._d).unix() * 1000;
-    },
-    getEndDate(e) {
-      this.timeObj.endTime = this.$moment(e._d).unix() * 1000;
     },
     handleTableChange() {
       if (typeof this.timeObj.startTime === 'string') {
@@ -86,13 +43,31 @@ export default {
       if (typeof this.timeObj.endTime === 'string') {
         this.timeObj.endTime = this.$moment(this.timeObj.endTime).unix() * 1000;
       }
-      this.$emit('getData', this.timeObj);
+      const mistake = this.timeObj.endTime - this.timeObj.startTime;
+      if (mistake > 3600 * 24 * 30 * 1000) {
+        this.$message.error('时间跨度请不要超过30天');
+      } else {
+        this.$emit('getData', this.timeObj);
+      }
     },
     // 下载附件
     downFile() {
-      window.open(
+      if (typeof this.timeObj.startTime === 'string') {
-        `http://test.tall.wiki/gateway/wisdomcar/record/weightExport?startTime=${this.timeObj.startTime}&&endTime=${this.timeObj.endTime}`,
+        this.timeObj.startTime = this.$moment(this.timeObj.startTime).unix() * 1000;
-      );
+      }
+      if (typeof this.timeObj.endTime === 'string') {
+        this.timeObj.endTime = this.$moment(this.timeObj.endTime).unix() * 1000;
+      }
+      const mistake = this.timeObj.endTime - this.timeObj.startTime;
+      if (mistake > 3600 * 24 * 30 * 1000) {
+        this.$message.error('时间跨度请不要超过30天');
+      } else {
+        this.$message.success('导出成功');
+        window.open(
+          `http://test.tall.wiki/gateway/wisdomcar/record/weightExport?
+          startTime=${this.timeObj.startTime}&&endTime=${this.timeObj.endTime}`,
+        );
+      }
     },
   },
 };

src/components/Table/Table.vue

@@ -14,7 +14,7 @@
           <span>{{ index + 1 }}</span>
         </template>
         <template slot="time" slot-scope="text, record">
-          <span>{{ $moment(parseInt(record.time)).format('YYYY-MM-DD HH:MM:SS') }}</span>
+          <span>{{ $moment(+record.time).format('YYYY-MM-DD HH:mm:ss') }}</span>
         </template>
         <template slot="value" slot-scope="text, record">
           <span v-if="record.type === 1">{{ record.value / 1000 }}kg</span>

src/main.js

@@ -18,7 +18,6 @@ Vue.prototype.$echarts = echarts;
 import moment from 'moment'; //导入文件
 Vue.prototype.$moment = moment; //赋值使用
 Vue.config.productionTip = false;
-
 window.vm = new Vue({
   router,
   store,

src/views/Index/Index.vue

@@ -28,6 +28,7 @@ export default {
     return {
       list: [],
       str: '',
+      disProgress: true,
     };
   },
 
@@ -37,7 +38,9 @@ export default {
 
   methods: {
     async getData(timeData) {
+      const hide = this.$message.loading('正在获取数据...', 0);
       try {
+        this.disProgress = true;
         const params = {
           param: {
             carId: 1,
@@ -51,7 +54,10 @@ export default {
           let { list } = this;
           list = data;
           this.list = [...list];
+          setTimeout(hide, 500);
+          this.$message.success('获取数据成功');
           // this.list = data;
+          this.disProgress = false;
         } else {
           this.$message.error(msg);
         }
@@ -72,4 +78,14 @@ export default {
   font-size: 18px;
   font-weight: bold;
 }
+
+.progress {
+  z-index: 1001;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  margin: 0;
+  height: 8px;
+}
 </style>