<template>
|
<div class="algorithmDetail">
|
<IndexHeader :opacity="false"></IndexHeader>
|
<!-- 面包屑 -->
|
<div class="heart">
|
<el-breadcrumb separator=">">
|
<el-breadcrumb-item :to="{ path: '/manageCenter' }"
|
>管理中心</el-breadcrumb-item
|
>
|
<el-breadcrumb-item :to="{ path: '/equipmentList' }"
|
>设备管理</el-breadcrumb-item
|
>
|
<el-breadcrumb-item>算法详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
|
<!-- 第一行 -->
|
<div class="serverInfo">
|
<div class="name">
|
{{ deviceData.devName }}
|
</div>
|
<div class="time">设备当前时间: {{ time }}</div>
|
</div>
|
|
<!-- 应用信息 -->
|
<div class="applicationInfo row">
|
<div class="title">应用信息</div>
|
<div class="infoList">
|
<div
|
class="infoItem"
|
v-for="(item, index) in applicationInfo"
|
:key="index"
|
>
|
<img :src="item.img" alt="" />
|
<div class="data">
|
<div class="label">{{ item.label }}</div>
|
<div class="number" :class="{ red: item.color == 'red' }">
|
<span class="count">{{ item.count }}</span
|
>个
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 算法列表 -->
|
<div class="algorithm row">
|
<div class="title">安装的算法</div>
|
<div class="cardList">
|
<Card
|
v-for="(item, index) in algorithmArr"
|
:key="index"
|
:data="item"
|
:type="'sdk'"
|
:id="id"
|
></Card>
|
</div>
|
<el-select
|
v-model="algorithm"
|
placeholder="请选择"
|
popper-class="algorithmSelect"
|
>
|
<el-option
|
v-for="item in algorithmType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
|
<!-- 应用列表 -->
|
<div class="application row">
|
<div class="title">安装的应用</div>
|
<div class="cardList">
|
<Card
|
v-for="(item, index) in applicationArr"
|
:data="item"
|
:key="index"
|
:type="'app'"
|
:id="id"
|
></Card>
|
</div>
|
<el-select
|
v-model="application"
|
placeholder="请选择"
|
popper-class="applicationSelect"
|
>
|
<el-option
|
v-for="item in applicationType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<Footer :isBlack="true"></Footer>
|
</div>
|
</template>
|
|
<script>
|
import { findAllApp, findAllSdk, findDevDetail, clockInfo } from "@/api/device";
|
|
import IndexHeader from "@/components/IndexHeader";
|
import Footer from "@/components/Footer";
|
import Card from "@/views/equipmentManagement/algorithmDetail/components/Card";
|
export default {
|
created() {
|
this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
|
this.id = this.$route.query.id;
|
this.getData();
|
},
|
data() {
|
return {
|
deviceData: {},
|
userId: null,
|
id: null,
|
applicationInfo: [
|
{
|
label: "算法总数",
|
count: "",
|
img: "/images/equipmentManagement/sdk.png",
|
},
|
{
|
label: "应用总数",
|
count: "",
|
img: "/images/equipmentManagement/app.png",
|
color: "red",
|
},
|
{
|
label: "待升级算法",
|
count: "",
|
img: "/images/equipmentManagement/upgrade.png",
|
},
|
{
|
label: "待升级应用",
|
count: "",
|
img: "/images/equipmentManagement/app_upgrade.png",
|
color: "red",
|
},
|
], //应用信息
|
algorithm: "all", //算法下拉框值
|
algorithmType: [
|
{ value: "all", label: "全部算法" },
|
{ value: "update", label: "待升级算法" },
|
{ value: "process", label: "处理中算法" },
|
], //算法下拉框选项
|
application: "all", //应用下拉框值
|
applicationType: [
|
{ value: "all", label: "全部应用" },
|
{ value: "update", label: "待升级应用" },
|
], //应用下拉框选项
|
|
activeApp: [],
|
upgradeApp: [],
|
activeSdk: [],
|
upgradeSdk: [],
|
enableSdk: [],
|
time: "",
|
};
|
},
|
components: {
|
IndexHeader,
|
Footer,
|
Card,
|
},
|
methods: {
|
//获取数据
|
getData() {
|
this.getApp();
|
this.getSdk();
|
this.getDeviceData();
|
this.getTime();
|
},
|
|
//获取应用列表
|
async getApp() {
|
const res = await findAllApp({ userId: "", nodeId: this.id });
|
res.data.forEach((item) => {
|
if (item.installed) {
|
this.activeApp.push(item);
|
}
|
if (item.installed && item.isUpgrade) {
|
this.upgradeApp.push(item);
|
}
|
if (item.installed && item.enable) {
|
this.enableSdk.push(item);
|
}
|
});
|
|
this.applicationInfo[1].count = this.activeApp.length
|
? this.activeApp.length
|
: 0;
|
this.applicationInfo[3].count = this.upgradeApp.length
|
? this.upgradeApp.length
|
: 0;
|
},
|
|
//获取算法列表
|
async getSdk() {
|
const res2 = await findAllSdk({ userId: "", nodeId: this.id });
|
res2.data.forEach((item) => {
|
if (item.installed) {
|
this.activeSdk.push(item);
|
}
|
if (item.installed && item.isUpgrade) {
|
this.upgradeSdk.push(item);
|
}
|
});
|
|
this.applicationInfo[2].count = this.upgradeSdk.length
|
? this.upgradeSdk.length
|
: 0;
|
this.applicationInfo[0].count = this.activeSdk.length
|
? this.activeSdk.length
|
: 0;
|
},
|
|
//获取设备信息
|
async getDeviceData() {
|
const res3 = await findDevDetail({ devId: this.id });
|
this.deviceData = res3.data;
|
},
|
|
//获取设备时间戳
|
async getTime() {
|
const res = await clockInfo({ userId: this.userId, nodeId: this.id });
|
if (res && res.success) {
|
// const timezone = res.data.time_zone;
|
let timestamp = res.data.local_time;
|
this.time = this.formatTime(++timestamp * 1000, "Y-M-D h:m:s");
|
}
|
},
|
//格式化时间戳
|
formatTime(timestamp, format) {
|
const formatNumber = (n) => {
|
n = n + "";
|
return n[1] ? n : "0" + n;
|
};
|
var formateArr = ["Y", "M", "D", "h", "m", "s"];
|
var returnArr = [];
|
var date = new Date(timestamp);
|
returnArr.push(date.getFullYear());
|
returnArr.push(formatNumber(date.getMonth() + 1));
|
returnArr.push(formatNumber(date.getDate()));
|
returnArr.push(formatNumber(date.getHours()));
|
returnArr.push(formatNumber(date.getMinutes()));
|
returnArr.push(formatNumber(date.getSeconds()));
|
for (var i in returnArr) {
|
format = format.replace(formateArr[i], returnArr[i]);
|
}
|
return format;
|
},
|
},
|
computed: {
|
algorithmArr() {
|
if (this.algorithm == "all") {
|
return this.activeSdk;
|
}
|
|
if (this.algorithm == "update") {
|
return this.upgradeSdk;
|
}
|
|
if (this.algorithm == "process") {
|
return this.enableSdk;
|
}
|
|
return [];
|
},
|
applicationArr() {
|
if (this.application == "all") {
|
return this.activeApp;
|
}
|
|
if (this.application == "update") {
|
return this.upgradeApp;
|
}
|
|
return [];
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.algorithmDetail {
|
background-color: rgb(243, 245, 248);
|
|
.el-breadcrumb {
|
margin-top: 48px;
|
margin-bottom: 24px;
|
|
::v-deep span {
|
color: #666;
|
}
|
}
|
|
.row {
|
box-sizing: border-box;
|
padding: 20px;
|
margin-top: 24px;
|
background-color: #fff;
|
|
.title {
|
padding-left: 10px;
|
margin-bottom: 30px;
|
height: 20px;
|
line-height: 20px;
|
font-size: 16px;
|
font-weight: 700;
|
border-left: 4px solid #0065ff;
|
}
|
}
|
|
.serverInfo {
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 0 20px;
|
margin-top: 20px;
|
width: 1280px;
|
height: 80px;
|
background: #ffffff;
|
|
.name {
|
margin-right: 20px;
|
font-weight: bold;
|
font-size: 18px;
|
}
|
|
.time {
|
color: #666666;
|
font-size: 14px;
|
}
|
}
|
|
.applicationInfo {
|
.infoList {
|
margin-bottom: 44px;
|
display: flex;
|
|
.infoItem {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
margin-right: 20px;
|
width: 72px;
|
}
|
|
.data {
|
.label {
|
font-size: 14px;
|
}
|
|
.number {
|
font-size: 16px;
|
color: #0065ff;
|
|
.count {
|
font-size: 32px;
|
}
|
|
&.red {
|
color: #ff7474;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.algorithm,
|
.application {
|
position: relative;
|
padding-bottom: 0;
|
.cardList {
|
display: flex;
|
flex-wrap: wrap;
|
.Card {
|
margin-right: 20px;
|
margin-bottom: 30px;
|
|
&:nth-child(4n) {
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
|
.application {
|
margin-bottom: 60px;
|
}
|
|
.el-select {
|
top: 20px;
|
right: 20px;
|
position: absolute;
|
width: 120px;
|
height: 32px;
|
|
::v-deep input:focus {
|
border-color: #0065ff;
|
}
|
|
::v-deep .el-input.is-focus .el-input__inner {
|
border-color: #0065ff;
|
}
|
|
::v-deep input {
|
border-radius: 0;
|
height: 32px;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.algorithmSelect.el-select-dropdown.el-popper {
|
margin: 0;
|
|
.el-scrollbar {
|
width: 120px;
|
height: 96px;
|
}
|
|
.el-select-dropdown__wrap {
|
overflow-x: hidden;
|
}
|
|
.popper__arrow,
|
.popper__arrow::after {
|
display: none;
|
}
|
|
.el-select-dropdown__list {
|
padding: 0;
|
|
.el-select-dropdown__item {
|
padding-left: 10px;
|
width: 120px;
|
height: 32px;
|
border-radius: 4px;
|
color: #3d3d3d !important;
|
font-weight: normal !important;
|
font-size: 14px;
|
|
&:hover {
|
background-color: #f0f5fa;
|
|
span {
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.el-icon-arrow-up:before {
|
font-size: 18px;
|
}
|
}
|
|
.applicationSelect.el-select-dropdown.el-popper {
|
margin: 0;
|
|
.el-scrollbar {
|
width: 120px;
|
height: 64px;
|
}
|
|
.el-select-dropdown__wrap {
|
overflow-x: hidden;
|
}
|
|
.popper__arrow,
|
.popper__arrow::after {
|
display: none;
|
}
|
|
.el-select-dropdown__list {
|
padding: 0;
|
|
.el-select-dropdown__item {
|
padding-left: 10px;
|
width: 120px;
|
height: 32px;
|
border-radius: 4px;
|
color: #3d3d3d !important;
|
font-weight: normal !important;
|
font-size: 14px;
|
|
&:hover {
|
background-color: #f0f5fa;
|
|
span {
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.el-icon-arrow-up:before {
|
font-size: 18px;
|
}
|
}
|
</style>
|
