miniprogram / appui · 提交

转到一个项目

作者 刘晓艳
提交 953c4c234096fd22f4c4973d2a515eebe29004ae 1 个父辈 880e7679

成品

内嵌 并排对比
正在显示 4 个修改的文件 包含 259 行增加 和 68 行删除
... ... @@ -11,12 +11,39 @@ Page({
*/
data: {
showModal: false,
monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
modalTitle: ["选择时间", "选择地磅", "选择货物"],
modalNum: 2,
monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", ],
time: '2019.01.01-2019.01.31',
changeColor: -1,
changeColor: 0,
tabList: ["出库", "流水"],
tabNum: 0,
tableTitle: ["时间", "地磅", "货物名称", "重量（T）"],
trList: [{
date: "09.12",
position: "大厅左上角",
name: "名字妙哉妙",
num: "18",
btn: "详情"
},
{
date: "09.12",
position: "大厅左上角",
name: "啦啦啦啦啦啦啦啦啦啦",
num: "18",
btn: "详情"
},
{
date: "09.12",
position: "车间后方大转盘",
name: "啦啦啦啦啦啦啦啦啦啦",
num: "18",
btn: "详情"
},
],
ec: {
onInit: function (canvas, width, height) {
onInit: function(canvas, width, height) {
chart = echarts.init(canvas, null, {
... ... @@ -37,32 +64,15 @@ Page({
},
},
choice(e) {
let index = e.currentTarget.dataset.id;
index = index + 1
if (index == 1 || index == 3 || index == 5 || index == 7 || index == 8 || index == 10 || index == 12) {
this.setData({
time: "（" + "2019." + "0" + index + ".01" + "-2019" + index + ".31" + "）"
})
} else {
this.setData({
time: "（" + "2019." + "0" + index + ".01" + "-2019" + index + ".30" + "）"
})
}
this.setData({
changeColor: index - 1
})
},
three() {
changeTab(e) {
this.setData({
time: '近30天',
showt: !this.data.showt
tabNum: e.currentTarget.dataset.id
})
},
toShowModal(e) {
this.setData({
showModal: true
})
},
... ... @@ -71,19 +81,26 @@ Page({
showModal: false
});
},
choice(e) {
this.setData({
changeColor: e.currentTarget.dataset.id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
onLoad: function(options) {
this.echartsComponnet = this.selectComponent('#mychart');
//如果是第一次绘制
if (!Chart) {
this.init_echarts(); //初始化图表
} else {
this.setOption(Chart); //更新数据
... ... @@ -93,7 +110,7 @@ Page({
},
//初始化图表
init_echarts: function () {
init_echarts: function() {
this.echartsComponnet.init((canvas, width, height) => {
... ... @@ -117,7 +134,7 @@ Page({
},
setOption: function (Chart) {
setOption: function(Chart) {
Chart.clear(); // 清除
... ... @@ -178,7 +195,7 @@ Page({
position: 'left',
name: '千瓦时', //纵坐标名称
name: '重量', //纵坐标名称
nameTextStyle: { //在name值存在下，设置name的样式
... ... @@ -188,12 +205,12 @@ Page({
},
splitNumber: 5, //坐标轴的分割段数
splitNumber: 10, //坐标轴的分割段数
min: 0,
max: 500,
max: 100,
},
... ... @@ -201,7 +218,7 @@ Page({
type: 'line',
data: [100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 253],
data: [10, 12, 13, 14, 23, 31, 23, 31, 48, 43, 1, 100, 23, 42, 21, 31, 23, 34, 97, 43, 59, 67, 82, 42, 23, 31, 13, 34, 34, 43, 25],
symbol: 'true',
... ... @@ -211,7 +228,7 @@ Page({
lineStyle: {
color: '#6495F8'
color: '#ED3676'
}
... ... @@ -234,49 +251,62 @@ Page({
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
onShow: function() {
this.echartsComponnet = this.selectComponent('#mychart');
//如果是第一次绘制
if (!Chart) {
this.init_echarts(); //初始化图表
} else {
this.setOption(Chart); //更新数据
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{
"navigationBarTextStyle": "black",
"navigationBarTitleText": "成品",
"usingComponents": {}
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
\ No newline at end of file
... ...
<!--pages/qiyeyongdian/detail/detail.wxml-->
<!-- 日期选择 -->
<!-- 货物信息 -->
<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view>
<view wx:if="{{showModal}}">
<view class="modal-content">
<!-- 年份 -->
<view class="modal_year">2019年</view>
<!-- 选项卡 -->
<view class="modal_year">
<view class="modal_single {{modalNum == index ?'modal_choice':''}}" wx:for="{{modalTitle}}" wx:key="">{{item}}</view>
</view>
<!-- 月份 -->
<scroll-view scroll-y style="height: 400px;">
<view class="modal_month">
<view class="month_single {{changeColor == index?'change':''}}" wx:for="{{monthList}}" wx:key="" data-id="{{index}}" catchtap="choice">{{item}}</view>
</view>
<view class="date_descript {{showt==true?'tactive':''}}" bindtap="three">近30天</view>
</scroll-view>
<view class='btns'>
<view class="cacle" bindtap="hideModal">取消</view>
<view class="cacle sure" bindtap="hideModal">确定</view>
</view>
</view>
</view>
<!-- 选项卡 -->
<view class="tab">
<view wx:for="{{tabList}}" wx:key="" class="tab_single {{tabNum == index?'tab_border':''}}" bindtap='changeTab' data-id="{{index}}">{{item}}</view>
</view>
<!-- 月份 -->
<view class="search_month">
<view class="rowimg">
<image src='/img/row.png' class="left"></image>
</view>
<view class="date_time" bindtap='toShowModal'>
<!-- 近30天（2019.03.01-2019.03.30） -->
2019.06
<view class="date_time">
<!-- 出库 -->
<view wx:if="{{tabNum == 0}}">2019.06</view>
<!-- 流水 -->
<view wx:if="{{tabNum == 1}}">{{time}}</view>
<view class="rowimg">
<image src='/img/row.png' class="down"></image>
</view>
... ... @@ -32,15 +41,39 @@
<image src='/img/row.png'></image>
</view>
</view>
<!-- 折线图 -->
<view class="charts_line">
<!-- 出库 -->
<view wx:if="{{tabNum == 0}}">
<view class="cp_title">
成品出库信息
</view>
<view class="total">
重量总计（吨）
<text>1000</text>
</view>
<!-- 折线图 -->
<view class="charts_line">
<view class="chart">
<ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
<!-- <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ec}}"></ec-canvas> -->
</view>
<view class="total_power">
<view>2019.06</view>
<view>2019年6月</view>
</view>
</view>
</view>
<!-- 流水 -->
<view wx:if="{{tabNum == 1}}">
<view class="second_total">重量总计（吨）：1000</view>
<!-- 数据 -->
<view class="table">
<view class="table_title">
<view wx:for="{{tableTitle}}" wx:key="">{{item}}</view>
</view>
<view class="table_tr" wx:for="{{trList}}" wx:key="">
<view class="tr_time">{{item.date}}</view>
<view class="tr_pos">{{item.position}}</view>
<view class="tr_name">{{item.name}}</view>
<view class="tr_time">{{item.num}}</view>
<view class="tr_btn" bindtap='toShowModal'>{{item.btn}}</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -29,16 +29,14 @@
.down {
transform: rotate(90deg);
margin-left: 10rpx
margin-left: 10rpx;
}
/* 折线图 */
.chart {
width: 750rpx;
height: 394rpx;
height: 494rpx;
margin: 0 auto;
display: flex;
justify-content: center;
... ... @@ -94,14 +92,48 @@ ec-canvas {
border-radius: 2rpx;
}
/* 年份 */
/* 弹出框选项卡 */
.modal_year {
padding: 38rpx;
border: 1rpx solid #f5f5f5;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-size: 28rpx;
color: #666;
text-align: center;
padding-top: 20rpx;
border:1rpx solid #f5f5f5;
border-left:none;
border-right: none;
}
.modal_single{
border-bottom:4rpx solid #fff;
}
.modal_choice{
border-bottom-color: #FF9400;
color: #FF9400;
font-weight: 600;
padding-bottom:20rpx;
}
/* 选项卡 */
.tab {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding-top: 20rpx;
color: #ff9400;
border-top: 1rpx solid #f5f5f5;
}
.tab_single {
padding-bottom: 20rpx;
border-bottom: 4rpx solid #fff;
}
.tab_border {
border-bottom: 4rpx solid #ff9400;
}
/* 月份 */
... ... @@ -110,17 +142,17 @@ ec-canvas {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 40rpx 0 30rpx;
margin: 50rpx 30rpx;
justify-content: space-between;
}
.month_single {
width: 33.333%;
height: 120rpx;
text-align: center;
background-color: #F9F8FE;
padding: 20rpx 56rpx 15rpx;
border-radius: 6rpx;
font-size: 32rpx;
color: #333;
line-height: 120rpx;
margin-bottom: 30rpx;
}
.change {
... ... @@ -139,9 +171,48 @@ ec-canvas {
background: rgba(244, 244, 244, 1);
border-radius: 6rpx;
}
.tactive{
.tactive {
background: #ff9400;
color:#fff;
color: #fff;
}
/* 标题 */
.cp_title {
color: #333;
font-size: 32rpx;
font-weight: bold;
padding: 30rpx 54rpx 41rpx;
position: relative;
}
.cp_title::after {
position: absolute;
content: "";
display: block;
left: 30rpx;
top: 35rpx;
width: 8rpx;
height: 35rpx;
background-color: #ff9400;
border-radius: 4rpx;
}
/* 重量总计 */
.total {
padding-left: 30rpx;
color: #666;
font-size: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.total text {
font-size: 32rpx;
color: #333;
}
.btns {
... ... @@ -165,3 +236,58 @@ ec-canvas {
color: #ff9400;
border-left: 1rpx solid #f5f5f5;
}
/* 流水 */
.second_total {
padding: 40rpx 30rpx 20rpx;
display: flex;
justify-content: flex-end;
flex-direction: row;
font-size: 28rpx;
}
.table_title {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 30rpx 0 20rpx;
font-size: 28rpx;
color: #666;
border: 1rpx solid #f5f5f5;
}
.table_tr {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 30rpx 0 20rpx;
font-size: 24rpx;
color: #666;
border-bottom: 1rpx solid #f5f5f5;
}
.tr_time {
font-size: 28rpx;
color: #333;
}
.tr_btn {
color: #ffb77e;
}
.tr_name {
width: 120rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tr_pos {
width: 120rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
... ...