作者 刘晓艳

原料

... ... @@ -3,7 +3,6 @@
"pages/qiyeyongdian/detail/detail",
"pages/changqu/changqu",
"pages/shebei/shebeidetail/shebeidetail",
"pages/companybox/qiyedetail/qiyedetail",
"pages/companybox/defendetail/defendetail",
"pages/companybox/jichuxinxi/jichuxinxi",
... ... @@ -16,7 +15,9 @@
"pages/yujing/yujing",
"pages/qiyeyongdian/qyyd/qyyd",
"pages/member/member",
"pages/chengpin/chengpin"
"pages/chengpin/chengpin",
"pages/yuanliaomsg/yuanliao/yuanliao",
"pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail"
],
"window": {
"backgroundTextStyle": "light",
... ...
... ... @@ -32,7 +32,7 @@
<!-- 出库 -->
<view wx:if="{{tabNum == 0}}">2019.06</view>
<!-- 流水 -->
<view wx:if="{{tabNum == 1}}">{{time}}</view>
<view wx:if="{{tabNum == 1}}" bindtap='toShowModal'>{{time}}</view>
<view class="rowimg">
<image src='/img/row.png' class="down"></image>
</view>
... ... @@ -73,7 +73,7 @@
<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 class="tr_btn" >{{item.btn}}</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
... ... @@ -36,7 +36,6 @@ Page({
],
},
toDetail(e){
console.log(e)
wx.navigateTo({
url: '/pages/qiyeyongdian/detail/detail?id='+e.currentTarget.dataset.id,
})
... ...
// pages/qiyeyongdian/detail/detail.js
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp();
var Chart = null;
Page({
/**
* 页面的初始数据
*/
data: {
showModal: false,
modalTitle: ["选择时间", "选择地磅", "选择货物"],
modalNum: 2,
monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘",],
time: '2019.01.01-2019.01.31',
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) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
return chart;
},
lazyLoad: true, // 延迟加载
showt: false
},
},
// 流水详情页
toDetail(){
wx.navigateTo({
url: '/pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail'
})
},
changeTab(e) {
this.setData({
tabNum: e.currentTarget.dataset.id
})
},
toShowModal(e) {
this.setData({
showModal: true
})
},
hideModal() {
this.setData({
showModal: false
});
},
choice(e) {
this.setData({
changeColor: e.currentTarget.dataset.id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart');
//如果是第一次绘制
if (!Chart) {
this.init_echarts(); //初始化图表
} else {
this.setOption(Chart); //更新数据
}
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height
});
this.setOption(Chart)
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return Chart;
});
},
setOption: function (Chart) {
Chart.clear(); // 清除
Chart.setOption(this.getOption()); //获取新数据
},
// 图表配置项
getOption() {
var self = this;
var option = {
color: ["#FFF"], //图例图标颜色
// lineStyle:{//阴影
// shadowColor: '#6495F8',
// shadowBlur: 10
// },
xAxis: { //横坐标
type: 'category',
name: '日期', //横坐标名称
nameTextStyle: { //在name值存在下,设置name的样式
color: '#333',
fontStyle: 'normal'
},
axisLabel: {
interval: 0,
},
boundaryGap: false, //1.true 数据点在2个刻度直接 2.fals 数据点在分割线上,即刻度值上
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
axisLabel: {
textStyle: {
fontSize: 13,
color: '#5D5D5D'
}
}
},
yAxis: { //纵坐标
type: 'value',
position: 'left',
name: '重量', //纵坐标名称
nameTextStyle: { //在name值存在下,设置name的样式
color: '#333333',
fontStyle: 'normal'
},
splitNumber: 10, //坐标轴的分割段数
min: 0,
max: 100,
},
series: [{
type: 'line',
data: [10, 12, 13, 14, 23, 31, 23, 31, 48, 43, 55, 61, 46, 42, 31, 31, 23, 47, 57, 63, 69, 77, 82, 82, 93, 31, 13, 34, 34, 43, 25],
symbol: 'true',
itemStyle: {
normal: {
lineStyle: {
color: '#ED3676'
}
}
},
// areaStyle: {
// normal: {
// color: '#6495F8' //改变区域颜色
// }
// },
}],
}
return option;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.echartsComponnet = this.selectComponent('#mychart');
//如果是第一次绘制
if (!Chart) {
this.init_echarts(); //初始化图表
} else {
this.setOption(Chart); //更新数据
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTextStyle": "black",
"navigationBarTitleText": "原料",
"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">
<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>
</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">
<!-- 出库 -->
<view wx:if="{{tabNum == 0}}">2019.06</view>
<!-- 流水 -->
<view wx:if="{{tabNum == 1}}" bindtap='toShowModal'>{{time}}</view>
<view class="rowimg">
<image src='/img/row.png' class="down"></image>
</view>
</view>
<view class="rowimg">
<image src='/img/row.png'></image>
</view>
</view>
<!-- 出库 -->
<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>
</view>
<view class="total_power">
<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='toDetail'>{{item.btn}}</view>
</view>
</view>
</view>
... ...
/* pages/qiyeyongdian/detail/detail.wxss */
.search_month {
width: 686rpx;
padding: 0 30rpx;
height: 70rpx;
background-color: #f3f5f8;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
/* 左箭头 */
.left {
transform: rotate(180deg);
}
/* 日期 */
.date_time {
color: #666;
font-size: 28rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.down {
transform: rotate(90deg);
margin-left: 10rpx;
}
/* 折线图 */
.chart {
width: 750rpx;
height: 494rpx;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
ec-canvas {
width: 100%;
height: 100%;
}
.total_power {
display: flex;
flex-direction: row;
justify-content: space-around;
}
/* 弹出框 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modal-dialog {
width: 100%;
overflow: hidden;
position: fixed;
top: 45%;
left: 0;
z-index: 9500;
margin: -180rpx 70rpx;
}
.modal-content {
position: fixed;
top: 0;
left: 0;
z-index: 9500;
width: 100%;
/* height: 55%; */
overflow: hidden;
/* padding: 120rpx 50rpx 50rpx; */
background: #fff;
border-radius: 2rpx;
}
/* 弹出框选项卡 */
.modal_year {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-size: 28rpx;
color: #666;
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;
}
/* 月份 */
.modal_month {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 50rpx 30rpx;
justify-content: space-between;
}
.month_single {
background-color: #F9F8FE;
padding: 20rpx 56rpx 15rpx;
border-radius: 6rpx;
font-size: 32rpx;
color: #333;
margin-bottom: 30rpx;
}
.change {
background-color: #ff9400;
color: #fff;
}
.date_descript {
width: 296rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
color: #ff9400;
font-size: 28rpx;
margin: 0 auto;
background: rgba(244, 244, 244, 1);
border-radius: 6rpx;
}
.tactive {
background: #ff9400;
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 {
margin-top: 50rpx;
display: flex;
flex-direction: row;
align-items: center;
border-top: 1rpx solid #f5f5f5;
}
.cacle {
width: 50%;
color: #afafaf;
height: 87rpx;
line-height: 87rpx;
text-align: center;
font-size: 34rpx;
}
.sure {
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;
}
... ...
// pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTextStyle": "black",
"navigationBarTitleText": "流水详情",
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail.wxml-->
<view class="detail_single first_single">
<view>时间</view>
<view>2019-07-03 19:00:00</view>
</view>
<view class="detail_single">
<view>地磅</view>
<view>安装位置/地磅名称</view>
</view>
<view class="detail_single">
<view>货物名称</view>
<view>安装位置/地磅名称</view>
</view>
<view class="detail_single">
<view>车牌号</view>
<view>784646</view>
</view>
<view class="detail_single">
<view>毛重(吨)</view>
<view>4154</view>
</view>
<view class="detail_single">
<view>皮重(吨)</view>
<view>4154</view>
</view>
<view class="detail_single">
<view>净重(吨)</view>
<view>4154</view>
</view>
<view class="equipment_pic">
<view>设备照片</view>
<view class="pic_group">
<view class="equipment_img">
<image src="/img/logo3.png"></image>
</view>
<view class="equipment_img">
<image src="/img/logo3.png"></image>
</view>
<view class="equipment_img">
<image src="/img/logo3.png"></image>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail.wxss */
.detail_single{
display: flex;
flex: row;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
color: #333;
font-size: 28rpx;
}
.first_single{
border-top: 1rpx solid #f5f5f5;
}
.equipment_pic{
padding:40rpx;
color: #333;
font-size: 32rpx;
font-weight: 600;
}
.pic_group{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.equipment_img{
width: 210rpx;
height: 210rpx;
border-radius: 10rpx;
}
\ No newline at end of file
... ...
... ... @@ -39,7 +39,7 @@
"list": []
},
"miniprogram": {
"current": -1,
"current": 5,
"list": [
{
"id": -1,
... ... @@ -68,6 +68,20 @@
"pathName": "pages/chengpin/chengpin",
"query": "",
"scene": null
},
{
"id": 4,
"name": "原料",
"pathName": "pages/yuanliaomsg/yuanliao/yuanliao",
"query": "",
"scene": null
},
{
"id": 5,
"name": "流水详情",
"pathName": "pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail",
"query": "",
"scene": null
}
]
}
... ...