From 6990d156c6c89ddb2cb109aca859246f4bb6c26e Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 02 三月 2021 20:48:17 +0800
Subject: [PATCH] 应用中心查看详情

---
 src/pages/ai/index/App.vue | 1357 ++++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 1,013 insertions(+), 344 deletions(-)

diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index dd61f65..10345bb 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,10 +17,13 @@
               v-model="activeName"
               type="border-card"
               @tab-click="handleTabClick"
-              style="height: calc(100% - 20px);"
+              style="height: calc(100% - 20px)"
             >
               <el-tab-pane label="宸叉縺娲�" name="myAlgorithm">
-                <div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'">
+                <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">
@@ -64,50 +67,75 @@
                         </div>
                       </div>
                     </div>-->
-                    <div class="wrap-box" v-for="(item) in installedList" :key="item.id">
+                    <div
+                      class="wrap-box"
+                      v-for="item in installedList"
+                      :key="item.id"
+                    >
                       <div class="list-choose-item-left">
                         <div class="list-complete-item-handle">
                           <div
                             class="svg-wrap"
-                            :class="{willUpGrade:item.isUpgrade}"
+                            :class="{ willUpGrade: item.isUpgrade }"
                             v-loading="item.upgradeLoading"
                             :element-loading-text="item.progressMsg"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
-                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
-                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">
+                            <i
+                              class="iconfont iconupdate"
+                              v-if="item.isUpgrade"
+                            ></i>
+                            <div
+                              class="mask"
+                              v-if="!item.isDefault || item.isUpgrade"
+                            >
                               <div class="left-top">
-                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                                <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+                                <div>褰撳墠鐗堟湰:{{ item.version }}</div>
+                                <div v-if="item.remoteVersion">
+                                  鏈�鏂扮増鏈�:{{ item.remoteVersion }}
+                                </div>
                               </div>
-                              <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div>
+                              <div
+                                class="info-onmask"
+                                @click="checkDetail(item)"
+                              >
+                                鏌ョ湅璇︽儏
+                              </div>
                               <div class="mask-btn">
                                 <el-button
                                   @click="unLoadSdk(item)"
                                   type="primary"
                                   size="small"
                                   class="bot-btn"
-                                >鍗歌浇</el-button>
+                                  >鍗歌浇</el-button
+                                >
                                 <el-button
                                   v-if="item.isUpgrade"
                                   @click="donwload(item)"
                                   type="warning"
                                   size="small"
                                   class="bot-btn"
-                                >鍗囩骇</el-button>
+                                  >鍗囩骇</el-button
+                                >
                               </div>
                             </div>
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :src="
+                                item.iconBlob.indexOf(',') > 0
+                                  ? item.iconBlob
+                                  : `data:image/png;base64,${item.iconBlob}`
+                              "
                               alt
                             />
                             <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
-                            <div style="padding:0px 10px 0px 10px;">
-                              <span v-if="!item.isEdit">{{ item.sdk_name }}</span>
+                            <div style="padding: 0px 10px 0px 10px">
+                              <span v-if="!item.isEdit">{{
+                                item.sdk_name
+                              }}</span>
 
                               <el-input
                                 size="small"
@@ -123,13 +151,22 @@
                       </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>
+                          <el-button
+                            type="primary"
+                            class="bot-btn"
+                            @click="donwload(item)"
+                            >瀹夎</el-button
+                          >
                         </div>
                         <div class="click-download" title="涓嬭浇">
                           <span class="iconfont iconxiazai1"></span>
@@ -137,21 +174,29 @@
                         <div class="list-complete-item-handle">
                           <div
                             class="svg-wrap"
-                            v-loading="item.installLoading||item.upgradeLoading"
+                            v-loading="
+                              item.installLoading || item.upgradeLoading
+                            "
                             :element-loading-text="item.progressMsg"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :src="
+                                item.iconBlob.indexOf(',') > 0
+                                  ? item.iconBlob
+                                  : `data:image/png;base64,${item.iconBlob}`
+                              "
                               alt
                             />
                             <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
-                            <div style="padding:0px 10px 0px 10px;">
-                              <span class="list-choose-item-left-uninstal">{{ item.sdk_name }}</span>
+                            <div style="padding: 0px 10px 0px 10px">
+                              <span class="list-choose-item-left-uninstal">{{
+                                item.sdk_name
+                              }}</span>
                             </div>
                           </div>
                         </div>
@@ -160,23 +205,39 @@
                   </div>
                   <p class="src-title">搴旂敤杞欢</p>
                   <div class="flex-list">
-                    <div class="wrap-box" v-for="(item) in installedApps" :key="item.id">
+                    <div
+                      class="wrap-box"
+                      v-for="item in installedApps"
+                      :key="item.id"
+                    >
                       <div class="list-choose-item-left">
                         <div class="list-complete-item-handle">
                           <div
                             class="svg-wrap"
-                            :class="{willUpGrade:item.isUpgrade}"
-                            v-loading="item.unloadLoading||item.upgradeLoading"
+                            :class="{ willUpGrade: item.isUpgrade }"
+                            v-loading="
+                              item.unloadLoading || item.upgradeLoading
+                            "
                             :element-loading-text="item.progressMsg"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
-                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
+                            <i
+                              class="iconfont iconupdate"
+                              v-if="item.isUpgrade"
+                            ></i>
                             <div class="mask">
                               <div class="left-top">
-                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                                <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+                                <div>褰撳墠鐗堟湰:{{ item.version }}</div>
+                                <div v-if="item.remoteVersion">
+                                  鏈�鏂扮増鏈�:{{ item.remoteVersion }}
+                                </div>
                               </div>
-                              <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div>
+                              <div
+                                class="info-onmask"
+                                @click="checkDetail(item)"
+                              >
+                                鏌ョ湅璇︽儏
+                              </div>
                               <div class="mask-btn">
                                 <el-button
                                   v-if="!item.isDefault"
@@ -184,26 +245,32 @@
                                   type="primary"
                                   size="small"
                                   class="bot-btn"
