heyujie
2022-06-10 3504ac3d05431d23f74dfecc41eccb491d855cab
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,85 +17,40 @@
              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">
              <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> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">
                            <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"
@@ -105,14 +60,22 @@
                            <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,14 +90,23 @@
                        </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>
@@ -142,21 +114,31 @@
                        <div class="list-complete-item-handle">
                          <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)"
                          >
                            <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>
@@ -165,25 +147,31 @@
                  </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> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">
                            <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"
@@ -191,7 +179,7 @@
                                >卸载</el-button>
                                <el-button
                                  v-if="item.isUpgrade"
                                  @click="downloadApp(item,'upgrade')"
                                  @click="downloadApp(item, 'upgrade')"
                                  type="warning"
                                  size="small"
                                  class="bot-btn"
@@ -201,13 +189,17 @@
                            <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 class="alg-name" style="color:grey;">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
@@ -227,27 +219,41 @@
                        <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
                                type="primary"
                                class="bot-btn"
                               <div class="left-top">
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <!-- v-if="!item.isDefault" -->
                              <div class="info-onmask" @click="checkDetail(item,'activeNotInstall')">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                @click="downloadApp(item)"
                              >安装</el-button>
                                  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"
@@ -285,31 +291,62 @@
                  </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="flex-title">
                    <p class="src-title">算法软件</p>
                  </div>
                  <div class="store-list flex-list">
                    <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"
@@ -326,26 +363,40 @@
                  </div>
                  <p class="src-title">应用软件</p>
                  <div class="app-list flex-list">
                    <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')">
                              <span
                                class="iconfont iconyunxiazai"
                                style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%"
                              ></span>
                            <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"
@@ -362,62 +413,156 @@
                    </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>
                    </div>
                <!--  -->
              </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 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> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">
                    <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="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> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">
                            <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>
@@ -435,15 +580,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>
@@ -451,15 +596,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>
@@ -470,21 +615,298 @@
        <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="item.url"
                      class="cursor-pointer"
                      preview
                    />
                    <video v-if="item.type == 'video'" :src="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;
@@ -505,7 +927,7 @@
    //   });
    //   return arr;
    // },
    isAdmin () {
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
@@ -517,11 +939,12 @@
      return false;
    },
  },
  data () {
  data() {
    return {
      sdkList: [],
      installedList: [],
      ungradeList: [],
      hasNewVersionSdk: [],
      hasNewVersionApp: [],
      notInstalledList: [],
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      activeName: "myAlgorithm",
@@ -529,27 +952,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,
@@ -557,363 +983,664 @@
      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
      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() {
      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.downloading = true;
      this.downloadItem = item.id;
      downloadSdk({ path: item.id })
        .then(rsp => {
          // this.$notify({
          //   type: "success",
          //   message: "算法已安装"
          // });
        .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">
@@ -949,6 +1676,270 @@
    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 {
@@ -981,12 +1972,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%;
@@ -1006,7 +2005,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 {
@@ -1026,6 +2025,7 @@
  .el-tabs--border-card > .el-tabs__content {
    padding: 0 !important;
    overflow: auto !important;
    background-color: #fff;
  }
  .el-tabs__content {
    padding: 0 !important;
@@ -1069,7 +2069,8 @@
        }
      }
      .task-list {
        background: #fdfdfd;
        // background: #1c364a;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
@@ -1077,15 +2078,16 @@
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          min-height: 200px;
          .wrap-box {
            width: 16.66%;
            width: 11%;
          }
          .list-choose-item-left {
            width: 80%;
            height: auto;
            margin: auto;
            margin-bottom: 30px;
            max-width: 200px;
            max-width: 150px;
            .mask {
              width: 100%;
@@ -1101,14 +2103,14 @@
        display: flex;
        flex-wrap: wrap;
        .wrap-box {
          width: 16.6%;
          width: 11%;
          margin-bottom: 30px;
          .list-choose-item-left {
            width: 80%;
            height: auto;
            margin: auto;
            margin-bottom: 30px;
            max-width: 200px;
            max-width: 150px;
          }
          .inner {
            width: 80%;
@@ -1135,9 +2137,9 @@
              }
            }
            .alg-name {
              height: 36px;
              height: 20px;
              text-align: center;
              line-height: 36px;
              line-height: 20px;
            }
            .mask {
              position: absolute;
@@ -1168,16 +2170,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%;
@@ -1222,7 +2224,7 @@
        }
      }
      .tab-content {
        padding: 30px 20px;
        padding: 20px 20px;
      }
    }
    .mask {
@@ -1236,7 +2238,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%;
@@ -1307,7 +2316,7 @@
      font-size: 14px;
      transition: all 1s;
      background: #ffffff;
      // background: #ffffff;
      border-radius: 4px;
      p {
        display: none;
@@ -1330,6 +2339,7 @@
        flex-wrap: wrap;
        justify-content: center;
        top: 0;
        .bot-btn {
          flex: 1;
        }
@@ -1340,8 +2350,8 @@
      }
    }
    .list-choose-item-left-uninstal {
      color: darkgray;
      background-color: #ddd;
      color: gray;
      filter: grayscale(100%);
    }
    .list-complete-item.sortable-chosen {
      background: #4ab7bd;
@@ -1450,11 +2460,11 @@
    }
    .alg-name {
      //margin-top: 12px;
      line-height: 36px;
      line-height: 20px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      letter-spacing: 0.05em;
      color: #3e4664;
      color: #333;
      // background-color: #ecf5ff;
      .el-input {
        position: relative;
@@ -1486,6 +2496,7 @@
        padding-top: 100%;
        position: relative;
        box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
        border-radius: 25px;
        svg {
          position: absolute;
          top: 50%;
@@ -1493,16 +2504,24 @@
          transform: translate(-50%, -50%);
        }
        .baseImg {
          width: 56%;
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          max-width: 106px;
          max-height: 106px;
          max-height: 150px;
          // max-width: 106px;
          // max-height: 106px;
        }
      }
      .willUpGrade {
        .update-icon {
           position: absolute;
          top: -8px;
          right: -8px;
          z-index: 999;
        }
        .iconupdate {
          color: #01e667;
          position: absolute;
@@ -1510,14 +2529,15 @@
          right: 5px;
          font-weight: 550;
          font-size: 26px;
          z-index: 999;
        }
      }
      &.uninstall {
        .svg-wrap {
          background-color: #ddd;
          filter: grayscale(100%);
        }
        .alg-name {
          color: darkgray;
          color: grey;
        }
      }
    }
@@ -1603,5 +2623,40 @@
    }
  }
}
.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>