应用中心已激活板块版式更新，添加更新tab页，添加批量更新应用和sdk功能；朔黄标注时间点格式化

hanbaoshan

2021-02-24 7f37e751c1c9f98671bc3fc06216aeb7781dd386

 src/pages/ai/index/App.vue

@@ -74,17 +74,13 @@
                            :element-loading-text="item.progressMsg"

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

                          >

                            <!-- <div class="mask flex-center">

                              <div class="info-onmask">

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

                              </div>

                            </div>-->

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

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

                              <div class="info-onmask">

                              <div class="left-top">

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

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

                              </div>

                              <div class="info-onmask" @click="checkDetail(item)">查看详情</div>

                              <div class="mask-btn">

                                <el-button

                                  @click="unLoadSdk(item)"

@@ -175,11 +171,12 @@
                            element-loading-background="rgba(0,0,0,.8)"

                          >

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

                            <div class="mask" >

                              <div class="info-onmask">

                            <div class="mask">

                              <div class="left-top">

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

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

                              </div>

                              <div class="info-onmask">查看详情</div>

                              <div class="mask-btn">

                                <el-button

                                  v-if="!item.isDefault"

@@ -419,6 +416,134 @@
                  </div>

                </el-drawer>

              </el-tab-pane>

              <el-tab-pane name="update">

                <span slot="label">

                  <el-badge class="update-badge" :value="updateNum">更新</el-badge>

                </span>

                <div class="task-list">

                  <div class="flex-title">

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

                    <el-button @click="batchUpdate('sdk')" size="mini" type="primary">更新全部</el-button>

                  </div>

                  <div class="flex-list">

                    <div v-if="!hasNewVersionSdk.length" class="empty-tip">暂无数据，请稍后重试...</div>

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

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

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

                          <div

                            class="svg-wrap"

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

                            v-loading="item.upgradeLoading"

                            :element-loading-text="item.progressMsg"

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

                          >

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

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

                              <div class="left-top">

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

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

                              </div>

                              <div class="info-onmask">查看详情</div>

                              <div class="mask-btn">

                                <el-button

                                  @click="unLoadSdk(item)"

                                  type="primary"

                                  size="small"

                                  class="bot-btn"

                                >卸载</el-button>

                                <el-button

                                  v-if="item.isUpgrade"

                                  @click="donwload(item)"

                                  type="warning"

                                  size="small"

                                  class="bot-btn"

                                >升级</el-button>

                              </div>

                            </div>

                            <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 />

                          </div>

                          <div class="alg-name">

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

                              <span v-if="!item.isEdit">{{ item.sdk_name}}</span>

                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="flex-title">

                    <p class="src-title">应用软件</p>

                    <el-button @click="batchUpdate('app')" type="primary" size="mini">更新全部</el-button>

                  </div>

                  <div class="flex-list">

                    <div v-if="!hasNewVersionApp.length" class="empty-tip">暂无数据，请稍后重试...</div>

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

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

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

                          <div

                            class="svg-wrap"

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

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

                            :element-loading-text="item.progressMsg"

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

                          >

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

                            <div class="mask">

                              <div class="left-top">

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

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

                              </div>

                              <div class="info-onmask">查看详情</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"

                              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 />

                          </div>

                          <div class="alg-name">

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

                              <span v-if="!item.isEdit">{{ item.name }}</span>

                              <el-input

                                size="small"

                                v-model="item.sdk_name"

                                v-if="item.isEdit"

                                v-focus

                                :maxlength="15"

                                @blur="inputBlur(item)"

                              ></el-input>

                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </el-tab-pane>

            </el-tabs>

          </div>

        </div>

