<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 }}
|
<el-badge
|
v-if="index == 3"
|
class="update-badge"
|
:value="updateNum"
|
:hidden="updateNum == 0"
|
></el-badge>
|
</div>
|
</div>
|
<div class="nav-box-search">
|
<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="所有场景"
|
>
|
<el-option label="铁路场景" value="1"></el-option>
|
<el-option label="安全场景" value="2"></el-option>
|
<el-option label="通用场景" value="3"></el-option>
|
<el-option label="校园园区" value="4"></el-option>
|
</el-select>
|
</el-input>
|
</div>
|
|
<div class="bg-img-wrap">
|
<img src="/images/appCenter/app-banner.jpg" alt="" />
|
</div>
|
</div>
|
<div class="quick-path" v-if="showQuickPath">
|
<div
|
class="quick-item"
|
v-for="(item, index) in recomandUpdateList"
|
:key="index"
|
@click="checkDetail(item, 'active')"
|
>
|
<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-icon">
|
<span class="icon iconfont"></span>
|
</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)"
|
>
|
<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"
|
round
|
@click="checkDetail(item)"
|
v-if="activeName == '应用中心'"
|
>激活</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
round
|
v-if="
|
activeName == '已激活' &&
|
(activeTab == 'sdk' ||
|
(activeTab == 'app' && !item.isDefault))
|
"
|
@click.stop="unLoadSdkOrApp(item)"
|
>卸载</el-button
|
>
|
|
<el-button
|
size="small"
|
type="primary"
|
round
|
v-if="
|
activeName == '已激活' &&
|
activeTab == 'app' &&
|
item.isDefault &&
|
!item.isUpgrade
|
"
|
>查看</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
round
|
v-if="
|
activeName == '已激活' &&
|
activeTab == 'app' &&
|
item.isDefault &&
|
item.isUpgrade
|
"
|
>升级</el-button
|
>
|
</div>
|
</div>
|
|
<div
|
class="front-page-item item-dimmed"
|
v-for="(item, index) in tempDarkList"
|
:key="index"
|
>
|
<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"
|
round
|
@click="donwload(item)"
|
>安装</el-button
|
>
|
</div>
|
</div>
|
</div>
|
|
<div class="upload-pkg">
|
|
<div class="upload-head">
|
<div class="left">
|
<span class="icon iconfont"></span>
|
<span class="txt">上传安装软件</span>
|
</div>
|
<div class="right">
|
<span class="icon iconfont"></span>
|
<span class="icon iconfont"></span>
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
</div>
|
|
<detailPage
|
:detailProductID="detailProductID"
|
:detailType="detailType"
|
v-if="inDetail"
|
@goback="goback"
|
></detailPage>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
findAllSdk,
|
downloadSdk,
|
installSdk,
|
getInstallInfo,
|
removeSdk,
|
} from "./api";
|
import {
|
getApps,
|
installApp,
|
getAppDetail,
|
removeApp,
|
getUnActivedSdk,
|
actPageAlg,
|
getUnActivedApp,
|
actApp,
|
} from "@/api/app";
|
import { getUrlKey } from "@/api/utils";
|
import FileUploader from "@/components/subComponents/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;
|
},
|
recomandUpdateList() {
|
if (this.activeTab == "sdk") {
|
return this.hasNewVersionSdk.slice(0, 3);
|
} else {
|
return this.hasNewVersionApp.slice(0, 3);
|
}
|
},
|
},
|
data() {
|
return {
|
installedList: [],
|
hasNewVersionSdk: [],
|
activeTab: "sdk",
|
hasNewVersionApp: [],
|
tempDarkList: [],
|
notInstalledList: [],
|
detailType: "",
|
detailProductID: "",
|
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: true,
|
sdkUpgreading: true,
|
autoRefresh: true,
|
productDetailVisible: false,
|
isUpgrading: false,
|
productDetail: {},
|
otherProducts: [],
|
backStack: [],
|
toUpdateArr1: [],
|
forwardStack: [],
|
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;
|
},
|
isShow(authority) {
|
return (
|
this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
|
);
|
},
|
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.donwload(sdk, 0);
|
});
|
},
|
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) {
|
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 = [];
|
}
|
},
|
closeDial() {
|
this.productDetailVisible = false;
|
this.productDetail = {};
|
this.otherProducts = [];
|
},
|
checkDetail(item, typ) {
|
this.inDetail = true;
|
this.detailProductID = item.id;
|
if (typ) {
|
this.detailType = typ;
|
} else {
|
this.detailType = this.activeName == "应用中心" ? "inactive" : "active";
|
}
|
},
|
resetStack() {
|
this.forwardStack = [];
|
this.backStack = [];
|
this.backDisable = true;
|
this.forwardDisable = true;
|
},
|
checkInWindow(item) {
|
this.backStack.push([this.productDetail, this.otherProducts]);
|
this.backDisable = false;
|
this.checkIsDefOrNot(item.id);
|
|
let _this = this;
|
getAppDetail({ id: item.id }).then((res) => {
|
_this.productDetail = res.data.detail;
|
_this.productDetail.iconBlob = item.iconBlob;
|
this.actId = _this.productDetail.productBaseId;
|
let flag = false;
|
const allNeedToNew = [
|
...this.hasNewVersionSdk,
|
...this.hasNewVersionApp,
|
];
|
for (let i = 0; i < allNeedToNew.length; i++) {
|
const item = allNeedToNew[i];
|
if (item.id == _this.productDetail.productBaseId) {
|
flag = true;
|
}
|
}
|
this.needToUpgradeInWin = flag;
|
_this.productDetail.isUpgrade = flag;
|
|
_this.otherProducts = res.data.randoms;
|
});
|
},
|
checkIsDefOrNot(id) {
|
if (id.length > 10) {
|
this.isDefaultApp = false;
|
} else {
|
this.isDefaultApp = true;
|
}
|
},
|
backwards() {
|
if (this.backStack.length == 0) {
|
this.backDisable = true;
|
return;
|
}
|
this.forwardStack.push([this.productDetail, this.otherProducts]);
|
let item = this.backStack.pop();
|
this.productDetail = item[0];
|
this.checkIsDefOrNot(this.productDetail.productBaseId);
|
this.otherProducts = item[1];
|
this.forwardDisable = false;
|
if (this.backStack.length == 0) {
|
this.backDisable = true;
|
}
|
},
|
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({
|
type: "success",
|
message: '安装成功,将跳转至"已激活"中查看',
|
});
|
setTimeout(() => {
|
this.getAllSdk();
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
|
this.activeName = "已激活";
|
}, 3000);
|
}
|
})
|
.catch((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) {
|
_this.$notify({
|
title: "成功",
|
message: "安装应用成功",
|
type: "success",
|
});
|
setTimeout(() => {
|
if (action == "upgrade") {
|
app.upgradeLoading = false;
|
} else {
|
app.installLoading = false;
|
}
|
window.parent.postMessage({ msg: "AppUpdate" }, "*");
|
}, 3000);
|
} else {
|
}
|
})
|
.catch((e) => {
|
_this.$notify({
|
title: "安装失败",
|
message: e.data,
|
type: "warning",
|
});
|
if (action == "upgrade") {
|
app.upgradeLoading = false;
|
} else {
|
app.installLoading = 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.upgradeLoading = true;
|
|
this.appUpgreading = true;
|
}
|
|
if (obj.upgradeDone) {
|
this.$notify({
|
type: "success",
|
message: 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({
|
title: "成功",
|
message: "卸载应用成功",
|
type: "success",
|
});
|
}
|
})
|
.catch((e) => {
|
app.unloadLoading = false;
|
});
|
})
|
.catch((e) => {});
|
},
|
toActivatePage(item) {
|
this.checkDetail(item, "inactive");
|
this.actType = this.activeTab;
|
this.actId = item.id;
|
this.actStep = 0;
|
this.activeCode = "";
|
this.activedSdkOrApp = this.newActInfo();
|
},
|
cancelActivate() {
|
this.showInputCode = false;
|
this.activeCode = "";
|
},
|
newActInfo() {
|
return {
|
activateCode: "",
|
productName: "",
|
setting: "",
|
expireTime: "",
|
licence: "",
|
devIds: "",
|
};
|
},
|
getUnActivedList(v) {
|
getUnActivedSdk().then((res) => {
|
if (res.code == 200) {
|
this.unActivedSDKList = res.data;
|
v == 1 ? (this.tempList = res.data) : null;
|
}
|
});
|
},
|
getUnActivedAppList() {
|
getUnActivedApp().then((res) => {
|
if (res.code == 200) {
|
this.unActivedAppList = res.data;
|
}
|
});
|
},
|
actived() {
|
let _this = this;
|
if (this.activeCode.trim() == "") {
|
this.$notify.error("激活码不能为空");
|
return;
|
}
|
if (this.actType == "sdk") {
|
//激活算法
|
actPageAlg(this.actId, this.activeCode)
|
.then((res) => {
|
if (res.data.isSuccess) {
|
this.productDetailVisible = false;
|
_this.activedSdkOrApp = res.data.successMsg;
|
this.showActivateSuccess = true;
|
_this.actStep++;
|
_this.getUnActivedList();
|
_this.getAllSdk();
|
} else {
|
_this.$notify.error(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.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);
|
});
|
}
|
},
|
checkMyAlgorith() {
|
this.showActivateSuccess = false;
|
this.activeName = "已激活";
|
},
|
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);
|
});
|
},
|
openApp() {
|
window.parent.postMessage(
|
{ msg: "toOpenApp?" + this.productDetail.productBaseId },
|
"*"
|
);
|
},
|
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.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;
|
},
|
unloadSDKinWin() {
|
let appToUnload;
|
let sdkToUnload;
|
if (this.productDetail.productTypeName == "应用") {
|
appToUnload = this.installedApps.find((item) => {
|
return item.id == this.productDetail.productBaseId;
|
});
|
this.unloadApp(appToUnload);
|
} else {
|
sdkToUnload = this.installedList.find((item) => {
|
return item.id == this.productDetail.productBaseId;
|
});
|
this.unloadSdk(sdkToUnload);
|
}
|
},
|
unLoadSdkOrApp(item) {
|
this.activeTab == "sdk" ? this.unloadSdk(item) : this.unloadApp(item);
|
},
|
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) => {});
|
},
|
upgradeSDKinWin() {
|
this.isUpgrading = !this.isUpgrading;
|
let _this = this;
|
if (this.productDetail.productTypeName == "应用") {
|
installApp({ path: this.productDetail.productBaseId })
|
.then((res) => {
|
if (res && res.success) {
|
this.$notify.success("升级完成");
|
this.needToUpgradeInWin = false;
|
this.productDetail.isUpgrade = false;
|
this.isUpgrading = !this.isUpgrading;
|
}
|
})
|
.catch((e) => {
|
this.$notify.warning("升级失败");
|
this.isUpgrading = !this.isUpgrading;
|
});
|
|
// 开启自动刷新
|
this.appUpgreading = true;
|
} else {
|
downloadSdk({ path: this.productDetail.productBaseId })
|
.then((res) => {
|
this.needToUpgradeInWin = false;
|
this.productDetail.isUpgrade = false;
|
this.isUpgrading = !this.isUpgrading;
|
this.$notify.success("升级完成");
|
})
|
.catch((err) => {
|
this.$notify.warning("升级失败");
|
this.isUpgrading = !this.isUpgrading;
|
});
|
this.sdkUpgreading = true;
|
}
|
},
|
downloadSdkInSide() {
|
this.downloadItem = this.productDetail.productBaseId;
|
this.isUpgrading = true;
|
downloadSdk({ path: this.productDetail.productBaseId })
|
.then((rsp) => {
|
this.productDetailVisible = false;
|
this.downloadItem = "";
|
this.$notify.success("算法已安装");
|
this.isUpgrading = false;
|
})
|
.catch((err) => {
|
this.$notify.warning(err.data);
|
this.downloadItem = "";
|
this.isUpgrading = false;
|
});
|
// 开启自动刷新
|
this.sdkUpgreading = true;
|
},
|
donwload(item) {
|
item.upgradeLoading = true;
|
this.downloadItem = item.id;
|
downloadSdk({ path: item.id })
|
.then((rsp) => {
|
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;
|
},
|
inputBlur(item) {
|
this.$set(item, "isEdit", false);
|
},
|
autoRefreshAppAndSdkState() {
|
// 关闭后退出
|
if (!this.autoRefresh) {
|
return;
|
}
|
if (this.appUpgreading) {
|
this.getAllApps();
|
}
|
if (this.sdkUpgreading) {
|
this.getAllSdk();
|
}
|
let _this = this;
|
setTimeout(() => {
|
_this.autoRefreshAppAndSdkState();
|
}, 500);
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.s-task-manage {
|
width: 100% !important;
|
height: 100%;
|
box-sizing: border-box;
|
text-align: left;
|
min-width: 1106px;
|
}
|
.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;
|
}
|
|
.update-badge .el-badge__content.is-fixed {
|
top: 10px;
|
right: 4px;
|
}
|
|
.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;
|
.el-badge__content {
|
border-radius: 50%;
|
font-size: 12px;
|
height: 14px;
|
line-height: 14px;
|
padding: 0px 3px;
|
}
|
}
|
.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;
|
// transition: transform .3s cubic-bezier(.645,.045,.355,1);
|
color: #333;
|
}
|
}
|
.nav-box-search {
|
z-index: 99;
|
.el-input {
|
position: relative;
|
font-size: 12px;
|
border: 2px solid #f2f2f7;
|
border-radius: 20px;
|
.el-input__inner {
|
border: none;
|
height: 30px;
|
line-height: 30px;
|
}
|
.el-input-group__prepend {
|
border-right: 0;
|
border: none;
|
border-radius: 20px;
|
background: #fff;
|
padding: 0 25px;
|
i {
|
font-weight: 600;
|
color: #333;
|
font-size: 19px;
|
}
|
}
|
.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: 64px;
|
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;
|
}
|
}
|
.el-input__inner::placeholder {
|
color: rgb(71, 71, 71);
|
// 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: 70px;
|
height: 200px;
|
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;
|
.quick-item {
|
display: flex;
|
cursor: pointer;
|
padding: 2px 20px;
|
height: 52px;
|
box-sizing: border-box;
|
border-right: 1px solid #e0e0e0;
|
.icon-img {
|
width: 48px;
|
height: 48px;
|
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: 5px 0;
|
}
|
}
|
.down-all-btn {
|
// margin-left: 25px;
|
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 60px;
|
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: 15px;
|
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: 30px;
|
.front-page-item {
|
float: left;
|
display: flex;
|
margin-bottom: 30px;
|
padding: 2px 0;
|
height: 60px;
|
box-sizing: border-box;
|
width: 278px;
|
justify-content: center;
|
cursor: pointer;
|
border-radius: 6px;
|
.icon-img {
|
width: 58px;
|
height: 58px;
|
img {
|
width: 58px;
|
height: 58px;
|
}
|
}
|
.desc {
|
box-sizing: border-box;
|
padding: 0 12px;
|
width: 140px;
|
.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: 5px 0;
|
.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-item:hover {
|
background: linear-gradient(
|
180deg,
|
#ecfcfe 0%,
|
#ebf4fd 47.92%,
|
#f4f4fe 100%
|
);
|
}
|
.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: 10px;
|
font-size: 17px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.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);
|
}
|
}
|
|
.list-choose-item {
|
cursor: pointer;
|
position: relative;
|
font-size: 14px;
|
display: inline-block;
|
@media screen and(min-width: 1640px) {
|
margin: 30px 20px 20px 20px;
|
}
|
@media screen and(min-width: 1460px) and(max-width: 1640px) {
|
margin: 30px 20px 20px 10px;
|
}
|
@media screen and(max-width: 1460px) {
|
margin: 30px 10px 20px 10px;
|
}
|
min-width: 126px;
|
height: 120px;
|
transition: all 1s;
|
background: #fff;
|
border: 1px solid #e2e2e2;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 4px;
|
}
|
.list-choose-item:hover {
|
.mask {
|
display: block;
|
}
|
}
|
|
.list-choose-item-left {
|
cursor: pointer;
|
position: relative;
|
font-size: 14px;
|
|
transition: all 1s;
|
border-radius: 4px;
|
p {
|
display: none;
|
text-align: right;
|
width: 100%;
|
position: absolute;
|
right: 10px;
|
top: 5px;
|
}
|
.click-download {
|
position: absolute;
|
left: 80%;
|
top: 5%;
|
}
|
}
|
.list-choose-item-left:hover {
|
.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;
|
}
|
}
|
}
|
.list-choose-item-left-uninstal {
|
color: gray;
|
filter: grayscale(100%);
|
}
|
.list-complete-item.sortable-chosen {
|
background: #4ab7bd;
|
}
|
.list-choose-item.sortable-ghost {
|
background: #30b08f;
|
}
|
|
.list-choose-header {
|
position: relative;
|
width: 74px;
|
height: 74px;
|
background-image: linear-gradient(-137deg, #7076f2 0%, #3d63e1 100%);
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 37px;
|
margin: 10px 25px;
|
}
|
|
.b-top {
|
width: 100%;
|
padding-top: 10px;
|
}
|
.b-bottom {
|
width: 100%;
|
border-bottom: 1px solid rgba(24, 28, 33, 0.5);
|
}
|
.i-set-right {
|
position: absolute;
|
left: 80px;
|
top: -11px;
|
font-size: 24px;
|
}
|
.i-remove-right {
|
position: absolute;
|
right: -1px;
|
top: -11px;
|
font-size: 24px;
|
color: red;
|
}
|
.alg-t {
|
line-height: 31px;
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
}
|
.alg-name {
|
line-height: 20px;
|
font-family: PingFangSC-Regular;
|
font-size: 14px;
|
letter-spacing: 0.05em;
|
color: #333;
|
.el-input {
|
position: relative;
|
font-size: 14px;
|
display: inline-block;
|
width: 100%;
|
}
|
}
|
|
.el-input {
|
position: relative;
|
font-size: 14px;
|
// display: inline-block;
|
// width: 80%;
|
}
|
|
.drag-info {
|
min-width: 126px;
|
height: 120px;
|
border: 1px dashed #3d68e1;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 4px;
|
margin: 30px 10px 20px 10px;
|
}
|
|
.el-button--cancle {
|
background: #eaeaea;
|
border-radius: 2px;
|
border-color: #eaeaea;
|
font-family: PingFangSC-Medium;
|
font-size: 13px;
|
color: #222222;
|
margin-right: 12px;
|
}
|
|
.task-name-google {
|
position: relative;
|
top: 30px;
|
width: 126px;
|
height: 120px;
|
border: 1px solid #fff;
|
background: #fff;
|
border-radius: 4px;
|
cursor: pointer;
|
.set-task {
|
display: none;
|
cursor: pointer;
|
}
|
|
.el-switch__core {
|
width: 27px !important;
|
height: 14px;
|
}
|
.el-switch__core:after {
|
width: 10px;
|
height: 10px;
|
}
|
.el-switch.is-checked .el-switch__core::after {
|
left: 100%;
|
margin-left: -11px;
|
}
|
}
|
.task-name-google:hover {
|
.mask {
|
display: block;
|
}
|
}
|
}
|
}
|
</style>
|
|
