交换机机柜

陶杰

2024-11-08 9ef6ec82110ea5756f8844a8892632f4d0bf720f

交换机机柜

 src/api/area.js

@@ -149,4 +149,14 @@
      'areaCode': code
    }
  })
}

export function getSwitchCabinetInfo() {
  return request({
    url: '/api/services/app/SwitchDevice/GetSwitchCabinetInfo',
    method: 'get',
    params: {
      
    }
  })
}

 src/assets/area-global3.jpg

 src/router/index.js

@@ -24,6 +24,11 @@
    name: 'home',
    component: resolve => require(['@/views/main'], resolve),
  },
  {
    path: '/switch-board',
    name: 'switch-board',
    component: resolve => require(['@/views/area/switch-board'], resolve),
  },
  ]
})


 src/views/area/switch-board.vue

对比新文件
@@ -0,0 +1,849 @@
<template>
  <div>
    <dv-full-screen-container>
      <self-header title="ITM Device Monitoring System"></self-header>
      <div class="main-container" :style="{
        zoom: zoom_main,
        width: screen_width + 'rem',
        height: screen_height + 'rem',
        // width:'100%',
        // height:'calc(100vh - 10rem)'
      }">
        <!-- @mousemove="handleMouseMove"
          @mouseup="handleMouseUp"
          @mousedown="handleMouseDown"
          @mouseleave="handleMouseLeave" -->
        <div id="content" class="equipments-container area-map" :class="['area-map-' + code]" v-show="hideServe"
            @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mousedown="handleMouseDown"
            @mouseleave="handleMouseLeave"
            :style="{
            transform: `scale(${scale_container})`,
            width: screen_width + 'rem',
            height: screen_height + 'rem',
            // container_offset_x:''
            // container_offset_x:''

            'margin-left': `${container_offset_left}rem`,
            'margin-top': `${container_offset_top}rem`,
          }">
          
          
          <div  class="serve-item" @click="showCabinetName">
              <div class="serve-img" 
                v-for="(serverInfo, serverItemindex) in switchCabinets.switchCabinet" :key="serverItemindex"
              >
                <div class="cabinetNameDesc">{{ serverInfo.cabinetName }} </div>
                <div class="each-item-container">
                  <div v-for="(serve, itemindex) in serverInfo.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex"
                      class="each-item" 
                     
                    >
                    <div class="desc">
                      <div class="title">{{ serve.cabinetName }}</div>
                      <div class="value">设备数量: {{ serve.normal }}</div>
                      <div class="tip-msg">
                        <div class="title">{{ serve.cabinetName }}</div>
                        <div class="desc">正常设备：<span class="f-n">{{ serve.normal || 0 }}</span></div>
                        <div class="desc">黄色预警：<span class="f-y">{{ serve.waring || 0 }}</span></div>
                        <div class="desc">红色预警：<span class="f-r">{{ serve.exception || 0 }}</span></div>

                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

        </div>
        
        <!-- 显示图标的开关 -->
        <div v-if="true && code && chartclose" class="chart-open" @click="chartclose = false">
          <div class="img-button"></div>
        </div>
        
        <div class="back-button-left-bottom" @click="backToTop">返回</div>
        
      </div>
    </dv-full-screen-container>
  </div>
</template>
<script>
import selfHeader from "@/components/header";

import {
  getSwitchCabinetInfo,
} from "@/api/area";

import {mapdata} from "./map-data.js";


