<template>
|
<div class="main-container" :style="{
|
zoom: zoom_main,
|
width: screen_width + 'rem',
|
height: screen_height + 'rem',
|
// width:'100%',
|
// height:'calc(100vh - 10rem)'
|
}">
|
<!-- @mousemove="handleMouseMove"
|
@mouseup="handleMouseUp"
|
@mousedown="handleMouseDown"
|
@mouseleave="handleMouseLeave" -->
|
<div id="content" class="equipments-container area-map" :class="['area-map-' + code]" v-show="hideServe"
|
@mousemove="handleMouseMove" @mouseup="handleMouseUp" @mousedown="handleMouseDown"
|
@mouseleave="handleMouseLeave"
|
:style="{
|
transform: `scale(${scale_container})`,
|
width: screen_width + 'rem',
|
height: screen_height + 'rem',
|
// container_offset_x:''
|
// container_offset_x:''
|
|
'margin-left': `${container_offset_left}rem`,
|
'margin-top': `${container_offset_top}rem`,
|
}">
|
<!-- <div
|
class="equipment-item itm-svg-a"
|
draggable="true"
|
style="width: 10rem; height: 10rem; position: absolute"
|
@dragstart="dragstart($event)"
|
@dragend="dragend($event)"
|
@click.prevent.stop="showServe"
|
:style="{ left: tleft + 'rem' }" -->
|
|
<!-- <div
|
class="equipment-item itm-svg-a"
|
:class="[item.typeclass]"
|
:id="item.id"
|
draggable="true"
|
v-for="item in device_list"
|
:key="item.id"
|
@dragstart="dragstart($event)"
|
@dragend="dragend($event)"
|
@click.prevent.stop="showServe"
|
:style="{ left: item.currentX + 'rem', top: item.currentY + 'rem' }"
|
></div> -->
|
<div class="bridge-group" v-for="group in bridge_infos" :key="group.code" :code="group.code">
|
<!-- {{ group.pad }} -->
|
<!-- @showServeInfo="showServeInfo" -->
|
<!-- <bridge v-for="(item, index) of group.cells" :key="item.cell" :code="group.code" :areacode="code"
|
@update_map="update_map" @update_status_indrag="update_status_indrag"
|
@click_item="click_item" @click_item_add="click_item_add" @toSwitchInfo="toSwitchInfo" @delPort="delPort"
|
@statusPort="statusPort" :current_drag_index="current_drag_index" :status_indrag="status_indrag"
|
:grouplevel="item.cell" :devicelist="device_list" :current_show_id="current_show_id"
|
:width="item.width || group.width" :datamap="item.datamap" :left="group.left || 0" :right="group.right || 0" -->
|
<!-- :grouplevel="item.cell" -->
|
<!-- @showServeInfo="showServeInfo" -->
|
<!-- :key="item.cell" -->
|
<bridge v-for="(item, index) of group.cells" :key="item.cell" :code="group.code" :areacode="code"
|
@update_map="update_map" @update_status_indrag="update_status_indrag" @click_item="click_item"
|
@click_item_add="click_item_add" @toSwitchInfo="toSwitchInfo" @delPort="delPort"
|
@statusPort="statusPort"
|
:current_drag_index="current_drag_index" :status_indrag="status_indrag" :grouplevel="item.cell"
|
:devicelist="device_list" :current_show_id="current_show_id" :width="item.width || group.width"
|
:datamap="item.datamap" :left="group.left || 0" :right="group.right || 0"
|
:top="group.top ? group.top + index * (group.pad || 3) : 0"
|
:bottom="group.bottom ? group.bottom - index * (group.pad || 3) : 0"></bridge>
|
</div>
|
</div>
|
<!-- 需要渲染一个canvas，然后基于数据，和滚动坐标，缩放坐标，位置中点吧 -->
|
<tj-container v-if="true && code" :code="code" :key="code" @closeself="closeself"
|
:chartclose="chartclose"></tj-container>
|
<!-- 显示图标的开关 -->
|
<div v-if="true && code && chartclose" class="chart-open" @click="chartclose = false">
|
<div class="img-button"></div>
|
</div>
|
<equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
|
@update="update_map"></equ-add-form>
|
<!-- 点击设备可以前往服务器详情页看看（debug) -->
|
<div v-if="!hideServe" class="serve-item" @click="() => {
|
// stopScrolling();
|
//$nextTick(() => {
|
// hideServe = !hideServe;
|
//});
|
}
|
">
|
<div class="serve-img" v-if="serve_info.cabinetInfoStatic">
|
<div class="each-item-container">
|
<div v-for="(serve, itemindex) in serve_info.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex"
|
class="each-item" :class="[
|
serve.cabinetName == serve_select.switchName
|
? 'each-item-default'
|
: '',
|
]">
|
<div class="desc">
|
<div class="title">{{ serve.cabinetName }}</div>
|
<div class="value">设备数量: {{ serve.normal }}</div>
|
<div class="tip-msg">
|
<div class="title">{{ serve.cabinetName }}</div>
|
<div class="desc">正常设备：<span class="f-n">{{ serve.normal || 0 }}</span></div>
|
<div class="desc">黄色预警：<span class="f-y">{{ serve.waring || 0 }}</span></div>
|
<div class="desc">红色预警：<span class="f-r">{{ serve.exception || 0 }}</span></div>
|
|
<!-- <div class="desc">详细信息：一小时后磁盘满</div> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="tj-item">
|
<div class="tj-nums">
|
<div class="title">{{ serve_info.cabinetName || "-" }}</div>
|
<div class="flex">
|
<div class="equ-num-item a">
|
<div class="num g">{{ serve_info.terminalCount || 0 }}</div>
|
<div class="desc2">正常设备</div>
|
</div>
|
<div class="equ-num-item">
|
<div class="num y">{{ serve_info.seitchCount || 0 }}</div>
|
<div class="desc2">黄色预警</div>
|
</div>
|
<div class="equ-num-item c">
|
<div class="num r">{{ serve_info.exceptionCount || 0 }}</div>
|
<div class="desc2">红色预警</div>
|
</div>
|
</div>
|
</div>
|
<div class="tj-line" v-if="false"></div>
|
<div class="tj-list" v-if="false">
|
<div class="service-list-arr" id="my_serve_info_list">
|
<div class="service-list-arr-item" v-for="(item, index) of data_service_list" :key="index">
|
<div class="time">{{ item.time }}</div>
|
<div class="flex1 service-list-arr-item_content" v-html="item.desc"></div>
|
<div class="dot" :class="item.status"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="back-button-left-bottom" @click="backToTop">返回</div>
|
<el-dialog :visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts">
|
<div v-for="(infos, index2) of activateSwitchPorts" :key="index2" class="port-items">
|
<div class="port-item" v-for="(item, index) of infos" :key="index">
|
<div :key="index" class="space-text" :class="[
|
(item.info && item.info.statusInt == 2) ||
|
(item.info && item.info.statusInt == 3) ||
|
(item.info && item.info.statusInt == 4)
|
? 'space-text-red'
|
: '',
|
item.info && item.info.statusInt == 1 ? 'space-text-yellow' : '',
|
]" v-if="item.info">
|
{{ item.info.networkPort || "-" }}
|
</div>
|
<div class="port-tip">{{ item.index }}</div>
|
</div>
|
</div>
|
<!-- 全部的信息 -->
|
<el-table
|
:data="switchAllDetialInfos"
|
border
|
style="width: 100%;max-height: 650px;overflow-y: scroll;">
|
<el-table-column
|
prop="deviceName"
|
label="device name">
|
</el-table-column>
|
<el-table-column
|
prop="deviceNameDNS"
|
label="DNS">
|
</el-table-column>
|
<el-table-column
|
prop="ipAddress"
|
label="ip address">
|
</el-table-column>
|
<el-table-column
|
width="180"
|
prop="macAddress"
|
label="mac address">
|
</el-table-column>
|
<el-table-column
|
prop="nasPort"
|
label="nas port">
|
</el-table-column>
|
<el-table-column
|
prop="switchType"
|
label="switch type">
|
</el-table-column>
|
</el-table>
|
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import tjContainer from "./tj-container";
|
import bridge from "@/components/bridge";
|
import equAddForm from "@/components/equ-add-form.vue";
|
import {
|
getAreaServeInfo,
|
getFaultInfo,
|
getDeviceList,
|
updateDevicePosition,
|
getBridgeInfos,
|
delport,
|
statusPort,
|
} from "@/api/area";
|
import {getAreaTjData} from "@/api/area";
|
|
import {mapdata} from "./map-data.js";
|
import Bridge from "@/components/bridge.vue";
|
|
export default {
|
components: {tjContainer, bridge, equAddForm, Bridge},
|
props: {
|
item_show: false,
|
code: "",
|
query_networkPort: '',
|
},
|
//根据
|
//后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
|
//渲染时候，需要把 坐标，变为实际rem等像素坐标
|
//每个厂房大小不一样，先用一定的数代表吧.
|
|
data() {
|
return {
|
status_indrag: false,
|
current_drag_index: undefined,
|
bridge_infos: {},
|
//如果显示服务器的话
|
hideServe: true,
|
|
html_base: 10,
|
zoom_main: 0.8,
|
width: "160",
|
height: "60",
|
//默认的视点
|
x: 0,
|
y: 0,
|
zoom: 1, //默认的缩放级别,应该保证可以容纳整个项目
|
scale_container: 0.9,
|
//设备数据，实际便宜多少米+实际的宽高大小
|
equipmentdata: [
|
{t: "a", x: 20, y: 30, w: 1, h: 2},
|
{t: "a", x: 40, y: 30, w: 2, h: 2},
|
{t: "a", x: 60, y: 35, w: 2, h: 1},
|
],
|
|
//实际的像素比，单位rem
|
//屏幕和实际像素，默认比应该是,1:1？，反正有个比例吧,类似1米（其他单位）=多少px
|
//这个可以定死
|
screen_width: "160",
|
screen_height: "80",
|
base_move_offset: 0.6,
|
screen_margin_left: 0,
|
screen_margin_top: 0, //放大后的实际坐标-原本坐标，就是实际可以做的偏移量了，不能小于0，不能大于比例的，
|
// 当scale变化时候，的时候，恢复一下？或者scale放大的时候会有个，变化
|
|
//至于网桥，实际无非也是一组设备，到时候按照渲染出来就好了，先考虑canvas的拖拽？
|
mouse_click: undefined,
|
mouse_offset_last: undefined,
|
tleft: 20,
|
cal_offset_x: 0,
|
cal_offset_y: 0,
|
startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
|
startclientY: 0, //元素拖拽前距离浏览器的Y轴位置
|
//设备列表
|
device_list: [],
|
device_list_map: {},
|
container_offset_x: 0,
|
container_offset_y: 0,
|
container_offset_left: 0,
|
container_offset_top: 0,
|
//服务器的
|
serve_timer: null,
|
serve_scroll_num: 0,
|
serve_info: {},
|
serve_select: {},
|
data_service_list: [
|
// {
|
// time: "1-10",
|
// desc: "Host: SZHMESVMA544<br/>Line: SMT26<br/>Critical",
|
// status: "red",
|
// },
|
// {
|
// time: "11-20",
|
// desc: "Host: SZHMESVMA557<br/>Line: IB2 FA2<br/>Overall Execution Time 2103",
|
// status: "yellow",
|
// },
|
// {
|
// time: "31-40",
|
// desc: "Host: SZHMESVMA320<br/>Line: DBC8<br/>Overall Execution Time 3120",
|
// status: "yellow",
|
// },
|
],
|
//图标的
|
chartclose: false,
|
current_show_id: "",
|
//新增的
|
areas: [],
|
activateSwitchPorts: {},
|
switchAllDetialInfos:[],
|
dialog_activateSwitchPorts: false,
|
first_query_ip:true,
|
};
|
},
|
created() {
|
var zoom = this.$route.query.zoom;
|
console.log(this.$route, this.$router);
|
if (zoom) {
|
this.zoom_main = parseFloat(zoom);
|
}
|
this.x = parseFloat(this.width) / 2;
|
this.y = parseFloat(this.height) / 2;
|
this.screen_width = parseFloat(this.screen_width) * this.zoom;
|
this.screen_height = parseFloat(this.screen_height) * this.zoom;
|
},
|
async mounted() {
|
console.log("main-container1,mounted");
|
const content = document.getElementById("content");
|
content.addEventListener("wheel", this.handleWheel);
|
//获取到此区域的全部信息
|
this.device_list = [];
|
if (this.code) {
|
// var re = await getDeviceList(this.code);
|
// console.log("re", re);
|
// this.device_list = re.switchDetialInfos || [];
|
// await this.init_data();
|
this.update_map();
|
}
|
|
getAreaTjData().then((res) => {
|
// console.log('areas',res.switchAreaInfo || [])
|
this.areas = res.switchAreaInfo || [];
|
});
|
},
|
destroyed() {
|
const content = document.getElementById("content");
|
content.removeEventListener("wheel", this.handleWheel);
|
this.stopScrolling();
|
},
|
methods: {
|
toSwitchInfo(info) {
|
this.showServe(info);
|
},
|
async statusPort(info) {
|
//设置状态为正常
|
console.log("statusPort", info);
|
// return
|
var json = {
|
id: info.id,
|
operateType: 0,
|
networkPort: info.name,
|
};
|
this.$modal.loading("更新中");
|
|
const data = await statusPort(json);
|
|
this.$modal.closeLoading();
|
|
this.update_map();
|
},
|
async delPort(info) {
|
//删除接口，传什么呢??
|
console.log("delPort", info);
|
// return
|
var json = {
|
id: info.id,
|
operateType: 4,
|
networkPort: info.name,
|
};
|
this.$modal.loading("删除中");
|
|
const data = await delport(json);
|
|
this.$modal.closeLoading();
|
|
this.update_map();
|
},
|
backToTop() {
|
if (!this.hideServe) {
|
this.hideServe = !this.hideServe;
|
return;
|
}
|
this.$router.push({path: "/area-all"});
|
},
|
async update_map() {
|
this.$modal.loading("加载中");
|
var re = await getDeviceList(this.code);
|
this.device_list = re.switchDetialInfos || [];
|
await this.init_data();
|
this.$modal.closeLoading();
|
if(this.query_networkPort&&this.bridge_infos&&this.first_query_ip){
|
this.first_query_ip = false
|
//查询并调用，展示？
|
// this.bridge_infos[item.areaIndex] = {
|
// left: 0,
|
// top: 0,
|
// bottom: 0,
|
// right: 0,
|
// ...(mapdata["common"] || {}),
|
// ...(currentareaconfig[item.areaIndex] || ""),
|
// cells: item.areaCellRow || [],
|
// code: item.areaIndex,
|
// };
|
console.log('this.bridge_infos',this.bridge_infos,this.query_networkPort)
|
for(var key of Object.keys(this.bridge_infos)){
|
var allcells = this.bridge_infos[key]
|
for(var cell of allcells.cells){
|
var datamaps = cell.datamap || {}
|
console.log('datamaps',datamaps)
|
for(var itemkey of Object.keys(datamaps)){
|
if(datamaps[itemkey].name === this.query_networkPort){
|
//默认打开
|
// id itemcode@3_3_14 ud itemtext@3_3_14
|
var dom = document.getElementById('itemtext@'+key+'_'+(cell.cell)+'_'+itemkey)
|
|
// console.log('datamaps get',datamaps[itemkey],dom,datamaps,this.bridge_infos,)
|
if(dom){
|
dom.click()
|
}
|
}
|
}
|
}
|
}
|
}
|
},
|
click_item(id) {
|
this.current_show_id = id;
|
},
|
click_item_add(locInfo) {
|
console.log("this.$refs.equAddForm", this.$refs.equAddForm);
|
this.$refs.equAddForm && this.$refs.equAddForm.openform(locInfo);
|
},
|
async showServeInfo(info) {
|
//展示交换机全部端口
|
console.log("showServeInfo", info);
|
//弹出框展示全部端口，并且每个端口的情况
|
//获取一下信息
|
this.$modal.loading("加载中");
|
const res = await getDeviceList(this.code, info.cabinetName);
|
this.$modal.closeLoading();
|
console.log("serveinfo", res);
|
// this.activateSwitchPorts = res.switchDetialInfos || [];
|
this.activateSwitchPorts = {};
|
//分两行，每行24个
|
this.switchAllDetialInfos = res.switchAllDetialInfos || []
|
var activaePorts = {};
|
if (res.switchDetialInfos) {
|
for (var item of res.switchDetialInfos) {
|
if (item.port) activaePorts[item.port] = item;
|
}
|
}
|
console.log("activaePorts", activaePorts);
|
for (var i = 0; i <= 47; i++) {
|
var level = "" + parseInt(i / 24);
|
if (!this.activateSwitchPorts["" + level]) {
|
this.activateSwitchPorts["" + level] = [];
|
}
|
this.activateSwitchPorts["" + level].push({
|
index: "" + (i + 1),
|
name: "",
|
info: activaePorts["" + (i + 1)] || undefined,
|
});
|
}
|
// console.log("this.activateSwitchPorts", this.activateSwitchPorts);
|
this.dialog_activateSwitchPorts = true;
|
},
|
closeself() {
|
console.log("closeself parent");
|
this.chartclose = true;
|
},
|
update_status_indrag(result, currentid) {
|
this.status_indrag = result;
|
this.current_drag_index = currentid;
|
},
|
refresh_canvas() {
|
//根据缩放比，视觉角度，来做渲染？，或者说，最简单的，直接都展示出来，缩放下面的？然后超出的不展示即可？
|
},
|
handleMouseMove(event) {
|
if (this.mouse_click) {
|
// console.log("handleMouseMove", event);
|
//记录坐标，支持实时的?
|
if (this.mouse_offset_last) {
|
// this.tleft += 20 - this.mouse_offset_last.offsetX
|
var offsetx = event.clientX - this.mouse_offset_last.clientX;
|
var offsety = event.clientY - this.mouse_offset_last.clientY;
|
// console.log("offset0", offsetx, offsety);
|
var soffsetx = offsetx > 0 ? offsetx : -offsetx;
|
var soffsety = offsety > 0 ? offsety : -offsety;
|
if (soffsety >= soffsetx) {
|
offsetx = 0;
|
} else {
|
offsety = 0;
|
}
|
|
// console.log("offsetx", offsetx, offsety);
|
// this.tleft += offset * 0.1;
|
// this.cal_offset_x += offset;
|
// console.log('offset', event.offsetX - this.mouse_offset_last.offsetX)
|
if (event.target.id == "content") {
|
//让看板内部有偏移量
|
if (offsetx != 0) {
|
if (offsetx > 0) {
|
this.container_offset_left +=
|
this.base_move_offset * this.scale_container;
|
} else {
|
this.container_offset_left -=
|
this.base_move_offset * this.scale_container;
|
}
|
}
|
if (offsety != 0) {
|
if (offsety > 0) {
|
console.log("plus container_offset_top");
|
this.container_offset_top +=
|
this.base_move_offset * this.scale_container;
|
} else {
|
console.log("mul container_offset_top");
|
|
this.container_offset_top -=
|
this.base_move_offset * this.scale_container;
|
}
|
}
|
// if (this.container_offset_x < -90 / this.scale_container) {
|
// this.container_offset_x = -90 / this.scale_container;
|
// } else if (this.container_offset_x > 90 / this.scale_container) {
|
// this.container_offset_x = 90 / this.scale_container;
|
// }
|
// if (this.container_offset_y < -90 / this.scale_container) {
|
// this.container_offset_y = -90 / this.scale_container;
|
// } else if (this.container_offset_y > 90 / this.scale_container) {
|
// this.container_offset_y = 90 / this.scale_container;
|
// }
|
}
|
}
|
this.mouse_offset_last = event;
|
}
|
},
|
handleMouseUp(event) {
|
// console.log("handleMouseUp", event);
|
if (this.mouse_click) {
|
if (this.mouse_click.className == "equipment-item") {
|
//说明是转移视角的
|
//可能就是设备的
|
//直接修改坐标就行了
|
//计算鼠标偏移量，然后转换为屏幕坐标，再转换为显示单位坐标，同时弹出提示？是否要更改吧，更改就调用接口
|
if (
|
this.mouse_offset_last &&
|
(this.cal_offset_x || this.cal_offset_y)
|
) {
|
console.log("update?", this.tleft);
|
alert("是否要修改设备坐标");
|
}
|
} else {
|
}
|
}
|
|
this.mouse_click = undefined;
|
this.mouse_offset_last = undefined;
|
},
|
|
handleMouseDown(event) {
|
// console.log("handleMouseDown", event, event.target.className);
|
if (event.target.className.indexOf("equipment-item") >= 0) {
|
// console.log("handleMouseDown2", event, event.target.id);
|
// this.mouse_click = event.target;
|
} else if (event.target.id == "content") {
|
this.mouse_click = event.target;
|
}
|
},
|
handleMouseLeave(event) {
|
// console.log("handleMouseLeave", event);
|
//直接取消
|
// if (this.mouse_click) {
|
// // console.log("handleMouseMove", event);
|
// //记录坐标，支持实时的?
|
// if (this.mouse_offset_last) {
|
// // this.tleft += 20 - this.mouse_offset_last.offsetX
|
// var offsetx = event.offsetX - this.mouse_offset_last.offsetX;
|
// var offsety = event.offsetY - this.mouse_offset_last.offsetY;
|
// if (offsety >= offsetx) {
|
// offsetx = 0;
|
// } else {
|
// offsety = 0;
|
// }
|
// console.log("offsetx", offsetx, offsety);
|
|
// if (event.target.id == "content") {
|
// //让看板内部有偏移量
|
// if (offsetx != 0) {
|
// this.container_offset_x +=
|
// 2 * this.scale_container * (offsetx > 0 ? 1 : -1);
|
// }
|
// if (offsety != 0) {
|
// var a = 2 * this.scale_container * (offsety > 0 ? 1 : -1);
|
|
// console.log(
|
// "change this.container_offset_y1",
|
// this.container_offset_y,
|
// a
|
// );
|
// this.container_offset_y += a;
|
// console.log(
|
// "change this.container_offset_y2",
|
// this.container_offset_y,
|
// a
|
// );
|
// }
|
// }
|
// }
|
// this.mouse_offset_last = event;
|
// }
|
this.mouse_click = undefined;
|
this.mouse_offset_last = undefined;
|
},
|
|
handleWheel(event) {
|
event.preventDefault();
|
const delta = event.deltaY < 0 ? 0.2 : -0.2;
|
this.container_offset_left =
|
this.container_offset_left /
|
(this.scale_container / (delta + this.scale_container));
|
this.container_offset_top =
|
this.container_offset_top /
|
(this.scale_container / (delta + this.scale_container));
|
|
this.scale_container += delta;
|
if (this.scale_container < 0.2) {
|
this.scale_container = 0.2;
|
}
|
if (this.scale_container <= 1) {
|
this.container_offset_left = 0;
|
this.container_offset_top = 0;
|
}
|
},
|
dragstart(e) {
|
console.log(e);
|
this.startclientX = e.clientX; // 记录拖拽元素初始位置
|
this.startclientY = e.clientY;
|
console.log("start", e);
|
},
|
// 拖拽完成事件
|
async dragend(e) {
|
//确定是否需要更新
|
let that = this;
|
var dto = this.device_list_map[e.target.id];
|
that.$modal
|
.confirm(
|
"是否确定修改坐标,设备名:" + 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;
|
// console.log(
|
// "end drag",
|
// this.startclientX,
|
// e.clientX,
|
// this.cal_offset_x,
|
// this.device_list_map[e.target.id],
|
// this.device_list_map[e.target.id].currentX,
|
// parseFloat(this.device_list_map[e.target.id].currentX),
|
// parseFloat(this.device_list_map[e.target.id].currentX) +
|
// parseFloat(
|
// (this.cal_offset_x / this.html_base) * (1 / this.scale_container)
|
// ).toFixed(2)
|
// );
|
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_", ""),
|
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,
|
};
|
const data = await updateDevicePosition(json);
|
|
that.$modal.closeLoading();
|
console.log("updateDevicePosition", data);
|
})
|
.catch((e) => {
|
})
|
.finally(() => {
|
});
|
},
|
|
// async init_data() {
|
// this.$modal.loading();
|
// const data = await getDeviceList(this.code);
|
// this.$modal.closeLoading();
|
// var arr = (data && data.switchDetialInfos) || [];
|
// this.device_list = [];
|
// var index = -1;
|
// for (var item of arr) {
|
// index++;
|
// if (item.baseX) {
|
// var dto = {
|
// ...item,
|
// id: "content_" + item.id,
|
// //todo 需要根据类型来模拟设备
|
// typeclass: "equ-" + (index % 7),
|
// currentX: parseFloat(item.currentX || item.baseX),
|
// currentY: parseFloat(item.currentY || item.baseY),
|
// };
|
// this.device_list.push(dto);
|
// this.device_list_map[dto.id] = dto;
|
// }
|
// }
|
// console.log("this.device_list", this.device_list);
|
// },
|
async init_data() {
|
this.$modal.loading();
|
var {data} = await getBridgeInfos(this.code);
|
this.$modal.closeLoading();
|
var arr = (data && data) || [];
|
console.log("arr", arr);
|
var currentareaconfig = mapdata[this.code] || {};
|
|
this.bridge_infos = {};
|
// var name2ip = {}
|
// for(var item of this.device_list){
|
// name2ip[item.networkPort] = item.ip
|
// }
|
// console.log('name2ip',name2ip)
|
for (var item of arr) {
|
if (item.areaCellRow) {
|
for (var each of item.areaCellRow) {
|
each.datamap = {};
|
//需要遍历，然后设置进去
|
if (each.areaPosition) {
|
for (var cell of each.areaPosition) {
|
// var ip = name2ip[cell.networkPort] || ''
|
var tid = "";
|
var status = 0;
|
var cabinetName = "";
|
var switchName = "";
|
for (var itemvv of this.device_list) {
|
if (itemvv.networkPort == cell.networkPort) {
|
tid = itemvv.id;
|
cabinetName = itemvv.cabinetName || "";
|
status = itemvv.statusInt || 0;
|
switchName = itemvv.switchName || "";
|
break;
|
}
|
}
|
|
each.datamap["" + cell.networkPortRow] = {
|
name: cell.networkPort,
|
cabinetName: cabinetName,
|
id: tid,
|
status: status,
|
switchName: switchName,
|
};
|
}
|
}
|
|
each.width = each.dataRow || "";
|
// console.log('cell',cell)
|
}
|
}
|
|
this.bridge_infos[item.areaIndex] = {
|
left: 0,
|
top: 0,
|
bottom: 0,
|
right: 0,
|
...(mapdata["common"] || {}),
|
...(currentareaconfig[item.areaIndex] || ""),
|
cells: item.areaCellRow || [],
|
code: item.areaIndex,
|
};
|
console.log("bridge_infos", this.bridge_infos);
|
console.log(
|
"currentareaconfig",
|
currentareaconfig[item.areaIndex],
|
currentareaconfig["pad"]
|
);
|
if (currentareaconfig["pad"]) {
|
this.bridge_infos[item.areaIndex]["pad"] = currentareaconfig["pad"];
|
}
|
if (
|
currentareaconfig[item.areaIndex] &&
|
currentareaconfig[item.areaIndex]["pad"]
|
) {
|
this.bridge_infos[item.areaIndex]["pad"] =
|
currentareaconfig[item.areaIndex]["pad"];
|
}
|
// console.log('currentareaconfig',item.areaCode,currentareaconfig[item.areaCode],arr,currentareaconfig)
|
}
|
},
|
|
startScrolling() {
|
this.stopScrolling();
|
const myDiv = document.getElementById("my_serve_info_list");
|
this.serve_timer = setInterval(() => {
|
if (myDiv) {
|
myDiv.scrollTo(0, this.serve_scroll_num);
|
this.serve_scroll_num++;
|
if (myDiv.scrollTop >= myDiv.scrollHeight - myDiv.clientHeight) {
|
this.serve_timer && clearInterval(this.serve_timer);
|
this.serve_timer = null;
|
setTimeout(() => {
|
this.serve_scroll_num = 0;
|
this.startScrolling();
|
}, 1500);
|
}
|
}
|
}, 20);
|
},
|
stopScrolling() {
|
this.serve_scroll_num = 0;
|
this.serve_timer && clearInterval(this.serve_timer);
|
},
|
async showServe(info) {
|
if (!this.hideServe) {
|
this.hideServe = !this.hideServe;
|
return;
|
}
|
this.$modal.loading();
|
this.serve_info = {};
|
this.serve_select = info;
|
console.log("serve_select", this.serve_select);
|
const {switchCabinet} = await getAreaServeInfo(this.code, info);
|
console.log("switchCabinet", switchCabinet);
|
if (switchCabinet && switchCabinet.length > 0) {
|
this.serve_info = switchCabinet[0];
|
|
// const data = await getFaultInfo(this.code);
|
// this.data_service_list = [];
|
// if (data && data.faultInfo) {
|
// // this.data_service_list = [];
|
// // time: "1-10",
|
// // desc: "Host: SZHMESVMA557<br/>Line: IB2 FA2<br/>Overall Execution Time 2103",
|
// // status: "red",
|
// var index = 0;
|
// for (var item of data.faultInfo) {
|
// //需要根据名字过滤
|
// // console.log('item.ip == info.ip',info.ip)
|
// // if (item.ip == info.ip)
|
// {
|
// this.data_service_list.push({
|
// status: item.node == "异常" ? "red" : "green",
|
// time: ++index,
|
// desc: `${item.areaCode}/${item.portMessage}<br/>${item.cabineName}/${item.switchDeviceName}/${item.switchPort}`,
|
// });
|
// }
|
// }
|
// setTimeout(() => {
|
// this.startScrolling();
|
// }, 1000);
|
// }
|
// console.log("data_service_list", this.data_service_list);
|
}
|
|
this.hideServe = false;
|
// console.log("showServe", this.hideServe);
|
|
this.$modal.closeLoading();
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
@import "../../common/itm_svg.scss";
|
@import "../../common/area-bg.scss";
|
|
$width-screen1: 174.17rem;
|
|
.main-container {
|
/* position: fixed;
|
right: calc(5rem);
|
top: calc($height-header - 8rem);
|
left: calc((100% - $width-screen1 - 10rem - 18rem) / 2);
|
left: 0;
|
right: 0; */
|
/* background-color: rgba(209, 227, 247, 1); */
|
|
// overflow: hidden;
|
margin: 0 auto;
|
margin-bottom: 5rem;
|
|
.equipments-container {
|
background: #d3e3f3;
|
position: relative;
|
margin: 0 auto;
|
cursor: pointer;
|
max-width: 100%;
|
max-height: 100vh;
|
|
.equipment-item {
|
cursor: pointer;
|
position: absolute;
|
width: 5rem;
|
height: 5rem;
|
background-size: 100% 100%;
|
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
|
}
|
}
|
|
.serve-item {
|
margin: 0 auto;
|
display: flex;
|
width: fit-content;
|
cursor: pointer;
|
|
.serve-img {
|
margin-right: 2rem;
|
background-image: url("../../assets/equipment/serve.svg");
|
background-image: url("../../assets/equipment/serve_v2.png");
|
background-size: 100% 100%;
|
width: 30.3rem;
|
height: 62.3rem;
|
|
/* padding-left: 1rem; */
|
.each-item-container {
|
margin-top: 21rem;
|
margin-left: 3rem;
|
|
.each-item {
|
background-image: url("../../assets/equipment/serve_item.png");
|
width: 18.9rem;
|
height: 4.8rem;
|
background-size: 100% 100%;
|
margin-bottom: 0.9rem;
|
color: #265696;
|
position: relative;
|
|
.desc {
|
text-align: left;
|
padding-left: 1rem;
|
padding-top: 0.5rem;
|
|
.title {
|
font-weight: 600;
|
margin-bottom: 0.8rem;
|
/* */
|
}
|
|
.value {
|
}
|
}
|
}
|
|
.each-item:hover::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background-color: #059ce293;
|
}
|
|
.each-item-default::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background-color: #4bb6e854;
|
}
|
|
.tip-msg {
|
display: none;
|
position: absolute;
|
left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
|
top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
|
min-width: 21rem;
|
height: 13.6rem;
|
background: #f1f9ff;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
|
border-radius: 0.6rem;
|
z-index: 2;
|
padding: 1.3rem;
|
|
.title {
|
font-size: 2.5rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 3.6rem;
|
text-align: left;
|
margin-bottom: 1rem;
|
text-overflow: ellipsis;
|
/* width: 10rem; */
|
overflow: hidden;
|
word-break: break-all;
|
white-space: nowrap;
|
|
.dot {
|
width: 1.6rem;
|
height: 1.6rem;
|
min-width: 1.6rem;
|
min-height: 1.6rem;
|
/* background: #e20505; */
|
border-radius: 50%;
|
margin-top: 1rem;
|
margin-right: 0.5rem;
|
}
|
}
|
|
.desc {
|
font-size: 1.8rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
line-height: 2rem;
|
text-align: left;
|
/* margin-left: 2.1rem; */
|
margin-top: 0.5rem;
|
|
.f-n {
|
color: #0dbe79;
|
font-weight: 600;
|
}
|
|
.f-r {
|
color: #e10808;
|
font-weight: 600;
|
}
|
|
.f-y {
|
color: #ffc310;
|
font-weight: 600;
|
}
|
}
|
}
|
|
.each-item:hover .tip-msg {
|
display: unset;
|
}
|
}
|
}
|
|
.tj-item {
|
margin-left: 2rem;
|
width: 33.5rem;
|
min-height: 47.5rem;
|
min-height: 17.5rem;
|
height: fit-content;
|
background: #f2f8fd;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.38),
|
inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
|
border-radius: 1rem;
|
|
.tj-nums {
|
padding: 1.8rem;
|
|
.title {
|
font-size: 2.5rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #265696;
|
line-height: 3.6rem;
|
text-align: left;
|
margin-bottom: 1.8rem;
|
}
|
|
.equ-num-item {
|
margin: 0 auto;
|
text-align: center;
|
|
.desc2 {
|
font-size: 1.6rem;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #235884;
|
line-height: 2.2rem;
|
}
|
|
.num {
|
font-size: 2.4rem;
|
font-family: Impact;
|
line-height: 2.9rem;
|
}
|
|
.num.g {
|
color: #0dbe79;
|
}
|
|
.num.y {
|
color: #ffc310;
|
}
|
|
.num.r {
|
color: #e10808;
|
}
|
}
|
|
.equ-num-item.a {
|
margin-left: 0;
|
margin-right: auto;
|
}
|
|
.equ-num-item.c {
|
margin-right: 0;
|
margin-left: auto;
|
}
|
}
|
|
.tj-list {
|
padding: 2.2rem;
|
padding-top: 1.4rem;
|
|
.service-list-arr {
|
background-color: #f2f8fd;
|
overflow: hidden;
|
height: 30.3rem;
|
|
.service-list-arr-item {
|
width: 100%;
|
min-height: 3rem;
|
/* margin-top: 2.2rem; */
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
height: fit-content;
|
|
.time {
|
font-size: 1.2rem;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #a1b6c8;
|
line-height: 1.7rem;
|
margin-right: 1rem;
|
}
|
|
.service-list-arr-item_content {
|
font-family: PingFangSC-Medium, PingFang SC;
|
color: #235884;
|
line-height: 1.17rem;
|
text-align: left;
|
margin-left: 0.4rem;
|
margin-right: 1.5rem;
|
padding-top: 1rem;
|
|
font-size: 1.4rem;
|
font-weight: 500;
|
line-height: 1.4rem;
|
}
|
|
.dot {
|
width: 0.58rem;
|
height: 0.58rem;
|
border-radius: 50%;
|
margin-top: 0.8rem;
|
margin-left: auto;
|
margin-right: 10px;
|
}
|
|
.dot.red {
|
background: #c10b0b;
|
}
|
|
.dot.yellow {
|
background: #fda928;
|
}
|
|
.dot.green {
|
background: #17a537;
|
}
|
}
|
}
|
}
|
|
.tj-line {
|
width: 30.1rem;
|
height: 0.1rem;
|
border: 0.1rem solid #ccdeec;
|
margin: 0 auto;
|
}
|
}
|
}
|
|
.chart-open {
|
width: 6.1rem;
|
height: 7.5rem;
|
background: #e9f4fd;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.83),
|
inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
|
border-radius: 1rem;
|
position: fixed;
|
right: 3rem;
|
top: 50%;
|
transform: translate(0%, 50%);
|
cursor: pointer;
|
|
.img-button {
|
background-size: 100% 100%;
|
background-image: url("../../assets/area/chart-open.svg");
|
width: 2.6rem;
|
height: 2.6rem;
|
transform: translate(-50%, -50%);
|
left: 50%;
|
top: 50%;
|
position: absolute;
|
}
|
}
|
}
|
</style>
|
<style scoped lang="scss">
|
//7个设备
|
.equ-0 {
|
background-image: url("../../assets/equipment/arm.svg");
|
width: 9.6rem;
|
height: 9.6rem;
|
}
|
|
.equ-1 {
|
background-image: url("../../assets/equipment/pda.svg");
|
width: 4.1rem;
|
height: 6.1rem;
|
}
|
|
.equ-2 {
|
background-image: url("../../assets/equipment/pc.svg");
|
width: 15rem;
|
height: 12.6rem;
|
}
|
|
.equ-3 {
|
background-image: url("../../assets/equipment/print.svg");
|
width: 8.2rem;
|
height: 8.1rem;
|
}
|
|
.equ-4 {
|
background-image: url("../../assets/equipment/screen.svg");
|
width: 15.9rem;
|
height: 13.1rem;
|
}
|
|
.equ-5 {
|
background-image: url("../../assets/equipment/setting.svg");
|
width: 7.8rem;
|
height: 7.5rem;
|
}
|
|
.equ-6 {
|
background-image: url("../../assets/equipment/video.svg");
|
width: 12.7rem;
|
height: 9.4rem;
|
}
|
</style>
|
<style scoped lang="scss">
|
.back-button-left-bottom {
|
width: 10.6rem;
|
height: 3.9rem;
|
background: #6eb3ff;
|
border-radius: 0.4rem;
|
border: 0.2rem solid #278afa;
|
font-size: 1.6rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #ffffff;
|
line-height: 3.9rem;
|
position: fixed;
|
left: 3rem;
|
bottom: 3.5rem;
|
cursor: pointer;
|
z-index: 99;
|
}
|
</style>
|
|
<!-- 交换机的端口 -->
|
<style scoped lang="scss">
|
.port-items {
|
display: flex;
|
margin-bottom: 8rem;
|
/* height: 2rem; */
|
width: fit-content;
|
|
.port-item {
|
background: #e9f4fd;
|
border-top: 5px solid #e9f4fd;
|
flex: 1;
|
margin: 0 auto;
|
min-width: 6rem;
|
max-width: 6rem;
|
/* max-width: 6rem; */
|
height: 1.6rem;
|
// background: #fff;
|
// box-shadow: 0rem -2rem 2.1rem 0rem #fff;
|
background-image: url("../../assets/area/space.svg");
|
background-size: 100% 100%;
|
position: relative;
|
|
.port-tip {
|
position: absolute;
|
bottom: -2.5rem;
|
height: 2.5rem;
|
font-size: 1.8rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #265696;
|
line-height: 2.5rem;
|
text-align: center;
|
/* margin-bottom: 0.5rem; */
|
left: 0;
|
right: 0;
|
}
|
|
.space-text {
|
background-image: url("../../assets/area/space-text.svg");
|
background-size: 100% 100%;
|
min-width: 6rem;
|
min-height: 2.5rem;
|
transform: translate(-50%, 0%);
|
left: 50%;
|
padding-top: 0.5rem;
|
top: -2.5rem;
|
position: absolute;
|
/* 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;
|
}
|
}
|
|
.port-item:nth-child(6n) {
|
margin-right: 3rem;
|
}
|
}
|
|
.port-items:nth-child(2n) {
|
margin-bottom: 8rem;
|
}
|
</style>
|
