dvcp_v2_webapp/packages/bigscreen/viewer/AppGigscreenViewer.vue

<template>
  <section class="AppGigscreenViewer">
    <div v-if="!component">
      <div
          class="component-item"
          :style="{
          width: item.width + 'px',
          height: item.height + 'px',
          left: item.left * scale + 'px',
          top: item.top * scale + 'px',
          position: 'absolute',
          zIndex: item.zIndex,
          transform: `scale(${scale})`
        }"
          v-for="(item, index) in componentList"
          :key="index">
        <ai-dv-render :instance="instance" :data="item" :index="index" :theme="dashboard.theme"/>
      </div>
    </div>
    <components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
  </section>
</template>

<script>

export default {
  name: 'AppGigscreenViewer',
  label: '大屏预览',
  props: {
    instance: Function,
    dict: Object,
    id: String,
    urlPrefix: {
      type: String,
      default: '/app'
    }
  },
  watch: {
    id(v) {
      this.getInfo(v)
    }
  },
  data() {
    return {
      component: '',
      dashboard: {
        title: '大屏',
        width: 1920,
        height: 1080,
        backgroundColor: '',
        theme: '0',
        backgroundImage: []
      },
      componentList: [],
      scale: 1,
      meta: {}
    }
  },
  created() {
    this.getInfo(this.id)
  },
  mounted() {
    this.$nextTick(() => {
      let content = document.querySelector('#dv-full-screen-container')
      if (content) {
        const transform = content.style.transform
        const scale = transform.replace('scale', '').replace('(', '').replace(')', '')
        if (scale == 1) {
          this.scale = document.body.clientWidth / 1920
        }
      }
    })
  },
  methods: {
    getInfo(id) {
      this.component = null
      id && this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
        if (res?.data) {
          const config = JSON.parse(res.data.config)
          if (config.custom) {
            this.component = config.custom
            this.meta = config?.meta || {}
          } else {
            this.componentList = JSON.parse(res.data.config).config
            this.dashboard = JSON.parse(res.data.config).dashboard

            this.componentList.forEach((item, index) => {
              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary'].includes(item.type))) {
                this.getSourceData(item, index)
              }
              if (item.type === 'monitor' && item.monitorType === 'cmcc') {
                this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
                  if (res.code == 0) {
                    this.$set(this.componentList[index], 'src', JSON.parse(res.data).url)
                  }
                })
              }
              if (item.type === 'monitor' && item.monitorType === 'slw') {
                this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
                  if (res.code == 0) {
                    this.$set(this.componentList[index], 'src', res.data)
                  }
                })
              }
            })
          }
        }
      })
    },
    getSourceData(item, index) {
      const api = item.dataType === 'apiData' ? item.api : `${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${item.sourceDataId}`
      this.instance.post(api).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            const keys = Object.keys(res.data[0])
            const list = res.data
            let dynamicData = []
            if (item.type === 'table') {
              dynamicData = keys.map(v => {
                let obj = {}
                list.forEach((item, index) => {
                  obj[`v${index}`] = item[v]
                })

                return {
                  row: v,
                  ...obj
                }
              })
            } else if (item.type === 'summary') {
              if (item.display === 'summary9') {
                dynamicData = res.data
              } else {
                dynamicData = Object.keys(res.data[0]).map(item => {
                  return {
                    key: item,
                    value: res.data[0][item]
                  }
                })
              }
            } else if (item.dataType === 'dynamicData' && !item.dataX && !item.dataY.length) {
              dynamicData = Object.keys(res.data[0]).map(item => {
                return {
                  label: item,
                  value: res.data[0][item]
                }
              })
            } else {
              if (item.dataX && item.dataY.length) {
                list.forEach(i => {
                  let obj = {}
                  item.dataY.forEach(v => {
                    obj[v] = i[v]
                  })
                  dynamicData.push({
                    [item.dataX]: i[item.dataX],
                    ...obj
                  })
                })
              } else {
                dynamicData = res.data
              }
            }
            this.$set(this.componentList[index], item.dataType, dynamicData)
          } else {
            this.$set(this.componentList[index], item.dataType, [])
          }
        }
      })
    },

    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss">
.AppGigscreenViewer {
  position: relative;
  height: 100%;
  background: transparent !important;

  .component-item {
    transform-origin: 0 0;
  }

  .dv-scroll-board {
    height: calc(100%) !important;

    .header-item {
      color: #7e8697;
      font-size: 16px;
    }

    .index {
      display: inline-block;
      width: 26px;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      background-color: #4F57FF !important;
    }
  }

  .vdr {
    border: none;
  }
}
</style>