全屏界面自适应

whyczyk

2021-03-15 d60a704e6cbaaae003d67503a72fc0368b861131

全屏界面自适应

 src/assets/css/basic.css

@@ -146,6 +146,7 @@
    height: 100%;
    min-width: 1024px;
    font-size: 12px;
    background-color: #031D67;
}

body {

 src/components/charts/prossPieChart.vue

@@ -47,7 +47,7 @@
          title: {
            text: '{a|' + title + '}',
            x: 'center',
            bottom: '2%',
            top: '80%',
            textStyle: {
              rich: {
                a: {

 src/components/settingModular.vue

@@ -1,9 +1,10 @@
<template>
  <div class="pageWarp" ref="pageWarp">
    <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">
      @refLineParams="getRefLineParams" @resizing="onResize" @resizestop="onResizstop" :parent="true" :debug="false"
      :snap="true" :snapTolerance="5" :draggable="draggable" :resizable="resizable" :grid="[10,10]"
      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 style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id"></div>
@@ -12,10 +13,10 @@
    </vue-draggable-resizable>


    <!-- <span class="ref-line v-line" v-for="(item,index) in vLine" :key="'vLine'+index" v-show="item.display"
    <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"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"></span> -->
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"></span>
    <ul v-show="rightMenuVisible" :style="{left:contextmenuLeft+'px',top:contextmenuTop+'px'}" class="contextmenu">
      <li><i class="el-icon-refresh-right"></i> 重新加载</li>
      <li @click="removeModular"><i class="el-icon-delete"></i> 删除</li>
@@ -25,7 +26,7 @@

<script>
  import Vue from "vue";
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys/src/components/vue-draggable-resizable'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  let clientWidth, clientHeight;
@@ -73,7 +74,7 @@
      this.$nextTick(() => {
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
      })
      });
    },
    methods: {
      // 选中要调整的面板时
@@ -144,14 +145,14 @@
        this.$emit('onDragstop', sendData);
      },
      // 辅助线回调事件
      // getRefLineParams(params) {
      //   const {
      //     vLine,
      //     hLine
      //   } = params
      //   this.vLine = vLine
      //   this.hLine = hLine
      // },
      getRefLineParams(params) {
        const {
          vLine,
          hLine
        } = params;
        this.vLine = vLine
        this.hLine = hLine
      },
      //模块右键菜单打开
      openMenu(clickItem, e) {
        this.clickItem = clickItem;
@@ -212,6 +213,7 @@
  .pageWarp {
    width: 100%;
    height: calc(100% - 52px);
    position: relative;
  }

  .contextmenu {

 src/pages/design.vue

@@ -1,6 +1,6 @@
<template>
  <div class="design">
    <div class="slider-card">
    <div class="slider-card" ref="sliderCard">
      <div class="editCon">
        <div class="title">
          全部可用组件
@@ -59,7 +59,9 @@
    </div>
    <div class="content-warp">
      <div class="screenWarp" :style="'background-image:url('+screenBg+')'" ref="cover">
        <screen-title :title="layOut.appName" :bgImg="screenTitleBg"></screen-title>
        <div ref="screenTitle">
          <screen-title :title="layOut.appName" :bgImg="screenTitleBg"></screen-title>
        </div>
        <setting-modular :layOut="layOut" @onResizstop="onResizstop" @onDragstop="onDragstop"
          @removeModular="removeModular" :draggable="true" :resizable="true"></setting-modular>
      </div>

 src/pages/exhibition.vue

@@ -53,11 +53,16 @@
      }
    },
    mounted() {
      this.nowlayOut.appName = this.$route.query.name;
      this.$nextTick(() => {
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
        this.nowlayOut.appName = this.$route.query.name;
        this.loadLayout();
      })
      window.addEventListener('resize', () => {
        this.$nextTick(() => {
          location.reload()
        })
      })
    },
    methods: {
@@ -77,7 +82,6 @@
                }
              }
              this.modularTitle.map((item) => {
                console.log(item)
                if (item.name == this.nowlayOut.headPic) {
                  this.screenTitleBg = item.img;
                }
@@ -95,7 +99,6 @@
              setTimeout(() => {
                let nowBox = this.$refs[`layout-box${item.id}`];
                let modular = require(`@/components/charts/${item.type}.vue`).default;
                console.log(item)
                let modularExtend = Vue.extend(modular);
                let chartModular = new modularExtend().$mount();
                chartModular.id = `chart${item.id}`