From 3300f811726041a3175784324eb2be9458e80e09 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 21 十月 2020 10:37:10 +0800
Subject: [PATCH] 左侧目录树图标对齐
---
src/pages/ai/index/App.vue | 393 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 305 insertions(+), 88 deletions(-)
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 9982bf5..5a47303 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,23 +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="`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;">
@@ -59,10 +71,12 @@
</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;">
@@ -96,10 +110,12 @@
<div class="list-complete-item-handle">
<div class="svg-wrap">
<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;">
@@ -117,23 +133,41 @@
<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"
class="baseImg"
- :src="`${item.iconBlob?'data:image/png;base64,'+item.iconBlob:item.icon}`"
+ :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;">
@@ -156,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">
@@ -168,10 +202,12 @@
>瀹夎</el-button>
</div>
<img
+ v-if="item.iconBlob"
class="baseImg"
- :src="item.iconBlob? 'data:image/png;base64,'+item.iconBlob:item.icon"
+ :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;">
@@ -196,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">
@@ -212,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">
@@ -227,10 +263,12 @@
></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;">
@@ -262,17 +300,19 @@
></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>
+ <span v-if="!item.isEdit">{{ item.name }}</span>
<el-input
size="small"
- v-model="item.sdk_name"
+ v-model="item.name"
v-if="item.isEdit"
v-focus
:maxlength="15"
@@ -347,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>
@@ -367,7 +453,8 @@
findByType,
getTagList,
downloadSdk,
- installSdk
+ installSdk,
+ getInstallInfo
} from "./api";
import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";
@@ -393,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,
@@ -466,6 +564,10 @@
sceneSdks: [],
sceneRuleList: "",
isInstall: false,
+ installDialogVisible: false,
+ installPackage: {},
+ installAppPackage: null,
+ installSdkPackage: null,
installPercentage: 0,
unActivedSDKList: [],
unActivedAppList: [],
@@ -483,7 +585,8 @@
// unloadLoading: false,
// installLoading: false,
installedApps: [],
- storeApps: []
+ storeApps: [],
+ installFile: {}
}
},
watch: {
@@ -515,7 +618,6 @@
this.findByType();
this.getBaseList();
this.findAll();
- this.getUser();
this.getUnActivedList();
this.getUnActivedAppList();
// this.TaskMange.findAllSdk();
@@ -523,18 +625,77 @@
this.VideoManageData.init();
},
methods: {
- downloadApp (app) {
- app.installLoading = true;
+ 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(app).then(res => {
+
+ 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;
}
})
},
@@ -547,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)
}
});
@@ -574,6 +735,9 @@
}, '*')
}, 3000);
}
+ }).catch(e => {
+ console.log(e);
+ app.unloadLoading = false;
})
},
@@ -669,6 +833,79 @@
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, [
@@ -699,39 +936,7 @@
// });
// });
- 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) {
- 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('鍙栨秷瀹夎')
- })
},
@@ -1295,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;
@@ -1451,10 +1643,9 @@
.installInfo {
text-indent: 2em;
font-size: 14px;
- color: #777;
+ line-height: 26px;
p {
text-align: center;
- color: #666;
}
}
.src-title {
@@ -1573,6 +1764,13 @@
margin: auto;
margin-bottom: 30px;
max-width: 200px;
+ .mask {
+ width: 100%;
+
+ .el-button + .el-button {
+ margin-left: 0 !important;
+ }
+ }
}
}
}
@@ -1612,6 +1810,9 @@
z-index: 1;
border-radius: 3px;
display: none;
+ .el-button + .el-button {
+ margin-left: 0 !important;
+ }
.tool {
position: absolute;
top: 49%;
@@ -1893,6 +2094,10 @@
.info-onmask {
color: #8ecaff;
}
+ .mask-btn {
+ width: 100%;
+ display: flex;
+ }
i {
color: #fff;
position: relative;
@@ -1978,6 +2183,8 @@
.mask {
display: flex;
align-items: flex-end;
+ flex-wrap: wrap;
+ justify-content: center;
top: 0;
.bot-btn {
flex: 1;
@@ -2161,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