应用中心应用添加升级交互

hanbaoshan

2020-10-17 fbf765d5c363f4ccec60fe9d73875099ffe544ff

 src/pages/ai/index/App.vue

@@ -23,25 +23,35 @@
                <div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'">

                  <p class="src-title">算法软件</p>

                  <div class="flex-list">

                    <div class="wrap-box" v-for="item in ungradeList" :key="item.id">

                    <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+item.id">

                      <div class="list-choose-item-left">

                        <div class="mask flex-center">

                          <div class="info-onmask">

                            <div>当前版本:{{item.version}}</div>

                            <div>最新版本:{{item.remoteVersion}}</div>

                          </div>

                          <el-button type="primary" class="bot-btn" @click="donwload(item)">升级</el-button>

                        </div>



                        <div class="list-complete-item-handle">

                          <div class="svg-wrap">

                          <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}">

                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>

                            <div class="mask">

                              <div class="info-onmask">

                                <div>当前版本:{{item.version}}</div>

                                <div>最新版本:{{item.remoteVersion}}</div>

                              </div>

                              <div class="mask-btn">

                                <el-button

                                  type="warning"

                                  class="bot-btn"

                                  size="small"

                                  @click="donwload(item)"

                                >升级</el-button>

                              </div>

                            </div>



                            <!-- <div class="list-complete-item-handle"> -->

                            <!-- <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}"> -->

                            <img

                              v-if="item.iconBlob"

                              class="baseImg"

                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                            <img v-else class="baseImg" :src="item.icon" alt="">

                            <img v-else class="baseImg" :src="item.icon" alt />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -66,7 +76,7 @@
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                            <img v-else class="baseImg" :src="item.icon" alt="">

                            <img v-else class="baseImg" :src="item.icon" alt />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -105,7 +115,7 @@
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                            <img v-else class="baseImg" :src="item.icon" alt="">

                            <img v-else class="baseImg" :src="item.icon" alt />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -123,17 +133,33 @@
                        <div class="list-complete-item-handle">

                          <div

                            class="svg-wrap"

                            v-loading="item.unloadLoading"

                            element-loading-text="卸载中"

                            :class="{willUpGrade:item.isUpgrade}"

                            v-loading="item.unloadLoading||item.upgradeLoading"

                            :element-loading-text="item.unloadLoading?'卸载中':'升级中'"

                            element-loading-background="rgba(0,0,0,.8)"

                          >

                            <div class="mask" v-if="!item.isDefault">

                              <el-button

                                v-if="!item.isDefault"

                                @click="unLoad(item)"

                                type="primary"

                                class="bot-btn"

                              >卸载</el-button>

                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>

                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">

                              <div class="info-onmask">

                                <div>当前版本:{{item.version}}</div>

                                <div v-if="item.remoteVersion">最新版本:{{item.remoteVersion}}</div>

                              </div>

                              <div class="mask-btn">

                                <el-button

                                  v-if="!item.isDefault"

                                  @click="unLoad(item)"

                                  type="primary"

                                  size="small"

                                  class="bot-btn"

                                >卸载</el-button>

                                <el-button

                                  v-if="item.isUpgrade"

                                  @click="downloadApp(item,'upgrade')"

                                  type="warning"

                                  size="small"

                                  class="bot-btn"

                                >升级</el-button>

                              </div>

                            </div>

                            <img

                              v-if="item.iconBlob"

@@ -141,7 +167,7 @@
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                            <img v-else class="baseImg" :src="item.icon" alt="">

                            <img v-else class="baseImg" :src="item.icon" alt />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -164,8 +190,8 @@
                        <div class="list-complete-item-handle uninstall">

                          <div

                            class="svg-wrap"

                            v-loading="item.installLoading"

                            element-loading-text="安装中"

                            v-loading="item.installLoading||item.upgradeLoading"

                            :element-loading-text="item.installLoading?'安装中':'升级中'"

                            element-loading-background="rgba(0,0,0,.8)"

                          >

                            <div class="mask">

