1.画板布局

陶杰

2024-11-20 7530519aecf3d1b5e663cf89cb80c3b772b5d703

1.画板布局

 package-lock.json

@@ -21,6 +21,7 @@
        "sass-loader": "^13.3.2",
        "scss": "^0.2.4",
        "vue": "^2.6.14",
        "vue-draggable-resizable-gorkys": "^2.4.8",
        "vue-router": "3",
        "vuex": "3.1.0",
        "yarn": "^1.22.22"
@@ -11732,6 +11733,25 @@
        "csstype": "^3.1.0"
      }
    },
    "node_modules/vue-draggable-resizable-gorkys": {
      "version": "2.4.8",
      "resolved": "https://registry.npmmirror.com/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.8.tgz",
      "integrity": "sha512-DjhelFtRN1cy/AVpYbxlhmTTC5KwLvU490nUZzKp05kMddhzu5TBrBEeYo/9rhmdsrSkxjQguyRvF6IYumw9yw==",
      "dependencies": {
        "core-js": "^2.6.11"
      },
      "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
      }
    },
    "node_modules/vue-draggable-resizable-gorkys/node_modules/core-js": {
      "version": "2.6.12",
      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
      "hasInstallScript": true
    },
    "node_modules/vue-eslint-parser": {
      "version": "8.3.0",
      "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -20777,6 +20797,21 @@
        "csstype": "^3.1.0"
      }
    },
    "vue-draggable-resizable-gorkys": {
      "version": "2.4.8",
      "resolved": "https://registry.npmmirror.com/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.8.tgz",
      "integrity": "sha512-DjhelFtRN1cy/AVpYbxlhmTTC5KwLvU490nUZzKp05kMddhzu5TBrBEeYo/9rhmdsrSkxjQguyRvF6IYumw9yw==",
      "requires": {
        "core-js": "^2.6.11"
      },
      "dependencies": {
        "core-js": {
          "version": "2.6.12",
          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
        }
      }
    },
    "vue-eslint-parser": {
      "version": "8.3.0",
      "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

 package.json

@@ -21,6 +21,7 @@
    "sass-loader": "^13.3.2",
    "scss": "^0.2.4",
    "vue": "^2.6.14",
    "vue-draggable-resizable-gorkys": "^2.4.8",
    "vue-router": "3",
    "vuex": "3.1.0",
    "yarn": "^1.22.22"

 src/main.js

@@ -26,6 +26,10 @@
// import self_base from './utils/self_base.js'
// Vue.use(self_base);

import vdr from 'vue-draggable-resizable-gorkys'
// 导入默认样式
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
Vue.component('vdr', vdr)

new Vue({
  render: h => h(App),

 src/views/screen1/itm-map-plant-board.vue

对比新文件
@@ -0,0 +1,716 @@
<template>
  <div style="position: relative;" class="itm-map-vr" @contextmenu="showMenu($event)"
    :style="{
        background: plantBoardFlag ? 'linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px' : ''
      }" 
  >
    <!-- v-for="(item, index) in itmmapdatas"  -->
    <!-- backgroundSize: 'cover', -->
    <vdr :grid=[20,20] :min-width="minWidth" :min-height="minHeight" :resizable="plantBoardFlag"
      :draggable="plantBoardFlag" v-for="(item, index) in items" :w="item.w" :h="item.h" :x="item.x" :y="item.y"
      @dragging="onDrag" z-index="0" @resizing="onResize" :parent="true" @dragstop="onDragStop(item)"
      @resizestop="onResizeStop(item)" @activated="onActivated(item)" @deactivated="onDeactivated(item)"
      
      :scale-ratio="0.7" 
      
      :style="{
        backgroundImage: `url(${imgSrc})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
      }" 
      
      class="itm-map-item" 
      :class="[
        item?.s ? '' : 'd',
        item?.n == 'r' ? 'error r' : '',
        item?.n == 'y' ? 'error y' : '',
        item?.areacode ? 'areacode' : '',
      ]" :key="index">
      <div style="width:100%;height:100%;" @click="toAreaDetail(item)" @contextmenu="showElementMenu($event,item)"  @mouseenter="onMouseEnter(item,$event)" @mouseleave="onMouseLeave" > 
        <div v-if="item.t" class="t" v-html="item.t" :class="[item.t_c_1, item.stand, item.t_c, item.tl]"></div>
        <div v-if="item.s" :class="[
        item.s ? 'itm-svg-' + item.s : '',
        item.n == 'r' ? 'r' : '',
        item.n == 'y' ? 'y' : '',
      ]" :style="{
        width: item.w && item.w != '0' ? item.w + 'rem' : '',
        height: item.h && item.h != '0' ? item.h + 'rem' : '',
      }"></div>
        <div v-if="false">{{ index }}</div>
        <!-- -->

      </div>
    </vdr>


    <div v-if="areaVisible" :style="{ top: `${areaPosition.y}px`, left: `${areaPosition.x}px` }" class="area-context-menu">
      <div >
        <div class="title flex">
          <div class="dot"></div>
          <div>{{ getMsg(hoveredItem.t) }}</div>
        </div>
        <div class="title flex">
          <div class="dot"></div>
          <div>所属区域:{{ hoveredItem.areacode }}区</div>
        </div>
      </div>
      <div v-if="hoveredItem.n == 'r'" >
        <div class="title flex">
          <div class="dot"></div>
          <div>{{ getMsg(hoveredItem.t) }}</div>
        </div>
        <div class="desc">预警情况：红色预警</div>
        <div class="desc">详细信息：一小时后磁盘满</div>
      </div>
      <div v-if="hoveredItem.n == 'y'" >
        <div class="title flex">
          <div class="dot"></div>
          <div>{{ getMsg(hoveredItem.t) }}</div>
        </div>
        <div class="desc">预警情况：黄色预警</div>
        <div class="desc">详细信息：一小时后磁盘满</div>
      </div>
    </div>

    <ul v-if="menuVisible" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }" class="context-menu"
      @click="menuVisible = false">
      <li @click="handlePlantBoard()" v-show="!plantBoardFlag">布局</li>
      <li @click="handlePlantBoardEnd()" v-show="plantBoardFlag">布局结束</li>
      <li @click="handleAdd()">新增</li>
    </ul>

    <!-- 子组件右键菜单 -->
    <ul v-if="isElementMenuVisible" :style="{ top: `${elementMenuPosition.y}px`, left: `${elementMenuPosition.x}px` }"
      class="context-menu">
      <li @click="handleUpdate()">编辑</li>
      <li @click="handleDel()">删除</li>
    </ul>

  </div>
</template>

<script>
import A27 from '@/assets/screen/screen5/svgs3d/A27.svg'
import { itmmapdata } from "./itm-map.js";


export default {
  props: {
    no: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {
      // itmmapdatas: itmmapdata,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      imgSrc: A27,
      vLine: [],
      hLine: [],

      items:[
      {
          x:300,
          y:300,
          w:200,
          h:200,
          t:'',
          s:'',
          n:'',
          areacode:'',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
        {
          x:0,
          y:0,
          w:200,
          h:200,
          t:'测试一区',
          s:'',
          n:'',
          areacode:'01',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
        {
          x:0,
          y:0,
          w:200,
          h:200,
          t:'测试一区',
          s:'',
          n:'',
          areacode:'01',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
        {
          x:120,
          y:120,
          w:200,
          h:200,
          t:'测试二区',
          s:'',
          n:'',
          areacode:'02',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
      ],

      isElementMenuVisible: false, // 控制菜单显示
      elementMenuPosition: { x: 0, y: 0 }, // 菜单位置

      menuVisible:false,
      menuPosition: { x: 0, y: 0 },

      minWidth:20,  // 设置元素最小的宽
      minHeight:20, // 设置元素最小的高

      plantBoardFlag:false, // 是否画布局

      hoveredItem:{},

      areaVisible:false,
      areaPosition: { x: 0, y: 0 },

    };
  },

  mounted() {
    document.addEventListener("click", this.hideMenu);
  },
  beforeUnmount() {
    document.removeEventListener("click", this.hideMenu);
  },

  methods: {
     // 判断当前悬停项
     onMouseEnter(item,event) {
      this.hoveredItem = item;
      this.areaVisible=true;
      this.areaPosition = { x: item.x+item.w/2, y: item.y+item.h/2 };
      console.log(this.hoveredItem)
    },
    // 清除悬停项
    onMouseLeave() {
      this.hoveredItem = null;
      this.areaVisible=false;
    },

    // 默认进来不可以修改
    handlePlantBoard(){
      this.plantBoardFlag=true
    },
    handlePlantBoardEnd(){
      this.plantBoardFlag=false
    },

    onResize: function (x, y, width, height) {
      console.log("onResize")
      this.x = x
      this.y = y
      this.width = width
      this.height = height
      console.log(`x:${this.x},y:${this.y},w:${this.width},h:${this.height}`)
    },
    onDrag: function (x, y) {
      console.log("onDrag")
      this.x = x
      this.y = y
      console.log(`x:${this.x},y:${this.y}`)
    },
    onDragStop: function (itemParam) {
      console.log("停止拖拽")
      console.log(`x:${this.x},y:${this.y}`)
      console.log(itemParam)
      itemParam.x = this.x
      itemParam.y = this.y

      // TODO 需要更新元素操作
    },

    onResizeStop: function (itemParam) {

      console.log("停止resize")
      console.log(`x:${this.x},y:${this.y},width:${this.width},height:${this.height}`)
      console.log(itemParam)
      // itemParam.x=this.x
      // itemParam.y=this.y
      itemParam.w = this.width
      itemParam.h = this.height

      // TODO 需要更新元素操作


    },
    onActivated: function (itemParam) {

      console.log('元素被激活')
      console.log(itemParam)
      // 元素初始化
      this.x = itemParam.x;
      this.y = itemParam.y;
      this.width = itemParam.w
      this.height = itemParam.h

    },

    onDeactivated: function (itemParam) {
      console.log('元素失活')
      console.log(itemParam)

    },


    hideMenu() {
      this.menuVisible = false;
    },
    showMenu(event) {
      event.preventDefault();
      this.menuPosition = { x: event.clientX, y: event.clientY };
      this.menuVisible = true;
      this.hideElementMenu()
    },
 

    // 显示组件右键菜单
    showElementMenu(event, item) {
      event.preventDefault(); // 禁用默认右键菜单
      event.stopPropagation(); // 阻止冒泡
      this.elementMenuPosition = { x: item.x + item.w, y: item.y };
      this.isElementMenuVisible = true;

      // 点击其他地方时隐藏菜单
      document.addEventListener("click", this.hideElementMenu);
      this.hideMenu()
    },
    // 隐藏右键菜单
    hideElementMenu() {
      this.isElementMenuVisible = false;
      document.removeEventListener("click", this.hideElementMenu);
    },

    // 更新操作
    handleUpdate() {
      // TODO
      alert(`You selected:handleUpdate`);
      this.hideElementMenu();
    },
    // 删除操作
    handleDel() {
      // TODO 
      alert(`You selected:handleDel`);
      this.hideElementMenu();
    },
    // 新增操作
    handleAdd() {
      // TODO 
      alert(`You selected:handleAdd`);
      // this.hideElementMenu();
      this.hideMenu();
    },


    evalA(string) {
      return eval(string);
    },
    getMsg(t) {
      if (t) {
        return t
          .replace("&nbsp;", " ")
          .replace("&nbsp;", " ")
          .replace("&nbsp;", " ")
          .replace("<br/>", " ")
          .replace("<br/>", " ");
      }
      return "";

    },
    toAreaDetail(itemParam) {
      if (itemParam?.areacode) {
        this.$router.push({
          path: "/area",
          query: { code: itemParam?.areacode },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$width-screen1: 174.17rem;
$width-screen1: 214.17rem;

@import "../../common/itm_svg3d.scss";

.itm-map-vr {
  position: relative;
  width: 100%;
  height: 100%;
  width: calc($width-screen1 - 11rem);
  height: 88.3rem;
  margin: 0 auto;
  /* margin-left: calc(-9.1rem * 0.9 - 11rem*0.9 - 1rem); */
  margin-left: 50%;
  transform: translate(-50%, 0%);
  zoom: 0.8;
  display: inline-block;
  cursor: pointer;
  margin-top: 10rem;
  // background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;


}

.itm-map-item {
  position: absolute;
  min-width: 20px;
  min-height: 20px;

  .itm-svg-A41 {
    background-size: 100% 100%;
  }

  .t {
    position: absolute;
    left: 50%; //起始是在body中，横向距左50%的位置
    top: 50%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
    transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式
    font-size: 1.2rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    color: rgba(1, 43, 94, 1);
    line-height: 1.4rem;
  }

  .t.w {
    color: #ffffff;
  }

  .t.l {
    /* left: unset; */
    /* right: 2rem; */
    left: 30%;
    transform: translate(-50%, 0%);
  }

  .t.t_c_1 {
    font-size: 2.33rem;
    /* font-weight: 400; */
  }

  .t.stand {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .t.t_c_2 {
    font-size: 2.33rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #8ba7c7;
  }

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

.itm-map-item.d {
  /* background-color: rgba(209, 227, 247, 1); */
}

.itm-map-item.error {
  cursor: pointer;

  .tip-msg {
    /* display: unset; */
  }
}

.itm-map-item.error.r::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  content: "";
  background-color: #e2050593;
}

.itm-map-item.error.y::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  content: "";
  background: rgba(236, 193, 93, 0.6);
}

.itm-map-item.error.r .tip-msg .title .dot {
  background: #e20505;
}

.itm-map-item.error.y .tip-msg .title .dot {
  background: rgba(236, 193, 93, 1);
}

.itm-map-item.error:hover {
  .tip-msg {
    display: unset;
  }
}

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

.itm-map-item.areacode:hover::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

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


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

<style>
.vdr {
    touch-action: none;
    border: none !important;
}
</style>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}

.context-menu {
  position: absolute;
  /* background-color: #F1F9FF; */
  /* border: 1px solid #ccc; */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
  list-style: none;
  padding: 5px 0;
  margin: 0;
  z-index: 999;
  min-width: 18rem;
  height: 15.5rem;
  background: #f1f9ff;
  box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
  border-radius: 0.6rem;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 2.5rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: #012b5e;
  line-height: 3.6rem;
  text-align: left;
  text-overflow: ellipsis;
  /* width: 10rem; */
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}

.context-menu li:hover {
  background-color: #eee;
}


</style>
<style scoped>
.area-context-menu {

  position: absolute;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  z-index: 999;
  min-width: 21rem;
  height: 9.6rem;
  background: #f1f9ff;
  box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
  border-radius: 0.6rem;
  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.4rem;
      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;
    }
    
}


</style>

 src/views/screen1/main-container.vue

@@ -1,16 +1,20 @@
<template>
  <div class="main-container" :style="{ zoom: zoom_main }" id="screencontent">
    <div class="screen1-place" v-if="false"></div>
    <div class="itm-map" @click="toArea01">

      <itm-map-plant-board @click="toArea01"></itm-map-plant-board>



    <!-- <div class="itm-map" @click="toArea01">
      <itm-map-item
          v-for="(item, index) in itmmapdatas"
          :item="item"
          :key="index"
          :no="index"
      ></itm-map-item>

      <!-- v-if="item_show" -->
    </div>
    
    </div> -->
    <div class="chart-itm">
      <itm
          v-if="areas && !chartclose1"
@@ -52,8 +56,10 @@
import itmMapItem from "./itm-map-item.vue";
import {getAreaTjData, getSwitchStatusStatic, getSwitchInfoStatic} from "@/api/area";

import itmMapPlantBoard from "./itm-map-plant-board.vue";

export default {
  components: {itmMapItem, itm, itmLeft},
  components: {itmMapItem, itm, itmLeft,itmMapPlantBoard},
  props: {
    item_show: true,
    item1_show: false,
@@ -79,9 +85,14 @@
      this.zoom_main = parseFloat(zoom);
    }
    this.getList();

    console.log("itmmapdatas")
    console.log(this.itmmapdatas)

  },

  methods: {
    
    getList() {
      getAreaTjData().then((res) => {
        // console.log('areas',res.switchAreaInfo || [])
@@ -160,7 +171,7 @@
    height: 88.3rem;
    background-image: url("../../assets/screen/screen1/screen-place.png");
  }

  
  .itm-map {
    position: relative;
    width: 100%;

 yarn.lock

@@ -2551,6 +2551,11 @@
  "resolved" "http://218.4.170.235:54873/core-js/-/core-js-2.6.12.tgz"
  "version" "2.6.12"

"core-js@^2.6.11":
  "integrity" "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
  "resolved" "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz"
  "version" "2.6.12"

"core-js@^3.8.3":
  "integrity" "sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw=="
  "resolved" "https://registry.npmmirror.com/core-js/-/core-js-3.33.0.tgz"
@@ -6131,6 +6136,13 @@
  "resolved" "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz"
  "version" "1.1.2"

"vue-draggable-resizable-gorkys@^2.4.8":
  "integrity" "sha512-DjhelFtRN1cy/AVpYbxlhmTTC5KwLvU490nUZzKp05kMddhzu5TBrBEeYo/9rhmdsrSkxjQguyRvF6IYumw9yw=="
  "resolved" "https://registry.npmmirror.com/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.8.tgz"
  "version" "2.4.8"
  dependencies:
    "core-js" "^2.6.11"

"vue-eslint-parser@^8.0.1":
  "integrity" "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g=="
  "resolved" "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz"