Skip to content

platform / fanxing_new

Go to a project
Commit d64778b8 by 潘建波
Options

fix🐛 设备管理鼠标移入节点鼠标样式变为手势

1 parent 4f65cda7
Inline Side-by-side
Showing 3 changed files with 3 additions and 1219 deletions
src/views/ops/equipment_manage.vue
...@@ -269,6 +269,7 @@ export default { ...@@ -269,6 +269,7 @@ export default {
.size(130, 40) .size(130, 40)
.move(50, 50) .move(50, 50)
.data("sdv", data); .data("sdv", data);
nested.attr({ cursor: "pointer" });
var rect = nested var rect = nested
.rect(130, 40) .rect(130, 40)
.attr({ fill: "#123e6c", opacity: 0.6 }) .attr({ fill: "#123e6c", opacity: 0.6 })
...@@ -315,6 +316,7 @@ export default { ...@@ -315,6 +316,7 @@ export default {
.size(130, 40) .size(130, 40)
.move(point.x, point.y) .move(point.x, point.y)
.data("childsdv", ele); .data("childsdv", ele);
nested.attr({ cursor: "pointer" });
var rect = nested var rect = nested
.rect(130, 40) .rect(130, 40)
.stroke({ color: "#333", opacity: 0.5, width: 1 }) .stroke({ color: "#333", opacity: 0.5, width: 1 })
...@@ -407,6 +409,7 @@ export default { ...@@ -407,6 +409,7 @@ export default {
.size(130, 40) .size(130, 40)
.move(point.x, point.y) .move(point.x, point.y)
.data("childsdv", ele); .data("childsdv", ele);
nested.attr({ cursor: "pointer" });
var rect = nested var rect = nested
.rect(130, 40) .rect(130, 40)
.attr({ fill: `rgb(${_this.setsubcolor(index)})` }) .attr({ fill: `rgb(${_this.setsubcolor(index)})` })
...@@ -423,7 +426,6 @@ export default { ...@@ -423,7 +426,6 @@ export default {
//事件点击 //事件点击
nested.click(function() { nested.click(function() {
let data = this.data("childsdv"); let data = this.data("childsdv");
console.log("leval",data)
_this.curDevData = data; _this.curDevData = data;
}); });
}); });
......
src/views/ops/equipment_manage.vue2 deleted 100644 → 0
<template>
<div class="setting-box">
<div class="search-box">
<el-col :span="4">
<el-input v-model="searchval"></el-input>
</el-col>
<el-col :span="2" class="ml10">
<el-button type="primary">查询</el-button>
</el-col>
<el-col :span="8" style="float:right" hidden>
<span class="resource-box">
<span class="title">可用分析资源:</span>
<span class="num">{{ workers.video_free }}</span>
</span>
<span class="resource-box">
<span class="title">在用分析资源:</span>
<span class="num">{{ workers.video_busy }}</span>
</span>
</el-col>
</div>
<!-- 外层内容 -->
<div class="content-box" id="eqcontentbox">
<div class="left-box">
<div
class="master-box"
v-if="devData.length > 0"
@click="getSubDev(devData[0])"
>
<div>{{ devData[0].device_name }}</div>
<div>{{ devData[0].out_ip }}</div>
</div>
<div class="submast-box">
<div
:class="{
'submast-item': true,
'top-line': true,
onceline: subDevData.length == 1
}"
v-for="(subitem, index) in subDevData"
:key="index"
ref="subitem"
@click.stop="getleval($event, index, subitem)"
:style="
`background:rgba(${setsubcolor(
index
)},.2);borderColor:rgb(${setsubcolor(index)})`
"
>
<div
:class="{ 'sub-line': index == curindex && slaveData.length > 0 }"
:style="`background:${curlevalbordercolor}`"
></div>
<div>{{ subitem.device_name }}</div>
<div>{{ subitem.out_ip }}</div>
</div>
</div>
<!-- 叶子节点 -->
<div
v-if="istop && slaveData.length > 0"
:style="`top:${topheihgt + 1}px;left:${loopitem * 14 + 11.01}vw`"
v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
:key="loopindex"
class="leval-box"
>
<span
class="leval-top-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div
:class="{
'leval-submast-item': true,
'top-line': istop,
'bottom-line': !istop,
offline: item.online == 0
}"
v-for="(item, cindex) in setslaveData(slaveData, loopindex)"
:key="cindex"
:style="
`background:${curlevalcolor};borderColor:${curlevalbordercolor}`
"
>
<span
class="left-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span
class="vertical-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div>{{ item.device_name }}</div>
<div>{{ item.in_ip }}</div>
</div>
</div>
<div
v-if="!istop && slaveData.length > 0"
:style="`bottom:${bottomHeight + 5}px;left:${loopitem * 14 + 11}vw`"
v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
:key="loopitem"
class="leval-bottom-box"
>
<span
class="leval-bottom-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div
ref="submast"
:class="{
'leval-submast-item': true,
'top-line': istop,
'bottom-line': !istop,
offline: item.online == 0
}"
v-for="(item, xindex) in setslaveData(slaveData, loopindex)"
:key="xindex"
:style="
`background:${curlevalcolor};borderColor:${curlevalbordercolor}`
"
>
<span
class="left-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span
class="vertical-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div>{{ item.device_name }}</div>
<div>{{ item.in_ip }}</div>
</div>
</div>
</div>
<div class="right-box">
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">设备信息</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">平台类型:</span>
<span class="con-text"></span>
</div>
<div class="con-item">
<span class="con-label">设备类型:</span>
<span class="con-text"></span>
</div>
<div class="con-item">
<span class="con-label">设备名称:</span>
<span class="con-text">{{ curDevData.device_name }}</span>
</div>
<div class="con-item">
<span class="con-label">设备ID:</span>
<span class="con-text">{{ curDevData.device_id }}</span>
</div>
<div class="con-item">
<span class="con-label">内网信息:</span>
<span class="con-text">{{ curDevData.in_ip }}</span>
</div>
<div class="con-item">
<span class="con-label">外网信息:</span>
<span class="con-text">{{ curDevData.out_ip }}</span>
</div>
</div>
</div>
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">系统版本</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">系统版本:</span>
<span class="con-text">{{
curDevData.system_version ? curDevData.system_version : "无"
}}</span>
</div>
<div class="con-item">
<span class="con-label">算法版本:</span>
<span class="con-text">{{
curDevData.algorithm_version
? curDevData.algorithm_version
: "无"
}}</span>
</div>
<div class="con-item">
<span class="con-label">软件版本:</span>
<span class="con-text">{{
curDevData.software_version ? curDevData.software_version : "无"
}}</span>
</div>
<div class="con-item">
<span class="con-label">固件版本:</span>
<span class="con-text">{{
curDevData.firmware_version ? curDevData.firmware_version : "无"
}}</span>
</div>
</div>
</div>
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">系统信息</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">分析资源数:</span>
<span class="con-text">{{
curDevData.picture_total
? parseInt(curDevData.picture_total) +
parseInt(curDevData.video_total)
: curDevData.video_total
? parseInt(curDevData.picture_total) +
parseInt(curDevData.video_total)
: 0
}}</span>
</div>
<div class="con-item">
<span class="con-label">已用资源数:</span>
<span class="con-text">{{
curDevData.picture_busy
? parseInt(curDevData.picture_busy) +
parseInt(curDevData.video_busy)
: curDevData.video_busy
? parseInt(curDevData.picture_busy) +
parseInt(curDevData.video_busy)
: 0
}}</span>
</div>
<div class="con-item">
<span class="con-label">离线资源数:</span>
<span class="con-text">{{
curDevData.picture_free
? parseInt(curDevData.picture_free) +
parseInt(curDevData.video_free)
: curDevData.video_free
? parseInt(curDevData.picture_free) +
parseInt(curDevData.video_free)
: 0
}}</span>
</div>
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</template>
<script>
import { SVG } from "@svgdotjs/svg.js";
export default {
data() {
return {
treeData: [],
subDevData: [],
workers: {
video_free: 0,
video_busy: 0
},
topheihgt: 120,
searchval: "",
styleheight: 0,
istop: true,
levallength: 5,
curindex: -1,
curlevalcolor: "#f0f0f0",
curlevalbordercolor: "#f0f0f0",
parentData: {},
slaveData: [],
devData: [],
submastcolor: [
"48,210,255",
"86,183,202",
"237,140,36",
"181,184,41",
"104,182,69",
"105,199,187",
"71,157,248",
"0,105,255",
"116,96,238",
"232,84,30"
],
curDevData: {},
defaultProps: {
children: "childs",
label: "device_name"
},
bottomHeight: 0,
stylebottom: {},
dev_unid: localStorage.getItem("dev_unid")
};
},
mounted() {
this.styleheight = 55 * 6;
this.subDevData = 0;
},
created() {
this.dataInit();
this.getDevStatus();
},
methods: {
getleval(ev, index, dev) {
this.curDevType = "sub";
let obj = {
parent_id: dev.device_id
};
this.curDevData = dev;
this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.slaveData = res.list_data;
var eqc = document.getElementById("eqcontentbox").clientHeight;
this.curindex = index;
this.topheihgt = this.$refs.subitem[index].offsetTop + 70 + 30;
if (index === 2) {
this.topheihgt = this.$refs.subitem[index].offsetTop + 70 + 29;
}
if (this.topheihgt > 340) {
this.istop = false;
} else {
this.istop = true;
}
this.bottomHeight = eqc - this.$refs.subitem[index].offsetTop - 62;
if (index % 3 == 0) {
this.bottomHeight = eqc - this.$refs.subitem[index].offsetTop - 61;
}
this.curlevalcolor = this.$refs.subitem[index].style.backgroundColor;
this.curlevalbordercolor = this.$refs.subitem[index].style.borderColor;
});
},
setsubcolor(index) {
let color = "";
if (index >= 10) {
let c = String(index);
let i = Number(c[c.length - 1]);
color = this.submastcolor[i];
} else {
color = this.submastcolor[index];
}
return color;
},
dataInit: function() {
this.$api.device.getDev().then(res => {
this.parentData = res[0].dev_unid;
this.getDev();
});
},
getDev() {
this.$api.device.getSubdev(this.parentData).then(res => {
this.devData = res.list_data;
this.curDevType = "master";
this.curDevData = res.list_data[0];
});
},
getSubDev(dev) {
let obj = {
parent_id: dev.device_id
};
this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.subDevData = res.list_data;
});
},
setslaveData(data, index) {
return data.slice(index * 6, 6 * (index + 1));
},
getChild(id) {
this.$api.resource
.getDevsName(
{
limit: 9999,
offset: 0,
parent_id: id
},
this.dev_unid
)
.then(res => {
this.treeData.forEach(item => {
if (item.device_id == id) {
this.treeData.childs = res.list_data;
}
});
})
.catch(error => {});
},
handleNodeClick(data) {
console.log(data);
},
getDevStatus() {
this.$api.device.getDevStatus(this.dev_unid).then(res => {
this.workers = res.works;
});
}
}
};
</script>
<style scoped="scoped" lang="scss">
.setting-box {
height: calc(100% - 58.5px);
width: 99%;
margin: 1.5vh auto 0;
background: #fff;
overflow: hidden;
border-radius: 2px;
}
.content-box {
display: flex;
height: 100%;
position: relative;
}
.search-box {
padding: 10px;
border-bottom: 1vh solid #f5f7f9;
overflow: hidden;
}
.left-box {
overflow: auto;
width: 73vw;
position: relative;
height: 100%;
margin: 0 0 12vh 0;
}
.left-box::-webkit-scrollbar {
display: none;
}
.right-box {
width: 20vw;
height: 100%;
border-left: 10px solid #f5f7f9;
}
.master-box {
position: absolute;
height: 40px;
width: 140px;
text-align: center;
background: rgba(18, 62, 108, 0.2);
border: 1px solid rgba(18, 62, 108, 1);
border-radius: 5px;
left: 30px;
top: 25px;
cursor: pointer;
}
.submast-box {
position: absolute;
left: 12vw;
top: 70px;
padding: 0 0 10vh 0;
}
.submast-item,
.leval-submast-item {
position: relative;
height: 5vh;
width: 7vw;
text-align: center;
border-radius: 5px;
margin-top: 1vh;
border: 1px solid #333;
cursor: pointer;
}
.submast-item::before {
content: "";
display: block;
position: absolute;
left: -5vw;
top: 2.5vh;
background: #123e6c;
width: 5vw;
height: 1px;
}
.submast-item::after {
content: "";
display: block;
position: absolute;
left: -5vw;
top: 1.5vh;
background: #123e6c;
width: 1px;
height: 7.3vh;
}
.leval-submast-item .left-line {
display: block;
position: absolute;
left: -5vw;
top: 2.5vh;
background: #123e6c;
width: 5vw;
height: 1px;
}
.leval-submast-item .vertical-line {
position: absolute;
left: -3vw;
top: 2.1vh;
background: #123e6c;
width: 1px;
height: 6.5vh;
}
.top-line:first-child::after {
height: 10vh;
top: -1.5vh;
}
.top-line .vertical-line {
height: 11vh;
top: -2.2vh;
}
.submast-item:last-child::after {
height: 0;
}
.leval-box {
position: absolute;
}
.leval-bottom-box {
position: absolute;
}
.leval-bottom-box .left-line,
.leval-box .left-line {
left: -3vw;
background: #ed8c24;
width: 3vw;
height: 1px;
}
.leval-bottom-box .vertical-line,
.leval-box .vertical-line {
left: -3vw;
background: #ed8c24;
}
.leval-submast-item:last-child .vertical-line {
height: 0;
}
.leval-bottom-box .bottom-line .vertical-line {
height: 6.3vh;
top: 2.5vh;
}
.sub-line {
position: absolute;
height: 1px;
width: 3vw;
right: -3vw;
top: 20px;
}
.leval-top-line {
position: absolute;
height: 1px;
width: 16.1vw;
left: -5vw;
top: -1.1vh;
background: #ed8c24;
}
.leval-bottom-line {
position: absolute;
height: 1px;
width: 15.1vw;
left: -4vw;
bottom: -3.8vh;
background: #ed8c24;
}
.leval-bottom-box:last-child .leval-bottom-line {
width: 0;
}
.leval-box:last-child .leval-top-line {
width: 0;
}
.info-box {
padding: 1.5vw 0 0 1.5vw;
overflow: hidden;
}
.info-title .icon {
display: inline-block;
height: 30px;
width: 30px;
border-radius: 30px;
background: rgba(59, 183, 255, 1);
text-align: center;
line-height: 30px;
font-size: 20px;
color: #fff;
}
.info-title .title {
padding: 0 0 0 20px;
vertical-align: top;
font-size: 16px;
color: #000;
}
.info-content {
margin-left: 50px;
font-size: 14px;
color: #000;
}
.offline {
border: 1px solid rgba(65, 60, 60, 0.2) !important;
background: rgba(65, 60, 60, 0.2) !important;
}
.resource-box {
margin-left: 40px;
display: inline-block;
padding-top: 4px;
}
.resource-box .title {
color: #000;
padding-right: 10px;
}
.resource-box .num {
font-size: 18px;
font-weight: 600;
}
.onceline:first-child::after {
height: 4vh !important;
}
</style>
src/views/ops/equipment_manage.vue4 deleted 100644 → 0
<template>
<div class="setting-box">
<div class="search-box">
<el-col :span="4">
<el-input v-model="searchval"></el-input>
</el-col>
<el-col :span="2" class="ml10">
<el-button type="primary">查询</el-button>
</el-col>
<el-col :span="8" style="float:right" hidden>
<span class="resource-box">
<span class="title">可用分析资源:</span>
<span class="num">{{ workers.video_free }}</span>
</span>
<span class="resource-box">
<span class="title">在用分析资源:</span>
<span class="num">{{ workers.video_busy }}</span>
</span>
</el-col>
</div>
<!-- 外层内容 -->
<div class="content-box" id="eqcontentbox">
<div class="left-box">
<div
class="master-box"
v-if="devData.length > 0"
@click="getSubDev(devData[0])"
>
<div>{{ devData[0].device_name }}</div>
<div>{{ devData[0].out_ip }}</div>
</div>
<div class="submast-box">
<div
:class="{
'submast-item': true,
'top-line': true,
onceline: subDevData.length == 1
}"
v-for="(subitem, index) in subDevData"
:key="index"
ref="subitem"
@click.stop="getleval($event, index, subitem)"
:style="
`background:rgba(${setsubcolor(
index
)},.2);borderColor:rgb(${setsubcolor(index)})`
"
>
<div
:class="{ 'sub-line': index == curindex && slaveData.length > 0 }"
:style="`background:${curlevalbordercolor}`"
></div>
<div>{{ subitem.device_name }}</div>
<div>{{ subitem.out_ip }}</div>
</div>
</div>
<!-- 叶子节点 -->
<div
v-if="istop && slaveData.length > 0"
:style="`top:${topheihgt + 1}px;left:${loopitem * 14 + 11.01}vw`"
v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
:key="loopindex"
class="leval-box"
>
<span
class="leval-top-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div
:class="{
'leval-submast-item': true,
'top-line': istop,
'bottom-line': !istop,
offline: item.online == 0
}"
v-for="(item, cindex) in setslaveData(slaveData, loopindex)"
:key="cindex"
:style="
`background:${curlevalcolor};borderColor:${curlevalbordercolor}`
"
>
<span
class="left-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span
class="vertical-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div>{{ item.device_name }}</div>
<div>{{ item.in_ip }}</div>
</div>
</div>
<div
v-if="!istop && slaveData.length > 0"
:style="`bottom:${bottomHeight + 5}px;left:${loopitem * 14 + 11}vw`"
v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
:key="loopitem"
class="leval-bottom-box"
>
<span
class="leval-bottom-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div
ref="submast"
:class="{
'leval-submast-item': true,
'top-line': istop,
'bottom-line': !istop,
offline: item.online == 0
}"
v-for="(item, xindex) in setslaveData(slaveData, loopindex)"
:key="xindex"
:style="
`background:${curlevalcolor};borderColor:${curlevalbordercolor}`
"
>
<span
class="left-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span
class="vertical-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div>{{ item.device_name }}</div>
<div>{{ item.in_ip }}</div>
</div>
</div>
</div>
<div class="right-box">
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">设备信息</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">平台类型:</span>
<span class="con-text"></span>
</div>
<div class="con-item">
<span class="con-label">设备类型:</span>
<span class="con-text"></span>
</div>
<div class="con-item">
<span class="con-label">设备名称:</span>
<span class="con-text">{{ curDevData.device_name }}</span>
</div>
<div class="con-item">
<span class="con-label">设备ID:</span>
<span class="con-text">{{ curDevData.device_id }}</span>
</div>
<div class="con-item">
<span class="con-label">内网信息:</span>
<span class="con-text">{{ curDevData.in_ip }}</span>
</div>
<div class="con-item">
<span class="con-label">外网信息:</span>
<span class="con-text">{{ curDevData.out_ip }}</span>
</div>
</div>
</div>
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">系统版本</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">系统版本:</span>
<span class="con-text">{{
curDevData.system_version ? curDevData.system_version : "无"
}}</span>
</div>
<div class="con-item">
<span class="con-label">算法版本:</span>
<span class="con-text">{{
curDevData.algorithm_version
? curDevData.algorithm_version
: "无"
}}</span>
</div>
<div class="con-item">
<span class="con-label">软件版本:</span>
<span class="con-text">{{
curDevData.software_version ? curDevData.software_version : "无"
}}</span>
</div>
<div class="con-item">
<span class="con-label">固件版本:</span>
<span class="con-text">{{
curDevData.firmware_version ? curDevData.firmware_version : "无"
}}</span>
</div>
</div>
</div>
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">系统信息</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">分析资源数:</span>
<span class="con-text">{{
curDevData.picture_total
? parseInt(curDevData.picture_total) +
parseInt(curDevData.video_total)
: curDevData.video_total
? parseInt(curDevData.picture_total) +
parseInt(curDevData.video_total)
: 0
}}</span>
</div>
<div class="con-item">
<span class="con-label">已用资源数:</span>
<span class="con-text">{{
curDevData.picture_busy
? parseInt(curDevData.picture_busy) +
parseInt(curDevData.video_busy)
: curDevData.video_busy
? parseInt(curDevData.picture_busy) +
parseInt(curDevData.video_busy)
: 0
}}</span>
</div>
<div class="con-item">
<span class="con-label">离线资源数:</span>
<span class="con-text">{{
curDevData.picture_free
? parseInt(curDevData.picture_free) +
parseInt(curDevData.video_free)
: curDevData.video_free
? parseInt(curDevData.picture_free) +
parseInt(curDevData.video_free)
: 0
}}</span>
</div>
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</template>
<script>
import { SVG } from "@svgdotjs/svg.js";
export default {
data() {
return {
treeData: [],
subDevData: [],
workers: {
video_free: 0,
video_busy: 0
},
topheihgt: 120,
searchval: "",
styleheight: 0,
istop: true,
levallength: 5,
curindex: -1,
curlevalcolor: "#f0f0f0",
curlevalbordercolor: "#f0f0f0",
parentData: {},
slaveData: [],
devData: [],
submastcolor: [
"48,210,255",
"86,183,202",
"237,140,36",
"181,184,41",
"104,182,69",
"105,199,187",
"71,157,248",
"0,105,255",
"116,96,238",
"232,84,30"
],
curDevData: {},
defaultProps: {
children: "childs",
label: "device_name"
},
bottomHeight: 0,
stylebottom: {},
dev_unid: localStorage.getItem("dev_unid")
};
},
mounted() {
this.styleheight = 55 * 6;
this.subDevData = 0;
},
created() {
this.dataInit();
this.getDevStatus();
},
methods: {
getleval(ev, index, dev) {
this.curDevType = "sub";
let obj = {
parent_id: dev.device_id
};
this.curDevData = dev;
this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.slaveData = res.list_data;
var eqc = document.getElementById("eqcontentbox").clientHeight;
this.curindex = index;
this.topheihgt = this.$refs.subitem[index].offsetTop + 70 + 30;
if (index === 2) {
this.topheihgt = this.$refs.subitem[index].offsetTop + 70 + 29;
}
if (this.topheihgt > 340) {
this.istop = false;
} else {
this.istop = true;
}
this.bottomHeight = eqc - this.$refs.subitem[index].offsetTop - 62;
if (index % 3 == 0) {
this.bottomHeight = eqc - this.$refs.subitem[index].offsetTop - 61;
}
this.curlevalcolor = this.$refs.subitem[index].style.backgroundColor;
this.curlevalbordercolor = this.$refs.subitem[index].style.borderColor;
});
},
setsubcolor(index) {
let color = "";
if (index >= 10) {
let c = String(index);
let i = Number(c[c.length - 1]);
color = this.submastcolor[i];
} else {
color = this.submastcolor[index];
}
return color;
},
dataInit: function() {
this.$api.device.getDev().then(res => {
this.parentData = res[0].dev_unid;
this.getDev();
});
},
getDev() {
this.$api.device.getSubdev(this.parentData).then(res => {
this.devData = res.list_data;
this.curDevType = "master";
this.curDevData = res.list_data[0];
});
},
getSubDev(dev) {
let obj = {
parent_id: dev.device_id
};
this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.subDevData = res.list_data;
});
},
setslaveData(data, index) {
return data.slice(index * 6, 6 * (index + 1));
},
getChild(id) {
this.$api.resource
.getDevsName(
{
limit: 9999,
offset: 0,
parent_id: id
},
this.dev_unid
)
.then(res => {
this.treeData.forEach(item => {
if (item.device_id == id) {
this.treeData.childs = res.list_data;
}
});
})
.catch(error => {});
},
handleNodeClick(data) {
console.log(data);
},
getDevStatus() {
this.$api.device.getDevStatus(this.dev_unid).then(res => {
this.workers = res.works;
});
}
}
};
</script>
<style scoped="scoped" lang="scss">
.setting-box {
height: calc(100% - 58.5px);
width: 99%;
margin: 1.5vh auto 0;
background: #fff;
overflow: hidden;
border-radius: 2px;
}
.content-box {
display: flex;
height: 100%;
position: relative;
}
.search-box {
padding: 10px;
border-bottom: 1vh solid #f5f7f9;
overflow: hidden;
}
.left-box {
overflow: auto;
width: 73vw;
position: relative;
height: 100%;
margin: 0 0 12vh 0;
}
.left-box::-webkit-scrollbar {
display: none;
}
.right-box {
width: 20vw;
height: 100%;
border-left: 10px solid #f5f7f9;
}
.master-box {
position: absolute;
height: 40px;
width: 140px;
text-align: center;
background: rgba(18, 62, 108, 0.2);
border: 1px solid rgba(18, 62, 108, 1);
border-radius: 5px;
left: 30px;
top: 25px;
cursor: pointer;
}
.submast-box {
position: absolute;
left: 12vw;
top: 70px;
padding: 0 0 10vh 0;
}
.submast-item,
.leval-submast-item {
position: relative;
height: 45px;
width: 150px;
text-align: center;
border-radius: 5px;
margin-top: 1vh;
border: 1px solid #333;
cursor: pointer;
}
.submast-item::before {
content: "";
display: block;
position: absolute;
left: -96px;
top: 22px;
background: #123e6c;
width: 96px;
height: 1px;
}
.submast-item::after {
content: "";
display: block;
position: absolute;
left: -96px;
top: 9px;
background: #123e6c;
width: 1px;
height: 50px;
}
.leval-submast-item .left-line {
display: block;
position: absolute;
left: -5vw;
top: 2.5vh;
background: #123e6c;
width: 5vw;
height: 1px;
}
.leval-submast-item .vertical-line {
position: absolute;
left: -3vw;
top: 2.1vh;
background: #123e6c;
width: 1px;
height: 6.5vh;
}
.top-line:first-child::after {
height: 10vh;
top: -1.5vh;
}
.top-line .vertical-line {
height: 11vh;
top: -2.2vh;
}
.submast-item:last-child::after {
height: 0;
}
.leval-box {
position: absolute;
}
.leval-bottom-box {
position: absolute;
}
.leval-bottom-box .left-line,
.leval-box .left-line {
left: -3vw;
background: #ed8c24;
width: 3vw;
height: 1px;
}
.leval-bottom-box .vertical-line,
.leval-box .vertical-line {
left: -3vw;
background: #ed8c24;
}
.leval-submast-item:last-child .vertical-line {
height: 0;
}
.leval-bottom-box .bottom-line .vertical-line {
height: 6.3vh;
top: 2.5vh;
}
.sub-line {
position: absolute;
height: 1px;
width: 43px;
right: -44px;
top: 20px;
}
.leval-top-line {
position: absolute;
height: 1px;
width: 100px;
left: -50px;
top: -20px;
background: #ed8c24;
}
.leval-bottom-line {
position: absolute;
height: 1px;
width: 15.1vw;
left: -4vw;
bottom: -3.8vh;
background: #ed8c24;
}
.leval-bottom-box:last-child .leval-bottom-line {
width: 0;
}
.leval-box:last-child .leval-top-line {
width: 0;
}
.info-box {
padding: 1.5vw 0 0 1.5vw;
overflow: hidden;
}
.info-title .icon {
display: inline-block;
height: 30px;
width: 30px;
border-radius: 30px;
background: rgba(59, 183, 255, 1);
text-align: center;
line-height: 30px;
font-size: 20px;
color: #fff;
}
.info-title .title {
padding: 0 0 0 20px;
vertical-align: top;
font-size: 16px;
color: #000;
}
.info-content {
margin-left: 50px;
font-size: 14px;
color: #000;
}
.offline {
border: 1px solid rgba(65, 60, 60, 0.2) !important;
background: rgba(65, 60, 60, 0.2) !important;
}
.resource-box {
margin-left: 40px;
display: inline-block;
padding-top: 4px;
}
.resource-box .title {
color: #000;
padding-right: 10px;
}
.resource-box .num {
font-size: 18px;
font-weight: 600;
}
.onceline:first-child::after {
height: 4vh !important;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!