356 lines
8.8 KiB
Vue
356 lines
8.8 KiB
Vue
<template>
|
||
<div class="Home">
|
||
<div @click="linkTo('./HelpDocs')">
|
||
<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
|
||
</div>
|
||
<!-- <div class="tips">
|
||
<img src="../img/home/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
|
||
</div> -->
|
||
<div class="content">
|
||
<div class="user-info">
|
||
<div class="left">
|
||
<img :src="user.avatar" alt="" v-if="user.avatar">
|
||
<img src="../img/user-icon.png" alt="" v-else>
|
||
</div>
|
||
<div class="right">
|
||
<p class="name">你好，<AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId"></AiOpenData></p>
|
||
<p class="time">您已加入慧政务 <span>{{ girdInfo['加入天数'] }}</span>天</p>
|
||
</div>
|
||
</div>
|
||
<div class="app-list">
|
||
<div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.linkUrl)">
|
||
<img :src="item.img" alt="">
|
||
<p>{{ item.title }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="title">数据统计</div>
|
||
<div class="tab-content">
|
||
<div class="item" v-for="(item, index) in tabStatistics" :key="index">
|
||
<p><span></span>{{ item.title }}</p>
|
||
<div>{{ girdInfo[item.key] }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="title">消息发送情况</div>
|
||
<div class="chart-content" id="statistic"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
import echarts from 'echarts'
|
||
export default {
|
||
name: "Home",
|
||
data() {
|
||
return {
|
||
appList: [
|
||
{
|
||
img: require('../img/home/home-jmgl-icon.png'),
|
||
title: '居民档案',
|
||
linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
|
||
},
|
||
{
|
||
img: require('../img/home/home-zfww-icon.png'),
|
||
title: '走访慰问',
|
||
linkUrl: '/apps/AppWalkask/AppWalkask'
|
||
},
|
||
{
|
||
img: require('../img/home/home-mdtj-icon.png'),
|
||
title: '矛盾调解',
|
||
linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
|
||
},
|
||
{
|
||
img: require('../img/home/home-xtxf-icon.png'),
|
||
title: '协同宣发',
|
||
linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
|
||
}
|
||
],
|
||
tabStatistics: [
|
||
{
|
||
title: '网格数',
|
||
key: '网格数'
|
||
},
|
||
{
|
||
title: '网格员数',
|
||
key: '网格员'
|
||
},
|
||
{
|
||
title: '辖区户数',
|
||
key: '辖区户数'
|
||
},
|
||
{
|
||
title: '居民群数',
|
||
key: '居民群'
|
||
}
|
||
],
|
||
echartData: null,
|
||
list: ['慧政务改版上线了，点此查看帮助文档！'],
|
||
girdInfo: {}
|
||
}
|
||
},
|
||
computed: { ...mapState(['user']) },
|
||
methods: {
|
||
chartInit() {
|
||
this.echartData = echarts.init(document.getElementById('statistic'))
|
||
var option = {
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#E1E5EF', //x轴的颜色
|
||
width: 1, //轴线的宽度
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#666',
|
||
},
|
||
},
|
||
data: ['4月', '5月', '6月', '7月', '8月',]
|
||
},
|
||
yAxis: {
|
||
axisLine:{ //y轴
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#666',
|
||
},
|
||
},
|
||
type: 'value',
|
||
minInterval: 50,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
series: [
|
||
{
|
||
data: [155, 130, 120, 160, 120, 130, 110],
|
||
type: 'line',
|
||
areaStyle: {//覆盖区域的渐变色
|
||
normal: {
|
||
color: {
|
||
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
},
|
||
}
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#2891FF'
|
||
}
|
||
},
|
||
itemStyle : {
|
||
normal : {
|
||
color:'#2891FF',
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
this.echartData.setOption(option)
|
||
},
|
||
linkTo(url) {
|
||
console.log(url)
|
||
uni.navigateTo({ url })
|
||
},
|
||
getGirdInfo() {
|
||
this.$http.post(`/app/appgirdmemberinfo/girdMemberOrNotStatistic`).then(res => {
|
||
if (res.code == 0) {
|
||
this.girdInfo = res.data
|
||
}
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.getGirdInfo()
|
||
this.$nextTick(() => {
|
||
this.chartInit()
|
||
})
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.Home {
|
||
.tips {
|
||
padding: 24px 32px;
|
||
background-color: #3975C6;
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #FFF;
|
||
line-height: 40px;
|
||
img {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-right: 16px;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.content {
|
||
padding: 0 32px;
|
||
.user-info {
|
||
display: flex;
|
||
padding: 48px 0 32px 0;
|
||
.left {
|
||
width: 96px;
|
||
height: 96px;
|
||
margin-right: 32px;
|
||
img {
|
||
width: 96px;
|
||
height: 96px;
|
||
border-radius: 50%;
|
||
border: 4px solid #FFFFFF;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.right {
|
||
width: calc(100% - 128px);
|
||
margin-top: 6px;
|
||
.name {
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #333;
|
||
line-height: 44px;
|
||
}
|
||
.time {
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #999;
|
||
line-height: 40px;
|
||
span {
|
||
color: #3975C6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.app-list {
|
||
width: 100%;
|
||
background: #FFF;
|
||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
.item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 24px 0;
|
||
img {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin-bottom: 8px;
|
||
}
|
||
p {
|
||
font-size: 26px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #333;
|
||
line-height: 36px;
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
padding: 48px 0 24px 0;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333;
|
||
line-height: 44px;
|
||
}
|
||
.tab-content {
|
||
.item {
|
||
display: inline-block;
|
||
width: calc(50% - 8px);
|
||
height: 160px;
|
||
background: #FFF;
|
||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 16px;
|
||
p {
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666;
|
||
line-height: 40px;
|
||
margin-bottom: 8px;
|
||
span {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
border: 4px solid #3975C6;
|
||
margin-right: 8px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
div{
|
||
font-size: 48px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333;
|
||
line-height: 64px;
|
||
padding-left: 24px;
|
||
}
|
||
|
||
}
|
||
.item:nth-of-type(2n-1) {
|
||
margin-right: 14px;
|
||
}
|
||
.item:nth-last-of-type(1) {
|
||
p {
|
||
span {
|
||
border-color: #3ACEB3;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.chart-content{
|
||
width: 100%;
|
||
height: 514px;
|
||
background: #FFF;
|
||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
|
||
border-radius: 8px;
|
||
margin-bottom: 82px;
|
||
}
|
||
}
|
||
::v-deep .u-type-warning-light-bg {
|
||
padding: 20px 32px!important;
|
||
background-color: #3975C6!important;
|
||
}
|
||
::v-deep .u-icon__icon--warning {
|
||
color: #D7E3F3;
|
||
width: 32px;
|
||
height: 32px;
|
||
font-size: 0px!important;
|
||
background-image: url('../img/home/tips-icon.png');
|
||
background-size: 100%;
|
||
}
|
||
::v-deep .u-type-warning {
|
||
color: #fff;
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
</style>
|