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 | 2950 +++++++++++++++++++++++++++++++---------------------------
 1 files changed, 1,577 insertions(+), 1,373 deletions(-)

diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 5a47303..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,70 +17,65 @@
               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}">
-                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
-                            <div class="mask">
-                              <div class="info-onmask">
-                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                                <div>鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+                          <div
+                            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 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"
+                                  @click="unLoadSdk(item)"
+                                  type="primary"
                                   size="small"
-                                  @click="donwload(item)"
+                                  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>
-
-                            <!-- <div class="list-complete-item-handle"> -->
-                            <!-- <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}"> -->
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :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">
-                            <div class="mask flex-center" v-if="!item.isEdit">
-                              <div class="info-onmask">
-                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                              </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 style="padding: 0px 10px 0px 10px">
+                              <span v-if="!item.isEdit">
+                                {{
+                                item.sdk_name
+                                }}
+                              </span>
 
                               <el-input
                                 size="small"
@@ -95,31 +90,55 @@
                         </div>
                       </div>
                     </div>
-                    <!-- </draggable> -->
-                    <div class="wrap-box" v-for="(item) in notInstalledList" :key="item.id">
+                    <div class="wrap-box" v-for="item in notInstalledList" :key="item.id">
                       <div
                         class="list-choose-item-left list-choose-item-left-uninstal"
                         v-loading="downloading && downloadItem == item.id"
                       >
                         <div class="mask">
-                          <el-button type="primary" class="bot-btn" @click="donwload(item)">瀹夎</el-button>
+                          <div class="left-top">
+                            <div v-if="item.installed">褰撳墠鐗堟湰:{{ item.version }}</div>
+                            <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{ item.remoteVersion }}</div>
+                          </div>
+                          <div
+                            class="info-onmask"
+                            @click="checkDetail(item, 'activeNotInstall')"
+                          >鏌ョ湅璇︽儏</div>
+                          <div class="mask-btn">
+                            <el-button @click="donwload(item,1)" type="primary" class="bot-btn">瀹夎</el-button>
+                          </div>
                         </div>
                         <div class="click-download" title="涓嬭浇">
                           <span class="iconfont iconxiazai1"></span>
                         </div>
                         <div class="list-complete-item-handle">
-                          <div class="svg-wrap">
+                          <div
+                            class="svg-wrap"
+                            v-loading="
+                              item.installLoading || item.upgradeLoading
+                            "
+                            :element-loading-text="item.progressMsg"
+                            element-loading-background="rgba(0,0,0,.8)"
+                          >
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :src="
+                                item.iconBlob.indexOf(',') > 0
+                                  ? item.iconBlob
+                                  : `data:image/png;base64,${item.iconBlob}`
+                              "
                               alt
                             />
                             <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
-                            <div style="padding:0px 10px 0px 10px;">
-                              <span class="list-choose-item-left-uninstal">{{ item.sdk_name }}</span>
+                            <div style="padding: 0px 10px 0px 10px">
+                              <span class="list-choose-item-left-uninstal">
+                                {{
+                                item.sdk_name
+                                }}
+                              </span>
                             </div>
                           </div>
                         </div>
@@ -128,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"
-                            :element-loading-text="item.unloadLoading?'鍗歌浇涓�':'鍗囩骇涓�'"
+                            :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"
@@ -154,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"
@@ -164,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"
@@ -190,27 +219,41 @@
                         <div class="list-complete-item-handle uninstall">
                           <div
                             class="svg-wrap"
-                            v-loading="item.installLoading||item.upgradeLoading"
-                            :element-loading-text="item.installLoading?'瀹夎涓�':'鍗囩骇涓�'"
+                            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"
@@ -248,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"
@@ -289,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"
@@ -325,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>
@@ -398,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>
@@ -414,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>
@@ -433,59 +630,319 @@
         <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,
-  findAll,
-  addTaskSdk,
-  delTaskSdk,
-  deleteTask,
-  updateTaskStatus,
-  updateTaskName,
-  getSdkArgs,
-  saveTaskSdkRule,
-  addTask,
-  getRulesByTaskSdk,
-  deleteTaskSdkRule,
-  findByType,
-  getTagList,
   downloadSdk,
   installSdk,
-  getInstallInfo
+  getInstallInfo,
+  removeSdk,
 } from "./api";
-import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";
+import {
+  getApps,
+  installApp,
+  getAppDetail,
+  removeApp,
+  getUnActivedSdk,
+  actPageAlg,
+  getUnActivedApp,
+  actApp,
+} from "@/api/app";
 
+import bus from "@/plugin/bus";
 import FileUploader from "@/components/subComponents/FileUpload/index";
