保存布局界面功能提交

whyczyk

2021-03-13 f53cb8d06563ab9cb6e1be72b113df1a14ba4846

 src/components/settingModular.vue

@@ -1,6 +1,5 @@
<template>
  <div class="pageWarp" ref="pageWarp">
    <div ref="demo"></div>
    <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" @dragging="onDrag" @dragstop="onDragstop"
      @resizing="onResize" @resizestop="onResizstop" :parent="true" :debug="false" :snap="true" :snapTolerance="5"
      :draggable="draggable" :resizable="resizable" style="transition: none; will-change: transform;"
@@ -12,22 +11,7 @@
      </div>
    </vue-draggable-resizable>

    <!--<div class="chartCon">
      <layout-box title="电源状态">
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
        </div>
      </layout-box>
    </div> -->

    <!-- <span class="ref-line v-line" v-for="(item,index) in vLine" :key="'vLine'+index" v-show="item.display"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"></span>
    <span class="ref-line h-line" v-for="(item,index) in hLine" :key="'hLine'+index" v-show="item.display"
@@ -44,14 +28,12 @@
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  // import prossPieChart from '../components/charts/prossPieChart.vue';
  let clientWidth, clientHeight;
  export default {
    props: ['layOut', 'draggable', 'resizable'],
    components: {
      VueDraggableResizable,
      LayoutBox,
      // prossPieChart,
    },
    data() {
      return {
@@ -92,11 +74,6 @@
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
      })
      // this.$refs.prossPieChart1.setData({
      //   title: '交流停电数量',
      //   data: 56,
      //   color: '#37a9b3'
      // });
    },
    methods: {
      // 选中要调整的面板时
@@ -111,11 +88,6 @@
            card.h = height;
            card.x = x;
            card.y = y;
            this.modularArr.map(item => {
              if (item.id == `chart${this.draggableActived.id}`) {
                item.resize();
              }
            })
          }
          return true;
        });
@@ -212,7 +184,6 @@
      loadLayout() {
        this.$nextTick(() => {
          this.nowlayOut.children.map((item) => {
            console.log(item)
            item.x *= clientWidth;
            item.y *= clientHeight;
            item.w *= clientWidth;
@@ -241,34 +212,6 @@
  .pageWarp {
    width: 100%;
    height: calc(100% - 52px);
  }

  .chartCon {
    width: 33.33%;
    height: 50%;
    padding: 10px;
    float: left;
    box-sizing: border-box;
  }

  .flexCon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flexCon .con {
    width: 100%;
    height: 60%;
  }

  .chartCon .chartItem {
    width: 50%;
    height: 48%;
    float: left;
    margin-bottom: 2%;
  }

  .contextmenu {
@@ -305,18 +248,5 @@
    background-color: #1d262e;
    color: #2681ff;
    border-left: 2px solid #2681ff;
  }

  .flexCon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flexCon .con {
    width: 100%;
    height: 60%;
  }
</style>