fix bug

whyczyk

2022-03-02 d6a8de9744f60c5f09f18ffe349bbc1e4fc1405c

 src/pages/exhibition.vue

@@ -1,163 +1,210 @@
<template>
  <div class="screenWarp" :style="'background-image:url('+screenBg+')'" ref="cover">
    <screen-title :title="nowlayOut.appName" :bgImg="screenTitleBg"></screen-title>
    <div class="pageWarp" ref="pageWarp">
      <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" :parent="true" :debug="false"
        :snap="true" :snapTolerance="5" :draggable="false" :resizable="false"
        style="transition: none; will-change: transform;" 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 style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id"></div>
          </layout-box>
        </div>
      </vue-draggable-resizable>
    </div>
  </div>
   <div class="screenWarp" :style="'background-image:url('+screenBg+')'" ref="cover">
      <screen-title :title="nowlayOut.appName" :bgImg="screenTitleBg" v-if="isHeader"></screen-title>
      <div class="pageWarp" ref="pageWarp">
         <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" :parent="true" :debug="false" :snap="true" :snapTolerance="5" :draggable="false" :resizable="false" style="transition: none; will-change: transform;" v-for="(item,i) in nowlayOut.children" :key="i">
            <div style="width:100%;height:100%;">
               <layout-box :title="item.name">
                  <div style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id" v-if="isNow"></div>
               </layout-box>
            </div>
         </vue-draggable-resizable>
      </div>
   </div>

</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 {
    screenAllConfig
  } from '@/assets/js/api'
  let clientWidth, clientHeight;
  import charts from '@/assets/js/charts';
  import ScreenTitle from '../components/screenTitle.vue'
  export default {
    components: {
      VueDraggableResizable,
      LayoutBox,
      ScreenTitle
    },
    data() {
      return {
        nowlayOut: {},
        modularArr: [],
        modularTitle: charts.modularTitle,
        modularBg: charts.modularBg,
        modularData: charts.modularData,
        screenTitleBg: null,
        screenBg: null,
      }
    },
    mounted() {
      this.nowlayOut.appName = this.$route.query.name;
      this.$nextTick(() => {
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
        this.loadLayout();
      })
      window.addEventListener('resize', () => {
        this.$nextTick(() => {
          location.reload()
        })
      })
    },
    methods: {
      // 加载布局数据
      loadLayout() {
        let sendData = {
          appId: this.$route.query.id
        }
        screenAllConfig(sendData).then((res) => {
          if (res.data && res.data.data && res.data.code == 1) {
            this.nowlayOut = res.data.data;
            this.nowlayOut.children.map((item) => {
              for (const key in this.modularData) {
                if (item.type == this.modularData[key].chartData.type) {
                  item.setData = this.modularData[key].chartData.setData
                }
              }
              this.modularTitle.map((item) => {
                if (item.name == this.nowlayOut.headPic) {
                  this.screenTitleBg = item.img;
                }
              });
              this.modularBg.map((item) => {
                if (item.name == this.nowlayOut.bgPic) {
                  this.screenBg = item.img;
                }
              });
              item.x *= clientWidth;
              item.y *= clientHeight;
              item.w *= clientWidth;
              item.h *= clientHeight;
              setTimeout(() => {
                let nowBox = this.$refs[`layout-box${item.id}`];
                let modular = require(`@/components/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();
                chartModular.resize();
              }, 0)
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 {
   screenAllConfig
} from '@/assets/js/api'
let clientWidth, clientHeight;
import charts from '@/assets/js/charts';
import ScreenTitle from '../components/screenTitle.vue'
export default {
   components: {
      VueDraggableResizable,
      LayoutBox,
      ScreenTitle,
   },
   data() {
      return {
         nowlayOut: {},
         modularArr: [],
         modularTitle: charts.modularTitle,
         modularBg: charts.modularBg,
         modularData: charts.modularData,
         screenTitleBg: null,
         screenBg: null,
         isHeader: true,
         isNow: true,
         state: 1,
      }
   },
   mounted() {
      if (this.$route.query.userId) {
         localStorage.setItem('userId', this.$route.query.userId);
      }
      this.nowlayOut.appName = this.$route.query.name;
      if (this.$route.query.head && this.$route.query.head == 1) {
         this.isHeader = false
      }
      this.$nextTick(() => {
         if (this.$route.query.newPlatform) {
            this.$store.dispatch('app/setNewPlatform', this.$route.query.newPlatform)
         }
         clientWidth = this.$refs.pageWarp.clientWidth;
         clientHeight = this.$refs.pageWarp.clientHeight;
         this.loadLayout();
      })
      window.addEventListener('resize', () => {
         this.$nextTick(() => {
            location.reload()
         })
      })
   },
   methods: {

            })
          }
        }).catch((err) => {
          console.log(err)
        });
      }
    }
  }
      // 加载布局数据
      loadLayout() {
         let sendData = {
            appId: this.$route.query.id
         }
         screenAllConfig(sendData).then((res) => {
            if (res.data && res.data.data && res.data.code == 1) {
               this.nowlayOut = res.data.data;
               this.nowlayOut.children.map((item) => {
                  for (const key in this.modularData) {
                     if (item.type == this.modularData[key].chartData.type) {
                        item.setData = this.modularData[key].chartData.setData
                     }
                  }
                  this.modularTitle.map((item) => {
                     if (item.name == this.nowlayOut.headPic) {
                        this.screenTitleBg = item.img;
                     }
                  });
                  this.modularBg.map((item) => {
                     if (item.name == this.nowlayOut.bgPic) {
                        this.screenBg = item.img;
                     }
                  });
                  item.x *= clientWidth;
                  item.y *= clientHeight;
                  item.w *= clientWidth;
                  item.h *= clientHeight;
                  setTimeout(() => {
                     let nowBox = this.$refs[`layout-box${item.id}`];
                     let modular = require(`@/components/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);
                     }
                     if (chartModular.id == "chart14") {
                        this.$nextTick(() => {
                           chartModular.$children[0].setData()
                        })
                     } else {
                        chartModular.setData();
                     }
                     chartModular.resize();
                  }, 0)

               })

               window.addEventListener("message", (msg) => {
                  // 处理数据
                  this.state = msg.data.state
                  if (this.state == 1) {
                     this.modularArr.map(item => {
                        if (item.postData) {
                           item.postData()
                        }
                     })
                  } else if (this.state == 0) {
                     this.modularArr.map(item => {
                        if (item.outClear) {
                           item.outClear()
                        }
                     })
                  }
               });
            }
         }).catch((err) => {
            console.log(err)
         });
      }
   },
   beforeDestroy() {
      this.modularArr.map(item => {
         if (item.outClear) {
            item.outClear()
         }
      })
      this.isNow = false
   }
}
</script>

