From fbf765d5c363f4ccec60fe9d73875099ffe544ff Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 17 十月 2020 10:26:56 +0800
Subject: [PATCH] 应用中心应用添加升级交互

---
 src/pages/searchForCluster/index/mixins.ts        |   28 +
 src/pages/ai/index/App.vue                        |  283 +++++++----
 src/pages/searchForCluster/index/App.vue          |  142 +++++
 src/pages/searchForCluster/index/Searching.vue    |  954 ++++++++++++++++++++++++++++++++++++++
 public/images/settings/cloud.png                  |    0 
 src/pages/desktop/index/components/ToolsEntry.vue |    1 
 src/pages/searchForCluster/index/main.ts          |   33 +
 src/pages/settings/components/CloudNode.vue       |    6 
 src/pages/desktop/index/App.vue                   |   38 +
 9 files changed, 1,376 insertions(+), 109 deletions(-)

diff --git a/public/images/settings/cloud.png b/public/images/settings/cloud.png
index 2679558..25f48c8 100644
--- a/public/images/settings/cloud.png
+++ b/public/images/settings/cloud.png
Binary files differ
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 653f3cc..aa0dbb2 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -23,25 +23,35 @@
                 <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="item.id">
+                    <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+item.id">
                       <div class="list-choose-item-left">
-                        <div class="mask flex-center">
-                          <div class="info-onmask">
-                            <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                            <div>鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
-                          </div>
-                          <el-button type="primary" class="bot-btn" @click="donwload(item)">鍗囩骇</el-button>
-                        </div>
-
                         <div class="list-complete-item-handle">
-                          <div class="svg-wrap">
+                          <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>
+                              <div class="mask-btn">
+                                <el-button
+                                  type="warning"
+                                  class="bot-btn"
+                                  size="small"
+                                  @click="donwload(item)"
+                                >鍗囩骇</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}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -66,7 +76,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -105,7 +115,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -123,17 +133,33 @@
                         <div class="list-complete-item-handle">
                           <div
                             class="svg-wrap"
-                            v-loading="item.unloadLoading"
-                            element-loading-text="鍗歌浇涓�"
+                            :class="{willUpGrade:item.isUpgrade}"
+                            v-loading="item.unloadLoading||item.upgradeLoading"
+                            :element-loading-text="item.unloadLoading?'鍗歌浇涓�':'鍗囩骇涓�'"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
-                            <div class="mask" v-if="!item.isDefault">
-                              <el-button
-                                v-if="!item.isDefault"
-                                @click="unLoad(item)"
-                                type="primary"
-                                class="bot-btn"
-                              >鍗歌浇</el-button>
+                            <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
+                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">
+                              <div class="info-onmask">
+                                <div>褰撳墠鐗堟湰:{{item.version}}</div>
+                                <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+                              </div>
+                              <div class="mask-btn">
+                                <el-button
+                                  v-if="!item.isDefault"
+                                  @click="unLoad(item)"
+                                  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"
@@ -141,7 +167,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -164,8 +190,8 @@
                         <div class="list-complete-item-handle uninstall">
                           <div
                             class="svg-wrap"
-                            v-loading="item.installLoading"
-                            element-loading-text="瀹夎涓�"
+                            v-loading="item.installLoading||item.upgradeLoading"
+                            :element-loading-text="item.installLoading?'瀹夎涓�':'鍗囩骇涓�'"
                             element-loading-background="rgba(0,0,0,.8)"
                           >
                             <div class="mask">
@@ -181,7 +207,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -242,7 +268,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -279,7 +305,7 @@
                               :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"
                               alt
                             />
-                            <img v-else class="baseImg" :src="item.icon" alt="">
+                            <img v-else class="baseImg" :src="item.icon" alt />
                           </div>
                           <div class="alg-name">
                             <div style="padding:0px 10px 0px 10px;">
