Merge branch 'master' of http://47.96.225.205:8888/r/ITM_V2_2DModel

cloudroam

2024-11-29 2e20334b05e3cb49434ec07aa8d77b30578466ab

 src/views/area/main-container.vue

@@ -6,193 +6,94 @@
    // 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>
    <!-- 点击设备可以前往服务器详情页看看（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>
      @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="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 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,
  getFaultInfo,
@@ -201,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},
  components: { tjContainer, bridge, equAddForm, Bridge, serverInfo, deviceInfo },
  props: {
    item_show: false,
    code: "",
    query_networkPort: '',
    deviceId:'',
  },
  //根据
  //后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -238,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
@@ -278,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,
@@ -296,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);
    }
@@ -313,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");
@@ -337,7 +274,227 @@
    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;
        }
      });

      // 合并无效和重复的设备信息数组，并倒序 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) {
@@ -355,12 +512,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,
@@ -372,52 +532,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()
                }
              }
            }
          }
        }
      }
@@ -429,197 +591,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) {
@@ -629,109 +643,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
@@ -784,23 +845,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)

      }
    },

@@ -827,6 +883,7 @@
      this.serve_timer && clearInterval(this.serve_timer);
    },
    async showServe(info) {
      
      if (!this.hideServe) {
        this.hideServe = !this.hideServe;
        return;
@@ -835,49 +892,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;

@@ -889,7 +934,6 @@
  left: 0;
  right: 0; */
  /* background-color: rgba(209, 227, 247, 1); */

  // overflow: hidden;
  margin: 0 auto;
  margin-bottom: 5rem;
@@ -912,290 +956,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;
@@ -1205,7 +971,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%);
@@ -1219,43 +985,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;
}
@@ -1299,7 +1065,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;

@@ -1319,10 +1085,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;
@@ -1362,4 +1128,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>