feat: batch power timing task operation history

src/api/platform.js

@@ -166,3 +166,28 @@ export function getOperationResults (query) {
     }
   })
 }
+
+export function getBatchTaskHistory (query) {
+  const { pageNum: pageIndex, pageSize, ...params } = query
+  return request({
+    url: '/device/powerScheduleHis/list',
+    method: 'GET',
+    params: {
+      pageIndex, pageSize,
+      ...params
+    }
+  })
+}
+
+export function addBatchTaskHistory (value, value1) {
+  return request({
+    url: '/device/powerScheduleHis/add',
+    method: 'POST',
+    data: {
+      value,
+      value1
+    },
+    custom: true,
+    background: true
+  })
+}

src/components/dialog/TaskDialog/index.vue

@@ -13,14 +13,18 @@
         class="c-sibling-item--v c-grid-form u-align-self--center"
       >
         <div class="l-flex--row c-grid-form__row c-grid-form__option u-font-size--sm u-color--black u-bold">
-          <div class="c-sibling-item">区间段 {{ index + 1 }}</div>
+          <div class="c-sibling-item">
+            区间段 {{ index + 1 }}
+          </div>
           <i
             v-if="multi && tasks.length > 1"
             class="c-sibling-item el-icon-delete has-active"
             @click="onRemoveBlock(index)"
           />
         </div>
-        <div class="c-grid-form__label">生效日期</div>
+        <div class="c-grid-form__label">
+          生效日期
+        </div>
         <el-date-picker
           v-model="task.date"
           class="u-width--lg"
@@ -32,7 +36,9 @@
           :picker-options="pickerOptions"
           :clearable="false"
         />
-        <div class="c-grid-form__label c-grid-form__auto">每周</div>
+        <div class="c-grid-form__label c-grid-form__auto">
+          每周
+        </div>
         <el-checkbox-group
           v-model="task.dayOfWeek"
           class="l-flex--row c-grid-form__auto"
@@ -48,7 +54,9 @@
             {{ week.label }}
           </el-checkbox-button>
         </el-checkbox-group>
-        <div class="c-grid-form__label">执行时间</div>
+        <div class="c-grid-form__label">
+          执行时间
+        </div>
         <div style="display: flex; flex-wrap: wrap; gap: 6px;">
           <div
             v-for="(item, tindex) in task.executeTime"
@@ -64,7 +72,9 @@
               clearable
               @change="onTimeChanged(item)"
             />
-            <span class="has-padding--h">-</span>
+            <span class="has-padding--h">
+              -
+            </span>
             <el-time-picker
               v-model="item.end"
               class="c-sibling-item u-width--xs"