-import TaskManage from "@/Pool/TaskMange";
-import VideoManageData from "@/Pool/VideoManageData";
 export default {
   name: "algorithmManage",
   props: {},
   components: {
-    FileUploader
+    FileUploader,
   },
   computed: {
-    notInstalledList () {
-      return this.TaskMange.list1.filter(sdk => {
-        return sdk.installed === false;
-      });
+    updateNum() {
+      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;
     },
-    installedList () {
-      return this.TaskMange.list1.filter(sdk => {
-        return sdk.installed === true;
-      });
-    },
-    ungradeList () {
-      // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀�
-      //return [];
-      return this.TaskMange.list1.filter(sdk => {
-        return sdk.isUpgrade === true;
-      });
-    },
-    isAdmin () {
+    // notInstalledList () {
+    //   return this.sdkList.filter(sdk => {
+    //     return sdk.installed === false;
+    //   });
+    // },
+    // installedList () {
+    //   return this.sdkList.filter(sdk => {
+    //     return sdk.installed === true && !sdk.isUpgrade;
+    //   });
+    // },
+    // ungradeList () {
+    //   // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀�
+    //   let arr = this.sdkList.filter(sdk => {
+    //     return sdk.isUpgrade === true;
+    //   });
+    //   arr.forEach(sdk => {
+    //     sdk.upgradeLoading = false;
+    //   });
+    //   return arr;
+    // },
+    isAdmin() {
       if (
         sessionStorage.getItem("userInfo") &&
         sessionStorage.getItem("userInfo") !== ""
@@ -497,1080 +954,708 @@
       return false;
     },
   },
-  data () {
+  data() {
     return {
-      TaskMange: new TaskManage,
-      VideoManageData: new VideoManageData,
+      sdkList: [],
+      installedList: [],
+      hasNewVersionSdk: [],
+      hasNewVersionApp: [],
+      notInstalledList: [],
       buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
       activeName: "myAlgorithm",
       patchUpdateStatus: "",
-      dragging: false,
-      list1: [
-        {
-          sdk_name: "浜鸿劯鎻愬彇"
-        }
-      ],
-      list2: [
-        {
-          id: "001",
-          name: "浠诲姟1",
-          child: [
-            {
-              id: "1",
-              sdk_name: "浜鸿劯妫�娴�",
-              isSelect: false
-            },
-            {
-              id: "2",
-              sdk_name: "浜鸿劯瀵规瘮",
-              isSelect: false
-            }
-          ],
-          isSetting: false,
-          isShowSetAlgo: false
-        }
-      ],
-      argsList: [],
-      baseObject: {
-        id: "",
-        algoId: "",
-        options1: [],
-        options2: [],
-        options3: [],
-        value1: "",
-        value2: "",
-        value3: "",
-        unit: ""
-      },
-      currentAlgoId: "",
-      currentTaskId: "",
-      isSuperUser: false,
       downloadItem: "",
       downloading: false,
-      sceneDialogVisible: false,
-      dialogTitle: '',
       direction: "rtl",
-      actDrawerShow: false,
       actStep: 0,
+      showActivateSuccess: false,
       activeCode: "",
-      sceneTemplates: [],
-      appSceneForm: {
-        id: "",
-        name: "",
-        desc: "",
-        rules: "",
-        txt: ""
-      },
-      sceneSdks: [],
-      sceneRuleList: "",
       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,
       installedApps: [],
       storeApps: [],
-      installFile: {}
-    }
-  },
-  watch: {
-    list2: {
-      handler (newVal, oldVal) {
-        // window.console.log(newVal, oldVal, '鐩戝惉list2')
-        if (newVal !== oldVal) {
-          // window.console.log(newVal, '鐩戝惉list2')
-          newVal.map((i, index) => {
-            i.child.map(j => {
-              this.$set(j, "parentId", i.id);
-            });
-          });
-        }
-      },
-      deep: true
-    }
+      installFile: {},
+      freshTimer: null,
+      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.getAllApps();
-    this.findAllSdk();
-    this.findByType();
-    this.getBaseList();
-    this.findAll();
+
+  mounted() {
+    // 鑾峰彇鎵�鏈夊簲鐢�
+    this.autoRefreshAppAndSdkState();
+
     this.getUnActivedList();
     this.getUnActivedAppList();
-    // this.TaskMange.findAllSdk();
-    // this.TaskMange.findByType();
-    this.VideoManageData.init();
+  },
+  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 => {
-        debugger
-        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.findAllSdk();
-            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;
-        }
-      })
-    },
-    getAllApps () {
-      let _this = this;
-      _this.installedApps = [];
-      _this.storeApps = [];
-      getApps().then(res => {
-        if (res && res.success) {
-          //_this.storeApps = res.data;
-          res.data.forEach(item => {
-            if (item.installed) {
-              let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
-              _this.installedApps.push(obj)
-            } else {
-              let obj = Object.assign({ installLoading: false, upgradeLoading: false }, item)
-              _this.storeApps.push(obj)
-            }
+      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",
           });
-          console.log('_this.installedApps', _this.installedApps);
-          console.log('_this.storeApps', _this.storeApps);
-        }
-      })
-    },
-    //鍗歌浇搴旂敤
-    unLoad (app) {
-      app.unloadLoading = true;
-      let _this = this;
-      removeApp({ appId: app.id }).then(res => {
+          if (action == "upgrade") {
+            app.upgradeLoading = false;
+          } else {
+            app.installLoading = 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;
-      })
+      // 寮�鍚嚜鍔ㄥ埛鏂�
+      this.appUpgreading = true;
+    },
+    async getAllApps() {
+      let iArry = [];
+      let sArry = [];
+      let nArry = [];
+      let rsp = await getApps();
+      if (rsp && rsp.success) {
+        // 閬嶅巻app鐨勮繃绋嬮噸缃�
+        this.appUpgreading = false;
 
-    },
-    // actSdk (id) {
-    //   this.actSdkId = id;
-    //   this.actDrawerShow = true;
-    //   this.actStep = 0;
-    //   this.activeCode = '';
-    //   this.activedSdkOrApp = this.newActInfo()
-    // },
-    actSdkOrApp (id, type = 'sdk') {
-      this.actType = type;
-      this.actId = id;
-      this.actDrawerShow = true;
-      this.actStep = 0;
-      this.activeCode = '';
-      this.activedSdkOrApp = this.newActInfo()
-    },
-    newActInfo () {
-      return {
-        activateCode: '',
-        productName: '',
-        setting: '',
-        expireTime: '',
-        licence: '',
-        devIds: ''
+        rsp.data.forEach((item) => {
+          let obj = Object.assign(
+            { unloadLoading: false, upgradeLoading: false },
+            item
+          );
+          if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") {
+            obj.upgradeLoading = true;
+
+            this.appUpgreading = true;
+          }
+          item.installed ? iArry.push(obj) : sArry.push(obj);
+          item.isUpgrade && nArry.push(obj);
+        });
       }
+      this.installedApps = iArry;
+      this.storeApps = sArry;
+      this.hasNewVersionApp = nArry;
     },
-    getUnActivedList () {
-      getUnActivedSdk().then(res => {
+
+    //鍗歌浇
+    unLoad(app) {
+      let _this = this;
+      this.$confirm("纭畾瑕佸嵏杞借搴旂敤鍚�?", "鎻愮ず")
+        .then(() => {
+          _this.productDetailVisible = 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);
+        });
+    },
+
+    actSdkOrApp(item, type = "sdk") {
+      this.checkDetail(item, "inactive");
+      this.actType = type;
+      this.actId = item.id;
+      this.actStep = 0;
+      this.activeCode = "";
+      this.activedSdkOrApp = this.newActInfo();
+    },
+
+    cancelActivate() {
+      this.showInputCode = false
+      this.activeCode = ""
+    },
+    newActInfo() {
+      return {
+        activateCode: "",
+        productName: "",
+        setting: "",
+        expireTime: "",
+        licence: "",
+        devIds: "",
+      };
+    },
+    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;
         }
       });
     },
-
-    installFormat (percentage) {
-      return percentage === 100 ? '瀹夎鎴愬姛' : `${percentage}%`;
-    },
-    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.findAllSdk();
-          } 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
-            }
-          }
-
-          // this.$confirm('', '绠楁硶淇℃伅', {
-          //   message: `<div class="installInfo">
-          //           <div><span>绠楁硶鍚嶇О锛�</span><span>${file.filename}</span></div>
-          //           <div><span>瀹夎鐗堟湰锛�</span><span></span></div>
-          //           <div><span>鏇存柊鍐呭锛�</span><span></span></div>
-          //           <p>纭畾瀹夎姝ょ畻娉曪紵</p>
-          //         </div>`,
-          //   confirmButtonText: '瀹夎',
-          //   cancelButtonText: '鍙栨秷',
-          //   dangerouslyUseHTMLString: true,
-          //   type: ''
-          // }).then(() => {
-          //   this.isInstall = true;
-          //   //瀹夎
-          //   installSdk(file).then(res => {
-          //     debugger
-          //     if (res.success) {
-          //       this.isInstall = false;
-          //       //this.$refs['progressBar'].style.width = 100%
-          //       //this.installPercentage = 100%
-          //       this.$message({
-          //         type: 'success',
-          //         message: '瀹夎鎴愬姛,灏嗚烦杞嚦鎴戠殑绠楁硶涓煡鐪�'
-          //       });
-          //       setTimeout(() => {
-          //         this.findAllSdk();
-          //         this.activeName = 'myAlgorithm';
-          //       }, 3000)
-          //     }
-
-          //   }).catch(e => {
-          //     console.log(e)
-          //     this.isInstall = false;
-          //     this.$message({
-          //       type: 'error',
-          //       message: e.data
-          //     });
-          //   })
-          // }).catch(() => {
-          //   console.log('鍙栨秷瀹夎');
-
-          // })
-        }
-      }).catch(e => {
-        this.$message({
-          type: 'error',
-          message: e.data
+        })
+        .catch((e) => {
+          this.$message({
+            type: "error",
+            message: e.data,
+          });
         });
-      })
-      // this.$msgbox({
-      //     title: '绠楁硶淇℃伅',
-      //     message: h('div', null, [
-      //       h('span', null, '绠楁硶鍚嶇О锛� '),
-      //       h('i', { style: 'color: teal' }, file.filename)
-      //     ]),
-      //     showCancelButton: true,
-      //     confirmButtonText: '纭畾',
-      //     cancelButtonText: '鍙栨秷',
-      //     beforeClose: (action, instance, done) => {
-      //       if (action === 'confirm') {
-      //         instance.confirmButtonLoading = true;
-      //         instance.confirmButtonText = '鎵ц涓�...';
-      //         setTimeout(() => {
-      //           done();
-      //           setTimeout(() => {
-      //             instance.confirmButtonLoading = false;
-      //           }, 300);
-      //         }, 3000);
-      //       } else {
-      //         done();
-      //       }
-      //     }
-      //   }).then(action => {
-      //     this.$message({
-      //       type: 'info',
-      //       message: 'action: ' + action
-      //     });
-      //   });
-
-
-
+    },
+    openApp() {
+      let message = 'toOpenApp?' + this.productDetail.productBaseId;
+      window.parent.postMessage({
+        msg: message
+      }, "*")
     },
 
