From f7ac77c7cc193502aff7e2a70f636253ada12386 Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期二, 19 十一月 2024 10:14:52 +0800
Subject: [PATCH] 1.区域页面
---
src/views/area/main-container.vue | 1080 ++++++++++++++++++++++++++++-------------------------------
1 files changed, 511 insertions(+), 569 deletions(-)
diff --git a/src/views/area/main-container.vue b/src/views/area/main-container.vue
index 48c0a43..9014b69 100644
--- a/src/views/area/main-container.vue
+++ b/src/views/area/main-container.vue
@@ -11,9 +11,8 @@
@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="{
+ @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mousedown="handleMouseDown" @mouseleave="handleMouseLeave"
+ :style="{
transform: `scale(${scale_container})`,
width: screen_width + 'rem',
height: screen_height + 'rem',
@@ -23,39 +22,8 @@
'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" -->
+ <!-- <div class="bridge-group" v-for="group in bridge_infos" :key="group.code" :code="group.code">
<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"
@@ -65,24 +33,61 @@
: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 v-for="(item, index) in elements" :key="index" class="grid-item bridge-items" :style="{
+ width: elementWidth + 'rem',
+ height: elementHeight + 'rem',
+ top: `${item.y * elementHeight}rem`,
+ left: `${item.x * elementWidth}rem`
+ }">
+ <!-- 每个元素的内容可以放在这里 -->
+
+ <div v-if="item.isPlaceholder" class="bridge-item" @dblclick="handleItemClickCancel(item)"
+ @click="handleClickToAddItem(index,item)"
+
+ :class="[item?.deviceInfo ? 'space-in' : '',!item?.deviceInfo || !item?.deviceInfo?.id?'space-text-gray': '',
+ status_indrag &&
+ (!item?.deviceInfo || !item?.deviceInfo?.id)? 'space-drag': '',
+ ]"
+ >
+
+ <!-- <div v-show="item.deviceInfo && item.deviceInfo?.networkPort" -->
+ <div
+ class="space-text" @dragstart="dragstart($event, index)" @dragend="dragend($event, index)"
+ @drop="handleDrop($event, index)" @dragover="handleDragOver($event)" draggable="true"
+ @click="showDeviceInfo(index,item,$event)"
+ >
+ {{ item.deviceInfo?.networkPort }}
+ <device-info v-show="selectedIndex === index " :show_info="show_device_info"
+ :device_info="cur_device_info" @toSwitchInfo="toSwitchInfo"
+
+ ></device-info>
+ </div>
+ </div>
+ <div v-else @click="handleItemClick(item)" class="bridge-item-none hover-shadow">
+ <div :style="{
+ width: elementWidth + 'rem',
+ height: elementHeight / 2 + 'rem'
+ }"></div>
+ </div>
+
</div>
+
</div>
<!-- 需要渲染一个canvas，然后基于数据，和滚动坐标，缩放坐标，位置中点吧 -->
<tj-container v-if="true && code" :code="code" :key="code" @closeself="closeself"
- :chartclose="chartclose"></tj-container>
+ :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>
- <server-info v-if="!hideServe"
- :serve_info="serve_info"
- :serve_select="serve_select"
- :code="code"></server-info>
+ @update="update_map"></equ-add-form>
+ <server-info v-if="!hideServe" :serve_info="serve_info" :serve_select="serve_select" :code="code"></server-info>
<div class="back-button-left-bottom" @click="backToTop">返回</div>
-
+
</div>
</template>
<script>
@@ -90,6 +95,7 @@
import bridge from "@/components/bridge";
import serverInfo from "./server-info";
import equAddForm from "@/components/equ-add-form.vue";
+import deviceInfo from "@/components/device-info";
import {
getAreaServeInfo,
@@ -100,13 +106,13 @@
delport,
statusPort,
} from "@/api/area";
-import {getAreaTjData} from "@/api/area";
+import { getAreaTjData } from "@/api/area";
-import {mapdata} from "./map-data.js";
+import { mapdata } from "./map-data.js";
import Bridge from "@/components/bridge.vue";
export default {
- components: {tjContainer, bridge, equAddForm, Bridge,serverInfo},
+ components: { tjContainer, bridge, equAddForm, Bridge, serverInfo, deviceInfo },
props: {
item_show: false,
code: "",
@@ -136,9 +142,9 @@
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},
+ { 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
@@ -176,17 +182,7 @@
// 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,
@@ -194,10 +190,36 @@
//新增的
areas: [],
activateSwitchPorts: {},
- switchAllDetialInfos:[],
+ switchAllDetialInfos: [],
dialog_activateSwitchPorts: false,
- first_query_ip:true,
+ first_query_ip: true,
+
+ totalElements: 1000, // 元素总数
+ elements: [], // 初始化 elements 数据为空数组
+ isDragging: false,
+ dragSource: null, // 当前被拖拽的元素
+
+ show_device_info: false, // 展示设备信息
+ selectedIndex: null,
+ cur_device_info: null, // 当前的设备信息
+
};
+ },
+ computed: {
+ // 计算行数和列数
+ gridDimensions() {
+ const columns = Math.ceil(Math.sqrt(this.totalElements * (this.screen_width / this.screen_height)));
+ const rows = Math.ceil(this.totalElements / columns);
+ return { columns, rows };
+ },
+ // 每个元素的宽度
+ elementWidth() {
+ return this.screen_width / this.gridDimensions.columns;
+ },
+ // 每个元素的高度
+ elementHeight() {
+ return this.screen_height / this.gridDimensions.rows;
+ },
},
created() {
var zoom = this.$route.query.zoom;
@@ -228,6 +250,11 @@
// console.log('areas',res.switchAreaInfo || [])
this.areas = res.switchAreaInfo || [];
});
+
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
},
destroyed() {
const content = document.getElementById("content");
@@ -235,6 +262,90 @@
this.stopScrolling();
},
methods: {
+ initializeElements() {
+ const elements = [];
+ for (let i = 0; i < this.totalElements; i++) {
+ const x = i % this.gridDimensions.columns;
+ const y = Math.floor(i / this.gridDimensions.columns);
+ const isPlaceholder = false
+ const name = x + "-" + y
+ // 绑定设备信息
+ const deviceInfo = {}
+ elements.push({ x, y, isPlaceholder, name, deviceInfo });
+ }
+
+ // 判断最后一行是否需要补齐
+ const remainder = this.totalElements % this.gridDimensions.columns;
+ if (remainder !== 0) {
+ const placeholdersNeeded = this.gridDimensions.columns - remainder;
+ for (let i = 0; i < placeholdersNeeded; i++) {
+ const x = remainder + i;
+ const y = Math.floor(this.totalElements / this.gridDimensions.columns);
+ const isPlaceholder = false
+ const name = x + "-" + y
+ // 绑定设备信息
+ const deviceInfo = {}
+ elements.push({ x, y, isPlaceholder, name, deviceInfo });
+ }
+ }
+ this.elements = elements; // 赋值给 data 中的 elements
+ },
+
+ // 根据元素的行列绑定元素信息
+ async handleBindElementsItems() {
+ const deviceInfoList = await getDeviceList(this.code)
+ // 所有的格子信息
+ console.log("所有的格子信息")
+ console.log(this.elements)
+ // 所有的设备信息
+ console.log("所有的设备信息")
+ console.log(deviceInfoList.switchDetialInfos)
+ // 遍历 switchDetialInfos，构造 Map
+ const switchDetailInfosMap = new Map();
+ const switchDetialInfos = deviceInfoList.switchDetialInfos
+ switchDetialInfos.forEach((info) => {
+ const key = `${info.areaRow}-${info.areaCell}`;
+ // 直接将单个对象作为值放入 Map
+ switchDetailInfosMap.set(key, info);
+ });
+
+ console.log("设备信息转换后的 Map");
+ console.log(switchDetailInfosMap);
+
+ // 遍历 elements，将匹配的设备信息添加到每个元素的 deviceInfo 属性
+ this.elements.forEach((element) => {
+ const key = `${element.y}-${element.x}`; // 使用元素的 y 和 x 构造 key
+ const deviceInfo = switchDetailInfosMap.get(key); // 从 Map 中查找设备信息
+ if (deviceInfo) {
+ // 如果找到设备信息，存放到 element 的 deviceInfo 属性
+ element.deviceInfo = deviceInfo;
+ element.isPlaceholder = true
+ } else {
+ // 如果未找到，则清空或设置默认值
+ element.deviceInfo = null;
+ element.isPlaceholder = false
+ }
+ });
+
+
+ },
+
+ handleItemClick(item) {
+ item.deviceInfo = null;
+ this.$set(item, 'isPlaceholder', true)
+ },
+ handleItemClickCancel(item) {
+ // 这里的取消操作需要判断当前的元素是不是空的
+ if(item?.deviceInfo?.id){
+ // this.$message('空设备才可双击删除！');
+ }else{
+ this.$set(item, 'isPlaceholder', false)
+ this.$message('空设备删除成功！');
+ }
+
+ },
+
+
toSwitchInfo(info) {
this.showServe(info);
},
@@ -256,9 +367,7 @@
this.update_map();
},
async delPort(info) {
- //删除接口，传什么呢??
- console.log("delPort", info);
- // return
+
var json = {
id: info.id,
operateType: 4,
@@ -270,14 +379,17 @@
this.$modal.closeLoading();
- this.update_map();
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
},
backToTop() {
if (!this.hideServe) {
this.hideServe = !this.hideServe;
return;
}
- this.$router.push({path: "/area-all"});
+ this.$router.push({ path: "/area-all" });
},
async update_map() {
this.$modal.loading("加载中");
@@ -285,37 +397,28 @@
this.device_list = re.switchDetialInfos || [];
await this.init_data();
this.$modal.closeLoading();
- if(this.query_networkPort&&this.bridge_infos&&this.first_query_ip){
+ 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()
- }
+ 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()
}
}
+ }
}
}
}
@@ -328,6 +431,7 @@
this.$refs.equAddForm && this.$refs.equAddForm.openform(locInfo);
},
async showServeInfo(info) {
+
//展示交换机全部端口
console.log("showServeInfo", info);
//弹出框展示全部端口，并且每个端口的情况
@@ -398,34 +502,25 @@
if (offsetx != 0) {
if (offsetx > 0) {
this.container_offset_left +=
- this.base_move_offset * this.scale_container;
+ this.base_move_offset * this.scale_container;
} else {
this.container_offset_left -=
- this.base_move_offset * this.scale_container;
+ 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;
+ 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;
+ 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;
@@ -440,8 +535,8 @@
//直接修改坐标就行了
//计算鼠标偏移量，然后转换为屏幕坐标，再转换为显示单位坐标，同时弹出提示？是否要更改吧，更改就调用接口
if (
- this.mouse_offset_last &&
- (this.cal_offset_x || this.cal_offset_y)
+ this.mouse_offset_last &&
+ (this.cal_offset_x || this.cal_offset_y)
) {
console.log("update?", this.tleft);
alert("是否要修改设备坐标");
@@ -455,56 +550,15 @@
},
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;
},
@@ -513,11 +567,11 @@
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_left /
+ (this.scale_container / (delta + this.scale_container));
this.container_offset_top =
- this.container_offset_top /
- (this.scale_container / (delta + this.scale_container));
+ this.container_offset_top /
+ (this.scale_container / (delta + this.scale_container));
this.scale_container += delta;
if (this.scale_container < 0.2) {
@@ -528,108 +582,169 @@
this.container_offset_top = 0;
}
},
- dragstart(e) {
+ dragstart(e, index) {
console.log(e);
- this.startclientX = e.clientX; // 记录拖拽元素初始位置
- this.startclientY = e.clientY;
+ this.dragSource = index; // 记录拖拽的源元素
console.log("start", e);
+ console.log("拖拽事件开始", index)
+ console.log(this.elements[index])
},
// 拖拽完成事件
- async dragend(e) {
+ async dragend(e, index) {
//确定是否需要更新
let that = this;
+ console.log("拖拽事件完成", index)
+ console.log("拖拽目标Id：", e.target.id)
+
+
+ return;
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);
+ .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;
- that.$modal.closeLoading();
- console.log("updateDevicePosition", data);
- })
- .catch((e) => {
- })
- .finally(() => {
- });
+ 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);
- // },
+ /**两个元素交换位置 */
+ handleDrop(e, targetIndex) {
+ console.log("handleDrop")
+ console.log(targetIndex)
+
+ let that = this;
+ let sourceIndex = this.dragSource;
+ // 实现逻辑，例如交换两个元素的位置
+ if (sourceIndex !== targetIndex &&(this.elements[sourceIndex].deviceInfo||this.elements[targetIndex].deviceInfo)) {
+ const sourceDeviceInfo = this.elements[sourceIndex].deviceInfo;
+ const targetDeviceInfo = this.elements[targetIndex].deviceInfo;
+ let sourceNetworkPort="指定位置"
+ if(sourceDeviceInfo?.networkPort){
+ sourceNetworkPort=sourceDeviceInfo?.networkPort
+ }
+ let targetNetworkPort="指定位置"
+ if(targetDeviceInfo?.networkPort){
+ targetNetworkPort=targetDeviceInfo?.networkPort
+ }
+ let type=false;
+ if(sourceDeviceInfo?.networkPort&&targetDeviceInfo?.networkPort){
+ type=true;
+ }
+ that.$modal
+ .confirm(
+ `是否确定${type ? "交换" : "移动"}位置:从${sourceNetworkPort
+ }到${targetNetworkPort}上`
+ )
+ .then(async (res) => {
+
+
+ this.elements[sourceIndex].deviceInfo = targetDeviceInfo
+ this.elements[targetIndex].deviceInfo = sourceDeviceInfo
+
+ if(this.elements[sourceIndex].deviceInfo==null){
+ this.elements[sourceIndex].isPlaceholder=false;
+ }
+
+ if(this.elements[targetIndex].deviceInfo==null){
+ this.elements[targetIndex].isPlaceholder=false;
+ }
+
+ that.$modal.loading();
+ var json = {
+ id: sourceDeviceInfo.id,
+ operateType: 1,
+ operateTime: new Date(),
+ networkPort: sourceDeviceInfo.networkPort,
+ areaCell:this.elements[sourceIndex].x,
+ areaRow:this.elements[sourceIndex].y,
+ areaCellTarget:this.elements[targetIndex].x,
+ areaRowTarget:this.elements[targetIndex].y,
+ };
+ if (targetDeviceInfo?.id) {
+ json["changeId"] = targetDeviceInfo?.id;
+ json["operateType"] = 3;
+ }
+ const data = await updateDevicePosition(json);
+ that.$modal.closeLoading();
+
+ if (data) {
+ this.$message.success(`${targetid ? "交换" : "移动"}成功`);
+ }
+
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
+
+ })
+ .catch((e) => { })
+ .finally(() => { });
+
+
+ }
+
+ },
+
+ handleDragOver(e) {
+ e.preventDefault();
+ },
+
+
+ // 点击增加
+ handleClickToAddItem(index,item){
+ // 如果存在设备的话则直接返回
+ if(item?.deviceInfo?.id) return;
+ this.$refs.equAddForm && this.$refs.equAddForm.openform();
+ },
+
async init_data() {
this.$modal.loading();
- var {data} = await getBridgeInfos(this.code);
+ 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
@@ -684,21 +799,21 @@
};
console.log("bridge_infos", this.bridge_infos);
console.log(
- "currentareaconfig",
- currentareaconfig[item.areaIndex],
- currentareaconfig["pad"]
+ "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"]
+ currentareaconfig[item.areaIndex] &&
+ currentareaconfig[item.areaIndex]["pad"]
) {
this.bridge_infos[item.areaIndex]["pad"] =
- currentareaconfig[item.areaIndex]["pad"];
+ currentareaconfig[item.areaIndex]["pad"];
}
- // console.log('currentareaconfig',item.areaCode,currentareaconfig[item.areaCode],arr,currentareaconfig)
+
}
},
@@ -725,6 +840,7 @@
this.serve_timer && clearInterval(this.serve_timer);
},
async showServe(info) {
+
if (!this.hideServe) {
this.hideServe = !this.hideServe;
return;
@@ -733,49 +849,28 @@
this.serve_info = {};
this.serve_select = info;
console.log("serve_select", this.serve_select);
- const {switchCabinet} = await getAreaServeInfo(this.code, info);
+ 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();
+ },
+ showDeviceInfo(index, item,event) {
+ event.stopPropagation(); // 阻止事件冒泡
+ this.selectedIndex = index
+ this.show_device_info = !this.show_device_info
+ this.cur_device_info = item.deviceInfo
},
},
};
</script>
<style lang="scss" scoped>
-@import "../../common/itm_svg.scss";
-@import "../../common/area-bg.scss";
+@import "@/common/itm_svg.scss";
+@import "@/common/area-bg.scss";
$width-screen1: 174.17rem;
@@ -787,7 +882,6 @@
left: 0;
right: 0; */
/* background-color: rgba(209, 227, 247, 1); */
-
// overflow: hidden;
margin: 0 auto;
margin-bottom: 5rem;
@@ -810,290 +904,12 @@
}
}
- .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);
+ inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
border-radius: 1rem;
position: fixed;
right: 3rem;
@@ -1103,7 +919,7 @@
.img-button {
background-size: 100% 100%;
- background-image: url("../../assets/area/chart-open.svg");
+ background-image: url("@/assets/area/chart-open.svg");
width: 2.6rem;
height: 2.6rem;
transform: translate(-50%, -50%);
@@ -1117,43 +933,43 @@
<style scoped lang="scss">
//7个设备
.equ-0 {
- background-image: url("../../assets/equipment/arm.svg");
+ background-image: url("@/assets/equipment/arm.svg");
width: 9.6rem;
height: 9.6rem;
}
.equ-1 {
- background-image: url("../../assets/equipment/pda.svg");
+ background-image: url("@/assets/equipment/pda.svg");
width: 4.1rem;
height: 6.1rem;
}
.equ-2 {
- background-image: url("../../assets/equipment/pc.svg");
+ background-image: url("@/assets/equipment/pc.svg");
width: 15rem;
height: 12.6rem;
}
.equ-3 {
- background-image: url("../../assets/equipment/print.svg");
+ background-image: url("@/assets/equipment/print.svg");
width: 8.2rem;
height: 8.1rem;
}
.equ-4 {
- background-image: url("../../assets/equipment/screen.svg");
+ background-image: url("@/assets/equipment/screen.svg");
width: 15.9rem;
height: 13.1rem;
}
.equ-5 {
- background-image: url("../../assets/equipment/setting.svg");
+ background-image: url("@/assets/equipment/setting.svg");
width: 7.8rem;
height: 7.5rem;
}
.equ-6 {
- background-image: url("../../assets/equipment/video.svg");
+ background-image: url("@/assets/equipment/video.svg");
width: 12.7rem;
height: 9.4rem;
}
@@ -1197,7 +1013,7 @@
height: 1.6rem;
// background: #fff;
// box-shadow: 0rem -2rem 2.1rem 0rem #fff;
- background-image: url("../../assets/area/space.svg");
+ background-image: url("@/assets/area/space.svg");
background-size: 100% 100%;
position: relative;
@@ -1217,10 +1033,10 @@
}
.space-text {
- background-image: url("../../assets/area/space-text.svg");
- background-size: 100% 100%;
- min-width: 6rem;
- min-height: 2.5rem;
+ 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;
@@ -1260,4 +1076,130 @@
.port-items:nth-child(2n) {
margin-bottom: 8rem;
}
+</style>
+
+<style scoped>
+.grid-item {
+ position: absolute;
+ box-sizing: border-box;
+ /* border: 1px solid #ccc; 可选样式，便于查看布局 */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: none;
+}
+</style>
+
+
+<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 {
+ background: #A6C7E3;
+ 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;
+
+
+ .bridge-item-element {
+ margin: 1 auto;
+ background-image: url("@/assets/area/space.svg");
+ background-repeat: no-repeat;
+ /* 不重复显示图片 */
+ background-position: center;
+ /* 图片居中显示 */
+ background-size: contain;
+ /* 调整图片大小以适应容器 */
+ cursor: grabbing;
+ cursor: move;
+ }
+
+ .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;
+ }
+ }
+
+
+ .bridge-item-none {
+ transition: box-shadow 0.3s ease;
+ /* 平滑的阴影过渡效果 */
+ }
+
+ .hover-shadow:hover {
+ // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 鼠标悬停时的阴影效果 */
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+ /* 加深的阴影效果 */
+ // box-shadow: 0 6px 15px rgba(162, 194, 221, 0.5); /* 加深的阴影效果 */
+
+ }
+
+ .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);
+ }
+}
+
+.space-text-gray {
+ .space-text {
+ color: #818181 !important;
+ background-image: url("@/assets/area/space-text-gray.svg") !important;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3