dvcp_v2_webapp/packages/bigscreen/designer/components/RenderElement.vue

<template>
  <div class="render-element" style="width: 100%; height: 100%;">
    <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="data[data.dataType]"></ai-dv-display>
    <ai-dv-panel
      style="height: 100%; width: 100%;"
      v-if="data.type !== 'display'"
      :title="data.title"
      :border="data.border || ''">
      <AiDvSummary v-if="data.type === 'summary'" :key="`summary${index}`" :type="data.display" :data="data[data.dataType]"/>
      <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="data[data.dataType]"/>
      <dv-scroll-board
        v-if="data.type === 'table'"
        :config="formatTable(data[data.dataType], data.isShowIndex, data.rowNum)"
        :key="data.height"
        :style="{height: data.height + 'px', width: '100%'}" />
      <ai-echart
        v-else-if="data.type === 'barChart1'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart2'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart3'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart5'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart7'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart8'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart9'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'lineChart1'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="lineChart1"/>
      <ai-echart
        v-else-if="data.type === 'lineChart2'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="lineChart2"/>
      <ai-echart
        v-else-if="data.type === 'lineChart3'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'lineChart4'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'lineChart5'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="lineChart5"/>
      <ai-echart
        v-else-if="data.type === 'pieChart'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="pieChart"/>
      <ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
    </ai-dv-panel>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import AiSwiper from './AiSwiper.vue'
  import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
  import lineChart1 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart1'
  import lineChart2 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart2'
  import lineChart5 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart5'

  export default {
    name: 'RenderElement',

    props: ['data', 'index'],

    components: {
      AiSwiper
    },

    data () {
      return {
        lineChart1,
        lineChart2,
        lineChart5,
        pieChart
      }
    },

    computed: {
      ...mapState(['user'])
    },

    methods: {
      formatTable(data, isShowIndex, rowNum) {
        if (!data.length) {
          return {
            header: [],
            data: []
          }
        }

        let rows = []
        const header = data.map(v => {
          return v[Object.keys(v)[0]]
        })

        Object.keys(data[0]).forEach((item, index) => {
          if (index !== 0) {
            rows.push(item)
          }
        })

        return {
          header: header,
          data: rows.map(item => {
            return data.map(v => {
              return v[item]
            })
          }),
          headerBGC: 'transparent',
          evenRowBGC: 'transparent',
          oddRowBGC: 'rgba(0, 133, 255, 0.2)',
          headerHeight: 42,
          rowNum: rowNum || 7,
          index: isShowIndex === '1',
          carousel: 'page',
          indexHeader: '排名',
          align: ['center', 'center', 'center', 'center', 'center']
        }
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>