From c0c79d9b58705a3c8c13ea9f23b1dd0f724a04af Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期一, 19 十月 2020 19:14:52 +0800 Subject: [PATCH] 搜索集群节点样式更新 --- src/pages/ai/index/App.vue | 187 +++++++++++++++++++++++++++++++++------------- 1 files changed, 135 insertions(+), 52 deletions(-) diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue index ba070c3..aa0dbb2 100644 --- a/src/pages/ai/index/App.vue +++ b/src/pages/ai/index/App.vue @@ -8,7 +8,7 @@ </div> </div> <!-- 瓒呯骇绠$悊鍛樺彲瑙� --> - <div class="super" v-if="isSuperUser"> + <div class="super"> <div class="left-box"> <!-- <div class="title"> <label>绠楁硶搴�</label> @@ -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;"> @@ -206,7 +232,7 @@ <el-tab-pane label="绂荤嚎鍗囩骇/瀹夎" name="upgradeOrInstallation" - v-show="activeName==='upgradeOrInstallation'" + v-if="isShow('algorithmManage:insOffLine')" > <div class="tab-content"> <div class="action-bar"> @@ -222,7 +248,7 @@ </div> </div> </el-tab-pane> - <el-tab-pane label="搴旂敤涓績" name="algorithmMall" v-show="activeName==='algorithmMall'"> + <el-tab-pane label="搴旂敤涓績" name="algorithmMall" v-if=" isShow('algorithmManage:buy')"> <div class="tab-content"> <p class="src-title">绠楁硶杞欢</p> <div class="store-list flex-list"> @@ -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;"> @@ -454,17 +480,28 @@ }, ungradeList () { // 鍗囩骇澶勭悊浼氬鑷撮噸澶嶇殑key,闇�瑕佷慨鏀� - return []; + //return []; return this.TaskMange.list1.filter(sdk => { return sdk.isUpgrade === true; }); }, + isAdmin () { + if ( + sessionStorage.getItem("userInfo") && + sessionStorage.getItem("userInfo") !== "" + ) { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; + return loginName === "superadmin" || loginName === "basic"; + } + return false; + }, }, data () { return { TaskMange: new TaskManage, VideoManageData: new VideoManageData, + buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], activeName: "myAlgorithm", patchUpdateStatus: "", dragging: false, @@ -581,7 +618,6 @@ this.findByType(); this.getBaseList(); this.findAll(); - this.getUser(); this.getUnActivedList(); this.getUnActivedAppList(); // this.TaskMange.findAllSdk(); @@ -589,6 +625,10 @@ this.VideoManageData.init(); }, methods: { + isShow (authority) { + return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 + }, + //绂荤嚎瀹夎 offlineInstall () { this.installDialogVisible = false; this.isInstall = true; @@ -604,8 +644,11 @@ setTimeout(() => { this.findAllSdk(); this.getAllApps(); + window.parent.postMessage({ + msg: "AppUpdate" + }, '*') this.activeName = 'myAlgorithm'; - }, 3000) + }, 3000); } }).catch(e => { @@ -617,18 +660,42 @@ }); }) }, - 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; } }) }, @@ -641,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) } }); @@ -668,6 +735,9 @@ }, '*') }, 3000); } + }).catch(e => { + console.log(e); + app.unloadLoading = false; }) }, @@ -1430,19 +1500,6 @@ this.clickSet(row); } }, - getUser () { - // console.log("鐧诲綍鐢ㄦ埛",JSON.parse(sessionStorage.getItem("userInfo")).username) - if ( - sessionStorage.getItem("userInfo") && - (JSON.parse(sessionStorage.getItem("userInfo")).username == - "superadmin" || - JSON.parse(sessionStorage.getItem("userInfo")).username == "basic") - ) { - this.isSuperUser = true; - } else { - this.isSuperUser = false; - } - }, donwload (item) { this.downloading = true; this.downloadItem = item.id; @@ -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%; @@ -2027,6 +2094,10 @@ .info-onmask { color: #8ecaff; } + .mask-btn { + width: 100%; + display: flex; + } i { color: #fff; position: relative; @@ -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; -- Gitblit v1.8.0