-                                >鍗歌浇</el-button>
+                                  >鍗歌浇</el-button
+                                >
                                 <el-button
                                   v-if="item.isUpgrade"
-                                  @click="downloadApp(item,'upgrade')"
+                                  @click="downloadApp(item, 'upgrade')"
                                   type="warning"
                                   size="small"
                                   class="bot-btn"
-                                >鍗囩骇</el-button>
+                                  >鍗囩骇</el-button
+                                >
                               </div>
                             </div>
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :src="
+                                item.iconBlob.indexOf(',') > 0
+                                  ? item.iconBlob
+                                  : `data:image/png;base64,${item.iconBlob}`
+                              "
                               alt
                             />
                             <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
-                            <div style="padding:0px 10px 0px 10px;">
+                            <div style="padding: 0px 10px 0px 10px">
                               <span v-if="!item.isEdit">{{ item.name }}</span>
                               <el-input
                                 size="small"
@@ -218,12 +285,18 @@
                         </div>
                       </div>
                     </div>
-                    <div class="wrap-box" v-for="item in storeApps" :key="item.id">
+                    <div
+                      class="wrap-box"
+                      v-for="item in storeApps"
+                      :key="item.id"
+                    >
                       <div class="list-choose-item-left">
                         <div class="list-complete-item-handle uninstall">
                           <div
                             class="svg-wrap"
-                            v-loading="item.installLoading||item.upgradeLoading"
+                            v-loading="
+                              item.installLoading || item.upgradeLoading
+                            "
                             :element-loading-text="item.progressMsg"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
@@ -233,18 +306,23 @@
                                 type="primary"
                                 class="bot-btn"
                                 @click="downloadApp(item)"
-                              >瀹夎</el-button>
+                                >瀹夎</el-button
+                              >
                             </div>
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :src="
+                                item.iconBlob.indexOf(',') > 0
+                                  ? item.iconBlob
+                                  : `data:image/png;base64,${item.iconBlob}`
+                              "
                               alt
                             />
                             <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
-                            <div style="padding:0px 10px 0px 10px;">
+                            <div style="padding: 0px 10px 0px 10px">
                               <span v-if="!item.isEdit">{{ item.name }}</span>
                               <el-input
                                 size="small"
@@ -282,31 +360,51 @@
                   </div>
                 </div>
               </el-tab-pane>
-              <el-tab-pane label="搴旂敤涓績" name="algorithmMall" v-if=" isShow('algorithmManage:buy')">
+              <el-tab-pane
+                label="搴旂敤涓績"
+                name="algorithmMall"
+                v-if="isShow('algorithmManage:buy')"
+              >
                 <div class="tab-content">
                   <p class="src-title">绠楁硶杞欢</p>
                   <div class="store-list flex-list">
-                    <div class="wrap-box" v-for="item in unActivedSDKList" :key="item.id">
+                    <div
+                      class="wrap-box"
+                      v-for="item in unActivedSDKList"
+                      :key="item.id"
+                    >
                       <div class="list-choose-item-left">
                         <div class="list-complete-item-handle">
                           <div class="alg-icon svg-wrap">
                             <div class="mask" @click="actSdkOrApp(item.id)">
                               <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>
                             <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"
@@ -323,26 +421,43 @@
                   </div>
                   <p class="src-title">搴旂敤杞欢</p>
                   <div class="app-list flex-list">
-                    <div class="wrap-box" v-for="item in unActivedAppList" :key="item.id">
+                    <div
+                      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.id, '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>
                             <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"
@@ -359,16 +474,24 @@
                     </div>
                   </div>
                 </div>
-                <el-drawer title="涓嬭浇" :visible.sync="actDrawerShow" :direction="direction">
+                <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-steps
+                        align-center
+                        :active="actStep"
+                        finish-status="success"
+                      >
                         <el-step title="娣诲姞婵�娲荤爜"></el-step>
                         <el-step title="婵�娲绘垚鍔�"></el-step>
                       </el-steps>
                     </div>
 
-                    <div v-if="actStep==0">
+                    <div v-if="actStep == 0">
                       <div class="act-code">
                         <p>浣跨敤婵�娲荤爜灏嗘柊鐨勭畻娉曟坊鍔犲埌鎮ㄧ殑璐︽埛</p>
                         <el-input
@@ -378,30 +501,32 @@
                         ></el-input>
                       </div>
                       <div class="text-right">
-                        <el-button type="primary" @click="actived">婵�娲�</el-button>
+                        <el-button type="primary" @click="actived"
+                          >婵�娲�</el-button
+                        >
                       </div>
                     </div>
-                    <div v-else-if="actStep==1">
+                    <div v-else-if="actStep == 1">
                       <ul class="desc">
                         <li>
                           <label>婵�娲荤爜:</label>
-                          <span>{{activedSdkOrApp.activateCode}}</span>
+                          <span>{{ activedSdkOrApp.activateCode }}</span>
                         </li>
                         <li>
                           <label>浜у搧鍚嶇О:</label>
-                          <span>{{activedSdkOrApp.productName}}</span>
+                          <span>{{ activedSdkOrApp.productName }}</span>
                         </li>
                         <li>
                           <label>閰嶇疆璇︽儏:</label>
-                          <span>{{activedSdkOrApp.setting}}</span>
+                          <span>{{ activedSdkOrApp.setting }}</span>
                         </li>
                         <li>
                           <label>鏈嶅姟鍒版湡鏃�:</label>
-                          <span>{{activedSdkOrApp.expireTime}}</span>
+                          <span>{{ activedSdkOrApp.expireTime }}</span>
                         </li>
                         <li>
                           <label>璁稿彲璇�:</label>
-                          <span>{{activedSdkOrApp.licence}}</span>
+                          <span>{{ activedSdkOrApp.licence }}</span>
                         </li>
                         <!-- <li>
                           <label>璁惧ID:</label>
@@ -409,7 +534,9 @@
                         </li>-->
                       </ul>
                       <div class="text-right">
