居民档案
This commit is contained in:
花有清香月有阴
338
src/apps/AppResidentFile/AppResidentFile.vue
Normal file
338
src/apps/AppResidentFile/AppResidentFile.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<div class="AppResidentFile">
|
||||
<u-tabbar v-model="currentTabBar" :list="list" @change="changeTab" style="height: 0"></u-tabbar>
|
||||
|
||||
<div 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">1</span>
|
||||
<span>群聊人数</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items2">1</span>
|
||||
<span>群成员总数</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items3">1</span>
|
||||
<span>今日入群</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items4">1</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">1</span>
|
||||
<span>群聊人数</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items2">1</span>
|
||||
<span>群成员总数</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items3">1</span>
|
||||
<span>今日入群</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items4">1</span>
|
||||
<span>今日退群</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="echartes" id="echarts2">
|
||||
<div class="echartss"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentTabBar == 1">1</div>
|
||||
|
||||
<div v-if="currentTabBar == 2">2</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppResidentFile',
|
||||
appName: '居民档案',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
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,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user', 'global']),
|
||||
},
|
||||
watch: {},
|
||||
onLoad() {
|
||||
this.getEchart()
|
||||
},
|
||||
mounted() {
|
||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||
},
|
||||
methods: {
|
||||
getEchart() {
|
||||
this.$http.post(`/app/appresident/queryCustInfoByAreaId?areaId=${this.user.areaId}`).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.initEcharts1(res.data['年龄层次'])
|
||||
this.initEcharts2(res.data['人口分布'])
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
initEcharts1(data) {
|
||||
var option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map((v) => v.v1),
|
||||
axisLine: {
|
||||
lineStyle: { color: '#157EFF' },
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
interval: 'auto',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D8DDE6',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: '#0072FF',
|
||||
barWidth: 30,
|
||||
data: data.map((v) => v.v2),
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
option && this.Echarts1.setOption(option)
|
||||
},
|
||||
|
||||
initEcharts2(data) {
|
||||
var options = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map((v) => v.name),
|
||||
axisLine: {
|
||||
lineStyle: { color: '#157EFF' },
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
interval: 'auto',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D8DDE6',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: '#0072FF',
|
||||
barWidth: 30,
|
||||
data: data.map((v) => v.v1),
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
options && this.Echarts2.setOption(options)
|
||||
},
|
||||
|
||||
changeTab(e) {
|
||||
this.currentTabBar = e
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentTabs = index
|
||||
this.$nextTick(() => {
|
||||
if (index == 0) {
|
||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||
} else {
|
||||
this.Echarts2 = echarts.init(document.getElementById('echarts2'))
|
||||
}
|
||||
this.getEchart()
|
||||
})
|
||||
|
||||
// this.getList()
|
||||
// this.getEchart()
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
// this.current = this.current + 1
|
||||
// this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.AppResidentFile {
|
||||
height: 100%;
|
||||
.peopleGroup,
|
||||
.people {
|
||||
.topcard {
|
||||
position: relative;
|
||||
background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
|
||||
// background: url(http://respub.sinoecare.net/20211221/44-20211221095613.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;
|
||||
height: 616px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
.echartss {
|
||||
margin: 0 32px;
|
||||
height: 100%;
|
||||
padding-top: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user