新增固件升级及固件管理

zrj

2024-08-20 075899f95b5cc11502ce744f3ae416948e8858f4

新增固件升级及固件管理

 src/api/device/device.js

@@ -47,3 +47,60 @@
    },
  });
};


export const getDeviceUpgradeInfo = (params) => {
  return request({
    url: '/drone-sample/manage/api/v1/workspaces/firmware-release-notes/latest',
    method: 'get',
    params: params
  });
};

export const ota = (workspace_id,row) => {
  return request({
    url: `/drone-sample/manage/api/v1/devices/${workspace_id}/devices/ota`,
    method: 'post',
    data: row,
  });
};


export const getDeviceFirmwareList = (current, size,workspace_id, params) => {
  return request({
    url: `/drone-sample/manage/api/v1/workspaces/${workspace_id}/firmwares/page`,
    method: 'get',
    params: {
      ...params,
      current,
      size,
    },
  });
};

export const upload = (workspace_id,formDatas) => {
  return request({
    url: `/drone-sample/manage/api/v1/workspaces/${workspace_id}/firmwares/file/upload`,
    method: 'post',
    data: formDatas,
    headers: { "Content-Type": "multipart/form-data" },
  });
};

export const updateFirmware = (row) => {
  return request({
    url: `/drone-sample/manage/api/v1/workspaces/firmwares/update`,
    method: 'post',
    data: row,
  });
};

export const deleteFirmware = ids => {
  return request({
    url: `/drone-sample/manage/api/v1/workspaces/firmwares/delete`,
    method: 'post',
    params: {
      ids
    }
  });
};

 src/views/device/airport.vue

@@ -26,7 +26,7 @@
          type="danger"
          icon="el-icon-delete"
          plain
          v-if="permission.workspace_delete"
          v-if="permission.device_delete"
          @click="handleDelete"
          >删 除
        </el-button>
