剔除不上线内容
This commit is contained in:
aixianling
258
src/pending/AppResident/components/residentSta.vue
Normal file
258
src/pending/AppResident/components/residentSta.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="resident-statistical">
|
||||
<u-tabs :list="tabs" :is-scroll="false" :current="currentType" font-size="32"
|
||||
bar-width="192" height="96" bg-color="#3975C6"
|
||||
active-color="#fff" inactive-color="#fff" @change="handleChange"/>
|
||||
<div class="bg" :style="{backgroundImage:'url(' + $cdn + 'dvcp_bg.png' + ')'}"></div>
|
||||
<div class="card">
|
||||
<u-row justify="between">
|
||||
<div class="item" v-for="(item,index) in cardList" :key="index">
|
||||
<span :style="{color:item.color} ">{{ item.value }}</span>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</u-row>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import {mapActions} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "residentSta",
|
||||
props: {
|
||||
isNormal: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentType: 0,
|
||||
groupId: null,
|
||||
chart: null,
|
||||
chartData: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', "wxInvoke"]),
|
||||
handleChange(i) {
|
||||
this.currentType = i
|
||||
this.getChart()
|
||||
},
|
||||
getChart() {
|
||||
this.$http.post(this.currentType == 0 ? "/app/wxcp/wxgroup/groupStatistic" : "/app/wxcp/wxcustomerlog/customerStatistic", null, {
|
||||
params: {
|
||||
id: this.groupId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.chartData = res.data
|
||||
this.initChart()
|
||||
}
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById('chart'))
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
const x = Object.keys(this.chartData.list)
|
||||
const y = Object.values(this.chartData.list)
|
||||
this.chart.setOption({
|
||||
backgroundColor: "#F9F9F9",
|
||||
legend: {
|
||||
data: this.currentType == 0 ? ["群成员总数", "入群人数", "退群人数"] : ["居民总数", "新增居民数", "流失居民数"],
|
||||
icon: "rect",
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#666666",
|
||||
lineHeight: 20
|
||||
},
|
||||
bottom: 0
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
top: "10%",
|
||||
bottom: "30%",
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
marginTop: 10,
|
||||
rotate: 40,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#666666'
|
||||
}
|
||||
},
|
||||
data: x.map(e => e.slice(5))
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#666666'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.currentType == 0 ? "群成员总数" : "居民总数",
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
color: "#4B87FE"
|
||||
},
|
||||
data: y.map(e => e.total)
|
||||
},
|
||||
{
|
||||
name: this.currentType == 0 ? "入群人数" : "新增居民数",
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
color: "#32C5FF"
|
||||
},
|
||||
data: y.map(e => e.increase)
|
||||
},
|
||||
{
|
||||
name: this.currentType == 0 ? "退群人数" : "流失居民数",
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
color: "#FFAA44"
|
||||
},
|
||||
data: y.map(e => e.decrease)
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{name: "居民群统计", value: 0},
|
||||
{name: "居民统计", value: 1},
|
||||
]
|
||||
},
|
||||
currentTab() {
|
||||
return this.tabs.find(e => e.value == this.currentType)
|
||||
},
|
||||
cardList() {
|
||||
return this.currentType == 0 ? [
|
||||
{label: "群聊总数", value: this.chartData?.groupSum || "0", color: "#354FC7"},
|
||||
{label: "群成员总数", value: this.chartData?.today?.total || "0", color: "#868686"},
|
||||
{label: "今日入群", value: this.chartData?.today?.increase || "0", color: "#5FBA95"},
|
||||
{label: "今日退群", value: this.chartData?.today?.decrease || "0", color: "#F09535"},
|
||||
] : [
|
||||
{label: "居民总数", value: this.chartData?.today?.total || "0", color: "#354FC7"},
|
||||
{label: "今日新增", value: this.chartData?.today?.increase || "0", color: "#5FBA95"},
|
||||
{label: "今日流失", value: this.chartData?.today?.decrease || "0", color: "#F09535"},
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isNormal(v) {
|
||||
v && this.getChart()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$route.hash == "#dev") {
|
||||
this.getChart()
|
||||
} else this.injectJWeixin("getCurExternalChat").then(() => {
|
||||
return Promise.resolve()
|
||||
}).then(() => {
|
||||
this.wxInvoke(['getCurExternalChat', {}, res => {
|
||||
if (res?.err_msg == 'getCurExternalChat:ok') {
|
||||
this.groupId = res.chatId
|
||||
}
|
||||
this.getChart()
|
||||
}])
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.resident-statistical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #F5F5F5;
|
||||
padding-top: 96px;
|
||||
|
||||
::v-deep .u-tabs {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.bg {
|
||||
height: 340px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 686px;
|
||||
height: 232px;
|
||||
margin: -140px auto 0;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
|
||||
.u-row {
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #354FC7;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
background-color: #FFFFFF;
|
||||
margin: 24px 0;
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
#chart {
|
||||
width: 686px;
|
||||
height: 470px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user