export default {
  components: { selfHeader, },
  props: {
    item_show: false,
    code: "",
    query_networkPort: '',
  },
  //根据
  //后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
  //渲染时候，需要把 坐标，变为实际rem等像素坐标
  //每个厂房大小不一样，先用一定的数代表吧.

  data() {
    return {
   
      //如果显示服务器的话
      hideServe: true,

      html_base: 10,
      zoom_main: 0.8,
      width: "160",
      height: "60",
      //默认的视点
      x: 0,
      y: 0,
      zoom: 1, //默认的缩放级别,应该保证可以容纳整个项目
      scale_container: 0.9,
   

      //实际的像素比，单位rem
      //屏幕和实际像素，默认比应该是,1:1？，反正有个比例吧,类似1米（其他单位）=多少px
      //这个可以定死
      screen_width: "160",
      screen_height: "80",
      base_move_offset: 0.6,
      screen_margin_left: 0,
      screen_margin_top: 0, //放大后的实际坐标-原本坐标，就是实际可以做的偏移量了，不能小于0，不能大于比例的，
      // 当scale变化时候，的时候，恢复一下？或者scale放大的时候会有个，变化

      //至于网桥，实际无非也是一组设备，到时候按照渲染出来就好了，先考虑canvas的拖拽？
      mouse_click: undefined,
      mouse_offset_last: undefined,
      tleft: 20,
      cal_offset_x: 0,
      cal_offset_y: 0,
      startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
      startclientY: 0, //元素拖拽前距离浏览器的Y轴位置
      
      container_offset_x: 0,
      container_offset_y: 0,
      container_offset_left: 0,
      container_offset_top: 0,
      //服务器的
      serve_timer: null,
      serve_scroll_num: 0,
    
      //图标的
      chartclose: false,
      current_show_id: "",
      //新增的
      switchCabinets:{
        cabinetCount:0,
        cabinetNames:[],
        switchCabinet:[],
      },
    };
  },
  created() {
    var zoom = this.$route.query.zoom;
    console.log(this.$route, this.$router);
    if (zoom) {
      this.zoom_main = parseFloat(zoom);
    }
    this.x = parseFloat(this.width) / 2;
    this.y = parseFloat(this.height) / 2;
    this.screen_width = parseFloat(this.screen_width) * this.zoom;
    this.screen_height = parseFloat(this.screen_height) * this.zoom;
  },
  async mounted() {

    this.init_data()
    this.chartclose = true;

    console.log("main-container1,mounted");
    const content = document.getElementById("content");
    content.addEventListener("wheel", this.handleWheel);
    
    
  },
  destroyed() {
    const content = document.getElementById("content");
    content.removeEventListener("wheel", this.handleWheel);
    this.stopScrolling();
  },
  methods: {
    showCabinetName(){
      alert(111)
    },
    toSwitchInfo(info) {
      this.showServe(info);
    },
    backToTop() {
      if (!this.hideServe) {
        this.hideServe = !this.hideServe;
        return;
      }
      this.$router.push({path: "/area-all"});
    },

    click_item(id) {
      this.current_show_id = id;
    },
    click_item_add(locInfo) {
      console.log("this.$refs.equAddForm", this.$refs.equAddForm);
      this.$refs.equAddForm && this.$refs.equAddForm.openform(locInfo);
    },

    closeself() {
      console.log("closeself parent");
      this.chartclose = true;
    },
    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;
          }

          if (event.target.id == "content") {
            //让看板内部有偏移量
            if (offsetx != 0) {
              if (offsetx > 0) {
                this.container_offset_left +=
                    this.base_move_offset * this.scale_container;
              } else {
                this.container_offset_left -=
                    this.base_move_offset * this.scale_container;
              }
            }
            if (offsety != 0) {
              if (offsety > 0) {
                console.log("plus container_offset_top");
                this.container_offset_top +=
                    this.base_move_offset * this.scale_container;
              } else {
                console.log("mul container_offset_top");

                this.container_offset_top -=
                    this.base_move_offset * this.scale_container;
              }
            }
            // if (this.container_offset_x < -90 / this.scale_container) {
            //   this.container_offset_x = -90 / this.scale_container;
            // } else if (this.container_offset_x > 90 / this.scale_container) {
            //   this.container_offset_x = 90 / this.scale_container;
            // }
            // if (this.container_offset_y <  -90 / this.scale_container) {
            //   this.container_offset_y =  -90 / this.scale_container;
            // } else if (this.container_offset_y > 90 / this.scale_container) {
            //   this.container_offset_y = 90 / this.scale_container;
            // }
          }
        }
        this.mouse_offset_last = event;
      }
    },
    handleMouseUp(event) {
      // console.log("handleMouseUp", event);
      if (this.mouse_click) {
        if (this.mouse_click.className == "equipment-item") {
          //说明是转移视角的
          //可能就是设备的
          //直接修改坐标就行了
          //计算鼠标偏移量，然后转换为屏幕坐标，再转换为显示单位坐标，同时弹出提示？是否要更改吧，更改就调用接口
          if (
              this.mouse_offset_last &&
              (this.cal_offset_x || this.cal_offset_y)
          ) {
            console.log("update?", this.tleft);
            alert("是否要修改设备坐标");
          }
        } else {
        }
      }

      this.mouse_click = undefined;
      this.mouse_offset_last = undefined;
    },

    handleMouseDown(event) {
      // console.log("handleMouseDown", event, event.target.className);
      if (event.target.className.indexOf("equipment-item") >= 0) {
        // console.log("handleMouseDown2", event, event.target.id);
        // this.mouse_click = event.target;
      } else if (event.target.id == "content") {
        this.mouse_click = event.target;
      }
    },
    handleMouseLeave(event) {
      this.mouse_click = undefined;
      this.mouse_offset_last = undefined;
    },

    handleWheel(event) {
      event.preventDefault();
      const delta = event.deltaY < 0 ? 0.2 : -0.2;
      this.container_offset_left =
          this.container_offset_left /
          (this.scale_container / (delta + this.scale_container));
      this.container_offset_top =
          this.container_offset_top /
          (this.scale_container / (delta + this.scale_container));

      this.scale_container += delta;
      if (this.scale_container < 0.2) {
        this.scale_container = 0.2;
      }
      if (this.scale_container <= 1) {
        this.container_offset_left = 0;
        this.container_offset_top = 0;
      }
    },
    
    async init_data() {
      this.$modal.loading();
      this.switchCabinets= await getSwitchCabinetInfo();
      console.log("机柜信息")
      console.log(this.switchCabinets)
      this.$modal.closeLoading();
      
    },

    startScrolling() {
      this.stopScrolling();
      const myDiv = document.getElementById("my_serve_info_list");
      this.serve_timer = setInterval(() => {
        if (myDiv) {
          myDiv.scrollTo(0, this.serve_scroll_num);
          this.serve_scroll_num++;
          if (myDiv.scrollTop >= myDiv.scrollHeight - myDiv.clientHeight) {
            this.serve_timer && clearInterval(this.serve_timer);
            this.serve_timer = null;
            setTimeout(() => {
              this.serve_scroll_num = 0;
              this.startScrolling();
            }, 1500);
          }
        }
      }, 20);
    },
    stopScrolling() {
      this.serve_scroll_num = 0;
      this.serve_timer && clearInterval(this.serve_timer);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../common/itm_svg.scss";
@import "../../common/area-bg.scss";

$width-screen1: 174.17rem;

.main-container {
  /* position: fixed;
  right: calc(5rem);
  top: calc($height-header - 8rem);
  left: calc((100% - $width-screen1 - 10rem - 18rem) / 2);
  left: 0;
  right: 0; */
  /* background-color: rgba(209, 227, 247, 1); */

  // overflow: hidden;
  margin: 0 auto;
  margin-bottom: 5rem;

  .equipments-container {
    background: #d3e3f3;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
    max-width: 100%;
    min-height: 100vh;
    overflow: auto;

    .equipment-item {
      cursor: pointer;
      position: absolute;
      width: 5rem;
      height: 5rem;
      background-size: 100% 100%;
      filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    }
  }

  .serve-item {
    margin: 0 auto;
    display: flex;
    // width: fit-content;

    flex-wrap:wrap;
    justify-content: flex-start;
    
    cursor: pointer;

    .serve-img {
      margin: 2rem;
      background-image: url("../../assets/equipment/serve.svg");
      background-image: url("../../assets/equipment/serve_v2.png");
      background-size: 100% 100%;
      width: 15rem;
      // height: 35.3rem;

      .cabinetNameDesc{
        margin-top: 1rem;
        font-weight: 800;
        // margin-bottom: 0.8rem;
      }

      /* padding-left: 1rem; */
      .each-item-container {
        margin-top: 10rem;
        margin-left: 1rem;

        .each-item {
          background-image: url("../../assets/equipment/serve_item.png");
          width: 10.3rem;
          height: 3.7rem;
          background-size: 100% 100%;
          margin-bottom: 0.9rem;
          color: #265696;
          position: relative;

          .desc {
            text-align: left;
            padding-left: 1rem;
            padding-top: 0.5rem;

            .title {
              font-weight: 600;
              margin-bottom: 0.8rem;
              /* */
            }

            .value {
            }
          }
        }

        .each-item:hover::before {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;

          content: "";
          background-color: #059ce293;
        }

        .each-item-default::before {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;

          content: "";
          background-color: #4bb6e854;
        }

        .tip-msg {
          display: none;
          position: absolute;
          left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
          top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
          min-width: 21rem;
          height: 13.6rem;
          background: #f1f9ff;
          box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
          border-radius: 0.6rem;
          z-index: 2;
          padding: 1.3rem;

          .title {
            font-size: 2.5rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #012b5e;
            line-height: 3.6rem;
            text-align: left;
            margin-bottom: 1rem;
            text-overflow: ellipsis;
            /* width: 10rem; */
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;

            .dot {
              width: 1.6rem;
              height: 1.6rem;
              min-width: 1.6rem;
              min-height: 1.6rem;
              /* background: #e20505; */
              border-radius: 50%;
              margin-top: 1rem;
              margin-right: 0.5rem;
            }
          }

          .desc {
            font-size: 1.8rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 2rem;
            text-align: left;
            /* margin-left: 2.1rem; */
            margin-top: 0.5rem;

            .f-n {
              color: #0dbe79;
              font-weight: 600;
            }

            .f-r {
              color: #e10808;
              font-weight: 600;
            }

            .f-y {
              color: #ffc310;
              font-weight: 600;
            }
          }
        }

        .each-item:hover .tip-msg {
          display: unset;
        }
      }
    }

    .tj-item {
      margin-left: 2rem;
      width: 33.5rem;
      min-height: 47.5rem;
      min-height: 17.5rem;
      height: fit-content;
      background: #f2f8fd;
      box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.38),
      inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
      border-radius: 1rem;

      .tj-nums {
        padding: 1.8rem;

        .title {
          font-size: 2.5rem;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #265696;
          line-height: 3.6rem;
          text-align: left;
          margin-bottom: 1.8rem;
        }

        .equ-num-item {
          margin: 0 auto;
          text-align: center;

          .desc2 {
            font-size: 1.6rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #235884;
            line-height: 2.2rem;
          }

          .num {
            font-size: 2.4rem;
            font-family: Impact;
            line-height: 2.9rem;
          }

          .num.g {
            color: #0dbe79;
          }

          .num.y {
            color: #ffc310;
          }

          .num.r {
            color: #e10808;
          }
        }

        .equ-num-item.a {
          margin-left: 0;
          margin-right: auto;
        }

        .equ-num-item.c {
          margin-right: 0;
          margin-left: auto;
        }
      }

      .tj-list {
        padding: 2.2rem;
        padding-top: 1.4rem;

        .service-list-arr {
          background-color: #f2f8fd;
          overflow: hidden;
          height: 30.3rem;

          .service-list-arr-item {
            width: 100%;
            min-height: 3rem;
            /* margin-top: 2.2rem; */
            display: flex;
            flex-direction: row;
            align-items: center;
            height: fit-content;

            .time {
              font-size: 1.2rem;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #a1b6c8;
              line-height: 1.7rem;
              margin-right: 1rem;
            }

            .service-list-arr-item_content {
              font-family: PingFangSC-Medium, PingFang SC;
              color: #235884;
              line-height: 1.17rem;
              text-align: left;
              margin-left: 0.4rem;
              margin-right: 1.5rem;
              padding-top: 1rem;

              font-size: 1.4rem;
              font-weight: 500;
              line-height: 1.4rem;
            }

            .dot {
              width: 0.58rem;
              height: 0.58rem;
              border-radius: 50%;
              margin-top: 0.8rem;
              margin-left: auto;
              margin-right: 10px;
            }

            .dot.red {
              background: #c10b0b;
            }

            .dot.yellow {
              background: #fda928;
            }

            .dot.green {
              background: #17a537;
            }
          }
        }
      }

      .tj-line {
        width: 30.1rem;
        height: 0.1rem;
        border: 0.1rem solid #ccdeec;
        margin: 0 auto;
      }
    }
  }

  .chart-open {
    width: 6.1rem;
    height: 7.5rem;
    background: #e9f4fd;
    box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.83),
    inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    position: fixed;
    right: 3rem;
    top: 50%;
    transform: translate(0%, 50%);
    cursor: pointer;

    .img-button {
      background-size: 100% 100%;
      background-image: url("../../assets/area/chart-open.svg");
      width: 2.6rem;
      height: 2.6rem;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      position: absolute;
    }
  }
}
</style>
<style scoped lang="scss">
//7个设备
.equ-0 {
  background-image: url("../../assets/equipment/arm.svg");
  width: 9.6rem;
  height: 9.6rem;
}

