From 7f37e751c1c9f98671bc3fc06216aeb7781dd386 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 24 二月 2021 07:25:58 +0800
Subject: [PATCH] 应用中心已激活板块版式更新，添加更新tab页，添加批量更新应用和sdk功能；朔黄标注时间点格式化
---
src/pages/ai/index/App.vue | 333 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 282 insertions(+), 51 deletions(-)
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index faed1b4..95dfb60 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -74,17 +74,13 @@
:element-loading-text="item.progressMsg"
element-loading-background="rgba(0,0,0,.8)"
>
- <!-- <div class="mask flex-center">
- <div class="info-onmask">
- <div>褰撳墠鐗堟湰:{{item.version}}</div>
- </div>
- </div>-->
<i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
<div class="mask" v-if="!item.isDefault || item.isUpgrade">
- <div class="info-onmask">
+ <div class="left-top">
<div>褰撳墠鐗堟湰:{{item.version}}</div>
<div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
</div>
+ <div class="info-onmask" @click="checkDetail(item)">鏌ョ湅璇︽儏</div>
<div class="mask-btn">
<el-button
@click="unLoadSdk(item)"
@@ -175,11 +171,12 @@
element-loading-background="rgba(0,0,0,.8)"
>
<i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
- <div class="mask" >
- <div class="info-onmask">
+ <div class="mask">
+ <div class="left-top">
<div>褰撳墠鐗堟湰:{{item.version}}</div>
<div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
</div>
+ <div class="info-onmask">鏌ョ湅璇︽儏</div>
<div class="mask-btn">
<el-button
v-if="!item.isDefault"
@@ -419,6 +416,134 @@
</div>
</el-drawer>
</el-tab-pane>
+ <el-tab-pane name="update">
+ <span slot="label">
+ <el-badge class="update-badge" :value="updateNum">鏇存柊</el-badge>
+ </span>
+ <div class="task-list">
+ <div class="flex-title">
+ <p class="src-title">绠楁硶杞欢</p>
+ <el-button @click="batchUpdate('sdk')" size="mini" type="primary">鏇存柊鍏ㄩ儴</el-button>
+ </div>
+ <div class="flex-list">
+ <div v-if="!hasNewVersionSdk.length" class="empty-tip">鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯...</div>
+ <div class="wrap-box" v-for="item in hasNewVersionSdk" :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.upgradeLoading"
+ :element-loading-text="item.progressMsg"
+ 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="left-top">
+ <div>褰撳墠鐗堟湰:{{item.version}}</div>
+ <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+ </div>
+ <div class="info-onmask">鏌ョ湅璇︽儏</div>
+ <div class="mask-btn">
+ <el-button
+ @click="unLoadSdk(item)"
+ type="primary"
+ size="small"
+ class="bot-btn"
+ >鍗歌浇</el-button>
+ <el-button
+ v-if="item.isUpgrade"
+ @click="donwload(item)"
+ 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.sdk_name}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="flex-title">
+ <p class="src-title">搴旂敤杞欢</p>
+ <el-button @click="batchUpdate('app')" type="primary" size="mini">鏇存柊鍏ㄩ儴</el-button>
+ </div>
+ <div class="flex-list">
+ <div v-if="!hasNewVersionApp.length" class="empty-tip">鏆傛棤鏁版嵁锛岃绋嶅悗閲嶈瘯...</div>
+ <div class="wrap-box" v-for="item in hasNewVersionApp" :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.progressMsg"
+ element-loading-background="rgba(0,0,0,.8)"
+ >
+ <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
+ <div class="mask">
+ <div class="left-top">
+ <div>褰撳墠鐗堟湰:{{item.version}}</div>
+ <div v-if="item.remoteVersion">鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
+ </div>
+ <div class="info-onmask">鏌ョ湅璇︽儏</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>
+ </div>
+ </el-tab-pane>
</el-tabs>
</div>
</div>
@@ -470,11 +595,62 @@
<el-button type="primary" @click="offlineInstall">瀹� 瑁�</el-button>
</div>
</el-dialog>
+ <!-- <div class="draggable-box" v-if="productDetailShow" > -->
+ <div class="draggable-box" v-if="false" >
+ <div class="box-top">
+ <div class="top-left">
+ <div class="banner">
+ <!-- <el-carousel
+ ref="carousel"
+ :autoplay="false"
+ indicator-position="none"
+ :arrow="curCheckTarget.pics.length > 1 ? 'always' : 'never'"
+ @change="changeHandle"
+ >
+ <el-carousel-item v-for="(item, index) in curCheckTarget.pics" :key="index">
+ <div class="imgwrap">
+ <img
+ v-if="item.type=='image'"
+ :src="'/httpImage/'+item.url"
+ class="cursor-pointer"
+ preview
+ />
+ <video v-if="item.type=='video'" :src="'/httpImage/'+item.url" controls></video>
+ </div>
+ </el-carousel-item>
+ </el-carousel> -->
+ </div>
+ </div>
+ <div class="top-right">
+ <div class="summary">
+ <div class="icon"></div>
+ <div class="name"></div>
+ <!-- <div class="tags">
+ <span
+ class="tag"
+ v-for="(id, index) in data.productLabelId"
+ :key="index+'i'"
+ >{{showNameById(id)}}</span>
+ </div> -->
+ <div class="btns">
+ <el-button size="mini">鍗囩骇</el-button>
+ <el-button size="mini">鍗歌浇</el-button>
+ <el-button size="mini">鎵撳紑</el-button>
+ </div>
+ </div>
+ <div class="product-intruduction">
+ <div class="title">浜у搧绠�浠�</div>
+
+ </div>
+ </div>
+ </div>
+ <div class="box-bot"></div>
+ </div>
</div>
</template>
<script>
-import { findAllSdk, downloadSdk, installSdk, getInstallInfo, removeSdk} from "./api";
+import { findAllSdk, downloadSdk, installSdk, getInstallInfo, removeSdk } from "./api";
import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";
import FileUploader from "@/components/subComponents/FileUpload/index";
@@ -485,6 +661,9 @@
FileUploader
},
computed: {
+ updateNum(){
+ return this.hasNewVersionApp.length+this.hasNewVersionSdk.length
+ },
// notInstalledList () {
// return this.sdkList.filter(sdk => {
// return sdk.installed === false;
@@ -505,7 +684,7 @@
// });
// return arr;
// },
- isAdmin() {
+ isAdmin () {
if (
sessionStorage.getItem("userInfo") &&
sessionStorage.getItem("userInfo") !== ""
@@ -517,11 +696,13 @@
return false;
},
},
- data() {
+ data () {
return {
sdkList: [],
installedList: [],
- ungradeList: [],
+ hasNewVersionSdk: [],
+ updateNum: 0,
+ hasNewVersionApp: [],
notInstalledList: [],
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
activeName: "myAlgorithm",
@@ -560,6 +741,8 @@
appUpgreading: true,
sdkUpgreading: true,
autoRefresh: true,
+ curCheckTarget: {},
+ productDetailShow: false,
}
},
directives: {
@@ -569,22 +752,37 @@
}
}
},
- mounted() {
+ mounted () {
// 鑾峰彇鎵�鏈夊簲鐢�
this.autoRefreshAppAndSdkState();
this.getUnActivedList();
this.getUnActivedAppList();
},
- beforeDestroy() {
+ beforeDestroy () {
this.autoRefresh = false;
},
methods: {
- isShow(authority) {
+ isShow (authority) {
return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
},
+ batchUpdate(type){
+ if(type=="sdk"){
+ this.hasNewVersionSdk.forEach(sdk=>{
+ this.donwload(sdk)
+ })
+ }else{
+ this.hasNewVersionApp.forEach(app=>{
+ this.downloadApp(app,'upgrade')
+ })
+ }
+ },
+ checkDetail (item) {
+ this.curCheckTarget = item;
+ this.productDetailShow = true;
+ },
//绂荤嚎瀹夎
- offlineInstall() {
+ offlineInstall () {
this.installDialogVisible = false;
this.isInstall = true;
//瀹夎
@@ -613,7 +811,7 @@
});
})
},
- downloadApp(app, action) {
+ downloadApp (app, action) {
if (action == 'upgrade') {
app.upgradeLoading = true;
} else {
@@ -655,10 +853,10 @@
// 寮�鍚嚜鍔ㄥ埛鏂�
this.appUpgreading = true;
},
- async getAllApps() {
+ async getAllApps () {
let iArry = []
let sArry = []
-
+ let nArry = []
let rsp = await getApps();
if (rsp && rsp.success) {
// 閬嶅巻app鐨勮繃绋嬮噸缃�
@@ -671,19 +869,19 @@
this.appUpgreading = true;
}
-
- item.installed ? iArry.push(obj) : sArry.push(obj)
+ item.installed ? iArry.push(obj) : sArry.push(obj);
+ item.isUpgrade && nArry.push(obj)
});
}
-
this.installedApps = iArry;
this.storeApps = sArry;
+ this.hasNewVersionApp = nArry;
},
//鍗歌浇绠楁硶
- unLoadSdk(sdk){
+ unLoadSdk (sdk) {
let _this = this;
- this.$confirm('纭畾瑕佸嵏杞借绠楁硶鍚�?','鎻愮ず').then(()=>{
- sdk.unloadLoading = true;
+ this.$confirm('纭畾瑕佸嵏杞借绠楁硶鍚�?', '鎻愮ず').then(() => {
+ sdk.unloadLoading = true;
removeSdk({ sdkId: sdk.id }).then(res => {
if (res && res.success) {
sdk.unloadLoading = false;
@@ -696,15 +894,15 @@
console.log(e);
sdk.unloadLoading = false;
})
- }).catch( e => {
+ }).catch(e => {
console.log(e)
})
},
//鍗歌浇搴旂敤
- unLoad(app) {
+ unLoad (app) {
let _this = this;
- this.$confirm('纭畾瑕佸嵏杞借搴旂敤鍚�?','鎻愮ず').then(()=>{
- app.unloadLoading = true;
+ this.$confirm('纭畾瑕佸嵏杞借搴旂敤鍚�?', '鎻愮ず').then(() => {
+ app.unloadLoading = true;
removeApp({ appId: app.id }).then(res => {
if (res && res.success) {
app.unloadLoading = false;
@@ -717,7 +915,7 @@
console.log(e);
app.unloadLoading = false;
})
- }).catch( e => {
+ }).catch(e => {
console.log(e)
})
},
@@ -728,7 +926,7 @@
// this.activeCode = '';
// this.activedSdkOrApp = this.newActInfo()
// },
- actSdkOrApp(id, type = 'sdk') {
+ actSdkOrApp (id, type = 'sdk') {
this.actType = type;
this.actId = id;
this.actDrawerShow = true;
@@ -736,7 +934,7 @@
this.activeCode = '';
this.activedSdkOrApp = this.newActInfo()
},
- newActInfo() {
+ newActInfo () {
return {
activateCode: '',
productName: '',
@@ -746,7 +944,7 @@
devIds: ''
}
},
- getUnActivedList() {
+ getUnActivedList () {
getUnActivedSdk().then(res => {
if (res.code == 200) {
this.unActivedSDKList = res.data;
@@ -754,14 +952,14 @@
})
},
- getUnActivedAppList() {
+ getUnActivedAppList () {
getUnActivedApp().then(res => {
if (res.code == 200) {
this.unActivedAppList = res.data;
}
});
},
- actived() {
+ actived () {
let _this = this;
if (this.actType == 'sdk') {
//婵�娲荤畻娉�
@@ -799,12 +997,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;
@@ -841,13 +1039,14 @@
},
- onFileAdded(f) {
+ onFileAdded (f) {
this.patchUpdateStatus = "";
},
- async getAllSdk() {
+ async getAllSdk () {
let installedList = [];
let unInstalledList = [];
+ let hasNewVersionList = [];
let res = await findAllSdk();
if (res && res.success) {
this.sdkUpgreading = false;
@@ -867,9 +1066,10 @@
}
this.installedList = installedList;
this.notInstalledList = unInstalledList;
+ this.hasNewVersionSdk = hasNewVersionList;
},
- donwload(item) {
+ donwload (item) {
item.upgradeLoading = true;
//this.downloading = true;
this.downloadItem = item.id;
@@ -896,14 +1096,14 @@
// 寮�鍚嚜鍔ㄥ埛鏂�
this.sdkUpgreading = true;
},
- inputBlur(item) {
+ inputBlur (item) {
// console.log(item, '淇敼鍚嶇О')
this.$set(item, "isEdit", false);
},
- handleTabClick() {
+ handleTabClick () {
},
- autoRefreshAppAndSdkState() {
+ autoRefreshAppAndSdkState () {
// 鍏抽棴鍚庨��鍑�
if (!this.autoRefresh) {
return;
@@ -959,7 +1159,22 @@
height: 100%;
}
}
-
+.flex-title{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.draggable-box{
+ width: 1000px;
+ height: 600px;
+ background: aqua;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+}
.el-loading-mask .el-loading-spinner {
top: 40px !important;
}
@@ -990,12 +1205,20 @@
.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;
font-size: 15px;
padding-left: 25px;
+}
+.update-badge .el-badge__content.is-fixed {
+ top: 10px;
+ right: 4px;
+}
+.empty-tip {
+ padding-left: 25px;
+ color: #ccc;
}
.task-manage {
height: 100%;
@@ -1015,7 +1238,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 {
@@ -1086,6 +1309,7 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ min-height: 200px;
.wrap-box {
width: 16.66%;
}
@@ -1177,16 +1401,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%;
@@ -1245,7 +1469,14 @@
border-radius: 3px;
display: none;
.info-onmask {
- color: #8ecaff;
+ color: #fff;
+ }
+ .left-top {
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ font-size: 12px;
+ color: #90d6ff;
}
.mask-btn {
width: 100%;
--
Gitblit v1.8.0