gr_bi_web/src/views/bigscreenDesigner/viewer/index.vue

<!--
 * @Descripttion: 大屏设计器 -- 预览
 * @Author: Devli
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   Raod
 * @Last Modified time: 2022-5-6 11:04:24
 !-->
<template>
  <div class="layout">
    <div :style="bigScreenStyle">
      <widget
        v-for="(widget, index) in widgets"
        :key="index"
        v-model="widget.value"
        :index="index"
        :type="widget.type"
        @oepnTheDrillView="oepnTheDrillView"
      />
    </div>
    <el-dialog 
      :title="''"
       class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
    <drill-drown-view :screenData="screenData"></drill-drown-view>
  </el-dialog>
  </div>

</template>

<script>
import widget from "../designer/widget/temp";
import DrillDrownView from "./drillDrownView";

import { detailDashboard } from "@/api/bigscreen";
export default {
  name: "Login",
  components: {
    widget,
    DrillDrownView
  },
  data() {
    return {
      bigScreenStyle: {},
      dashboard:{},
      widgets: [],
      screenData:{
          dashboard: {  },
          widgets: []
      },
      visiableDrillView:false
    };
  },
  mounted() {
    this.getData();
    window.onresize=this.Debounce(this.setScale,500);
  },
  methods: {
    oepnTheDrillView(val){
      this.screenData=val
      this.visiableDrillView=true
    },
    async getData() {
      const reportCode = this.$route.query.reportCode;
      const { code, data } = await detailDashboard(reportCode);
      if (code != 200) return;
      this.dashboard=data.dashboard||{};
      const equipment = document.body.clientWidth;
      const ratioEquipment = equipment / data.dashboard.width;
      this.bigScreenStyle = {
        width: data.dashboard.width + "px",
        height: data.dashboard.height + "px",
        "background-color": data.dashboard.backgroundColor,
        "background-image": "url(" + data.dashboard.backgroundImage + ")",
        "background-position": "0% 0%",
        "background-size": "100% 100%",
        "background-repeat": "initial",
        "background-attachment": "initial",
        "background-origin": "initial",
        "background-clip": "initial",
        transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
        "transform-origin": "0 0"
      };
      data.dashboard.widgets.forEach((item, index) => {
        item.value.widgetId = item.value.setup.widgetId
        item.value.widgetCode = item.value.setup.widgetCode
        if (item.value.setup.componentLinkage && item.value.setup.componentLinkage.length) {
          this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
            index,
            widgetId: item.value.widgetId,
            linkageArr: item.value.setup.componentLinkage
          })
        }
      })
      this.widgets = data.dashboard.widgets;

      // 定时刷新
      if(data.dashboard.refreshSeconds>0) {
        setTimeout(function(){ window.location.reload(); }, data.dashboard.refreshSeconds*1000);
      }
    },
    Debounce:(fn,t)=>{
      const delay=t||500;
      let timer=null;
      return(...args)=>{
        if(timer){
          clearTimeout(timer);
        }
        const context=this
        timer=setTimeout(()=>{
          fn.apply(context,args);
        },delay);
      }
    },
    setScale(){
      const scale=this.getScale();
      this.bigScreenStyle.transform='scale('+scale.scalex+','+scale.scaley+')'
    },
    getScale(){
      let width = this.dashboard.width
      let height = this.dashboard.height
      // 固定宽度比例
      const scalex = window.innerWidth / width
      // 高度按相同比例缩放，但允许超出屏幕高度
      const scaley = scalex
      return {
        scalex,
        scaley
      }
    },
  }
};
</script>

<style lang="scss">
.layout {
  width: 100%;
  height: auto;
  text-align: center;
  overflow:hidden
}
.dialogDrillDrownView .el-dialog{
  width:auto;
  margin-top:0 !important;
  .el-dialog__body{
    padding:0;
    max-height:calc(100vh - 34px);
    overflow:auto;
    &::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
      }
  }
   .el-dialog__header .el-dialog__headerbtn{
  top: 6px;
}
}
.bottom-text {
  width: 100%;
  color: #a0a0a0;
  position: fixed;
  bottom: 16px;
  z-index: 9999;
}
</style>