<template>
|
<div
|
class="bridge-items"
|
:class="[`bridge-items-${areacode}`]"
|
:style="{
|
left: `${left == 0 ? 'unset' : `${left}rem`}`,
|
top: `${top == 0 ? 'unset' : `${top}rem`}`,
|
right: `${right == 0 ? 'unset' : `${right}rem`}`,
|
bottom: `${bottom == 0 ? 'unset' : `${bottom}rem`}`,
|
}"
|
>
|
<!-- {{ current_drag_index }} -->
|
<!-- {{ datamap }} -->
|
<div
|
class="bridge-item"
|
v-for="index of width"
|
@dragover="dragover($event)"
|
@drop.prevent.stop="
|
ondrop(
|
$event,
|
datamap['' + (index + 0)] && datamap['' + (index + 0)].name,
|
datamap['' + (index + 0)] && datamap['' + (index + 0)].id
|
)
|
"
|
:id="'itemcode@' + code + '_' + grouplevel + '_' + index"
|
:key="index"
|
@click="clickBride($event, code, grouplevel, index)"
|
:class="[
|
datamap['' + (index + 0)] ? 'space-in' : '',
|
!datamap['' + (index + 0)] || !datamap['' + (index + 0)].id
|
? 'space-text-gray'
|
: '',
|
// current_drag_index&&( ('itemcode@' + code + '_' + grouplevel + '_' + index)===current_drag_index)?'space-drag-start':'',
|
status_indrag &&
|
(!datamap['' + (index + 0)] || !datamap['' + (index + 0)].id)
|
? 'space-drag'
|
: '',
|
]"
|
>
|
<div
|
class="space-text"
|
:class="[
|
datamap['' + (index + 0)].status == 2 ||
|
datamap['' + (index + 0)].status == 3 ||
|
datamap['' + (index + 0)].status == 4
|
? 'space-text-red'
|
: '',
|
datamap['' + (index + 0)].status == 1 ? 'space-text-yellow' : '',
|
]"
|
@dragstart="dragstart($event, index)"
|
@dragend="dragend($event)"
|
@click="showServeInfo(index, datamap['' + (index + 0)])"
|
:id="'itemtext@' + code + '_' + grouplevel + '_' + index"
|
@drop.prevent.stop="
|
ondrop(
|
$event,
|
datamap['' + (index + 0)] && datamap['' + (index + 0)].name,
|
datamap['' + (index + 0)] && datamap['' + (index + 0)].id
|
)
|
"
|
draggable="true"
|
v-if="datamap['' + (index + 0)] && datamap['' + (index + 0)].id"
|
>
|
{{ datamap["" + (index + 0)].name || "-" }}
|
</div>
|
|
<div
|
v-if="
|
show_info &&
|
'itemcode@' + code + '_' + grouplevel + '_' + index == current_show_id
|
"
|
class="device-info"
|
@click="show_info = false"
|
>
|
<div class="title">接口</div>
|
<div class="each">
|
<div class="label">网络连接性:</div>
|
<div class="value">{{ current_show_info.status }}</div>
|
</div>
|
<div class="each">
|
<div class="label">IP地址:</div>
|
<div class="value">{{ current_show_info.ip || "" }}</div>
|
</div>
|
<div class="each">
|
<div class="label">Mac:</div>
|
<div class="value">{{ current_show_info.mac }}</div>
|
</div>
|
<div class="each">
|
<div class="label">桥架端口:</div>
|
<div class="value">{{ current_show_info.networkPort }}</div>
|
</div>
|
<div class="each">
|
<div class="label">交换机名字:</div>
|
<div class="value">{{ current_show_info.switchName }}</div>
|
</div>
|
<div class="each">
|
<div class="label">交换机端口:</div>
|
<div class="value">{{ current_show_info.port }}</div>
|
</div>
|
<div class="each">
|
<div class="label">名称:</div>
|
<div class="value">{{ current_show_info.clhwName }}</div>
|
</div>
|
<div class="each">
|
<div class="label">类型:</div>
|
<div class="value">{{ current_show_info.clhwTier }}</div>
|
</div>
|
<div class="each">
|
<div class="label">操作系统:</div>
|
<div class="value">{{ current_show_info.clhwOperating_System }}</div>
|
</div>
|
<div class="button-to-switch" @click="toSwitchInfo(index)">交换机</div>
|
<div class="button-del-port" @click="delPort(index)">删除</div>
|
<div
|
class="button-to-check"
|
v-if="
|
datamap['' + (index + 0)].status == 1 ||
|
datamap['' + (index + 0)].status == 2 ||
|
datamap['' + (index + 0)].status == 3 ||
|
datamap['' + (index + 0)].status == 4
|
"
|
@click="statusPort(index)"
|
>
|
确认
|
</div>
|
|
<div class="close"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { number } from "echarts";
|
import { updateDevicePosition } from "@/api/area";
|
export default {
|
props: {
|
configs: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
datamap: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
devicelist: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
width: {
|
type: Number,
|
default() {
|
return 4;
|
},
|
},
|
left: 0,
|
top: 0,
|
right: 0,
|
bottom: 0,
|
code: "",
|
areacode: "",
|
current_show_id: "",
|
grouplevel: {
|
type: Number,
|
default() {
|
return 0;
|
},
|
},
|
status_indrag: false,
|
current_drag_index: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
// current_show_name:'',
|
// current_show_index: "",
|
// 'itemcode@'+code + '_' + grouplevel + '_' + index
|
},
|
methods: {
|
clickBride($event, code, grouplevel, index) {
|
console.log('clickBride',code,grouplevel,index)
|
// console.log(' this.datamap["" + (index + 0)]', this.datamap["" + (index + 0)])
|
if (
|
!!this.datamap["" + (index + 0)] &&
|
this.datamap["" + (index + 0)].id
|
) {
|
} else {
|
console.log("clickBride", $event);
|
this.$emit("click_item", "");
|
var dto = {};
|
if (this.datamap["" + (index + 0)]) {
|
dto = {
|
...this.datamap["" + (index + 0)],
|
};
|
}
|
dto.areaCode = this.code;
|
dto.areaIndex = code;
|
dto.areaCell = grouplevel;
|
dto.areaRow = index;
|
|
this.$emit("click_item_add", dto);
|
}
|
},
|
toSwitchInfo(index) {
|
// console.log('toSwitchInfo',this.datamap["" + (index + 0)])
|
this.$emit("toSwitchInfo", this.datamap["" + (index + 0)]);
|
},
|
async delPort(index) {
|
await this.$modal.confirm("是否删除此端口");
|
this.$emit("delPort", this.datamap["" + (index + 0)]);
|
},
|
async statusPort(index) {
|
await this.$modal.confirm("是否设置此端口状态为正常");
|
this.$emit("statusPort", this.datamap["" + (index + 0)]);
|
},
|
|
showServeInfo(index, info) {
|
//展示弹窗
|
// this.current_show_name = info.name
|
|
this.current_show_info = {};
|
//进行check
|
for (var item of this.devicelist) {
|
if (item.networkPort == info.name) {
|
this.current_show_info = {
|
...item,
|
};
|
// this.current_show_index = index;
|
this.show_info = true;
|
break;
|
}
|
}
|
if (!this.show_info) {
|
// this.$message.warning("不存在此设备信息");
|
|
// this.show_info = true
|
// this.$emit("click_item", "");
|
|
//这种是要显示新增吧?
|
//直接把当前位置信息存下来吧
|
// this.datamap["" + (index + 0)]
|
return;
|
} else {
|
this.$emit(
|
"click_item",
|
"itemcode@" + this.code + "_" + this.grouplevel + "_" + index
|
);
|
}
|
},
|
ondrop(e, strnewport, targetid) {
|
console.log("ondrop", e, this.current_drag_index, targetid);
|
if (!this.current_drag_index || !this.current_drag_index.id) {
|
return;
|
}
|
if (this.current_drag_index.id == targetid) {
|
return;
|
}
|
//解析
|
// var str = `元素从${"itemcode@" +
|
// this.code +
|
// "_" +
|
// this.grouplevel +
|
// "_" +
|
// this.current_drag_index
|
// }拖到了${e.target.id}上`;
|
// var strnewport = ''
|
if (targetid) {
|
strnewport = this.current_drag_index.name;
|
}
|
// console.log(str);
|
if (e.target.id) {
|
//可以设置了
|
//确定是否需要更新
|
let that = this;
|
var tid = this.current_drag_index.id;
|
// var dto = this.device_list_map[e.target.id];
|
that.$modal
|
.confirm(
|
`是否确定${targetid ? "交换" : "移动"}位置:从${
|
this.current_drag_index.name
|
}到${strnewport}上` //+ str
|
// + dto.switchName + "/" + dto.networkPort
|
)
|
.then(async (res) => {
|
that.$modal.loading();
|
// console.log("end", e);
|
// console.log(e);
|
// that.cal_offset_x = e.clientX - that.startclientX; // 计算偏移量
|
// that.cal_offset_y = e.clientY - that.startclientY;
|
// var rawx = that.device_list_map[e.target.id].currentX;
|
// var rawy = that.device_list_map[e.target.id].currentY;
|
// that.device_list_map[e.target.id].currentX =
|
// parseFloat(that.device_list_map[e.target.id].currentX) +
|
// parseFloat(
|
// (that.cal_offset_x / that.html_base) * (1 / that.scale_container)
|
// ); // 实现拖拽元素随偏移量移动
|
// that.device_list_map[e.target.id].currentY =
|
// parseFloat(that.device_list_map[e.target.id].currentY) +
|
// parseFloat(
|
// (that.cal_offset_y / that.html_base) * (1 / that.scale_container)
|
// );
|
// // this.elTop += this.cal_offset_y;
|
// console.log("end drag2", that.device_list_map[e.target.id].currentX);
|
// //更新坐标信息，并保存
|
var json = {
|
// id: dto.id.replace("content_", ""),
|
id: tid,
|
operateType: 1,
|
operateTime: new Date(),
|
// moveBeforeX: rawx,
|
// moveBeforeY: rawy,
|
// currentX: that.device_list_map[e.target.id].currentX,
|
// currentY: that.device_list_map[e.target.id].currentY,
|
networkPort: strnewport,
|
};
|
if (targetid) {
|
json["changeId"] = targetid;
|
json["operateType"] = 3;
|
}
|
console.log("data", json, updateDevicePosition);
|
const data = await updateDevicePosition(json);
|
that.$modal.closeLoading();
|
// console.log("updateDevicePosition", data);
|
if (data) {
|
this.$message.success(`${targetid ? "交换" : "移动"}成功`);
|
}
|
that.$emit("update_map");
|
})
|
.catch((e) => {})
|
.finally(() => {});
|
}
|
},
|
dragover(e) {
|
// console.log("dragover", e);
|
e.preventDefault();
|
},
|
dragenter(e) {
|
console.log("dragenter", e);
|
e.preventDefault();
|
},
|
dragstart(e, index) {
|
// console.log(e);
|
// this.startclientX = e.clientX; // 记录拖拽元素初始位置
|
// this.startclientY = e.clientY;
|
console.log("dragstart", e, index);
|
// this.status_indrag = true
|
// this.current_drag_index = e.target.id
|
// this.$emit("update_status_indrag", true, e.target.id);
|
this.$emit("update_status_indrag", true, {
|
id: this.datamap["" + (index + 0)].id,
|
name: this.datamap["" + (index + 0)].name,
|
});
|
this.show_info = false;
|
},
|
async dragend(e) {
|
console.log("dragend", e);
|
// this.status_indrag = false
|
this.$emit("update_status_indrag", false, undefined);
|
return;
|
},
|
},
|
data() {
|
return {
|
show_info: false,
|
current_show_info: {},
|
};
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.bridge-items {
|
//width: 102.8rem;
|
height: 1.5rem;
|
background: #a6c6e5;
|
box-shadow: 0rem -2rem 2.1rem 0rem #89a2bd;
|
display: flex;
|
position: absolute;
|
/* flex-wrap: wrap; */
|
|
.bridge-item {
|
flex: 1;
|
margin: 0 auto;
|
min-width: 7.5rem;
|
/* max-width: 6rem; */
|
height: 1.3rem;
|
// background: #fff;
|
// box-shadow: 0rem -2rem 2.1rem 0rem #fff;
|
background-image: url("../assets/area/space.svg");
|
background-size: 100% 100%;
|
position: relative;
|
|
.space-text {
|
background-image: url("../assets/area/space-text.svg");
|
background-size: 100% 100%;
|
min-width: 7.5rem;
|
min-height: 2.5rem;
|
transform: translate(-50%, 0%);
|
left: 50%;
|
padding-top: 0.5rem;
|
top: -2.5rem;
|
position: absolute;
|
cursor: grabbing;
|
cursor: move;
|
/* line-height: 100%; */
|
/* font-size: 12px; */
|
/* span { */
|
word-break: break-all;
|
word-wrap: break-word;
|
/*但在有些场景中，还需要加上下面这行代码*/
|
white-space: normal;
|
overflow-wrap: anywhere;
|
/* } */
|
|
font-size: 1rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #3299ff;
|
z-index: 20;
|
}
|
.space-text-yellow {
|
color: #e8be19;
|
}
|
.space-text-red {
|
color: #e20909;
|
}
|
|
.device-info {
|
background-image: url("../assets/area/device-info-bg.svg");
|
/* background-color: #a6c6e5; */
|
background-size: 100% 100%;
|
height: 24.4rem;
|
width: 29rem;
|
position: absolute;
|
top: -31.5rem;
|
transform: translate(-50%, 0%);
|
left: 50%;
|
z-index: 120;
|
padding: 3.1rem;
|
padding-top: 2.5rem;
|
padding-left: 1.6rem;
|
padding-right: 1.6rem;
|
|
.title {
|
height: 2.5rem;
|
font-size: 1.8rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #265696;
|
line-height: 2.5rem;
|
text-align: left;
|
margin-bottom: 0.5rem;
|
}
|
|
.each {
|
display: flex;
|
height: 2rem;
|
font-size: 1.4rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #265696;
|
line-height: 2rem;
|
|
.label {
|
margin-right: 1rem;
|
text-align: left;
|
}
|
|
.value {
|
}
|
}
|
|
.close {
|
background-image: url("../assets/area/close.svg");
|
background-size: 100% 100%;
|
position: absolute;
|
width: 1.2rem;
|
height: 1.2rem;
|
top: 3rem;
|
right: 2rem;
|
}
|
.button-to-switch {
|
cursor: pointer;
|
width: 5.9rem;
|
height: 2.2rem;
|
border-radius: 0.2rem;
|
border: 0.1rem solid #278afa;
|
font-size: 1.2rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #278afa;
|
line-height: 2.2rem;
|
position: absolute;
|
right: 9.2rem;
|
bottom: 4rem;
|
}
|
|
.button-to-switch:hover {
|
color: #fff;
|
background-color: #278afa;
|
}
|
.button-to-check {
|
cursor: pointer;
|
width: 5.2rem;
|
height: 2.2rem;
|
border-radius: 0.2rem;
|
border: 0.1rem solid rgb(15, 243, 76);
|
font-size: 1.2rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: rgb(2, 76, 22);
|
line-height: 2.2rem;
|
position: absolute;
|
|
right: 16.2rem;
|
bottom: 4rem;
|
}
|
.button-to-check:hover {
|
color: #fff;
|
background-color: rgb(15, 243, 76);
|
}
|
.button-del-port {
|
cursor: pointer;
|
width: 5.2rem;
|
height: 2.2rem;
|
border-radius: 0.2rem;
|
border: 0.1rem solid rgb(243, 15, 15);
|
font-size: 1.2rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: rgb(243, 15, 15);
|
line-height: 2.2rem;
|
position: absolute;
|
right: 2.2rem;
|
bottom: 4rem;
|
}
|
.button-del-port:hover {
|
color: #fff;
|
background-color: rgb(243, 15, 15);
|
}
|
}
|
}
|
|
.space-drag {
|
filter: unset !important;
|
background-color: rgb(243, 15, 15);
|
|
.space-text-gray {
|
z-index: -1;
|
}
|
}
|
|
.space-drag-start {
|
background-color: rgb(243, 15, 15);
|
}
|
}
|
|
.bridge-items-01 {
|
.bridge-item {
|
}
|
}
|
|
.space-text-gray {
|
.space-text {
|
color: #818181 !important;
|
background-image: url("../assets/area/space-text-gray.svg") !important;
|
}
|
}
|
</style>
|
