346 lines
10 KiB
Vue
346 lines
10 KiB
Vue
<template>
|
|
<div class="render-element" style="width: 100%; height: 100%;">
|
|
<ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="values"></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="values"/>
|
|
<AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
|
|
<dv-scroll-board
|
|
v-if="data.type === 'table'"
|
|
:class="'dvScrollBoard' + theme"
|
|
:config="formatTable(values, 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="values"
|
|
: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="values"
|
|
: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="values"
|
|
: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="values"
|
|
: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="values"
|
|
: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="values"
|
|
: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="values"
|
|
: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="values"
|
|
:ops="lineChart1"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'lineChart2'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:key="`chart${index}`"
|
|
:theme="theme"
|
|
:data="values"
|
|
:ops="lineChart2"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'lineChart3'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:key="`chart${index}`"
|
|
:theme="theme"
|
|
:data="values"
|
|
: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="values"
|
|
: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="values"
|
|
:ops="lineChart5"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'pieChart'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:key="`chart${index}`"
|
|
:theme="theme"
|
|
:data="values"
|
|
:ops="pieChart"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'pieChart1'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:key="`chart${index}`"
|
|
:theme="theme"
|
|
:data="values"
|
|
:ops="pieChart1"/>
|
|
<ai-echart
|
|
v-else-if="data.type === 'pieChart3'"
|
|
style="height: 100%; width: 100%;"
|
|
:ref="'chart' + index"
|
|
:key="`chart${index}`"
|
|
:theme="theme"
|
|
:data="values"
|
|
:ops="pieChart3"/>
|
|
<ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
|
|
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
|
|
<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,
|
|
map: null,
|
|
lib: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapState(['user']),
|
|
values() {
|
|
return this.data?.[this.data.dataType]?.map(e => {
|
|
return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
|
|
}) || []
|
|
}
|
|
},
|
|
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',
|
|
waitTime: 8000,
|
|
carousel: 'page',
|
|
indexHeader: '排名',
|
|
align: ['center', 'center', 'center', 'center', 'center']
|
|
}
|
|
},
|
|
handleMapClick(count = 0) {
|
|
let {lib: AMap, map} = this
|
|
if (AMap) {
|
|
let infoWin = new AMap.InfoWindow({content: ""})
|
|
map.clearMap()
|
|
let markers = this.values.filter(e=>e.lng).map(e => {
|
|
return new AMap.Marker({
|
|
map,
|
|
label: e.label,
|
|
icon: e.icon,
|
|
position: [e.lng, e.lat]
|
|
}).on('click', ({target}) => {
|
|
map.clearInfoWindow()
|
|
markers?.map(m => m.getIcon() == e.selectedIcon && m.setIcon(e.icon))
|
|
target.setIcon(e.selectedIcon)
|
|
infoWin.setContent([
|
|
`<div class="infoWin">`,
|
|
`<b>${e.label}</b>`,
|
|
`<div>累计成交金额：${e['累计成交金额(万)']}万元</div>`,
|
|
`<div>金融产品：${e['金融产品(万)']}万元</div>`,
|
|
`<div>融资需求：${e['融资需求(万)']}万元</div>`,
|
|
'</div>'
|
|
].join(''))
|
|
infoWin.open(map, [e.lng, e.lat])
|
|
})
|
|
})
|
|
map.setFitView(markers)
|
|
} else if (count < 10) {
|
|
console.log("正在加载...%s", count)
|
|
setTimeout(() => this.handleMapClick(++count), 1000)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.data.type == 'map') {
|
|
this.handleMapClick()
|
|
}
|
|
}
|
|
}
|
|
</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 - 1) {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
& > div:nth-of-type(2n) {
|
|
background-color: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.index {
|
|
color: #fff;
|
|
text-shadow: none;
|
|
background: #BD4921 !important;
|
|
-webkit-background-clip: inherit;
|
|
-webkit-text-fill-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep.amap-info-contentContainer {
|
|
.amap-info-content {
|
|
background: #0A3257;
|
|
border: 1px solid #7BE5FF;
|
|
padding: 16px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
|
.infoWin {
|
|
& > b {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-bottom: 13px;
|
|
}
|
|
|
|
& > div {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #7BE5FF;
|
|
|
|
& + div {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.amap-info-sharp {
|
|
border-top-color: #0A3257;
|
|
|
|
&:after {
|
|
border-top-color: #7BE5FF;
|
|
filter: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|