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