zhaobing’
1 year ago
10 changed files with 292 additions and 4 deletions
@ -0,0 +1,145 @@ |
|||
// package/subSystem/dayPatrolInfo/dayPatrolInfo.js
|
|||
import * as echarts from '../../components/ec-canvas/echarts'; |
|||
|
|||
const setPieOptions = ((chart, data) => { |
|||
const option = { |
|||
grid: { |
|||
top: '0%', |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
top: 'bottom', |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: ['30%', '55%'], |
|||
// avoidLabelOverlap: false,
|
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
data: data |
|||
} |
|||
] |
|||
}; |
|||
chart.setOption(option); |
|||
}) |
|||
|
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
needEc: { lazyLoad: true }, |
|||
alreadyEc: { lazyLoad: true }, |
|||
}, |
|||
|
|||
// 今日待检分布图表
|
|||
initNeedChart: function (data) { |
|||
this.needEcComponent.init((canvas, width, height, dpr) => { |
|||
const chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // new
|
|||
}); |
|||
setPieOptions(chart, data) |
|||
return chart; |
|||
}); |
|||
}, |
|||
|
|||
// 今日已检分布图表
|
|||
initAlreadyChart: function (data) { |
|||
this.alreadyEcComponent.init((canvas, width, height, dpr) => { |
|||
const chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // new
|
|||
}); |
|||
setPieOptions(chart, data) |
|||
return chart; |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
wx.setNavigationBarTitle({ title: options.day }) |
|||
setTimeout(() => { |
|||
this.initNeedChart([ |
|||
{ value: 1048, name: 'Search Engine' }, |
|||
{ value: 735, name: 'Direct' }, |
|||
{ value: 580, name: 'Email' }, |
|||
{ value: 580, name: 'Email2' }, |
|||
{ value: 580, name: 'Email3' }, |
|||
]) |
|||
this.initAlreadyChart([ |
|||
{ value: 1048, name: 'Search Engine' }, |
|||
{ value: 735, name: 'Direct' }, |
|||
{ value: 580, name: 'Email' }, |
|||
{ value: 580, name: 'Email2' }, |
|||
{ value: 580, name: 'Email3' }, |
|||
]) |
|||
}, 1000) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
this.needEcComponent = this.selectComponent('#need-chart-dom'); |
|||
this.alreadyEcComponent = this.selectComponent('#already-chart-dom'); |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"navigationBarBackgroundColor": "#006BE3", |
|||
"navigationBarTextStyle": "white", |
|||
"navigationBarTitleText": "", |
|||
"enablePullDownRefresh": false, |
|||
"usingComponents": { |
|||
"ec-canvas": "../../components/ec-canvas/ec-canvas" |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
<!--package/subSystem/dayPatrolInfo/dayPatrolInfo.wxml--> |
|||
<view class="day-patrol-info"> |
|||
<view class="card" style="margin-bottom: 10px"> |
|||
<view class="card-top flex flex-between"> |
|||
<view class="card-left flex"> |
|||
<image class="card-icon" src="/images/right_icon.png" /> |
|||
<view class="title">今日问题分布</view> |
|||
</view> |
|||
<image src="/images/right_card_bg.png" class="card-bg" /> |
|||
</view> |
|||
<view wx:for="{{[1,2,3,4]}}" class="problem-box flex"> |
|||
<view class="problem-title text---">类型1：</view> |
|||
<progress |
|||
style="width: 70%;" |
|||
percent="{{80}}" |
|||
stroke-width="8" |
|||
show-info |
|||
font-size="14" |
|||
border-radius="4" |
|||
/> |
|||
</view> |
|||
</view> |
|||
<view class="card" style="margin-bottom: 10px"> |
|||
<view class="card-top flex flex-between"> |
|||
<view class="card-left flex"> |
|||
<image class="card-icon" src="/images/right_icon.png" /> |
|||
<view class="title">今日待检分布</view> |
|||
</view> |
|||
<view class="card-right">总次数：{{50}}次</view> |
|||
<image src="/images/right_card_bg.png" class="card-bg" /> |
|||
</view> |
|||
<view class="pie-chart-box"> |
|||
<ec-canvas id="need-chart-dom" canvas-id="need-chart" ec="{{ needEc }}"></ec-canvas> |
|||
</view> |
|||
</view> |
|||
<view class="card" style="margin-bottom: 10px"> |
|||
<view class="card-top flex flex-between"> |
|||
<view class="card-left flex"> |
|||
<image class="card-icon" src="/images/right_icon.png" /> |
|||
<view class="title">今日已检分布</view> |
|||
</view> |
|||
<view class="card-right">总次数：{{50}}次</view> |
|||
<image src="/images/right_card_bg.png" class="card-bg" /> |
|||
</view> |
|||
<view class="pie-chart-box"> |
|||
<ec-canvas id="already-chart-dom" canvas-id="already-chart" ec="{{ alreadyEc }}"></ec-canvas> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,71 @@ |
|||
.day-patrol-info { |
|||
height: 100%; |
|||
background-image: linear-gradient(179deg, #006BE3 0%, #4E87FF 16%, #4e87ff00 93%); |
|||
padding: 0 15px 15px; |
|||
} |
|||
|
|||
.card { |
|||
box-sizing: border-box; |
|||
background: #FFFFFF; |
|||
box-shadow: 2px 2px 11px 0 #00000008, 0 0 4px 0 #00000012; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.card-top { |
|||
height: 68px; |
|||
background-image: linear-gradient(0deg, #F3F7FF 84%, #DBE6FF 100%); |
|||
border-radius: 4px; |
|||
position: relative; |
|||
} |
|||
|
|||
.card-bg { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 11px; |
|||
width: 115px; |
|||
height: 67px; |
|||
} |
|||
|
|||
.card-left { |
|||
margin-left: 23px; |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
color: #000000d9; |
|||
} |
|||
|
|||
.card-right { |
|||
margin-right: 18px; |
|||
color: #1684FF; |
|||
} |
|||
|
|||
.card-icon { |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.problem-box { |
|||
width: 100%; |
|||
height: 58px; |
|||
padding: 18px; |
|||
border-top: 1px solid rgb(238, 237, 237); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.problem-title { |
|||
width: 30%; |
|||
font-size: 14px; |
|||
color: #383A3B; |
|||
} |
|||
|
|||
.t-class-label { |
|||
font-size: 14px; |
|||
color: #383A3B; |
|||
} |
|||
|
|||
.pie-chart-box { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 280px; |
|||
padding: 0 10px 10px; |
|||
} |
|||
Loading…
Reference in new issue