<template>
|
<div class="Card" v-if="data">
|
<div class="title">
|
<img
|
v-if="data.iconBlob"
|
:src="
|
data.iconBlob.indexOf(',') > 0
|
? data.iconBlob
|
: `data:image/png;base64,${data.iconBlob}`
|
"
|
alt=""
|
/>
|
<img v-else :src="data.icon" alt />
|
<div class="status">
|
<div class="name">{{ data.sdk_name || data.name }}</div>
|
<div class="tagList">
|
<div class="realTime" v-if="realTime">实时</div>
|
<div class="poll" v-if="poll">轮询</div>
|
<div class="analyse" v-if="analyse">正在分析</div>
|
<div class="update" v-if="data.isUpgrade">可升级</div>
|
</div>
|
</div>
|
</div>
|
|
<ul class="info">
|
<li>
|
<div class="label">安装时间:</div>
|
<div class="data">{{ data.create_time }}</div>
|
</li>
|
|
<li>
|
<div class="label">过期时间:</div>
|
<div class="data">-</div>
|
</li>
|
|
<li>
|
<div class="label">激活码:</div>
|
<div class="data" v-if="data.activateCode">{{ data.activateCode }}</div>
|
<div class="data" v-else>-</div>
|
</li>
|
</ul>
|
|
<div class="cardMask">
|
<div class="newVersion" v-if="data.isUpgrade">
|
<div class="now">当前版本: {{ data.version }}</div>
|
<div class="new">最新版本: {{ data.remoteVersion }}</div>
|
</div>
|
<div class="version" v-else>当前为最新版本: {{ data.version }}</div>
|
<div class="btns">
|
<div class="update button" v-if="data.isUpgrade" @click="upgrade">
|
升级
|
</div>
|
<div class="remove button" @click="unInstall">卸载</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
//应用卸载
|
import { unInstallApp } from "@/api/device";
|
//算法升级卸载
|
import { downloadOrUpgrade, unInstall } from "@/api/algorithm";
|
|
export default {
|
props: {
|
data: {},
|
type: {},
|
id: {},
|
},
|
data() {
|
return {
|
realTime: false,
|
poll: false,
|
analyse: false,
|
};
|
},
|
created() {},
|
methods: {
|
//升级
|
async upgrade() {
|
const res = await downloadOrUpgrade({
|
nodeId: this.id,
|
path: this.data.id,
|
userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
|
inputText: data.sdk_name || data.name,
|
});
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "操作成功,请稍后",
|
});
|
}
|
},
|
//卸载
|
unInstall() {
|
this.$confirm(`是否卸载该${this.type == "sdk" ? "算法" : "应用"}`, {
|
confirmButtonText: "确认卸载",
|
cancelButtonText: "取消",
|
type: "warning",
|
customClass: "uninstallBox",
|
})
|
.then(async () => {
|
//卸载算法
|
if (this.type == "sdk") {
|
const res = await unInstall({
|
nodeId: this.id,
|
sdkId: this.data.id,
|
userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
|
});
|
if (res && res.success) {
|
this.$emit("unInstall");
|
this.$notify({
|
type: "success",
|
message: "卸载成功",
|
});
|
}
|
//卸载应用
|
} else if (this.type == "app") {
|
const res = await unInstallApp({
|
nodeId: this.id,
|
appId: this.data.id,
|
});
|
if (res.success) {
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
} else {
|
this.$message({
|
type: "info",
|
message: "删除失败",
|
});
|
}
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.Card {
|
position: relative;
|
width: 293px;
|
height: 204px;
|
background: #ffffff;
|
border: 1px solid #e9ebee;
|
|
.title {
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
padding: 10px;
|
background: #f0f5fa;
|
|
img {
|
margin-right: 10px;
|
width: 60px;
|
}
|
|
.status {
|
.name {
|
margin-top: 4px;
|
margin-bottom: 10px;
|
font-size: 14px;
|
font-weight: 700;
|
}
|
|
.tagList {
|
display: flex;
|
|
div {
|
margin-right: 6px;
|
padding: 2px 5px;
|
}
|
|
.realTime {
|
color: #0065ff;
|
border: 1px solid #0065ff;
|
}
|
|
.poll {
|
color: #ff6a00;
|
border: 1px solid #ff6a00;
|
}
|
|
.analyse {
|
color: #40b63a;
|
border: 1px solid #40b63a;
|
}
|
|
.update {
|
color: #fff;
|
background: #ff9600;
|
}
|
}
|
}
|
}
|
|
.info {
|
box-sizing: border-box;
|
padding: 20px 0 0 20px;
|
|
li {
|
display: flex;
|
margin-bottom: 12px;
|
align-items: center;
|
font-size: 14px;
|
|
.label {
|
color: #999999;
|
}
|
}
|
}
|
|
.cardMask {
|
display: none;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.25);
|
backdrop-filter: blur(3px);
|
text-align: center;
|
font-size: 14px;
|
color: #fff;
|
|
.now {
|
margin-top: 10px;
|
}
|
|
.new {
|
margin-top: 6px;
|
}
|
|
.version {
|
margin-top: 23px;
|
}
|
|
.btns {
|
display: flex;
|
position: absolute;
|
right: 10px;
|
bottom: 10px;
|
|
.update {
|
margin-right: 10px;
|
width: 80px;
|
height: 32px;
|
line-height: 32px;
|
background: #ff9600;
|
font-weight: 700;
|
}
|
|
.remove {
|
width: 80px;
|
height: 32px;
|
line-height: 32px;
|
font-weight: 700;
|
background: #ff4b33;
|
}
|
}
|
}
|
|
&:hover .cardMask {
|
display: block;
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.uninstallBox {
|
width: 380px;
|
height: 108px;
|
padding: 20px;
|
.el-message-box__header {
|
display: none;
|
}
|
|
.el-message-box__status::before {
|
margin-right: 10px;
|
font-size: 24px;
|
color: rgb(255, 75, 51);
|
}
|
|
.el-message-box__message p {
|
color: #3d3d3d;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.el-message-box__btns {
|
margin-top: 25px;
|
}
|
|
.el-button--default {
|
color: #0065ff;
|
border-color: #0065ff;
|
border-radius: 0;
|
|
&:hover {
|
background-color: #fff;
|
}
|
}
|
|
.el-button.el-button--primary {
|
background-color: #0065ff;
|
color: #fff;
|
|
&:hover {
|
background-color: #0065ff;
|
}
|
}
|
}
|
</style>
|
