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 | 959 ++++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 736 insertions(+), 223 deletions(-) diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue index a346f5b..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,18 +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"> - <el-button type="primary" class="bot-btn" @click="donwload(item)">鍗囩骇</el-button> - </div> - <div class="list-complete-item-handle"> - <div class="svg-wrap"> - <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use :xlink:href="`#${item.icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" alt=""> + <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 /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -46,24 +63,20 @@ </div> <div class="wrap-box" v-for="(item) in installedList" :key="item.id"> <div class="list-choose-item-left"> - <div class="mask" v-if="!item.isEdit"> - <el-button - @click="commandAlgLib(item)" - type="primary" - class="bot-btn" - >缂栬緫鍚嶇О</el-button> - </div> <div class="list-complete-item-handle"> - <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> --> <div class="svg-wrap"> - <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use :xlink:href="`#${item.icon}`" /> - </svg>--> + <div class="mask flex-center" v-if="!item.isEdit"> + <div class="info-onmask"> + <div>褰撳墠鐗堟湰:{{item.version}}</div> + </div> + </div> <img + v-if="item.iconBlob" class="baseImg" - :src="`data:image/png;base64,${item.iconBlob}`" + :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" alt /> + <img v-else class="baseImg" :src="item.icon" alt /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -95,12 +108,14 @@ <span class="iconfont iconxiazai1"></span> </div> <div class="list-complete-item-handle"> - <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> --> <div class="svg-wrap"> - <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use :xlink:href="`#${item.icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" alt=""> + <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 /> </div> <div class="alg-name"> <div style="padding:0px 10px 0px 10px;"> @@ -112,13 +127,112 @@ </div> </div> <p class="src-title">搴旂敤杞欢</p> + <div class="flex-list"> + <div class="wrap-box" v-for="(item) in installedApps" :key="item.id"> + <div class="list-choose-item-left"> + <div class="list-complete-item-handle"> + <div + class="svg-wrap" + :class="{willUpGrade:item.isUpgrade}" + v-loading="item.unloadLoading||item.upgradeLoading" + :element-loading-text="item.unloadLoading?'鍗歌浇涓�':'鍗囩骇涓�'" + element-loading-background="rgba(0,0,0,.8)" + > + <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> + <div class="mask" v-if="!item.isDefault || item.isUpgrade"> + <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" + 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 /> + </div> + <div class="alg-name"> + <div style="padding:0px 10px 0px 10px;"> + <span v-if="!item.isEdit">{{ item.name }}</span> + <el-input + size="small" + v-model="item.sdk_name" + v-if="item.isEdit" + v-focus + :maxlength="15" + @blur="inputBlur(item)" + ></el-input> + </div> + </div> + </div> + </div> + </div> + <div class="wrap-box" v-for="item in storeApps" :key="item.id"> + <div class="list-choose-item-left"> + <div class="list-complete-item-handle uninstall"> + <div + class="svg-wrap" + v-loading="item.installLoading||item.upgradeLoading" + :element-loading-text="item.installLoading?'瀹夎涓�':'鍗囩骇涓�'" + element-loading-background="rgba(0,0,0,.8)" + > + <div class="mask"> + <el-button + type="primary" + class="bot-btn" + @click="downloadApp(item)" + >瀹夎</el-button> + </div> + <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 /> + </div> + <div class="alg-name"> + <div style="padding:0px 10px 0px 10px;"> + <span v-if="!item.isEdit">{{ item.name }}</span> + <el-input + size="small" + v-model="item.name" + v-if="item.isEdit" + v-focus + :maxlength="15" + @blur="inputBlur(item)" + ></el-input> + </div> + </div> + </div> + </div> + </div> + </div> </div> </el-tab-pane> <el-tab-pane label="绂荤嚎鍗囩骇/瀹夎" name="upgradeOrInstallation" - v-show="activeName==='upgradeOrInstallation'" + v-if="isShow('algorithmManage:insOffLine')" > <div class="tab-content"> <div class="action-bar"> @@ -134,28 +248,82 @@ </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"> - <div class="wrap-box"> - <div class="inner"> - <div class="mask" @click="actDrawerShow=true"> - <svg class="icon" aria-hidden="true" style="font-size:2rem;"> - <use xlink:href="#iconyunxiazai" /> - </svg> + <div class="store-list flex-list"> + <div class="wrap-box" v-for="item in unActivedSDKList" :key="item.id"> + <div class="list-choose-item-left"> + <div class="list-complete-item-handle"> + <div class="alg-icon svg-wrap"> + <div class="mask" @click="actSdkOrApp(item.id)"> + <span + class="iconfont iconyunxiazai" + style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%" + ></span> + </div> + <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 /> + </div> + <div class="alg-name"> + <div style="padding:0px 10px 0px 10px;"> + <span v-if="!item.isEdit">{{ item.sdk_name }}</span> + <el-input + size="small" + v-model="item.sdk_name" + v-if="item.isEdit" + v-focus + :maxlength="15" + @blur="inputBlur(item)" + ></el-input> + </div> + </div> </div> - <div class="alg-icon"> - <svg class="icon" aria-hidden="true" style="font-size:7rem;"> - <use xlink:href="#iconrenyuanyidong" /> - </svg> - </div> - <div class="alg-name">name</div> </div> </div> </div> <p class="src-title">搴旂敤杞欢</p> - <div class="app-list"></div> + <div class="app-list flex-list"> + <div class="wrap-box" v-for="item in unActivedAppList" :key="item.id"> + <div class="list-choose-item-left"> + <div class="list-complete-item-handle"> + <div class="alg-icon svg-wrap"> + <div class="mask" @click="actSdkOrApp(item.id,'app')"> + <span + class="iconfont iconyunxiazai" + style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%" + ></span> + </div> + <img + v-if="item.iconBlob" + class="baseImg" + :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`" + alt + /> + <img v-else class="baseImg" :src="item.icon" alt /> + </div> + <div class="alg-name"> + <div style="padding:0px 10px 0px 10px;"> + <span v-if="!item.isEdit">{{ item.name }}</span> + <el-input + size="small" + v-model="item.name" + v-if="item.isEdit" + v-focus + :maxlength="15" + @blur="inputBlur(item)" + ></el-input> + </div> + </div> + </div> + </div> + </div> + </div> </div> <el-drawer title="涓嬭浇" :visible.sync="actDrawerShow" :direction="direction"> <div class="drawer-content"> @@ -183,28 +351,28 @@ <ul class="desc"> <li> <label>婵�娲荤爜:</label> - <span>YUAAA-AAAEU-QJQE3-ZRRXD-K9MWR</span> + <span>{{activedSdkOrApp.activateCode}}</span> </li> <li> <label>浜у搧鍚嶇О:</label> - <span>浜哄憳璺熻釜SDK</span> + <span>{{activedSdkOrApp.productName}}</span> </li> <li> <label>閰嶇疆璇︽儏:</label> - <span>鏃�</span> + <span>{{activedSdkOrApp.setting}}</span> </li> <li> <label>鏈嶅姟鍒版湡鏃�:</label> - <span>2021-03-04</span> + <span>{{activedSdkOrApp.expireTime}}</span> </li> <li> <label>璁稿彲璇�:</label> - <span>鏈澶�</span> + <span>{{activedSdkOrApp.licence}}</span> </li> - <li> + <!-- <li> <label>璁惧ID:</label> <span>3342-235f-ret55-fdsg</span> - </li> + </li>--> </ul> <div class="text-right"> <el-button type="primary" @click="checkMyAlgorith">纭畾</el-button> @@ -219,6 +387,52 @@ </div> </div> </div> + <el-dialog + title="瀹夎鍖呬俊鎭�" + :visible.sync="installDialogVisible" + width="40%" + :close-on-click-modal="false" + > + <div class="installInfo"> + <template v-if="installAppPackage != null"> + <div> + <div> + <span>瀹夎鍖呭悕绉帮細</span> + <span>{{installAppPackage.productName}}</span> + </div> + <div> + <span>瀹夎鐗堟湰锛�</span> + <span>{{installAppPackage.version}}</span> + </div> + <div> + <span>鏇存柊鍐呭锛�</span> + <span>{{installAppPackage.installContent}}</span> + </div> + </div> + </template> + <template v-if="installSdkPackage != null"> + <div> + <div> + <span>瀹夎鍖呭悕绉帮細</span> + <span>{{installSdkPackage.productName}}</span> + </div> + <div> + <span>瀹夎鐗堟湰锛�</span> + <span>{{installSdkPackage.version}}</span> + </div> + <div> + <span>鏇存柊鍐呭锛�</span> + <span>{{installSdkPackage.installContent}}</span> + </div> + </div> + </template> + <p>纭畾瀹夎锛�</p> + </div> + <div slot="footer" class="dialog-footer"> + <el-button @click="installDialogVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="offlineInstall">瀹� 瑁�</el-button> + </div> + </el-dialog> </div> </template> <script> @@ -239,8 +453,11 @@ findByType, getTagList, downloadSdk, - installSdk + installSdk, + getInstallInfo } from "./api"; +import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app"; + import FileUploader from "@/components/subComponents/FileUpload/index"; import TaskManage from "@/Pool/TaskMange"; import VideoManageData from "@/Pool/VideoManageData"; @@ -251,28 +468,40 @@ 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 () { + if ( + sessionStorage.getItem("userInfo") && + sessionStorage.getItem("userInfo") !== "" + ) { + let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; + return loginName === "superadmin" || loginName === "basic"; + } + + return false; + }, }, - data() { + data () { return { TaskMange: new TaskManage, VideoManageData: new VideoManageData, + buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], activeName: "myAlgorithm", patchUpdateStatus: "", dragging: false, @@ -335,12 +564,34 @@ sceneSdks: [], sceneRuleList: "", isInstall: false, - installPercentage: 0 + installDialogVisible: false, + installPackage: {}, + installAppPackage: null, + installSdkPackage: null, + installPercentage: 0, + unActivedSDKList: [], + unActivedAppList: [], + //actSdkId: '', + actType: '', + actId: '', + activedSdkOrApp: { + activateCode: '', + productName: '', + setting: '', + expireTime: '', + licence: '', + devIds: '' + }, + // unloadLoading: false, + // installLoading: false, + installedApps: [], + storeApps: [], + installFile: {} } }, watch: { list2: { - handler(newVal, oldVal) { + handler (newVal, oldVal) { // window.console.log(newVal, oldVal, '鐩戝惉list2') if (newVal !== oldVal) { // window.console.log(newVal, '鐩戝惉list2') @@ -361,34 +612,300 @@ } } }, - mounted() { + mounted () { + this.getAllApps(); this.findAllSdk(); this.findByType(); this.getBaseList(); this.findAll(); - this.getUser(); + this.getUnActivedList(); + this.getUnActivedAppList(); // this.TaskMange.findAllSdk(); // this.TaskMange.findByType(); this.VideoManageData.init(); }, methods: { - installFormat(percentage) { + isShow (authority) { + return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 + }, + //绂荤嚎瀹夎 + offlineInstall () { + this.installDialogVisible = false; + this.isInstall = true; + //瀹夎 + installSdk(this.installFile).then(res => { + debugger + if (res.success) { + this.isInstall = false; + this.$message({ + type: 'success', + message: '瀹夎鎴愬姛,灏嗚烦杞嚦鎴戠殑绠楁硶涓煡鐪�' + }); + setTimeout(() => { + this.findAllSdk(); + this.getAllApps(); + window.parent.postMessage({ + msg: "AppUpdate" + }, '*') + this.activeName = 'myAlgorithm'; + }, 3000); + } + + }).catch(e => { + console.log(e) + this.isInstall = false; + this.$message({ + type: 'error', + message: e.data + }); + }) + }, + downloadApp (app, action) { + if (action == 'upgrade') { + app.upgradeLoading = true; + } else { + app.installLoading = true; + } + let _this = this; + + installApp({ path: app.id }).then(res => { + if (res && res.success) { + setTimeout(() => { + if (action == 'upgrade') { + app.upgradeLoading = false; + _this.notify({ + type:'success', + message:'鍗囩骇鎴愬姛' + }); + } else { + app.installLoading = false; + _this.notify({ + type:'success', + message:'瀹夎鎴愬姛' + }); + } + _this.getAllApps(); + window.parent.postMessage({ + msg: "AppUpdate" + }, '*') + }, 3000); + } + }).catch(e => { + console.log(e); + if (action == 'upgrade') { + app.upgradeLoading = false; + } else { + app.installLoading = false; + } + }) + }, + getAllApps () { + let _this = this; + _this.installedApps = []; + _this.storeApps = []; + getApps().then(res => { + if (res && res.success) { + //_this.storeApps = res.data; + res.data.forEach(item => { + if (item.installed) { + let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item) + _this.installedApps.push(obj) + } else { + let obj = Object.assign({ installLoading: false, upgradeLoading: false }, item) + _this.storeApps.push(obj) + } + }); + console.log('_this.installedApps', _this.installedApps); + console.log('_this.storeApps', _this.storeApps); + } + }) + }, + //鍗歌浇搴旂敤 + unLoad (app) { + app.unloadLoading = true; + let _this = this; + removeApp({ appId: app.id }).then(res => { + + if (res && res.success) { + setTimeout(() => { + app.unloadLoading = false; + _this.getAllApps(); + window.parent.postMessage({ + msg: "AppUpdate" + }, '*') + }, 3000); + } + }).catch(e => { + console.log(e); + app.unloadLoading = false; + }) + + }, + // actSdk (id) { + // this.actSdkId = id; + // this.actDrawerShow = true; + // this.actStep = 0; + // this.activeCode = ''; + // this.activedSdkOrApp = this.newActInfo() + // }, + actSdkOrApp (id, type = 'sdk') { + this.actType = type; + this.actId = id; + this.actDrawerShow = true; + this.actStep = 0; + this.activeCode = ''; + this.activedSdkOrApp = this.newActInfo() + }, + newActInfo () { + return { + activateCode: '', + productName: '', + setting: '', + expireTime: '', + licence: '', + devIds: '' + } + }, + getUnActivedList () { + getUnActivedSdk().then(res => { + if (res.code == 200) { + this.unActivedSDKList = res.data; + } + }) + + }, + getUnActivedAppList () { + getUnActivedApp().then(res => { + if (res.code == 200) { + this.unActivedAppList = res.data; + } + }); + }, + + installFormat (percentage) { return percentage === 100 ? '瀹夎鎴愬姛' : `${percentage}%`; }, - actived() { - //this.activeCode - this.actStep++ + actived () { + let _this = this; + if (this.actType == 'sdk') { + //婵�娲荤畻娉� + actPageAlg(this.actId, this.activeCode).then(res => { + if (res.data.isSuccess) { + _this.activedSdkOrApp = res.data.successMsg; + _this.actStep++; + _this.getUnActivedList(); + _this.findAllSdk(); + } else { + _this.$notify({ + type: 'error', + message: res.data.failMsg.failMsg + }); + } + }).catch(e => { + console.log(e) + }); + } else if (this.actType == 'app') { + //婵�娲诲簲鐢� + actApp(this.actId, this.activeCode).then(res => { + if (res.data.isSuccess) { + _this.activedSdkOrApp = res.data.successMsg; + _this.actStep++; + _this.getUnActivedAppList(); + _this.getAllApps(); + } else { + _this.$notify({ + type: 'error', + message: res.data.failMsg.failMsg + }); + } + }).catch(e => { + console.log(e) + }); + } }, - getCodeDetail() { }, - checkMyAlgorith() { + getCodeDetail () { }, + checkMyAlgorith () { this.actDrawerShow = false; this.activeName = "myAlgorithm"; }, - onFileUpload(file) { + onFileUpload (file) { //this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪畨瑁�</span>`; this.patchFile = { ...file }; this.fileAdded = true; const h = this.$createElement; + //涓婁紶瀹屾垚鑾峰彇瀹夎淇℃伅 + let _this = this; + getInstallInfo(file).then(res => { + _this.installFile = file; + if (res.success) { + _this.installDialogVisible = true; + debugger + if (res.data.apps.length > 0) { + _this.installAppPackage = { + appId: res.data.apps[0].appId, + version: res.data.apps[0].version, + productName: res.data.productName, + installContent: res.data.apps[0].installContent + } + } + if (res.data.sdks.length > 0) { + _this.installSdkPackage = { + appId: res.data.sdks[0].sdkId, + version: res.data.sdks[0].version, + productName: res.data.productName, + installContent: res.data.sdks[0].installContent + } + } + + // this.$confirm('', '绠楁硶淇℃伅', { + // message: `<div class="installInfo"> + // <div><span>绠楁硶鍚嶇О锛�</span><span>${file.filename}</span></div> + // <div><span>瀹夎鐗堟湰锛�</span><span></span></div> + // <div><span>鏇存柊鍐呭锛�</span><span></span></div> + // <p>纭畾瀹夎姝ょ畻娉曪紵</p> + // </div>`, + // confirmButtonText: '瀹夎', + // cancelButtonText: '鍙栨秷', + // dangerouslyUseHTMLString: true, + // type: '' + // }).then(() => { + // this.isInstall = true; + // //瀹夎 + // installSdk(file).then(res => { + // debugger + // if (res.success) { + // this.isInstall = false; + // //this.$refs['progressBar'].style.width = 100% + // //this.installPercentage = 100% + // this.$message({ + // type: 'success', + // message: '瀹夎鎴愬姛,灏嗚烦杞嚦鎴戠殑绠楁硶涓煡鐪�' + // }); + // setTimeout(() => { + // this.findAllSdk(); + // this.activeName = 'myAlgorithm'; + // }, 3000) + // } + + // }).catch(e => { + // console.log(e) + // this.isInstall = false; + // this.$message({ + // type: 'error', + // message: e.data + // }); + // }) + // }).catch(() => { + // console.log('鍙栨秷瀹夎'); + + // }) + } + }).catch(e => { + this.$message({ + type: 'error', + message: e.data + }); + }) // this.$msgbox({ // title: '绠楁硶淇℃伅', // message: h('div', null, [ @@ -419,48 +936,16 @@ // }); // }); - this.$confirm('', '绠楁硶淇℃伅', { - message: `<div class="installInfo"> - <div><span>绠楁硶鍚嶇О锛�</span><span>${file.filename}</span></div> - <div><span>瀹夎鐗堟湰锛�</span><span></span></div> - <div><span>鏇存柊鍐呭锛�</span><span></span></div> - <p>纭畾瀹夎姝ょ畻娉曪紵</p> - </div>`, - confirmButtonText: '瀹夎', - cancelButtonText: '鍙栨秷', - dangerouslyUseHTMLString: true, - type: '' - }).then(() => { - this.isInstall = true; - //瀹夎 - installSdk(file).then(res => { - if (res.success) { - debugger - this.isInstall = false; - //this.$refs['progressBar'].style.width = 100% - //this.installPercentage = 100% - this.$message({ - type: 'success', - message: '瀹夎鎴愬姛,灏嗚烦杞嚦鎴戠殑绠楁硶涓煡鐪�' - }); - setTimeout(() => { - this.findAllSdk(); - this.activeName = 'myAlgorithm'; - }, 3000) - } - }); - }).catch(() => { - console.log('鍙栨秷瀹夎') - }) + }, - onFileAdded(f) { - debugger; + onFileAdded (f) { + ; this.patchUpdateStatus = ""; }, // 鏍¢獙杈撳叆鐨勬槸鍚︽槸鏁板瓧 - valiNum(value) { + valiNum (value) { if (value) { let re = /[^\-?\d.]*$/; if (!re.test(value)) { @@ -477,7 +962,7 @@ } }, // 宸﹁竟鎷栧姩妯″潡寰楁嫋鍔ㄧ粨鏉熷悗鐨勮Е鍙戝嚱鏁� - endLeft(env) { + endLeft (env) { this.dragging = false; let taskId = env.to.id; let sdkId = this.TaskMange.list1[env.oldIndex].id; @@ -518,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, @@ -548,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; @@ -614,7 +1099,7 @@ // }); } }, - async getRulesByTaskSdk(taskId, sdkId) { + async getRulesByTaskSdk (taskId, sdkId) { let res = await getRulesByTaskSdk({ taskId: taskId, sdkId: sdkId @@ -650,10 +1135,9 @@ this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList)); } }, - async findAllSdk() { + async findAllSdk () { let res = await findAllSdk(); if (res && res.success) { - // debugger this.TaskMange.list1 = res.data.map((i, index) => { this.$set(i, "isEdit", false); //mock 鏈畨瑁�/寰呭崌绾� @@ -668,7 +1152,7 @@ }); } }, - addTask() { + addTask () { let obj = { id: "", name: "浠诲姟" + this.TaskMange.list2.length, @@ -684,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) { @@ -721,7 +1205,7 @@ } } }, - clickDelSdk(task, sdk) { + clickDelSdk (task, sdk) { this.$confirm( "鎻愮ず锛氬垹闄ゅ悗锛屾绠楁硶鍦ㄦ湰浠诲姟涓Щ闄わ紝鍚屾椂鍦ㄦ憚鍍忔満涓殑搴旂敤澶辨晥锛屾槸鍚﹀垹闄わ紵", { @@ -737,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 => { @@ -748,7 +1232,7 @@ } }, // 鍒犻櫎浠诲姟绠楁硶 - async delTaskSdk(task, sdk) { + async delTaskSdk (task, sdk) { let json = { taskId: task.id, sdkId: sdk.id @@ -768,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({ @@ -785,7 +1269,7 @@ } }, // 鏇存柊浠诲姟鐘舵�� - async updateTaskStatus(data) { + async updateTaskStatus (data) { // window.console.log(data, '鏇存柊浠诲姟鐘舵��') let json = { taskId: data.id, @@ -803,7 +1287,7 @@ }); }, // 鏇存柊浠诲姟鍚嶇О - async updateTaskName(data) { + async updateTaskName (data) { let json = { taskId: data.id, taskName: data.name @@ -823,7 +1307,7 @@ } }, // 鑾峰彇搴曞簱鏁版嵁 - async getBaseList() { + async getBaseList () { // let res = await getTagList(); // if (res && res.success) { // let filter = res.data.filter(i => { @@ -852,7 +1336,7 @@ ]; }, // 鑾峰彇绠楁硶鍙傛暟 - async getSdkArgs(data) { + async getSdkArgs (data) { let res = await getSdkArgs({ sdkId: data.id, scope: "TASKRULE" @@ -874,7 +1358,7 @@ } }, // 鏌ヨ瀛楀吀 - async findByType() { + async findByType () { let res = await findByType(); if (res && res.success) { let list = res.data.RULECOMPUTEBETWEEN.map(i => { @@ -887,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; @@ -930,7 +1414,7 @@ } } }, - getDefault() { + getDefault () { this.deleteTaskSdkRule( this.TaskMange.currentTaskId, this.TaskMange.currentAlgoId @@ -941,7 +1425,7 @@ ); }); }, - async deleteTaskSdkRule(taskId, sdkId) { + async deleteTaskSdkRule (taskId, sdkId) { let json = { taskId: taskId, sdkId: sdkId @@ -961,7 +1445,7 @@ } }, // 缁欎换鍔℃坊鍔犵畻娉� - async addTaskSdk(data) { + async addTaskSdk (data) { let res = await addTaskSdk(data); if (res && res.success) { // window.console.log(res, 'res') @@ -969,7 +1453,7 @@ } }, // 鏂版坊鍔犱换鍔� - async addTaskAsync(name) { + async addTaskAsync (name) { let res = await addTask({ taskname: name }); // this.$toast({ // type: res.success ? "success" : "error", @@ -985,7 +1469,7 @@ this.findAll(); } }, - cancle(row) { + cancle (row) { if (row.isShowSetAlgo) { row.isShowSetAlgo = false; } @@ -995,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); @@ -1010,26 +1494,13 @@ this.clickDelSdk(row, item); } }, - commandTask(command, row) { + commandTask (command, row) { if (command === 1) { //缂栬緫浠诲姟 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) { + donwload (item) { this.downloading = true; this.downloadItem = item.id; @@ -1053,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 = ""; @@ -1069,10 +1540,10 @@ this.$refs.ruleEditor.cleanRule(); }, - handleTabClick() { - + handleTabClick () { + }, - handleCreateScene() { + handleCreateScene () { this.sceneDialogVisible = true; this.dialogTitle = '鍒涘缓鍦烘櫙妯℃澘'; @@ -1085,10 +1556,10 @@ this.cleanTemplateForm(); }); }, - handleDialogClose() { + handleDialogClose () { this.sceneDialogVisible = false; }, - handleEditScene(item) { + handleEditScene (item) { this.appSceneForm.name = item.name; this.appSceneForm.desc = item.desc; @@ -1097,8 +1568,8 @@ this.sceneDialogVisible = true; this.dialogTitle = '缂栬緫鍦烘櫙妯℃澘'; }, - - + + } }; </script> @@ -1150,18 +1621,36 @@ color: #606266; cursor: pointer; } - +.el-loading-mask .el-loading-spinner { + top: 40px !important; +} +.el-loading-mask .el-loading-spinner svg { + transform: none !important; + top: 20px !important; + left: 40% !important; +} +.el-loading-mask .el-loading-spinner p.el-loading-text { + display: block !important; + text-align: center !important; + bottom: 10px !important; + top: 80px !important; + right: 0 !important; + color: #78adf7; +} +.el-loading-mask .el-loading-spinner .path { + stroke: #78adf7; +} .installInfo { text-indent: 2em; font-size: 14px; - color: #777; + line-height: 26px; p { text-align: center; - color: #666; } } -.src-title{ - color: #333; +.src-title { + //color: #bfbfbf; + color: #bbcee8; font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC'; font-weight: 650; font-style: normal; @@ -1187,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 { @@ -1242,7 +1731,15 @@ height: 100%; box-sizing: border-box; // float: left; - + .el-drawer__header { + border-bottom: 2px solid #eee; + padding-bottom: 10px; + font-size: 16px; + margin-bottom: 0px; + span { + outline: none !important; + } + } .action-bar { margin-bottom: 30px; .el-input { @@ -1250,44 +1747,30 @@ } } .task-list { - background: #fff; + background: #fdfdfd; padding: 20px; box-sizing: border-box; - + .flex-list { display: flex; flex-direction: row; flex-wrap: wrap; - // justify-content: space-around; - // align-content: space-around; - // &:after { - // content: ""; - // flex: auto; - // } .wrap-box { width: 16.66%; } .list-choose-item-left { - // width: 220px; - // height: 214px; width: 80%; height: auto; margin: auto; margin-bottom: 30px; - // @media screen and(min-width: 1895px) { - // //margin: 20px 25px 20px 20px; - // width: 230px; - // height: 224px; - // } - // @media screen and(min-width: 1695px) and(max-width:1895px ) { - // margin: 20px 10px 20px 15px; - // } - // @media screen and(min-width: 1460px) and(max-width: 1695px) { - // margin: 20px 25px 20px 20px; - // } - // @media screen and(max-width: 1460px) { - // margin: 20px 15px 20px 10px; - // } + max-width: 200px; + .mask { + width: 100%; + + .el-button + .el-button { + margin-left: 0 !important; + } + } } } } @@ -1327,6 +1810,9 @@ z-index: 1; border-radius: 3px; display: none; + .el-button + .el-button { + margin-left: 0 !important; + } .tool { position: absolute; top: 49%; @@ -1450,12 +1936,20 @@ } } } - .store-list { + .store-list, + .app-list { display: flex; flex-wrap: wrap; .wrap-box { width: 16.6%; margin-bottom: 30px; + .list-choose-item-left { + width: 80%; + height: auto; + margin: auto; + margin-bottom: 30px; + max-width: 200px; + } .inner { width: 80%; box-sizing: border-box; @@ -1514,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%; @@ -1560,6 +2054,7 @@ } .text-right { padding-right: 30px; + text-align: right; .tip { color: #999; line-height: 38px; @@ -1596,7 +2091,13 @@ z-index: 1; border-radius: 3px; display: none; - + .info-onmask { + color: #8ecaff; + } + .mask-btn { + width: 100%; + display: flex; + } i { color: #fff; position: relative; @@ -1660,28 +2161,9 @@ cursor: pointer; position: relative; font-size: 14px; - // display: inline-block; - // @media screen and(min-width: 1895px) { - // //margin: 20px 25px 20px 20px; - // margin: 20px 30px 20px 20px; - // } - // @media screen and(min-width: 1695px) and(max-width:1895px ) { - // margin: 20px 10px 20px 15px; - // } - // @media screen and(min-width: 1460px) and(max-width: 1695px) { - // margin: 20px 25px 20px 20px; - // } - // @media screen and(max-width: 1460px) { - // margin: 20px 15px 20px 10px; - // } - // width: 126px; - // height: 120px; - // width: 220px; - // height: 214px; + transition: all 1s; background: #ffffff; - border: 1px solid #e2e2e2; - box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07); border-radius: 4px; p { display: none; @@ -1701,8 +2183,15 @@ .mask { display: flex; align-items: flex-end; + flex-wrap: wrap; + justify-content: center; + top: 0; .bot-btn { flex: 1; + } + &.flex-center { + align-items: center; + justify-content: center; } } } @@ -1816,11 +2305,12 @@ color: #222222; } .alg-name { - margin-top: 12px; + //margin-top: 12px; line-height: 36px; font-family: PingFangSC-Regular; - font-size: 15px; - color: #222222; + font-size: 14px; + letter-spacing: 0.05em; + color: #3e4664; // background-color: #ecf5ff; .el-input { position: relative; @@ -1852,13 +2342,16 @@ } .list-complete-item-handle { height: 100%; - padding-bottom: 10px; + //padding-bottom: 10px; text-align: center; .svg-wrap { - width: 80%; + //width: 80%; + width: 100%; margin: auto; padding-top: 80%; + padding-top: 100%; position: relative; + box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07); svg { position: absolute; top: 50%; @@ -1866,11 +2359,31 @@ transform: translate(-50%, -50%); } .baseImg { - width: 80%; + width: 56%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + max-width: 106px; + 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; + } + .alg-name { + color: darkgray; } } } -- Gitblit v1.8.0