.equ-1 {
  background-image: url("../../assets/equipment/pda.svg");
  width: 4.1rem;
  height: 6.1rem;
}

.equ-2 {
  background-image: url("../../assets/equipment/pc.svg");
  width: 15rem;
  height: 12.6rem;
}

.equ-3 {
  background-image: url("../../assets/equipment/print.svg");
  width: 8.2rem;
  height: 8.1rem;
}

.equ-4 {
  background-image: url("../../assets/equipment/screen.svg");
  width: 15.9rem;
  height: 13.1rem;
}

.equ-5 {
  background-image: url("../../assets/equipment/setting.svg");
  width: 7.8rem;
  height: 7.5rem;
}

.equ-6 {
  background-image: url("../../assets/equipment/video.svg");
  width: 12.7rem;
  height: 9.4rem;
}
</style>
<style scoped lang="scss">
.back-button-left-bottom {
  width: 10.6rem;
  height: 3.9rem;
  background: #6eb3ff;
  border-radius: 0.4rem;
  border: 0.2rem solid #278afa;
  font-size: 1.6rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 3.9rem;
  position: fixed;
  left: 3rem;
  // bottom: 3.5rem;
  cursor: pointer;
  z-index: 99;
}
</style>

<!-- 交换机的端口 -->
<style scoped lang="scss">
.port-items {
  display: flex;
  margin-bottom: 8rem;
  /* height: 2rem; */
  width: fit-content;

  .port-item {
    background: #e9f4fd;
    border-top: 5px solid #e9f4fd;
    flex: 1;
    margin: 0 auto;
    min-width: 6rem;
    max-width: 6rem;
    /* max-width: 6rem; */
    height: 1.6rem;
    //        background: #fff;
    //  box-shadow: 0rem -2rem 2.1rem 0rem #fff;
    background-image: url("../../assets/area/space.svg");
    background-size: 100% 100%;
    position: relative;

    .port-tip {
      position: absolute;
      bottom: -2.5rem;
      height: 2.5rem;
      font-size: 1.8rem;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #265696;
      line-height: 2.5rem;
      text-align: center;
      /* margin-bottom: 0.5rem; */
      left: 0;
      right: 0;
    }

    .space-text {
      background-image: url("../../assets/area/space-text.svg");
      background-size: 100% 100%;
      min-width: 6rem;
      min-height: 2.5rem;
      transform: translate(-50%, 0%);
      left: 50%;
      padding-top: 0.5rem;
      top: -2.5rem;
      position: absolute;
      /* line-height: 100%; */
      /* font-size: 12px; */
      /* span { */
      word-break: break-all;
      word-wrap: break-word;
      /*但在有些场景中，还需要加上下面这行代码*/
      white-space: normal;
      overflow-wrap: anywhere;
      /* } */

      font-size: 1rem;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #3299ff;
      z-index: 20;
    }

    .space-text-yellow {
      color: #e8be19;
    }

    .space-text-red {
      color: #e20909;
    }
  }

  .port-item:nth-child(6n) {
    margin-right: 3rem;
  }
}

