145 lines
3.5 KiB
Vue
145 lines
3.5 KiB
Vue
<template>
|
|
<section class="AppDVDemo">
|
|
<ai-list>
|
|
<ai-title slot="title" title="数据大屏草稿板" isShowBottomBorder/>
|
|
<template #content>
|
|
<div class="showPanel">
|
|
<ai-dv-wrapper :views="views" v-model="active">
|
|
<AiDvDisplay></AiDvDisplay>
|
|
</ai-dv-wrapper>
|
|
</div>
|
|
</template>
|
|
</ai-list>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
|
|
import ops from './components/AiEchart/template/pie/pieChart2'
|
|
import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
|
|
import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
|
|
import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
|
|
import AiMonitor from "./components/AiMonitor/AiMonitor";
|
|
|
|
export default {
|
|
name: "AppDVDemo",
|
|
label: "数据大屏草稿板",
|
|
components: {AiMonitor, AiDvPanel, AiDvWrapper, AiDvDisplay, AiDvSummary},
|
|
data() {
|
|
return {
|
|
ops,
|
|
active: '',
|
|
views: [
|
|
{label: '标准大屏', id: '0'},
|
|
{label: '当前大屏', id: '1'},
|
|
{label: '平安乡村', id: '2'},
|
|
{label: '人口数据', id: '3'},
|
|
{label: '人口数据', id: '4'},
|
|
{label: '人口数据', id: '5'},
|
|
{label: '宅基地', id: '6'},
|
|
],
|
|
list: [
|
|
{name: '阿斯达', v1: 23, v2: 33},
|
|
{name: '水电费', v1: 12, v2: 34},
|
|
{name: '凡哥', v1: 67, v2: 25},
|
|
{name: '党费', v1: 98, v2: 85},
|
|
{name: '阿萨德', v1: 98, v2: 85},
|
|
{name: '电饭锅', v1: 98, v2: 85},
|
|
{name: '户籍科', v1: 98, v2: 85},
|
|
],
|
|
data: [
|
|
{
|
|
"key": "阿斯达",
|
|
"value": '22',
|
|
"percentage": 33,
|
|
text: '同比上月'
|
|
},
|
|
{
|
|
"key": "阿斯达",
|
|
"value": '22',
|
|
"percentage": -33,
|
|
text: '同比上月'
|
|
}
|
|
],
|
|
value: [
|
|
{
|
|
"key": "宅基地 ",
|
|
"value": 1252292,
|
|
"value1": 12592,
|
|
"value2": 12592,
|
|
"value3": 12592,
|
|
"value4": 12592
|
|
},
|
|
{
|
|
"key": "人数",
|
|
"value": 12592,
|
|
"value1": 12592,
|
|
"value2": 12592,
|
|
"value3": 12592,
|
|
"value4": 12592
|
|
},
|
|
{
|
|
"key": "户数 ",
|
|
"value": 12592,
|
|
"value1": 12592,
|
|
"value2": 12592,
|
|
"value3": 12592,
|
|
"value4": 12592
|
|
},
|
|
{
|
|
"key": "村社区",
|
|
"value": 12592,
|
|
"value1": 12592,
|
|
"value2": 12592,
|
|
"value3": 12592,
|
|
"value4": 12592
|
|
}
|
|
],
|
|
markers: []
|
|
}
|
|
},
|
|
methods: {
|
|
getMarkers() {
|
|
this.$request.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
|
|
params: {current: 1, size: 1000000},
|
|
withoutToken: true
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.markers = res.data.map(e => ({
|
|
...e,
|
|
icon: "https://cdn.cunwuyun.cn/dvcp/dv/monitor.svg",
|
|
label: e.communityName
|
|
}))
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
// this.getMarkers()
|
|
setTimeout(() => {
|
|
this.list = this.list.map(e => ({name: e.name, '电费': e.v1, '水费': e.v2 * 2}))
|
|
}, 2000)
|
|
},
|
|
mounted() {
|
|
this.$initWxOpenData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./lib/animation";
|
|
|
|
.AppDVDemo {
|
|
height: 100%;
|
|
|
|
.showPanel {
|
|
height: 600px;
|
|
}
|
|
|
|
.AiDvPanel {
|
|
width: 600px;
|
|
}
|
|
}
|
|
</style>
|