-    onFileAdded (f) {
-      ;
+    onFileAdded(f) {
       this.patchUpdateStatus = "";
     },
-    // 鏍¢獙杈撳叆鐨勬槸鍚︽槸鏁板瓧
-    valiNum (value) {
-      if (value) {
-        let re = /[^\-?\d.]*$/;
-        if (!re.test(value)) {
-          // this.$toast({
-          //   type: "warning",
-          //   message: "璇疯緭鍏ユ暟瀛楋紒"
-          // });
-          this.$notify({
-            title: "鎻愮ず",
-            message: "璇疯緭鍏ユ暟瀛楋紒",
-            type: "warning"
-          });
-        }
-      }
-    },
-    // 宸﹁竟鎷栧姩妯″潡寰楁嫋鍔ㄧ粨鏉熷悗鐨勮Е鍙戝嚱鏁�
-    endLeft (env) {
-      this.dragging = false;
-      let taskId = env.to.id;
-      let sdkId = this.TaskMange.list1[env.oldIndex].id;
-      if (!taskId.length || !sdkId.length) {
-        return;
-      }
-      // 鑾峰彇鍒拌浠诲姟鎵�鍦ㄧ殑鍏冪礌
-      let task = this.TaskMange.list2.find(i => {
-        return i.id === taskId;
-      });
-      let arr = task.child.filter(i => {
-        return i.id === sdkId;
-      });
-      // window.console.log(task, "鎷栬繘鏉ョ殑浠诲姟淇℃伅", sdkId, arr);
-      if (arr && arr.length >= 2) {
-        // this.$toast({
-        //   type: "warning",
-        //   message: "璇ョ畻娉曞凡瀛樺湪锛�"
-        // });
-        this.$notify({
-          title: "鎻愮ず",
-          message: "璇ョ畻娉曞凡瀛樺湪锛�",
-          type: "warning"
-        });
-        task.child.splice(env.newIndex, 1);
-        return true;
-      }
-      let list = task.child.map((i, index) => {
-        let obj = {};
-        obj.sdkId = i.id;
-        obj.sort = index + 1;
-        return obj;
-      });
-      let json = {
-        taskId: taskId,
-        sdks: list
-      };
-      this.addTaskSdk(json);
-    },
-    // 鍙宠竟鎷栧姩妯″潡寮�濮嬫嫋鍔ㄨЕ鍙戝嚱鏁�
-    startRight (env) {
-      this.$nextTick(() => {
-        this.dragging = true;
-      });
-      // window.window.console.log(env, "right start");
-    },
-    // 鍙宠竟鎷栧姩妯″潡鎷栧姩缁撴潫瑙﹀彂鍑芥暟
-    endRight (env) {
-      // window.window.console.log(env, "right end");
-    },
-    clickSet (data) {
-      if (data.isSetting) {
-        data.isSetting = false;
-      } else {
-        data.isSetting = true;
-      }
-    },
-    clickDel (data, Index) {
-      this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛屾浠诲姟鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵", {
-        center: true,
-        showConfirmButton: true,
-        showCancelButton: true,
-        confirmButtonClass: "comfirm-class-sure",
-        cancelButtonClass: "comfirm-class-cancle"
-      })
-        .then(() => {
-          this.deleteTask(data);
-        })
-        .catch(err => { });
-    },
-    clickSetAlgo (row, data) {
-      // window.console.log(row, data, "缂栬緫浠诲姟涓煇涓�涓畻娉�");
-      if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) {
-        row.isShowSetAlgo = false;
-        data.isSelect = false;
-        return false;
-      }
-      if (data.id !== this.TaskMange.currentAlgoId) {
-        let isEdit = false;
-        if (this.argsList && this.argsList.length !== 0) {
-          this.TaskMange.argsList.map((i, index) => {
-            if (i.value2 !== this.argsList[index].value2) {
-              isEdit = true;
-            }
-            if (i.value3 !== this.argsList[index].value3) {
-              isEdit = true;
-            }
-          });
-        }
-        if (isEdit) {
-          this.$notify({
-            title: "鎻愮ず",
-            message: "璇峰厛淇濆瓨鏈繚瀛樼殑閰嶇疆锛�",
-            type: "warning"
-          });
-          return false;
-        } else {
-          let task = this.TaskMange.list2.find(element => {
-            return element.isShowSetAlgo;
-          });
-          // console.log(task, '鏄惁鏈夊凡缁忔墦寮�缂栬緫鐨�')
-          if (task !== undefined) {
-            this.$set(task, "isShowSetAlgo", false);
-            task.child.map(i => {
-              this.$set(i, "isSelect", false);
-            });
-          }
-        }
-      }
-      this.TaskMange.currentAlgoId = data.id;
-      this.TaskMange.currentTaskId = row.id;
-      let task = this.TaskMange.list2.find(element => {
-        return element.isShowSetAlgo;
-      });
-      if (task === undefined) {
-        this.getSdkArgs(data).then(() => {
-          this.getRulesByTaskSdk(row.id, data.id);
-        });
-        if (row.isShowSetAlgo) {
-          row.isShowSetAlgo = false;
-        } else {
-          row.isShowSetAlgo = true;
-          data.isSelect = true;
-        }
-      } else {
-        // this.$toast({
-        //   type: "warning",
-        //   message: "璇峰厛淇濆瓨鏈繚瀛樼殑閰嶇疆锛�"
-        // });
-        // this.$notify({
-        //   title: "鎻愮ず",
-        //   message: "璇峰厛淇濆瓨鏈繚瀛樼殑閰嶇疆锛�",
-        //   type: "warning"
-        // });
-      }
-    },
-    async getRulesByTaskSdk (taskId, sdkId) {
-      let res = await getRulesByTaskSdk({
-        taskId: taskId,
-        sdkId: sdkId
-      });
-      if (res && res.success) {
-        if (res.data.rules && res.data.rules.length !== 0) {
-          this.TaskMange.argsList = res.data.rules.map((i, index) => {
-            let sdk = res.data.argList.find(j => {
-              return j.alias === i.sdk_arg_alias;
-            });
-            let obj = JSON.parse(JSON.stringify(this.TaskMange.baseObject));
-            obj.value1 = i.sdk_arg_alias ? i.sdk_arg_alias : "";
-            obj.value2 = i.operator ? i.operator : "";
-            obj.value3 = i.sdk_arg_value ? i.sdk_arg_value : "";
-            obj.unit = sdk.unit ? sdk.unit : "";
-            obj.id = i.Id ? i.Id : "";
-            obj.algoId = sdkId;
-            return obj;
-          });
-        } else {
-          this.TaskMange.argsList = res.data.argList.map(i => {
-            let obj = JSON.parse(JSON.stringify(this.TaskMange.baseObject));
-            obj.value1 = i.alias ? i.alias : "";
-            obj.value2 = i.default_operator ? i.default_operator : "";
-            obj.value3 = i.default_value ? i.default_value : "";
-            obj.unit = i.unit ? i.unit : "";
-            obj.id = "";
-            obj.algoId = sdkId;
-            return obj;
-          });
-        }
-        // window.console.log(res, '鏌ユ壘绠楁硶瑙勫垯', this.argsList)
-        this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList));
-      }
-    },
-    async findAllSdk () {
+
+    async getAllSdk() {
+      let installedList = [];
+      let unInstalledList = [];
+      let hasNewVersionList = [];
       let res = await findAllSdk();
       if (res && res.success) {
-        this.TaskMange.list1 = res.data.map((i, index) => {
-          this.$set(i, "isEdit", false);
-          //mock 鏈畨瑁�/寰呭崌绾�
-          // if (index == 1 || index == 2) {
-          //   this.$set(i, "isUpgrade", true);
-          // }
-          // if (index == 3 || index == 4) {
-          //   this.$set(i, "installed", false);
-          // }
-          //mock end
-          return i;
-        });
-      }
-    },
-    addTask () {
-      let obj = {
-        id: "",
-        name: "浠诲姟" + this.TaskMange.list2.length,
-        child: [],
-        isSetting: false,
-        isShowSetAlgo: false
-      };
-      // window.console.log(this.TaskMange.list2, "addTask");
-      this.TaskMange.list2.push(obj);
-      this.addTaskAsync(obj.name);
-      this.$nextTick(() => {
-        let taskArea = document.getElementById("taskArea");
-        taskArea.scrollTop = taskArea.scrollHeight;
-      });
-    },
-    async findAll () {
-      let res = await findAll();
-      if (res && res.success) {
-        if (res.data && res.data.length !== 0) {
-          let list = res.data.map(i => {
-            let obj = {};
-            obj.id = i.task.taskid;
-            obj.name = i.task.taskname;
-            obj.enable = i.task.enable;
-            obj.is_alarm = i.task.is_alarm;
-            obj.child = [];
-            if (i.sdks && i.sdks.length !== 0) {
-              obj.child = i.sdks.map(j => {
-                let t = {};
-                t.id = j.id;
-                t.ipc_id = j.ipc_id;
-                if (i.sdks.length == 1) {
-                  t.sdk_name = i.task.taskname;
-                  // console.log("鍗曚釜sdk绠楁硶锛�",t.sdk_name)
-                } else {
-                  t.sdk_name = j.sdk_name;
-                  // console.log("澶氫釜sdk绠楁硶锛�",t.sdk_name)
-                }
-                t.icon = j.icon;
-                t.enable = j.enable;
-                t.isSelect = false;
-                return t;
-              });
-            }
-            obj.isSetting = false;
-            obj.isShowSetAlgo = false;
-            return obj;
-          });
-          this.TaskMange.list2 = list;
-        }
-      }
-    },
-    clickDelSdk (task, sdk) {
-      this.$confirm(
-        "鎻愮ず锛氬垹闄ゅ悗锛屾绠楁硶鍦ㄦ湰浠诲姟涓Щ闄わ紝鍚屾椂鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵",
-        {
-          center: true,
-          showConfirmButton: true,
-          showCancelButton: true,
-          confirmButtonClass: "comfirm-class-sure",
-          cancelButtonClass: "comfirm-class-cancle"
-        }
-      )
-        .then(() => {
-          this.delTaskSdk(task, sdk);
-        })
-        .catch(err => { });
-    },
-    selectChange (event, type, data) {
-      if (type === "options1") {
-        // window.window.console.log(type, data, "閫夋嫨涓嬫媺妗�");
-        data.options1.map(i => {
-          if (i.value === data.value1) {
-            this.$set(data, "unit", i.unit ? i.unit : "");
+        this.sdkUpgreading = false;
+
+        res.data.forEach((item) => {
+          let obj = Object.assign(
+            { unloadLoading: false, upgradeLoading: false },
+            item
+          );
+          if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") {
+            obj.upgradeLoading = true;
+
+            this.sdkUpgreading = true;
           }
-        });
-      }
-    },
-    // 鍒犻櫎浠诲姟绠楁硶
-    async delTaskSdk (task, sdk) {
-      let json = {
-        taskId: task.id,
-        sdkId: sdk.id
-      };
-      let res = await delTaskSdk(json);
-      if (res && res.success) {
-        // this.$toast({
-        //   type: "success",
-        //   message: "鍒犻櫎浠诲姟绠楁硶鎴愬姛!"
-        // });
-        this.$notify({
-          title: "鎴愬姛",
-          message: "鍒犻櫎浠诲姟绠楁硶鎴愬姛!",
-          type: "success"
-        });
-        this.findAll();
-      }
-    },
-    // 鍒犻櫎浠诲姟
-    async deleteTask (data, index) {
-      // window.console.log(data, "deleteTask");
-      let res = await deleteTask({ taskId: data.id });
-      // this.$toast({
-      //   type: res.success ? "success" : "error",
-      //   message: res.msg
-      // });
-      this.$notify({
-        title: res.success ? "鎴愬姛" : "澶辫触",
-        message: res.msg,
-        type: res.success ? "success" : "error"
-      });
-      if (data.id && res.success) {
-        this.findAll();
-      }
-    },
-    // 鏇存柊浠诲姟鐘舵��
-    async updateTaskStatus (data) {
-      // window.console.log(data, '鏇存柊浠诲姟鐘舵��')
-      let json = {
-        taskId: data.id,
-        enable: data.enable
-      };
-      let res = await updateTaskStatus(json);
-      // this.$toast({
-      //   type: res.success ? "success" : "error",
-      //   message: res.msg
-      // });
-      this.$notify({
-        title: res.success ? "鎴愬姛" : "澶辫触",
-        message: res.msg,
-        type: res.success ? "success" : "error"
-      });
-    },
-    // 鏇存柊浠诲姟鍚嶇О
-    async updateTaskName (data) {
-      let json = {
-        taskId: data.id,
-        taskName: data.name
-      };
-      let res = await updateTaskName(json);
-      // this.$toast({
-      //   type: res.success ? "success" : "error",
-      //   message: res.msg
-      // });
-      this.$notify({
-        title: res.success ? "鎴愬姛" : "澶辫触",
-        message: res.msg,
-        type: res.success ? "success" : "error"
-      });
-      if (res && res.success) {
-        this.$set(data, "isSetting", false);
-      }
-    },
-    // 鑾峰彇搴曞簱鏁版嵁
-    async getBaseList () {
-      // let res = await getTagList();
-      // if (res && res.success) {
-      //   let filter = res.data.filter(i => {
-      //     return i.status === 0;
-      //   });
-      //   let list = filter.map(i => {
-      //     let obj = {};
-      //     obj.id = i.key;
-      //     obj.name = i.title;
-      //     obj.value = i.value;
-      //     return obj;
-      //   });
-      //   list.unshift({
-      //     id: "",
-      //     name: "鍏ㄩ儴搴曞簱",
-      //     value: ""
-      //   })
 
-      //   // this.TaskMange.baseObject.options3 = [...all, ...list];
-      //   this.TaskMange.baseObject.options3 = [...list];
-      // }
+          //绠楁硶杞欢 宸插畨瑁呭叾涓寘鍚緟鍗囩骇 鏈畨瑁�
+          item.installed ? installedList.push(obj) : unInstalledList.push(obj);
+          item.isUpgrade ? hasNewVersionList.push(obj) : null
+        });
+      }
+      this.installedList = installedList;
+      this.notInstalledList = unInstalledList;
+      this.hasNewVersionSdk = hasNewVersionList;
+    },
+    unloadSDKinWin() {
 
-      this.TaskMange.baseObject.options3 = [
-        { id: true, name: true, value: true },
-        { id: false, name: false, value: false }
-      ];
-    },
-    // 鑾峰彇绠楁硶鍙傛暟
-    async getSdkArgs (data) {
-      let res = await getSdkArgs({
-        sdkId: data.id,
-        scope: "TASKRULE"
-      });
-      if (res && res.success) {
-        // window.console.log(res, "鏌ヨ绠楁硶鍙傛暟");
-        let list = res.data.map(i => {
-          let obj = {};
-          obj.name = i.name;
-          obj.id = i.alias;
-          obj.value = i.alias;
-          obj.unit = i.unit;
-          obj.must = i.must;
-          obj.range = i.range;
-          obj.sort = i.sort;
-          return obj;
-        });
-        this.TaskMange.baseObject.options1 = [...list];
+      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)
       }
     },
