From 0d33cfc03961fdb5ecc74bb6026a9023748d7846 Mon Sep 17 00:00:00 2001
From: zhaoyongnian <541231643@qq.com>
Date: Sat, 12 Sep 2020 11:33:30 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=94=B9=E7=89=889.12?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/index/index.scss | 128 ++++++++++++++++++--------
src/pages/index/index.ts | 179 +++++++++++++++++++++++++------------
src/pages/index/index.wxml | 35 ++++++--
3 files changed, 242 insertions(+), 100 deletions(-)
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 32a5066..833acda 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -203,6 +203,7 @@ page {
.page-body {
margin-top: 10rpx;
background: #f8f8f8;
+ height: 312rpx;
.page-section {
width: 100%;
margin-bottom: 60rpx;
@@ -220,6 +221,7 @@ page {
.page-section-spacing {
box-sizing: border-box;
+ height: 312rpx;
}
.page-section-gap {
@@ -242,13 +244,13 @@ page {
}
swiper {
- height: 332rpx;
+ height: 312rpx;
.swiper-item {
display: block;
- height: 332rpx;
+ height: 312rpx;
.banner {
overflow: hidden;
- height: 332rpx;
+ height: 312rpx;
display: flex;
width: 100%;
}
@@ -258,18 +260,20 @@ swiper {
.dots {
display: flex;
justify-content: center;
+ position: relative;
+ margin-top: -42rpx;
.dot {
width: 8rpx;
height: 8rpx;
border-radius: 8rpx;
margin-left: 10rpx;
- background: #d2d5da;
+ background: #DCDCDC;
transition: all 0.3s;
}
}
.dots .dot.active {
width: 24rpx;
- background: #29b9a5;
+ background: #FFFFFF;
}
/* 议题数和用户数面板 */
@font-face {
@@ -282,45 +286,97 @@ swiper {
flex-direction: row;
align-items: center;
justify-content: space-between;
- height: 190rpx;
- background-color: #fff;
- border-top-left-radius: 28rpx;
- border-top-right-radius: 28rpx;
+ height: 378rpx;
+ // background-color: #fff;
+ border-radius: 28rpx;
margin-top: -28rpx;
- padding: 0 28rpx;
+ width: calc(100% - 40rpx);
+ margin-left: 20rpx;
+ // padding: 0 28rpx;
.count-item {
position: relative;
- width: 342rpx;
- height: 140rpx;
-
- image {
- width: 100%;
- height: 100%;
+ width: calc(50% - 9rpx);
+ height: 378rpx;
+ background: #FFFFFF;
+ border-radius: 28rpx;
+ display: flex;
+ justify-content: center;
+ .chat-class{
+ width: 199rpx;
+ height: 199rpx;
position: absolute;
+ margin-top: 38rpx;
}
- .count-text {
+ .count-text-more {
position: absolute;
z-index: 999;
- color:#fff;
- font-family: 'Impact Number';
- font-size: 48rpx;
- font-weight: 400;
- margin-left: 42rpx;
- margin-top: 25rpx;
- height: 48rpx;
- line-height: 54rpx;
- letter-spacing: 4rpx;
+ height: 26rpx;
+ display: flex;
+ align-items: center;
+ margin-top: 272rpx;
+ .count-text-item{
+ width: 12rpx;
+ height: 12rpx;
+ border-radius: 50%;
+ }
+ .project-n-bg-color{
+ background: #3B85E7;
+ }
+ .project-y-bg-color{
+ background: #5EC095;
+ }
+ .part-bg-color{
+ background: #E84D4B;
+ }
+ .resident-bg-color{
+ background: #FFBC29;
+ }
+ .title-text{
+ font-size: 26rpx;
+ font-weight: 400;
+ color: #666666;
+ line-height: 26rpx;
+ margin-left: 10rpx;
+ }
+ .count-text{
+ font-size: 26rpx;
+ line-height: 26rpx;
+ font-weight: bold;
+ color: #3F3F3F;
+ margin-left: 30rpx;
+ }
}
- .title-text {
- position: absolute;
- z-index: 999;
- color: #fff;
- font-family: PingFang SC;
- font-size: 26rpx;
- font-weight: 400;
- left: 42rpx;
- bottom: 30rpx;
+ .count-text-top2{
+ margin-top: 315rpx;
}
+ // image {
+ // width: 100%;
+ // height: 100%;
+ // position: absolute;
+ // }
+ // .count-text {
+ // position: absolute;
+ // z-index: 999;
+ // color:#fff;
+ // font-family: 'Impact Number';
+ // font-size: 48rpx;
+ // font-weight: 400;
+ // margin-left: 42rpx;
+ // margin-top: 25rpx;
+ // height: 48rpx;
+ // line-height: 54rpx;
+ // letter-spacing: 4rpx;
+ // }
+ // .title-text {
+ // position: absolute;
+ // z-index: 999;
+ // color: #fff;
+ // font-family: PingFang SC;
+ // font-size: 26rpx;
+ // font-weight: 400;
+ // left: 42rpx;
+ // bottom: 30rpx;
+ // }
}
}
@@ -328,7 +384,7 @@ swiper {
.sudoku {
width: 100%;
box-sizing: border-box;
- margin-top: 10rpx;
+ margin-top: 19rpx;
.content-title {
background-color: #fff;
color: rgba(51,51,51,1);
diff --git a/src/pages/index/index.ts b/src/pages/index/index.ts
index 2413ba8..5bd363a 100644
--- a/src/pages/index/index.ts
+++ b/src/pages/index/index.ts
@@ -1,43 +1,56 @@
import { bannerList, getAllSituation, getSurvey, getToken, getIndexPanelV2 } from '../../api/index'
import { checkUpdateAvatar, updateAvatar } from '../../api/clerkOnline'
import { logout } from '../../api/setUp'
-// import * as echarts from '../../components/ec-canvas/echarts.js'
+// @ts-ignore
+import * as echarts from '../../components/ec-canvas/echarts.js'
-// function setOption(chart: any, chartData: AnyArray, color: AnyArray) {
-// const option = {
-// color: color,
-// series: [
-// {
-// type: 'pie',
-// radius: ['70%', '95%'],
-// silent: true,
-// avoidLabelOverlap: false,
-// label: {
-// show: false
-// },
-// labelLine: {
-// show: false,
-// normal: {
-// show: false
-// }
-// },
-// itemStyle: {
-// borderColor: '#fff',
-// borderWidth: '2',
-// },
-// data: chartData
-// }
-// ]
-// }
-// chart.setOption(option)
-// }
+function setOption(chart: any, chartData: AnyArray, color: AnyArray , Total:Object) {
+ const option = {
+ color: color,
+ title: {
+ // @ts-ignore
+ text: Total.issueTotal ? Total.issueTotal : Total.userTotal,
+ left: "center",
+ top: 'center',
+ textStyle: {
+ color: "#333333",
+ fontSize: 15,
+ align: "center",
+ fontWeight: '800'
+ }
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['70%', '95%'],
+ silent: true,
+ avoidLabelOverlap: false,
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false,
+ normal: {
+ show: false
+ }
+ },
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: '2',
+ },
+ data: chartData
+ }
+ ]
+ }
+ chart.setOption(option)
+}
Page({
data: {
indexPanel: [],
banner: [],
indicatorDots: false,//指示点
- autoplay: false,//true,//自动播放
- circular: false,//衔接滑动
+ autoplay: true,//true,//自动播放
+ circular: true,//衔接滑动
interval: 2000, //自动播放间隔时长(ms)
duration: 500,//幻灯片切换时长(ms)
currentSwiper: 0,
@@ -77,7 +90,9 @@ Page({
await this.getBannerList()
await this.getAllSituation()
await this.getSurvey()
+ // @ts-ignore
this.ecComponentA = this.selectComponent('#mychart-dom-bar-a')
+ // @ts-ignore
this.ecComponentB = this.selectComponent('#mychart-dom-bar-b')
},
/**
@@ -307,11 +322,33 @@ Page({
deptId: ''//wx.getStorageSync('childrenID')
}
getAllSituation(params).then((res: any) => {
- // (res.data.list.unpassedProject / 10000).toFixed(2)
that.setData({
- allSituation: res.data
+ allSituation: res.data,
+ chartDataB: [
+ {
+ // @ts-ignore
+ value: res.data.partyNumber,
+ // @ts-ignore
+ name: '党员总数'
+ },
+ {
+ // @ts-ignore
+ value: res.data.userNumber,
+ // @ts-ignore
+ name: '居民总数'
+ }
+ ],
+ // @ts-ignore
+ colorB: ['#E84D4B', '#FFBC29']
})
+ that.init_b()
})
+ // getAllSituation(params).then((res: any) => {
+ // // (res.data.list.unpassedProject / 10000).toFixed(2)
+ // that.setData({
+ // allSituation: res.data
+ // })
+ // })
},
//数据分析小程序首页接口-议题接口
@@ -320,13 +357,35 @@ Page({
let params = {
deptId: ''//wx.getStorageSync('childrenID')
}
- // issueTotal: 0,//议题总数
- // unpassedProject: 0,//未转项目
- // passedProject: 0,//已转项目
getSurvey(params).then((res: any) => {
that.setData({
survey: res.data.list,
+ chartDataA: [
+ {
+ // @ts-ignore
+ value: res.data.list.unpassedProject,
+ // @ts-ignore
+ name: '未转项目'
+ },
+ {
+ // @ts-ignore
+ value: res.data.list.passedProject,
+ // @ts-ignore
+ name: '已转项目'
+ }
+ ],
+ // @ts-ignore
+ colorA: ['#3B85E7', '#5EC095']
})
+ that.init_a()
+ })
+ // issueTotal: 0,//议题总数
+ // unpassedProject: 0,//未转项目
+ // passedProject: 0,//已转项目
+ // getSurvey(params).then((res: any) => {
+ // that.setData({
+ // survey: res.data.list,
+ // })
// if (that.data.survey.issueTotal > 9999) {
// that.setData({
@@ -351,31 +410,32 @@ Page({
// }
// })
// };
- })
+ // })
},
- // init_a() {
- // // @ts-ignore
- // this.ecComponentA.init((canvas: any, width: any, height: any) => {
- // const chart = echarts.init(canvas, null, {
- // width: width,
- // height: height
- // })
- // setOption(chart, this.data.chartDataA, this.data.colorA)
- // return chart
- // })
- // },
+ init_a() {
+ // @ts-ignore
+ this.ecComponentA.init((canvas: any, width: any, height: any) => {
+ const chart = echarts.init(canvas, null, {
+ width: width,
+ height: height
+ })
+ setOption(chart, this.data.chartDataA, this.data.colorA, this.data.survey)
+ return chart
+ })
+ },
- // init_b() {
- // this.ecComponentB.init((canvas: any, width: any, height: any) => {
- // const chart = echarts.init(canvas, null, {
- // width: width,
- // height: height
- // })
- // setOption(chart, this.data.chartDataB, this.data.colorB)
- // return chart
- // })
- // },
+ init_b() {
+ // @ts-ignore
+ this.ecComponentB.init((canvas: any, width: any, height: any) => {
+ const chart = echarts.init(canvas, null, {
+ width: width,
+ height: height
+ })
+ setOption(chart, this.data.chartDataB, this.data.colorB, this.data.allSituation)
+ return chart
+ })
+ },
// 判断登录
refreshToken() {
@@ -384,6 +444,7 @@ Page({
success(res) {
let wxCode = res.code
if (wxCode) {
+ // @ts-ignore
getToken(wxCode).then(function (res: { data: { registerState: string; token: any; userTagKey: any; deptDataScopeList: any } }) {
if (res.data.registerState == '0') {
wx.redirectTo({
@@ -411,7 +472,9 @@ Page({
await this.getBannerList()
await this.getAllSituation()
await this.getSurvey()
+ // @ts-ignore
this.ecComponentA = this.selectComponent('#mychart-dom-bar-a')
+ // @ts-ignore
this.ecComponentB = this.selectComponent('#mychart-dom-bar-b')
wx.stopPullDownRefresh();
},
diff --git a/src/pages/index/index.wxml b/src/pages/index/index.wxml
index 5aadd45..9b8c733 100644
--- a/src/pages/index/index.wxml
+++ b/src/pages/index/index.wxml
@@ -22,18 +22,41 @@
+
-
- {{numberUtil.numberEnFormat(survey.issueTotal)}}
- 议题数
+
+
+
+
+
+ 未转项目
+ {{numberUtil.numberEnFormat(survey.unpassedProject)}}
+
+
+
+ 已转项目
+ {{numberUtil.numberEnFormat(survey.passedProject)}}
+
-
- {{numberUtil.numberEnFormat(allSituation.userTotal)}}
- 用户数
+
+
+
+
+
+ 党员
+ {{numberUtil.numberEnFormat(allSituation.partyNumber)}}
+
+
+
+ 居民
+ {{numberUtil.numberEnFormat(allSituation.userNumber)}}
+
+
+
{{rowItem.mainLabel}}