@@ -442,24 +468,24 @@
     FileUploader
   },
   computed: {
-    notInstalledList() {
+    notInstalledList () {
       return this.TaskMange.list1.filter(sdk => {
         return sdk.installed === false;
       });
     },
-    installedList() {
+    installedList () {
       return this.TaskMange.list1.filter(sdk => {
         return sdk.installed === true;
       });
     },
-    ungradeList() {
+    ungradeList () {
       // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀�
-      return [];
+      //return [];
       return this.TaskMange.list1.filter(sdk => {
         return sdk.isUpgrade === true;
       });
     },
-    isAdmin() {
+    isAdmin () {
       if (
         sessionStorage.getItem("userInfo") &&
         sessionStorage.getItem("userInfo") !== ""
@@ -471,7 +497,7 @@
       return false;
     },
   },
-  data() {
+  data () {
     return {
       TaskMange: new TaskManage,
       VideoManageData: new VideoManageData,
@@ -565,7 +591,7 @@
   },
   watch: {
     list2: {
-      handler(newVal, oldVal) {
+      handler (newVal, oldVal) {
         // window.console.log(newVal, oldVal, '鐩戝惉list2')
         if (newVal !== oldVal) {
           // window.console.log(newVal, '鐩戝惉list2')
@@ -586,7 +612,7 @@
       }
     }
   },
-  mounted() {
+  mounted () {
     this.getAllApps();
     this.findAllSdk();
     this.findByType();
@@ -599,10 +625,11 @@
     this.VideoManageData.init();
   },
   methods: {
-    isShow(authority) {
+    isShow (authority) {
       return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
     },
-    offlineInstall() {
+    //绂荤嚎瀹夎
+    offlineInstall () {
       this.installDialogVisible = false;
       this.isInstall = true;
       //瀹夎
@@ -617,8 +644,11 @@
           setTimeout(() => {
             this.findAllSdk();
             this.getAllApps();
+            window.parent.postMessage({
+              msg: "AppUpdate"
+            }, '*')
             this.activeName = 'myAlgorithm';
-          }, 3000)
+          }, 3000);
         }
 
       }).catch(e => {
@@ -630,22 +660,46 @@
         });
       })
     },
-    downloadApp(app) {
-      app.installLoading = true;
+    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(() => {
-            app.installLoading = false;
+            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() {
+    getAllApps () {
       let _this = this;
       _this.installedApps = [];
       _this.storeApps = [];
@@ -654,10 +708,10 @@
           //_this.storeApps = res.data;
           res.data.forEach(item => {
             if (item.installed) {
-              let obj = Object.assign({ unloadLoading: false }, item)
+              let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
               _this.installedApps.push(obj)
             } else {
-              let obj = Object.assign({ installLoading: false }, item)
+              let obj = Object.assign({ installLoading: false, upgradeLoading: false }, item)
               _this.storeApps.push(obj)
             }
           });
@@ -667,7 +721,7 @@
       })
     },
     //鍗歌浇搴旂敤
-    unLoad(app) {
+    unLoad (app) {
       app.unloadLoading = true;
       let _this = this;
       removeApp({ appId: app.id }).then(res => {
@@ -681,6 +735,9 @@
             }, '*')
           }, 3000);
         }
+      }).catch(e => {
+        console.log(e);
+        app.unloadLoading = false;
       })
 
     },
@@ -691,7 +748,7 @@
     //   this.activeCode = '';
     //   this.activedSdkOrApp = this.newActInfo()
     // },
-    actSdkOrApp(id, type = 'sdk') {
+    actSdkOrApp (id, type = 'sdk') {
       this.actType = type;
       this.actId = id;
       this.actDrawerShow = true;
@@ -699,7 +756,7 @@
       this.activeCode = '';
       this.activedSdkOrApp = this.newActInfo()
     },
-    newActInfo() {
+    newActInfo () {
       return {
         activateCode: '',
         productName: '',
@@ -709,7 +766,7 @@
         devIds: ''
       }
     },
-    getUnActivedList() {
+    getUnActivedList () {
       getUnActivedSdk().then(res => {
         if (res.code == 200) {
           this.unActivedSDKList = res.data;
@@ -717,7 +774,7 @@
       })
 
     },
-    getUnActivedAppList() {
+    getUnActivedAppList () {
       getUnActivedApp().then(res => {
         if (res.code == 200) {
           this.unActivedAppList = res.data;
@@ -725,10 +782,10 @@
       });
     },
 
-    installFormat(percentage) {
+    installFormat (percentage) {
       return percentage === 100 ? '瀹夎鎴愬姛' : `${percentage}%`;
     },
-    actived() {
+    actived () {
       let _this = this;
       if (this.actType == 'sdk') {
         //婵�娲荤畻娉�
@@ -766,12 +823,12 @@
         });
       }
     },
-    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;
@@ -883,12 +940,12 @@
 
     },
 
-    onFileAdded(f) {
+    onFileAdded (f) {
       ;
       this.patchUpdateStatus = "";
     },
     // 鏍¢獙杈撳叆鐨勬槸鍚︽槸鏁板瓧
-    valiNum(value) {
+    valiNum (value) {
       if (value) {
         let re = /[^\-?\d.]*$/;
         if (!re.test(value)) {
@@ -905,7 +962,7 @@
       }
     },
     // 宸﹁竟鎷栧姩妯″潡寰楁嫋鍔ㄧ粨鏉熷悗鐨勮Е鍙戝嚱鏁�
-    endLeft(env) {
+    endLeft (env) {
       this.dragging = false;
       let taskId = env.to.id;
       let sdkId = this.TaskMange.list1[env.oldIndex].id;
@@ -946,24 +1003,24 @@
       this.addTaskSdk(json);
     },
     // 鍙宠竟鎷栧姩妯″潡寮�濮嬫嫋鍔ㄨЕ鍙戝嚱鏁�
-    startRight(env) {
+    startRight (env) {
       this.$nextTick(() => {
         this.dragging = true;
       });
       // window.window.console.log(env, "right start");
     },
     // 鍙宠竟鎷栧姩妯″潡鎷栧姩缁撴潫瑙﹀彂鍑芥暟
-    endRight(env) {
+    endRight (env) {
       // window.window.console.log(env, "right end");
     },
-    clickSet(data) {
+    clickSet (data) {
       if (data.isSetting) {
         data.isSetting = false;
       } else {
         data.isSetting = true;
       }
     },
-    clickDel(data, Index) {
+    clickDel (data, Index) {
       this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛屾浠诲姟鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵", {
         center: true,
         showConfirmButton: true,
@@ -976,7 +1033,7 @@
         })
         .catch(err => { });
     },
-    clickSetAlgo(row, data) {
+    clickSetAlgo (row, data) {
       // window.console.log(row, data, "缂栬緫浠诲姟涓煇涓�涓畻娉�");
       if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) {
         row.isShowSetAlgo = false;
@@ -1042,7 +1099,7 @@
         // });
       }
     },
-    async getRulesByTaskSdk(taskId, sdkId) {
+    async getRulesByTaskSdk (taskId, sdkId) {
       let res = await getRulesByTaskSdk({
         taskId: taskId,
         sdkId: sdkId
@@ -1078,7 +1135,7 @@
         this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList));
       }
     },
-    async findAllSdk() {
+    async findAllSdk () {
       let res = await findAllSdk();
       if (res && res.success) {
         this.TaskMange.list1 = res.data.map((i, index) => {
@@ -1095,7 +1152,7 @@
         });
       }
     },
-    addTask() {
+    addTask () {
       let obj = {
         id: "",
         name: "浠诲姟" + this.TaskMange.list2.length,
@@ -1111,7 +1168,7 @@
         taskArea.scrollTop = taskArea.scrollHeight;
       });
     },
-    async findAll() {
+    async findAll () {
       let res = await findAll();
       if (res && res.success) {
         if (res.data && res.data.length !== 0) {
@@ -1148,7 +1205,7 @@
         }
       }
     },
-    clickDelSdk(task, sdk) {
+    clickDelSdk (task, sdk) {
       this.$confirm(
         "鎻愮ず锛氬垹闄ゅ悗锛屾绠楁硶鍦ㄦ湰浠诲姟涓Щ闄わ紝鍚屾椂鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵",
         {
@@ -1164,7 +1221,7 @@
         })
         .catch(err => { });
     },
-    selectChange(event, type, data) {
+    selectChange (event, type, data) {
       if (type === "options1") {
         // window.window.console.log(type, data, "閫夋嫨涓嬫媺妗�");
         data.options1.map(i => {
@@ -1175,7 +1232,7 @@
       }
     },
     // 鍒犻櫎浠诲姟绠楁硶
-    async delTaskSdk(task, sdk) {
+    async delTaskSdk (task, sdk) {
       let json = {
         taskId: task.id,
         sdkId: sdk.id
@@ -1195,7 +1252,7 @@
       }
     },
     // 鍒犻櫎浠诲姟
-    async deleteTask(data, index) {
+    async deleteTask (data, index) {
       // window.console.log(data, "deleteTask");
       let res = await deleteTask({ taskId: data.id });
       // this.$toast({
@@ -1212,7 +1269,7 @@
       }
     },
     // 鏇存柊浠诲姟鐘舵��
-    async updateTaskStatus(data) {
+    async updateTaskStatus (data) {
       // window.console.log(data, '鏇存柊浠诲姟鐘舵��')
       let json = {
         taskId: data.id,
@@ -1230,7 +1287,7 @@
       });
     },
     // 鏇存柊浠诲姟鍚嶇О
-    async updateTaskName(data) {
+    async updateTaskName (data) {
       let json = {
         taskId: data.id,
         taskName: data.name
@@ -1250,7 +1307,7 @@
       }
     },
     // 鑾峰彇搴曞簱鏁版嵁
-    async getBaseList() {
+    async getBaseList () {
       // let res = await getTagList();
       // if (res && res.success) {
       //   let filter = res.data.filter(i => {
@@ -1279,7 +1336,7 @@
       ];
     },
     // 鑾峰彇绠楁硶鍙傛暟
-    async getSdkArgs(data) {
+    async getSdkArgs (data) {
       let res = await getSdkArgs({
         sdkId: data.id,
         scope: "TASKRULE"
@@ -1301,7 +1358,7 @@
       }
     },
     // 鏌ヨ瀛楀吀
-    async findByType() {
+    async findByType () {
       let res = await findByType();
       if (res && res.success) {
         let list = res.data.RULECOMPUTEBETWEEN.map(i => {
@@ -1314,17 +1371,17 @@
       }
     },
     // 绠楁硶閰嶇疆锛屾柊寤�
-    add() {
+    add () {
       this.TaskMange.argsList.push(
         JSON.parse(JSON.stringify(this.TaskMange.baseObject))
       );
     },
     // 绠楁硶閰嶇疆 鍒犻櫎
-    delRule(index) {
+    delRule (index) {
       this.TaskMange.argsList.splice(index, 1);
     },
     // 绠楁硶鍙傛暟淇濆瓨
-    async save() {
+    async save () {
       let list = this.TaskMange.argsList.map(i => {
         let obj = {};
         obj.id = i.id;
@@ -1357,7 +1414,7 @@
         }
       }
     },
-    getDefault() {
+    getDefault () {
       this.deleteTaskSdkRule(
         this.TaskMange.currentTaskId,
         this.TaskMange.currentAlgoId
@@ -1368,7 +1425,7 @@
         );
       });
     },
-    async deleteTaskSdkRule(taskId, sdkId) {
+    async deleteTaskSdkRule (taskId, sdkId) {
       let json = {
         taskId: taskId,
         sdkId: sdkId
@@ -1388,7 +1445,7 @@
       }
     },
     // 缁欎换鍔℃坊鍔犵畻娉�
-    async addTaskSdk(data) {
+    async addTaskSdk (data) {
       let res = await addTaskSdk(data);
       if (res && res.success) {
         // window.console.log(res, 'res')
@@ -1396,7 +1453,7 @@
       }
     },
     // 鏂版坊鍔犱换鍔�
-    async addTaskAsync(name) {
+    async addTaskAsync (name) {
       let res = await addTask({ taskname: name });
       // this.$toast({
       //   type: res.success ? "success" : "error",
@@ -1412,7 +1469,7 @@
         this.findAll();
       }
     },
-    cancle(row) {
+    cancle (row) {
       if (row.isShowSetAlgo) {
         row.isShowSetAlgo = false;
       }
@@ -1422,12 +1479,12 @@
         this.$set(i, "isSelect", false);
       });
     },
-    cancleTask(row) {
+    cancleTask (row) {
       if (row.isSetting) {
         row.isSetting = false;
       }
     },
-    commandAlgo(command, row, item) {
+    commandAlgo (command, row, item) {
       if (command === 1) {
         // console.log('璁剧疆绠楁硶')
         this.clickSetAlgo(row, item);
@@ -1437,13 +1494,13 @@
         this.clickDelSdk(row, item);
       }
     },
-    commandTask(command, row) {
+    commandTask (command, row) {
       if (command === 1) {
         //缂栬緫浠诲姟
         this.clickSet(row);
       }
     },
-    donwload(item) {
+    donwload (item) {
       this.downloading = true;
       this.downloadItem = item.id;
 
@@ -1467,15 +1524,15 @@
           this.downloadItem = "";
         });
     },
-    commandAlgLib(item) {
+    commandAlgLib (item) {
       this.$set(item, "isEdit", true);
     },
-    inputBlur(item) {
+    inputBlur (item) {
       // console.log(item, '淇敼鍚嶇О')
       this.$set(item, "isEdit", false);
     },
 
-    cleanTemplateForm() {
+    cleanTemplateForm () {
       this.appSceneForm.name = "";
       this.appSceneForm.desc = "";
       this.appSceneForm.rules = "";
@@ -1483,10 +1540,10 @@
 
       this.$refs.ruleEditor.cleanRule();
     },
-    handleTabClick() {
+    handleTabClick () {
 
     },
-    handleCreateScene() {
+    handleCreateScene () {
       this.sceneDialogVisible = true;
       this.dialogTitle = '鍒涘缓鍦烘櫙妯℃澘';
 
@@ -1499,10 +1556,10 @@
         this.cleanTemplateForm();
       });
     },
-    handleDialogClose() {
+    handleDialogClose () {
       this.sceneDialogVisible = false;
     },
-    handleEditScene(item) {
+    handleEditScene (item) {
       this.appSceneForm.name = item.name;
       this.appSceneForm.desc = item.desc;
 
@@ -1594,7 +1651,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;
@@ -1619,7 +1676,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 {
@@ -1707,6 +1764,13 @@
             margin: auto;
             margin-bottom: 30px;
             max-width: 200px;
+            .mask {
+              width: 100%;
+
+              .el-button + .el-button {
+                margin-left: 0 !important;
+              }
+            }
           }
         }
       }
@@ -1746,6 +1810,9 @@
               z-index: 1;
               border-radius: 3px;
               display: none;
+              .el-button + .el-button {
+                margin-left: 0 !important;
+              }
               .tool {
                 position: absolute;
                 top: 49%;
@@ -1941,16 +2008,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%;
@@ -2026,6 +2093,10 @@
       display: none;
       .info-onmask {
         color: #8ecaff;
+      }
+      .mask-btn {
+        width: 100%;
+        display: flex;
       }
       i {
         color: #fff;
@@ -2112,6 +2183,8 @@
       .mask {
         display: flex;
         align-items: flex-end;
+        flex-wrap: wrap;
+        justify-content: center;
         top: 0;
         .bot-btn {
           flex: 1;
@@ -2295,6 +2368,16 @@
           max-height: 106px;
         }
       }
+      .willUpGrade {
+        .iconupdate {
+          color: #01e667;
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          font-weight: 550;
+          font-size: 26px;
+        }
+      }
       &.uninstall {
         .svg-wrap {
           background-color: #ddd;
diff --git a/src/pages/desktop/index/App.vue b/src/pages/desktop/index/App.vue
index 6b1a851..9b48ad9 100644
--- a/src/pages/desktop/index/App.vue
+++ b/src/pages/desktop/index/App.vue
@@ -27,13 +27,13 @@
   components: {
     Desktop, NotificationCenter, NoticeTip, Tools, ToolsEntry
   },
-  data() {
+  data () {
     return {
       buttonAuthority: sessionStorage.getItem('buttonAuthoritys') || []
     }
   },
   computed: {
-    isAdmin() {
+    isAdmin () {
       if (
         sessionStorage.getItem('userInfo') &&
         sessionStorage.getItem('userInfo') !== ''
@@ -46,7 +46,7 @@
       return false
     }
   },
-  mounted() {
+  mounted () {
     document.getElementById('app').style.backgroundImage = process.env.VUE_APP_MAIN_URL;
     this.showApps();
 
@@ -79,13 +79,37 @@
     });
   },
   methods: {
-    showApps() {
+    showApps () {
       let _that = this;
 
       getApps().then(rsp => {
         if (rsp && rsp.success) {
           _that.$store.state.desktop.docks = [];
           let installedApps = [];
+          let testObj = {
+            id: 'tjcxjq',
+            create_by: 'test',
+            create_time: '',
+            height: 675,
+            icon: '../../images/app-mid/search.png',
+            installed: true,
+            isDelete: 0,
+            isUpgrade: false,
+            title: '缁熻鏌ヨ(闆嗙兢)',
+            name: '缁熻鏌ヨ(闆嗙兢)',
+            remoteVersion: '',
+            type: '2',
+            update_by: '',
+            update_time: '',
+            url: "/view/searchForCluster/",
+            version: '1.0.0',
+            width: 1344,
+            isDefault: false
+          };
+   
+          console.log(rsp.data);
+          rsp.data.push(testObj);
+
           rsp.data.forEach(function (item) {
             if (item.installed) {
               let temp = {
@@ -133,7 +157,7 @@
     addWeather: function (weather) {
       this.$store.commit('desktop/addWeather', weather);
     },
-    screenShot(dock) {
+    screenShot (dock) {
       //鎵惧埌褰撳墠鐨刬frame
       let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(dock.url) >= 0);
       //淇濆瓨褰撳墠搴旂敤蹇収
@@ -179,12 +203,12 @@
   width: 100%;
   height: 100%;
   background-size: 100% 100%;
-  background-image: url("/images/desktop/background.png");
+  background-image: url('/images/desktop/background.png');
   background-attachment: fixed;
 }
 
 .clearFix:after {
-  content: "";
+  content: '';
   display: block;
   height: 0;
   clear: both;
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index 8ffbfc7..c622e64 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -61,6 +61,7 @@
   },
   methods: {
     dockClick(dock) {
+      debugger
       if (dock.type === '1') {
         window.open(dock.url);
       } else if (dock.type === '2' && !dock.isOpen) {
diff --git a/src/pages/searchForCluster/index/App.vue b/src/pages/searchForCluster/index/App.vue
new file mode 100644
index 0000000..44cca51
--- /dev/null
+++ b/src/pages/searchForCluster/index/App.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="column">
+    <div class="column-left">
+      <div class="resize-bar"></div>
+      <div class="resize-line"></div>
+      <div class="resize-save">
+        <left-nav :appName="'Search'" :height="screenHeight - 40"></left-nav>
+      </div>
+    </div>
+    <div class="column-right">
+      <right-side />
+    </div>
+    <card-window></card-window>
+  </div>
+</template>
+
+<script>
+import LeftNav from "@/components/LeftNav";
+// import CameraVideo from "./components/Video.vue";
+import RightSide from "./Searching"
+import CardWindow from "@/components/cardWindow";
+
+export default {
+  name: "SearchPage",
+  components: {
+    LeftNav,
+    RightSide,
+    CardWindow
+  },
+  data() {
+    return {
+      screenHeight: 0,
+    }
+  },
+  created() {
+    // this.parseUrl();
+
+  },
+  mounted() {
+    this.screenHeight = document.documentElement.clientHeight - 20;
+    window.onresize = () => {
+      return (() => {
+        this.screenHeight = document.documentElement.clientHeight - 20;
+      })();
+    };
+
+  },
+  methods: {
+    parseUrl() {
+
+    }
+  }
+};
+</script>
+
+<style lang="scss" >
+.left-tree-box .el-tabs--border-card .el-tabs__header{
+  display: block!important;
+  margin-bottom: 10px;
+}
+.column {
+  overflow: hidden;
+  min-width: 1399px;
+  height: 100%;
+}
+.column-left {
+  background-color: #fff;
+  position: relative;
+  float: left;
+  height: 100vh;
+}
+.column-right {
+  height: 100vh;
+  background-color: #eee;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.heigher-index {
+  position: absolute;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+}
+.resize-save {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  bottom: 0;
+  left: 0;
+  padding: 16px;
+  padding-top: 8px;
+  overflow-x: hidden;
+}
+.resize-bar {
+  width: 310px;
+  height: inherit;
+  resize: horizontal;
+  cursor: ew-resize;
+  opacity: 0;
+  overflow: scroll;
+  max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+  min-width: 33px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-right: 2px solid #efefef;
+  border-left: 1px solid #e0e0e0;
+  pointer-events: none;
+}
+.resize-bar:hover ~ .resize-line,
+.resize-bar:active ~ .resize-line {
+  border-left: 1px dashed skyblue;
+}
+.resize-bar::-webkit-scrollbar {
+  width: 200px;
+  height: inherit;
+}
+
+/* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
+@supports (-moz-user-select: none) {
+  .resize-bar:hover ~ .resize-line,
+  .resize-bar:active ~ .resize-line {
+    border-left: 1px solid #bbb;
+  }
+  .resize-bar:hover ~ .resize-line::after,
+  .resize-bar:active ~ .resize-line::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    bottom: 0;
+    right: -8px;
+    // background: url(./resize.svg);
+    background-size: 100% 100%;
+  }
+}
+</style>
diff --git a/src/pages/searchForCluster/index/Searching.vue b/src/pages/searchForCluster/index/Searching.vue
new file mode 100644
index 0000000..7cd82d6
--- /dev/null
+++ b/src/pages/searchForCluster/index/Searching.vue
@@ -0,0 +1,954 @@
+<template>
+  <div class="searching-box">
+    <div class="searching-right">
+      <div class="searching-right-nav">
+        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;">
+          <el-breadcrumb-item>
+            <span @click="uploadChange()">妫�绱�</span>
+          </el-breadcrumb-item>
+          <el-breadcrumb-item v-if="!VideoPhotoData.uploadType">鍏ㄩ儴</el-breadcrumb-item>
+          <el-breadcrumb-item v-if="VideoPhotoData.uploadType">浠ュ浘鎼滃浘</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="searching-right-content">
+        <div class="top">
+          <el-tooltip content="浠ュ浘鎼滃浘" placement="bottom" popper-class="atooltip">
+            <el-button
+              @click="showUpload"
+              type="primary"
+              icon="el-icon-camera-solid"
+              size="mini"
+              circle
+              :style="VideoPhotoData.uploadDiaplay ? 'margin-right: 20px;' : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'"
+            ></el-button>
+          </el-tooltip>
+          <p class="p-label" style="width:16%">
+            <b>鏍囩锛�</b>
+            <el-select
+              v-model="tagValues"
+              multiple
+              :disabled="isDisabled"
+              collapse-tags
+              size="mini"
+              style="width:calc(100% - 40px);min-width: 120px;"
+              placeholder="璇烽�夋嫨"
+              @change="tagChange"
+            >
+              <el-option
+                v-for="item in VideoPhotoData.tabs"
+                style="font-size:12px"
+                :key="item.key"
+                :label="item.title"
+                :value="item.value"
+                :title="item.title"
+              ></el-option>
+            </el-select>
+          </p>
+          <p class="p-task" style="width:16%">
+            <b>鍦烘櫙锛�</b>
+            <el-select
+              v-model="taskValues"
+              multiple
+              @change="searchingBtn"
+              :disabled="typeDisable"
+              collapse-tags
+              size="mini"
+              style="width:calc(100% - 40px);min-width: 120px;"
+              placeholder="璇烽�夋嫨"
+            >
+              <!-- <el-option
+                v-for="item in VideoPhotoData.tasks"
+                style="font-size:12px"
+                :key="item.taskid+'x'"
+                :label="item.del_flag && item.taskname !=='浜鸿劯娴嬫俯'? item.taskname+'锛堝凡鍒犻櫎锛�' : item.taskname"
+                :value="item.taskid"
+                :title="item.del_flag && item.taskname !=='浜鸿劯娴嬫俯'? item.taskname+'锛堝凡鍒犻櫎锛�' : item.taskname"
+              ></el-option>-->
+              <el-option
+                v-for="item in VideoPhotoData.tasks"
+                style="font-size:12px"
+                :key="item.id+'x'"
+                :value="item.id"
+                :label="item.isDelete ? item.name+'锛堝凡鍒犻櫎锛�' : item.name"
+                :title="item.isDelete ? item.name+'锛堝凡鍒犻櫎锛�' : item.name"
+              ></el-option>
+            </el-select>
+          </p>
+          <p class="p-level" style="width:18%">
+            <b>浜嬩欢绛夌骇锛�</b>
+            <el-select
+              v-model="alarmValues"
+              multiple
+              @change="searchingBtn"
+              :disabled="isDisabled"
+              collapse-tags
+              size="mini"
+              style="width:calc(100% - 64px);min-width: 120px;"
+              placeholder="璇烽�夋嫨"
+            >
+              <el-option
+                v-for="item in VideoPhotoData.dictionary.ALARMLEVEL"
+                :key="item.id"
+                :label="item.name"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </p>
+          <p class="p-date" style="width:19%;vertical-align: top;">
+            <el-date-picker
+              size="mini"
+              v-model="searchTime"
+              @change="searchingBtn"
+              type="datetimerange"
+              start-placeholder="寮�濮嬫棩鏈�"
+              end-placeholder="缁撴潫鏃ユ湡"
+              :default-time="['00:00:00','23:59:59']"
+              style="width:99%;min-width:200px"
+            ></el-date-picker>
+          </p>
+          <p class="p-input" style="width:19%">
+            <el-input
+              placeholder="璇疯緭鍏ュ唴瀹�"
+              prefix-icon="el-icon-search"
+              style="width: calc(100% - 75px);min-width:100px;margin-left:10px;margin-right: 10px;"
+              v-model="VideoPhotoData.inputValue"
+              size="mini"
+            ></el-input>
+            <el-button type="primary" size="mini" @click="searchingBtn">鎼滅储</el-button>
+          </p>
+          <p class="p-clear">
+            <b class="clear-searching" @click="clearSearch">閲嶇疆</b>
+          </p>
+        </div>
+        <div ref="mid" style="height:calc(100% - 50px);">
+          <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
+            <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img>
+          </div>
+          <div
+            id="searchMid"
+            class="mid"
+            :style="{width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'}"
+          >
+            <div class="right-section" ref="scrollContain">
+              <Card
+                v-for="(item, index) in VideoPhotoData.cards"
+                :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
+                :key="index + 'u'"
+                :outHeight="'162px'"
+                :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
+                :data="item"
+                :showType="showType"
+                @detailsClick="getDetails($event, index)"
+                @addToBase="toAdd"
+              ></Card>
+              <div class="foot">
+                <el-pagination
+                  :current-page="VideoPhotoData.page"
+                  @current-change="changePages"
+                  @size-change="sizeChange"
+                  :page-sizes="VideoPhotoData.pageSizeOption"
+                  :page-size="VideoPhotoData.size"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="VideoPhotoData.total"
+                ></el-pagination>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="foot">
+          <el-pagination
+            :current-page="VideoPhotoData.page"
+            @current-change="changePages"
+            @size-change="sizeChange"
+            :page-sizes="VideoPhotoData.pageSizeOption"
+            :page-size="VideoPhotoData.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="VideoPhotoData.total"
+          ></el-pagination>
+        </div>-->
+      </div>
+    </div>
+    <hsc-window-style-metal class="windown-model">
+      <hsc-window
+        v-for="(item, index) in CardList.addBaseList"
+        :closeButton="true"
+        @closebuttonclick="closeWindow(index)"
+        :key="index"
+        @update:height="resizeHeight"
+        @update:width="resizeWidth"
+        style="background:white; height:475px"
+        :left="center.x + index * 10"
+        :top="center.y + index * 10"
+        :resizable="true"
+        positionHint="center"
+        :isScrollable="true"
+        :minWidth="662"
+        :minHeight="479"
+        :maxWidth="10000"
+        :maxHeight="7000"
+        :height="defaultHeight"
+        :width="defaultWidth"
+      >
+        <div class="addToBase">
+          <div class="topLabel">鍔犲叆搴曞簱</div>
+          <div class="items">
+            <div class="lable">
+              <p>榛戝悕鍗� ></p>
+            </div>
+            <div class="baseList">
+              <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
+                <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
+                  <el-checkbox
+                    :label="item.value"
+                    :title="item.title"
+                    :disabled="item.disabled"
+                  >{{item.title}}</el-checkbox>
+                </div>
+              </el-checkbox-group>
+            </div>
+          </div>
+          <div class="items">
+            <div class="lable">
+              <p>鐧藉悕鍗� ></p>
+            </div>
+            <div class="baseList">
+              <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
+                <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
+                  <el-checkbox
+                    :label="item.value"
+                    :title="item.title"
+                    :disabled="item.disabled"
+                  >{{item.title}}</el-checkbox>
+                </div>
+              </el-checkbox-group>
+            </div>
+          </div>
+          <div class="buttons">
+            <el-button type="primary" @click="saveAddBase(item, index)">淇濆瓨</el-button>
+            <el-button type="default" @click="closeWindow(index)">鍙栨秷</el-button>
+          </div>
+        </div>
+      </hsc-window>
+    </hsc-window-style-metal>
+  </div>
+</template>
+
+<script>
+import Card from "@/components/subComponents/Card";
+import UploadImg from "@/components/searching/UploadImg";
+//import CardWindow from "../components/cardWindow";
+import bus from "./main";
+export default {
+  components: {
+    Card,
+    UploadImg
+  },
+  data() {
+    return {
+      cardWidth: "",
+      center: "",
+      defaultHeight: 432,
+      defaultWidth: 600,
+      isDisabled: false,
+      typeDisable: false,
+      showType: "search",
+      searchImgCardWidth: "",
+      tagValues: [],
+      alarmValues: [],
+      dialogVisible: false,
+      taskValues: [],
+      searchTime: [
+        this.$moment().format("YYYY-MM-DD 00:00:00"),
+        this.$moment().format("YYYY-MM-DD HH:mm:ss")
+      ],
+      searchText: "",
+      currentPage: 1,
+
+    };
+  },
+
+  created() {
+    this.TreeDataPool.readonly = true;
+    this.TreeDataPool.gbReadonly = true;
+    this.TreeDataPool.multiple = true;
+    this.TreeDataPool.clean();
+    this.TreeDataPool.fetchTreeData();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      let scrollContain = this.$refs.scrollContain
+      this.VideoPhotoData.scrollContainDom = scrollContain
+      let list = this.TreeDataPool.localVedioList.filter(i => {
+        return i.progress == 100
+      })
+      this.TreeDataPool.localVedioList = list
+    })
+    window.addEventListener("resize", this.getHeight);
+    this.getCenter();
+    this.getHeight();
+    this.blackAngWhite();
+    // 瑙嗛鐩戞帶浠诲姟璺宠浆 灞忚斀 20200730
+    // if (this.$route.query.from === "video") {
+    //   this.VideoPhotoData.queryTasks = this.taskValues = [
+    //     this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
+    //   ];
+    // }
+
+    this.searchTime = this.getDateInit();
+    this.VideoPhotoData.searchTime = this.getDateInit();
+
+    // 鏆傛椂鍏抽棴璺宠浆 20200730
+    // if (this.$route.query.showType === "findByPic") {
+    if (this.getUrlKey("showType")) {
+      this.VideoPhotoData.uploadDiaplay = true;
+      // console.log("鍒璺宠繃鏉ョ殑浠ュ浘鎼滃浘");
+      this.VideoPhotoData.picUrl = this.getUrlKey("picSmUrl");
+      this.VideoPhotoData.uploadImg = this.getUrlKey("picSmUrl");
+      this.VideoPhotoData.uploadType = true
+      this.VideoPhotoData.compTargetId = this.getUrlKey("targetId")
+      this.VideoPhotoData.compTargetType = this.getUrlKey("compType")
+      this.VideoPhotoData.size = 30
+      this.VideoPhotoData.compareTabs = ["esData"];
+      this.VideoPhotoData.findPerson2(); // 鏌ユ壘姝や汉
+    } else {
+      this.searchTime = this.getDateInit();
+      this.VideoPhotoData.searchTime = this.getDateInit();
+      // this.VideoPhotoData.querySearchList();
+      this.setLoadSearch(this.VideoPhotoData.querySearchList());
+    }
+
+    this.VideoPhotoData.queryTagList();
+    this.VideoPhotoData.queryTaskList();
+    this.VideoPhotoData.queryDictionary();
+    this.$nextTick(() => {
+      bus.$on("changePage", page => {
+        this.currentPage = page;
+        this.VideoPhotoData.page = page;
+      });
+    });
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.getHeight);
+    this.CardList.details = [];
+    // this.TreeDataPool.treeActiveName = "camera";
+    this.VideoPhotoData.queryAlarmlevel = [];
+    this.VideoPhotoData.inputValue = "";
+    this.VideoPhotoData.queryTabs = [];
+    this.VideoPhotoData.queryTasks = [];
+    this.VideoPhotoData.treeNodes = [];
+
+    this.CardList.addBaseList = [];
+    this.VideoPhotoData.selectBlacks = [];
+    this.VideoPhotoData.selectWhites = [];
+  },
+  watch: {
+    "TreeDataPool.showTreeBox"(value) {
+      this.getHeight();
+      if (this.VideoPhotoData.realSmallPath.length > 0) {
+        this.VideoPhotoData.findPersonByPage();
+      } else {
+        // this.VideoPhotoData.querySearchList();
+        this.setLoadSearch(this.VideoPhotoData.querySearchList());
+      }
+    },
+    // "TreeDataPool.selectedNodes": function(newValue,oldValue) {
+    //   if (newValue !== oldValue) {
+    //     this.VideoPhotoData.treeNodes = newValue;
+    //     console.log("鐩戝惉鏍戣妭鐐逛腑鐨勫埛鏂版柟娉�", newValue,oldValue);
+    //     this.VideoPhotoData.querySearchList();
+    //   }
+    // },
+    "TreeDataPool.selectedNodes": {
+      handler: function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.VideoPhotoData.treeNodes = newVal;
+          if (this.VideoPhotoData.uploadType) {
+            this.VideoPhotoData.findPersonByPage()
+          } else {
+            // this.VideoPhotoData.querySearchList();
+            this.setLoadSearch(this.VideoPhotoData.querySearchList());
+          }
+        }
+      },
+      deep: true    //娣卞害鐩戝惉
+    },
+    "DataStackPool.selectedDir": {
+      handler(nodes, oldNodes) {
+        if (nodes !== oldNodes) {
+          // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id});
+          this.VideoPhotoData.treeNodes = [nodes.id];
+          if (this.VideoPhotoData.uploadType) {
+            this.VideoPhotoData.findPersonByPage()
+          } else {
+            // this.VideoPhotoData.querySearchList();
+            this.setLoadSearch(this.VideoPhotoData.querySearchList());
+          }
+        }
+      },
+      deep: true
+    },
+    "VideoPhotoData.activeCard": function (value) {
+      let card = this.$refs.scrollContain.getElementsByClassName("my-active-card");
+
+      if (card.length > 0) {
+        let cardHeight = card[0].clientHeight;
+        let cardTop = card[0].offsetTop;
+        let scrollTop = this.$refs.scrollContain.scrollTop;
+        let divHeight = this.$refs.scrollContain.clientHeight;
+        if (
+          cardTop - cardHeight - scrollTop > divHeight ||
+          cardTop - cardHeight - scrollTop < 0
+        )
+          this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight);
+      }
+    },
+    "VideoPhotoData.uploadType": function (value) {
+      console.log("椤甸潰妯″紡锛�", value)
+      if (value) {
+        this.typeDisable = true;
+        this.disabled = true;
+      } else {
+        this.typeDisable = false;
+        this.VideoPhotoData.querySearchList();
+      }
+    },
+    "VideoPhotoData.selectBlacks": function (value) {
+      this.blackAngWhite()
+    },
+    "VideoPhotoData.selectWhites": function (value) {
+      this.blackAngWhite()
+    },
+    "VideoPhotoData.uploadDiaplay": function (value) {
+      this.getHeight();
+      console.log("upload鐨勫�兼槸锛�", value)
+      if (value) {
+        if (!this.VideoPhotoData.uploadType) {
+          console.log("uploadDisplay涓殑鍒锋柊");
+          let scrollContain = this.$refs.scrollContain
+          this.VideoPhotoData.scrollContainDom = scrollContain
+          this.VideoPhotoData.showType = "search";
+          // this.VideoPhotoData.querySearchList();
+          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
+          this.isDisabled = false;
+        } else {
+          //this.VideoPhotoData.scrollContainDom = '';
+          this.VideoPhotoData.showType = "findByPic";
+        }
+      } else {
+        this.VideoPhotoData.uploadType = false;
+        this.VideoPhotoData.showType = "search";
+      }
+    }
+  },
+  methods: {
+    isShowUpload() {
+      console.log('isShowUpload', this.VideoPhotoData.uploadDiaplay)
+      this.getHeight();
+      console.log("upload鐨勫�兼槸锛�", this.VideoPhotoData.uploadDiaplay)
+      if (this.VideoPhotoData.uploadDiaplay) {
+        if (!this.VideoPhotoData.uploadType) {
+          console.log("uploadDisplay涓殑鍒锋柊");
+          let scrollContain = this.$refs.scrollContain
+          this.VideoPhotoData.scrollContainDom = scrollContain
+          this.VideoPhotoData.showType = "search";
+          // this.VideoPhotoData.querySearchList();
+          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
+          this.isDisabled = false;
+        } else {
+          //this.VideoPhotoData.scrollContainDom = '';
+          this.VideoPhotoData.showType = "findByPic";
+        }
+      } else {
+        this.VideoPhotoData.uploadType = false;
+        this.VideoPhotoData.showType = "search";
+      }
+    },
+    resizeWidth(w) {
+      this.defaultWidth = w;
+    },
+    resizeHeight(h) {
+      this.defaultHeight = h;
+    },
+    getHeight() {
+      let w = this.$refs.mid.offsetWidth;
+      let integer = parseInt(w / 330);
+      let integerSearchImg = parseInt((w - 300) / 325);
+
+      // 鍙栨秷size淇敼
+      // console.log(integer, integerSearchImg)
+      // this.handleSizeChange(integer, integerSearchImg);
+
+      this.cardWidth = `calc(${100 / integer}% - 20px)`;
+      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
+    },
+    uploadChange() {
+      this.VideoPhotoData.uploadDiaplay = false;
+    },
+    blackAngWhite() {
+      if (this.VideoPhotoData.selectBlacks.length > 0) {
+        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
+          //this.VideoPhotoData.whiteList[i].disabled = true
+          this.$set(this.VideoPhotoData.whiteList[i], 'disabled', true)
+        }
+      }
+      if (this.VideoPhotoData.selectBlacks.length == 0) {
+        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
+          //this.VideoPhotoData.whiteList[i].disabled = false
+          this.$set(this.VideoPhotoData.whiteList[i], 'disabled', false)
+        }
+      }
+      if (this.VideoPhotoData.selectWhites.length > 0) {
+        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
+          // this.VideoPhotoData.blackList[i].disabled = true   
+          this.$set(this.VideoPhotoData.blackList[i], 'disabled', true)
+        }
+      }
+      if (this.VideoPhotoData.selectWhites.length == 0) {
+        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
+          //this.VideoPhotoData.blackList[i].disabled = false          
+          this.$set(this.VideoPhotoData.blackList[i], 'disabled', false)
+        }
+      }
+    },
+    saveAddBase(item, index) {
+      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
+        this.$notify({
+          title: "娉ㄦ剰",
+          message: "璇烽�夋嫨瑕佹坊鍔犵殑搴曞簱",
+          type: "warning"
+        })
+        return
+      }
+      let res = this.VideoPhotoData.addBase(item)
+      res.then(data => {
+        console.log("then", data)
+        if (data.success) {
+          this.$notify({
+            title: "鎴愬姛",
+            message: data.data,
+            type: "success"
+          })
+        } else {
+          this.$notify({
+            title: "澶辫触",
+            message: data.data,
+            type: "error"
+          })
+        }
+        this.CardList.addBaseList.splice(index, 1);
+        this.VideoPhotoData.selectBlacks = []
+        this.VideoPhotoData.selectWhites = []
+      })
+    },
+    getDetails(ev, index) {
+      //let obj = this.CardList.datalist[index];
+      this.CardList.datalist = this.VideoPhotoData.cards;
+      let obj = this.CardList.datalist[index];
+      this.CardList.details = Array.from(
+        new Set([...this.CardList.details, ...[obj]])
+      );
+      // this.CardList.details.push(obj);
+      this.VideoPhotoData.activeCard = obj.activeObject.id;
+    },
+    toAdd(item) {
+      this.CardList.addBaseList.push(item)
+    },
+    handleClose(done) {
+      this.$confirm('纭鍏抽棴锛�')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => { });
+    },
+    showUpload() {
+      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
+      //鍒濆鍖栨暟鎹�
+      this.VideoPhotoData.clearStatus();
+      this.CardList.details = [];
+      // if (this.VideoPhotoData.uploadDiaplay) {
+
+      // }
+      //this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg");
+    },
+    getDateInit() {
+      // 瑕佹眰 榛樿涓�涓湀
+      const end = new Date();
+      const start = new Date();
+      const nowDate = new Date();
+      nowDate.setHours(0);
+      nowDate.setMinutes(0);
+      nowDate.setSeconds(0);
+      nowDate.setMilliseconds(0);
+      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
+      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
+      return [
+        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
+        this.$moment(end).format("YYYY-MM-DD HH:mm:ss")
+      ];
+    },
+    format(array) {
+      return [
+        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
+        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
+      ];
+    },
+    searchingBtn() {
+      // let obj = document.getElementById('searchMid');
+      // console.log(obj,'target',document)
+      // let load = this.$loading({
+      //   target:obj,
+      // })
+      // load.close();
+      // console.log(load,'loading')
+      // this.AuthData.loading = true
+      this.VideoPhotoData.page = 1;
+      this.VideoPhotoData.queryTabs = this.tagValues;
+      //澶勭悊鎼滅储绫诲瀷
+      var tempArr = this.taskValues.map(task => task.split(','));
+      var tasks = [];
+      tempArr.forEach(arr => {
+        tasks = tasks.concat(arr)
+      });
+      this.VideoPhotoData.queryTasks = tasks;
+
+      this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
+      this.VideoPhotoData.searchTime = this.format(this.searchTime);
+      //this.VideoPhotoData.inputValue = this.searchText;
+      this.VideoPhotoData.showType = this.showType;
+      if (!this.VideoPhotoData.uploadType) {
+        console.log("鏌ヨ鏂规硶");
+        this.VideoPhotoData.uploadDiaplay = false;
+        //this.VideoPhotoData.page = this.currentPage;
+        // this.VideoPhotoData.querySearchList();
+        this.setLoadSearch(this.VideoPhotoData.querySearchList());
+      } else {
+        console.log("浠ュ浘鎼滃浘");
+        //this.VideoPhotoData.page = this.currentPage;
+        // this.VideoPhotoData.findPersonByPage();
+        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
+      }
+    },
+    stringToNum() {
+      var arr = [];
+      this.alarmValues.forEach(element => {
+        if (element == "-1") {
+          arr.push(-1);
+        }
+        if (element == "1") {
+          arr.push(1);
+        }
+        if (element == "2") {
+          arr.push(2);
+        }
+        if (element == "3") {
+          arr.push(3);
+        }
+        if (element == "4") {
+          arr.push(4);
+        }
+        if (element == "5") {
+          arr.push(5);
+        }
+      });
+      // console.log("杈撳嚭鐨勬暟缁勶細", arr);
+      return arr;
+    },
+    changePages(page) {
+      this.VideoPhotoData.page = page;
+      if (!this.VideoPhotoData.uploadType) {
+        console.log("鍒嗛〉鏀瑰彉锛�")
+        this.VideoPhotoData.uploadDiaplay = false;
+        // this.VideoPhotoData.querySearchList();
+        this.setLoadSearch(this.VideoPhotoData.querySearchList());
+      } else {
+        // this.VideoPhotoData.findPersonByPage();
+        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
+      }
+    },
+    closeWindow(index) {
+      this.CardList.addBaseList.splice(index, 1);
+    },
+    handleSizeChange(integer, integerSearchImg) {
+      if (this.VideoPhotoData.uploadDiaplay) {
+        this.VideoPhotoData.size = integerSearchImg * 10;
+        //this.VideoPhotoData.findPersonByPage();
+      } else {
+        this.VideoPhotoData.size = integer * 10;
+        //this.VideoPhotoData.querySearchList();
+      }
+    },
+    sizeChange(size) {
+      if (this.VideoPhotoData.uploadType) {
+        this.VideoPhotoData.size = size;
+        this.VideoPhotoData.findPersonByPage();
+      } else {
+        this.VideoPhotoData.uploadDiaplay = false;
+        this.VideoPhotoData.size = size;
+        // this.VideoPhotoData.querySearchList();
+        this.setLoadSearch(this.VideoPhotoData.querySearchList());
+      }
+    },
+    clearSearch() {
+      this.tagValues = []
+      this.taskValues = []
+      this.alarmValues = []
+      this.VideoPhotoData.queryTabs = [];
+      this.VideoPhotoData.queryTasks = [];
+      this.VideoPhotoData.queryAlarmlevel = [];
+      this.VideoPhotoData.searchTime = this.getDateInit();
+      this.VideoPhotoData.inputValue = "";
+      this.searchTime = this.getDateInit();
+      if (!this.VideoPhotoData.uploadType) {
+        // this.VideoPhotoData.querySearchList();
+        this.setLoadSearch(this.VideoPhotoData.querySearchList());
+      } else {
+        // this.VideoPhotoData.findPersonByPage();
+        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
+      }
+    },
+    disabled(data) {
+      this.isDisabled = data;
+    },
+    getCenter() {
+      this.center = {
+        x: document.documentElement.clientWidth / 2 - 250,
+        y: document.documentElement.clientHeight / 2 - 200
+      };
+    },
+    setLoadSearch(fn) {
+      this.AuthData.setLoading("searchMid", this);
+      fn.then(_ => {
+        this.AuthData.closeLoad();
+      })
+    },
+    getUrlKey(name) {
+      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
+    },
+    tagChange(obj) {
+      console.log(obj)
+      if (obj.length > 0) {
+        this.showType = "compare";
+      } else {
+        this.showType = "search";
+      }
+
+      this.VideoPhotoData.queryTabs = obj;
+
+      this.setLoadSearch(this.VideoPhotoData.querySearchList());
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.searching-box {
+  width: 100%;
+  height: 100% !important;
+  float: left;
+  //position: relative;
+  .searching-right {
+    width: 100%;
+    background-color: #e9ebf2;
+    height: 100%;
+    padding: 0px 20px;
+    box-sizing: border-box;
+
+    //涓存椂
+    .el-carousel__item.is-active {
+      z-index: 0 !important;
+    }
+    //涓存椂
+
+    .searching-right-nav {
+      height: 50px;
+      width: 100%;
+      line-height: 58px;
+      text-align: left;
+      font-size: 14px !important;
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.78) !important;
+    }
+    .searching-right-content {
+      height: calc(100% - 80px);
+      width: 100%;
+      box-sizing: border-box;
+      .top {
+        background-image: linear-gradient(-180deg, #ffffff 13%, #e9ebf2 100%);
+        height: 76px;
+        width: 100%;
+        padding: 5px 22px;
+        box-sizing: border-box;
+        text-align: left;
+        // line-height: 55px;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        .p-label,
+        .p-task,
+        .p-level,
+        .p-date,
+        .p-input,
+        .p-clear {
+          display: inline-block;
+          padding-right: 10px;
+          box-sizing: border-box;
+          margin-top: 20px;
+          b:hover {
+            color: #2249b4;
+          }
+        }
+        .clear-searching {
+          cursor: pointer;
+          text-decoration: underline;
+          width: 40px;
+          font-size: 13px;
+          color: #3d68e1;
+        }
+      }
+      .mid {
+        //width: 100%;
+        //height: 100%;
+        padding: 5px;
+        overflow: auto;
+        position: relative;
+        .my-card {
+          float: left;
+          margin: 0px 14px 10px 0px;
+          cursor: pointer;
+        }
+      }
+      .foot {
+        overflow: hidden;
+        width: 100%;
+        height: 80px;
+        //line-height: 80px;
+        padding-top: 20px;
+        padding-right: 24px;
+        box-sizing: border-box;
+        text-align: right;
+      }
+    }
+  }
+  .el-select__tags {
+    max-width: 250px !important;
+  }
+}
+.el-select-dropdown {
+  width: 200px !important;
+}
+.el-tag {
+  max-width: 85% !important;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.titlebar {
+  height: 10px !important;
+  background: #fff !important;
+  .button {
+    position: absolute;
+    font-size: 25px !important;
+    right: 10px;
+    top: 10px;
+    z-index: 3;
+  }
+}
+.addToBase {
+  width: 98%;
+  height: 430px;
+  position: relative;
+  .topLabel {
+    margin-top: 20px;
+    height: 40px;
+    border-bottom: 1px solid #eee;
+    font-family: PingFangSC-Medium;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1rem;
+    color: #222222;
+    text-align: left;
+    margin-left: 15px;
+  }
+  .items {
+    width: 100%;
+    height: auto;
+    max-height: 35%;
+    overflow-y: auto;
+    margin: 20px 0px;
+    .lable {
+      width: 15%;
+      margin-top: 10px;
+      float: left;
+      //font-family: PingFangSC-Medium;
+      font-size: 14px;
+      font-weight: 600;
+    }
+    .baseList {
+      width: 85%;
+      height: 100%;
+      float: left;
+
+      // display: flex;
+      // justify-content: flex-start;
+      .base {
+        //flex-wrap: wrap;
+        width: calc(33% - 10px);
+        padding: 0px 5px;
+        line-height: 30px;
+        float: left;
+        text-align: left;
+        font-size: 12px !important;
+        .el-checkbox {
+          width: 100%;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          .el-checkbox__label {
+            display: inline !important;
+          }
+        }
+      }
+    }
+  }
+  .buttons {
+    position: absolute;
+    right: 0px;
+    bottom: 15px;
+  }
+}
+.search {
+  background-color: #eee;
+}
+</style>
+<style lang="scss" scoped>
+.left-selection {
+  width: 300px;
+  height: 100%;
+  float: left;
+  margin-right: 15px;
+}
+#searchMid {
+  height: 100%;
+  box-sizing: border-box;
+  .el-loading-mask {
+    .el-loading-spinner {
+      width: 100%;
+      height: 100%;
+      .el-loading-spinner-search {
+        background: url("/images/search/searchLoading.gif") no-repeat;
+      }
+    }
+  }
+
+  .right-section {
+    //width: calc(100% - 315px);
+    height: 100%;
+    padding-bottom: 20px;
+    box-sizing: border-box;
+    //float: left;
+    overflow: auto;
+    position: relative;
+  }
+}
+</style>
diff --git a/src/pages/searchForCluster/index/main.ts b/src/pages/searchForCluster/index/main.ts
new file mode 100644
index 0000000..da0d750
--- /dev/null
+++ b/src/pages/searchForCluster/index/main.ts
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+
+import preview from 'vue-photo-preview'
+import moment from "moment";
+import * as VueWindow from "@hscmap/vue-window";
+import Mixin from "./mixins";
+
+import 'vue-photo-preview/dist/skin.css'
+
+Vue.prototype.$moment = moment;
+
+Vue.mixin(Mixin);
+
+Vue.use(ElementUI)
+
+Vue.use(preview)
+
+Vue.use(VueWindow);
+
+Vue.filter('moment', function (value, formatString) {
+  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
+  return moment(value).format(formatString);
+});
+
+export default Vue.prototype.bus = new Vue({
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/src/pages/searchForCluster/index/mixins.ts b/src/pages/searchForCluster/index/mixins.ts
new file mode 100644
index 0000000..163c814
--- /dev/null
+++ b/src/pages/searchForCluster/index/mixins.ts
@@ -0,0 +1,28 @@
+import VideoPhotoData from "@/Pool/VideoPhotoData";
+import VideoTaskData from "@/Pool/VideoTaskData";
+import TreeDataPool from "@/Pool/TreeData";
+import CardList from "@/Pool/CardList";
+import DataStackPool from "@/Pool/dataStack"
+import AuthData from '@/Pool/AuthData';
+
+/* eslint-disable */
+const onlyVideoPhotoData = new VideoPhotoData
+const onlyVideoTaskData = new VideoTaskData
+const onlyTreeDataPool = new TreeDataPool
+const onlyDataStack = new DataStackPool
+const onlyCardList = new CardList
+const onlyAuthData = new AuthData
+
+const mixin = {
+  data() {
+    return {
+      TreeDataPool: onlyTreeDataPool,
+      VideoPhotoData: onlyVideoPhotoData,
+      CardList: onlyCardList,
+      DataStackPool: onlyDataStack,
+      VideoTaskData: onlyVideoTaskData,
+      AuthData: onlyAuthData,
+    };
+  },
+};
+export default mixin;
\ No newline at end of file
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index c285ab4..64a3082 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/src/pages/settings/components/CloudNode.vue
@@ -135,6 +135,7 @@
     }
   },
   mounted () {
+    console.log(this.nodes)
     //this.getInsideNodes();
   },
   methods: {
@@ -196,8 +197,8 @@
     //   return temp;
     // },
     outsideNodes () {
-      //return this.nodes.filter(item=>item.hardwareType=='03');
-      return this.mockData.filter(item => item.hardwareType == '03');
+      return this.mockData.filter(item=>item.hardwareType=='03');
+      //return this.nodes.filter(item => item.hardwareType == '03');
     }
   }
 }
@@ -230,6 +231,7 @@
   .outer {
     width: 40%;
     position: relative;
+    text-align: left;
     .node {
       position: absolute;
     }

--
Gitblit v1.8.0