364 lines
9.7 KiB
Vue
364 lines
9.7 KiB
Vue
<template>
|
||
<section class="AppBIBoard" :class="{fullscreen}">
|
||
<ai-fit-view @scale="v=>scale=v">
|
||
<ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
|
||
<template v-slot:head="head">
|
||
<fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
|
||
</template>
|
||
<div class="left">
|
||
<fd-card label="社群动态概况">
|
||
<div class="grid c-2 pad-t14 pad-b20">
|
||
<div class="staPanel" v-for="(v,k) in sta" :key="k">
|
||
<div v-text="k"/>
|
||
<b v-text="v"/>
|
||
</div>
|
||
<div class="chart">
|
||
<div class="title">群活跃率（7日）</div>
|
||
<ai-echart :ops="chart" :data="calcProgress()">
|
||
<div class="legend">
|
||
<ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
|
||
:value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
|
||
</div>
|
||
</ai-echart>
|
||
</div>
|
||
<div class="chart">
|
||
<div class="title">人员活跃（7日）</div>
|
||
<ai-echart :ops="chart" :data="calcProgress()">
|
||
<div class="legend">
|
||
<ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
|
||
:value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
|
||
</div>
|
||
</ai-echart>
|
||
</div>
|
||
</div>
|
||
</fd-card>
|
||
<fd-card class="mar-t14" label="志愿者">
|
||
<div class="jumpBtn" slot="right">前往志愿者平台
|
||
<div class="el-icon-position"/>
|
||
</div>
|
||
<div class="staPanel simple flex mar-t10">
|
||
<div class="fill" v-for="(v,k) in volunteers" :key="k">
|
||
<div v-text="k"/>
|
||
<b v-text="v"/>
|
||
</div>
|
||
</div>
|
||
<div class="flex mar-v12">
|
||
<b class="fill title">志愿者名单</b>
|
||
<ai-select class="areaPicker" placeholder="团队选择"/>
|
||
</div>
|
||
<dv-scroll-board ref="volunteerTable" :config="volunteerConfig"/>
|
||
<div class="dots flex center">
|
||
<div class="dot" v-for="i in tablePages" :key="i" :class="{current:current==i}"/>
|
||
</div>
|
||
</fd-card>
|
||
</div>
|
||
<div class="center fill">
|
||
<fd-card label="实时动态">
|
||
|
||
</fd-card>
|
||
</div>
|
||
<div class="right">
|
||
<fd-card label="功德银行">
|
||
|
||
</fd-card>
|
||
<fd-card label="门户应用统计">
|
||
|
||
</fd-card>
|
||
</div>
|
||
</ai-dv-wrapper>
|
||
</ai-fit-view>
|
||
</section>
|
||
</template>
|
||
<script>
|
||
import AiFitView from "dui/packages/layout/AiFitView.vue";
|
||
import FengduHead from "./components/fengduHead.vue";
|
||
import FdCard from "./components/fdCard.vue";
|
||
import AiEchart from "dui/packages/tools/AiEchart.vue";
|
||
import AiHighlight from "dui/packages/layout/AiHighlight.vue";
|
||
import AiInfoItem from "dui/packages/basic/AiInfoItem.vue";
|
||
import AiWrapper from "dui/packages/basic/AiWrapper.vue";
|
||
import Vue from "vue";
|
||
import {scrollBoard} from "@jiaminghi/data-view"
|
||
|
||
export default {
|
||
name: "AppBIBoard",
|
||
label: "丰都指挥舱",
|
||
components: {AiWrapper, AiInfoItem, AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
|
||
props: {
|
||
instance: Function,
|
||
dict: Object
|
||
},
|
||
data() {
|
||
return {
|
||
scale: 1,
|
||
fullscreen: false,
|
||
sta: {
|
||
群总数: 5118,
|
||
群主人数: 956,
|
||
'活跃群成员(30天)': '214,098',
|
||
'群消息(30天)': '1,214,098',
|
||
},
|
||
chart: {
|
||
legend: {show: false},
|
||
series: {
|
||
type: 'gauge',
|
||
startAngle: 90,
|
||
endAngle: -270,
|
||
center: ['50%', 74],
|
||
radius: 50,
|
||
progress: {
|
||
show: true,
|
||
overlap: false,
|
||
roundCap: true,
|
||
clip: false,
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{offset: 0, color: '#139AFF'},
|
||
{offset: 1, color: '#0ED5A6'},
|
||
]
|
||
}
|
||
},
|
||
},
|
||
pointer: {show: false},
|
||
splitLine: {show: false},
|
||
axisTick: {show: false},
|
||
axisLabel: {show: false},
|
||
axisLine: {
|
||
lineStyle: {width: 6, color: [[1, 'rgba(102, 121, 138, 0.4)']]},
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
offsetCenter: [0, 0],
|
||
fontSize: 24,
|
||
formatter: '{value}%',
|
||
color: "#02FEFF",
|
||
fontFamily: "DINAlternate-Bold",
|
||
width: 50,
|
||
lineHeight: 50,
|
||
padding: 12,
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(102, 121, 138, 0.4)',
|
||
borderRadius: 50
|
||
},
|
||
},
|
||
},
|
||
chartData: [
|
||
{name: "活跃居民群", value: 3502},
|
||
{name: "全部居民群", value: 5118},
|
||
],
|
||
volunteers: {
|
||
团队数量: 125,
|
||
志愿者数量: 13,
|
||
服务学员数量: 5
|
||
},
|
||
volunteerConfig: {
|
||
header: ['所属团队', '姓名', '性别', '年龄'],
|
||
headerBGC: 'rgba(33, 180, 253, 0.1)',
|
||
oddRowBGC: 'rgba(112, 112, 112, 0)',
|
||
evenRowBGC: 'rgba(112, 112, 112, 0)',
|
||
rowNum: 4,
|
||
headerHeight: 38,
|
||
columnWidth: [250],
|
||
align: ['left', 'left', 'left', 'center'],
|
||
carousel: 'page',
|
||
data: [
|
||
['三合街道丁庄社区互助会', '张珊珊', '女', 32],
|
||
['三合街道丁庄社区互助会', '王富贵', '女', 32],
|
||
['三合街道丁庄社区互助会', '阿萨德', '男', 23],
|
||
['三合街道丁庄社区互助会', '阿连德', '男', 54],
|
||
['三合街道丁庄社区互助会', '王柏柏', '女', 66],
|
||
['三合街道丁庄社区互助会', '赵二狗', '男', 41],
|
||
['三合街道丁庄社区互助会', '唯一键', '女', 13],
|
||
['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
|
||
['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
|
||
['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
|
||
['三合街道丁庄社区互助会', '张珊珊', '女', 32],
|
||
['三合街道丁庄社区互助会', '张珊珊', '女', 32],
|
||
]
|
||
},
|
||
current: 1
|
||
}
|
||
},
|
||
computed: {
|
||
tablePages: v => Math.ceil(v.volunteerConfig.data.length / v.volunteerConfig.rowNum) || 0
|
||
},
|
||
methods: {
|
||
handleFullScreen() {
|
||
this.fullscreen = this.$refs.fddv.handleFullScreen()
|
||
},
|
||
handleSetting(v) {
|
||
this.$refs.fddv.dialog = v
|
||
},
|
||
calcProgress() {
|
||
const value = (this.chartData[0].value / this.chartData.at(-1).value * 100).toFixed(0)
|
||
return [{value}]
|
||
},
|
||
watchTablePageChange(c = 0) {
|
||
if (this.$refs.volunteerTable) {
|
||
this.$refs.volunteerTable.$watch('animationIndex', i => {
|
||
this.current = Math.floor(i / 4) + 1
|
||
})
|
||
} else if (c < 5) {
|
||
setTimeout(() => this.watchTablePageChange(++c), 500)
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
Vue.use(scrollBoard)
|
||
},
|
||
mounted() {
|
||
this.watchTablePageChange()
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.AppBIBoard {
|
||
color: #CDDBEA;
|
||
font-size: 14px;
|
||
|
||
:deep(.areaPicker) {
|
||
max-width: 300px;
|
||
|
||
input {
|
||
background: rgba(0, 54, 82, 0.9);
|
||
border: 1px solid rgba(42, 122, 146, 0.7);
|
||
border-radius: 2.2px;
|
||
color: #B3DDE5;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.el-input__suffix {
|
||
color: #B3DDE5;
|
||
}
|
||
}
|
||
|
||
&.fullscreen {
|
||
position: fixed;
|
||
z-index: 202310111819;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
|
||
:deep(.viewPanel) {
|
||
background-image: url("./assets/img_bg.png");
|
||
|
||
& > .fill {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding: 12px 24px 0;
|
||
}
|
||
}
|
||
|
||
.left, .right {
|
||
width: 480px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
gap: 14px;
|
||
|
||
&.c-2 {
|
||
grid-template-columns:1fr 1fr
|
||
}
|
||
}
|
||
|
||
.staPanel {
|
||
text-align: center;
|
||
font-size: 15px;
|
||
line-height: 20px;
|
||
background-size: 100% 100%;
|
||
background: url("./assets/staPanel-bg.png") no-repeat;
|
||
height: 80px;
|
||
padding-top: 14px;
|
||
|
||
&.simple {
|
||
background: #ffffff0a;
|
||
padding-top: 0;
|
||
}
|
||
|
||
|
||
b {
|
||
font-family: DINAlternate-Bold;
|
||
font-size: 22px;
|
||
color: #02FEFF;
|
||
letter-spacing: 0;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
|
||
.chart {
|
||
height: 200px;
|
||
|
||
.legend {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding-left: 10px;
|
||
line-height: 30px;
|
||
background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
|
||
}
|
||
|
||
.jumpBtn {
|
||
background-image: linear-gradient(180deg, rgba(90, 200, 246, 0.4) 0%, rgba(1, 51, 101, 0.4) 84%);
|
||
box-shadow: inset 0 2px 8px 0 rgba(51, 187, 255, 0.5);
|
||
border-radius: 15px;
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
color: #02FEFF;
|
||
padding: 8px 16px;
|
||
height: 30px;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
margin-top: -7px;
|
||
}
|
||
|
||
:deep(.dv-scroll-board) {
|
||
height: 200px;
|
||
|
||
.header-item {
|
||
color: #02FEFF;
|
||
}
|
||
|
||
.row-item {
|
||
line-height: 38px;
|
||
}
|
||
}
|
||
|
||
.dots {
|
||
height: 36px;
|
||
padding-top: 22px;
|
||
padding-bottom: 8px;
|
||
|
||
.dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #679a9a80;
|
||
margin-right: 8px;
|
||
|
||
&.current {
|
||
background: #02FEFF;
|
||
}
|
||
|
||
&:last-of-type {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|