kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

慧治理 首页迁移

Browse Source
This commit is contained in:
liuye
2022-09-05 15:00:18 +08:00
parent c8c32327c9
commit 3084a295d4
47 changed files with 1162 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/project/huizhili/AppHome/components/App.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<div class="App">
<div class="content">
<div class="app-list">
<div class="title">网格管理</div>
<div class="item" v-for="(item, index) in gridAppList" :key="index" @click="linkTo(item.linkUrl)">
<img :src="item.img" alt="">
<p>{{ item.title }}</p>
</div>
</div>
<div class="app-list">
<div class="title">日常办公</div>
<div class="item" v-for="(item, index) in officeAppList" :key="index" @click="linkTo(item.linkUrl)">
<img :src="item.img" alt="">
<p>{{ item.title }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
gridAppList: [
{
img: require('../img/app/app-jmda-icon.png'),
title: '居民档案',
linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
},
{
img: require('../img/app/app-wggl-icon.png'),
title: '网格管理',
linkUrl: '/apps/AppGridManagement/AppGridManagement'
},
{
img: require('../img/app/app-tsrq-icon.png'),
title: '特殊人群',
linkUrl: '/apps/AppSpecialGroups/AppSpecialGroups'
},
{
img: require('../img/app/app-rfdt-icon.png'),
title: '人房地图',
linkUrl: '/apps/AppBuilding/AppBuilding'
}
],
officeAppList: [
{
img: require('../img/app/app-mdtj-icon.png'),
title: '矛盾调解',
linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
},
{
img: require('../img/app/app-zfww-icon.png'),
title: '走访慰问',
linkUrl: '/apps/AppWalkask/AppWalkask'
},
{
img: require('../img/app/app-swjl-icon.png'),
title: '事务记录',
linkUrl: '/apps/AppInterview/AppInterview'
},
{
img: require('../img/home/home-xtxf-icon.png'),
title: '协同宣发',
linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
},
{
img: require('../img/app/app-xftj-icon.png'),
title: '宣发统计',
linkUrl: '/apps/AppPropagandaStatistics/AppPropagandaStatistics'
},
{
img: require('../img/app/app-tzgg-icon.png'),
title: '通知公告',
linkUrl: '/apps/AppNotification/AppNotification'
},
{
img: require('../img/app/app-wgyjf-icon.png'),
title: '网格员积分',
linkUrl: './GridMemberPoints'
},
]
}
},
methods: {
linkTo(url) {
uni.navigateTo({ url })
}
},
created() {
},
}
</script>
<style lang="scss" scoped>
.App {
.content {
padding: 32px 32px 0;
.app-list {
width: 100%;
background: #FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
border-radius: 8px;
margin-bottom: 32px;
.title {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
padding: 24px 0 8px 32px;
}
.item {
display: inline-block;
width: 25%;
text-align: center;
padding: 24px 0;
img {
width: 72px;
height: 72px;
margin-bottom: 8px;
}
p {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 36px;
}
}
}
}
}
</style>

105
src/project/huizhili/AppHome/components/Grid.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div class="Grid">
<div class="banner-img">
<img src="../img/grid/grid-banner.png" alt="">
</div>
<div class="content">
<div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.linkUrl)">
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.text }}</div>
<img :src="item.img" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
name: "Grid",
data() {
return {
appList: [
{
img: require('../img/grid/grid-jmda.png'),
title: '居民档案',
text: '辖区居民信息全览',
linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
},
{
img: require('../img/grid/grid-tsrq.png'),
title: '特殊人群',
text: '特殊居民标签化管理',
linkUrl: '/apps/AppSpecialGroups/AppSpecialGroups'
},
{
img: require('../img/grid/grid-wggl.png'),
title: '网格管理',
text: '基层网格化精细治理',
linkUrl: '/apps/AppGridManagement/AppGridManagement'
},
{
img: require('../img/grid/grid-rfdt.png'),
title: '人房地图',
text: '图属结合更直观',
linkUrl: '/apps/AppBuilding/AppBuilding'
}
]
}
},
methods: {
linkTo(url) {
uni.navigateTo({ url })
}
},
created() {
},
}
</script>
<style lang="scss" scoped>
.Grid {
.banner-img {
padding: 32px 32px 16px;
img {
width: 100%;
// height: 240px;
}
}
.content {
padding-left: 32px;
.item {
display: inline-block;
width: calc(50% - 32px);
margin: 0 32px 32px 0;
padding: 40px 0 0 40px;
position: relative;
height: 384px;
background-color: #fff;
box-sizing: border-box;
border-radius: 8px;
.title {
font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 50px;
}
.text {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ABB5C4;
line-height: 36px;
}
img {
width: 208px;
height: 208px;
position: absolute;
bottom: 0;
right: 0;
}
}
}
}
</style>

343
src/project/huizhili/AppHome/components/Home.vue Normal file
View 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>

151
src/project/huizhili/AppHome/components/My.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<div class="My">
<div class="content">
<div class="user-info">
<img src="../img/my/my-bg-user.png" alt="" class="bg-img">
<div class="top">
<div>
<AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId"></AiOpenData>
</div>
<img :src="user.avatar" alt="" v-if="user.avatar">
<img src="../img/user-icon.png" alt="" v-else>
</div>
<div class="bottom">{{ user.corpName }}</div>
</div>
<div class="link" v-for="(item, index) in linkList" :key="index" @click="linkTo(item.linkUrl)">
<div class="left">
<img :src="item.img" alt="">{{ item.title }}
</div>
<img src="../img/right-icon-999.png" alt="" class="right-icon">
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
name: "My",
data() {
return {
linkList: [
{
title: '头像上传',
img: require('../img/my/my-txsc.png'),
linkUrl: './UploadPhoto'
},
{
title: '意见反馈',
img: require('../img/my/my-yjfk.png'),
linkUrl: './FeedBack'
},
{
title: '联系我们',
img: require('../img/my/my-lxwm.png'),
linkUrl: 'contact'
},
{
title: '帮助文档',
img: require('../img/my/my-bzwd.png'),
linkUrl: './HelpDocs'
}
]
}
},
computed: { ...mapState(['user']) },
methods: {
...mapActions(['wxInvoke', 'injectJWeixin']),
linkTo(url) {
if(url == 'contact') { //联系我们
this.wxInvoke(["openThirdAppServiceChat", {}, res => {
if (res.err_msg == "openThirdAppServiceChat:fail") {
window.open("https://work.weixin.qq.com/kfid/kfcc23927b18d1ad4f4")
}
}])
}else {
console.log(url)
uni.navigateTo({ url })
}
}
},
created() {
this.injectJWeixin('openThirdAppServiceChat')
},
}
</script>
<style lang="scss" scoped>
.My {
.content {
padding: 32px 32px 0;
.user-info{
width: 100%;
height: 248px;
border-radius: 8px;
background-color: #fff;
position: relative;
margin-bottom: 32px;
.bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.top {
display: flex;
justify-content: space-between;
padding: 28px 32px 36px;
border-bottom: 1px solid #eee;
div {
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 96px;
}
img {
width: 96px;
height: 96px;
border-radius: 50%;
border: 1px solid #DDD;
}
}
.bottom {
padding: 24px 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
line-height: 40px;
}
}
.link {
display: flex;
justify-content: space-between;
padding: 32px;
background-color: #fff;
border-radius: 8px;
margin-bottom: 24px;
.left {
font-size: 30px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 42px;
img {
width: 48px;
height: 48px;
margin-right: 16px;
vertical-align: middle;
}
}
.right-icon {
width: 40px;
height: 40px;
}
}
}
}
</style>