feat(powerbox): timing control

src/views/platform/settings/components/TimingControlDialog.vue

@@ -0,0 +1,301 @@
+<template>
+  <c-dialog
+    ref="dialog"
+    title="配电箱"
+    size="lg fixed"
+    @closed="onClose"
+  >
+    <template #default>
+      <div class="l-flex--row c-sibling-item--v">
+        <div class="c-sibling-item u-bold">设备编号</div>
+        <div class="l-flex--row c-sibling-item far">
+          <el-input
+            v-model="identifier"
+            class="c-sibling-item"
+            placeholder="请输入设备编号"
+            controls-position="right"
+          />
+          <button
+            class="c-sibling-item near o-button"
+            @click="onApply"
+          >
+            应用
+          </button>
+        </div>
+      </div>
+      <div class="l-flex--row c-sibling-item--v has-bottom-padding has-bottom-border">
+        <div class="c-sibling-item u-bold">当前模式</div>
+        <el-radio
+          v-model="mode"
+          class="c-sibling-item far"
+          label="manual"
+          @change="onModeChange"
+        >
+          手动
+        </el-radio>
+        <el-radio
+          v-model="mode"
+          label="timer"
+          @change="onModeChange"
+        >
+          定时
+        </el-radio>
+      </div>
+      <div class="c-sibling-item--v">
+        <el-row class="storni">
+          <el-col
+            v-for="(day, index) in data"
+            :key="index"
+            class="storni"
+          >
+            <el-card>
+              <h3>周 {{ index + 1 }}</h3>
+              <div>
+                <el-table
+                  :data="day.timers"
+                  style="width: 100%"
+                >
+                  <el-table-column
+                    prop="startTime"
+                    label="开始时间"
+                    width="100"
+                  >
+                    <template slot-scope="{ row }">
+                      {{ row.startTime === '0:0:0' && row.stopTime === '0:0:0' ? '未开启' : row.startTime }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="100">
+                    <template slot-scope="scope">
+                      <el-button
+                        type="text"
+                        size="small"
+                        @click="handleClick(day, scope.row.startTime, scope.row)"
+                      >
+                        编辑
+                      </el-button>
+                      <el-button
+                        type="text"
+                        size="small"
+                        @click="resetClick(day, scope.row)"
+                      >
+                        重置
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="stopTime"
+                    label="结束时间"
+                    width="100"
+                  >
+                    <template slot-scope="{ row }">
+                      {{ row.startTime === '0:0:0' && row.stopTime === '0:0:0' ? '未开启' : row.stopTime }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="100">
+                    <template slot-scope="scope">
+                      <el-button
+                        type="text"
+                        size="small"
+                        @click="handleClick(day, scope.row.stopTime, scope.row)"
+                      >
+                        编辑
+                      </el-button>
+                      <el-button
+                        type="text"
+                        size="small"
+                        @click="resetClick(day, scope.row)"
+                      >
+                        重置
+                      </el-button>
+                    </template>
+                  </el-table-column>>
+                </el-table>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <confirm-dialog
+        ref="confirmDialog"
+        title="时间编辑"
+        size="mini"
+        append-to-body
+        @confirm="onSave"
+      >
+        <div class="u-align-self--center">
+          <el-time-picker
+            v-model="timeCofig"
+            class="u-width--sm"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            :clearable="false"
+          />
+        </div>
+      </confirm-dialog>
+    </template>
+  </c-dialog>
+</template>
+
+<script>
+import {
+  getThirdPartyElectricBox,
+  updateThirdPartyElectricBox,
+  electricRead,
+  electricQuery,
+  electricControl
+} from '../api'
+const ELECTRIC_ID = 1
+
+export default {
+  name: 'TimingControlDialog',
+  data () {
+    return {
+      identifier: '',
+      mode: '',
+      data: [],
+      timeCofig: '',
+      week: '',
+      sequencer: '',
+      status: null
+    }
+  },
+  mounted () {
+    this.$timer = -1
+  },
+  methods: {
+    onClose () {
+      clearInterval(this.$timer)
+    },
+    show () {
+      const loading = this.$showLoading()
+      // 查询设备编号
+      getThirdPartyElectricBox(ELECTRIC_ID)
+        .then(data => {
+          this.identifier = data.data.identifier
+        })
+        .then(this.initPowerBox)
+        .then(() => {
+          this.$refs.dialog.show()
+        })
+        .finally(() => {
+          this.$closeLoading(loading)
+        })
+    },
+    initPowerBox () {
+      return electricRead({
+        electricId: ELECTRIC_ID,
+        commandKey: 6
+      })
+        .then(() => electricRead({
+          electricId: ELECTRIC_ID,
+          commandKey: 7
+        }))
+        .then(() => electricQuery({
+          electricId: ELECTRIC_ID,
+          commandKey: 12,
+          queryMode: 1
+        }))
+        .then(({ data }) => {
+          this.getPorts()
+          if (data[0]) {
+            this.mode = data[0].mode
+          } else {
+            this.$message({
+              type: 'warning',
+              message: '模式同步中，请稍后再试'
+            })
+            this.mode = ''
+          }
+        })
+    },
+    handleClick (row, val, item) {
+      this.sequencer = row.timers.indexOf(item)
+      this.status = row.timers[this.sequencer].startTime === val
+      this.timeCofig = val
+      this.week = row.week
+      this.$refs.confirmDialog.show()
+    },
+    resetClick (row, item) {
+      this.sequencer = row.timers.indexOf(item)
+      this.week = row.week
+      electricControl({
+        electricId: ELECTRIC_ID,
+        commandKey: 4,
+        week: this.week,
+        sequencer: this.sequencer,
+        hour: '00',
+        minute: '00',
+        second: '00',
+        status: this.status === true ? 1 : 0
+      }).then(() => {
+        this.$refs.dialog.show()
+        this.initPowerBox()
+      })
+    },
+    onSave (done) {
+      if (!this.timeCofig) {
+        this.$message({
+          type: 'warning',
+          message: '请选择时间'
+        })
+        return
+      }
+      const [hour, minute, second] = this.timeCofig.split(':')
+      electricControl({
+        electricId: ELECTRIC_ID,
+        commandKey: 4,
+        week: this.week,
+        sequencer: this.sequencer,
+        hour,
+        minute,
+        second,
+        status: this.status === true ? 1 : 0
+      }).then(() => {
+        this.initPowerBox()
+        done()
+      })
+    },
+    async getPorts () {
+      const promises = []
+      for (let i = 1; i <= 7; i++) {
+        promises.push(
+          electricQuery({
+            electricId: ELECTRIC_ID,
+            commandKey: 15,
+            queryMode: 1,
+            week: i
+          }).then(({ data }) => data[0])
+        )
+      }
+      const outputArr = await Promise.all(promises)
+      this.data = outputArr
+    },
+    onApply () {
+      updateThirdPartyElectricBox({
+        id: ELECTRIC_ID,
+        identifier: this.identifier
+      }).then(this.initPowerBox).then(() => {
+        this.$refs.reportTable.pageTo(1)
+        this.$refs.table.pageTo(1)
+      })
+    },
+    onModeChange (mode) {
+      electricControl({
+        electricId: ELECTRIC_ID,
+        commandKey: 1,
+        mode
+      }).then(
+        () => {
+          this.$message({
+            type: 'success',
+            message: '变更成功'
+          })
+        },
+        () => {
+          this.mode = mode === 'timer' ? 'manual' : 'timer'
+        }
+      )
+    }
+  }
+}
+</script>

src/views/platform/settings/components/TimeTaskDialog.vue → src/views/platform/settings/components/TimingTaskDialog.vue

@@ -42,7 +42,7 @@ import {
 } from '../api'
 
 export default {
-  name: 'TimeTaskDialog',
+  name: 'TimingTaskDialog',
   data () {
     return {
       config: {

src/views/platform/settings/index.vue

@@ -28,31 +28,43 @@
       >
         操控
       </button>
+      <button
+        class="o-button"
+        @click="ontimeControlConfig"
+      >
+        定时控制
+      </button>
     </div>
-    <time-task-dialog ref="timeTaskDialog" />
+    <timing-task-dialog ref="timingTaskDialog" />
     <power-box-config-dialog ref="powerBoxConfigDialog" />
+    <timing-control-dialog ref="timingControlDialog" />
   </wrapper>
 </template>
 
 <script>
-import TimeTaskDialog from './components/TimeTaskDialog.vue'
+import TimingTaskDialog from './components/TimingTaskDialog.vue'
 import PowerBoxConfigDialog from './components/PowerBoxConfigDialog.vue'
+import TimingControlDialog from './components/TimingControlDialog.vue'
 
 export default {
   name: 'PlatformSettings',
   components: {
-    TimeTaskDialog,
-    PowerBoxConfigDialog
+    TimingTaskDialog,
+    PowerBoxConfigDialog,
+    TimingControlDialog
   },
   methods: {
     onOnlineDurationTask () {
-      this.$refs.timeTaskDialog.show('device_online_summary')
+      this.$refs.timingTaskDialog.show('device_online_summary')
     },
     onAdTask () {
-      this.$refs.timeTaskDialog.show('advertisement_statistic')
+      this.$refs.timingTaskDialog.show('advertisement_statistic')
     },
     onPowerBoxConfig () {
       this.$refs.powerBoxConfigDialog.show()
+    },
+    ontimeControlConfig () {
+      this.$refs.timingControlDialog.show()
     }
   }
 }