@@ -256,7 +266,7 @@ export default {
         return
       }
       this.$emit('confirm', {
-        value: tasks.sort((a, b) => a.flag - b.flag).map(({ flag, date, dayOfWeek, executeTime }) => {
+        value: tasks.sort((a, b) => b.flag - a.flag).map(({ flag, date, dayOfWeek, executeTime }) => {
           return {
             flag: `${this.account}_${flag}`,
             startTime: date[0],

src/views/device/power/index.vue

@@ -38,7 +38,17 @@
       :schema="asyncSchema"
     >
       <template #tip>
-        <div class="has-bottom-padding--sm u-color--error dark u-font-size--sm">同步中请勿关闭弹窗，否则将停止同步</div>
+        <div class="c-siblint-item--v u-color--error dark u-font-size--sm">
+          同步中请勿关闭弹窗，否则将停止同步
+        </div>
+        <div
+          v-for="(info, index) in batchInfos"
+          :key="index"
+          class="c-siblint-item--v near u-color--black u-font-size--sm u-bold"
+        >
+          {{ info }}
+        </div>
+        <div class="has-bottom-padding--sm" />
       </template>
     </table-dialog>
     <confirm-dialog
@@ -48,7 +58,9 @@
     >
       <template #default>
         <div class="c-grid-form auto u-align-self--center">
-          <div class="c-grid-form__label u-required">日期范围</div>
+          <div class="c-grid-form__label u-required">
+            日期范围
+          </div>
           <el-date-picker
             v-model="dateRange"
             type="daterange"
@@ -58,7 +70,9 @@
             :editable="false"
             :clearable="false"
           />
-          <div class="c-grid-form__label u-required">目标任务</div>
+          <div class="c-grid-form__label u-required">
+            目标任务
+          </div>
           <el-checkbox-group
             v-model="actions"
             class="l-flex--row c-grid-form__option"
@@ -74,7 +88,9 @@
               {{ action.label }}
             </el-checkbox-button>
           </el-checkbox-group>
-          <div class="c-grid-form__label u-required">操作方式</div>
+          <div class="c-grid-form__label u-required">
+            操作方式
+          </div>
           <el-radio-group
             v-model="invoke"
             class="l-flex--row c-grid-form__auto"
@@ -96,9 +112,20 @@
       :schema="decreaseSchema"
     >
       <template #tip>
-        <div class="has-bottom-padding--sm u-color--error dark u-font-size--sm">同步中请勿关闭弹窗，否则将停止同步</div>
+        <div class="c-siblint-item--v u-color--error dark u-font-size--sm">
+          同步中请勿关闭弹窗，否则将停止同步
+        </div>
+        <div class="c-siblint-item--v near has-bottom-padding--sm u-color--black u-font-size--sm u-bold">
+          {{ batchInfo }}
+        </div>
       </template>
     </table-dialog>
+    <table-dialog
+      ref="taskHistoryDialog"
+      title="定时任务操作历史"
+      size="lg"
+      :schema="taskHistorySchema"
+    />
   </wrapper>
 </template>
 
@@ -120,7 +147,9 @@ import { Status } from '@/utils/adapter'
 import {
   toggleDevicePower,
   getOperationResult,
-  getOperationResults
+  getOperationResults,
+  getBatchTaskHistory,
+  addBatchTaskHistory
 } from '@/api/platform'
 import { getDevicesWithPower } from '@/api/device'
 import DevicePower from './components/DevicePower.vue'
@@ -141,9 +170,10 @@ export default {
         buttons: [
           { label: '一键开启', on: this.onOpen },
           { label: '一键关闭', on: this.onClose },
-          { label: '历史开关任务', on: this.onViewHistory },
+          { label: '开关任务历史', on: this.onViewHistory },
           { label: '新增定时任务', on: this.onAddTimingTask },
-          { label: '启停定时任务', on: this.onDecreaseTimingTask }
+          { label: '启停定时任务', on: this.onDecreaseTimingTask },
+          { label: '定时任务历史', on: this.onTaskHistory }
         ],
         filters: [
           { key: 'name', type: 'search', placeholder: '设备名称' },
@@ -163,15 +193,19 @@ export default {
         cols: [
           { prop: 'createTime', label: '执行时间', align: 'center' },
           { label: '执行动作', render: ({ action }) => ['开启电源', '关闭电源'][action], align: 'center' },
-          { label: '执行结果', type: 'tag', render: ({ operationStatus }) => {
-            return {
-              type: ['primary', 'success', 'danger'][operationStatus],
-              label: ['执行中', '成功', '存在失败'][operationStatus]
-            }
-          }, width: 160 },
-          { type: 'invoke', render: [
-            { label: '详情', on: this.onViewDetail }
-          ] }
+          {
+            label: '执行结果', type: 'tag', render: ({ operationStatus }) => {
+              return {
+                type: ['primary', 'success', 'danger'][operationStatus],
+                label: ['执行中', '成功', '存在失败'][operationStatus]
+              }
+            }, width: 160
+          },
+          {
+            type: 'invoke', render: [
+              { label: '详情', on: this.onViewDetail }
+            ]
+          }
         ]
       },
       detailSchema: {
@@ -179,12 +213,14 @@ export default {
         list: this.getOperationResult,
         cols: [
           { prop: 'deviceName', label: '设备名称' },
-          { label: '执行结果', type: 'tag', render: ({ executeStatus, failReason }) => {
-            return {
-              type: executeStatus ? 'success' : failReason === 'EXECUTING' ? 'primary' : 'danger',
-              label: executeStatus ? '成功' : failReason === 'EXECUTING' ? '执行中' : '失败'
-            }
-          }, width: 160 }
+          {
+            label: '执行结果', type: 'tag', render: ({ executeStatus, failReason }) => {
+              return {
+                type: executeStatus ? 'success' : failReason === 'EXECUTING' ? 'primary' : 'danger',
+                label: executeStatus ? '成功' : failReason === 'EXECUTING' ? '执行中' : '失败'
+              }
+            }, width: 160
+          }
         ]
       },
       asyncSchema: {
@@ -224,17 +260,39 @@ export default {
         list: this.getSyncDevices,
         cols: [
           { prop: 'name', label: '设备名称', 'min-width': 60 },
-          { label: '状态', render: (device, h) => h(DevicePowerDecreaseTask, {
-            props: {
-              device,
-              'date-range': this.dateRange,
-              actions: this.actions,
-              invoke: this.invoke
-            }
-          }), width: 120, align: 'center' },
+          {
+            label: '状态', render: (device, h) => h(DevicePowerDecreaseTask, {
+              props: {
+                device,
+                'date-range': this.dateRange,
+                actions: this.actions,
+                invoke: this.invoke
+              }
+            }), width: 120, align: 'center'
+          },
           { prop: 'address', label: '地址' }
         ]
-      }
+      },
+      taskHistorySchema: {
+        props: {
+          size: 'small'
+        },
+        list: this.getBatchTaskHistory,
+        cols: [
+          { type: 'expand', refresh: true, render: (data, h) => h('div', {
+            staticClass: 'o-info'
+          }, [
+            h('div', null, `影响设备：${data.value1}`)
+          ]) },
+          { prop: 'invoke', label: '操作', width: 60, align: 'center' },
+          { prop: 'date', label: '目标日期', width: 180, align: 'center' },
+          { prop: 'info', label: '描述', 'show-overflow-tooltip': false },
+          { prop: 'createBy', label: '操作人', width: 120 },
+          { prop: 'createTime', label: '操作时间', width: 140 }
+        ]
+      },
+      batchInfos: [],
+      batchInfo: ''
     }
   },
   computed: {
@@ -292,12 +350,14 @@ export default {
         ...params
       }).then(({ data }) => {
         const now = Date.now()
-        return { data: data.map(device => {
-          device.rowKey = `${now}_${device.id}`
-          device.power = Status.LOADING
-          device.timestamp = '-'
-          return device
-        }) }
+        return {
+          data: data.map(device => {
+            device.rowKey = `${now}_${device.id}`
+            device.power = Status.LOADING
+            device.timestamp = '-'
+            return device
+          })
+        }
       })
     },
     onOpen () {
@@ -417,6 +477,24 @@ export default {
       })
       this.$tasks = tasks
       done()
+      const batchInfos = []
+      value.forEach(({ startTime, endTime, dayOfWeek, executeTime }) => {
+        this.addTaskHistory({
+          type: 2,
+          startTime,
+          endTime,
+          dayOfWeek,
+          executeTime
+        })
+        const { date, info } = this.transformTask({
+          startTime,
+          endTime,
+          dayOfWeek,
+          executeTime
+        })
+        batchInfos.push(`${date} ${info}`)
+      })
+      this.batchInfos = batchInfos
       this.$refs.syncTaskDialog.show()
     },
     onDecreaseTimingTask () {
@@ -435,10 +513,82 @@ export default {
     },
     onConfirmDate (done) {
       done()
+      const [startDate, endDate] = this.dateRange
+      this.addTaskHistory({
+        type: 1,
+        startDate,
+        endDate,
+        invoke: this.invoke,
+        actions: [...this.actions]
+      })
+      const { invoke, date, info } = this.transformDecreaseTask({
+        startDate,
+        endDate,
+        invoke: this.invoke,
+        actions: [...this.actions]
+      })
+      this.batchInfo = `${invoke} ${date} ${info}`
       this.$refs.decreaseTaskDialog.show()
     },
     getSyncDevices () {
       return Promise.resolve({ data: Object.freeze([...this.$selectionItems]) })
+    },
+    onTaskHistory () {
+      this.$refs.taskHistoryDialog.show()
+    },
+    addTaskHistory (data) {
+      addBatchTaskHistory(JSON.stringify(data), this.$selectionItems.map(({ name }) => name).join('，'))
+    },
+    getBatchTaskHistory (query) {
+      return getBatchTaskHistory(query).then(({ data, totalCount }) => {
+        return {
+          data: data.map(this.transformTaskHistory),
+          totalCount
+        }
+      })
+    },
+    transformTaskHistory ({ value, ...history }) {
+      const { type, ...data } = JSON.parse(value)
+      switch (type) {
+        case 1:
+          return {
+            ...this.transformDecreaseTask(data),
+            ...history
+          }
+        case 2:
+          return {
+            ...this.transformTask(data),
+            ...history
+          }
+        default:
+          return history
+      }
+    },
+    transformDecreaseTask ({ startDate, endDate, invoke, actions }) {
+      return {
+        invoke: `${this.invokeOptions[invoke].label}`,
+        date: startDate === endDate ? startDate : `${startDate} - ${endDate}`,
+        info: actions.map(val => val === PowerAction.OPEN ? '开启电源的任务' : '关闭电源的任务').join('，')
+      }
+    },
+    transformTask ({ startTime, endTime, dayOfWeek, executeTime }) {
+      return {
+        invoke: '新增',
+        date: startTime === endTime ? startTime : `${startTime} - ${endTime}`,
+        info: `${this.getWeekInfo(dayOfWeek)} ${this.getExecuteInfo(executeTime)} `
+      }
+    },
+    getWeekInfo (dayOfWeek) {
+      return dayOfWeek === '?'
+        ? '每天'
+        : `每周${dayOfWeek.split(',').map(val => ['', '一', '二', '三', '四', '五', '六', '日'][val]).join('、')}`
+    },
+    getExecuteInfo (executeTime) {
+      return executeTime.map(({ start, end }) => start && end
+        ? `[${start.replace(/:\d{2}$/, '')} - ${end.replace(/:\d{2}$/, '')}]`
+        : start
+          ? `${start.replace(/:\d{2}$/, '')} 开启`
+          : `${end.replace(/:\d{2}$/, '')} 关闭`).join(', ')
     }
   }
 }