feat: screen control can be achieved through PLC and mqtt messages

src/views/device/detail/components/DeviceInvoke/ScreenSwitch.vue

@@ -2,79 +2,47 @@
   <div class="l-flex--col center has-border radius has-padding">
     <i
       class="o-icon has-bg u-pointer"
-      @click="onInvoke"
+      @click="invoke"
     />
     <div class="has-padding u-color--black u-bold">开关大屏</div>
     <el-dialog
       :visible.sync="show"
       custom-class="c-dialog"
       title="开关大屏"
+      :before-close="onCloseDialog"
     >
-      <div
-        v-if="show"
-        class="l-flex__fill l-flex--col jcenter center has-bottom-padding"
-      >
-        <div>
-          <button
-            class="o-button c-sibling-item"
-            @click="onSwitch(true)"
-          >
-            即刻开机
-          </button>
-          <button
-            class="o-button c-sibling-item far"
-            @click="onSwitch(false)"
-          >
-            即刻关机
-          </button>
+      <template v-if="show">
+        <div class="l-flex__fill l-flex--col jcenter center has-bottom-padding">
+          <div>
+            <button
+              class="o-button c-sibling-item"
+              @click="onSwitch(true)"
+            >
+              即刻开机
+            </button>
+            <button
+              class="o-button c-sibling-item far"
+              @click="onSwitch(false)"
+            >
+              即刻关机
+            </button>
+          </div>
         </div>
-      </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import {
-  getBoundPLCs,
-  plcCommand
-} from '@/api/external'
+import switchTaskMixin from './mixins/switch-task'
 
 export default {
   name: 'ScreenSwitch',
-  props: {
-    device: {
-      type: Object,
-      required: true
-    }
-  },
+  mixins: [switchTaskMixin],
   data () {
     return {
-      show: false
-    }
-  },
-  methods: {
-    onInvoke () {
-      const loading = this.$showLoading()
-      getBoundPLCs(this.device.id).finally(() => {
-        this.$closeLoading(loading)
-      }).then(data => {
-        if (data.length) {
-          this.show = true
-        } else {
-          this.$message({
-            type: 'warning',
-            message: '暂未绑定PLC，请联系管理员'
-          })
-        }
-      })
-    },
-    onSwitch (open) {
-      this.$confirm(
-        `立即${open ? '开机' : '关机'}？`,
-        { type: 'warning' }
-      ).then(() => {
-        plcCommand(this.device.id, open ? 1 : 0)
-      })
+      openFunctionKey: 'bootScreen',
+      closeFunctionKey: 'shutdownScreen'
     }
   }
 }

src/views/device/detail/components/DeviceInvoke/ScreenSwitchPLC.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="l-flex--col center has-border radius has-padding">
+    <i
+      class="o-icon has-bg u-pointer"
+      @click="onInvoke"
+    />
+    <div class="has-padding u-color--black u-bold">开关大屏(PLC)</div>
+    <el-dialog
+      :visible.sync="show"
+      custom-class="c-dialog"
+      title="开关大屏"
+    >
+      <div
+        v-if="show"
+        class="l-flex__fill l-flex--col jcenter center has-bottom-padding"
+      >
+        <div>
+          <button
+            class="o-button c-sibling-item"
+            @click="onSwitch(true)"
+          >
+            即刻开机
+          </button>
+          <button
+            class="o-button c-sibling-item far"
+            @click="onSwitch(false)"
+          >
+            即刻关机
+          </button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getBoundPLCs,
+  plcCommand
+} from '@/api/external'
+
+export default {
+  name: 'ScreenSwitchPLC',
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    onInvoke () {
+      const loading = this.$showLoading()
+      getBoundPLCs(this.device.id).finally(() => {
+        this.$closeLoading(loading)
+      }).then(data => {
+        if (data.length) {
+          this.show = true
+        } else {
+          this.$message({
+            type: 'warning',
+            message: '暂未绑定PLC，请联系管理员'
+          })
+        }
+      })
+    },
+    onSwitch (open) {
+      this.$confirm(
+        `立即${open ? '开机' : '关机'}？`,
+        { type: 'warning' }
+      ).then(() => {
+        plcCommand(this.device.id, open ? 1 : 0)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.o-icon {
+  background-image: url("~@/assets/icon_screen_switch.png");
+}
+</style>

src/views/device/detail/components/DeviceInvoke/index.vue

@@ -1,5 +1,6 @@
 <script>
 import ScreenSwitch from './ScreenSwitch'
+import ScreenSwitchPLC from './ScreenSwitchPLC'
 import ScreenLight from './ScreenLight'
 import ScreenVolume from './ScreenVolume'
 import DeviceNetwork from './DeviceNetwork'
@@ -12,6 +13,7 @@ export default {
   name: 'DeviceInvoke',
   components: {
     ScreenSwitch,
+    ScreenSwitchPLC,
     ScreenLight,
     ScreenVolume,
     DeviceNetwork,
@@ -29,6 +31,7 @@ export default {
           h('DeviceNetwork', { props: this.$attrs }),
           h('DeviceSwitch', { props: this.$attrs }),
           h('ScreenSwitch', { props: this.$attrs }),
+          h('ScreenSwitchPLC', { props: this.$attrs }),
           h('DeviceReboot', { props: this.$attrs }),
           h('ScreenLight', { props: this.$attrs }),
           h('ScreenVolume', { props: this.$attrs })