zhangzengfei
2021-04-07 5058e8d5fc8220a4fa31d160935c1aafd6074fb3
src/pages/ai/index/App.vue
@@ -1,6 +1,6 @@
<template>
  <div class="s-task-manage">
    <div style="height:100%;">
    <div style="height: 100%">
      <div class="flex-box task-manage">
        <div class="installModel" v-if="isInstall">
          <div class="progress-bar">
@@ -17,102 +17,84 @@
              v-model="activeName"
              type="border-card"
              @tab-click="handleTabClick"
              style="height: calc(100% - 20px);"
              style="height: calc(100% - 20px)"
            >
              <el-tab-pane label="已安装" name="myAlgorithm">
                <div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'">
              <el-tab-pane label="已激活" name="myAlgorithm">
                <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="'upgrade'+item.id">
                    <div
                      class="wrap-box"
                      v-for="item in installedList"
                      :key="item.id"
                    >
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div
                            class="svg-wrap"
                            :class="{willUpGrade:item.isUpgrade}"
                            :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">
                              <div class="info-onmask">
                                <div>当前版本:{{item.version}}</div>
                                <div>最新版本:{{item.remoteVersion}}</div>
                            <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"
                                @click="checkDetail(item, 'active')"
                              >
                                查看详情
                              </div>
                              <div class="mask-btn">
                                <el-button
                                  type="warning"
                                  class="bot-btn"
                                  size="small"
                                  @click="donwload(item)"
                                >升级</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>{{ item.sdk_name }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div> -->
                    <div class="wrap-box" v-for="(item) in installedList" :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)"
                          >
                            <!-- <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>当前版本:{{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)"
                                  @click="unLoadSdk(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >卸载</el-button> -->
                                  >卸载</el-button
                                >
                                <el-button
                                  v-if="item.isUpgrade"
                                  @click="donwload(item)"
                                  @click="donwload(item,0)"
                                  type="warning"
                                  size="small"
                                  class="bot-btn"
                                >升级</el-button>
                                  >升级</el-button
                                >
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                              :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 style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{
                                item.sdk_name
                              }}</span>
                              <el-input
                                size="small"
@@ -127,31 +109,68 @@
                        </div>
                      </div>
                    </div>
                    <!-- </draggable> -->
                    <div class="wrap-box" v-for="(item) in notInstalledList" :key="item.id">
                    <div
                      class="wrap-box"
                      v-for="item in notInstalledList"
                      :key="item.id"
                    >
                      <div
                        class="list-choose-item-left list-choose-item-left-uninstal"
                        v-loading="downloading && downloadItem == item.id"
                      >
                        <div class="mask">
                          <el-button type="primary" class="bot-btn" @click="donwload(item)">安装</el-button>
                           <div class="left-top">
                                <div v-if="item.installed">当前版本:{{ item.version }}</div>
                                <div v-if="item.remoteVersion">
                                  最新版本:{{ item.remoteVersion }}
                                </div>
                              </div>
                              <div
                                class="info-onmask"
                                @click="checkDetail(item, 'activeNotInstall')"
                              >
                                查看详情
                              </div>
                              <div class="mask-btn">
                                <el-button
                                 @click="donwload(item,1)"
                                  type="primary"
                                  class="bot-btn"
                                  >安装</el-button
                                >
                              </div>
                        </div>
                        <div class="click-download" title="下载">
                          <span class="iconfont iconxiazai1"></span>
                        </div>
                        <div class="list-complete-item-handle">
                          <div class="svg-wrap">
                          <div
                            class="svg-wrap"
                            v-loading="
                              item.installLoading || item.upgradeLoading
                            "
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                              :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 class="list-choose-item-left-uninstal">{{ item.sdk_name }}</span>
                            <div style="padding: 0px 10px 0px 10px">
                              <span class="list-choose-item-left-uninstal">{{
                                item.sdk_name
                              }}</span>
                            </div>
                          </div>
                        </div>
