From 0ae255185f422781f8a5cc4c52ad56ee0d3a1e6e Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期五, 29 十一月 2024 19:07:15 +0800
Subject: [PATCH] 1.首页可拖拽 2.没有名字去掉悬浮层 3.增加了背景
---
src/views/area/main-container.vue | 1453 +++++++++++++++++++++++++++++----------------------------
1 files changed, 737 insertions(+), 716 deletions(-)
diff --git a/src/views/area/main-container.vue b/src/views/area/main-container.vue
index 48c0a43..aa4ea76 100644
--- a/src/views/area/main-container.vue
+++ b/src/views/area/main-container.vue
@@ -6,83 +6,83 @@
// 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="{
+
+ <div id="content" class="equipments-container area-map" v-show="hideServe"
+ @mousedown="handleMouseDown"
+ :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`,
+
+ backgroundImage: `url(${areaUrl})`,
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
+ backgroundRepeat: 'no-repeat',
+ top: `${position.top}px`,
+ left: `${position.left}px`,
}">
- <!-- <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 v-for="(item, index) in elements" :key="index" class="grid-item bridge-items" :style="{
+ width: elementWidth + 'rem',
+ height: elementHeight + 'rem',
+ top: `${item.row * elementHeight}rem`,
+ left: `${item.cell * 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
+ class="space-text"
+ :class="[
+ item?.deviceInfo?.statusInt == 2 ||
+ item?.deviceInfo?.statusInt == 3 ||
+ item?.deviceInfo?.statusInt == 4? 'space-text-red' : '',
+ item?.deviceInfo?.statusInt == 1 ? 'space-text-yellow' : '',
+ ]"
+ @dragstart="dragstart($event, index)" @dragend="dragend($event, index)"
+ @drop="handleDrop($event, index)" @dragover="handleDragOver($event)" draggable="true"
+ @click="showDeviceInfo(index,item,$event)"
+ :id="'itemtext@'+item?.deviceInfo?.areaCode+'_'+item?.deviceInfo?.networkPort+'_'+index"
+ >
+ {{ item.deviceInfo?.networkPort }}
+ <device-info v-show="selectedIndex === index " :show_info="show_device_info"
+ :device_info="cur_device_info" @toSwitchInfo="toSwitchInfo" @statusPort="statusPort"
+ @delPort="delPort"
+ ></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_device_info" :cur_item="cur_item"></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 +90,9 @@
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 A27 from '@/assets/screen/screen5/svgs3d/A27.svg'
import {
getAreaServeInfo,
@@ -99,18 +102,20 @@
getBridgeInfos,
delport,
statusPort,
+ getAreaModuleBycode,
} 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: "",
query_networkPort: '',
+ deviceId:'',
},
//根据
//后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -136,9 +141,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 +181,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,14 +189,48 @@
//新增的
areas: [],
activateSwitchPorts: {},
- switchAllDetialInfos:[],
+ switchAllDetialInfos: [],
dialog_activateSwitchPorts: false,
- first_query_ip:true,
+ first_query_ip: true,
+
+ totalElements: 1000, // 元素总数
+ areaUrl: A27, // 区域背景图
+ elements: [], // 初始化 elements 数据为空数组
+ isDragging: false,
+ dragSource: null, // 当前被拖拽的元素
+
+ show_device_info: false, // 展示设备信息
+ selectedIndex: null,
+ cur_device_info: null, // 当前的设备信息
+ cur_item:null,// 当前的element
+
+ offsetX: 0, // 鼠标点击时相对元素的 X 偏移量
+ offsetY: 0, // 鼠标点击时相对元素的 Y 偏移量
+ position: {
+ top: 100, // 元素初始位置
+ left: 100, // 元素初始位置
+ },
};
+ },
+ 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;
- console.log(this.$route, this.$router);
+ // console.log(this.$route, this.$router);
if (zoom) {
this.zoom_main = parseFloat(zoom);
}
@@ -211,23 +240,33 @@
this.screen_height = parseFloat(this.screen_height) * this.zoom;
},
async mounted() {
- console.log("main-container1,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();
+ // this.update_map();
}
getAreaTjData().then((res) => {
- // console.log('areas',res.switchAreaInfo || [])
this.areas = res.switchAreaInfo || [];
});
+ if(this.code){
+ // 获取当前页面的背景图和数量
+ await this.initArea();
+ // 根据屏幕初始化格子
+ await this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ await this.handleBindElementsItems()
+
+ // 如果传入了ip的话，则弹框展示
+ if(this.code && this.query_networkPort){
+ this.showSelectedIpDevice(this.code, this.query_networkPort)
+ }
+
+ }
+
},
destroyed() {
const content = document.getElementById("content");
@@ -235,7 +274,228 @@
this.stopScrolling();
},
methods: {
+
+ // 获取区域的背景图和数量
+ async initArea(){
+ const areaInfo = await getAreaModuleBycode(this.code)
+ if(areaInfo&&areaInfo.areaModuleItems){
+ let areaModuleItems=areaInfo.areaModuleItems
+ if(areaModuleItems.areaConfigNum){
+ this.totalElements = areaModuleItems.areaConfigNum;
+ }
+
+ this.areaUrl =areaModuleItems.areaBackGroudURL
+ }
+
+ },
+
+ initializeElements() {
+ const elements = [];
+ for (let i = 0; i < this.totalElements; i++) {
+ const cell = i % this.gridDimensions.columns;
+ const row = Math.floor(i / this.gridDimensions.columns);
+ const isPlaceholder = false
+ const name = row + "-" + cell
+ // 绑定设备信息
+ const deviceInfo = {}
+ elements.push({ row, cell, 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 cell = remainder + i;
+ const row = Math.floor(this.totalElements / this.gridDimensions.columns);
+ const isPlaceholder = false
+ const name = row + "-" + cell
+ // 绑定设备信息
+ const deviceInfo = {}
+ elements.push({ row, cell, isPlaceholder, name, deviceInfo });
+ }
+ }
+
+ // TODO 遍历elements给每个elements复制index，为当前的遍历的索引
+ // 遍历 elements 添加 index 属性
+ elements.forEach((element, index) => {
+ element.index = index;
+ });
+ this.elements = elements; // 赋值给 data 中的 elements
+ },
+
+
+ async handleBindElementsItems() {
+ let deviceInfoList = await getDeviceList(this.code);
+
+ // 获取 switchDetialInfos
+ let switchDetialInfos = deviceInfoList.switchDetialInfos;
+ console.log("所有的数量:"+this.totalElements)
+ console.log("switchDetialInfos")
+ console.log(switchDetialInfos)
+
+ // 用于存放无效的设备信息
+ let invalidSwitchDetails = [];
+
+ // 用于存放重复 key 的设备信息
+ let duplicateSwitchDetails = [];
+
+ // 用于存放 areaRow 或 areaCell 为 -1 的设备信息
+ let filteredSwitchDetails = [];
+
+ // 创建一个 Map 来存储有效的设备信息
+ let switchDetailInfosMap = new Map();
+
+ // 遍历 switchDetialInfos
+ switchDetialInfos.forEach((info) => {
+ let { areaRow, areaCell } = info;
+
+ // 检查是否为无效值：""（空字符串）、undefined、null、-1
+ if ([null, undefined, "", -1].includes(areaRow) || [null, undefined, "", -1].includes(areaCell)) {
+ invalidSwitchDetails.push(info);
+ return; // 跳过后续逻辑
+ }
+
+ // 检查是否包含 -1，记录到 filteredSwitchDetails
+ if (areaRow == -1 || areaCell == -1) {
+ filteredSwitchDetails.push(info);
+ return; // 跳过后续逻辑
+ }
+
+ // 构造唯一 key
+ let key = `${areaRow}-${areaCell}`;
+ console.log(key)
+ // 检查 key 是否已经存在
+ if (switchDetailInfosMap.has(key)) {
+ // 如果存在，将当前 info 添加到重复数组中
+ duplicateSwitchDetails.push(info);
+ } else {
+ // 如果不存在，将 info 存入 Map
+ switchDetailInfosMap.set(key, info);
+
+ }
+ });
+
+ console.log("总数量：",switchDetialInfos.length)
+ console.log("无效的设备信息:", invalidSwitchDetails);
+ console.log("包含 -1 的设备信息:", filteredSwitchDetails);
+ console.log("重复的设备信息:", duplicateSwitchDetails);
+ console.log("设备信息转换后的 Map:", switchDetailInfosMap);
+
+ // Step 1: 将 this.elements 转换为 Map，方便快速查找
+ // let elementsMap = new Map(
+ // this.elements.map((element) => [`${element.row}-${element.cell}`, element])
+ // );
+
+ // // Step 2: 遍历 switchDetailInfosMap，直接匹配 elementsMap 中的 key
+ // switchDetailInfosMap.forEach((info, key) => {
+ // // 在 elementsMap 中查找匹配的元素
+ // let element = elementsMap.get(key);
+ // if (element) {
+ // // 如果找到匹配的元素，更新其信息
+ // element.deviceInfo = info;
+ // element.isPlaceholder = true;
+ // }
+ // });
+
+
+ // 遍历 elements，将匹配的设备信息绑定到对应的元素
+ this.elements.forEach((element) => {
+ let key = `${element.row}-${element.cell}`; // 使用元素的 row 和 cell 构造 key
+ let deviceInfo = switchDetailInfosMap.get(key); // 从 Map 中查找设备信息
+ if (deviceInfo) {
+ // 如果找到设备信息，存放到 element 的 deviceInfo 属性
+ element.deviceInfo = deviceInfo;
+ element.isPlaceholder = true;
+ } else {
+ // 如果未找到，则清空或设置默认值
+ element.deviceInfo = null;
+ // element.isPlaceholder = false;
+ element.isPlaceholder = true;
+ }
+ });
+
+ // 合并无效和重复的设备信息数组，并倒序 filteredSwitchDetails
+ let allDeviceDetails = [...invalidSwitchDetails, ...duplicateSwitchDetails,...filteredSwitchDetails];
+ console.log("allDeviceDetails:", allDeviceDetails);
+
+ // 遍历 elements，并查找 deviceInfo 为空的元素
+ let emptyDeviceInfoElements = [];
+
+ // 创建 elements 的浅拷贝，并倒序遍历
+ const reversedElements = [...this.elements].reverse();
+
+ // 遍历 reversedElements，并查找 deviceInfo 为空的元素
+ reversedElements.forEach((element) => {
+ if (!element.deviceInfo) {
+ // 记录所有 deviceInfo 为空的元素
+ emptyDeviceInfoElements.push(element);
+ }
+ });
+
+ // 确保空的 deviceInfo 元素数组的长度与 allDeviceDetails 数组的长度一致
+ let totalDevices = Math.min(emptyDeviceInfoElements.length, allDeviceDetails.length);
+
+ // 动态为这些元素赋值设备信息
+ for (let i = 0; i < totalDevices; i++) {
+ const device = allDeviceDetails[i] || {}; // 防止越界
+ const element = emptyDeviceInfoElements[i];
+ device.areaRow = element.row;
+ device.areaCell = element.cell;
+ element.deviceInfo = device;
+ element.isPlaceholder = true; // 设置占位符
+
+ // 根据索引更新原数组的元素
+ const originalIndex = this.elements.findIndex((el) => el.row === element.row && el.cell === element.cell);
+ if (originalIndex !== -1) {
+ this.elements[originalIndex] = element;
+ }
+ }
+
+ },
+
+ showSelectedIpDevice(code,networkPort){
+ const originalIndex = this.elements.findIndex((el) =>el.deviceInfo?.areaCode==code && el.deviceInfo?.networkPort == networkPort);
+ // console.log(originalIndex)
+ if(originalIndex>0){
+ this.selectedIndex=originalIndex
+ this.show_device_info = true;
+ this.cur_device_info = this.elements[originalIndex].deviceInfo;
+ }
+ // if(originalIndex>0){
+ // let id='itemtext@'+code+'_'+networkPort+'_'+originalIndex
+ // // itemtext@01_T2-04-06_46
+ // var dom = document.getElementById(id)
+ // if (dom) {
+ // this.selectedIndex=originalIndex
+ // this.show_device_info = true;
+ // this.cur_device_info = this.elements[originalIndex].deviceInfo;
+ // // dom.click()
+ // }
+ // }
+
+ },
+
+ handleItemClick(item) {
+ this.isDragging = false;
+ item.deviceInfo = null;
+ this.$set(item, 'isPlaceholder', true)
+ },
+ handleItemClickCancel(item) {
+ this.isDragging = false;
+ // 这里的取消操作需要判断当前的元素是不是空的
+ if(item?.deviceInfo?.id){
+ // this.$message('空设备才可双击删除！');
+ }else{
+ this.$set(item, 'isPlaceholder', false)
+ this.$message('空设备删除成功！');
+ }
+
+ },
+
+
toSwitchInfo(info) {
+ this.isDragging = false;
this.showServe(info);
},
async statusPort(info) {
@@ -253,12 +513,15 @@
this.$modal.closeLoading();
- this.update_map();
+
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
+ // this.update_map();
},
async delPort(info) {
- //删除接口，传什么呢??
- console.log("delPort", info);
- // return
+
var json = {
id: info.id,
operateType: 4,
@@ -270,52 +533,54 @@
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_device_info() {
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
+ },
+
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){
+ 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()
}
}
+ }
}
}
}
@@ -327,197 +592,49 @@
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;
+ this.isDragging = true;
+ this.offsetX = event.clientX - this.position.left;
+ this.offsetY = event.clientY - this.position.top;
+ document.addEventListener('mousemove', this.handleMouseMove);
+ document.addEventListener('mouseup', this.handleMouseUp);
+ document.body.style.cursor = 'grabbing'; // 改变光标为抓取状态
+ },
+ // 鼠标移动事件
+ handleMouseMove(event) {
+ if (this.isDragging) {
+ this.position.left = event.clientX - this.offsetX;
+ this.position.top = event.clientY - this.offsetY;
}
},
- 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;
+ // 鼠标松开事件
+ handleMouseUp() {
+ if (this.isDragging) {
+ this.isDragging = false;
+ document.removeEventListener('mousemove', this.handleMouseMove);
+ document.removeEventListener('mouseup', this.handleMouseUp);
+ document.body.style.cursor = 'grab'; // 改变光标为抓取状态
+ }
},
+
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_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) {
@@ -527,109 +644,156 @@
this.container_offset_left = 0;
this.container_offset_top = 0;
}
+ console.log("滚轮的缩放比")
+
+ console.log(this.scale_container)
},
- dragstart(e) {
+ dragstart(e, index) {
+ this.isDragging = false;
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) {
+ this.isDragging = false;
//确定是否需要更新
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(() => {
- });
+ console.log("拖拽事件完成", index)
+ console.log("拖拽目标Id：", e.target.id)
},
- // 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) {
+ this.isDragging = false;
+ 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;
+ const sourceElement=this.elements[sourceIndex]
+ const targetElement=this.elements[targetIndex]
+ 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();
+ let json;
+ console.log()
+ if (type) {
+
+ // 交换
+ json = {
+ id: sourceDeviceInfo.id,
+ operateType: 3,
+ operateTime: new Date(),
+ networkPort: sourceDeviceInfo.networkPort,
+ changeId:targetDeviceInfo?.id,
+ changeAreaRow: targetElement.row,
+ changeAreaCell: targetElement.cell,
+ deviceInfo: {
+ areaRow: sourceElement.row,
+ areaCell:sourceElement.cell,
+ areaCode:this.code
+ },
+ };
+
+ } else {
+ // 移动
+
+ const { id, networkPort } = sourceDeviceInfo ? sourceDeviceInfo : targetDeviceInfo;
+ const { row, cell } = sourceDeviceInfo ? targetElement : sourceElement;
+
+ json = {
+ id: id,
+ operateType: 1,
+ operateTime: new Date(),
+ networkPort: networkPort,
+ deviceInfo: {
+ areaRow: row,
+ areaCell: cell,
+ areaCode:this.code
+ },
+ };
+
+ }
+
+ const data = await updateDevicePosition(json);
+ that.$modal.closeLoading();
+ if (data) {
+ this.$message.success(`${type ? "交换" : "移动"}成功`);
+ }
+
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
+
+ })
+ .catch((e) => {
+ console.log(e);
+ })
+ .finally(() => { });
+
+ }
+
+ },
+
+ handleDragOver(e) {
+ this.isDragging = false;
+ e.preventDefault();
+ },
+
+
+ // 点击增加
+ handleClickToAddItem(index,item){
+ this.cur_item=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
@@ -682,23 +846,18 @@
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"]
+ 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 +884,7 @@
this.serve_timer && clearInterval(this.serve_timer);
},
async showServe(info) {
+
if (!this.hideServe) {
this.hideServe = !this.hideServe;
return;
@@ -733,49 +893,37 @@
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) {
+ this.isDragging = false;
+ event.stopPropagation(); // 阻止事件冒泡
+ if(item.deviceInfo){
+ // 如果点击的是同一个元素，则切换显示状态
+ if (this.selectedIndex === index) {
+ this.show_device_info = !this.show_device_info;
+ } else {
+ // 切换到新元素，自动关闭之前的
+ this.selectedIndex = index;
+ this.show_device_info = true;
+ 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 +935,6 @@
left: 0;
right: 0; */
/* background-color: rgba(209, 227, 247, 1); */
-
// overflow: hidden;
margin: 0 auto;
margin-bottom: 5rem;
@@ -810,290 +957,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 +972,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 +986,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 +1066,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 +1086,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 +1129,156 @@
.port-items:nth-child(2n) {
margin-bottom: 8rem;
}
+</style>
+
+<style scoped>
+.grid-item {
+ position: absolute;
+ box-sizing: border-box;
+ /* border: 1px solid #ccc; 可选样式，便于查看布局 */
+ 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{
+ background-image: url("@/assets/area/space-text.svg");
+ background-size: 100% 100%;
+ // min-width: 3rem;
+ min-width: 85%;
+ height: 1.5rem;
+ transform: translate(-50%);
+ left: 50%;
+ padding-top: 0.5rem;
+ padding-left: 0.2rem;
+ padding-right: 0.3rem;
+ top: -1.7rem;
+ position: absolute;
+ cursor: grabbing;
+ cursor: move;
+ word-wrap: break-word;
+ // white-space: nowrap;
+ overflow-wrap: anywhere;
+ font-size: 0.45rem;
+ // font-size: 14;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 700;
+ 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