<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="inputText" @change="searchAll" 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="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', item.sdk_name)"
|
>
|
<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">
|
<el-tooltip :content="item.sdk_name || item.name" effect="light">
|
<div class="desc-1">{{ item.sdk_name || item.name }}</div>
|
</el-tooltip>
|
<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' : ''"
|
v-show="false"
|
>
|
算法软件
|
</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, null, item.sdk_name)"
|
: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">
|
<el-tooltip :content="item.sdk_name || item.name" effect="light">
|
<div class="desc-1">{{ item.sdk_name || item.name }}</div>
|
</el-tooltip>
|
<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, null, item.sdk_name)"
|
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="remove-btn"
|
round
|
v-if="activeName == '已安装' && !item.isDefault"
|
@click.stop="removeAPP(item)"
|
>卸载</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', item.sdk_name)"
|
>
|
<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">
|
<el-tooltip :content="item.sdk_name || item.name" effect="light">
|
<div class="desc-1">{{ item.sdk_name || item.name }}</div>
|
</el-tooltip>
|
<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
|
:sourceType="3"
|
:isDrag="true"
|
:attrs="{ accept: '.zip,.tar,.gz,.tar.gz' }"
|
tipWords="点击上传"
|
uploadPlaceholder="算法软件"
|
url="/data/api-v/sdk/upload"
|
@complete="onFileUpload"
|
@file-added="onFileAdded"
|
/>
|
</div>
|
</div>
|
</div>
|
|
<!-- 应用详情页 -->
|
<detailPage
|
:detailProductID="detailProductID"
|
:detailType="detailType"
|
:detailPrice="detailPrice"
|
:isSdk="isSdk"
|
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: "app",
|
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: "",
|
inputText: "",
|
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: {
|
searchAll() {
|
this.getAllApps()
|
this.getAllSdk()
|
this.getUnActivedList(1)
|
this.getUnActivedAppList()
|
},
|
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 = "app"
|
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
|
}
|
this.pickTab("app")
|
},
|
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, sdkName) {
|
/* if (!item.canUpOrIns && typ == "Appcenter") {
|
return false;
|
} */
|
this.isSdk = Boolean(sdkName)
|
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('安装成功,将跳转至"已激活"中查看')
|
// this.getAllSdk()
|
setTimeout(() => {
|
this.getAllApps()
|
|
window.parent.postMessage({ msg: "AppUpdate" }, "*")
|
this.activeName = "已安装"
|
}, 3000)
|
}
|
})
|
.catch((e) => {
|
this.isInstall = false
|
this.$message.error(e.msg)
|
})
|
},
|
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.msg)
|
clearInterval(timer)
|
app.upgradeLoading = false
|
})
|
// 开启自动刷新
|
this.appUpgreading = true
|
},
|
async getAllApps() {
|
let iArry = []
|
let sArry = []
|
let nArry = []
|
let rsp = await getApps({ appName: this.inputText })
|
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.$nextTick(() => {
|
this.pickTab("app")
|
})
|
}
|
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({ sdkName: this.inputText }).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({ appName: this.inputText }).then((res) => {
|
if (res.code == 200) {
|
this.unActivedAppList = res.data
|
this.pickTab("app")
|
}
|
})
|
},
|
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) => {})
|
} 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) => {})
|
}
|
},
|
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({ sdkName: this.inputText })
|
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("app")
|
},
|
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)
|
},
|
removeAPP(item) {
|
this.unloadApp(item)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.s-task-manage {
|
width: 100% !important;
|
min-width: 754px !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;
|
}
|
.remove-btn {
|
margin: 10px 0px;
|
background-color: #b6b9b9 !important;
|
border-color: #b9bbbb !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;
|
}
|
}
|
}
|
|
@media screen and (max-width: 800px) {
|
.quick-path .left-items .quick-item:last-child {
|
display: none !important;
|
}
|
.quick-path .left-items .quick-item:nth-child(2) {
|
border: none !important;
|
}
|
}
|
</style>
|
