拖拽插件更新

whyczyk

2021-03-05 f8c5383c722474cce18881504d7ffc7ea571cfe5

拖拽插件更新

 package-lock.json

@@ -11277,10 +11277,20 @@
      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz",
      "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
    },
    "vue-draggable-resizable": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz",
      "integrity": "sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA=="
    "vue-draggable-resizable-gorkys": {
      "version": "2.4.4",
      "resolved": "https://registry.npmjs.org/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.4.tgz",
      "integrity": "sha512-IGwk1W4mXN/adP+crmZyCnTm4j/UUVcDWcbkoxSNSYlGjdArhyLYayrC1vby+pGU8cgDg2FeiO+a5rMuYO3B+w==",
      "requires": {
        "core-js": "^2.6.11"
      },
      "dependencies": {
        "core-js": {
          "version": "2.6.12",
          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
        }
      }
    },
    "vue-eslint-parser": {
      "version": "7.6.0",

 package.json

@@ -10,11 +10,11 @@
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "element-ui": "^2.13.2",
    "echarts": "^5.0.2",
    "element-ui": "^2.13.2",
    "postcss-px2rem": "^0.3.0",
    "vue-draggable-resizable": "^2.2.0",
    "vue": "^2.6.11",
    "vue-draggable-resizable-gorkys": "^2.4.4",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

 src/App.vue

@@ -6,7 +6,12 @@

<style>
  #app {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
  }

  #app:before {
    display: table;
    content: " ";
  }
</style>

 src/assets/css/basic.css

@@ -123,31 +123,8 @@

html,
body {
    background-color: #171350;
    color: #ffffff;
}

body {
    margin: 0;
    color: #fff;
}

/* my page */
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #031D67;
}

.page-content {
    flex: 1;
    overflow-y: auto;
}

.page-header {
    top: 0;
    z-index: 1;
    color: #FFFFFF;
}

/* page animate */
@@ -183,10 +160,15 @@
    height: 100%;
}

/* vue-draggable-resizable css */
.active.draggable.resizable.vdr {
    border: none;
}

.active.draggable.resizable.vdr .handle {
    border-radius: 50%;
}

.draggable.resizable.vdr {
    border: none;
}

 src/components/charts/latticeBar.vue

@@ -32,7 +32,6 @@
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        console.log(sendData)
        this.$options.chartData = sendData;
        let option = {
          tooltip: {
@@ -52,8 +51,11 @@
          },
          legend: {
            top: '2%',
            itemWidth: chartFontsize(18),
            itemHeight: chartFontsize(12),
            textStyle: {
              color: '#ffffff',
              fontSize: chartFontsize(12),
            },
            data: ['访问量', '订单量']
          },
@@ -163,7 +165,6 @@
            data: maxArr
          });
        }
        console.log(this)
        // 设置配置项
        this.setOption(option);
      },

 src/main.js

@@ -8,10 +8,6 @@
import './assets/css/basic.css'
import '../public/theme/normal.css'

import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component('vue-draggable-resizable', VueDraggableResizable);

import '@/assets/js/rem.js'



 src/pages/index.vue

@@ -1,9 +1,17 @@
<template>
  <div class="pageWarp">
    <vue-draggable-resizable :w="340" :h="210" @dragging="onDrag" @resizing="onResize" :parent="true"
      style="transition: none; will-change: transform;">
    <vue-draggable-resizable :w="340" :h="210" :x="0" :y="0" @dragging="onDrag" @resizing="onResize"
      @refLineParams="getRefLineParams" :parent="true" :debug="false" :is-conflict-check="true" :snap="true"
      :snapTolerance="5" style="transition: none; will-change: transform;">
      <layout-box title="放电和充电电流">
        <lattice-bar id="latticeBar" ref="latticeBar"></lattice-bar>
      </layout-box>
    </vue-draggable-resizable>
    <vue-draggable-resizable :w="340" :h="210" :x="360" :y="0" @dragging="onDrag" @resizing="onResize"
      @refLineParams="getRefLineParams" :parent="true" :debug="false" :is-conflict-check="true" :snap="true"
      :snapTolerance="5" style="transition: none; will-change: transform;">
      <layout-box title="整流器">
        <img-pie-chart id="ImgPieChart" ref="ImgPieChart"></img-pie-chart>
      </layout-box>
    </vue-draggable-resizable>

@@ -42,14 +50,19 @@
        </div>
      </layout-box>
    </div> -->
    <span class="ref-line v-line" v-for="(item,index) in vLine" :key="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="index" v-show="item.display"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"></span>
  </div>
</template>

<script>
  import VueDraggableResizable from 'vue-draggable-resizable'
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  import latticeBar from '../components/charts/latticeBar.vue'
  // import ImgPieChart from '../components/charts/imgPieChart.vue';
  import ImgPieChart from '../components/charts/imgPieChart.vue';
  // import TriangleBarChart from '../components/charts/triangleBarChart.vue';
  // import AbeamProChart from '../components/charts/abeamProChart.vue';
  // import ProssPieChart from '../components/charts/prossPieChart.vue';
@@ -59,7 +72,7 @@
      VueDraggableResizable,
      LayoutBox,
      latticeBar,
      // ImgPieChart,
      ImgPieChart,
      // TriangleBarChart,
      // AbeamProChart,
      // ProssPieChart,
@@ -69,7 +82,9 @@
        width: 0,
        height: 0,
        x: 0,
        y: 0
        y: 0,
        vLine: [],
        hLine: []
      }
    },
    mounted() {
@@ -87,23 +102,24 @@
      });
      this.$refs.latticeBar.resize();

      // this.$refs.ImgPieChart.setData([{
      //     value: 30,
      //     name: '整流器交流异常'
      //   },
      //   {
      //     value: 22,
      //     name: '整流器过流'
      //   },
      //   {
      //     value: 120,
      //     name: '总故障'
      //   },
      //   {
      //     value: 50,
      //     name: '整流器欠压'
      //   },
      // ]);
      this.$refs.ImgPieChart.setData([{
          value: 30,
          name: '整流器交流异常'
        },
        {
          value: 22,
          name: '整流器过流'
        },
        {
          value: 120,
          name: '总故障'
        },
        {
          value: 50,
          name: '整流器欠压'
        },
      ]);
      this.$refs.ImgPieChart.resize();
      // this.$refs.TriangleBarChart.setData({
      //   xData: ['熔断', '电压低', '下电', '充电过流'],
      //   data: [35, 72, 55, 45]
@@ -138,15 +154,27 @@
    },
    methods: {
      onResize: function (x, y, width, height) {
        console.log(width)
        console.log(height)
        this.$refs.latticeBar.resize();
        this.$refs.ImgPieChart.resize();
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.height = height;
      },
      onDrag: function (x, y) {
        this.x = x
        this.y = y
      },
      // 辅助线回调事件
      getRefLineParams(params) {
        const {
          vLine,
          hLine
        } = params
        this.vLine = vLine
        this.hLine = hLine
      }
    }
  }
@@ -155,7 +183,9 @@
<style scoped>
  .pageWarp {
    width: 100%;
    height: 100%;
    height: 100vh;
    background-color: #031D67;
    background-image: url("../assets/images/bg-box.png");
  }

  .chartCon {