Browse Source

首页改版9.12

release
zhaoyongnian 5 years ago
parent
commit
0d33cfc039
  1. 128
      src/pages/index/index.scss
  2. 179
      src/pages/index/index.ts
  3. 35
      src/pages/index/index.wxml

128
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);

179
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();
},

35
src/pages/index/index.wxml

@ -22,18 +22,41 @@
</view>
</view>
</view>
<view class="counts">
<view class="count-item" bindtap="navigateToyt">
<image src="../../assets/images/issue_count.png" />
<view class="count-text">{{numberUtil.numberEnFormat(survey.issueTotal)}}</view>
<view class="title-text">议题数</view>
<view class="chat-class">
<ec-canvas id="mychart-dom-bar-a" canvas-id="mychart-bar-a" ec="{{ ec }}"></ec-canvas>
</view>
<view class="count-text-more">
<view class="count-text-item project-n-bg-color"></view>
<view class="title-text">未转项目</view>
<view class="count-text">{{numberUtil.numberEnFormat(survey.unpassedProject)}}</view>
</view>
<view class="count-text-more count-text-top2">
<view class="count-text-item project-y-bg-color"></view>
<view class="title-text">已转项目</view>
<view class="count-text">{{numberUtil.numberEnFormat(survey.passedProject)}}</view>
</view>
</view>
<view class="count-item" bindtap="navigateToUserNum">
<image src="../../assets/images/user_count.png" />
<view class="count-text">{{numberUtil.numberEnFormat(allSituation.userTotal)}}</view>
<view class="title-text">用户数</view>
<view class="chat-class">
<ec-canvas id="mychart-dom-bar-b" canvas-id="mychart-bar-b" ec="{{ ec }}"></ec-canvas>
</view>
<view class="count-text-more">
<view class="count-text-item part-bg-color"></view>
<view class="title-text">党员</view>
<view class="count-text">{{numberUtil.numberEnFormat(allSituation.partyNumber)}}</view>
</view>
<view class="count-text-more count-text-top2">
<view class="count-text-item resident-bg-color"></view>
<view class="title-text">居民</view>
<view class="count-text">{{numberUtil.numberEnFormat(allSituation.userNumber)}}</view>
</view>
</view>
</view>
<view class="sudokus">
<view class="sudoku" wx:for="{{indexPanel}}" wx:for-index="rowIndex" wx:for-item="rowItem" wx:key="rowIndex">
<view class="content-title">{{rowItem.mainLabel}}</view>

Loading…
Cancel
Save