-                        <el-button type="primary" @click="checkMyAlgorith">纭畾</el-button>
+                        <el-button type="primary" @click="checkMyAlgorith"
+                          >纭畾</el-button
+                        >
                         <p class="tip">鎻愮ず锛氳鍦ㄢ�滄垜鐨勭畻娉曗�濅腑鏌ョ湅骞跺畨瑁呯畻娉�</p>
                       </div>
                     </div>
@@ -418,59 +545,93 @@
               </el-tab-pane>
               <el-tab-pane name="update">
                 <span slot="label">
-                  <el-badge class="update-badge" :value="updateNum">鏇存柊</el-badge>
+                  <el-badge class="update-badge" :value="updateNum"
+                    >鏇存柊</el-badge
+                  >
                 </span>
                 <div class="task-list">
                   <div class="flex-title">
                     <p class="src-title">绠楁硶杞欢</p>
-                    <el-button @click="batchUpdate('sdk')" size="mini" type="primary">鏇存柊鍏ㄩ儴</el-button>
+                    <el-button
+                      @click="batchUpdate('sdk')"
+                      size="mini"
+                      type="primary"
+                      >鏇存柊鍏ㄩ儴</el-button
+                    >
                   </div>
                   <div class="flex-list">
-                    <div v-if="!hasNewVersionSdk.length" class="empty-tip">鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯...</div>
-                    <div class="wrap-box" v-for="item in hasNewVersionSdk" :key="item.id">
+                    <div v-if="!hasNewVersionSdk.length" class="empty-tip">
+                      鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯...
+                    </div>
+                    <div
+                      class="wrap-box"
+                      v-for="item in hasNewVersionSdk"
+                      :key="item.id"
+                    >
                       <div class="list-choose-item-left">
                         <div class="list-complete-item-handle">
                           <div
                             class="svg-wrap"
-                            :class="{willUpGrade:item.isUpgrade}"
+                            :class="{ willUpGrade: item.isUpgrade }"
                             v-loading="item.upgradeLoading"
                             :element-loading-text="item.progressMsg"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
-                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
-                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">
+                            <i
+                              class="iconfont iconupdate"
+                              v-if="item.isUpgrade"
+                            ></i>
+                            <div
+                              class="mask"
+                              v-if="!item.isDefault || item.isUpgrade"
+                            >
                               <div class="left-top">
-                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                                <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+                                <div>褰撳墠鐗堟湰:{{ item.version }}</div>
+                                <div v-if="item.remoteVersion">
+                                  鏈�鏂扮増鏈�:{{ item.remoteVersion }}
+                                </div>
                               </div>
-                              <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div>
+                              <div
+                                class="info-onmask"
+                                @click="checkDetail(item)"
+                              >
+                                鏌ョ湅璇︽儏
+                              </div>
                               <div class="mask-btn">
                                 <el-button
                                   @click="unLoadSdk(item)"
                                   type="primary"
                                   size="small"
                                   class="bot-btn"
-                                >鍗歌浇</el-button>
+                                  >鍗歌浇</el-button
+                                >
                                 <el-button
                                   v-if="item.isUpgrade"
                                   @click="donwload(item)"
                                   type="warning"
                                   size="small"
                                   class="bot-btn"
-                                >鍗囩骇</el-button>
+                                  >鍗囩骇</el-button
+                                >
                               </div>
                             </div>
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :src="
+                                item.iconBlob.indexOf(',') > 0
+                                  ? item.iconBlob
+                                  : `data:image/png;base64,${item.iconBlob}`
+                              "
                               alt
                             />
                             <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
-                            <div style="padding:0px 10px 0px 10px;">
-                              <span v-if="!item.isEdit">{{ item.sdk_name}}</span>
+                            <div style="padding: 0px 10px 0px 10px">
+                              <span v-if="!item.isEdit">{{
+                                item.sdk_name
+                              }}</span>
                             </div>
                           </div>
                         </div>
@@ -479,27 +640,50 @@
                   </div>
                   <div class="flex-title">
                     <p class="src-title">搴旂敤杞欢</p>
-                    <el-button @click="batchUpdate('app')" type="primary" size="mini">鏇存柊鍏ㄩ儴</el-button>
+                    <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 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"
+                            :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>
+                            <i
+                              class="iconfont iconupdate"
+                              v-if="item.isUpgrade"
+                            ></i>
                             <div class="mask">
                               <div class="left-top">
-                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                                <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+                                <div>褰撳墠鐗堟湰:{{ item.version }}</div>
+                                <div v-if="item.remoteVersion">
+                                  鏈�鏂扮増鏈�:{{ item.remoteVersion }}
+                                </div>
                               </div>
-                              <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div>
+                              <div
+                                class="info-onmask"
+                                @click="checkDetail(item)"
+                              >
+                                鏌ョ湅璇︽儏
+                              </div>
                               <div class="mask-btn">
                                 <el-button
                                   v-if="!item.isDefault"
@@ -507,26 +691,32 @@
                                   type="primary"
                                   size="small"
                                   class="bot-btn"
-                                >鍗歌浇</el-button>
+                                  >鍗歌浇</el-button
+                                >
                                 <el-button
                                   v-if="item.isUpgrade"
-                                  @click="downloadApp(item,'upgrade')"
+                                  @click="downloadApp(item, 'upgrade')"
                                   type="warning"
                                   size="small"
                                   class="bot-btn"
-                                >鍗囩骇</el-button>
+                                  >鍗囩骇</el-button
+                                >
                               </div>
                             </div>
                             <img
                               v-if="item.iconBlob"
                               class="baseImg"
-                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
+                              :src="
+                                item.iconBlob.indexOf(',') > 0
+                                  ? item.iconBlob
+                                  : `data:image/png;base64,${item.iconBlob}`
+                              "
                               alt
                             />
                             <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
-                            <div style="padding:0px 10px 0px 10px;">
+                            <div style="padding: 0px 10px 0px 10px">
                               <span v-if="!item.isEdit">{{ item.name }}</span>
                               <el-input
                                 size="small"
@@ -560,15 +750,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>
@@ -576,15 +766,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>
@@ -599,62 +789,196 @@
     <el-dialog
       class="product-detail-dialog"
       :visible="productDetailVisible"
