783 lines
19 KiB
Vue
783 lines
19 KiB
Vue
<template>
|
|
<div class="AppResidentFile">
|
|
<u-tabbar v-model="currentTabBar" :list="lists" @change="changeTab" style="height: 0"></u-tabbar>
|
|
|
|
<div class="currentTabBar0" v-if="currentTabBar == 0">
|
|
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
|
|
|
<div class="peopleGroup" v-if="currentTabs == 0">
|
|
<div class="topcard">
|
|
<div class="cards">
|
|
<div class="items">
|
|
<span class="items1">{{ groupSum }}</span>
|
|
<span>群聊总数</span>
|
|
</div>
|
|
|
|
<div class="items">
|
|
<span class="items2">{{ todayList1.total }}</span>
|
|
<span>群成员总数</span>
|
|
</div>
|
|
|
|
<div class="items">
|
|
<span class="items3">{{ todayList1.increase }}</span>
|
|
<span>今日入群</span>
|
|
</div>
|
|
|
|
<div class="items">
|
|
<span class="items4">{{ todayList1.decrease }}</span>
|
|
<span>今日退群</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="echartes" id="echarts1">
|
|
<div class="echartss"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="people" v-if="currentTabs == 1">
|
|
<div class="topcard">
|
|
<div class="cards">
|
|
<div class="items">
|
|
<span class="items1">{{ todayList2.total }}</span>
|
|
<span>居民总数</span>
|
|
</div>
|
|
|
|
<div class="items">
|
|
<span class="items3">{{ todayList2.increase }}</span>
|
|
<span>今日新增</span>
|
|
</div>
|
|
|
|
<div class="items">
|
|
<span class="items4">{{ todayList2.decrease }}</span>
|
|
<span>今日流失</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="echartes" id="echarts2">
|
|
<div class="echartss"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="currentTabBar1" v-if="currentTabBar == 1">
|
|
<AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="peopleCard">
|
|
<u-tabs :list="tabPeopleList" :is-scroll="false" :current="currentPeople" height="96" inactive-color="#000" active-color="#1365DD" @change="changePeople"></u-tabs>
|
|
|
|
<div class="seachObj">
|
|
<u-search v-model="keyword" :clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#E2E8F1" color="#666" height="58" @search="handerSearch" @clear="handerClear"></u-search>
|
|
</div>
|
|
|
|
<div class="datas" v-if="data.length > 0">
|
|
<div class="datass" v-for="(item, iindex) in data" :key="iindex" @click="toDetailCard(item)">
|
|
<div class="left">
|
|
<img :src="item.photo" alt="" v-if="item.photo" />
|
|
<img src="./components/img/4.png" alt="" v-else />
|
|
</div>
|
|
|
|
<div class="right">
|
|
<div class="rightTop">{{ item.name }}</div>
|
|
<div class="rightBottom">
|
|
<span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
|
|
|
|
<span>{{ item.phone }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<AiEmpty v-else></AiEmpty>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="currentTabBar2" v-if="currentTabBar == 2">
|
|
<AiTopFixed>
|
|
<u-search placeholder="请输入群名、群主名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page.current = 1), getList()" />
|
|
<AiCell>
|
|
<b slot="label" class="title">共<i v-html="page.total || 0" />个居民群</b>
|
|
</AiCell>
|
|
</AiTopFixed>
|
|
|
|
<div class="mainPane">
|
|
<AiCell v-for="(item, i) in list" :key="i" @click.native="toGroupList(item)">
|
|
<template #label>
|
|
<AiImage :src="item.avatar" preview />
|
|
</template>
|
|
<div class="card column start" flex>
|
|
<div flex class="groupName">
|
|
<b>{{ item.name || '群聊' }}</b>
|
|
<div class="personCount" v-if="item.personCount">({{ item.personCount }})</div>
|
|
</div>
|
|
<div class="owner" v-html="`群主：${item.ownerName}`" />
|
|
<div flex class="trends">
|
|
<div flex v-html="`今日入群：<em>${item.increase || 0}</em>`" />
|
|
<div flex v-html="`今日退群：<p>${item.decrease || 0}</p>`" />
|
|
</div>
|
|
</div>
|
|
</AiCell>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'AppResidentFile',
|
|
appName: '居民档案',
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
lists: [
|
|
{
|
|
iconPath: 'home',
|
|
selectedIconPath: 'home-fill',
|
|
text: '统计分析',
|
|
isDot: true,
|
|
customIcon: false,
|
|
},
|
|
{
|
|
iconPath: 'photo',
|
|
selectedIconPath: 'photo-fill',
|
|
text: '居民列表',
|
|
customIcon: false,
|
|
},
|
|
|
|
{
|
|
iconPath: 'play-right',
|
|
selectedIconPath: 'play-right-fill',
|
|
text: '居民群列表',
|
|
customIcon: false,
|
|
},
|
|
],
|
|
currentTabBar: 0,
|
|
currentTabs: 0,
|
|
tabList: [
|
|
{
|
|
name: '居民群统计',
|
|
},
|
|
{
|
|
name: '居民统计',
|
|
},
|
|
],
|
|
Echarts1: null,
|
|
Echarts2: null,
|
|
areaId: '',
|
|
currentPeople: 0,
|
|
tabPeopleList: [
|
|
{
|
|
name: '本地居民',
|
|
},
|
|
{
|
|
name: '流动人员',
|
|
},
|
|
],
|
|
current: 1,
|
|
keyword: '',
|
|
data: [],
|
|
page: { current: 1, size: 10, total: 0 },
|
|
search: { name: '' },
|
|
list: [],
|
|
weekList: [],
|
|
groupSum: '',
|
|
todayList1: [],
|
|
todayList2: [],
|
|
counts1: '',
|
|
counts2: '',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user', 'global']),
|
|
},
|
|
watch: {},
|
|
onLoad() {
|
|
this.getEchart1()
|
|
this.getEchart2()
|
|
this.areaId = this.user.areaId
|
|
},
|
|
mounted() {
|
|
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
|
},
|
|
methods: {
|
|
getList2() {
|
|
this.$http
|
|
.post('/app/wxcp/wxgroup/list', null, {
|
|
params: { ...this.page, ...this.search },
|
|
})
|
|
.then((res) => {
|
|
if (res?.data) {
|
|
let meta = res.data.records?.map((e) => ({
|
|
...e,
|
|
avatar: e?.avatar || this.$cdn + 'groupAvatar.png',
|
|
}))
|
|
if (this.page.current > 1) {
|
|
this.list = [...this.list, ...meta]
|
|
} else this.list = meta
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
|
|
reachBottom() {
|
|
if (this.page.total > this.list.length) {
|
|
this.page.current++
|
|
this.getList2()
|
|
}
|
|
},
|
|
|
|
toGroupList(item) {
|
|
uni.navigateTo({
|
|
url: `./GroupList?id=${item.id}`,
|
|
})
|
|
},
|
|
|
|
getList() {
|
|
this.$http
|
|
.post('/app/appresident/list', null, {
|
|
params: {
|
|
size: 10,
|
|
current: this.current,
|
|
areaId: this.areaId,
|
|
con: this.keyword,
|
|
residentType: this.currentPeople == 0 ? '0' : '1',
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
|
|
this.pages = res.data.pages
|
|
}
|
|
})
|
|
},
|
|
|
|
// 居民群统计
|
|
getEchart1() {
|
|
this.$http.post(`/app/wxcp/wxgroup/groupStatistic`).then((res) => {
|
|
if (res.code === 0) {
|
|
this.weekList = res.data.list
|
|
this.initEcharts1(this.weekList)
|
|
this.groupSum = res.data.groupSum
|
|
this.todayList1 = res.data.today
|
|
}
|
|
})
|
|
},
|
|
|
|
// 居民统计
|
|
getEchart2() {
|
|
this.$http.post(`/app/wxcp/wxcustomerlog/customerStatistic?areaId=${this.user.areaId}`).then((res) => {
|
|
if (res.code === 0) {
|
|
this.initEcharts2(res.data.list)
|
|
this.todayList2 = res.data.today
|
|
}
|
|
})
|
|
},
|
|
|
|
initEcharts1(data) {
|
|
var option = {
|
|
legend: {
|
|
data: ['群成员总数', '入群人数', '退群人数'],
|
|
y: 'bottom',
|
|
},
|
|
color: ['#4A86FD', '#32C5FF', '#FFAA44'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
grid: {
|
|
top: '9%',
|
|
left: '6%',
|
|
right: '8%',
|
|
bottom: '9%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: '#666' },
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#D8DDE6',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
lineStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#4A86FD',
|
|
},
|
|
},
|
|
},
|
|
color: '#4A86FD',
|
|
name: '群成员总数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: Object.values(data).map((e) => e.total),
|
|
},
|
|
{
|
|
lineStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#32C5FF',
|
|
},
|
|
},
|
|
},
|
|
color: '#32C5FF',
|
|
name: '入群人数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: Object.values(data).map((e) => e.increase),
|
|
},
|
|
{
|
|
lineStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#FFAA44',
|
|
},
|
|
},
|
|
},
|
|
color: '#FFAA44',
|
|
name: '退群人数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: Object.values(data).map((e) => e.decrease),
|
|
},
|
|
],
|
|
}
|
|
|
|
option && this.Echarts1.setOption(option)
|
|
},
|
|
|
|
initEcharts2(data) {
|
|
var options = {
|
|
legend: {
|
|
data: ['居民总数', '新增居民数', '流失居民数'],
|
|
y: 'bottom',
|
|
},
|
|
color: ['#4A86FD', '#32C5FF', '#FFAA44'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
grid: {
|
|
top: '9%',
|
|
left: '6%',
|
|
right: '8%',
|
|
bottom: '9%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
|
|
axisLine: {
|
|
lineStyle: { color: '#157EFF' },
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#D8DDE6',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
lineStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#4A86FD',
|
|
},
|
|
},
|
|
},
|
|
color: '#4A86FD',
|
|
name: '居民总数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: Object.values(data).map((e) => e.total),
|
|
},
|
|
{
|
|
lineStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#32C5FF',
|
|
},
|
|
},
|
|
},
|
|
color: '#32C5FF',
|
|
name: '新增居民数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: Object.values(data).map((e) => e.increase),
|
|
},
|
|
{
|
|
lineStyle: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: '#FFAA44',
|
|
},
|
|
},
|
|
},
|
|
color: '#FFAA44',
|
|
name: '流失居民数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: Object.values(data).map((e) => e.decrease),
|
|
},
|
|
],
|
|
}
|
|
|
|
options && this.Echarts2.setOption(options)
|
|
},
|
|
|
|
toDetailCard(item) {
|
|
uni.navigateTo({ url: `./DetailCard?id=${item.id}` })
|
|
},
|
|
|
|
areaSelect(e) {
|
|
this.areaId = e.id
|
|
this.getList()
|
|
},
|
|
|
|
handerSearch(e) {
|
|
this.keyword = e
|
|
this.current = 1
|
|
this.getList()
|
|
},
|
|
|
|
handerClear() {
|
|
this.keyword = ''
|
|
this.current = 1
|
|
this.getList()
|
|
},
|
|
|
|
changeTab(e) {
|
|
this.currentTabBar = e
|
|
if (this.currentTabBar == 0) {
|
|
this.getList()
|
|
this.$nextTick(() => {
|
|
if (this.currentTabs == 0) {
|
|
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
|
this.getEchart1()
|
|
}
|
|
if (this.currentTabs == 1) {
|
|
this.Echarts2 = echarts.init(document.getElementById('echarts2'))
|
|
this.getEchart2()
|
|
}
|
|
})
|
|
}
|
|
if (this.currentTabBar == 1) {
|
|
this.getList()
|
|
}
|
|
if (this.currentTabBar == 2) {
|
|
this.getList2()
|
|
}
|
|
},
|
|
|
|
change(index) {
|
|
this.currentTabs = index
|
|
this.$nextTick(() => {
|
|
if (index == 0) {
|
|
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
|
this.getEchart1()
|
|
} else {
|
|
this.Echarts2 = echarts.init(document.getElementById('echarts2'))
|
|
this.getEchart2()
|
|
}
|
|
})
|
|
},
|
|
|
|
changePeople(e) {
|
|
this.currentPeople = e
|
|
this.getList()
|
|
},
|
|
},
|
|
onReachBottom() {
|
|
this.current = this.current + 1
|
|
this.getList()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
uni-page-body {
|
|
height: 100%;
|
|
}
|
|
.AppResidentFile {
|
|
height: 100%;
|
|
.currentTabBar0 {
|
|
.peopleGroup,
|
|
.people {
|
|
.topcard {
|
|
position: relative;
|
|
background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 320px;
|
|
.cards {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
bottom: -35px;
|
|
width: 92%;
|
|
box-sizing: border-box;
|
|
margin: 0 32px;
|
|
height: 232px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
z-index: 999;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
.items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
span {
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
}
|
|
.items1 {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #354fc7;
|
|
}
|
|
.items2 {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #868686;
|
|
}
|
|
.items3 {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #5fba95;
|
|
}
|
|
.items4 {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #f09535;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.echartes {
|
|
margin-top: 64px;
|
|
padding-bottom: 20px;
|
|
height: 616px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
|
|
.echartss {
|
|
margin: 0 32px;
|
|
height: 100%;
|
|
padding-top: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.currentTabBar1 {
|
|
height: 100%;
|
|
background: #fff;
|
|
.AiAreaPicker {
|
|
padding: 16px 0 14px 12px;
|
|
}
|
|
|
|
.line {
|
|
height: 16px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.peopleCard {
|
|
background: #fff;
|
|
.seachObj {
|
|
border-bottom: 2px solid #f5f5f5;
|
|
border-top: 2px solid #f5f5f5;
|
|
padding: 20px 32px;
|
|
}
|
|
.datas {
|
|
.datass {
|
|
display: flex;
|
|
padding: 24px 32px;
|
|
.left {
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 32px;
|
|
width: 100%;
|
|
.rightTop {
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
.rightBottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.currentTabBar2 {
|
|
::v-deep .AiTopFixed {
|
|
b.title {
|
|
color: #333;
|
|
font-size: 32px;
|
|
|
|
& > i {
|
|
color: #267fce;
|
|
font-style: normal;
|
|
margin: 0 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .mainPane {
|
|
background: #fff;
|
|
padding: 0 32px;
|
|
|
|
.AiCell {
|
|
align-items: center;
|
|
height: 230px;
|
|
justify-content: flex-start;
|
|
|
|
.content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 100%;
|
|
max-width: unset;
|
|
border-bottom: 1px solid rgba(221, 221, 221, 1);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
height: 100%;
|
|
justify-content: center;
|
|
|
|
b {
|
|
font-size: 36px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tag {
|
|
justify-content: center;
|
|
background: #f3f4f7;
|
|
border-radius: 4px;
|
|
padding: 0 16px;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #333;
|
|
margin-left: 16px;
|
|
height: 56px;
|
|
}
|
|
|
|
.groupName {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.owner,
|
|
.trends {
|
|
margin-top: 8px;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #999;
|
|
}
|
|
|
|
.personCount {
|
|
flex-shrink: 0;
|
|
font-size: 30px;
|
|
font-weight: 400;
|
|
color: #666;
|
|
}
|
|
|
|
.trends {
|
|
* + * {
|
|
margin-left: 24px;
|
|
}
|
|
|
|
em {
|
|
font-style: normal;
|
|
color: #5fba95;
|
|
}
|
|
|
|
p {
|
|
color: #f09535;
|
|
}
|
|
}
|
|
}
|
|
|
|
.AiImage {
|
|
margin-right: 24px;
|
|
|
|
image {
|
|
width: 112px;
|
|
height: 112px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|