From 9fc3a1d5a70a5af805b37476d47331dad0b21d65 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期六, 09 十月 2021 15:09:32 +0800
Subject: [PATCH] 模块socket优化请求数据
---
src/pages/exhibition.vue | 319 +++++++++++++++++++++++++++--------------------------
1 files changed, 163 insertions(+), 156 deletions(-)
diff --git a/src/pages/exhibition.vue b/src/pages/exhibition.vue
index c931ba2..974fae7 100644
--- a/src/pages/exhibition.vue
+++ b/src/pages/exhibition.vue
@@ -1,171 +1,178 @@
<template>
- <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 @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 @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" 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,
- isHeader: true
- }
- },
- mounted() {
- this.nowlayOut.appName = this.$route.query.name;
- if (this.$route.query.head && this.$route.query.head == 1) {
- this.isHeader = false
- }
- 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
+ }
+ },
+ mounted() {
+ this.nowlayOut.appName = this.$route.query.name;
+ if (this.$route.query.head && this.$route.query.head == 1) {
+ this.isHeader = false
+ }
+ 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)
- })
- }
- }).catch((err) => {
- console.log(err)
- });
- }
- }
- }
+ })
+ }
+ }).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%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
+.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%;
- flex: 1;
- }
+.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>
\ No newline at end of file
--
Gitblit v1.9.1