查看界面功能提交

whyczyk

2021-03-13 0731f1aae2d6f8e40e33e266b91ee76c20ac5664

查看界面功能提交

 src/pages/design.vue

@@ -99,6 +99,28 @@
      }
    },
    mounted() {
      this.layOut.appId = this.$route.query.id;
      this.layOut.appName = this.$route.query.name;
      this.$nextTick(() => {
        this.loadLayOutData()
      })
    },
    methods: {
      //请求后台布局信息
      loadLayOutData() {
        let sendData = {
          appId: this.layOut.appId
        }
        screenAllConfig(sendData).then((res) => {
          if (res.data && res.data.data && res.data.code == 1) {
            this.layOut = res.data.data;
            this.layOut.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) => {
        item.selected = false;
        if (item.name == this.layOut.headPic) {
@@ -113,31 +135,6 @@
          this.screenBg = item.img;
        }
      });
      this.layOut.appId = this.$route.query.id;
      this.layOut.appName = this.$route.query.name;
      this.$nextTick(() => {
        this.loadLayOutData()
      })

    },
    methods: {
      //请求后台布局信息
      loadLayOutData() {
        let sendData = {
          appId: this.layOut.appId
        }
        screenAllConfig(sendData).then((res) => {
          console.log(res)
          if (res.data && res.data.data && res.data.code == 1) {
            this.layOut = res.data.data;
            this.layOut.children.map((item) => {
              for (const key in this.modularData) {
                if (item.type == this.modularData[key].chartData.type) {
                  item.setData = this.modularData[key].chartData.setData
                }
              }
            })
            console.log(this.layOut)
          }
        }).catch((err) => {
          console.log(err)
@@ -201,6 +198,9 @@
              message: res.data.msg,
              type: 'success'
            });
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          } else {
            this.$message({
              message: res.data.msg,

 src/pages/exhibition.vue

New file
@@ -0,0 +1,170 @@
<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>

</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 {
        draggableActived: null,
        vLine: [],
        hLine: [],
        rightMenuVisible: false,
        contextmenuTop: 0,
        contextmenuLeft: 0,
        clickItem: null,
        parentByValue: false,
        nowlayOut: {},
        modularArr: [],
        modularTitle: charts.modularTitle,
        modularBg: charts.modularBg,
        modularData: charts.modularData,
        screenTitleBg: null,
        screenBg: null,
      }
    },
    mounted() {
      this.$nextTick(() => {
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
        this.nowlayOut.appName = this.$route.query.name;
        this.loadLayout();
      })
    },
    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) => {
                console.log(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;
                console.log(item)
                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();
              }, 0)

            })
          }
        }).catch((err) => {
          console.log(err)
        });
      }
    }
  }
</script>

<style scoped>
  .screenWarp {
    width: 100%;
    height: 100%;
    background-color: #031D67;
    background-size: 100% 100%;
  }

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

  .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 i {
    margin-right: 8px;
  }

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

 src/pages/index.vue

@@ -199,9 +199,13 @@
        let self = this;
        switch (status) {
          case 1:
            self.$message({
              message: "功能暂未开放,敬请期待！",
              type: 'error'
            // 编辑
            self.$router.push({
              path: '/exhibition',
              query: {
                id: item.id,
                name: item.name
              }
            });
            break;
          case 2:

 src/router/routes.js

@@ -6,4 +6,8 @@
    path: '/design',
    meta: {},
    component: (resolve) => require(['@/pages/design.vue'], resolve)
}, {
    path: '/exhibition',
    meta: {},
    component: (resolve) => require(['@/pages/exhibition.vue'], resolve)
}, ];