From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复

---
 src/pages/ai/index/App.vue | 1888 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 1,480 insertions(+), 408 deletions(-)

diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 236b9d4..38592e9 100644
--- a/src/pages/ai/index/App.vue
+++ b/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,55 @@
                   </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')">
+                            <!-- <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"
@@ -362,62 +428,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 +595,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 +611,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 +630,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;
@@ -521,7 +958,8 @@
     return {
       sdkList: [],
       installedList: [],
-      ungradeList: [],
+      hasNewVersionSdk: [],
+      hasNewVersionApp: [],
       notInstalledList: [],
       buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
       activeName: "myAlgorithm",
@@ -529,27 +967,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,184 +998,347 @@
       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() {
     // 鑾峰彇鎵�鏈夊簲鐢�
-    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
+      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() {
       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') {
+      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 = []
-
+      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;
       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();
+    },
+
+    cancelActivate() {
+      this.showInputCode = false
+      this.activeCode = ""
     },
     newActInfo() {
       return {
-        activateCode: '',
-        productName: '',
-        setting: '',
-        expireTime: '',
-        licence: '',
-        devIds: ''
-      }
+        activateCode: "",
+        productName: "",
+        setting: "",
+        expireTime: "",
+        licence: "",
+        devIds: "",
+      };
     },
     getUnActivedList() {
-      getUnActivedSdk().then(res => {
+      getUnActivedSdk().then((res) => {
         if (res.code == 200) {
           this.unActivedSDKList = res.data;
         }
-      })
-
+      });
     },
     getUnActivedAppList() {
-      getUnActivedApp().then(res => {
+      getUnActivedApp().then((res) => {
         if (res.code == 200) {
           this.unActivedAppList = res.data;
         }
@@ -742,45 +1346,60 @@
     },
     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;
+      this.showActivateSuccess = false;
       this.activeName = "myAlgorithm";
     },
     onFileUpload(file) {
@@ -790,34 +1409,41 @@
       const h = this.$createElement;
       //涓婁紶瀹屾垚鑾峰彇瀹夎淇℃伅
       let _this = this;
-      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
+      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) {
@@ -827,91 +1453,209 @@
     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) {
+      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, '淇敼鍚嶇О')
       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">
@@ -947,6 +1691,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 {
@@ -986,6 +1994,14 @@
   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%;
   .installModel {
@@ -1024,6 +2040,7 @@
   .el-tabs--border-card > .el-tabs__content {
     padding: 0 !important;
     overflow: auto !important;
+    background-color: #fff;
   }
   .el-tabs__content {
     padding: 0 !important;
@@ -1067,7 +2084,8 @@
         }
       }
       .task-list {
-        background: #fdfdfd;
+        // background: #1c364a;
+        background: #fff;
         padding: 20px;
         box-sizing: border-box;
 
@@ -1075,15 +2093,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%;
 
@@ -1099,14 +2118,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%;
@@ -1133,9 +2152,9 @@
               }
             }
             .alg-name {
-              height: 36px;
+              height: 20px;
               text-align: center;
-              line-height: 36px;
+              line-height: 20px;
             }
             .mask {
               position: absolute;
@@ -1220,7 +2239,7 @@
         }
       }
       .tab-content {
-        padding: 30px 20px;
+        padding: 20px 20px;
       }
     }
     .mask {
@@ -1234,7 +2253,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%;
@@ -1305,7 +2331,7 @@
       font-size: 14px;
 
       transition: all 1s;
-      background: #ffffff;
+      // background: #ffffff;
       border-radius: 4px;
       p {
         display: none;
@@ -1328,6 +2354,7 @@
         flex-wrap: wrap;
         justify-content: center;
         top: 0;
+
         .bot-btn {
           flex: 1;
         }
@@ -1338,8 +2365,8 @@
       }
     }
     .list-choose-item-left-uninstal {
-      color: darkgray;
-      background-color: #ddd;
+      color: gray;
+      filter: grayscale(100%);
     }
     .list-complete-item.sortable-chosen {
       background: #4ab7bd;
@@ -1448,11 +2475,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;
@@ -1484,6 +2511,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%;
@@ -1491,16 +2519,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;
@@ -1508,14 +2544,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;
         }
       }
     }
@@ -1601,5 +2638,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>
 

--
Gitblit v1.8.0