<style scoped>
  .screenWarp {
    width: 100%;
    height: 100%;
    background-color: #031D67;
    background-size: 100% 100%;
  }
.screenWarp {
   width: 100%;
   height: 100%;
   background-color: #031d67;
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

  .pageWarp {
    width: 100%;
    height: calc(100% - 52px);
  }
.pageWarp {
   width: 100%;
   flex: 1;
}

  .contextmenu {
    margin: 0;
    background: #27343e;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #bcc9d4;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  }
.contextmenu {
   margin: 0;
   background: #27343e;
   z-index: 3000;
   position: absolute;
   list-style-type: none;
   padding: 5px 0;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 400;
   color: #bcc9d4;
   box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

  .contextmenu li {
    padding: 0 6px;
    line-height: 28px;
    height: 28px;
    border-left: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    padding-right: 3em;
    display: flex;
    align-items: center;
  }
.contextmenu li {
   padding: 0 6px;
   line-height: 28px;
   height: 28px;
   border-left: 2px solid transparent;
   cursor: pointer;
   overflow: hidden;
   padding-right: 3em;
   display: flex;
   align-items: center;
}

  .contextmenu li i {
    margin-right: 8px;
  }
.contextmenu li i {
   margin-right: 8px;
}

  .contextmenu li:hover {
    background-color: #1d262e;
    color: #2681ff;
    border-left: 2px solid #2681ff;
  }
.contextmenu li:hover {
   background-color: #1d262e;
   color: #2681ff;
   border-left: 2px solid #2681ff;
}
</style>