@@ -470,11 +595,62 @@
        <el-button type="primary" @click="offlineInstall">安 装</el-button>

      </div>

    </el-dialog>

    <!-- <div class="draggable-box" v-if="productDetailShow" > -->

    <div class="draggable-box" v-if="false"  >

      <div class="box-top">

        <div class="top-left">

          <div class="banner">

            <!-- <el-carousel

              ref="carousel"

              :autoplay="false"

              indicator-position="none"

              :arrow="curCheckTarget.pics.length > 1 ? 'always' : 'never'"

              @change="changeHandle"

            >

              <el-carousel-item v-for="(item, index) in curCheckTarget.pics" :key="index">

                <div class="imgwrap">

                  <img

                    v-if="item.type=='image'"

                    :src="'/httpImage/'+item.url"

                    class="cursor-pointer"

                    preview

                  />

                  <video v-if="item.type=='video'" :src="'/httpImage/'+item.url" controls></video>

                </div>

              </el-carousel-item>

            </el-carousel> -->

          </div>

        </div>

        <div class="top-right">

          <div class="summary">

            <div class="icon"></div>

            <div class="name"></div>

            <!-- <div class="tags">

              <span

                class="tag"

                v-for="(id, index) in data.productLabelId"

                :key="index+'i'"

              >{{showNameById(id)}}</span>

            </div> -->

            <div class="btns">

              <el-button size="mini">升级</el-button>

              <el-button size="mini">卸载</el-button>

              <el-button size="mini">打开</el-button>

            </div>

          </div>

          <div class="product-intruduction">

            <div class="title">产品简介</div>



          </div>

        </div>

      </div>

      <div class="box-bot"></div>

    </div>

  </div>

</template>

<script>



import { findAllSdk, downloadSdk, installSdk, getInstallInfo, removeSdk} from "./api";

import { findAllSdk, downloadSdk, installSdk, getInstallInfo, removeSdk } from "./api";

import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";



import FileUploader from "@/components/subComponents/FileUpload/index";

