持续集成分支
This commit is contained in:
aixianling
343
library/project/saas/AppHome/components/Home.vue
Normal file
343
library/project/saas/AppHome/components/Home.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<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.label }}</p>
|
||||
<div>{{ item.value || 0}}</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: [],
|
||||
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
|
||||
for(var i in res.data) {
|
||||
if(i != '加入天数' && i != '网格员类型') {
|
||||
this.tabStatistics.push({label: i, value: res.data[i]})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user