-    // 鏌ヨ瀛楀吀
-    async findByType () {
-      let res = await findByType();
-      if (res && res.success) {
-        let list = res.data.RULECOMPUTEBETWEEN.map(i => {
-          let obj = {};
-          obj.name = i.name;
-          obj.value = i.value;
-          return obj;
+    //鍗歌浇绠楁硶
+    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);
         });
-        this.TaskMange.baseObject.options2 = [...list];
-      }
     },
-    // 绠楁硶閰嶇疆锛屾柊寤�
-    add () {
-      this.TaskMange.argsList.push(
-        JSON.parse(JSON.stringify(this.TaskMange.baseObject))
-      );
-    },
-    // 绠楁硶閰嶇疆 鍒犻櫎
-    delRule (index) {
-      this.TaskMange.argsList.splice(index, 1);
-    },
-    // 绠楁硶鍙傛暟淇濆瓨
-    async save () {
-      let list = this.TaskMange.argsList.map(i => {
-        let obj = {};
-        obj.id = i.id;
-        obj.operator = i.value2;
-        obj.sdk_arg_alias = i.value1;
-        obj.sdk_arg_value = i.value3;
-        return obj;
-      });
-      let json = {
-        rules: list,
-        sdkId: this.TaskMange.currentAlgoId,
-        taskId: this.TaskMange.currentTaskId
-      };
-      let res = await saveTaskSdkRule(json);
-      this.$notify({
-        title: "鎻愮ず",
-        type: res.success ? "success" : "error",
-        message: res.msg
-      });
-      if (res && res.success) {
-        let task = this.TaskMange.list2.find(i => {
-          return i.id === this.TaskMange.currentTaskId;
-        });
-        if (task) {
-          this.$set(task, "isShowSetAlgo", false);
-          this.TaskMange.argsList = [];
-          task.child.map(i => {
-            this.$set(i, "isSelect", false);
+    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;
       }
+
+
+
     },
-    getDefault () {
-      this.deleteTaskSdkRule(
-        this.TaskMange.currentTaskId,
-        this.TaskMange.currentAlgoId
-      ).then(() => {
-        this.getRulesByTaskSdk(
-          this.TaskMange.currentTaskId,
-          this.TaskMange.currentAlgoId
-        );
-      });
+    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;
     },
-    async deleteTaskSdkRule (taskId, sdkId) {
-      let json = {
-        taskId: taskId,
-        sdkId: sdkId
-      };
-      let res = await deleteTaskSdkRule(json);
-      // this.$toast({
-      //   type: res.success ? "success" : "error",
-      //   message: res.msg
-      // });
-      this.$notify({
-        title: res.success ? "鎴愬姛" : "澶辫触",
-        message: res.msg,
-        type: res.success ? "success" : "error"
-      });
-      if (res && res.success) {
-        // window.console.log(res, "鎭㈠榛樿鍊�");
-      }
-    },
-    // 缁欎换鍔℃坊鍔犵畻娉�
-    async addTaskSdk (data) {
-      let res = await addTaskSdk(data);
-      if (res && res.success) {
-        // window.console.log(res, 'res')
-        this.findAll();
-      }
-    },
-    // 鏂版坊鍔犱换鍔�
-    async addTaskAsync (name) {
-      let res = await addTask({ taskname: name });
-      // this.$toast({
-      //   type: res.success ? "success" : "error",
-      //   message: res.msg
-      // });
-      // window.console.log(res, "addTaskAsync");
-      this.$notify({
-        title: res.success ? "鎴愬姛" : "澶辫触",
-        message: res.msg,
-        type: res.success ? "success" : "error"
-      });
-      if (res && res.success) {
-        this.findAll();
-      }
-    },
-    cancle (row) {
-      if (row.isShowSetAlgo) {
-        row.isShowSetAlgo = false;
-      }
-      this.TaskMange.argsList = [];
-      this.TaskMange.currentAlgoId = "";
-      row.child.map(i => {
-        this.$set(i, "isSelect", false);
-      });
-    },
-    cancleTask (row) {
-      if (row.isSetting) {
-        row.isSetting = false;
-      }
-    },
-    commandAlgo (command, row, item) {
-      if (command === 1) {
-        // console.log('璁剧疆绠楁硶')
-        this.clickSetAlgo(row, item);
-      }
-      if (command === 2) {
-        // console.log('鍒犻櫎绠楁硶')
-        this.clickDelSdk(row, item);
-      }
-    },
-    commandTask (command, row) {
-      if (command === 1) {
-        //缂栬緫浠诲姟
-        this.clickSet(row);
-      }
-    },
-    donwload (item) {
-      this.downloading = true;
+    donwload(item, typ) {
+      item.upgradeLoading = true;
       this.downloadItem = item.id;
 
       downloadSdk({ path: item.id })
-        .then(rsp => {
+        .then((rsp) => {
+          item.upgradeLoading = false;
+          //this.downloading = false;
+          this.downloadItem = "";
           this.$notify({
             type: "success",
-            message: "绠楁硶宸插畨瑁�"
+            message: typ == 1 ? "绠楁硶瀹夎鎴愬姛" : "绠楁硶鍗囩骇鎴愬姛"
           });
-          this.downloading = false;
-          this.downloadItem = "";
-          this.findAllSdk();
         })
-        .catch(err => {
+        .catch((err) => {
           this.$notify({
             type: "warning",
-            message: err.data
+            message: err.data,
           });
-
-          this.downloading = false;
+          item.upgradeLoading = false;
+          //this.downloading = false;
           this.downloadItem = "";
         });
+      // 寮�鍚嚜鍔ㄥ埛鏂�
+      this.sdkUpgreading = true;
     },
-    commandAlgLib (item) {
-      this.$set(item, "isEdit", true);
-    },
-    inputBlur (item) {
-      // console.log(item, '淇敼鍚嶇О')
+    inputBlur(item) {
       this.$set(item, "isEdit", false);
     },
+    handleTabClick() { },
+    autoRefreshAppAndSdkState() {
+      // 鍏抽棴鍚庨��鍑�
+      if (!this.autoRefresh) {
+        return;
+      }
 
-    cleanTemplateForm () {
-      this.appSceneForm.name = "";
-      this.appSceneForm.desc = "";
-      this.appSceneForm.rules = "";
-      this.appSceneForm.txt = "";
+      if (this.appUpgreading) {
+        this.getAllApps();
+      }
 
-      this.$refs.ruleEditor.cleanRule();
+      if (this.sdkUpgreading) {
+        this.getAllSdk();
+      }
+
+      let _this = this;
+      setTimeout(() => {
+        _this.autoRefreshAppAndSdkState();
+      }, 500);
     },
-    handleTabClick () {
-
-    },
-    handleCreateScene () {
-      this.sceneDialogVisible = true;
-      this.dialogTitle = '鍒涘缓鍦烘櫙妯℃澘';
-
-      this.sceneSdks = this.TaskMange.list1.filter(sdk => {
-        return sdk.installed === true;
-      });
-      this.sceneRuleList = "";
-
-      this.$nextTick(() => {
-        this.cleanTemplateForm();
-      });
-    },
-    handleDialogClose () {
-      this.sceneDialogVisible = false;
-    },
-    handleEditScene (item) {
-      this.appSceneForm.name = item.name;
-      this.appSceneForm.desc = item.desc;
-
-      this.sceneSdks = item.sdks;
-      this.sceneRuleList = item.rules;
-      this.sceneDialogVisible = true;
-      this.dialogTitle = '缂栬緫鍦烘櫙妯℃澘';
-    },
-
-
-  }
+  },
 };
 </script>
 <style lang="scss">
@@ -1580,16 +1665,7 @@
   box-sizing: border-box;
   text-align: left;
   min-width: 1106px;
-  // background-color: #f2f6fc;
-  .s-video-manage-breadcrumb {
-    height: 5%;
-    box-sizing: border-box;
-    border: 1px solid #e4e7ed;
-    background-color: rgb(255, 255, 255);
-    -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
-    box-shadow: #e4e7ed 0px 0px 9px inset;
-    border-radius: 5px;
-  }
+
   .el-tabs {
     height: calc(100% - 50px);
     // margin-top: 5px !important;
@@ -1615,12 +1691,272 @@
     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%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
-.el-breadcrumb__inner {
-  font-weight: bold;
-  color: #606266;
-  cursor: pointer;
+.flex-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
+
 .el-loading-mask .el-loading-spinner {
   top: 40px !important;
 }
@@ -1651,12 +1987,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%;
@@ -1676,7 +2020,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 {
@@ -1696,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;
@@ -1707,16 +2052,8 @@
   //     width: 58% !important;
   //   }
   // }
-  .edit-rules-box {
-    padding: 0 2px 0 13px;
-  }
-  .common {
-    .rigth-box {
-      width: 90% !important;
-    }
-  }
-  .super,
-  .common {
+
+  .super {
     width: 100%;
     height: 100%;
     .title {
@@ -1747,7 +2084,8 @@
         }
       }
       .task-list {
-        background: #fdfdfd;
+        // background: #1c364a;
+        background: #fff;
         padding: 20px;
         box-sizing: border-box;
 
@@ -1755,183 +2093,22 @@
           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%;
 
               .el-button + .el-button {
                 margin-left: 0 !important;
               }
-            }
-          }
-        }
-      }
-      .appScenarios-list {
-        display: flex;
-        flex-wrap: wrap;
-        .wrap-box {
-          width: 16.6%;
-          margin-bottom: 30px;
-          .inner {
-            width: 80%;
-
-            box-sizing: border-box;
-            position: relative;
-            font-size: 14px;
-            padding: 20px 0 50px;
-            transition: all 1s;
-            background: #ffffff;
-            border: 1px solid #e2e2e2;
-            box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
-            border-radius: 4px;
-            margin: auto;
-            &:hover {
-              .mask {
-                display: block;
-              }
-            }
-            .mask {
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              background: rgba(0, 0, 0, 0.65);
-              backdrop-filter: blur(1px) brightness(100%);
-              text-align: center;
-              z-index: 1;
-              border-radius: 3px;
-              display: none;
-              .el-button + .el-button {
-                margin-left: 0 !important;
-              }
-              .tool {
-                position: absolute;
-                top: 49%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                i {
-                  font-size: 50px;
-                }
-                i:nth-of-type(1) {
-                  margin-right: 30px;
-                }
-                i:nth-of-type(2) {
-                  color: red;
-                }
-              }
-            }
-            .scenario-icon {
-              display: flex;
-              width: 100%;
-              height: 100%;
-              margin: auto;
-              justify-content: center;
-              align-content: center;
-              align-items: center;
-              .single,
-              .double,
-              .third,
-              .four {
-                width: 80%;
-                padding-top: 80%;
-                position: relative;
-                margin: auto;
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: center;
-                .svg-wrap {
-                  width: 50%;
-                  position: absolute;
-                  height: 0;
-                  padding-top: 50%;
-                  text-align: center;
-                  box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;
-                  svg {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                  }
-                  .baseImg {
-                    position: absolute !important;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                  }
-                }
-              }
-              .single {
-                margin: auto;
-                .svg-wrap {
-                  top: 50%;
-                  left: 50%;
-                  transform: translate(-50%, -50%);
-                  box-shadow: none;
-                }
-              }
-              .double {
-                .svg-wrap:nth-of-type(1) {
-                  top: 50%;
-                  transform: translateY(-50%);
-                  left: 0;
-                }
-                .svg-wrap:nth-of-type(2) {
-                  top: 50%;
-                  transform: translateY(-50%);
-                  right: 0;
-                }
-              }
-              .third {
-                .svg-wrap:nth-of-type(1) {
-                  top: 0;
-                  left: 0;
-                }
-                .svg-wrap:nth-of-type(2) {
-                  top: 0;
-                  right: 0;
-                }
-                .svg-wrap:nth-of-type(3) {
-                  top: 50%;
-                  left: 50%;
-                  transform: translateX(-50%);
-                }
-              }
-              .four {
-                .svg-wrap:nth-of-type(1) {
-                  top: 0;
-                  left: 0;
-                }
-                .svg-wrap:nth-of-type(2) {
-                  top: 0;
-                  right: 0;
-                }
-                .svg-wrap:nth-of-type(3) {
-                  top: 50%;
-                  left: 0;
-                }
-                .svg-wrap:nth-of-type(4) {
-                  top: 50%;
-                  right: 0;
-                }
-              }
-            }
-            .scenario-name {
-              width: 100%;
-              height: 36px;
-              line-height: 36px;
-              text-align: center;
-              position: absolute;
-              bottom: 10px;
-              left: 0;
             }
           }
         }
@@ -1941,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%;
@@ -1975,9 +2152,9 @@
               }
             }
             .alg-name {
-              height: 36px;
+              height: 20px;
               text-align: center;
-              line-height: 36px;
+              line-height: 20px;
             }
             .mask {
               position: absolute;
@@ -2008,16 +2185,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%;
@@ -2062,24 +2239,8 @@
         }
       }
       .tab-content {
-        padding: 30px 20px;
+        padding: 20px 20px;
       }
-    }
-
-    .right-box {
-      height: 100%;
-      padding: 10px 10px;
-      box-sizing: border-box;
-      float: left;
-      .task-manage-table {
-        height: calc(100% - 30px);
-        margin-top: 5px;
-        overflow-x: hidden;
-        overflow-y: auto;
-      }
-      // .task-manage-table::-webkit-scrollbar {
-      //   width: 0 !important ;
-      // }
     }
     .mask {
       position: absolute;
@@ -2092,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%;
@@ -2163,7 +2331,7 @@
       font-size: 14px;
 
       transition: all 1s;
-      background: #ffffff;
+      // background: #ffffff;
       border-radius: 4px;
       p {
         display: none;
@@ -2186,6 +2354,7 @@
         flex-wrap: wrap;
         justify-content: center;
         top: 0;
+
         .bot-btn {
           flex: 1;
         }
@@ -2196,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;
@@ -2306,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;
@@ -2318,16 +2487,6 @@
         display: inline-block;
         width: 100%;
       }
-    }
-    .task-name {
-      text-align: center;
-      margin-top: 16px;
-      line-height: 28px;
-      font-family: PingFangSC-Regular;
-      font-size: 13px;
-      color: #222222;
-      text-align: center;
-      // background-color: #ecf5ff;
     }
     .unit-class {
       margin-left: 10px;
@@ -2352,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%;
@@ -2359,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;
@@ -2376,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;
         }
       }
     }
@@ -2469,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