-      @close="productDetailVisible=false"
+      @close="closeDial"
     >
-      <div class="dialog-title" slot="title">绠楁硶/搴旂敤璇︽儏</div>
+    <!-- <el-button-group> -->
+      <div class="button-group">
+  <el-button   plain size="small" @click="backwards" :disabled="backDisable"> &#60; </el-button>
+  <!-- <el-button type="primary" size="small" icon="el-icon-arrow-left"></el-button> -->
+  <el-button   plain 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">{{curCheckTarget.sdk_type===undefined?"搴旂敤璇︽儏":"绠楁硶璇︽儏"}}</div>
       <div class="dialog-content">
         <div class="box-top">
           <div class="top-left">
             <div class="banner">
-              <!-- <el-carousel
+              <el-carousel
                 ref="carousel"
                 :autoplay="false"
                 indicator-position="none"
-                :arrow="curCheckTarget.pics.length > 1 ? 'always' : 'never'"
+                :arrow="
+                  productDetail.pics !== undefined
+                    ? productDetail.pics.length > 1
+                      ? 'always'
+                      : 'never'
+                    : 'never'
+                "
                 @change="changeHandle"
               >
-                <el-carousel-item v-for="(item, index) in curCheckTarget.pics" :key="index">
+                <!-- :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=='image'"
-                      :src="'/httpImage/'+item.url"
+                      v-if="item.type != 'video'"
+                      :src="'/httpImage/' + item.url"
                       class="cursor-pointer"
                       preview
                     />
-                    <video v-if="item.type=='video'" :src="'/httpImage/'+item.url" controls></video>
+                    <video
+                      v-if="item.type == 'video'"
+                      :src="'/httpImage/' + item.url"
+                      controls
+                    ></video>
                   </div>
                 </el-carousel-item>
-              </el-carousel>-->
+              </el-carousel>
             </div>
           </div>
           <div class="top-right">
+            <!-- <div class="title">{{curCheckTarget.sdk_name}}</div> -->
             <div class="summary">
-              <div class="icon"></div>
-              <div class="name"></div>
-              <!-- <div class="tags">
-                <span
+              <div class="icon">
+                <img
+                  v-if="curCheckTarget.iconBlob"
+                  class="baseImg"
+                  :src="
+                    curCheckTarget.iconBlob.indexOf(',') > 0
+                      ? curCheckTarget.iconBlob
+                      : `data:image/png;base64,${curCheckTarget.iconBlob}`
+                  "
+                  alt
+                />
+              </div>
+              <div class="right-desc">
+                <div class="name">{{ productDetail.productName }}</div>
+                <div class="tags">
+                  <!-- <span
                   class="tag"
                   v-for="(id, index) in curCheckTarget.productLabelId"
                   :key="index+'i'"
-                >{{showNameById(id)}}</span>
-              </div>-->
-              <div class="btns">
-                <el-button size="mini">鍗囩骇</el-button>
-                <el-button size="mini">鍗歌浇</el-button>
-                <el-button size="mini">鎵撳紑</el-button>
+                >{{showNameById(id)}}</span> -->
+                  <el-tag type="info" color="#fff">搴旂敤</el-tag>
+                  <el-tag type="info" color="#fff">绠楁硶</el-tag>
+                  <el-tag type="info" color="#fff">杞欢</el-tag>
+                  <!-- <span
+                  class="tag"
+                >搴旂敤</span>
+                <span
+                  class="tag"
+                >绠楁硶</span>
+                <span
+                  class="tag"
+                >杞欢</span> -->
+                </div>
+                <div class="btns">
+                  <el-button size="medium" type="warning" @click="upgrade">{{
+                    isUpgrading ? "鍗囩骇涓�.." : "鍗囩骇"
+                  }}</el-button>
+                  <el-button size="medium" type="primary" @click="unload"
+                    >鍗歌浇</el-button
+                  >
+                  <el-button size="medium" type="success">鎵撳紑</el-button>
+                </div>
               </div>
             </div>
             <div class="product-intruduction">
-              <div class="title">浜у搧绠�浠�</div>
+              <div class="part-title">绠�浠�</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-bot">
+        <div class="box-bottom">
           <div class="bot-left">
             <div class="part-title">鍔熻兘鐗圭偣</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 === ""
+                      ? "璇ユ绱㈤噰鐢ㄥぇ鏁版嵁鏋舵瀯锛屽垎甯冨紡鏁版嵁澶勭悊锛屽彲鏀寔娴烽噺鏁版嵁澶嶆潅妫�绱㈡绉掔骇杩斿洖锛岃璁℃湁鏅鸿兘妫�绱㈡锛屾悳绱㈠唴瀹瑰皢鏍规嵁TF/IDF绠楁硶璁$畻鎵�寰楀緱鍒嗭紝璇ョ畻娉曢�氳繃姝ゅ唴瀹瑰尮閰嶇▼搴︼紝璇嶉鏁帮紝璇嶉暱鍗犳瘮绛夛紝璁$畻鍑哄悓鎵�鎼滃唴瀹圭殑绗﹀悎搴︼紝杩斿洖绗﹀悎搴︽渶楂樼殑鏁版嵁锛岃嫢绗﹀悎搴︿竴鑷达紝灏嗚繑鍥炴嵁浠婃渶杩戠殑鏁版嵁"
+                      : 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">
+                    {{ item.name === "" ? "鏆傛棤鏁版嵁" : item.name }}
+                  </div>
+                </div>
+                <div class="look-button">
+                  <el-button type="primary" size="small" @click="checkInWindow(item)">鏌ョ湅</el-button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -662,20 +986,34 @@
   </div>
 </template>
 <script>
