组件模块抽离动态挂载组件

whyczyk

2021-03-13 830ac8afd922bc35397ffb0bdbe8d2537108e762

组件模块抽离动态挂载组件

 .env.dev

New file
@@ -0,0 +1 @@
NODE_ENV=dev

 src/assets/js/axios.js

@@ -10,7 +10,7 @@
axios.defaults.headers = {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json'
    }
}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
@@ -38,4 +38,4 @@

Vue.prototype.$axios = axios;

export default axios;
export default axios;

 src/assets/js/charts/persons/zengyvkai.js

@@ -1,13 +1,10 @@
let modularTitle = [
    {
        title: '蓝色头部-2',
        selected: false,
        name: 'bigscreenTitle2',
        img: require("@/assets/images/bigscreenTitle2.png"),
    }
];
let modularBg = [
    {
let modularTitle = [{
    title: '蓝色头部-2',
    selected: false,
    name: 'bigscreenTitle2',
    img: require("@/assets/images/bigscreenTitle2.png"),
}];
let modularBg = [{
        title: '大屏背景-1',
        selected: false,
        name: 'bigscreenbg1',
@@ -20,33 +17,98 @@
        img: require("@/assets/images/bigscreenbg2.jpg")
    }
];
let modularData = [
    {
        title: '放电和充电电流',
        type: 'latticeBar',
        img: require("@/assets/images/modular-latticeBar.png")
let modularData = [{
        img: require("@/assets/images/modular-latticeBar.png"),
        chartData: {
            name: '放电和充电电流',
            id: 1,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'latticeBar',
            setData: {
                xData: ['高告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房数比例'],
                series: [{
                    name: '放电',
                    data: [120, 220, 150, 80, 70],
                    color: '#90ec7d'
                }, {
                    name: '充电',
                    data: [80, 160, 120, 310, 50],
                    color: '#ff6b6b'
                }]
            }
        }
    },
    {
        title: '整流器',
        type: 'ImgPieChart',
        img: require("@/assets/images/modular-ImgPieChart.png")
        img: require("@/assets/images/modular-ImgPieChart.png"),
        chartData: {
            name: '整流器',
            id: 2,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'imgPieChart',
            setData: {
                data: [{
                        value: 30,
                        name: '整流器交流异常'
                    },
                    {
                        value: 22,
                        name: '整流器过流'
                    },
                    {
                        value: 120,
                        name: '总故障'
                    },
                    {
                        value: 50,
                        name: '整流器欠压'
                    },
                ]
            }
        }
    },
    {
        title: '电池组',
        type: 'TriangleBarChart',
        img: require("@/assets/images/modular-TriangleBarChart.png")
        img: require("@/assets/images/modular-TriangleBarChart.png"),
        chartData: {
            name: '电池组',
            id: 3,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'triangleBarChart',
            setData: {
                xData: ['熔断', '电压低', '下电', '充电过流'],
                data: [35, 72, 55, 45]
            }
        }
    },
    {
        title: '电池状态',
        type: 'AbeamProChart',
        img: require("@/assets/images/modular-AbeamProChart.png")
        img: require("@/assets/images/modular-AbeamProChart.png"),
        chartData: {
            name: '电池状态',
            id: 4,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'abeamProChart',
            setData: {
                yData: ['浮充数量', '放电数量', '充电数量'],
                color: ['#f58881', '#b4d465', '#ffcb29'],
                bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
                data: [32, 15, 20]
            }
        }
    }
];

export default {
    components: [

    ],
    modularTitle,
    modularBg,
    modularData,

 src/components/charts/abeamProChart.vue

@@ -1,7 +1,11 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
  <div class="flexCon">
    <div class="con">
      <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart">

        </div>
      </div>
    </div>
  </div>
</template>
@@ -190,5 +194,16 @@
</script>

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

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

 src/components/settingModular.vue

@@ -1,27 +1,13 @@
<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;"
      @activated="onActived(item)" v-for="(item,i) in nowlayOut.children" :key="i">
      <div @contextmenu.prevent.stop="openMenu(item,$event)" style="width:100%;height:100%;">
        <layout-box :title="item.name">
          <div v-if="item.type=='latticeBar'" style="width:100%;height:100%">
            <lattice-bar :id="'chart'+item.id" :ref="'chart'+item.id"></lattice-bar>
          </div>
          <div v-else-if="item.type=='ImgPieChart'" style="width:100%;height:100%">
            <img-pie-chart :id="'chart'+item.id" :ref="'chart'+item.id"></img-pie-chart>
          </div>
          <div v-else-if="item.type=='TriangleBarChart'" style="width:100%;height:100%">
            <triangle-bar-chart :id="'chart'+item.id" :ref="'chart'+item.id"></triangle-bar-chart>
          </div>
          <div v-else-if="item.type=='AbeamProChart'" style="width:100%;height:100%">
            <div class="flexCon">
              <div class="con">
                <abeam-pro-chart :id="'chart'+item.id" :ref="'chart'+item.id"></abeam-pro-chart>
              </div>
            </div>
          </div>
          <div style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id"></div>
        </layout-box>
      </div>
    </vue-draggable-resizable>
@@ -29,16 +15,16 @@
    <!--<div class="chartCon">
      <layout-box title="电源状态">
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart1" ref="ProssPieChart1"></pross-pie-chart>
          <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart2" ref="ProssPieChart2"></pross-pie-chart>
          <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart3" ref="ProssPieChart3"></pross-pie-chart>
          <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart4" ref="ProssPieChart4"></pross-pie-chart>
          <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
        </div>
      </layout-box>
    </div> -->
@@ -54,25 +40,18 @@
</template>

<script>
  import Vue from "vue";
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  import latticeBar from './charts/latticeBar.vue'
  import ImgPieChart from './charts/imgPieChart.vue';
  import TriangleBarChart from './charts/triangleBarChart.vue';
  import AbeamProChart from './charts/abeamProChart.vue';
  // import ProssPieChart from '../components/charts/prossPieChart.vue';
  // import prossPieChart from '../components/charts/prossPieChart.vue';
  let clientWidth, clientHeight;
  export default {
    props: ['layOut', 'draggable', 'resizable'],
    components: {
      VueDraggableResizable,
      LayoutBox,
      latticeBar,
      ImgPieChart,
      TriangleBarChart,
      AbeamProChart,
      // ProssPieChart,
      // prossPieChart,
    },
    data() {
      return {
@@ -84,7 +63,8 @@
        contextmenuLeft: 0,
        clickItem: null,
        parentByValue: false,
        nowlayOut: {}
        nowlayOut: {},
        modularArr: []
      }
    },
    watch: {
@@ -108,7 +88,11 @@
      document.oncontextmenu = function () {
        return false;
      };
      // this.$refs.ProssPieChart1.setData({
      this.$nextTick(() => {
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
      })
      // this.$refs.prossPieChart1.setData({
      //   title: '交流停电数量',
      //   data: 56,
      //   color: '#37a9b3'
@@ -127,8 +111,11 @@
            card.h = height;
            card.x = x;
            card.y = y;
            let nowChart = `chart${this.draggableActived.id}`;
            this.$refs[nowChart][0].resize();
            this.modularArr.map(item => {
              if (item.id == `chart${this.draggableActived.id}`) {
                item.resize();
              }
            })
          }
          return true;
        });
@@ -140,8 +127,11 @@
            card.h = height;
            card.x = x;
            card.y = y;
            let nowChart = `chart${this.draggableActived.id}`;
            this.$refs[nowChart][0].resize();
            this.modularArr.map(item => {
              if (item.id == `chart${this.draggableActived.id}`) {
                item.resize();
              }
            })
          }
          return true;
        });
@@ -206,6 +196,7 @@
        this.nowlayOut.children.map((item, i) => {
          if (item.name == this.clickItem.name) {
            this.nowlayOut.children.splice(i, 1);
            this.modularArr.splice(i, 1);
          }
        })
        let sendData = JSON.parse(JSON.stringify(this.nowlayOut));
@@ -220,16 +211,25 @@
      // 加载布局数据
      loadLayout() {
        this.$nextTick(() => {
          clientWidth = this.$refs.pageWarp.clientWidth;
          clientHeight = this.$refs.pageWarp.clientHeight;
          this.nowlayOut.children.map((item) => {
            console.log(item)
            item.x *= clientWidth;
            item.y *= clientHeight;
            item.w *= clientWidth;
            item.h *= clientHeight;
            let nowChart = `chart${item.id}`;
            this.$refs[nowChart][0].setData(item.setData);
            this.$refs[nowChart][0].resize();
            let nowBox = this.$refs[`layout-box${item.id}`];
            let modular = require(`./charts/${item.type}.vue`).default;
            let modularExtend = Vue.extend(modular);
            let chartModular = new modularExtend().$mount();
            chartModular.id = `chart${item.id}`
            if (nowBox[0].children.length > 0) {
              nowBox[0].replaceChild(chartModular.$el, nowBox[0].children[0])
            } else {
              nowBox[0].appendChild(chartModular.$el)
              this.modularArr.push(chartModular);
            }
            chartModular.setData(item.setData);
            chartModular.resize();
          })
        })
      }

 src/pages/design.vue

@@ -72,87 +72,6 @@
  import ScreenTitle from '../components/screenTitle.vue'
  import settingModular from '../components/settingModular.vue'
  import html2canvas from 'html2canvas'
  //放电和充电电流模块数据
  let latticeBar = {
    name: '放电和充电电流',
    id: 1,
    w: 0.235,
    h: 0.25,
    x: 0.35,
    y: 0.35,
    type: 'latticeBar',
    setData: {
      xData: ['高告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房数比例'],
      series: [{
        name: '放电',
        data: [120, 220, 150, 80, 70],
        color: '#90ec7d'
      }, {
        name: '充电',
        data: [80, 160, 120, 310, 50],
        color: '#ff6b6b'
      }]
    }
  }
  //整流器模块数据
  let ImgPieChart = {
    name: '整流器',
    id: 2,
    w: 0.235,
    h: 0.25,
    x: 0.35,
    y: 0.35,
    type: 'ImgPieChart',
    setData: {
      data: [{
          value: 30,
          name: '整流器交流异常'
        },
        {
          value: 22,
          name: '整流器过流'
        },
        {
          value: 120,
          name: '总故障'
        },
        {
          value: 50,
          name: '整流器欠压'
        },
      ]
    }
  }
  //电池组模块数据
  let TriangleBarChart = {
    name: '电池组',
    id: 3,
    w: 0.235,
    h: 0.25,
    x: 0.35,
    y: 0.35,
    type: 'TriangleBarChart',
    setData: {
      xData: ['熔断', '电压低', '下电', '充电过流'],
      data: [35, 72, 55, 45]
    }
  }
  //电池状态模块数据
  let AbeamProChart = {
    name: '电池状态',
    id: 4,
    w: 0.235,
    h: 0.25,
    x: 0.35,
    y: 0.35,
    type: 'AbeamProChart',
    setData: {
      yData: ['浮充数量', '放电数量', '充电数量'],
      color: ['#f58881', '#b4d465', '#ffcb29'],
      bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
      data: [32, 15, 20]
    }
  }
  export default {
    components: {
      settingModular,
@@ -217,36 +136,11 @@
        return false;
      },
      addModularData(modular) {
        switch (modular.type) {
          case 'latticeBar':
            if (this.inArrayObj(this.layOut.children, latticeBar.name, "name")) {
              this.$message.error("请勿重复添加已有的模块！");
              return;
            }
            this.layOut.children.push(latticeBar)
            break;
          case 'ImgPieChart':
            if (this.inArrayObj(this.layOut.children, ImgPieChart.name, "name")) {
              this.$message.error("请勿重复添加已有的模块！");
              return;
            }
            this.layOut.children.push(ImgPieChart)
            break;
          case 'TriangleBarChart':
            if (this.inArrayObj(this.layOut.children, TriangleBarChart.name, "name")) {
              this.$message.error("请勿重复添加已有的模块！");
              return;
            }
            this.layOut.children.push(TriangleBarChart)
            break;
          case 'AbeamProChart':
            if (this.inArrayObj(this.layOut.children, AbeamProChart.name, "name")) {
              this.$message.error("请勿重复添加已有的模块！");
              return;
            }
            this.layOut.children.push(AbeamProChart)
            break;
        if (this.inArrayObj(this.layOut.children, modular.chartData.name, "name")) {
          this.$message.error("请勿重复添加已有的模块！");
          return;
        }
        this.layOut.children.push(modular.chartData)
      },
      onResizstop(data) {
        this.layOut = data