Skip to content

platform / fanxing_new

Go to a project
Commit ff0930a2 by 潘建波
Options

临时提交

1 parent 7c845b9b
Inline Side-by-side
Showing 3 changed files with 309 additions and 185 deletions
src/api/baseUrl.js
...@@ -4,7 +4,7 @@ console.log(process.env.NODE_ENV); ...@@ -4,7 +4,7 @@ console.log(process.env.NODE_ENV);
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case "development": case "development":
// baseUrl = "http://192.168.9.234:20080"; // 测试环境url // baseUrl = "http://192.168.9.234:20080"; // 测试环境url
baseUrl = "http://192.168.9.149:20080"; // 测试环境url baseUrl = "http://192.168.9.62:20080"; // 测试环境url
// baseUrl = "http://192.168.9.82:8080"; // 测试环境url // baseUrl = "http://192.168.9.82:8080"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086"; // baseUrl = "http://192.168.9.61:8086";
// baseUrl = 'http://vion-panda.51vip.biz:52510'; // baseUrl = 'http://vion-panda.51vip.biz:52510';
......
src/views/ops/equipment_manage.vue
...@@ -21,113 +21,7 @@ ...@@ -21,113 +21,7 @@
<!-- 外层内容 --> <!-- 外层内容 -->
<div class="content-box" id="eqcontentbox"> <div class="content-box" id="eqcontentbox">
<div class="left-box"> <div class="left-box">
<div <div id="drawing" class="drawingbox"></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>
<div class="right-box"> <div class="right-box">
<div class="info-box"> <div class="info-box">
...@@ -170,29 +64,41 @@ ...@@ -170,29 +64,41 @@
<div class="info-content"> <div class="info-content">
<div class="con-item"> <div class="con-item">
<span class="con-label">系统版本:</span> <span class="con-label">系统版本:</span>
<span class="con-text">{{ <span class="con-text">
curDevData.system_version ? curDevData.system_version : "无" {{
}}</span> curDevData.system_version ? curDevData.system_version : "无"
}}
</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span class="con-label">算法版本:</span> <span class="con-label">算法版本:</span>
<span class="con-text">{{ <span class="con-text">
curDevData.algorithm_version {{
? curDevData.algorithm_version curDevData.algorithm_version
: "无" ? curDevData.algorithm_version
}}</span> : "无"
}}
</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span class="con-label">软件版本:</span> <span class="con-label">软件版本:</span>
<span class="con-text">{{ <span class="con-text">
curDevData.software_version ? curDevData.software_version : "无" {{
}}</span> curDevData.software_version
? curDevData.software_version
: "无"
}}
</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span class="con-label">固件版本:</span> <span class="con-label">固件版本:</span>
<span class="con-text">{{ <span class="con-text">
curDevData.firmware_version ? curDevData.firmware_version : "无" {{
}}</span> curDevData.firmware_version
? curDevData.firmware_version
: "无"
}}
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -204,39 +110,45 @@ ...@@ -204,39 +110,45 @@
<div class="info-content"> <div class="info-content">
<div class="con-item"> <div class="con-item">
<span class="con-label">分析资源数:</span> <span class="con-label">分析资源数:</span>
<span class="con-text">{{ <span class="con-text">
curDevData.picture_total {{
? parseInt(curDevData.picture_total) + curDevData.picture_total
parseInt(curDevData.video_total) ? parseInt(curDevData.picture_total) +
: curDevData.video_total parseInt(curDevData.video_total)
? parseInt(curDevData.picture_total) + : curDevData.video_total
parseInt(curDevData.video_total) ? parseInt(curDevData.picture_total) +
: 0 parseInt(curDevData.video_total)
}}</span> : 0
}}
</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span class="con-label">已用资源数:</span> <span class="con-label">已用资源数:</span>
<span class="con-text">{{ <span class="con-text">
curDevData.picture_busy {{
? parseInt(curDevData.picture_busy) + curDevData.picture_busy
parseInt(curDevData.video_busy) ? parseInt(curDevData.picture_busy) +
: curDevData.video_busy parseInt(curDevData.video_busy)
? parseInt(curDevData.picture_busy) + : curDevData.video_busy
parseInt(curDevData.video_busy) ? parseInt(curDevData.picture_busy) +
: 0 parseInt(curDevData.video_busy)
}}</span> : 0
}}
</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span class="con-label">离线资源数:</span> <span class="con-label">离线资源数:</span>
<span class="con-text">{{ <span class="con-text">
curDevData.picture_free {{
? parseInt(curDevData.picture_free) + curDevData.picture_free
parseInt(curDevData.video_free) ? parseInt(curDevData.picture_free) +
: curDevData.video_free parseInt(curDevData.video_free)
? parseInt(curDevData.picture_free) + : curDevData.video_free
parseInt(curDevData.video_free) ? parseInt(curDevData.picture_free) +
: 0 parseInt(curDevData.video_free)
}}</span> : 0
}}
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -248,6 +160,7 @@ ...@@ -248,6 +160,7 @@
<script> <script>
import { SVG } from "@svgdotjs/svg.js"; import { SVG } from "@svgdotjs/svg.js";
var draw = null;
export default { export default {
data() { data() {
return { return {
...@@ -293,37 +206,26 @@ export default { ...@@ -293,37 +206,26 @@ export default {
mounted() { mounted() {
this.styleheight = 55 * 6; this.styleheight = 55 * 6;
this.subDevData = 0; this.subDevData = 0;
draw = SVG()
.addTo("#drawing")
.size(10000, 10000);
}, },
created() { created() {
this.dataInit(); this.dataInit();
this.getDevStatus(); this.getDevStatus();
}, },
methods: { methods: {
getleval(ev, index, dev) { getleval(ev, dev) {
this.curDevType = "sub"; this.curDevType = "sub";
let obj = { let obj = {
parent_id: dev.device_id parent_id: dev.device_id
}; };
this.curDevData = dev; this.curDevData = dev;
this.$api.device.getSubdev(this.parentData, obj).then(res => { this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.slaveData = res.list_data; for (var i = 0; i < 10; i++) {
var eqc = document.getElementById("eqcontentbox").clientHeight; this.slaveData.push(res.list_data);
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; this.createdLeval(ev, this.slaveData);
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) { setsubcolor(index) {
...@@ -348,6 +250,7 @@ export default { ...@@ -348,6 +250,7 @@ export default {
this.devData = res.list_data; this.devData = res.list_data;
this.curDevType = "master"; this.curDevType = "master";
this.curDevData = res.list_data[0]; this.curDevData = res.list_data[0];
this.createdMaster(res.list_data[0]);
}); });
}, },
getSubDev(dev) { getSubDev(dev) {
...@@ -356,8 +259,137 @@ export default { ...@@ -356,8 +259,137 @@ export default {
}; };
this.$api.device.getSubdev(this.parentData, obj).then(res => { this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.subDevData = res.list_data; this.subDevData = res.list_data;
this.createdChild(this.subDevData);
});
},
createdMaster(data) {
var _this = this;
var nested = draw
.nested()
.size(120, 40)
.move(50, 50)
.data("sdv", data);
var rect = nested
.rect(120, 40)
.attr({ fill: "#f06" })
.radius(5);
var text = nested.text(function(add) {
add
.tspan(`${data.device_name}`)
.newLine()
.fill({ color: "#fff" }),
add.tspan(`${data.in_ip}`).newLine();
});
nested.click(function() {
let data = this.data("sdv");
_this.getSubDev(data);
}); });
}, },
createdChild(data) {
var _this = this;
data.map((ele, index) => {
let point = {
x: 200,
y: 70 * (index + 1) + 50
};
var polyline = draw
.polyline([
[110, 90],
[110, point.y + 20],
[200, point.y + 20]
])
.stroke({ width: 1, color: "red" });
polyline.fill("none").stroke({
width: 2,
color: "red"
});
var nested = draw
.nested()
.size(120, 40)
.move(point.x, point.y)
.data("childsdv", ele);
var rect = nested
.rect(120, 40)
.attr({ fill: "#f06" })
.radius(5);
var text = nested.text(function(add) {
add
.tspan(`${ele.device_name}`)
.newLine()
.fill({ color: "#fff" }),
add.tspan(`${ele.in_ip}`).newLine();
});
nested.click(function() {
let data = this.data("childsdv");
_this.getleval(this, data);
});
});
},
createdLeval(ev, data) {
let num = Math.ceil(data.length/6);
for(let i = 0; i < num; i++){
var laveData = this.setslaveData(data, i);
//当前点击节点信息
let linepoint = {
x: ev.x() + 120,
y: ev.y() + 20
};
var _this = this;
laveData.map((ele, index) => {
let point = {
x: 330 * i + 430,
y: linepoint.y + i * 70 + 30
};
if (index == 0) {
var line = draw
.polyline([
[linepoint.x, linepoint.y],
[400, point.y - (index == 0 ? 30 : 58)]
])
.stroke({ width: 1, color: "red" });
line.fill("none").stroke({
width: 2,
color: "green"
});
}
if (linepoint.y < 200) {
var polyline = draw
.polyline([
[400, linepoint.y],
[400, point.y + 20],
[450, point.y + 20]
])
.stroke({ width: 1, color: "red" });
polyline.fill("none").stroke({
width: 2,
color: "red"
});
}
var nested = draw
.nested()
.size(120, 40)
.move(point.x, point.y)
.data("childsdv", ele);
var rect = nested
.rect(120, 40)
.attr({ fill: "#f06" })
.radius(5);
var text = nested.text(function(add) {
add
.tspan(`${ele.device_name}`)
.newLine()
.fill({ color: "#fff" }),
add.tspan(`${ele.in_ip}`).newLine();
});
//事件点击
nested.click(function() {
let data = this.data("childsdv");
_this.getleval(this, data);
});
});
}
},
setslaveData(data, index) { setslaveData(data, index) {
return data.slice(index * 6, 6 * (index + 1)); return data.slice(index * 6, 6 * (index + 1));
}, },
...@@ -606,4 +638,7 @@ export default { ...@@ -606,4 +638,7 @@ export default {
.onceline:first-child::after { .onceline:first-child::after {
height: 4vh !important; height: 4vh !important;
} }
.drawingbox {
height: 100%;
}
</style> </style>
src/views/ops/equipment_manage.vue22 → src/views/ops/equipment_manage.vue2
...@@ -21,7 +21,113 @@ ...@@ -21,7 +21,113 @@
<!-- 外层内容 --> <!-- 外层内容 -->
<div class="content-box" id="eqcontentbox"> <div class="content-box" id="eqcontentbox">
<div class="left-box"> <div class="left-box">
<div id="drawing"></div> <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>
<div class="right-box"> <div class="right-box">
<div class="info-box"> <div class="info-box">
...@@ -242,7 +348,6 @@ export default { ...@@ -242,7 +348,6 @@ export default {
this.devData = res.list_data; this.devData = res.list_data;
this.curDevType = "master"; this.curDevType = "master";
this.curDevData = res.list_data[0]; this.curDevData = res.list_data[0];
this.createdMaster();
}); });
}, },
getSubDev(dev) { getSubDev(dev) {
...@@ -253,22 +358,6 @@ export default { ...@@ -253,22 +358,6 @@ export default {
this.subDevData = res.list_data; this.subDevData = res.list_data;
}); });
}, },
createdMaster() {
var draw = SVG()
.addTo("#drawing")
.size("100%", "100%");
var nested = draw
.nested()
.size(100, 40)
.move(50, 100);
var rect = nested.rect(100, 40).attr({ fill: "#f06", radius: 5 });
var text = nested.text(function(add) {
add.tspan("Lorem ipsum dolor sit amet ").newLine();
});
nested.click(function() {
alert(1);
});
},
setslaveData(data, index) { setslaveData(data, index) {
return data.slice(index * 6, 6 * (index + 1)); return data.slice(index * 6, 6 * (index + 1));
}, },
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!