@@ -485,6 +661,9 @@
    FileUploader

  },

  computed: {

    updateNum(){

      return this.hasNewVersionApp.length+this.hasNewVersionSdk.length

    },

    // notInstalledList () {

    //   return this.sdkList.filter(sdk => {

    //     return sdk.installed === false;

@@ -505,7 +684,7 @@
    //   });

    //   return arr;

    // },

    isAdmin() {

    isAdmin () {

      if (

        sessionStorage.getItem("userInfo") &&

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

@@ -517,11 +696,13 @@
      return false;

    },

  },

  data() {

  data () {

    return {

      sdkList: [],

      installedList: [],

      ungradeList: [],

      hasNewVersionSdk: [],

      updateNum: 0,

      hasNewVersionApp: [],

      notInstalledList: [],

      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],

      activeName: "myAlgorithm",

@@ -560,6 +741,8 @@
      appUpgreading: true,

      sdkUpgreading: true,

      autoRefresh: true,

      curCheckTarget: {},

      productDetailShow: false,

    }

  },

  directives: {

@@ -569,22 +752,37 @@
      }

    }

  },

  mounted() {

  mounted () {

    // 获取所有应用

    this.autoRefreshAppAndSdkState();



    this.getUnActivedList();

    this.getUnActivedAppList();

  },

  beforeDestroy() {

  beforeDestroy () {

    this.autoRefresh = false;

  },

  methods: {

    isShow(authority) {

    isShow (authority) {

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

    },

    batchUpdate(type){

      if(type=="sdk"){

        this.hasNewVersionSdk.forEach(sdk=>{

          this.donwload(sdk)

        })

      }else{

        this.hasNewVersionApp.forEach(app=>{

          this.downloadApp(app,'upgrade')

        })

      }

    },

    checkDetail (item) {

      this.curCheckTarget = item;

      this.productDetailShow = true;

    },

    //离线安装

    offlineInstall() {

    offlineInstall () {

      this.installDialogVisible = false;

      this.isInstall = true;

      //安装

@@ -613,7 +811,7 @@
        });

      })

    },

    downloadApp(app, action) {

    downloadApp (app, action) {

      if (action == 'upgrade') {

        app.upgradeLoading = true;

      } else {

@@ -655,10 +853,10 @@
      // 开启自动刷新

      this.appUpgreading = true;

    },

    async getAllApps() {

    async getAllApps () {

      let iArry = []

      let sArry = []



      let nArry = []

      let rsp = await getApps();

      if (rsp && rsp.success) {

        // 遍历app的过程重置

@@ -671,19 +869,19 @@


            this.appUpgreading = true;

          }



          item.installed ? iArry.push(obj) : sArry.push(obj)

          item.installed ? iArry.push(obj) : sArry.push(obj);

          item.isUpgrade && nArry.push(obj)

        });

      }



      this.installedApps = iArry;

      this.storeApps = sArry;

      this.hasNewVersionApp = nArry;

    },

    //卸载算法

    unLoadSdk(sdk){

    unLoadSdk (sdk) {

      let _this = this;

      this.$confirm('确定要卸载该算法吗?','提示').then(()=>{

        sdk.unloadLoading = true;   
      this.$confirm('确定要卸载该算法吗?', '提示').then(() => {

        sdk.unloadLoading = true;

        removeSdk({ sdkId: sdk.id }).then(res => {

          if (res && res.success) {

            sdk.unloadLoading = false;

@@ -696,15 +894,15 @@
          console.log(e);

          sdk.unloadLoading = false;

        })

      }).catch( e => {

      }).catch(e => {

        console.log(e)

      })

    },

    //卸载应用

    unLoad(app) {

    unLoad (app) {

      let _this = this;

      this.$confirm('确定要卸载该应用吗?','提示').then(()=>{

        app.unloadLoading = true;   
      this.$confirm('确定要卸载该应用吗?', '提示').then(() => {

        app.unloadLoading = true;

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

          if (res && res.success) {

            app.unloadLoading = false;

@@ -717,7 +915,7 @@
          console.log(e);

          app.unloadLoading = false;

        })

      }).catch( e => {

      }).catch(e => {

        console.log(e)

      })

    },

@@ -728,7 +926,7 @@
    //   this.activeCode = '';

    //   this.activedSdkOrApp = this.newActInfo()

    // },

    actSdkOrApp(id, type = 'sdk') {

    actSdkOrApp (id, type = 'sdk') {

      this.actType = type;

      this.actId = id;

      this.actDrawerShow = true;

@@ -736,7 +934,7 @@
      this.activeCode = '';

      this.activedSdkOrApp = this.newActInfo()

    },

    newActInfo() {

    newActInfo () {

      return {

        activateCode: '',

        productName: '',

@@ -746,7 +944,7 @@
        devIds: ''

      }

    },

    getUnActivedList() {

    getUnActivedList () {

      getUnActivedSdk().then(res => {

        if (res.code == 200) {

          this.unActivedSDKList = res.data;

@@ -754,14 +952,14 @@
      })



    },

    getUnActivedAppList() {

    getUnActivedAppList () {

      getUnActivedApp().then(res => {

        if (res.code == 200) {

          this.unActivedAppList = res.data;

        }

      });

    },

    actived() {

    actived () {

      let _this = this;

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

        //激活算法

@@ -799,12 +997,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;

@@ -841,13 +1039,14 @@


    },



    onFileAdded(f) {

    onFileAdded (f) {

      this.patchUpdateStatus = "";

    },



    async getAllSdk() {

    async getAllSdk () {

      let installedList = [];

      let unInstalledList = [];

      let hasNewVersionList = [];

      let res = await findAllSdk();

      if (res && res.success) {

        this.sdkUpgreading = false;

@@ -867,9 +1066,10 @@
      }

      this.installedList = installedList;

      this.notInstalledList = unInstalledList;

      this.hasNewVersionSdk = hasNewVersionList;

    },



    donwload(item) {

    donwload (item) {

      item.upgradeLoading = true;

      //this.downloading = true;

      this.downloadItem = item.id;

@@ -896,14 +1096,14 @@
      // 开启自动刷新

      this.sdkUpgreading = true;

    },

    inputBlur(item) {

    inputBlur (item) {

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

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

    },

    handleTabClick() {

    handleTabClick () {



    },

    autoRefreshAppAndSdkState() {

    autoRefreshAppAndSdkState () {

      // 关闭后退出

      if (!this.autoRefresh) {

        return;

@@ -959,7 +1159,22 @@
    height: 100%;

  }

}



.flex-title{

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.draggable-box{

  width: 1000px;

  height: 600px;

  background: aqua;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}

.el-loading-mask .el-loading-spinner {

  top: 40px !important;

}

@@ -990,12 +1205,20 @@
.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;

  font-size: 15px;

  padding-left: 25px;

}

.update-badge .el-badge__content.is-fixed {

  top: 10px;

  right: 4px;

}

.empty-tip {

  padding-left: 25px;

  color: #ccc;

}

.task-manage {

  height: 100%;

@@ -1015,7 +1238,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 {

@@ -1086,6 +1309,7 @@
          display: flex;

          flex-direction: row;

          flex-wrap: wrap;

          min-height: 200px;

          .wrap-box {

            width: 16.66%;

          }

@@ -1177,16 +1401,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%;

@@ -1245,7 +1469,14 @@
      border-radius: 3px;

      display: none;

      .info-onmask {

        color: #8ecaff;

        color: #fff;

      }

      .left-top {

        position: absolute;

        left: 5px;

        top: 5px;

        font-size: 12px;

        color: #90d6ff;

      }

      .mask-btn {

        width: 100%;