opt: 优化设备报警记录页面,并且实现国际化

acs/nladmin-ui/src/views/acs/history/deviceErrorInfo/index.vue

@@ -4,11 +4,11 @@
     <div class="head-container">
       <div v-if="crud.props.searchToggle">
         <!-- 搜索 -->
-        <label class="el-form-item-label">设备编码</label>
+        <label class="el-form-item-label">{{ $t('errorLog.table.device_code') }}</label>
         <el-input
           v-model="query.device_code"
           clearable
-          placeholder="设备编码"
+          :placeholder="$t('errorLog.table.device_code')"
           style="width: 185px;"
           class="filter-item"
           @keyup.enter.native="crud.toQuery"
@@ -16,7 +16,7 @@
         <el-input
           v-model="query.error_code"
           clearable
-          placeholder="报警编码"
+          :placeholder="$t('errorLog.table.alarm_code')"
           style="width: 185px;"
           class="filter-item"
           @keyup.enter.native="crud.toQuery"
@@ -24,81 +24,20 @@
         <el-input
           v-model="query.error_info"
           clearable
-          placeholder="报警信息"
+          :placeholder="$t('errorLog.table.alarm_message')"
           style="width: 185px;"
           class="filter-item"
           @keyup.enter.native="crud.toQuery"
         />
-        <!-- <el-date-picker
-          v-model="query.error_time"
-          clearable
-          placeholder="错误时间"
-          format="yyyy-MM-dd HH:mm:ss"
-          :range-separator="'至'"
-          :start-placeholder="'开始时间'"
-          :end-placeholder="'结束时间'"
-          class="date-item"
-          @change="handleDateChange"
-          @keyup.enter.native="crud.toQuery"
-        /> -->
-        <!-- <el-date-picker
-          v-model="query.start_time"
-          clearable
-          placeholder="错误时间"
-          format="yyyy-MM-dd HH:mm:ss"
-          class="date-item"
-          @keyup.enter.native="crud.toQuery"
-        /> -->
         <el-date-picker
-          v-model="query.timeRange"
-          type="daterange"
-          clearable
-          range-separator="至"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          format="yyyy-MM-dd HH:mm:ss"
-          class="date-item"
-          @keyup.enter.native="crud.toQuery"
-        />
-        <!-- <el-date-picker
-          v-model="timeRange"
+          v-model="value"
           type="datetimerange"
-          clearable
-          picker-options="{
-            format: 'yyyy-MM-dd HH:mm:ss',
-            shortcuts: [{
-              text: '最近一小时',
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date(end.getTime() - 3600000);
-                picker.$emit('pick', [start, end]);
-                // 将时间范围值赋值给start_time和end_time
-                this.start_time = start;
-                this.end_time = end;
-          }
-          }, {
-            text: '最近一天',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date(end.getTime() - 24 * 3600000);
-              picker.$emit('pick', [start, end]);
-              // 将时间范围值赋值给start_time和end_time
-              this.start_time = start;
-              this.end_time = end;
-          }
-          }, {
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date(end.getTime() - 7 * 24 * 3600000);
-              picker.$emit('pick', [start, end]);
-              // 将时间范围值赋值给start_time和end_time
-              this.start_time = start;
-              this.end_time = end;
-           }
-            }]
-          }"
-        /> -->
+          :end-placeholder="$t('errorLog.table.end_time')"
+          :start-placeholder="$t('errorLog.table.start_time')"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          :picker-options="pickerOptions"
+          @change="pickerChange"
+        />
         <rrOperation :crud="crud" />
       </div>
       <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
@@ -139,13 +78,13 @@
         @selection-change="crud.selectionChangeHandler"
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column prop="device_code" label="设备编码" />
-        <el-table-column prop="error_code" label="报警编码" />
-        <el-table-column prop="error_info" label="报警信息" />
-        <el-table-column prop="error_time" label="报警时间" />
+        <el-table-column prop="device_code" :label="$t('errorLog.table.device_code')" />
+        <el-table-column prop="error_code" :label="$t('errorLog.table.alarm_code')" />
+        <el-table-column prop="error_info" :label="$t('errorLog.table.alarm_message')" />
+        <el-table-column prop="error_time" :label="$t('errorLog.table.error_time')" />
         <el-table-column
           v-permission="['admin','acsDeviceErrorLog:edit','acsDeviceErrorLog:del']"
-          label="操作"
+          :label="$t('Auto.table.operate')"
           width="150px"
           align="center"
         >
@@ -207,21 +146,52 @@ export default {
         { key: 'device_code', display_name: '设备编码' },
         { key: 'error_code', display_name: '报警编码' },
         { key: 'error_info', display_name: '报警信息' }
-      ]
+      ],
+      value: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: this.$t('monitor.lucence.the_past_week'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('monitor.lucence.the_past_month'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('monitor.lucence.the_past_three_months'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      }
     }
   },
   methods: {
+
     // 钩子：在获取表格数据之前执行，false 则代表不获取数据
     [CRUD.HOOK.beforeRefresh]() {
+      console.log(this.query.value)
       return true
     },
-    handleDateChange() {
-      /* if (this.timeRange && this.timeRange.length === 2) {
-        this.crud.url = 'api/deviceErrorLog?page=0&size=10&sort=error_log_uuid,desc' +
-        '&start_time=' + this.timeRange[0] + '&end_time=' + this.timeRange[1]
+    pickerChange() {
+      if (this.value && this.value.length === 2) {
+        this.query.start_time = this.value[0]
+        this.query.end_time = this.value[1]
       } else {
-        this.crud.url = 'api/deviceErrorLog?page=0&size=10&sort=error_log_uuid,desc'
-      } */
+        this.query.start_time = ''
+        this.query.end_time = ''
+      }
     },
     doExportDeviceErrorLogging() {
       this.downLoadTaskLogging = true
@@ -229,8 +199,8 @@ export default {
         device_code: this.query.device_code,
         error_code: this.query.error_code,
         error_info: this.query.error_info,
-        start_time: this.crud.createTime,
-        end_time: this.crud.endTime
+        start_time: this.query.start_time,
+        end_time: this.query.end_time
       }
       const url = '/api/deviceErrorLog/download'
       download(url, params).then(result => {