@@ -54,19 +54,91 @@
          <span style="margin-left: 5px">离线</span>
        </div>
      </template>
      <template #firmware_status="{ row }">
        <div
          v-if="row.firmware_status == 1"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <div style="background-color: #f1f1f1; border-radius: 4px">无需升级</div>
        </div>
        <div
          v-if="row.firmware_status == 2"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <div @click="updateFirmware(row)" class="firmware_status">升级固件</div>
        </div>
        <div
          v-if="row.firmware_status == 3"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <span style="margin-left: 5px">一致性升级</span>
        </div>
        <div
          v-if="row.firmware_status == 4"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <div style="background-color: #a8cbfb; border-radius: 4px">
            升级中
            <!-- <el-progress  v-if="percentageNum>0 && percentageNum<100" :percentage="percentageNum"></el-progress> -->
          </div>
        </div>
      </template>
      <template #menu="scope">
        <el-button
          type="primary"
          text
          icon="el-icon-collection-tag"
          @click.stop="handleOpenFirmwarm(scope.row, scope.index)"
          >固件管理
        </el-button>
      </template>
    </avue-crud>
    <el-dialog title="固件升级" append-to-body v-model="firmwareBox" width="455px">
      <div>升级固件版本：{{ firmwareVersion }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="firmwareBox = false">取 消</el-button>
          <el-button type="primary" @click="updateFirmwareConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-drawer
      title="固件管理"
      size="60%"
      append-to-body
      v-model="firmwareManageVisible"
      :direction="'rtl'"
    >
      <FirmwareManage ref="firmwareManage" />
    </el-drawer>
  </basic-container>
</template>

<script>
import { getList, remove, update, add, getDetail } from '@/api/device/device';
import {
  getList,
  remove,
  update,
  add,
  getDetail,
  getDeviceUpgradeInfo,
  ota,
} from '@/api/device/device';
import { mapGetters } from 'vuex';

import FirmwareManage from './components/firmwareManage.vue';
export default {
  components: {
    FirmwareManage,
  },
  data() {
    return {
      firmwareManageVisible: false,
      percentageNum: 0,
      firmwareBox: false,
      firmwareInfo: {},
      form: {},
      query: {},
      firmwareVersion: '',
      loading: true,
      page: {
        pageSize: 10,
@@ -156,6 +228,22 @@
              {
                required: true,
                message: '请输入固件版本',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '固件升级',
            prop: 'firmware_status',
            labelWidth: 130,
            width: 100,
            viewDisabled: true,
            addDisabled: true,
            editDisabled: true,
            rules: [
              {
                required: true,
                message: '请输入固件升级',
                trigger: 'blur',
              },
            ],
@@ -251,6 +339,18 @@
        ],
      },
      data: [],
      DeviceFirmwareTypeEnum: {
        // 普通升级
        ToUpgraded: 3,
        // 一致性升级
        ConsistencyUpgrade: 2,
      },
      DeviceFirmwareStatusEnum: {
        None: 1, // 无需升级
        ToUpgraded: 2, // 待升级
        ConsistencyUpgrade: 3, // 一致性升级
        DuringUpgrade: 4, // 升级中
      },
    };
  },
  computed: {
@@ -274,6 +374,63 @@
  methods: {
    init() {
      this.onLoad(this.page);
    },
    // 打开固件管理页面
    handleOpenFirmwarm(row) {
      var that = this;
      this.firmwareManageVisible = true;
      this.$nextTick(() => {
        that.$refs.firmwareManage.init(row);
      });
    },
    // 升级固件按钮事件
    updateFirmware(row) {
      if (row.status == 0) {
        this.$message({
          type: 'warning',
          message: '设备不在线!',
        });
        return;
      }
      var that = this;
      this.firmwareBox = true;
      const param = {
        device_name: row.device_name,
      };
      // 获取固件最新版本信息
      getDeviceUpgradeInfo(param).then(res => {
        const data = res.data.data;
        if (data.length === 0) {
          return;
        }
        that.firmwareVersion = data[0].product_version;
        that.firmwareInfo['device_name'] = row.device_name;
        that.firmwareInfo['sn'] = row.device_sn;
        that.firmwareInfo['product_version'] = data[0].product_version;
        // 1-普通升级，2-一致性升级;
        that.firmwareInfo['firmware_upgrade_type'] =
          row.firmware_status === that.DeviceFirmwareStatusEnum.ToUpgraded
            ? that.DeviceFirmwareTypeEnum.ToUpgraded
            : that.DeviceFirmwareTypeEnum.ConsistencyUpgrade;
        that.firmwareInfo['workspaceId'] = row.workspace_id;
      });
    },
    // 确定升级固件版本
    updateFirmwareConfirm() {
      var that = this;
      var arr = [];
      arr.push(that.firmwareInfo);
      ota(that.firmwareInfo.workspaceId, arr).then(res => {
        that.firmwareVersion = '';
        that.firmwareInfo = {};
        that.firmwareBox = false;
        this.$message({
          type: 'success',
          message: '操作成功!',
        });
        this.onLoad(this.page);
        done();
      });
    },
    rowSave(row, done, loading) {
      add(row).then(
@@ -394,7 +551,7 @@
        };
        values.releaseTimeRange = null;
      }
      values['type'] = 1
      values['type'] = 1;
      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data;
@@ -411,7 +568,7 @@
      var params = {
        childSn: tree.child_sn,
      };
      getList(1,10,params).then(res => {
      getList(1, 10, params).then(res => {
        resolve(res.data.data.records);
      });
    },
@@ -419,4 +576,13 @@
};
</script>

<style></style>
<style>
.firmware_status {
  background-color: aqua;
  border-radius: 4px;
}
.firmware_status:hover {
  cursor: pointer;
  /* color: aqua; */
}
</style>

 src/views/device/components/firmwareManage.vue

New file
@@ -0,0 +1,400 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      ref="crud"
      @row-del="rowDel"
      v-model="form"
      :permission="permissionList"
      @row-update="rowUpdate"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
    >
      <template #menu-left>
        <el-button type="primary" icon="el-icon-plus" plain @click="openFirmwareUpload"
          >固件上传
        </el-button>
      </template>
    </avue-crud>
    <el-dialog title="固件上传" append-to-body v-model="firmwareUploadBox" width="40%" height="60%">
      <el-form
        ref="form"
        :model="importForm"
        label-width="80px"
        style="width: 80%; margin-left: 10%"
        :rules="rules"
      >
        <el-form-item label="设备名称" prop="device_name">
          <el-input v-model="importForm.device_name" clearable disabled></el-input>
        </el-form-item>

        <!-- 上传 -->
        <el-form-item label="固件文件" label-width="80px" prop="file">
          <el-upload
            class="upload-demo"
            action="#"
            ref="uploadFirmware"
            :limit="1"
            :auto-upload="false"
            :multiple="false"
            :before-upload="beforeUploadFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text" style="height: 50px"><em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否可用" prop="status">
          <el-select v-model="importForm.status" placeholder="请选择" clearable>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" label-width="80px" prop="release_note">
          <el-input type="textarea" v-model="importForm.release_note" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onConfirm">确定</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getDeviceFirmwareList, deleteFirmware, updateFirmware, upload } from '@/api/device/device';
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      file: '',
      rules: {
        device_name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        status: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      importForm: {},
      firmwareUploadBox: false,
      form: {},
      query: {},
      workspaceId: '',
      deviceName: '',
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        lazy: true,
        tree: true,
        height: 'atuo',
        calcHeight: 32,
        dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        addBtn: false,
        selection: true,
        excelBtn: false,
        dialogClickModal: false,
        grid: false,
        column: [
          {
            label: '设备名称',
            prop: 'device_name',
            editDisabled: true,
            // search: true,
            // searchSpan: 5,
            labelWidth: 130,
            addDisplay: false,
            editDisabled: true,
            rules: [
              {
                required: true,
                message: '请输入设备型号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '固件文件名称',
            prop: 'file_name',
            labelWidth: 130,
            search: true,
            searchSpan: 8,
            searchLabelWidth: 120,
            editDisabled: true,
            rules: [
              {
                required: true,
                message: '请输入固件文件名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '文件大小',
            prop: 'file_size',
            addDisplay: false,
            editDisabled: true,
            labelWidth: 130,
            rules: [
              {
                required: false,
                message: '请输入文件大小',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '固件版本',
            prop: 'firmware_version',
            labelWidth: 130,
            width: 100,
            editDisabled: true,
            rules: [
              {
                required: true,
                message: '请输入固件版本',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '上传时间',
            prop: 'create_time',
            type: 'date',
            addDisplay: false,
            editDisplay: false,
            labelWidth: 130,
            width: 160,
            format: 'YYYY-MM-DD HH:mm:ss',
            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '任务开始时间',
            rules: [
              {
                required: true,
                message: '请输入在线时间',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '是否可用',
            prop: 'status',
            addDisplay: false,
            labelWidth: 130,
            type: 'select',
            width: 100,
            dicData: [
              {
                label: '可用',
                value: true,
              },
              {
                label: '不可用',
                value: false,
              },
            ],
            rules: [
              {
                required: true,
                message: '请输入在线状态',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.airport_add, true),
        viewBtn: this.validData(this.permission.airport_view, true),
        delBtn: this.validData(this.permission.airport_delete, true),
        editBtn: this.validData(this.permission.airport_edit, true),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    //自定义上传方法，使用上传组件的submit()后才会触发以获取文件实体
    beforeUploadFile(param) {
      this.file = param;
      return false;
    },
    // 确定按钮
    onConfirm() {
      var that = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$refs.uploadFirmware.submit();
          const formDatas = new FormData();
          formDatas.append('file', that.file);
          formDatas.append('deviceName', that.importForm.device_name);
          formDatas.append('releaseNote', that.importForm.release_note);
          formDatas.append('status', that.importForm.status);
          this.loading = true;
          // 提交
          upload(this.workspaceId, formDatas).then(res => {
            this.loading = false;
            this.firmwareUploadBox = false;
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onCancel(){
        this.firmwareUploadBox = false;
        this.file = ''
    },
    //打卡固件上传页面
    openFirmwareUpload() {
      this.firmwareUploadBox = true;
      this.importForm['device_name'] = this.deviceName;
    },
    // 初始化数据
    init(data) {
      this.workspaceId = data.workspace_id;
      this.deviceName = data.device_name;
      this.onLoad(this.page);
    },
    rowUpdate(row, index, done, loading) {
        updateFirmware(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return deleteFirmware(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      params['device_name'] = this.deviceName;
      this.loading = true;
      getDeviceFirmwareList(page.currentPage, page.pageSize, this.workspaceId, params).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style>
.firmware_status {
  background-color: aqua;
  border-radius: 4px;
}
.firmware_status:hover {
  cursor: pointer;
  /* color: aqua; */
}
</style>