@@ -160,49 +179,73 @@
                  </div>
                  <p class="src-title">应用软件</p>
                  <div class="flex-list">
                    <div class="wrap-box" v-for="(item) in installedApps" :key="item.id">
                    <div
                      class="wrap-box"
                      v-for="item in installedApps"
                      :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"
                            :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" v-if="!item.isDefault || item.isUpgrade">
                              <div class="info-onmask">
                                <div>当前版本:{{item.version}}</div>
                                <div v-if="item.remoteVersion">最新版本:{{item.remoteVersion}}</div>
                            <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>
                                  <!-- v-if="!item.isDefault" -->
                              <div
                                class="info-onmask"
                                @click="checkDetail(item,'active')"
                              >
                                查看详情
                              </div>
                              <div class="mask-btn">
                                <el-button
                                  v-if="!item.isDefault"
                                  v-show="!item.isDefault"
                                  @click="unLoad(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >卸载</el-button>
                                  >卸载</el-button
                                >
                                <el-button
                                  v-if="item.isUpgrade"
                                  @click="downloadApp(item,'upgrade')"
                                  @click="downloadApp(item, 'upgrade')"
                                  type="warning"
                                  size="small"
                                  class="bot-btn"
                                >升级</el-button>
                                  >升级</el-button
                                >
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                              :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;">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
@@ -217,32 +260,45 @@
                        </div>
                      </div>
                    </div>
                    <div class="wrap-box" v-for="item in storeApps" :key="item.id">
                    <div
                      class="wrap-box"
                      v-for="item in storeApps"
                      :key="item.id"
                    >
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle uninstall">
                          <div
                            class="svg-wrap"
                            v-loading="item.installLoading||item.upgradeLoading"
                            v-loading="
                              item.installLoading || item.upgradeLoading
                            "
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <div class="mask">
                              <el-button
                                size="small"
                                type="primary"
                                class="bot-btn"
                                @click="downloadApp(item)"
                              >安装</el-button>
                                >安装</el-button
                              >
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                              :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;">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
@@ -280,31 +336,78 @@
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="应用中心" name="algorithmMall" v-if=" isShow('algorithmManage:buy')">
              <el-tab-pane
                label="应用中心"
                name="algorithmMall"
                v-if="isShow('algorithmManage:buy')"
              >
                <div class="tab-content">
                  <p class="src-title">算法软件</p>
                  <div class="store-list flex-list">
                    <div class="wrap-box" v-for="item in unActivedSDKList" :key="item.id">
                    <div
                      class="wrap-box"
                      v-for="item in unActivedSDKList"
                      :key="item.id"
                    >
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div class="alg-icon svg-wrap">
                            <div class="mask" @click="actSdkOrApp(item.id)">
                            <!-- <div class="mask" @click="actSdkOrApp(item.id)">
                              <span
                                class="iconfont iconyunxiazai"
                                style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%"
                                style="
                                  color: #ff6a00;
                                  font-size: 20px;
                                  position: absolute;
                                  top: 45%;
                                  left: 45%;
                                "
                              ></span>
                            </div> -->
                            <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"
                                @click="actSdkOrApp(item)"
                              >
                                查看详情
                              </div>
                              <div class="mask-btn">
                                <el-button
                                  @click="actSdkOrApp(item)"
                                  type="primary"
                                  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}`"
                              :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 style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{
                                item.sdk_name
                              }}</span>
                              <el-input
                                size="small"
                                v-model="item.sdk_name"
@@ -321,26 +424,73 @@
                  </div>
                  <p class="src-title">应用软件</p>
                  <div class="app-list flex-list">
                    <div class="wrap-box" v-for="item in unActivedAppList" :key="item.id">
                     <div v-if="!unActivedAppList.length" class="empty-tip">
                      暂无数据
                    </div>
                    <div
                      class="wrap-box"
                      v-for="item in unActivedAppList"
                      :key="item.id"
                    >
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div class="alg-icon svg-wrap">
                            <div class="mask" @click="actSdkOrApp(item.id,'app')">
                            <!-- <div
                              class="mask"
                              @click="actSdkOrApp(item, 'app')"
                            >
                              <span
                                class="iconfont iconyunxiazai"
                                style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%"
                                style="
                                  color: #ff6a00;
                                  font-size: 20px;
                                  position: absolute;
                                  top: 45%;
                                  left: 45%;
                                "
                              ></span>
                            </div> -->
                             <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"
                                @click="actSdkOrApp(item,'app')"
                              >
                                查看详情
                              </div>
                              <div class="mask-btn">
                                <el-button
                                  @click="actSdkOrApp(item,'app')"
                                  type="primary"
                                  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}`"
                              :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;">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
@@ -357,62 +507,199 @@
                    </div>
                  </div>
                </div>
                <el-drawer title="下载" :visible.sync="actDrawerShow" :direction="direction">
                  <div class="drawer-content">
                    <div class="current-step">
                      <el-steps align-center :active="actStep" finish-status="success">
                        <el-step title="添加激活码"></el-step>
                        <el-step title="激活成功"></el-step>
                      </el-steps>
                <!--  -->
              </el-tab-pane>
              <el-tab-pane name="update">
                <span slot="label">
                  <el-badge class="update-badge" :value="updateNum" :hidden="updateNum==0"
                    >更新</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==0" class="empty-tip">
                      {{errMsg?errMsg:"暂无数据"}}
                    </div>
                    <div v-if="actStep==0">
                      <div class="act-code">
                        <p>使用激活码将新的算法添加到您的账户</p>
                        <el-input
                          v-model="activeCode"
                          placeholder="00000-00000-00000-00000-00000"
                          @blur="getCodeDetail"
                        ></el-input>
                      </div>
                      <div class="text-right">
                        <el-button type="primary" @click="actived">激活</el-button>
                      </div>
                    </div>
                    <div v-else-if="actStep==1">
                      <ul class="desc">
                        <li>
                          <label>激活码:</label>
                          <span>{{activedSdkOrApp.activateCode}}</span>
                        </li>
                        <li>
                          <label>产品名称:</label>
                          <span>{{activedSdkOrApp.productName}}</span>
                        </li>
                        <li>
                          <label>配置详情:</label>
                          <span>{{activedSdkOrApp.setting}}</span>
                        </li>
                        <li>
                          <label>服务到期日:</label>
                          <span>{{activedSdkOrApp.expireTime}}</span>
                        </li>
                        <li>
                          <label>许可证:</label>
                          <span>{{activedSdkOrApp.licence}}</span>
                        </li>
                        <!-- <li>
                          <label>设备ID:</label>
                          <span>3342-235f-ret55-fdsg</span>
                        </li>-->
                      </ul>
                      <div class="text-right">
                        <el-button type="primary" @click="checkMyAlgorith">确定</el-button>
                        <p class="tip">提示:请在“我的算法”中查看并安装算法</p>
                    <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"
                                @click="checkDetail(item,'active')"
                              >
                                查看详情
                              </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,0)"
                                  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>
                </el-drawer>
                  <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"
                                @click="checkDetail(item,'active')"
                              >
                                查看详情
                              </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>
@@ -430,15 +717,15 @@
          <div>
            <div>
              <span>安装包名称:</span>
              <span>{{installAppPackage.productName}}</span>
              <span>{{ installAppPackage.productName }}</span>
            </div>
            <div>
              <span>安装版本:</span>
              <span>{{installAppPackage.version}}</span>
              <span>{{ installAppPackage.version }}</span>
            </div>
            <div>
              <span>更新内容:</span>
              <span>{{installAppPackage.installContent}}</span>
              <span>{{ installAppPackage.installContent }}</span>
            </div>
          </div>
        </template>
@@ -446,15 +733,15 @@
          <div>
            <div>
              <span>安装包名称:</span>
              <span>{{installSdkPackage.productName}}</span>
              <span>{{ installSdkPackage.productName }}</span>
            </div>
            <div>
              <span>安装版本:</span>
              <span>{{installSdkPackage.version}}</span>
              <span>{{ installSdkPackage.version }}</span>
            </div>
            <div>
              <span>更新内容:</span>
              <span>{{installSdkPackage.installContent}}</span>
              <span>{{ installSdkPackage.installContent }}</span>
            </div>
          </div>
        </template>