@@ -181,7 +207,7 @@
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                            <img v-else class="baseImg" :src="item.icon" alt="">

                            <img v-else class="baseImg" :src="item.icon" alt />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -242,7 +268,7 @@
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                            <img v-else class="baseImg" :src="item.icon" alt="">

                            <img v-else class="baseImg" :src="item.icon" alt />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -279,7 +305,7 @@
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                            <img v-else class="baseImg" :src="item.icon" alt="">

                            <img v-else class="baseImg" :src="item.icon" alt />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -442,24 +468,24 @@
    FileUploader

  },

  computed: {

    notInstalledList() {

    notInstalledList () {

      return this.TaskMange.list1.filter(sdk => {

        return sdk.installed === false;

      });

    },

    installedList() {

    installedList () {

      return this.TaskMange.list1.filter(sdk => {

        return sdk.installed === true;

      });

    },

    ungradeList() {

    ungradeList () {

      // 升级处理会导致重复的key,需要修改

      return [];

      //return [];

      return this.TaskMange.list1.filter(sdk => {

        return sdk.isUpgrade === true;

      });

    },

    isAdmin() {

    isAdmin () {

      if (

        sessionStorage.getItem("userInfo") &&

        sessionStorage.getItem("userInfo") !== ""

@@ -471,7 +497,7 @@
      return false;

    },

  },

  data() {

  data () {

    return {

      TaskMange: new TaskManage,

      VideoManageData: new VideoManageData,

@@ -565,7 +591,7 @@
  },

  watch: {

    list2: {

      handler(newVal, oldVal) {

      handler (newVal, oldVal) {

        // window.console.log(newVal, oldVal, '监听list2')

        if (newVal !== oldVal) {

          // window.console.log(newVal, '监听list2')

@@ -586,7 +612,7 @@
      }

    }

  },

  mounted() {

  mounted () {

    this.getAllApps();

    this.findAllSdk();

    this.findByType();

@@ -599,10 +625,11 @@
    this.VideoManageData.init();

  },

  methods: {

    isShow(authority) {

    isShow (authority) {

      return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1

    },

    offlineInstall() {

    //离线安装

    offlineInstall () {

      this.installDialogVisible = false;

      this.isInstall = true;

      //安装

@@ -617,8 +644,11 @@
          setTimeout(() => {

            this.findAllSdk();

            this.getAllApps();

            window.parent.postMessage({

              msg: "AppUpdate"

            }, '*')

            this.activeName = 'myAlgorithm';

          }, 3000)

          }, 3000);

        }



      }).catch(e => {

@@ -630,22 +660,46 @@
        });

      })

    },

    downloadApp(app) {

      app.installLoading = true;

    downloadApp (app, action) {

      if (action == 'upgrade') {

        app.upgradeLoading = true;

      } else {

        app.installLoading = true;

      }

      let _this = this;



      installApp({ path: app.id }).then(res => {

        if (res && res.success) {

          setTimeout(() => {

            app.installLoading = false;

            if (action == 'upgrade') {

              app.upgradeLoading = false;

              _this.notify({

                type:'success',

                message:'升级成功'

              });

            } else {

              app.installLoading = false;

              _this.notify({

                type:'success',

                message:'安装成功'

              });

            }

            _this.getAllApps();

            window.parent.postMessage({

              msg: "AppUpdate"

            }, '*')

          }, 3000);

        }

      }).catch(e => {

        console.log(e);

        if (action == 'upgrade') {

          app.upgradeLoading = false;

        } else {

          app.installLoading = false;

        }

      })

    },

    getAllApps() {

    getAllApps () {

      let _this = this;

      _this.installedApps = [];

      _this.storeApps = [];

@@ -654,10 +708,10 @@
          //_this.storeApps = res.data;

          res.data.forEach(item => {

            if (item.installed) {

              let obj = Object.assign({ unloadLoading: false }, item)

              let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)

              _this.installedApps.push(obj)

            } else {

              let obj = Object.assign({ installLoading: false }, item)

              let obj = Object.assign({ installLoading: false, upgradeLoading: false }, item)

              _this.storeApps.push(obj)

            }

          });

@@ -667,7 +721,7 @@
      })

    },

    //卸载应用

    unLoad(app) {

    unLoad (app) {

      app.unloadLoading = true;

      let _this = this;

      removeApp({ appId: app.id }).then(res => {

@@ -681,6 +735,9 @@
            }, '*')

          }, 3000);

        }

      }).catch(e => {

        console.log(e);

        app.unloadLoading = false;

      })



    },

@@ -691,7 +748,7 @@
    //   this.activeCode = '';

    //   this.activedSdkOrApp = this.newActInfo()

    // },

    actSdkOrApp(id, type = 'sdk') {

    actSdkOrApp (id, type = 'sdk') {

      this.actType = type;

      this.actId = id;

      this.actDrawerShow = true;

@@ -699,7 +756,7 @@
      this.activeCode = '';

      this.activedSdkOrApp = this.newActInfo()

    },

    newActInfo() {

    newActInfo () {

      return {

        activateCode: '',

        productName: '',

@@ -709,7 +766,7 @@
        devIds: ''

      }

    },

    getUnActivedList() {

    getUnActivedList () {

      getUnActivedSdk().then(res => {

        if (res.code == 200) {

          this.unActivedSDKList = res.data;

@@ -717,7 +774,7 @@
      })



    },

    getUnActivedAppList() {

    getUnActivedAppList () {

      getUnActivedApp().then(res => {

        if (res.code == 200) {

          this.unActivedAppList = res.data;

@@ -725,10 +782,10 @@
      });

    },



    installFormat(percentage) {

    installFormat (percentage) {

      return percentage === 100 ? '安装成功' : `${percentage}%`;

    },

    actived() {

    actived () {

      let _this = this;

      if (this.actType == 'sdk') {

        //激活算法

@@ -766,12 +823,12 @@
        });

      }

    },

    getCodeDetail() { },

    checkMyAlgorith() {

    getCodeDetail () { },

    checkMyAlgorith () {

      this.actDrawerShow = false;

      this.activeName = "myAlgorithm";

    },

    onFileUpload(file) {

    onFileUpload (file) {

      //this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始安装</span>`;

      this.patchFile = { ...file };

      this.fileAdded = true;

@@ -883,12 +940,12 @@


    },



    onFileAdded(f) {

    onFileAdded (f) {

      ;

      this.patchUpdateStatus = "";

    },

    // 校验输入的是否是数字

    valiNum(value) {

    valiNum (value) {

      if (value) {

        let re = /[^\-?\d.]*$/;

        if (!re.test(value)) {

@@ -905,7 +962,7 @@
      }

    },

    // 左边拖动模块得拖动结束后的触发函数

    endLeft(env) {

    endLeft (env) {

      this.dragging = false;

      let taskId = env.to.id;

      let sdkId = this.TaskMange.list1[env.oldIndex].id;

@@ -946,24 +1003,24 @@
      this.addTaskSdk(json);

    },

    // 右边拖动模块开始拖动触发函数

    startRight(env) {

    startRight (env) {

      this.$nextTick(() => {

        this.dragging = true;

      });

      // window.window.console.log(env, "right start");

    },

    // 右边拖动模块拖动结束触发函数

    endRight(env) {

    endRight (env) {

      // window.window.console.log(env, "right end");

    },

    clickSet(data) {

    clickSet (data) {

      if (data.isSetting) {

        data.isSetting = false;

      } else {

        data.isSetting = true;

      }

    },

    clickDel(data, Index) {

    clickDel (data, Index) {

      this.$confirm("提示：删除后，此任务在摄像机中的应用失效，是否删除？", {

        center: true,

        showConfirmButton: true,

@@ -976,7 +1033,7 @@
        })

        .catch(err => { });

    },

    clickSetAlgo(row, data) {

    clickSetAlgo (row, data) {

      // window.console.log(row, data, "编辑任务中某一个算法");

      if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) {

        row.isShowSetAlgo = false;

@@ -1042,7 +1099,7 @@
        // });

      }

    },

    async getRulesByTaskSdk(taskId, sdkId) {

    async getRulesByTaskSdk (taskId, sdkId) {

      let res = await getRulesByTaskSdk({

        taskId: taskId,

        sdkId: sdkId

@@ -1078,7 +1135,7 @@
        this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList));

      }

    },

    async findAllSdk() {

    async findAllSdk () {

      let res = await findAllSdk();

      if (res && res.success) {

        this.TaskMange.list1 = res.data.map((i, index) => {

@@ -1095,7 +1152,7 @@
        });

      }

    },

    addTask() {

    addTask () {

      let obj = {

        id: "",

        name: "任务" + this.TaskMange.list2.length,

@@ -1111,7 +1168,7 @@
        taskArea.scrollTop = taskArea.scrollHeight;

      });

    },

    async findAll() {

    async findAll () {

      let res = await findAll();

      if (res && res.success) {

        if (res.data && res.data.length !== 0) {

@@ -1148,7 +1205,7 @@
        }

      }

    },

    clickDelSdk(task, sdk) {

    clickDelSdk (task, sdk) {

      this.$confirm(

        "提示：删除后，此算法在本任务中移除，同时在摄像机中的应用失效，是否删除？",

        {

@@ -1164,7 +1221,7 @@
        })

        .catch(err => { });

    },

    selectChange(event, type, data) {

    selectChange (event, type, data) {

      if (type === "options1") {

        // window.window.console.log(type, data, "选择下拉框");

        data.options1.map(i => {

@@ -1175,7 +1232,7 @@
      }

    },

    // 删除任务算法

    async delTaskSdk(task, sdk) {

    async delTaskSdk (task, sdk) {

      let json = {

        taskId: task.id,

        sdkId: sdk.id

@@ -1195,7 +1252,7 @@
      }

    },

    // 删除任务

    async deleteTask(data, index) {

    async deleteTask (data, index) {

      // window.console.log(data, "deleteTask");

      let res = await deleteTask({ taskId: data.id });

      // this.$toast({

@@ -1212,7 +1269,7 @@
      }

    },

    // 更新任务状态

    async updateTaskStatus(data) {

    async updateTaskStatus (data) {

      // window.console.log(data, '更新任务状态')

      let json = {

        taskId: data.id,

@@ -1230,7 +1287,7 @@
      });

    },

    // 更新任务名称

    async updateTaskName(data) {

    async updateTaskName (data) {

      let json = {

        taskId: data.id,

        taskName: data.name

@@ -1250,7 +1307,7 @@
      }

    },

    // 获取底库数据

    async getBaseList() {

    async getBaseList () {

      // let res = await getTagList();

      // if (res && res.success) {

      //   let filter = res.data.filter(i => {

@@ -1279,7 +1336,7 @@
      ];

    },

    // 获取算法参数

    async getSdkArgs(data) {

    async getSdkArgs (data) {

      let res = await getSdkArgs({

        sdkId: data.id,

        scope: "TASKRULE"

@@ -1301,7 +1358,7 @@
      }

    },

    // 查询字典

    async findByType() {

    async findByType () {

      let res = await findByType();

      if (res && res.success) {

        let list = res.data.RULECOMPUTEBETWEEN.map(i => {

@@ -1314,17 +1371,17 @@
      }

    },

    // 算法配置，新建

    add() {

    add () {

      this.TaskMange.argsList.push(

        JSON.parse(JSON.stringify(this.TaskMange.baseObject))

      );

    },

    // 算法配置 删除

    delRule(index) {

    delRule (index) {

      this.TaskMange.argsList.splice(index, 1);

    },

    // 算法参数保存

    async save() {

    async save () {

      let list = this.TaskMange.argsList.map(i => {

        let obj = {};

        obj.id = i.id;

@@ -1357,7 +1414,7 @@
        }

      }

    },

    getDefault() {

    getDefault () {

      this.deleteTaskSdkRule(

        this.TaskMange.currentTaskId,

        this.TaskMange.currentAlgoId

@@ -1368,7 +1425,7 @@
        );

      });

    },

    async deleteTaskSdkRule(taskId, sdkId) {

    async deleteTaskSdkRule (taskId, sdkId) {

      let json = {

        taskId: taskId,

        sdkId: sdkId

@@ -1388,7 +1445,7 @@
      }

    },

    // 给任务添加算法

    async addTaskSdk(data) {

    async addTaskSdk (data) {

      let res = await addTaskSdk(data);

      if (res && res.success) {

        // window.console.log(res, 'res')

@@ -1396,7 +1453,7 @@
      }

    },

    // 新添加任务

    async addTaskAsync(name) {

    async addTaskAsync (name) {

      let res = await addTask({ taskname: name });

      // this.$toast({

      //   type: res.success ? "success" : "error",

@@ -1412,7 +1469,7 @@
        this.findAll();

      }

    },

    cancle(row) {

    cancle (row) {

      if (row.isShowSetAlgo) {

        row.isShowSetAlgo = false;

      }

@@ -1422,12 +1479,12 @@
        this.$set(i, "isSelect", false);

      });

    },

    cancleTask(row) {

    cancleTask (row) {

      if (row.isSetting) {

        row.isSetting = false;

      }

    },

    commandAlgo(command, row, item) {

    commandAlgo (command, row, item) {

      if (command === 1) {

        // console.log('设置算法')

        this.clickSetAlgo(row, item);

@@ -1437,13 +1494,13 @@
        this.clickDelSdk(row, item);

      }

    },

    commandTask(command, row) {

    commandTask (command, row) {

      if (command === 1) {

        //编辑任务

        this.clickSet(row);

      }

    },

    donwload(item) {

    donwload (item) {

      this.downloading = true;

      this.downloadItem = item.id;



@@ -1467,15 +1524,15 @@
          this.downloadItem = "";

        });

    },

    commandAlgLib(item) {

    commandAlgLib (item) {

      this.$set(item, "isEdit", true);

    },

    inputBlur(item) {

    inputBlur (item) {

      // console.log(item, '修改名称')

      this.$set(item, "isEdit", false);

    },



    cleanTemplateForm() {

    cleanTemplateForm () {

      this.appSceneForm.name = "";

      this.appSceneForm.desc = "";

      this.appSceneForm.rules = "";

@@ -1483,10 +1540,10 @@


      this.$refs.ruleEditor.cleanRule();

    },

    handleTabClick() {

    handleTabClick () {



    },

    handleCreateScene() {

    handleCreateScene () {

      this.sceneDialogVisible = true;

      this.dialogTitle = '创建场景模板';



@@ -1499,10 +1556,10 @@
        this.cleanTemplateForm();

      });

    },

    handleDialogClose() {

    handleDialogClose () {

      this.sceneDialogVisible = false;

    },

    handleEditScene(item) {

    handleEditScene (item) {

      this.appSceneForm.name = item.name;

      this.appSceneForm.desc = item.desc;



@@ -1594,7 +1651,7 @@
.src-title {

  //color: #bfbfbf;

  color: #bbcee8;

  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";

  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';

  font-weight: 650;

  font-style: normal;

  height: 36px;

@@ -1619,7 +1676,7 @@
      position: absolute;

      top: 50%;

      left: 50%;

      background: url("/images/algo/green.gif");

      background: url('/images/algo/green.gif');

      overflow: hidden;

      transform: translate(-50%, -50%);

      .inner-bar {

@@ -1707,6 +1764,13 @@
            margin: auto;

            margin-bottom: 30px;

            max-width: 200px;

            .mask {

              width: 100%;



              .el-button + .el-button {

                margin-left: 0 !important;

              }

            }

          }

        }

      }

@@ -1746,6 +1810,9 @@
              z-index: 1;

              border-radius: 3px;

              display: none;

              .el-button + .el-button {

                margin-left: 0 !important;

              }

              .tool {

                position: absolute;

                top: 49%;

@@ -1941,16 +2008,16 @@
        }

      }

      .drawer-content {

        font-family: "PingFangSC-Regular";

        font-family: 'PingFangSC-Regular';

        .el-step__title.is-process {

          border-color: #3d68e1 !important;

          color: #3d68e1 !important;

          font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif;

          font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif;

        }

        .el-step__head.is-process {

          border-color: #3d68e1 !important;

          color: #3d68e1 !important;

          font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif;

          font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif;

        }

        .el-input {

          width: 100%;

@@ -2026,6 +2093,10 @@
      display: none;

      .info-onmask {

        color: #8ecaff;

      }

      .mask-btn {

        width: 100%;

        display: flex;

      }

      i {

        color: #fff;

@@ -2112,6 +2183,8 @@
      .mask {

        display: flex;

        align-items: flex-end;

        flex-wrap: wrap;

        justify-content: center;

        top: 0;

        .bot-btn {

          flex: 1;

@@ -2295,6 +2368,16 @@
          max-height: 106px;

        }

      }

      .willUpGrade {

        .iconupdate {

          color: #01e667;

          position: absolute;

          top: 5px;

          right: 5px;

          font-weight: 550;

          font-size: 26px;

        }

      }

      &.uninstall {

        .svg-wrap {

          background-color: #ddd;