263 lines
8.1 KiB
Vue
263 lines
8.1 KiB
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'" :summaryTitle="data.summaryTitle" :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'"
|
|
:class="'dvScrollBoard' + theme"
|
|
:config="formatTable(data[data.dataType], data.isShowIndex, data.rowNum)"
|
|
:key="data.height"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
:data="data[data.dataType]"
|
|
:ops="data.config"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'barChart2'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
: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}`"
|
|
:theme="theme"
|
|
:data="data[data.dataType]"
|
|
:ops="pieChart"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'pieChart1'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:key="`chart${index}`"
|
|
:theme="theme"
|
|
:data="data[data.dataType]"
|
|
:ops="pieChart1"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'pieChart3'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:key="`chart${index}`"
|
|
:theme="theme"
|
|
:data="data[data.dataType]"
|
|
:ops="pieChart3"/>
|
|
<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>
|
|
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"></AiDvPartyOrg>
|
|
</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 pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
|
|
import pieChart3 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart3'
|
|
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', 'theme', 'instance'],
|
|
|
|
components: {
|
|
AiSwiper
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
lineChart1,
|
|
lineChart2,
|
|
lineChart5,
|
|
pieChart,
|
|
pieChart1,
|
|
pieChart3
|
|
}
|
|
},
|
|
|
|
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>
|
|
.render-element {
|
|
::v-deep .dvScrollBoard1 {
|
|
|
|
.header {
|
|
background: rgba(0, 0, 0, 0.1)!important;
|
|
|
|
.header-item {
|
|
color: #FFBB73!important;
|
|
font-size: 16px!important;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
|
|
.rows {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
line-height: 21px;
|
|
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
|
|
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
& > div:nth-of-type(2n) {
|
|
background: rgba(0, 0, 0, 0.1)!important;
|
|
}
|
|
|
|
.index {
|
|
color: #fff;
|
|
text-shadow: none;
|
|
background: transparent;
|
|
background-color: #BD4921!important;
|
|
-webkit-background-clip: inherit;
|
|
-webkit-text-fill-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|