jinshui-screen/src/views/next/index.vue

<template>
  <div
    class="next"
    :style="{
      width: width + 'px',
      height: height + 'px',
      transform: `scale(${scale}) translate(-50%, -50%)`,
    }"
  >
    <div class="left-border"></div>
    <div class="right-border"></div>
    <ScreenHeader />
    <ScreenContent />
    <ScreenContentLeft />
    <ScreenContentRight />
    <BuildLeaderAttach />
    <CommunityDetail />
    <PartyerStyle />
    <OfficeLead />
    <TopicList />
    <EventDetail />
    <EventList />
    <HourseList />
    <ResidentList />
    <ResidentInfo />
    <HourseInfo />
    <MonitorList />
    <MonitorDetail />
    <TheRedCross />
    <VolunteerStyle />
    <OrgStructure />
    <OrgPersonDetail />
    <ConflictMediation />
    <DirectCommunication />
    <ArchiveQuery />
    <OneClickService />
    <GridInfoDialog/>
  </div>
</template>

<script>
import { debounce } from 'utils/common'
import { mapGetters, mapActions } from 'vuex'
import ScreenHeader from './layout/screen-header'
import ScreenContent from './layout/screen-content'
import ScreenContentLeft from './screen-content-left'
import ScreenContentRight from './screen-content-right'
import BuildLeaderAttach from './dialog-module/build-leader-attach'
import CommunityDetail from './dialog-module/community-detail'
import PartyerStyle from './dialog-module/partyer-style'
import OfficeLead from './dialog-module/office-lead'
import TopicList from './dialog-module/topic-list'
import EventDetail from './dialog-module/event-detail'
import EventList from './dialog-module/event-list'
import HourseList from './dialog-module/hourse-list'
import ResidentList from './dialog-module/resident-list'
import ResidentInfo from './dialog-module/resident-info'
import HourseInfo from './dialog-module/hourse-info'
import MonitorList from './dialog-module/monitor-list'
import MonitorDetail from './dialog-module/monitor-detail'
import TheRedCross from './dialog-module/the-red-cross'
import VolunteerStyle from './dialog-module/volunteer-style'
import OrgStructure from './dialog-module/org-structure'
import OrgPersonDetail from './dialog-module/org-person-detail'
import ConflictMediation from './dialog-module/conflict-mediation'
import DirectCommunication from './dialog-module/direct-communication'
import ArchiveQuery from './dialog-module/archive-query'
import OneClickService from './dialog-module/one-click-service'
import GridInfoDialog from './dialog-module/grid-info-dialog'
let width = 0
let height = 0
export default {
  name: 'next',
  data () {
    return {
      width: 2560,
      height: 1152
    }
  },
  computed: {
    ...mapGetters(['scale'])
  },
  components: {
    ScreenHeader,
    ScreenContent,
    ScreenContentLeft,
    ScreenContentRight,
    BuildLeaderAttach,
    CommunityDetail,
    PartyerStyle,
    OfficeLead,
    TopicList,
    EventDetail,
    EventList,
    HourseList,
    ResidentList,
    ResidentInfo,
    HourseInfo,
    MonitorList,
    MonitorDetail,
    TheRedCross,
    VolunteerStyle,
    OrgStructure,
    OrgPersonDetail,
    ConflictMediation,
    DirectCommunication,
    ArchiveQuery,
    OneClickService,
    GridInfoDialog
  },
  beforeRouteEnter (to, from, next) {
    if (window.location.search) {
      const totalArr = window.location.search.split('?')[1].split('&')
      totalArr.forEach(item => {
        if (item.indexOf('width') > -1) {
          width = item.split('=')[1]
        } else if (item.indexOf('height') > -1) {
          height = item.split('=')[1]
        }
      })
    }
    next()
  },
  created () {
    if (width && height) {
      this.width = width
      this.height = height
    }
  },
  mounted () {
    this.setScale()
    window.addEventListener('resize', debounce(this.setScale))
  },
  methods: {
    ...mapActions({
      set_scale: 'SET_SCALE'
    }),
    // 获取缩放比
    getScale () {
      const { width, height } = this
      const ww = window.innerWidth / width
      const wh = window.innerHeight / height
      return ww < wh ? ww : wh
    },
    // 设置缩放比
    setScale () {
      this.set_scale(this.getScale())
    }
  }
}
</script>

<style lang="scss" scoped>
.next {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.2s;
  transform-origin: 0 0;
  overflow: hidden;
  .left-border {
    width: 660px;
    height: 100%;
    background: url("~@/assets/next-images/left-border.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0px;
    top: 0;
    z-index: 10;
  }
  .right-border {
    width: 660px;
    height: 100%;
    background: url("~@/assets/next-images/right-border.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0px;
    top: 0;
    z-index: 10;
  }
}
</style>