初始化
This commit is contained in:
aixianling
188
packages/bigscreen/designer/components/RenderElement.vue
Normal file
188
packages/bigscreen/designer/components/RenderElement.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user