2021-6-11

56

记录一下完整checkingt过程，包括查看，取消查看，重启，恢复出厂设置，根据checking的不同来确定操作。
还有就是socket监听事件（on）放在组件里面，io放在祖里面这个逻辑。

<template>
    <div class="boxBasicHead">
      <template>
        <el-tag
          size="small"
          :class="box_online === 1 ? 'connection-success' : 'connection-fail'"
          :type="box_online === 1 ? 'success' : 'danger'"
          >{{ box_online === 1 ? $t('在线') : $t('离线') }}</el-tag
        >
      </template>
      <span
        v-if="model.update_status"
        style="color:white;margin-left:40px;fontSize:10px;font-weight:300;line-height: 2"
      >
        {{ model.online_status === 1 ? $t('升级中') : $t('待升级') }}
      </span>
    </div>

    <DialogInfo ref="dialogbasic" width="800px" :title="$t('基本信息')">
      <BoxBasic @refreshbasic="refreshbasic" :boxid="boxid" @close="close">
        <div class="dialog-footer">
          <div class="dialog-footer__btns">
            <el-button
              size="small"
              type="primary"
              @click="rebootAlert"
              :disabled="box_online === 0"
            >
              {{ $t('设备重启') }}
            </el-button>
            <el-button
              size="small"
              @click="restartAlert"
              type="primary"
              :disabled="box_online === 0"
            >
              {{ $t('恢复出厂设置') }}
            </el-button>
            <el-button size="small" @click="deleteAlert" type="primary">
              {{ $t('移除盒子') }}
            </el-button>
          </div>
        </div>
      </BoxBasic>
    </DialogInfo>
    <DialogDelete
      ref="restore"
      :title="$t('提示')"
      width="600px"
      @delete="ResetABox"
      >{{
        $t(
          '恢复出厂设置后该设备的所有设置将恢复到出厂默认状态确定继续执行此操作'
        )
      }}</DialogDelete
    >
    <DialogDelete
      ref="reboot"
      :title="'提示'"
      width="600px"
      @delete="RebootABox"
      >{{
        $t('该操作将放弃未保存的设置及数据确认是否继续执行此操作')
      }}</DialogDelete
    >
    <DialogDelete
      ref="dialogprocess"
      :time="true"
      :cancleBtn="false"
      :title="$t('提示')"
      @delete="refreshprogress"
      width="600px"
    >
      <div class="mask">
        <el-progress
          :text-inside="true"
          :stroke-width="22"
          :percentage="percent"
          class="progress"
        ></el-progress>
      </div>
      <div
        v-if="!issuccess"
        style="margin-top: 10px; display:flex; justify-content:center"
      >
        {{ $t('盒子正在重启中') }}
      </div>
      <div
        v-else
        style="margin-top: 10px; display:flex; justify-content:center"
      >
        {{ $t('盒子重启成功') }}
      </div>
    </DialogDelete>
  </div>
</template>

<script>
import DialogInfo from '@/components/DialogInfo.vue'
import DialogDelete from '@/components/DialogDelete.vue'
import BoxBasic from '@/components/BoxBasic.vue'
import {
  EditBox,
  DeleteBox
} from '@/api/ports'
export default {
  name: 'BoxFormHead',
  components: {
    ButtonWrapper,
    DialogInfo,
    DialogDelete,
    BoxBasic
  },
  props: {
    onSubmit: {
      type: Function,
      default: () => {}
    },
    list: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      issuccess: false,
      percent: 0,
      connection: null,
      isEdit: true,
      setdisable: true,
      box_online: 0,
      boxid: 99
    }
  },
  methods: {
    close () {
      this.$refs.dialogbasic.cancel()
    },
    refreshprogress () {
      this.$store.commit('setChecking', 0)
    },
    refreshbasic () {
      this.$emit('refreshbasic', this.boxid)
    },
    async RebootABox () {
      this.percent = 0
      this.issuccess = false
      this.$store.commit('setChecking', 3)
      this.$refs.dialogprocess.open()
    },
    restartAlert () {
      this.$refs.restore.open()
    },
    rebootAlert () {
      this.$refs.reboot.open()
    },
    onCheck () {
      this.$store.commit('setChecking', 1)
      this.$refs.dialogbasic.open()
    },
  mounted () {
    this.$WebsocketConnection.on('boxinfo', data => {
      this.$store.commit('setBoxHardWare', data)
    })
    this.$WebsocketConnection.on('boxstatus', data => {
      this.$store.commit('recordBoxStatus', {
        is_online: data.is_online,
        sn: data.sn
      })
    })
    this.$WebsocketConnection.on('netinfo', data => {
      this.$store.commit('setBoxNet', data)
    })
    if (this.list) {
      this.box_online = this.list.online_status
      this.boxid = this.list.id
    }
  },
  watch: {
    '$store.state.checking': {
      handler (value) {
        var self = this
        if (value === 1) {
          self.$WebsocketConnection.emit('boxinfo_start', {
            box_id: this.boxid
          })
        } else if (value === 2) {
          self.$WebsocketConnection.emit('boxinfo_end', {
            box_id: this.boxid
          })
        } else if (value === 3) {
          self.$WebsocketConnection.emit('box_restart', {
            box_id: this.boxid
          })
        } else if (value === 4) {
          self.$WebsocketConnection.emit('box_reset', {
            box_id: this.boxid
          })
        }
      }
    },
    list (value) {
      if (value) {
        this.box_online = this.list.online_status
        this.boxid = this.list.id
      }
    },
    '$store.state.boxStatus': {
      handler (value) {
        if (this.$store.state.BoxSN === value.sn) {
          this.box_online = value.is_online
          if (value.is_online === 1) {
            this.percent = 100
            if (this.interval) {
              clearInterval(this.interval)
            }
            this.refreshprogress()
            this.issuccess = true
          } else {
            this.percent = 0
            this.issuccess = false
            this.interval = setInterval(() => {
              this.percent = this.percent + 1
              if (this.percent === 99) {
                clearInterval(this.interval)
              }
            }, 1000)
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.connection-success {
  color: rgb(0, 238, 123);
  background: rgba(0, 238, 123, 0.2);
  border-color: rgba(0, 238, 123, 0.2);
}
.connection-fail {
  color: #ff2d2f;
  background: rgba(255, 45, 47, 0.2);
  border-color: rgba(255, 45, 47, 0.2);
}
.el-input {
  width: 200px;
}
.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  &__btns {
    display: flex;
    align-items: center;
  }
}
.button-new-tag {
  background-color: black;
}
.el-tag.el-tag--info {
  margin-right: 5px;
  background-color: rgba(0, 122, 254, 0.3);
  border-color: transparent;
  color: white;
}
</style>

子组件BoxBasic.vue

beforeDestroy () {
    this.$store.commit('setChecking', 2)
  },
  mounted () {
    this.hardwareInfo = this.$store.state.BoxHardWare
    this.formNet = this.$store.state.BoxNet
  },
    watch: {
    '$store.state.BoxHardWare': {
      handler (data) {
        this.dealWithData(data)
      }
    },
    '$store.state.BoxNet': {
      handler (data) {
        setTimeout(() => {
          this.dealWithNet(data)
        }, 400)
      }
    }
  }