.port-items:nth-child(2n) {
  margin-bottom: 8rem;
}
</style>

 src/views/global/index.vue

@@ -21,7 +21,7 @@

<style lang="scss" scoped>
.area-global {
  background-image: url("../../assets/area-global2.jpg");
  background-image: url("../../assets/area-global3.jpg");
  background-size: 100% 100%;
  width: 140rem;
  /* max-width: 100vh; */

 src/views/screen1/itm.vue

@@ -83,18 +83,25 @@
          </div>
        </div>
      </div>
      <div class="itm-container container-alert" style="cursor: pointer;margin-top: 3rem" @click="showSwitchInfoTable=true">
      <div class="itm-container container-alert" style="cursor: pointer;margin-top: 3rem" @click="showSwitchBoardInfoTable=true">
        <div class="flex1">
          <div class="reg-num flex">
            <span class="div1">{{ switchInfo.switchInfo && switchInfo.switchInfo.length || 0 }}</span>
            <span class="div2">个</span>
          </div>
          <div class="reg-desc">
            新增交换机
            交换机清单
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="showSwitchInfoTable" title="新增交换机" append-to-body>
      <div class="itm-container container-alert" style="cursor: pointer;margin-top: 3rem" @click="showSwitchBoard">
        <div class="flex1">
          <div class="reg-desc">
            交换机机柜
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="showSwitchBoardInfoTable" title="交换机清单" append-to-body>
        <el-table
            :data="switchInfo.lackSwitchInfo||[]"
            border
@@ -167,13 +174,17 @@
  },
  data() {
    return {
      showSwitchInfoTable: false,
      showSwitchBoardInfoTable: false,
    }
  },
  methods: {
    closeself() {
      this.$emit("show", false);
    },
    showSwitchBoard(){
      this.$router.push({path: "/switch-board"});
      // this.$router.push({path: "/area", query: {code: '01'}});
    }
  },
};
</script>
@@ -227,7 +238,7 @@
    border-radius: 0.83rem;
    padding: 2.5rem;
    margin-top: 2rem;
    height: 53.5rem;
    height: 58.5rem;
    padding-top: 1rem;
  }