@@ -465,21 +752,281 @@
        <el-button type="primary" @click="offlineInstall">安 装</el-button>
      </div>
    </el-dialog>
    <!-- <div class="dialog-content" v-if="productDetailVisible" > -->
    <el-dialog
      class="product-detail-dialog"
      :visible="productDetailVisible"
      @close="closeDial"
    >
    <!-- <el-button-group> -->
      <div class="button-group" v-show="!backDisable||!forwardDisable">
  <el-button    size="small" @click="backwards" :disabled="backDisable"> <span>&#60;</span> </el-button>
  <!-- <el-button type="primary" size="small" icon="el-icon-arrow-left"></el-button> -->
  <el-button    size="small" @click="forwards" :disabled="forwardDisable">></el-button>
  <!-- <el-button type="primary" size="small"><i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
      </div>
<!-- </el-button-group> -->
      <div class="dialog-title" slot="title">{{isSDKDialog?"算法详情":"应用详情"}}</div>
      <div class="dialog-content">
        <div class="box-top">
          <div class="top-left">
            <div class="banner">
              <el-carousel
                ref="carousel"
                :autoplay="false"
                indicator-position="none"
                :arrow="
                  productDetail.pics !== undefined
                    ? productDetail.pics.length > 1
                      ? 'always'
                      : 'never'
                    : 'never'
                "
                @change="changeHandle"
              >
                <!-- :arrow="productDetail.pics.length > 1 ? 'always' : 'never'" -->
                <el-carousel-item
                  v-for="(item, index) in productDetail.pics"
                  :key="index"
                >
                  <div class="imgwrap">
                    <img
                      v-if="item.type != 'video'"
                      :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="title">{{curCheckTarget.sdk_name}}</div> -->
            <div class="summary">
              <div class="icon">
                <img
                  v-if="productDetail.iconBlob"
                  class="baseImg"
                  :src="
                    productDetail.iconBlob.indexOf(',') > 0
                      ? productDetail.iconBlob
                      : `data:image/png;base64,${productDetail.iconBlob}`
                  "
                  alt
                />
              </div>
              <div class="right-desc">
                <div class="name"><el-tooltip class="" effect="dark" :content="productDetail.productName  " placement="right-start">
                  <span>{{ productDetail.productName  }}</span>
                </el-tooltip></div>
                <div class="tags">
                  <el-tag type="info" size="small" color="#fff" v-if="!isSDKDialog">应用</el-tag>
                  <el-tag type="info" size="small" color="#fff" v-if="isSDKDialog">算法</el-tag>
                </div>
                <div class="btns">
                  <el-button size="small" type="warning"  v-if="needToUpgradeInWin||productDetail.isUpgrade" @click="upgradeSDKinWin" >{{
                    isUpgrading ? "升级中.." : "升级"
                  }}</el-button>
                  <el-button size="small" type="primary" v-if="isActive&&!isDefaultApp" @click="unloadSDKinWin">卸载</el-button>
                  <el-button size="small" type="primary" v-if="!isActive&&!showInstallNotActive" @click="showInputCode=!showInputCode">激活</el-button>
                  <el-button size="small" type="primary" v-if="!isActive&&showInstallNotActive" @click="downloadSdkInSide">{{isUpgrading?"安装中..":"安装"}}</el-button>
                  <el-button size="small" type="success" v-if="!isSDKDialog&&isActive" @click="openApp">打开</el-button>
                </div>
              </div>
            </div>
            <div class="jihuo-input" v-if="showInputCode">
                        <el-input size="small"
                          v-model="activeCode"
                          placeholder="00000-00000-00000-00000-00000"
                          @blur="getCodeDetail"
                        ></el-input>
                         <el-button type="primary" size="small" @click="actived"
                          >激活</el-button
                        >
                           <el-button type="primary" size="small" @click="cancelActivate"
                          >取消</el-button
                        >
                      </div>
            <div class="product-intruduction">
              <div class="part-title" v-if="!showInputCode">简介</div>
              <div class="text">
                <div class="single-desc">
                  <div>版本:</div>
                  <div>
                    {{
                      productDetail.productVersion === ""
                        ? "暂无"
                        : productDetail.productVersion
                    }}
                  </div>
                </div>
                <div class="single-desc">
                  <div>概述:</div>
                  <div>
                    {{
                      productDetail.description === ""
                        ? "暂无"
                        : productDetail.description
                    }}
                  </div>
                </div>
                <div class="single-desc">
                  <div>详述:</div>
                  <div>
                    {{
                      productDetail.summary === ""
                        ? "暂无"
                        : productDetail.summary
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-bottom">
          <div class="bot-left">
            <div class="part-title">{{isSDKDialog?"应用场景":"功能特点"}}</div>
            <div class="list-zone">
              <div
                class="list-item"
                v-for="(item, index) in productDetail.funcInfo"
                :key="index"
              >
                <el-tag type="" size="small" effect="dark">
                  {{ item.title === "" ? "暂无数据" : item.title }}
                </el-tag>
                <div class="desc">
                  {{
                    item.desc === ""
                      ? "暂无数据"
                      : item.desc
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="bot-right">
            <div class="part-title">推荐算法</div>
            <div class="item-zone">
              <div
                class="item"
                v-for="(item, index) in otherProducts"
                :key="index"
              >
                <el-tag type="info" color="inherit" size="small">{{
                  item.productTypeName === ""
                    ? "暂无数据"
                    : item.productTypeName
                }}</el-tag>
                <div class="icon">
                  <img
                    v-if="item.iconBlob"
                    class="baseImg"
                    :src="
                      item.iconBlob.indexOf(',') > 0
                        ? item.iconBlob
                        : `data:image/png;base64,${item.iconBlob}`
                    "
                    alt
                  />
                <div class="icon-name">
                  <el-tooltip class="" effect="dark" :content="item.name === '' ? '暂无数据':item.name" placement="top-start">
                  <span>{{ item.name === "" ? "暂无数据" : item.name }}</span>
                </el-tooltip>
                  </div>
                </div>
                <div class="look-button">
                  <el-button type="primary" size="mini" @click="checkInWindow(item)">查看</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
    :visible.sync="showActivateSuccess"
    title="激活成功!"
  width="30%"
  class="active-Dial"
  :before-close="handleClose"
    >
      <div class="dialog-active">
        <ul class="desc">
          <li>
            <label>激活码:</label>
            <span>{{ activedSdkOrApp.activateCode }}</span>
          </li>
          <li>
            <label>产品名称:</label>
            <span>{{ activedSdkOrApp.productName }}</span>
          </li>
          <li>
            <label>配置详情:</label>
            <span>{{ activedSdkOrApp.setting }}</span>
          </li>
          <li>
            <label>服务到期日:</label>
            <span>{{ activedSdkOrApp.expireTime }}</span>
          </li>
          <li>
            <label>许可证:</label>
            <span>{{ activedSdkOrApp.licence }}</span>
          </li>
        </ul>
        <div class="text-right">
          <el-button type="primary" @click="checkMyAlgorith"
            >确定</el-button
          >
          <p class="tip">提示:请在“已激活”中查看并安装算法</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  findAllSdk,
  downloadSdk,
  installSdk,
  getInstallInfo,
  removeSdk,
} from "./api";
import {
  getApps,
  installApp,
  getAppDetail,
  removeApp,
  getUnActivedSdk,
  actPageAlg,
  getUnActivedApp,
  actApp,
} from "@/api/app";
import { findAllSdk, downloadSdk, installSdk, getInstallInfo } from "./api";
import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";
import bus from '@/plugin/bus'
import FileUploader from "@/components/subComponents/FileUpload/index";
export default {
  name: "algorithmManage",
  props: {},
  components: {
    FileUploader
    FileUploader,
  },
  computed: {
    updateNum() {
      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;
    },
    // notInstalledList () {
    //   return this.sdkList.filter(sdk => {
    //     return sdk.installed === false;
@@ -500,7 +1047,7 @@
    //   });
    //   return arr;
    // },
    isAdmin () {
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
@@ -512,11 +1059,12 @@
      return false;
    },
  },
  data () {
  data() {
    return {
      sdkList: [],
      installedList: [],
      ungradeList: [],
      hasNewVersionSdk: [],
      hasNewVersionApp: [],
      notInstalledList: [],
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      activeName: "myAlgorithm",
@@ -524,27 +1072,30 @@
      downloadItem: "",
      downloading: false,
      direction: "rtl",
      actDrawerShow: false,
      actStep: 0,
      showActivateSuccess:false,
      activeCode: "",
      isInstall: false,
      installDialogVisible: false,
      installPackage: {},
      installAppPackage: null,
      installSdkPackage: null,
      isActive:true,
      isDefaultApp:false,
      installPercentage: 0,
      unActivedSDKList: [],
      unActivedAppList: [],
      isSDKDialog:true,
      //actSdkId: '',
      actType: '',
      actId: '',
      actType: "",
      actId: "",
      activedSdkOrApp: {
        activateCode: '',
        productName: '',
        setting: '',
        expireTime: '',
        licence: '',
        devIds: ''
        activateCode: "",
        productName: "",
        setting: "",
        expireTime: "",
        licence: "",
        devIds: "",
      },
      // unloadLoading: false,
      // installLoading: false,
@@ -552,363 +1103,668 @@
      storeApps: [],
      installFile: {},
      freshTimer: null,
      appUpgreading: false,
      sdkUpgreading: false
    }
      appUpgreading: true,
      sdkUpgreading: true,
      autoRefresh: true,
      curCheckTarget: {},
      productDetailVisible: false,
      isUpgrading: false,
      productDetail: {},
      otherProducts: [],
      backStack: [],
      forwardStack: [],
      backDisable:true,
      forwardDisable:true,
      showInputCode:false,
      needToUpgradeInWin:false,
      errMsg:"",
      showInstallNotActive:false
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      }
    }
      },
    },
  },
  mounted () {
  mounted() {
    // 获取所有应用
    this.getAllSdk();
    this.getAllApps();
    this.autoRefreshAppAndSdkState();
    this.getUnActivedList();
    this.getUnActivedAppList();
  },
  beforeDestroy() {
    this.autoRefresh = false;
  },
  methods: {
    isShow (authority) {
      return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
    isShow(authority) {
      return (
        this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
      );
    },
    batchUpdate(type) {
      if (type == "sdk") {
        this.hasNewVersionSdk.forEach((sdk) => {
          this.donwload(sdk,0);
        });
      } else {
        this.hasNewVersionApp.forEach((app) => {
          this.downloadApp(app, "upgrade");
        });
      }
    },
    closeDial(){
      this.productDetailVisible = false
      this.productDetail = {}
      this.otherProducts = []
    },
    checkDetail(item,type) {
      if (type =='inactive') {
        this.isActive =false
         this.showInstallNotActive = false
        this.showInputCode = false
      }else if (type =='active'){
        this.showInputCode = false
         this.showInstallNotActive = false
         this.isActive =true
      }else if (type =='activeNotInstall'){
        this.showInputCode = false
         this.isActive =false
         this.showInstallNotActive = true
      }
      this.checkIsDefOrNot(item.id)
        this.needToUpgradeInWin = item.isUpgrade?true:false
      this.resetStack()
      if (item.sdk_type===undefined) {
       this.isSDKDialog=false
      }else{
       this.isSDKDialog=true
      }
      this.productDetailVisible = true;
      let _this = this;
      getAppDetail({ id: item.id }).then((res) => {
        _this.productDetail = res.data.detail;
        _this.productDetail.isUpgrade = item.isUpgrade
        _this.productDetail.iconBlob = item.iconBlob
        _this.otherProducts = res.data.randoms;
      });
    },
    resetStack(){
      this.forwardStack = []
       this.backStack = []
       this.backDisable = true
       this.forwardDisable = true
    },
    checkInWindow(item){
      this.backStack.push([this.productDetail, this.otherProducts])
      this.backDisable = false
      this.checkIsDefOrNot(item.id)
      let _this = this;
      getAppDetail({ id: item.id }).then((res) => {
        _this.productDetail = res.data.detail;
        _this.productDetail.iconBlob = item.iconBlob
        this.actId = _this.productDetail.productBaseId
        let flag=false
       const allNeedToNew = [...this.hasNewVersionSdk,...this.hasNewVersionApp]
        for (let i = 0; i < allNeedToNew.length; i++) {
          const item = allNeedToNew[i];
          if (item.id == _this.productDetail.productBaseId) {
            flag=true
          }
        }
        this.needToUpgradeInWin = flag
          _this.productDetail.isUpgrade = flag
        _this.otherProducts = res.data.randoms;
      });
    },
    checkIsDefOrNot(id){
      if (id.length>10) {
        this.isDefaultApp=false
      }else {
        this.isDefaultApp=true
      }
    },
    backwards(){
      if (this.backStack.length ==0) {
        this.backDisable = true
      return
      }
   this.forwardStack.push([this.productDetail,this.otherProducts])
   let item = this.backStack.pop()
   this.productDetail =  item[0]
   this.checkIsDefOrNot(this.productDetail.productBaseId)
   this.otherProducts = item[1]
  this.forwardDisable=false
 if (this.backStack.length ==0) {
        this.backDisable = true
      }
    },
    forwards(){
      if(this.forwardStack.length==0){
        this.forwardDisable=true
        return
      }
        this.backStack.push([this.productDetail,this.otherProducts])
        this.backDisable=false
        let item = this.forwardStack.pop()
        this.productDetail = item[0]
        this.otherProducts = item[1]
      if (this.forwardStack.length==0) {
        this.forwardDisable=true
      }
    },
    //离线安装
    offlineInstall () {
    offlineInstall() {
      this.installDialogVisible = false;
      this.isInstall = true;
      //安装
      installSdk(this.installFile).then(res => {
        if (res.success) {
      installSdk(this.installFile)
        .then((res) => {
          if (res.success) {
            this.isInstall = false;
            this.$message({
              type: "success",
              message: '安装成功,将跳转至"已激活"中查看',
            });
            setTimeout(() => {
              this.getAllSdk();
              window.parent.postMessage(
                {
                  msg: "AppUpdate",
                },
                "*"
              );
              this.activeName = "myAlgorithm";
            }, 3000);
          }
        })
        .catch((e) => {
          this.isInstall = false;
          this.$message({
            type: 'success',
            message: '安装成功,将跳转至我的算法中查看'
            type: "error",
            message: e.data,
          });
          setTimeout(() => {
            this.getAllSdk();
            this.getAllApps();
            window.parent.postMessage({
              msg: "AppUpdate"
            }, '*')
            this.activeName = 'myAlgorithm';
          }, 3000);
        }
      }).catch(e => {
        console.log(e)
        this.isInstall = false;
        this.$message({
          type: 'error',
          message: e.data
        });
      })
    },
    downloadApp (app, action) {
      if (action == 'upgrade') {
    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(() => {
            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;
        }
      })
      installApp({ path: app.id })
        .then((res) => {
          if (res && res.success) {
            _this.$notify({
               title: "成功",
               message: "安装应用成功",
               type: "success",
             });
            setTimeout(() => {
              if (action == "upgrade") {
                app.upgradeLoading = false;
              } else {
                app.installLoading = false;
              }
              // _this.getAllApps();
              window.parent.postMessage(
                {
                  msg: "AppUpdate",
                },
                "*"
              );
            }, 3000);
          }else {
          }
        })
        .catch((e) => {
            _this.$notify({
              title: "安装失败",
              message: e.data,
              type: "warning",
            });
          if (action == "upgrade") {
            app.upgradeLoading = false;
          } else {
            app.installLoading = false;
          }
        });
      // 开启自动刷新
      this.appUpgreading = true;
      this.startAutoFresh();
    },
    async getAllApps () {
      let iArry = []
      let sArry = []
    async getAllApps() {
      let iArry = [];
      let sArry = [];
      let nArry = [];
      let rsp = await getApps();
      if (rsp && rsp.success) {
        // 遍历app的过程重置
        this.appUpgreading = false;
        rsp.data.forEach(item => {
          let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
        rsp.data.forEach((item) => {
          let obj = Object.assign(
            { unloadLoading: false, upgradeLoading: false },
            item
          );
          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
            obj.upgradeLoading = true;
            this.appUpgreading = true;
            this.startAutoFresh();
          }
          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;
    },
    //卸载应用
    unLoad (app) {
      app.unloadLoading = true;
    //卸载
    unLoad(app) {
      let _this = this;
      removeApp({ appId: app.id }).then(res => {
      this.$confirm("确定要卸载该应用吗?", "提示")
        .then(() => {
      _this.productDetailVisible = false
        if (res && res.success) {
          //setTimeout(() => {
          app.unloadLoading = false;
          _this.getAllApps();
          window.parent.postMessage({
            msg: "AppUpdate"
          }, '*')
          //}, 3000);
        }
      }).catch(e => {
        console.log(e);
        app.unloadLoading = false;
      })
          app.unloadLoading = true;
          removeApp({ appId: app.id })
            .then((res) => {
              if (res && res.success) {
                app.unloadLoading = false;
                _this.getAllApps();
                window.parent.postMessage(
                  {
                    msg: "AppUpdate",
                  },
                  "*"
                );
                _this.$notify({
                  title: "成功",
                  message: "卸载应用成功",
                  type: "success",
                });
              }
            })
            .catch((e) => {
              console.log(e);
              app.unloadLoading = false;
            });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // actSdk (id) {
    //   this.actSdkId = id;
    //   this.actDrawerShow = true;
    //   this.actStep = 0;
    //   this.activeCode = '';
    //   this.activedSdkOrApp = this.newActInfo()
    // },
    actSdkOrApp (id, type = 'sdk') {
    actSdkOrApp(item, type = "sdk") {
      this.checkDetail(item, 'inactive')
      this.actType = type;
      this.actId = id;
      this.actDrawerShow = true;
      this.actId = item.id;
      this.actStep = 0;
      this.activeCode = '';
      this.activedSdkOrApp = this.newActInfo()
      this.activeCode = "";
      this.activedSdkOrApp = this.newActInfo();
    },
    newActInfo () {
    cancelActivate(){
      this.showInputCode= false
      this.activeCode = ""
    },
    newActInfo() {
      return {
        activateCode: '',
        productName: '',
        setting: '',
        expireTime: '',
        licence: '',
        devIds: ''
      }
        activateCode: "",
        productName: "",
        setting: "",
        expireTime: "",
        licence: "",
        devIds: "",
      };
    },
    getUnActivedList () {
      getUnActivedSdk().then(res => {
    getUnActivedList() {
      getUnActivedSdk().then((res) => {
        if (res.code == 200) {
          this.unActivedSDKList = res.data;
        }
      })
      });
    },
    getUnActivedAppList () {
      getUnActivedApp().then(res => {
    getUnActivedAppList() {
      getUnActivedApp().then((res) => {
        if (res.code == 200) {
          this.unActivedAppList = res.data;
        }
      });
    },
    actived () {
    actived() {
      let _this = this;
      if (this.actType == 'sdk') {
      if (this.activeCode.trim()=="") {
        this.$notify({
          type: "error",
          message: "激活码不能为空",
        });
        return
      }
      if (this.actType == "sdk") {
        //激活算法
        actPageAlg(this.actId, this.activeCode).then(res => {
          if (res.data.isSuccess) {
            _this.activedSdkOrApp = res.data.successMsg;
            _this.actStep++;
            _this.getUnActivedList();
            _this.getAllSdk();
          } else {
            _this.$notify({
              type: 'error',
              message: res.data.failMsg.failMsg
            });
          }
        }).catch(e => {
          console.log(e)
        });
      } else if (this.actType == 'app') {
        actPageAlg(this.actId, this.activeCode)
          .then((res) => {
            if (res.data.isSuccess) {
              this.productDetailVisible = false
              _this.activedSdkOrApp = res.data.successMsg;
              this.showActivateSuccess=true
              _this.actStep++;
              _this.getUnActivedList();
              _this.getAllSdk();
            } else {
              _this.$notify({
                type: "error",
                message: res.data.failMsg.failMsg,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      } else if (this.actType == "app") {
        //激活应用
        actApp(this.actId, this.activeCode).then(res => {
          if (res.data.isSuccess) {
            _this.activedSdkOrApp = res.data.successMsg;
            _this.actStep++;
            _this.getUnActivedAppList();
            _this.getAllApps();
          } else {
            _this.$notify({
              type: 'error',
              message: res.data.failMsg.failMsg
            });
          }
        }).catch(e => {
          console.log(e)
        });
        actApp(this.actId, this.activeCode)
          .then((res) => {
            if (res.data.isSuccess) {
              this.productDetailVisible = false
              _this.activedSdkOrApp = res.data.successMsg;
              this.showActivateSuccess=true
              _this.actStep++;
              _this.getUnActivedAppList();
              _this.getAllApps();
            } else {
              _this.$notify({
                type: "error",
                message: res.data.failMsg.failMsg,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
    getCodeDetail () { },
    checkMyAlgorith () {
      this.actDrawerShow = false;
    getCodeDetail() {},
    checkMyAlgorith() {
      this.showActivateSuccess = false;
      this.activeName = "myAlgorithm";
    },
    onFileUpload (file) {
    onFileUpload(file) {
      //this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始安装</span>`;
      this.patchFile = { ...file };
      this.fileAdded = true;
      const h = this.$createElement;
      //上传完成获取安装信息
      let _this = this;
      getInstallInfo(file).then(res => {
        _this.installFile = file;
        if (res.success) {
          _this.installDialogVisible = true;
          debugger
          if (res.data.apps.length > 0) {
            _this.installAppPackage = {
              appId: res.data.apps[0].appId,
              version: res.data.apps[0].version,
              productName: res.data.productName,
              installContent: res.data.apps[0].installContent
      getInstallInfo(file)
        .then((res) => {
          _this.installFile = file;
          if (res.success) {
            _this.installDialogVisible = true;
            if (res.data.apps.length > 0) {
              _this.installAppPackage = {
                appId: res.data.apps[0].appId,
                version: res.data.apps[0].version,
                productName: res.data.productName,
                installContent: res.data.apps[0].installContent,
              };
            }
            if (res.data.sdks.length > 0) {
              _this.installSdkPackage = {
                appId: res.data.sdks[0].sdkId,
                version: res.data.sdks[0].version,
                productName: res.data.productName,
                installContent: res.data.sdks[0].installContent,
              };
            }
          }
          if (res.data.sdks.length > 0) {
            _this.installSdkPackage = {
              appId: res.data.sdks[0].sdkId,
              version: res.data.sdks[0].version,
              productName: res.data.productName,
              installContent: res.data.sdks[0].installContent
            }
          }
        }
      }).catch(e => {
        this.$message({
          type: 'error',
          message: e.data
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: e.data,
          });
        });
      })
    },
    openApp(){
      let message = 'toOpenApp?' + this.productDetail.productBaseId;
      window.parent.postMessage({
        msg: message
      }, "*")
    },
    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;
        res.data.forEach(item => {
          let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
        res.data.forEach((item) => {
          let obj = Object.assign(
            { unloadLoading: false, upgradeLoading: false },
            item
          );
          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
            obj.upgradeLoading = true;
            this.appUpgreading = true;
            this.startAutoFresh();
            this.sdkUpgreading = true;
          }
          //算法软件 已安装其中包含待升级 未安装
          item.installed ? installedList.push(obj) : unInstalledList.push(obj)
          item.installed ? installedList.push(obj) : unInstalledList.push(obj);
          item.isUpgrade ? hasNewVersionList.push(obj): null
        });
        // this.sdkList = res.data.map((i, index) => {
        //   if (i.progressMsg !== "" && i.progressMsg !== "已安装") {
        //     i.upgradeLoading = true;
        //     this.appUpgreading = true;
        //     this.startAutoFresh();
        //   }
        //   this.$set(i, "isEdit", false);
        //   return i;
        // });
      }
      this.installedList = installedList;
      this.notInstalledList = unInstalledList;
      this.hasNewVersionSdk = hasNewVersionList;
    },
    unloadSDKinWin(){
    donwload (item) {
      debugger
      item.upgradeLoading = true;
      //this.downloading = true;
      this.downloadItem = item.id;
      let appToUnload
      let sdkToUnload
      if (this.productDetail.productTypeName=="应用") {
        appToUnload= this.installedApps.find((item)=>{
          return item.id == this.productDetail.productBaseId
        })
        this.unLoad(appToUnload)
      }else{
          sdkToUnload= this.installedList.find((item)=>{
          return item.id == this.productDetail.productBaseId
        })
        this.unLoadSdk(sdkToUnload)
      }
    },
    //卸载算法
    unLoadSdk(sdk) {
      let _this = this;
      this.$confirm("确定要卸载该算法吗?", "提示")
        .then(() => {
      _this.productDetailVisible = false
          sdk.unloadLoading = true;
          removeSdk({ sdkId: sdk.id })
            .then((res) => {
              if (res && res.success) {
                sdk.unloadLoading = false;
                this.$notify({
                title: "成功",
                message: "卸载完成",
                type: "success",
              });
                _this.getAllSdk();
                window.parent.postMessage(
                  {
                    msg: "AppUpdate",
                  },
                  "*"
                );
              }
            })
            .catch((e) => {
              console.log(e);
              sdk.unloadLoading = false;
            });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    upgradeSDKinWin(){
      downloadSdk({ path: item.id })
        .then(rsp => {
      this.isUpgrading = !this.isUpgrading;
      let _this = this;
      if (this.productDetail.productTypeName=="应用") {
      installApp({ path: this.productDetail.productBaseId})
        .then((res) => {
          if (res && res.success) {
         this.$notify({
          title: "成功",
          message: "升级完成",
          type: "success",
        });
        this.needToUpgradeInWin=false
        this.productDetail.isUpgrade = false
        this.isUpgrading = !this.isUpgrading;
          }
        })
        .catch((e) => {
            _this.$notify({
              title: "升级失败",
              message: e.data,
              type: "warning",
            });
             this.isUpgrading = !this.isUpgrading;
        });
      // 开启自动刷新
      this.appUpgreading = true;
      }else{
        downloadSdk({path:this.productDetail.productBaseId}).then((res)=>{
          this.needToUpgradeInWin=false
        this.productDetail.isUpgrade = false
        this.isUpgrading = !this.isUpgrading;
        this.$notify({
          title: "成功",
          message: "升级完成",
          type: "success",
        });
      }).catch((err)=>{
        this.$notify({
          title: "升级失败",
          message: err.data,
          type: "warning",
        });
        this.isUpgrading = !this.isUpgrading;
      })
      this.sdkUpgreading = true;
      }
    },
    downloadSdkInSide(){
      this.downloadItem = this.productDetail.productBaseId;
      this.isUpgrading = true
      downloadSdk({ path: this.productDetail.productBaseId })
        .then((rsp) => {
          this.productDetailVisible = false
          this.downloadItem = "";
          this.$notify({
            type: "success",
            message: "算法已安装"
          });
      this.isUpgrading=false
        })
        .catch((err) => {
          this.$notify({
            type: "warning",
            message: err.data,
          });
          this.downloadItem = "";
      this.isUpgrading=false
        });
      // 开启自动刷新
      this.sdkUpgreading = true;
    },
    donwload(item,typ) {
      item.upgradeLoading = true;
      this.downloadItem = item.id;
      downloadSdk({ path: item.id })
        .then((rsp) => {
          item.upgradeLoading = false;
          //this.downloading = false;
          this.downloadItem = "";
          this.getAllSdk();
          this.$notify({
            type: "success",
            message: typ==1? "算法安装成功":"算法升级成功"
          });
        })
        .catch(err => {
        .catch((err) => {
          this.$notify({
            type: "warning",
            message: err.data
            message: err.data,
          });
          item.upgradeLoading = false;
          //this.downloading = false;
          this.downloadItem = "";
        });
        // 开启自动刷新
      this.appUpgreading = true;
      this.startAutoFresh();
      // 开启自动刷新
      this.sdkUpgreading = true;
    },
    inputBlur (item) {
      // console.log(item, '修改名称')
    inputBlur(item) {
      this.$set(item, "isEdit", false);
    },
    handleTabClick () {
    handleTabClick() {},
    autoRefreshAppAndSdkState() {
      // 关闭后退出
      if (!this.autoRefresh) {
        return;
      }
      if (this.appUpgreading) {
        this.getAllApps();
      }
      if (this.sdkUpgreading) {
        this.getAllSdk();
      }
      let _this = this;
      setTimeout(() => {
        _this.autoRefreshAppAndSdkState();
      }, 500);
    },
    startAutoFresh () {
      if (this.freshTimer) {
        clearTimeout(this.freshTimer)
      }
      if (!this.appUpgreading && !this.sdkUpgreading) {
        this.freshTimer = -1
        return
      }
      this.getAllSdk()
      this.getAllApps()
      this.freshTimer = setTimeout(this.startAutoFresh, 5 * 1000)
    }
  }
  },
};
</script>
<style lang="scss">
@@ -944,6 +1800,286 @@
    width: 100%;
    height: 100%;
  }
  .product-detail-dialog {
    .dialog-title{
          font-size: 13px;
    }
    .el-dialog {
      width: 50%;
      min-width: 920px;
      position: relative;
    }
    .el-dialog__header {
      text-align: center;
          padding: 6px;
      .el-dialog__headerbtn {
          position: absolute;
             top: 5px;
          right: 20px;
          padding: 0;
          background: transparent;
          outline: none;
          cursor: pointer;
          font-size: 20px;
      }
    }
    .el-dialog__body {
      background-color: rgba(222, 225, 230, 1);
          padding: 8px 3px;
      .button-group{
        position: absolute;
               top: 3px;
            left:6px;
                left: 10px;
      .el-button--small {
        padding: 5px 12px;
    }
        button{
          font-size: 18px;
        line-height: 12px;
        }
      }
    }
    .dialog-content {
      .box-top {
        height: 330px;
        .top-left {
          float: left;
          width: 55%;
          background-color: rgba(253, 253, 253, 1);
          margin: 0 0.5%;
          height: 330px;
          border-radius: 2px;
          .banner {
        text-align: center;
        margin-top: 3px;
           video {
            margin: 0px auto;
                 margin-top: 23px;
            width: 443px;
          height: 277px;
          }
          img{
                max-width: 90%;
                     margin-top: 28px;
          }
          }
        }
        .top-right {
          float: left;
          width: 43%;
          margin: 0 0.5%;
          height: 330px;
          background-color: rgba(253, 253, 253, 1);
          position: relative;
          border-radius: 2px;
          overflow: hidden;
          .summary {
                height: 120px;
                margin: 5px 5px 0 5px;
            .icon {
             margin: 0 10px;
                margin-top: 8px;
              float: left;
              .baseImg{
         max-width: 106px;
    max-height: 106px;
              }
            }
            .right-desc {
              float: left;
              position: absolute;
                 left: 140px;
              .name {
                    font-size: 28px;
                margin-bottom: 5px;
                text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 250px;
              }
              .tags {
                margin-bottom: 10px;
                .el-tag {
                  margin-right: 10px;
                }
              }
            }
          }
           .jihuo-input{
             margin-left: 10px;
             margin-bottom: 10px;
              .el-input{
                float: left;
                width: 63%;
                margin-bottom: 8px;
                margin-right: 10px;
              }
              el-button{
                float: left;
              }
            }
          .product-intruduction {
            height: 200px;
               margin-top: 3px;
            .part-title {
              display: block;
                  line-height: 20px;
              font-size: 16px;
              margin-left: 24px;
              border-bottom: 3px solid #3d68e1;
              width: fit-content;
                 height: 26px;
            margin-bottom: 8px;
            }
            .text {
                height: 156px;
              overflow: auto;
              padding: 0 15px 0px 15px;
              .single-desc {
                   margin-bottom: 10px;
                        font-size: 13px;
              }
            }
          }
        }
      }
      .box-bottom {
            margin-top: 8px;
        height: 240px;
        .bot-left {
          width: 49%;
          height: 240px;
          background-color: rgba(253, 253, 253, 1);
          margin: 0 0.5%;
          border-radius: 2px;
          float: left;
          .part-title {
            display: block;
            line-height: 35px;
            font-size: 16px;
            margin-left: 24px;
            border-bottom: 3px solid #3d68e1;
            width: fit-content;
               margin-bottom: 10px;
              height: 33px;
          }
          .list-zone {
            overflow: auto;
                height: 190px;
                padding: 0 20px;
            .list-item {
              .desc {
                background-color: rgba(242, 242, 242, 1.3);
                      margin: 5px 12px 0 12px;
                    font-size: 12px;
                        line-height: 18px;
              }
               margin-bottom: 12px;
            }
          }
        }
        .bot-right {
          height: 240px;
          float: left;
          background-color: rgba(253, 253, 253, 1);
          width: 49%;
          margin: 0 0.5%;
          border-radius: 2px;
          .part-title {
            display: block;
            line-height: 35px;
            font-size: 16px;
            margin-left: 24px;
            border-bottom: 3px solid #3d68e1;
            width: fit-content;
            margin-bottom: 5px;
                height: 33px;
          }
          .item-zone {
            overflow: auto;
            height: 225px;
              padding: 0px 12px;
            .item {
              height: 165px;
              width: 130px;
              float: left;
              border-radius: 10px;
              box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.0666666666666667);
              position: relative;
              .el-tag {
                float: right;
                margin: 8px;
              }
              .icon {
                margin: 0 auto;
                img {
                  max-width: 60px;
                  max-height: 60px;
                      position: absolute;
                top: 20%;
                left: 26%;
                }
                .icon-name {
                 text-align: center;
                position: absolute;
                top: 61%;
                   left: 12%;
            width: 100px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
              font-size: 13px;
                }
              }
              .look-button {
                position: absolute;
                      left: 30%;
                top: 76%;
              }
            }
          }
        }
      }
    }
  }
}
.flex-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-loading-mask .el-loading-spinner {
@@ -976,12 +2112,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%;
@@ -1001,7 +2145,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 {
@@ -1072,6 +2216,7 @@
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          min-height: 200px;
          .wrap-box {
            width: 16.66%;
          }
@@ -1083,7 +2228,8 @@
            max-width: 200px;
            .mask {
              width: 100%;
              .el-button + .el-button {
                margin-left: 0 !important;
              }
@@ -1163,16 +2309,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%;
@@ -1231,7 +2377,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%;
@@ -1325,6 +2478,7 @@
        flex-wrap: wrap;
        justify-content: center;
        top: 0;
        .bot-btn {
          flex: 1;
        }
@@ -1598,5 +2752,42 @@
    }
  }
}
.active-Dial{
  .el-dialog{
    min-width: 400px;
  }
  .dialog-active{
          .desc {
          padding: 0 30px;
          margin-bottom: 30px;
          li {
            border-bottom: 1px solid #eee;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            &:last-child {
              border-bottom: none;
            }
            label {
              display: inline-block;
              width: 90px;
              padding-left: 14px;
              font-weight: bold;
            }
          }
        }
        .text-right {
          padding-right: 30px;
          text-align: right;
          .tip {
            color: #999;
            line-height: 38px;
          }
        }
}
}
</style>