-
-import { findAllSdk, downloadSdk, installSdk, getInstallInfo, removeSdk } from "./api";
-import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";
+import {
+  findAllSdk,
+  downloadSdk,
+  installSdk,
+  getInstallInfo,
+  removeSdk,
+} from "./api";
+import {
+  getApps,
+  installApp,
+  getAppDetail,
+  removeApp,
+  getUnActivedSdk,
+  actPageAlg,
+  getUnActivedApp,
+  actApp,
+} from "@/api/app";
 
 import FileUploader from "@/components/subComponents/FileUpload/index";
 export default {
   name: "algorithmManage",
   props: {},
   components: {
-    FileUploader
+    FileUploader,
   },
   computed: {
-    updateNum () {
-      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length
+    updateNum() {
+      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;
     },
     // notInstalledList () {
     //   return this.sdkList.filter(sdk => {
@@ -697,7 +1035,7 @@
     //   });
     //   return arr;
     // },
-    isAdmin () {
+    isAdmin() {
       if (
         sessionStorage.getItem("userInfo") &&
         sessionStorage.getItem("userInfo") !== ""
@@ -709,7 +1047,7 @@
       return false;
     },
   },
-  data () {
+  data() {
     return {
       sdkList: [],
       installedList: [],
@@ -734,15 +1072,15 @@
       unActivedSDKList: [],
       unActivedAppList: [],
       //actSdkId: '',
-      actType: '',
-      actId: '',
+      actType: "",
+      actId: "",
       activedSdkOrApp: {
-        activateCode: '',
-        productName: '',
-        setting: '',
-        expireTime: '',
-        licence: '',
-        devIds: ''
+        activateCode: "",
+        productName: "",
+        setting: "",
+        expireTime: "",
+        licence: "",
+        devIds: "",
       },
       // unloadLoading: false,
       // installLoading: false,
@@ -755,135 +1093,231 @@
       autoRefresh: true,
       curCheckTarget: {},
       productDetailVisible: false,
-    }
+      isUpgrading: false,
+      productDetail: {},
+      otherProducts: [],
+      backStack: [],
+      forwardStack: [],
+      backDisable:true,
+      forwardDisable:true,
+    };
   },
   directives: {
     focus: {
       inserted: function (el) {
         el.querySelector("input").focus();
-      }
-    }
+      },
+    },
   },
-  mounted () {
+  mounted() {
     // 鑾峰彇鎵�鏈夊簲鐢�
     this.autoRefreshAppAndSdkState();
 
     this.getUnActivedList();
     this.getUnActivedAppList();
   },
-  beforeDestroy () {
+  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) {
+    batchUpdate(type) {
       if (type == "sdk") {
-        this.hasNewVersionSdk.forEach(sdk => {
-          this.donwload(sdk)
-        })
+        this.hasNewVersionSdk.forEach((sdk) => {
+          this.donwload(sdk);
+        });
       } else {
-        this.hasNewVersionApp.forEach(app => {
-          this.downloadApp(app, 'upgrade')
-        })
+        this.hasNewVersionApp.forEach((app) => {
+          this.downloadApp(app, "upgrade");
+        });
       }
     },
-    checkDetail (item) {
+    closeDial(){
+      this.productDetailVisible = false
+      this.productDetail = {}
+      this.otherProducts = []
+    },
+    checkDetail(item) {
+      this.resetStack()
       this.curCheckTarget = item;
-      debugger
+      // debugger
       this.productDetailVisible = true;
+      let _this = this;
+      getAppDetail({ id: item.id }).then((res) => {
+        _this.productDetail = res.data.detail;
+        _this.otherProducts = res.data.randoms;
+
+      });
+    },
+    resetStack(){
+      this.forwardStack = []
+       this.backStack = []
+       this.backDisable = true
+       this.forwardDisable = true
+
+    },
+    checkInWindow(item){
+      this.backStack.push(this.productDetail)
+      console.log(this.backStack);
+      this.backDisable = false
+      this.curCheckTarget = item;
+      // this.productDetailVisible = true;
+      let _this = this;
+      getAppDetail({ id: item.id }).then((res) => {
+        _this.productDetail = res.data.detail;
+        _this.otherProducts = res.data.randoms;
+      });
+    },
+    backwards(){
+      if (this.backStack.length ==0) {
+        this.backDisable = true
+      // forwardDisable:false,
+      return
+      }
+      console.log(this.backStack);
+
+      // debugger
+   this.forwardStack.push(this.productDetail)
+   this.productDetail =  this.backStack.pop()
+  this.forwardDisable=false
+ if (this.backStack.length ==0) {
+        this.backDisable = true
+      
+      }
+    },
+    forwards(){
+      if(this.forwardStack.length==0){
+        this.forwardDisable=true
+        return
+      }
+      // debugger
+      console.log(this.backStack);
+
+        this.backStack.push(this.productDetail)
+        this.backDisable=false
+      this.productDetail=this.forwardStack.pop()
+      if (this.forwardStack.length==0) {
+        this.forwardDisable=true
+      }
+      
     },
     //绂荤嚎瀹夎
-    offlineInstall () {
+    offlineInstall() {
       this.installDialogVisible = false;
       this.isInstall = true;
       //瀹夎
-      installSdk(this.installFile).then(res => {
-        if (res.success) {
+      installSdk(this.installFile)
+        .then((res) => {
+          if (res.success) {
+            this.isInstall = false;
+            this.$message({
+              type: "success",
+              message: '瀹夎鎴愬姛,灏嗚烦杞嚦"宸叉縺娲�"涓煡鐪�',
+            });
+            setTimeout(() => {
+              this.getAllSdk();
+              window.parent.postMessage(
+                {
+                  msg: "AppUpdate",
+                },
+                "*"
+              );
+              this.activeName = "myAlgorithm";
+            }, 3000);
+          }
+        })
+        .catch((e) => {
+          console.log(e);
           this.isInstall = false;
           this.$message({
-            type: 'success',
-            message: '瀹夎鎴愬姛,灏嗚烦杞嚦"宸叉縺娲�"涓煡鐪�'
+            type: "error",
+            message: e.data,
           });
-          setTimeout(() => {
-            this.getAllSdk();
-            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') {
+    upgrade() {
+      this.isUpgrading = !this.isUpgrading;
+      setTimeout(() => {
+        this.$notify({
+          title: "鎴愬姛",
+          message: "鍗囩骇瀹屾垚",
+          type: "success",
+        });
+        this.isUpgrading = !this.isUpgrading;
+      }, 1200);
+    },
+    downloadApp(app, action) {
+      if (action == "upgrade") {
         app.upgradeLoading = true;
       } else {
         app.installLoading = true;
       }
       let _this = this;
 
-      installApp({ path: app.id }).then(res => {
-        if (res && res.success) {
-          setTimeout(() => {
-            if (action == 'upgrade') {
-              app.upgradeLoading = false;
-              // _this.$notify({
-              //   type: 'success',
-              //   message: '鍗囩骇鎴愬姛'
-              // });
-            } else {
-              app.installLoading = false;
-              // _this.$notify({
-              //   type: 'success',
-              //   message: '瀹夎鎴愬姛'
-              // });
-            }
-            // _this.getAllApps();
-            window.parent.postMessage({
-              msg: "AppUpdate"
-            }, '*')
-          }, 3000);
-        }
-      }).catch(e => {
-        console.log(e);
-        if (action == 'upgrade') {
-          app.upgradeLoading = false;
-        } else {
-          app.installLoading = false;
-        }
-      })
+      installApp({ path: app.id })
+        .then((res) => {
+          if (res && res.success) {
+            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;
+          }
+        });
 
       // 寮�鍚嚜鍔ㄥ埛鏂�
       this.appUpgreading = true;
     },
-    async getAllApps () {
-      let iArry = []
-      let sArry = []
-      let nArry = []
+    async getAllApps() {
+      let iArry = [];
+      let sArry = [];
+      let nArry = [];
       let rsp = await getApps();
       if (rsp && rsp.success) {
         // 閬嶅巻app鐨勮繃绋嬮噸缃�
         this.appUpgreading = false;
 
-        rsp.data.forEach(item => {
-          let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
+        rsp.data.forEach((item) => {
+          let obj = Object.assign(
+            { unloadLoading: false, upgradeLoading: false },
+            item
+          );
           if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") {
             obj.upgradeLoading = true;
 
             this.appUpgreading = true;
           }
           item.installed ? iArry.push(obj) : sArry.push(obj);
-          item.isUpgrade && nArry.push(obj)
+          item.isUpgrade && nArry.push(obj);
         });
       }
       this.installedApps = iArry;
@@ -891,46 +1325,60 @@
       this.hasNewVersionApp = nArry;
     },
     //鍗歌浇绠楁硶
-    unLoadSdk (sdk) {
+    unLoadSdk(sdk) {
       let _this = this;
-      this.$confirm('纭畾瑕佸嵏杞借绠楁硶鍚�?', '鎻愮ず').then(() => {
-        sdk.unloadLoading = true;
-        removeSdk({ sdkId: sdk.id }).then(res => {
-          if (res && res.success) {
-            sdk.unloadLoading = false;
-            _this.getAllSdk();
-            window.parent.postMessage({
-              msg: "AppUpdate"
-            }, '*')
-          }
-        }).catch(e => {
-          console.log(e);
-          sdk.unloadLoading = false;
+      this.$confirm("纭畾瑕佸嵏杞借绠楁硶鍚�?", "鎻愮ず")
+        .then(() => {
+          sdk.unloadLoading = true;
+          removeSdk({ sdkId: sdk.id })
+            .then((res) => {
+              if (res && res.success) {
+                sdk.unloadLoading = false;
+                _this.getAllSdk();
+                window.parent.postMessage(
+                  {
+                    msg: "AppUpdate",
+                  },
+                  "*"
+                );
+              }
+            })
+            .catch((e) => {
+              console.log(e);
+              sdk.unloadLoading = false;
+            });
         })
-      }).catch(e => {
-        console.log(e)
-      })
+        .catch((e) => {
+          console.log(e);
+        });
     },
     //鍗歌浇搴旂敤
-    unLoad (app) {
+    unLoad(app) {
       let _this = this;
-      this.$confirm('纭畾瑕佸嵏杞借搴旂敤鍚�?', '鎻愮ず').then(() => {
-        app.unloadLoading = true;
-        removeApp({ appId: app.id }).then(res => {
-          if (res && res.success) {
-            app.unloadLoading = false;
-            _this.getAllApps();
-            window.parent.postMessage({
-              msg: "AppUpdate"
-            }, '*')
-          }
-        }).catch(e => {
-          console.log(e);
-          app.unloadLoading = false;
+      this.$confirm("纭畾瑕佸嵏杞借搴旂敤鍚�?", "鎻愮ず")
+        .then(() => {
+          app.unloadLoading = true;
+          removeApp({ appId: app.id })
+            .then((res) => {
+              if (res && res.success) {
+                app.unloadLoading = false;
+                _this.getAllApps();
+                window.parent.postMessage(
+                  {
+                    msg: "AppUpdate",
+                  },
+                  "*"
+                );
+              }
+            })
+            .catch((e) => {
+              console.log(e);
+              app.unloadLoading = false;
+            });
         })
-      }).catch(e => {
-        console.log(e)
-      })
+        .catch((e) => {
+          console.log(e);
+        });
     },
     // actSdk (id) {
     //   this.actSdkId = id;
@@ -939,124 +1387,147 @@
     //   this.activeCode = '';
     //   this.activedSdkOrApp = this.newActInfo()
     // },
-    actSdkOrApp (id, type = 'sdk') {
+    actSdkOrApp(id, type = "sdk") {
       this.actType = type;
       this.actId = id;
       this.actDrawerShow = true;
       this.actStep = 0;
-      this.activeCode = '';
-      this.activedSdkOrApp = this.newActInfo()
+      this.activeCode = "";
+      this.activedSdkOrApp = this.newActInfo();
     },
-    newActInfo () {
+    newActInfo() {
       return {
-        activateCode: '',
-        productName: '',
-        setting: '',
-        expireTime: '',
-        licence: '',
-        devIds: ''
-      }
+        activateCode: "",
+        productName: "",
+        setting: "",
+        expireTime: "",
+        licence: "",
+        devIds: "",
+      };
     },
-    getUnActivedList () {
-      getUnActivedSdk().then(res => {
+    getUnActivedList() {
+      getUnActivedSdk().then((res) => {
         if (res.code == 200) {
           this.unActivedSDKList = res.data;
         }
-      })
-
+      });
     },
-    getUnActivedAppList () {
-      getUnActivedApp().then(res => {
+    getUnActivedAppList() {
+      getUnActivedApp().then((res) => {
         if (res.code == 200) {
           this.unActivedAppList = res.data;
         }
       });
     },
-    actived () {
+    actived() {
       let _this = this;
-      if (this.actType == 'sdk') {
+      if (this.actType == "sdk") {
         //婵�娲荤畻娉�
-        actPageAlg(this.actId, this.activeCode).then(res => {
-          if (res.data.isSuccess) {
-            _this.activedSdkOrApp = res.data.successMsg;
-            _this.actStep++;
-            _this.getUnActivedList();
-            _this.getAllSdk();
-          } else {
-            _this.$notify({
-              type: 'error',
-              message: res.data.failMsg.failMsg
-            });
-          }
-        }).catch(e => {
-          console.log(e)
-        });
-      } else if (this.actType == 'app') {
+        actPageAlg(this.actId, this.activeCode)
+          .then((res) => {
+            if (res.data.isSuccess) {
+              _this.activedSdkOrApp = res.data.successMsg;
+              _this.actStep++;
+              _this.getUnActivedList();
+              _this.getAllSdk();
+            } else {
+              _this.$notify({
+                type: "error",
+                message: res.data.failMsg.failMsg,
+              });
+            }
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      } else if (this.actType == "app") {
         //婵�娲诲簲鐢�
-        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.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);
+          });
       }
     },
-    getCodeDetail () { },
-    checkMyAlgorith () {
+    getCodeDetail() {},
+    checkMyAlgorith() {
       this.actDrawerShow = false;
       this.activeName = "myAlgorithm";
     },
-    onFileUpload (file) {
+    onFileUpload(file) {
       //this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪畨瑁�</span>`;
       this.patchFile = { ...file };
       this.fileAdded = true;
       const h = this.$createElement;
       //涓婁紶瀹屾垚鑾峰彇瀹夎淇℃伅
       let _this = this;
-      getInstallInfo(file).then(res => {
-        _this.installFile = file;
-        if (res.success) {
-          _this.installDialogVisible = true;
-          if (res.data.apps.length > 0) {
-            _this.installAppPackage = {
-              appId: res.data.apps[0].appId,
-              version: res.data.apps[0].version,
-              productName: res.data.productName,
-              installContent: res.data.apps[0].installContent
+      getInstallInfo(file)
+        .then((res) => {
+          _this.installFile = file;
+          if (res.success) {
+            _this.installDialogVisible = true;
+            if (res.data.apps.length > 0) {
+              _this.installAppPackage = {
+                appId: res.data.apps[0].appId,
+                version: res.data.apps[0].version,
+                productName: res.data.productName,
+                installContent: res.data.apps[0].installContent,
+              };
+            }
+            if (res.data.sdks.length > 0) {
+              _this.installSdkPackage = {
+                appId: res.data.sdks[0].sdkId,
+                version: res.data.sdks[0].version,
+                productName: res.data.productName,
+                installContent: res.data.sdks[0].installContent,
+              };
             }
           }
-          if (res.data.sdks.length > 0) {
-            _this.installSdkPackage = {
-              appId: res.data.sdks[0].sdkId,
-              version: res.data.sdks[0].version,
-              productName: res.data.productName,
-              installContent: res.data.sdks[0].installContent
-            }
-          }
-        }
-      }).catch(e => {
-        this.$message({
-          type: 'error',
-          message: e.data
+        })
+        .catch((e) => {
+          this.$message({
+            type: "error",
+            message: e.data,
+          });
         });
+    },
+    unload() {
+      this.$confirm("纭畾瑕佸嵏杞借绠楁硶涔堬紵", "鎻愮ず", {
+        confirmButtonText: "纭畾",
+        cancelButtonText: "鍙栨秷",
+        type: "warning",
       })
-
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "鍗歌浇鎴愬姛!",
+          });
+        })
+        .catch(() => {
+          // this.$message({
+          //   type: 'info',
+          //   message: '宸插彇娑堝嵏杞�'
+          // });
+        });
     },
 
-    onFileAdded (f) {
+    onFileAdded(f) {
       this.patchUpdateStatus = "";
     },
 
-    async getAllSdk () {
+    async getAllSdk() {
       let installedList = [];
       let unInstalledList = [];
       let hasNewVersionList = [];
@@ -1064,8 +1535,11 @@
       if (res && res.success) {
         this.sdkUpgreading = false;
 
-        res.data.forEach(item => {
-          let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
+        res.data.forEach((item) => {
+          let obj = Object.assign(
+            { unloadLoading: false, upgradeLoading: false },
+            item
+          );
           if (obj.progressMsg !== "" && obj.progressMsg !== "宸插畨瑁�") {
             obj.upgradeLoading = true;
 
@@ -1073,8 +1547,7 @@
           }
 
           //绠楁硶杞欢 宸插畨瑁呭叾涓寘鍚緟鍗囩骇 鏈畨瑁�
-          item.installed ? installedList.push(obj) : unInstalledList.push(obj)
-
+          item.installed ? installedList.push(obj) : unInstalledList.push(obj);
         });
       }
       this.installedList = installedList;
@@ -1082,13 +1555,13 @@
       this.hasNewVersionSdk = hasNewVersionList;
     },
 
-    donwload (item) {
+    donwload(item) {
       item.upgradeLoading = true;
       //this.downloading = true;
       this.downloadItem = item.id;
 
       downloadSdk({ path: item.id })
-        .then(rsp => {
+        .then((rsp) => {
           // this.$notify({
           //   type: "success",
           //   message: "绠楁硶宸插畨瑁�"
@@ -1097,10 +1570,10 @@
           //this.downloading = false;
           this.downloadItem = "";
         })
-        .catch(err => {
+        .catch((err) => {
           this.$notify({
             type: "warning",
-            message: err.data
+            message: err.data,
           });
           item.upgradeLoading = false;
           //this.downloading = false;
@@ -1109,14 +1582,12 @@
       // 寮�鍚嚜鍔ㄥ埛鏂�
       this.sdkUpgreading = true;
     },
-    inputBlur (item) {
+    inputBlur(item) {
       // console.log(item, '淇敼鍚嶇О')
       this.$set(item, "isEdit", false);
     },
-    handleTabClick () {
-
-    },
-    autoRefreshAppAndSdkState () {
+    handleTabClick() {},
+    autoRefreshAppAndSdkState() {
       // 鍏抽棴鍚庨��鍑�
       if (!this.autoRefresh) {
         return;
@@ -1130,12 +1601,12 @@
         this.getAllSdk();
       }
 
-      let _this = this
+      let _this = this;
       setTimeout(() => {
         _this.autoRefreshAppAndSdkState();
-      }, 500)
-    }
-  }
+      }, 500);
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -1172,13 +1643,211 @@
     height: 100%;
   }
   .product-detail-dialog {
+    .dialog-title{
+      font-size: 14px;
+    }
+    .el-dialog {
+      width: 60%;
+      min-width: 920px;
+      position: relative;
+    }
     .el-dialog__header {
       text-align: center;
+      padding: 15px;
     }
+    .el-dialog__body {
+      background-color: rgba(222, 225, 230, 1);
+      padding: 10px 5px;
+      .button-group{
+        position: absolute;
+            top: 9px;
+            left:6px;
+                left: 10px;
+
+        button{
+          // margin-right: 6px;
+          background-color: #ecf5ff;
+          font-size: 18px;
+        line-height: 12px;  
+        }
+      }
+    }
+
     .dialog-content {
       .box-top {
+        height: 380px;
+        .top-left {
+          float: left;
+          width: 55%;
+          background-color: rgba(253, 253, 253, 1);
+          margin: 0 0.5%;
+          height: 380px;
+          .banner {
+        text-align: center;
+        margin-top: 30px;
+           video {
+
+            margin: 20px auto;
+            width: 443px;
+          height: 277px;
+            // background: aquamarine;
+          }
+          }
+        }
+        .top-right {
+          float: left;
+          width: 43%;
+          margin: 0 0.5%;
+          // background-color: lightgoldenrodyellow;
+          height: 380px;
+          background-color: rgba(253, 253, 253, 1);
+          position: relative;
+          .summary {
+            height: 140px;
+            margin: 5px;
+            .icon {
+              margin: 0 5px;
+              margin-top: 5px;
+              float: left;
+              .baseImg{
+                max-width: 128px;
+                max-height: 128px;
+              }
+            }
+            .right-desc {
+              float: left;
+              position: absolute;
+              left: 150px;
+              .name {
+                font-size: 30px;
+                // font-weight: bold;
+                margin-bottom: 5px;
+              }
+              .tags {
+                margin-bottom: 10px;
+                .el-tag {
+                  margin-right: 10px;
+                }
+              }
+            }
+          }
+          .product-intruduction {
+            height: 230px;
+            // background-color: lightgrey;
+            .part-title {
+              display: block;
+              line-height: 35px;
+              font-size: 16px;
+              margin-left: 24px;
+              // height: 30px;
+              border-bottom: 3px solid #3d68e1;
+              width: fit-content;
+              margin-bottom: 8px;
+              height: 35px;
+            }
+            .text {
+              padding: 10px 15px;
+              .single-desc {
+                margin-bottom: 10px;
+              }
+            }
+          }
+        }
       }
-      .box-bot {
+      .box-bottom {
+        margin-top: 10px;
+        height: 260px;
+        .bot-left {
+          width: 49%;
+          height: 260px;
+          background-color: rgba(253, 253, 253, 1);
+          margin: 0 0.5%;
+          float: left;
+          // background-color: lightblue;
+          .part-title {
+            display: block;
+            line-height: 35px;
+            font-size: 16px;
+            margin-left: 24px;
+            // height: 30px;
+            border-bottom: 3px solid #3d68e1;
+            width: fit-content;
+            margin-bottom: 8px;
+            height: 35px;
+          }
+          .list-zone {
+            overflow: auto;
+            height: 225px;
+            padding: 0 8px;
+            .list-item {
+              .desc {
+                background-color: rgba(242, 242, 242, 1.3);
+              }
+            }
+          }
+        }
+        .bot-right {
+          height: 260px;
+          float: left;
+          background-color: rgba(253, 253, 253, 1);
+          width: 49%;
+          // background-color: lightgoldenrodyellow;
+          margin: 0 0.5%;
+
+          .part-title {
+            display: block;
+            line-height: 35px;
+            font-size: 16px;
+            margin-left: 24px;
+            // height: 30px;
+            border-bottom: 3px solid #3d68e1;
+            width: fit-content;
+            margin-bottom: 5px;
+            height: 35px;
+          }
+          .item-zone {
+            overflow: auto;
+            height: 225px;
+            padding: 0 10px;
+            .item {
+              height: 165px;
+              width: 130px;
+              float: left;
+              // text-align: center;
+              border-radius: 10px;
+              box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.0666666666666667);
+              position: relative;
+
+              .el-tag {
+                float: right;
+                margin: 8px;
+              }
+              .icon {
+                // width: 100%;
+                // height: 68px;
+                // width: 68px;
+                position: absolute;
+                // margin: 0 auto;
+                margin: 0 auto;
+                top: 21%;
+                left: 26%;
+                img {
+                  // display: block;
+                  max-width: 60px;
+                  max-height: 60px;
+                }
+                .icon-name {
+                  text-align: center;
+                }
+              }
+              .look-button {
+                position: absolute;
+                left: 28%;
+                top: 75%;
+              }
+            }
+          }
+        }
       }
     }
   }
@@ -1219,7 +1888,7 @@
 .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;
@@ -1252,7 +1921,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 {
@@ -1415,16 +2084,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%;

--
Gitblit v1.8.0