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 { .page-body {
margin-top: 10rpx; margin-top: 10rpx;
background: #f8f8f8; background: #f8f8f8;
height: 312rpx;
.page-section { .page-section {
width: 100%; width: 100%;
margin-bottom: 60rpx; margin-bottom: 60rpx;
@ -220,6 +221,7 @@ page {
.page-section-spacing { .page-section-spacing {
box-sizing: border-box; box-sizing: border-box;
height: 312rpx;
} }
.page-section-gap { .page-section-gap {
@ -242,13 +244,13 @@ page {
} }
swiper { swiper {
height: 332rpx; height: 312rpx;
.swiper-item { .swiper-item {
display: block; display: block;
height: 332rpx; height: 312rpx;
.banner { .banner {
overflow: hidden; overflow: hidden;
height: 332rpx; height: 312rpx;
display: flex; display: flex;
width: 100%; width: 100%;
} }
@ -258,18 +260,20 @@ swiper {
.dots { .dots {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative;
margin-top: -42rpx;
.dot { .dot {
width: 8rpx; width: 8rpx;
height: 8rpx; height: 8rpx;
border-radius: 8rpx; border-radius: 8rpx;
margin-left: 10rpx; margin-left: 10rpx;
background: #d2d5da; background: #DCDCDC;
transition: all 0.3s; transition: all 0.3s;
} }
} }
.dots .dot.active { .dots .dot.active {
width: 24rpx; width: 24rpx;
background: #29b9a5; background: #FFFFFF;
} }
/* 议题数和用户数面板 */ /* 议题数和用户数面板 */
@font-face { @font-face {
@ -282,45 +286,97 @@ swiper {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 190rpx; height: 378rpx;
background-color: #fff; // background-color: #fff;
border-top-left-radius: 28rpx; border-radius: 28rpx;
border-top-right-radius: 28rpx;
margin-top: -28rpx; margin-top: -28rpx;
padding: 0 28rpx; width: calc(100% - 40rpx);
margin-left: 20rpx;
// padding: 0 28rpx;
.count-item { .count-item {
position: relative; position: relative;
width: 342rpx; width: calc(50% - 9rpx);
height: 140rpx; height: 378rpx;
background: #FFFFFF;
image { border-radius: 28rpx;
width: 100%; display: flex;
height: 100%; justify-content: center;
.chat-class{
width: 199rpx;
height: 199rpx;
position: absolute; position: absolute;
margin-top: 38rpx;
} }
.count-text { .count-text-more {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
color:#fff; height: 26rpx;
font-family: 'Impact Number'; display: flex;
font-size: 48rpx; align-items: center;
font-weight: 400; margin-top: 272rpx;
margin-left: 42rpx; .count-text-item{
margin-top: 25rpx; width: 12rpx;
height: 48rpx; height: 12rpx;
line-height: 54rpx; border-radius: 50%;
letter-spacing: 4rpx; }
.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 { .count-text-top2{
position: absolute; margin-top: 315rpx;
z-index: 999;
color: #fff;
font-family: PingFang SC;
font-size: 26rpx;
font-weight: 400;
left: 42rpx;
bottom: 30rpx;
} }
// 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 { .sudoku {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-top: 10rpx; margin-top: 19rpx;
.content-title { .content-title {
background-color: #fff; background-color: #fff;
color: rgba(51,51,51,1); 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 { bannerList, getAllSituation, getSurvey, getToken, getIndexPanelV2 } from '../../api/index'
import { checkUpdateAvatar, updateAvatar } from '../../api/clerkOnline' import { checkUpdateAvatar, updateAvatar } from '../../api/clerkOnline'
import { logout } from '../../api/setUp' 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) { function setOption(chart: any, chartData: AnyArray, color: AnyArray , Total:Object) {
// const option = { const option = {
// color: color, color: color,
// series: [ title: {
// { // @ts-ignore
// type: 'pie', text: Total.issueTotal ? Total.issueTotal : Total.userTotal,
// radius: ['70%', '95%'], left: "center",
// silent: true, top: 'center',
// avoidLabelOverlap: false, textStyle: {
// label: { color: "#333333",
// show: false fontSize: 15,
// }, align: "center",
// labelLine: { fontWeight: '800'
// show: false, }
// normal: { },
// show: false series: [
// } {
// }, type: 'pie',
// itemStyle: { radius: ['70%', '95%'],
// borderColor: '#fff', silent: true,
// borderWidth: '2', avoidLabelOverlap: false,
// }, label: {
// data: chartData show: false
// } },
// ] labelLine: {
// } show: false,
// chart.setOption(option) normal: {
// } show: false
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: '2',
},
data: chartData
}
]
}
chart.setOption(option)
}
Page({ Page({
data: { data: {
indexPanel: [], indexPanel: [],
banner: [], banner: [],
indicatorDots: false,//指示点 indicatorDots: false,//指示点
autoplay: false,//true,//自动播放 autoplay: true,//true,//自动播放
circular: false,//衔接滑动 circular: true,//衔接滑动
interval: 2000, //自动播放间隔时长(ms) interval: 2000, //自动播放间隔时长(ms)
duration: 500,//幻灯片切换时长(ms) duration: 500,//幻灯片切换时长(ms)
currentSwiper: 0, currentSwiper: 0,
@ -77,7 +90,9 @@ Page({
await this.getBannerList() await this.getBannerList()
await this.getAllSituation() await this.getAllSituation()
await this.getSurvey() await this.getSurvey()
// @ts-ignore
this.ecComponentA = this.selectComponent('#mychart-dom-bar-a') this.ecComponentA = this.selectComponent('#mychart-dom-bar-a')
// @ts-ignore
this.ecComponentB = this.selectComponent('#mychart-dom-bar-b') this.ecComponentB = this.selectComponent('#mychart-dom-bar-b')
}, },
/** /**
@ -307,11 +322,33 @@ Page({
deptId: ''//wx.getStorageSync('childrenID') deptId: ''//wx.getStorageSync('childrenID')
} }
getAllSituation(params).then((res: any) => { getAllSituation(params).then((res: any) => {
// (res.data.list.unpassedProject / 10000).toFixed(2)
that.setData({ 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 = { let params = {
deptId: ''//wx.getStorageSync('childrenID') deptId: ''//wx.getStorageSync('childrenID')
} }
// issueTotal: 0,//议题总数
// unpassedProject: 0,//未转项目
// passedProject: 0,//已转项目
getSurvey(params).then((res: any) => { getSurvey(params).then((res: any) => {
that.setData({ that.setData({
survey: res.data.list, 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) { // if (that.data.survey.issueTotal > 9999) {
// that.setData({ // that.setData({
@ -351,31 +410,32 @@ Page({
// } // }
// }) // })
// }; // };
}) // })
}, },
// init_a() { init_a() {
// // @ts-ignore // @ts-ignore
// this.ecComponentA.init((canvas: any, width: any, height: any) => { this.ecComponentA.init((canvas: any, width: any, height: any) => {
// const chart = echarts.init(canvas, null, { const chart = echarts.init(canvas, null, {
// width: width, width: width,
// height: height height: height
// }) })
// setOption(chart, this.data.chartDataA, this.data.colorA) setOption(chart, this.data.chartDataA, this.data.colorA, this.data.survey)
// return chart return chart
// }) })
// }, },
// init_b() { init_b() {
// this.ecComponentB.init((canvas: any, width: any, height: any) => { // @ts-ignore
// const chart = echarts.init(canvas, null, { this.ecComponentB.init((canvas: any, width: any, height: any) => {
// width: width, const chart = echarts.init(canvas, null, {
// height: height width: width,
// }) height: height
// setOption(chart, this.data.chartDataB, this.data.colorB) })
// return chart setOption(chart, this.data.chartDataB, this.data.colorB, this.data.allSituation)
// }) return chart
// }, })
},
// 判断登录 // 判断登录
refreshToken() { refreshToken() {
@ -384,6 +444,7 @@ Page({
success(res) { success(res) {
let wxCode = res.code let wxCode = res.code
if (wxCode) { if (wxCode) {
// @ts-ignore
getToken(wxCode).then(function (res: { data: { registerState: string; token: any; userTagKey: any; deptDataScopeList: any } }) { getToken(wxCode).then(function (res: { data: { registerState: string; token: any; userTagKey: any; deptDataScopeList: any } }) {
if (res.data.registerState == '0') { if (res.data.registerState == '0') {
wx.redirectTo({ wx.redirectTo({
@ -411,7 +472,9 @@ Page({
await this.getBannerList() await this.getBannerList()
await this.getAllSituation() await this.getAllSituation()
await this.getSurvey() await this.getSurvey()
// @ts-ignore
this.ecComponentA = this.selectComponent('#mychart-dom-bar-a') this.ecComponentA = this.selectComponent('#mychart-dom-bar-a')
// @ts-ignore
this.ecComponentB = this.selectComponent('#mychart-dom-bar-b') this.ecComponentB = this.selectComponent('#mychart-dom-bar-b')
wx.stopPullDownRefresh(); wx.stopPullDownRefresh();
}, },

35
src/pages/index/index.wxml

@ -22,18 +22,41 @@
</view> </view>
</view> </view>
</view> </view>
<view class="counts"> <view class="counts">
<view class="count-item" bindtap="navigateToyt"> <view class="count-item" bindtap="navigateToyt">
<image src="../../assets/images/issue_count.png" /> <view class="chat-class">
<view class="count-text">{{numberUtil.numberEnFormat(survey.issueTotal)}}</view> <ec-canvas id="mychart-dom-bar-a" canvas-id="mychart-bar-a" ec="{{ ec }}"></ec-canvas>
<view class="title-text">议题数</view> </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>
<view class="count-item" bindtap="navigateToUserNum"> <view class="count-item" bindtap="navigateToUserNum">
<image src="../../assets/images/user_count.png" /> <view class="chat-class">
<view class="count-text">{{numberUtil.numberEnFormat(allSituation.userTotal)}}</view> <ec-canvas id="mychart-dom-bar-b" canvas-id="mychart-bar-b" ec="{{ ec }}"></ec-canvas>
<view class="title-text">用户数</view> </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> </view>
<view class="sudokus"> <view class="sudokus">
<view class="sudoku" wx:for="{{indexPanel}}" wx:for-index="rowIndex" wx:for-item="rowItem" wx:key="rowIndex"> <view class="sudoku" wx:for="{{indexPanel}}" wx:for-index="rowIndex" wx:for-item="rowItem" wx:key="rowIndex">
<view class="content-title">{{rowItem.mainLabel}}</view> <view class="content-title">{{rowItem.mainLabel}}</view>

Loading…
Cancel
Save