<template>
|
<div class="s-task-manage">
|
<div style="height: 100%">
|
<div class="flex-box task-manage">
|
<div class="installModel" v-if="isInstall">
|
<div class="progress-bar">
|
<div class="inner-bar"></div>
|
</div>
|
</div>
|
<div class="super">
|
<div class="left-box" v-if="!inDetail">
|
<div class="nav-box">
|
<div class="nav-box-menu">
|
<div
|
v-for="(name, index) in menuArr"
|
:key="index"
|
class="menu-item"
|
:class="activeName == name ? 'menu-item-actiove' : ''"
|
@click="pickMenu(name)"
|
>
|
{{ name }}
|
<sup v-if="index == 3 && updateNum != 0">{{ updateNum }}</sup>
|
</div>
|
</div>
|
<div class="nav-box-search">
|
<span class="icon iconfont all-scene"></span>
|
<el-input
|
placeholder="搜索"
|
v-model="input3"
|
class="input-with-select"
|
>
|
<i class="el-icon-search" slot="prepend"></i>
|
<el-select
|
v-model="select"
|
slot="append"
|
placeholder="选择场景"
|
:popper-append-to-body="false"
|
>
|
<el-option label="铁路场景" value="1">
|
<span class="icon iconfont"></span>
|
<span>铁路场景</span>
|
</el-option>
|
<el-option label="安全场景" value="2">
|
<span class="icon iconfont"></span>
|
<span>安全场景</span>
|
</el-option>
|
<el-option label="通用场景" value="3">
|
<span class="icon iconfont"></span>
|
<span>通用场景</span>
|
</el-option>
|
<el-option label="校园园区" value="4">
|
<span class="icon iconfont"></span>
|
<span>校园园区</span>
|
</el-option>
|
</el-select>
|
</el-input>
|
</div>
|
|
<div class="bg-img-wrap">
|
<img src="/images/appCenter/Group-112.png" alt="" />
|
</div>
|
</div>
|
<div class="quick-path" v-if="showQuickPath">
|
<div class="left-items">
|
<div
|
class="quick-item"
|
v-for="(item, index) in recomandUpdateList"
|
:key="index"
|
@click="checkDetail(item, 'inactive')"
|
>
|
<div class="icon-img">
|
<span class="icon iconfont" v-if="item.isUpgrade"
|
></span
|
>
|
<img
|
v-if="item.iconBlob"
|
:src="
|
item.iconBlob.indexOf(',') > 0
|
? item.iconBlob
|
: `data:image/png;base64,${item.iconBlob}`
|
"
|
alt
|
/>
|
<img v-else :src="item.icon" alt />
|
</div>
|
<div class="desc">
|
<div class="desc-1">{{ item.sdk_name || item.name }}</div>
|
<div class="desc-2">版本 {{ item.version }}</div>
|
</div>
|
<div class="right-icon">
|
<el-tooltip effect="dark" content="下载" placement="bottom">
|
<span class="icon iconfont"></span>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
|
<!-- <div class="down-all-btn">
|
<el-button plain size="small" @click="batchUpdate('both')" round
|
>全部更新</el-button
|
>
|
</div> -->
|
</div>
|
|
<div class="main-content">
|
<!-- <div class="main-title">应用中心</div> -->
|
<div class="tab-btns" v-if="activeName != '离线升级/安装'">
|
<div class="group-left">
|
<div
|
class="tab"
|
@click="pickTab('sdk')"
|
:class="activeTab == 'sdk' ? 'tab-active' : ''"
|
>
|
算法软件
|
</div>
|
<div
|
class="tab"
|
@click="pickTab('app')"
|
:class="activeTab == 'app' ? 'tab-active' : ''"
|
>
|
应用软件
|
</div>
|
</div>
|
|
<div
|
class="batch-update"
|
v-if="activeName == '更新' && tempList.length"
|
>
|
<el-button
|
size="small"
|
type="primary"
|
round
|
@click="batchUpdate"
|
>全部更新</el-button
|
>
|
</div>
|
</div>
|
<div
|
class="front-page-items"
|
v-if="activeName != '离线升级/安装'"
|
>
|
<div
|
class="front-page-item"
|
v-for="(item, index) in tempList"
|
:key="index"
|
@click="checkDetail(item, 'Appcenter')"
|
:class="{
|
disabled: activeName == '应用中心' && !item.canUpOrIns,
|
}"
|
>
|
<div class="icon-img">
|
<span class="icon iconfont" v-if="item.isUpgrade"
|
></span
|
>
|
<img
|
v-if="item.iconBlob"
|
:src="
|
item.iconBlob.indexOf(',') > 0
|
? item.iconBlob
|
: `data:image/png;base64,${item.iconBlob}`
|
"
|
alt
|
/>
|
<img v-else :src="item.icon" alt />
|
</div>
|
<div class="desc">
|
<div class="desc-1">{{ item.sdk_name || item.name }}</div>
|
<div class="desc-2">版本 {{ item.version }}</div>
|
</div>
|
<div class="right-btn">
|
<el-button
|
size="small"
|
type="primary"
|
class="other-btn"
|
round
|
@click="checkDetail(item, 'Appcenter')"
|
v-if="activeName == '应用中心' && item.price > 0"
|
>激活</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
class="update-btn"
|
round
|
@click.stop="actived(item)"
|
v-if="activeName == '应用中心' && item.price == 0"
|
>安装</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
class="check-btn"
|
round
|
v-if="
|
activeName == '已激活' &&
|
((activeTab == 'sdk' && !item.isUpgrade) ||
|
(activeTab == 'app' &&
|
!item.isUpgrade &&
|
!item.isDefault))
|
"
|
>查看</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
class="check-btn"
|
round
|
v-if="
|
activeName == '已激活' &&
|
activeTab == 'app' &&
|
item.isDefault &&
|
!item.isUpgrade
|
"
|
>查看</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
class="other-btn"
|
round
|
v-if="
|
activeName == '已激活' &&
|
activeTab == 'app' &&
|
item.isDefault &&
|
item.isUpgrade
|
"
|
>升级</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
class="update-btn"
|
round
|
@click.stop="donwloadSDK(item)"
|
v-if="
|
(activeName == '更新' || activeName == '已激活') &&
|
activeTab == 'sdk' &&
|
item.isUpgrade &&
|
!item.upgradeLoading
|
"
|
>更新</el-button
|
>
|
<span
|
class="icon iconfont rocket-icon"
|
v-if="
|
activeName == '更新' &&
|
item.isUpgrade &&
|
item.upgradeLoading &&
|
rocketIf
|
"
|
></span
|
>
|
<span
|
class="icon iconfont rocket-icon"
|
v-if="
|
activeName == '更新' &&
|
item.isUpgrade &&
|
item.upgradeLoading &&
|
!rocketIf
|
"
|
></span
|
>
|
<el-button
|
size="small"
|
type="primary"
|
class="update-btn"
|
round
|
@click.stop="downloadApp(item, 'upgrade')"
|
v-if="
|
(activeName == '更新' || activeName == '已激活') &&
|
activeTab == 'app' &&
|
item.isUpgrade &&
|
!item.upgradeLoading
|
"
|
>更新</el-button
|
>
|
|
<div class="status">
|
{{ item.progressMsg }}
|
</div>
|
</div>
|
</div>
|
|
<div
|
class="front-page-item item-dimmed"
|
v-for="(item, index) in tempDarkList"
|
:key="index"
|
@click="checkDetail(item, 'activeNotInstall')"
|
>
|
<div class="icon-img">
|
<img
|
v-if="item.iconBlob"
|
:src="
|
item.iconBlob.indexOf(',') > 0
|
? item.iconBlob
|
: `data:image/png;base64,${item.iconBlob}`
|
"
|
alt
|
/>
|
<img v-else :src="item.icon" alt />
|
</div>
|
<div class="desc">
|
<div class="desc-1">{{ item.sdk_name || item.name }}</div>
|
<div class="desc-2">版本 {{ item.version }}</div>
|
</div>
|
<div class="right-btn">
|
<el-button
|
size="small"
|
type="primary"
|
class="other-btn"
|
round
|
v-if="activeTab == 'sdk' && !item.upgradeLoading"
|
@click.stop="donwloadSDK(item)"
|
>安装</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
class="other-btn"
|
round
|
v-if="activeTab == 'app' && !item.upgradeLoading"
|
@click.stop="downloadApp(item)"
|
>安装</el-button
|
>
|
<div class="spin-icon">
|
<span
|
class="icon iconfont anz-font"
|
v-if="item.upgradeLoading"
|
></span
|
>
|
</div>
|
<div class="status">
|
{{ item.progressMsg }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="upload-pkg" v-if="activeName == '离线升级/安装'">
|
<div class="upload-head">
|
<div class="left">
|
<span class="icon iconfont"></span>
|
<span class="txt">上传安装软件</span>
|
</div>
|
</div>
|
|
<FileUploader
|
class="upload-demo"
|
single
|
tip
|
:isDrag="true"
|
tipWords="点击上传"
|
uploadPlaceholder="算法软件"
|
url="/data/api-v/sdk/upload"
|
@complete="onFileUpload"
|
@file-added="onFileAdded"
|
/>
|
</div>
|
</div>
|
</div>
|
|
<detailPage
|
:detailProductID="detailProductID"
|
:detailType="detailType"
|
:detailPrice="detailPrice"
|
v-if="inDetail"
|
@flushSdk="getAllSdk"
|
@flushApp="getAllApps"
|
@goback="goback"
|
></detailPage>
|
</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>
|
import {
|
findAllSdk,
|
downloadSdk,
|
installSdk,
|
getInstallInfo,
|
removeSdk,
|
uploadSDK,
|
} from "./api";
|
import {
|
getApps,
|
installApp,
|
getAppDetail,
|
removeApp,
|
getUnActivedSdk,
|
actPageAlg,
|
getUnActivedApp,
|
actApp,
|
} from "@/api/app";
|
import { getUrlKey } from "@/api/utils";
|
import FileUploader from "../FileUpload/index";
|
import detailPage from "./detail";
|
export default {
|
name: "algorithmManage",
|
components: {
|
FileUploader,
|
detailPage,
|
},
|
computed: {
|
updateNum() {
|
return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;
|
},
|
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 {
|
installedList: [],
|
recomandUpdateList: [],
|
hasNewVersionSdk: [],
|
activeTab: "sdk",
|
hasNewVersionApp: [],
|
tempDarkList: [],
|
notInstalledList: [],
|
showUpload: false,
|
detailType: "",
|
detailProductID: "",
|
detailPrice: "",
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
|
activeName: "应用中心",
|
patchUpdateStatus: "",
|
downloadItem: "",
|
downloading: false,
|
actStep: 0,
|
showQuickPath: true,
|
showActivateSuccess: false,
|
activeCode: "",
|
isInstall: false,
|
installDialogVisible: false,
|
installAppPackage: null,
|
installSdkPackage: null,
|
isActive: true,
|
isDefaultApp: false,
|
unActivedSDKList: [],
|
unActivedAppList: [],
|
inDetail: false,
|
isSDKDialog: true,
|
actType: "",
|
actId: "",
|
input3: "",
|
tempList: [],
|
select: "",
|
activedSdkOrApp: {
|
activateCode: "",
|
productName: "",
|
setting: "",
|
expireTime: "",
|
licence: "",
|
devIds: "",
|
},
|
installedApps: [],
|
storeApps: [],
|
installFile: {},
|
appUpgreading: false,
|
sdkUpgreading: false,
|
autoRefresh: true,
|
productDetailVisible: false,
|
isUpgrading: false,
|
productDetail: {},
|
otherProducts: [],
|
backStack: [],
|
toUpdateArr1: [],
|
forwardStack: [],
|
rocketIf: false,
|
backDisable: true,
|
forwardDisable: true,
|
showInputCode: false,
|
needToUpgradeInWin: false,
|
showInstallNotActive: false,
|
menuArr: ["应用中心", "已激活", "离线升级/安装", "更新"],
|
};
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector("input").focus();
|
},
|
},
|
},
|
mounted() {
|
var name = getUrlKey("activeName");
|
if (name) {
|
this.pickMenu(name);
|
}
|
this.autoRefreshAppAndSdkState();
|
this.getUnActivedList(1);
|
this.getUnActivedAppList();
|
},
|
beforeDestroy() {
|
this.autoRefresh = false;
|
},
|
methods: {
|
goback() {
|
this.inDetail = false;
|
},
|
batchUpdate(s) {
|
if (s == "both") {
|
this.batchUpdateSDK();
|
this.batchUpdateApp();
|
} else if (this.activeTab == "sdk") {
|
this.batchUpdateSDK();
|
} else {
|
this.batchUpdateApp();
|
}
|
},
|
batchUpdateSDK() {
|
this.hasNewVersionSdk.forEach((sdk) => {
|
this.donwloadSDK(sdk);
|
});
|
},
|
batchUpdateApp() {
|
this.hasNewVersionApp.forEach((app) => {
|
this.downloadApp(app, "upgrade");
|
});
|
},
|
pickMenu(name) {
|
this.activeName = name;
|
this.activeTab = "sdk";
|
this.showQuickPath = true;
|
switch (name) {
|
case "应用中心":
|
this.tempList = this.unActivedSDKList;
|
this.tempDarkList = [];
|
break;
|
case "已激活":
|
this.tempList = this.installedList;
|
this.tempDarkList = this.notInstalledList;
|
break;
|
case "更新":
|
this.showQuickPath = false;
|
this.tempList = this.hasNewVersionSdk;
|
this.tempDarkList = [];
|
break;
|
default:
|
this.tempList = [];
|
this.tempDarkList = [];
|
break;
|
}
|
},
|
pickTab(val) {
|
if (val) {
|
this.activeTab = val;
|
}
|
if (this.activeName == "应用中心") {
|
this.tempList =
|
this.activeTab == "sdk"
|
? this.unActivedSDKList
|
: this.unActivedAppList;
|
this.tempDarkList = [];
|
} else if (this.activeName == "已激活") {
|
this.tempList =
|
this.activeTab == "sdk" ? this.installedList : this.installedApps;
|
this.tempDarkList =
|
this.activeTab == "sdk" ? this.notInstalledList : this.storeApps;
|
} else if (this.activeName == "更新") {
|
this.tempList =
|
this.activeTab == "sdk"
|
? this.hasNewVersionSdk
|
: this.hasNewVersionApp;
|
|
this.tempDarkList = [];
|
}
|
},
|
checkDetail(item, typ) {
|
if (!item.canUpOrIns && typ == "Appcenter") {
|
return false;
|
}
|
|
this.inDetail = true;
|
this.detailProductID = item.id;
|
this.detailPrice = item.price;
|
if (typ) {
|
this.detailType = typ;
|
} else {
|
this.detailType = this.activeName == "应用中心" ? "inactive" : "active";
|
}
|
},
|
checkIsDefOrNot(id) {
|
this.isDefaultApp = id.length <= 10;
|
},
|
forwards() {
|
if (this.forwardStack.length == 0) {
|
this.forwardDisable = true;
|
return;
|
}
|
|
this.backStack.push([this.productDetail, this.otherProducts]);
|
this.backDisable = false;
|
let item = this.forwardStack.pop();
|
|
this.productDetail = item[0];
|
this.otherProducts = item[1];
|
if (this.forwardStack.length == 0) {
|
this.forwardDisable = true;
|
}
|
},
|
offlineInstall() {
|
this.installDialogVisible = false;
|
this.isInstall = true;
|
installSdk(this.installFile)
|
.then((res) => {
|
if (res.success) {
|
this.isInstall = false;
|
this.$message.success('安装成功,将跳转至"已激活"中查看');
|
setTimeout(() => {
|
this.getAllSdk();
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
this.activeName = "已激活";
|
}, 3000);
|
}
|
})
|
.catch((e) => {
|
this.isInstall = false;
|
this.$message.error(e.data);
|
});
|
},
|
downloadApp(app, action) {
|
let timer = null;
|
app.upgradeLoading = true;
|
timer = setInterval(() => {
|
this.rocketIf = !this.rocketIf;
|
}, 350);
|
|
let _this = this;
|
installApp({ path: app.id })
|
.then((res) => {
|
if (res && res.success) {
|
_this.$notify.success("安装应用成功");
|
clearInterval(timer);
|
app.upgradeLoading = false;
|
setTimeout(() => {
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
}, 3000);
|
} else {
|
}
|
})
|
.catch((e) => {
|
_this.$notify.warning(e.data);
|
clearInterval(timer);
|
app.upgradeLoading = false;
|
});
|
// 开启自动刷新
|
this.appUpgreading = true;
|
},
|
async getAllApps() {
|
let iArry = [];
|
let sArry = [];
|
let nArry = [];
|
let rsp = await getApps();
|
if (rsp && rsp.success) {
|
// 遍历app的过程重置
|
this.appUpgreading = false;
|
|
rsp.data.forEach((item) => {
|
let obj = Object.assign(
|
{ unloadLoading: false, upgradeLoading: false },
|
item
|
);
|
if (
|
obj.progressMsg !== "" &&
|
obj.progressMsg !== "已安装" &&
|
obj.progressMsg != "100%"
|
) {
|
obj.upgradeLoading = true;
|
this.appUpgreading = true;
|
}
|
|
if (obj.upgradeDone) {
|
this.$notify.success(1 ? "算法安装成功" : "算法升级成功");
|
}
|
|
item.installed ? iArry.push(obj) : sArry.push(obj);
|
item.isUpgrade && nArry.push(obj);
|
});
|
}
|
this.installedApps = iArry;
|
this.storeApps = sArry;
|
this.hasNewVersionApp = nArry;
|
},
|
unloadApp(app) {
|
let _this = this;
|
this.$confirm("确定要卸载该应用吗?", "提示")
|
.then(() => {
|
_this.productDetailVisible = false;
|
|
app.unloadLoading = true;
|
removeApp({ appId: app.id })
|
.then((res) => {
|
if (res && res.success) {
|
app.unloadLoading = false;
|
_this.getAllApps();
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
_this.$notify.success("卸载应用成功");
|
}
|
})
|
.catch((e) => {
|
app.unloadLoading = false;
|
});
|
})
|
.catch((e) => {});
|
},
|
newActInfo() {
|
return {
|
activateCode: "",
|
productName: "",
|
setting: "",
|
expireTime: "",
|
licence: "",
|
devIds: "",
|
};
|
},
|
getUnActivedList(v) {
|
getUnActivedSdk().then((res) => {
|
if (res.code == 200) {
|
this.unActivedSDKList = res.data;
|
const len = this.unActivedSDKList.length;
|
const set = new Set();
|
if (len <= 3) {
|
this.recomandUpdateList = [...this.unActivedSDKList];
|
} else {
|
for (let i = 0; i < 3; i++) {
|
const pickI = Math.floor(Math.random() * len);
|
if (set.has(pickI)) {
|
i--;
|
continue;
|
}
|
set.add(pickI);
|
this.recomandUpdateList.push(this.unActivedSDKList[pickI]);
|
}
|
}
|
v == 1 ? (this.tempList = res.data) : null;
|
}
|
});
|
},
|
getUnActivedAppList() {
|
getUnActivedApp().then((res) => {
|
if (res.code == 200) {
|
this.unActivedAppList = res.data;
|
this.pickTab();
|
}
|
});
|
},
|
actived(item) {
|
if (!item.canUpOrIns) {
|
return false;
|
}
|
|
let _this = this;
|
if (this.activeTab == "sdk") {
|
actPageAlg(item.id, "")
|
.then((res) => {
|
if (res.data.isSuccess) {
|
this.productDetailVisible = false;
|
_this.activedSdkOrApp = res.data.successMsg;
|
this.showActivateSuccess = true;
|
_this.actStep++;
|
_this.getUnActivedList(1);
|
_this.getAllSdk();
|
} else {
|
_this.$notify.error(res.data.failMsg.failMsg);
|
}
|
})
|
.catch((e) => {
|
console.log(e);
|
});
|
} else if (this.activeTab == "app") {
|
//激活应用
|
actApp(item.id, "")
|
.then((res) => {
|
if (res.data.isSuccess) {
|
this.productDetailVisible = false;
|
_this.activedSdkOrApp = res.data.successMsg;
|
this.showActivateSuccess = true;
|
_this.actStep++;
|
_this.getUnActivedAppList();
|
_this.getAllApps();
|
} else {
|
_this.$notify.error(res.data.failMsg.failMsg);
|
}
|
})
|
.catch((e) => {
|
console.log(e);
|
});
|
}
|
},
|
onFileUpload(file) {
|
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;
|
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,
|
};
|
}
|
} else {
|
this.$message.error(res.msg);
|
}
|
})
|
.catch((e) => {
|
this.$message.error(e.msg);
|
});
|
},
|
onFileAdded(f) {
|
this.patchUpdateStatus = "";
|
},
|
async getAllSdk() {
|
let installedList = [];
|
let unInstalledList = [];
|
let hasNewVersionList = [];
|
let res = await findAllSdk();
|
if (res && res.success) {
|
this.sdkUpgreading = false;
|
|
res.data.forEach((item) => {
|
let obj = Object.assign(
|
{ unloadLoading: false, upgradeLoading: false },
|
item
|
);
|
if (
|
obj.progressMsg !== "" &&
|
obj.progressMsg !== "已安装" &&
|
obj.progressMsg !== "100%"
|
) {
|
obj.upgradeLoading = true;
|
this.sdkUpgreading = true;
|
}
|
|
//算法软件 已安装其中包含待升级 未安装
|
item.installed ? installedList.push(obj) : unInstalledList.push(obj);
|
item.isUpgrade ? hasNewVersionList.push(obj) : null;
|
});
|
}
|
this.installedList = installedList;
|
this.notInstalledList = unInstalledList;
|
this.toUpdateArr1 = this.installedList.slice(0, 10);
|
this.hasNewVersionSdk = hasNewVersionList;
|
this.pickTab();
|
},
|
unloadSdk(sdk) {
|
let _this = this;
|
this.$confirm("确定要卸载该算法吗?", "提示")
|
.then(() => {
|
_this.productDetailVisible = false;
|
sdk.unloadLoading = true;
|
removeSdk({ sdkId: sdk.id })
|
.then((res) => {
|
if (res && res.success) {
|
sdk.unloadLoading = false;
|
this.$notify.success("卸载完成");
|
_this.getAllSdk();
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
}
|
})
|
.catch((e) => {
|
sdk.unloadLoading = false;
|
});
|
})
|
.catch((e) => {});
|
},
|
donwloadSDK(item) {
|
let timer = null;
|
item.upgradeLoading = true;
|
timer = setInterval(() => {
|
this.rocketIf = !this.rocketIf;
|
}, 350);
|
this.downloadItem = item.id;
|
downloadSdk({ path: item.id })
|
.then((rsp) => {
|
clearInterval(timer);
|
item.upgradeLoading = false;
|
this.downloadItem = "";
|
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
})
|
.catch((err) => {
|
this.$notify.warning(err.data);
|
item.upgradeLoading = false;
|
this.downloadItem = "";
|
});
|
// 开启自动刷新
|
this.sdkUpgreading = true;
|
},
|
autoRefreshAppAndSdkState() {
|
this.getAllApps();
|
this.getAllSdk();
|
if (!this.autoRefresh) {
|
return;
|
}
|
setTimeout(() => {
|
if (this.appUpgreading) {
|
this.getAllApps();
|
}
|
if (this.sdkUpgreading) {
|
this.getAllSdk();
|
}
|
}, 1000);
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.s-task-manage {
|
width: 100% !important;
|
height: 100%;
|
box-sizing: border-box;
|
text-align: left;
|
background-color: #fff;
|
}
|
|
.task-manage {
|
height: 100%;
|
.installModel {
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.7);
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 100;
|
.progress-bar {
|
width: 70%;
|
height: 17px;
|
border-radius: 3pxd;
|
background-color: rgb(227, 229, 231);
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
background: url("/images/algo/green.gif");
|
overflow: hidden;
|
transform: translate(-50%, -50%);
|
.inner-bar {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 0;
|
height: 100%;
|
transition: width 3s;
|
background-color: #3d68e1;
|
}
|
}
|
}
|
|
.super {
|
width: 100%;
|
height: 100%;
|
// caret-color: rgba(0, 0, 0, 0);
|
.title {
|
margin-bottom: 10px;
|
line-height: 30px;
|
font-family: PingFangSC-Medium;
|
font-size: 16px;
|
color: #222222;
|
}
|
.left-box {
|
height: 100%;
|
box-sizing: border-box;
|
.nav-box {
|
height: 200px;
|
display: flex;
|
justify-content: space-between;
|
padding: 35px 60px;
|
position: relative;
|
.nav-box-menu {
|
width: 200px;
|
height: 200px;
|
z-index: 99;
|
.menu-item {
|
font-size: 14px;
|
line-height: 50px;
|
height: 50px;
|
letter-spacing: 0.5px;
|
color: #828282;
|
padding-left: 20px;
|
border-left: 3px solid #f3f6fc;
|
cursor: pointer;
|
caret-color: transparent;
|
sup {
|
background-color: #f52323;
|
font-size: 12px;
|
color: #fff;
|
height: 18px;
|
line-height: 18px;
|
padding: 0 3.5px;
|
border-radius: 50%;
|
}
|
}
|
.menu-item:hover {
|
font-weight: 600;
|
color: #333;
|
transition: all 0.15s;
|
}
|
.menu-item-actiove {
|
border-left: 3px solid #23d7ee;
|
font-weight: 700;
|
font-size: 16px;
|
color: #333;
|
}
|
}
|
.nav-box-search {
|
z-index: 99;
|
position: relative;
|
.all-scene {
|
position: absolute;
|
z-index: 100;
|
right: 64px;
|
|
top: 10px;
|
font-size: 12px;
|
}
|
.el-input {
|
position: relative;
|
font-size: 12px;
|
border: 2px solid #f2f2f7;
|
border-radius: 20px;
|
.el-input__inner {
|
border: none;
|
height: 30px;
|
line-height: 30px;
|
padding: 0 12px;
|
}
|
.el-input-group__prepend {
|
border-right: 0;
|
border: none;
|
border-radius: 20px;
|
background: #fff;
|
padding: 0 0 0 15px;
|
|
i {
|
font-weight: 600;
|
color: #333;
|
font-size: 16px;
|
}
|
}
|
.el-input-group--append .el-input__inner,
|
.el-input-group__prepend {
|
border-top-right-radius: 0;
|
border-bottom-right-radius: 0;
|
border: none;
|
}
|
.el-input-group__append {
|
border-left: 0;
|
border: none;
|
border-radius: 20px;
|
width: 52px;
|
background: linear-gradient(
|
180deg,
|
#ecfcfe 0%,
|
#ebf4fd 47.92%,
|
#f4f4fe 100%
|
);
|
.el-input--suffix {
|
border: none;
|
.el-input__icon {
|
line-height: 30px;
|
}
|
.el-input__inner {
|
font-size: 12px;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
padding: 0 0px 0 30px;
|
color: #474747;
|
}
|
.el-input__suffix {
|
display: none;
|
}
|
}
|
.el-input__inner::placeholder {
|
color: rgb(71, 71, 71);
|
}
|
.el-select-dropdown {
|
min-width: 120px !important;
|
left: -26px !important;
|
background: rgba(236, 245, 253, 0.6);
|
border-radius: 2px;
|
border: none;
|
.el-select-dropdown__item {
|
height: 22px;
|
line-height: 22px;
|
font-size: 12px;
|
letter-spacing: 0.4px;
|
color: #333333;
|
.icon {
|
margin-right: 5px;
|
font-size: 15px;
|
}
|
}
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
background-color: #ebf4fd;
|
font-weight: 600;
|
}
|
}
|
}
|
.el-input-group__prepend .el-select {
|
display: inline-block;
|
margin: -10px -20px;
|
border: none;
|
border-radius: 20px;
|
background: linear-gradient(
|
180deg,
|
#ecfcfe 0%,
|
#ebf4fd 47.92%,
|
#f4f4fe 100%
|
);
|
}
|
}
|
}
|
.bg-img-wrap {
|
position: absolute;
|
z-index: 1;
|
right: 0;
|
top: 41px;
|
height: 229px;
|
img {
|
height: 100%;
|
}
|
}
|
}
|
.quick-path {
|
position: relative;
|
height: 200px;
|
margin: 0 60px;
|
z-index: 99;
|
background: linear-gradient(
|
180deg,
|
#ecfcfe 0%,
|
#ebf4fd 47.92%,
|
#f4f4fe 100%
|
);
|
border-radius: 4px;
|
height: 75px;
|
display: flex;
|
align-items: center;
|
.left-items {
|
display: flex;
|
}
|
.quick-item {
|
display: flex;
|
cursor: pointer;
|
padding: 2px 20px;
|
height: 52px;
|
box-sizing: border-box;
|
|
.icon-img {
|
width: 48px;
|
height: 48px;
|
position: relative;
|
.icon {
|
position: absolute;
|
right: -7px;
|
top: -7px;
|
font-size: 13px;
|
}
|
img {
|
width: 48px;
|
height: 48px;
|
}
|
}
|
.desc {
|
box-sizing: border-box;
|
padding: 0 12px;
|
color: #828282;
|
width: 140px;
|
.desc-1 {
|
font-size: 14px;
|
font-weight: bold;
|
line-height: 26px;
|
height: 26px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.desc-2 {
|
font-size: 12px;
|
}
|
}
|
.right-icon {
|
padding: 2px 0;
|
|
.icon {
|
font-size: 21px;
|
}
|
}
|
}
|
.quick-item:not(:last-child) {
|
border-right: 1px solid #e0e0e0;
|
}
|
.down-all-btn {
|
position: absolute;
|
right: 30px;
|
.el-button {
|
width: 78px;
|
font-size: 12px;
|
font-weight: 600;
|
padding: 3px 10px;
|
border: 1px solid #eef0f7;
|
}
|
}
|
}
|
.main-content {
|
padding: 35px 82px;
|
z-index: 99;
|
.main-title {
|
line-height: 25px;
|
font-size: 16px;
|
font-weight: 600;
|
margin-bottom: 10px;
|
}
|
.tab-btns {
|
display: flex;
|
justify-content: space-between;
|
.group-left {
|
display: flex;
|
.tab {
|
font-size: 14px;
|
margin-right: 25px;
|
line-height: 28px;
|
cursor: pointer;
|
color: #828282;
|
}
|
.tab-active {
|
border-bottom: 2px solid #23d7ee;
|
color: #333333;
|
font-weight: bold;
|
}
|
}
|
|
.batch-update {
|
display: flex;
|
align-items: center;
|
.el-button {
|
padding: 3px 12px;
|
background-color: #1dd4ec !important;
|
border-color: #1dd4ec !important;
|
border-radius: 22px;
|
}
|
.el-button--primary:hover {
|
background: #089fb3 !important;
|
border-color: #089fb3 !important;
|
}
|
}
|
}
|
.front-page-items {
|
padding-top: 25px;
|
.front-page-item {
|
float: left;
|
display: flex;
|
margin: 0 5px;
|
margin-bottom: 15px;
|
box-sizing: border-box;
|
width: 274px;
|
|
justify-content: center;
|
cursor: pointer;
|
|
padding: 10px 0;
|
height: 76px;
|
border-radius: 4px;
|
|
&.disabled {
|
cursor: default;
|
}
|
|
.icon-img {
|
width: 58px;
|
height: 58px;
|
position: relative;
|
.icon {
|
position: absolute;
|
right: -9px;
|
top: -9px;
|
font-size: 16px;
|
}
|
img {
|
width: 58px;
|
height: 58px;
|
border-radius: 10px;
|
}
|
}
|
.desc {
|
box-sizing: border-box;
|
padding: 0 12px;
|
width: 147px;
|
|
.desc-1 {
|
font-size: 14px;
|
font-weight: bold;
|
color: #4f4f4f;
|
line-height: 28px;
|
height: 28px;
|
letter-spacing: 0.1px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.desc-2 {
|
color: #828282;
|
font-size: 12px;
|
}
|
}
|
.right-btn {
|
padding: 2px 0;
|
width: 50px;
|
text-align: center;
|
position: relative;
|
.check-btn {
|
background-color: #ffffff !important;
|
border-color: #bdbdbd !important;
|
color: #333333;
|
}
|
.update-btn {
|
border-color: #23d7ee !important;
|
background-color: rgba(29, 212, 236, 0.1) !important;
|
color: #4f4f4f;
|
}
|
.other-btn {
|
background-color: #1dd4ec !important;
|
border-color: #1dd4ec !important;
|
color: #ffffff;
|
}
|
@keyframes spin {
|
from {
|
transform: rotate(0deg);
|
}
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
.anz-font {
|
font-size: 28px;
|
color: #333;
|
}
|
|
.spin-icon {
|
animation: spin 0.8s linear infinite;
|
}
|
.status {
|
font-size: 12px;
|
color: #828282;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
min-width: 100px;
|
text-align: end;
|
position: absolute;
|
right: 0;
|
width: 120px;
|
margin-top: 2px;
|
}
|
.rocket-icon {
|
font-size: 20px;
|
}
|
.el-button {
|
padding: 3px 12px;
|
border-radius: 22px;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
}
|
}
|
}
|
.front-page-item:hover {
|
background-color: #f2f2f7;
|
}
|
.item-dimmed {
|
color: gray;
|
filter: grayscale(100%);
|
}
|
}
|
.front-page-items:after {
|
content: "";
|
display: block;
|
height: 0;
|
clear: both;
|
visibility: hidden;
|
}
|
.upload-pkg {
|
.upload-head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.left {
|
display: flex;
|
align-items: center;
|
.iconfont {
|
font-size: 18px;
|
margin-right: 6px;
|
}
|
.txt {
|
font-size: 16px;
|
}
|
}
|
.right {
|
.icon {
|
margin-right: 11px;
|
font-size: 17px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.upload-demo {
|
margin: 30px 0px;
|
.drag-txt {
|
width: 340px;
|
height: 45px;
|
border: 1px dashed #bdbdbd;
|
display: flex;
|
margin-top: 30px;
|
align-items: center;
|
justify-content: center;
|
color: #828282;
|
font-size: 14px;
|
}
|
.txt-btn {
|
width: 78px;
|
margin-top: 18px;
|
height: 19px;
|
background: #23d7ee;
|
border-radius: 22px;
|
color: #ffffff;
|
font-weight: bold;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
.mask {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.65);
|
backdrop-filter: blur(1px) brightness(100%);
|
text-align: center;
|
z-index: 1;
|
border-radius: 3px;
|
display: none;
|
.info-onmask {
|
color: #fff;
|
}
|
.left-top {
|
position: absolute;
|
left: 5px;
|
top: 5px;
|
font-size: 12px;
|
color: #90d6ff;
|
}
|
.mask-btn {
|
width: 100%;
|
display: flex;
|
}
|
i {
|
color: #fff;
|
position: relative;
|
top: 40%;
|
display: contents;
|
}
|
i:hover {
|
color: rgba(255, 255, 255, 0.685);
|
}
|
}
|
|
.el-input {
|
position: relative;
|
font-size: 14px;
|
// display: inline-block;
|
// width: 80%;
|
}
|
|
.el-button--cancle {
|
background: #eaeaea;
|
border-radius: 2px;
|
border-color: #eaeaea;
|
font-family: PingFangSC-Medium;
|
font-size: 13px;
|
color: #222222;
|
margin-right: 12px;
|
}
|
}
|
}
|
</style>
|
|
