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/ai/index/App.vue | 283 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 183 insertions(+), 100 deletions(-) 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; -- Gitblit v1.8.0