作者 李洪娟

合并分支 'lhj' 到 'master'

Lhj



查看合并请求 !10
正在显示 39 个修改的文件 包含 3846 行增加870 行删除

要显示太多修改。

为保证性能只显示 39 of 39+ 个文件。

{
"pages": [
"pages/changqu/changqu",
"pages/shebei/shebeidetail/shebeidetail",
"pages/changqu/changqu",
"pages/qiyeyongdian/detail/detail",
... ...
// pages/qiyeyongdian/detail/detail.js
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var Chart = null;
// pages/chengpin/chengpin.js
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
},
},
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()); //获取新数据
onLoad: function (options) {
},
// 图表配置项
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, 1, 100, 23, 42, 21, 31, 23, 34, 97, 43, 59, 67, 82, 42, 23, 31, 13, 34, 34, 43, 25],
symbol: 'true',
itemStyle: {
normal: {
lineStyle: {
color: '#ED3676'
}
}
},
// areaStyle: {
// normal: {
// color: '#6495F8' //改变区域颜色
// }
// },
}],
}
return option;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.echartsComponnet = this.selectComponent('#mychart');
//如果是第一次绘制
if (!Chart) {
this.init_echarts(); //初始化图表
} else {
this.setOption(Chart); //更新数据
onShow: function () {
}
},
/**
* 生命周期函数--监听页面隐藏
*/
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": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
"usingComponents": {}
}
\ 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" >{{item.btn}}</view>
</view>
</view>
</view>
\ No newline at end of file
<!--pages/chengpin/chengpin.wxml-->
<text>pages/chengpin/chengpin.wxml</text>
... ...
/* 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/chengpin/chengpin.wxss */
\ No newline at end of file
... ...
// 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
},
},
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, 1, 100, 23, 42, 21, 31, 23, 34, 97, 43, 59, 67, 82, 42, 23, 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" >{{item.btn}}</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* 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/member/member.js
import * as echarts from '../../ec-canvas/echarts';
const app = getApp()
function initChart1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '',
left: 'center'
},
toolbox: {
},
xAxis: {
type: 'category',
boundaryGap: false,
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: {
interval: 1,
},
name: '日期'
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
},
min: 10,
max: 100,
splitNumber: 10,
name: '人数'
},
series: [{
name: '',
type: 'line',
smooth: true,
color: '#A8ACE8',
data: [41, 87, 35, 23, 42, 33, 40, 30, 50, 80],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function(res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '',
success: function() {},
fail: function() {}
}
},
/**
* 页面的初始数据
*/
data: {
state: 1,
timestate: 1,
ec1: {
onInit: initChart1,
},
statedate: '',
showdate: "",
watertime: '',
timesel: 1,
timearr: [
],
date: '',
datePickerValue: ['', '', ''],
datePickerIsShow: false,
datechu:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({
statedate: app.monthnowDate(),
watertime: app.newnowDate() + '-' + app.snewnowDate()
})
console.log(this.data.statedate)
let newdate = this.data.statedate.split("-");
this.setData({
showdate: newdate[0] + '年' + newdate[1] + '月'
})
},
showDatePicker: function(e) {
// this.data.datePicker.show(this);
this.setData({
datePickerIsShow: true,
});
},
datePickerOnSureClick: function(e) {
console.log('datePickerOnSureClick');
console.log(e);
this.setData({
date: `${e.detail.value[0]}${e.detail.value[1]}${e.detail.value[2]}日`,
datePickerValue: e.detail.value,
datePickerIsShow: false,
datechu:false,
state:2
});
},
datePickerOnCancelClick: function(event) {
console.log('datePickerOnCancelClick');
console.log(event);
this.setData({
datePickerIsShow: false,
datechu:false,
state:2
});
},
changedate(e) {
console.log(e)
},
// 选择设备切换
selectshebei(e){
this.setData({
state:e.currentTarget.dataset.id
})
},
// 显示日期
datexianshi(){
this.setData({
datechu:true
})
//获取年
var date = new Date();
var obj = {}
var year = date.getFullYear();
var month = date.getMonth() + 1;
if (month < 10) {
month = '0' + month
}
var day = date.getDate();
if (day < 10) {
day = "0" + day
}
console.log()
if (typeof (day) == 'number') {
day = day.toString()
}
console.log(typeof (day))
this.setData({
datePickerValue: [year, month, day],
})
},
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
// 选择时间和摄像头切换
seltime(e) {
this.setData({
timestate: e.currentTarget.dataset.id
})
},
//开始时间和结束时间切换
xuanshijan(e) {
this.setData({
timesel: e.currentTarget.dataset.time
})
},
// 选择日期
bindstateDateChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
statedate: e.detail.value
})
let newdate = this.data.statedate.split("-");
this.setData({
showdate: newdate[0] + '年' + newdate[1] + '月'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "人员",
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas",
"date-picker": "../../components/date-picker/date-picker"
}
}
\ No newline at end of file
... ...
<!-- 日期弹出层 -->
<view class="register" wx:if="{{datechu}}">
<view class="timewrap">
<view class="detailhead">
<view class="detailname {{timestate==1?'selactive':''}}" bindtap="seltime" data-id="1">选择时间</view>
<view class="detailname {{timestate==2?'selactive':''}}" bindtap="seltime" data-id="2">选摄像头</view>
</view>
<!-- 开始时间和结束时间 -->
<view class="timetwo">
<view class="timebetin" bindtap="xuanshijan" data-time="1">
<view class="timetop {{timesel==1?'seltimeactive':''}}">开始时间</view>
<view class="timebottom {{timesel==1?'selnameactive':''}}">2019.01.09</view>
</view>
<view class="timebetin" bindtap="xuanshijan" data-time="2">
<view class="timetop {{timesel==2?'seltimeactive':''}}">结束时间</view>
<view class="timebottom {{timesel==2?'selnameactive':''}}">2019.01.09</view>
</view>
</view>
<view class="timebox">
<view class="timeboxitem {{sel==index?'timeboxactive':''}}" wx:for="{{timearr}}" wx:key="">
<view class="itemcontent">{{item.year}}</view>
<view class="itemcontent">{{item.month}}</view>
<view class="itemcontent">{{item.day}}</view>
</view>
</view>
<!-- <text>当前日期:{{date}}</text>
<view bindtap="showDatePicker">选择日期</view> -->
<date-picker id="date-picker" value="{{datePickerValue}}" isShow="{{datePickerIsShow}}" bindsureclick="datePickerOnSureClick" bindcancelclick="datePickerOnCancelClick" bindchange="bindDateChange" />
</view>
</view>
<view class="detailhead">
<view class="detailname {{state==1?'selactive':''}}" bindtap="selectshebei" data-id="1">人员状况</view>
<view class="detailname {{state==2?'selactive':''}}" bindtap="selectshebei" data-id="2">进出水</view>
</view>
<!-- 人员状况 -->
<view class="peoplestate" wx:if="{{state==1}}">
<view class="date">
<view class="dateleft">
<image src="/img/row.png"></image>
</view>
<view class="datetime">
<view class="datesel">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindstateDateChange" fields="month">
<view class="picker">
{{statedate}}
</view>
</picker>
</view>
<view class="datepic">
<image src="/img/row.png"></image>
</view>
</view>
<view class="dateright">
<image src="/img/row.png"></image>
</view>
</view>
<view class="shebeinum">
<text class="she">人员进出信息</text>
</view>
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec1 }}"></ec-canvas>
</view>
<view class="datetime">{{showdate}}</view>
</view>
<!-- 进出流水 -->
<view class="lishui" wx:if="{{state==2}}">
<view class="date" bindtap="datexianshi">
<view class="dateleft">
<image src="/img/row.png"></image>
</view>
<view class="datetime">
<view class="datesel">
{{watertime}}
</view>
<view class="datepic">
<image src="/img/row.png"></image>
</view>
</view>
<view class="dateright">
<image src="/img/row.png"></image>
</view>
</view>
<view class="shuibox">
<view class="shihead">
<view class="headitem shijian">时间</view>
<view class="headitem shexiang">摄像头</view>
<view class="headitem derition">方向</view>
</view>
<view class="shuicontent">
<view class="shuiitem">
<view class="shuiitemleft shijian">06.01</view>
<view class="shuiitemleft shexiang">大厅左上角</view>
<view class="shuiitemleft derition">进</view>
</view>
<view class="shuiitem">
<view class="shuiitemleft shijian">06.01</view>
<view class="shuiitemleft shexiang">大厅左上角</view>
<view class="shuiitemleft derition">进</view>
</view>
<view class="shuiitem">
<view class="shuiitemleft shijian">06.01</view>
<view class="shuiitemleft shexiang">大厅左上角</view>
<view class="shuiitemleft derition">进</view>
</view>
<view class="shuiitem">
<view class="shuiitemleft shijian">06.01</view>
<view class="shuiitemleft shexiang">车间后方大转盘</view>
<view class="shuiitemleft derition">进</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
.detailhead {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20rpx 69rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #f5f5f5;
}
.detailname {
color: #999;
font-size: 28rpx;
}
.selactive {
position: relative;
}
.selactive::after {
display: block;
content: '';
width: 60rpx;
height: 1rpx;
border: 1rpx solid #ff9400;
position: absolute;
left:50%;
right:50%;
transform: translate(-50%);
bottom: -20rpx;
}
.date{
display:flex;
align-items: center;
justify-content: space-between;
height:70rpx;
background: #F3F5F8;
padding: 0 31rpx;
box-sizing: border-box
}
.dateleft {
width: 23rpx;
height:23rpx;
font-size: 0;
transform: rotate(180deg);
}
.dateright {
width: 23rpx;
height: 23rpx;
font-size: 0;
}
.datetime{
display:flex;
align-items: center
}
.datepic{
width:16rpx;
height:16rpx;
font-size: 0;
transform: rotate(90deg);
margin-left:12rpx;
}
.datesel{
color:#666666;
font-size: 28rpx;
}
.shebeinum {
color: #333;
font-size: 32rpx;
font-weight: bold;
padding: 40rpx 0 0 30rpx;
box-sizing: border-box;
border-top: 1rpx solid #f5f5f5;
position: relative;
}
.she{
margin-left:18rpx;
}
.shebeinum::before{
content:'';
display:block;
width:8rpx;
height:33rpx;
background: #FF9400FF;
position: absolute;
top:43rpx;
left:30rpx;
}
.containerzhe{
width:750rpx;
height:500rpx;
}
.datetime{
color:#333333;
font-size: 28rpx;
display:flex;
justify-content: center
}
.timewrap{
background: #fff;
height:700rpx;
}
.timetwo{
display:flex;
align-items: center;
padding: 60rpx 100rpx 50rpx;
box-sizing: border-box;
justify-content: space-between
}
.timebetin{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.timetop{
color:#999999;
font-size: 24rpx;
}
.timebottom{
color:#999999;
font-size: 32rpx;
margin-top:10rpx;
}
.seltimeactive{
color:#FF9400;
}
.selnameactive{
color:#333
}
.timebox{
width:580rpx;
height:308rpx;
overflow-y: scroll;
margin:0 auto;
}
.timeboxitem{
display:flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 78rpx;
box-sizing: border-box;
background: #F9F8FE;
color:#999999;
font-size: 28rpx;
border-bottom:1rpx solid #f5f5f5;
}
.shihead{
display:flex;
align-items: center;
justify-content: space-between;
height:100rpx;
padding: 0 28rpx;
border-bottom:1rpx solid #f5f5f5;
}
.headitem{
color:#666666;
font-size: 28rpx;
text-align: left
}
.shuiitem{
display:flex;
align-items: center;
justify-content: space-between;
padding: 34rpx 28rpx;
box-sizing: border-box;
border-bottom:1rpx solid #f5f5f5;
}
.shuiitemleft{
color:#333333;
font-size: 24rpx;
text-align: left
}
.shijian{
width:60rpx;
}
.shexiang{
width:196rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.derition{
width:56rpx;
}
\ No newline at end of file
... ...
// pages/qiyeyongdian/detail/detail.js
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp();
var Chart = null;
Page({
/**
* 页面的初始数据
*/
data: {
showModal: false,
monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
time:'2019.01.01-2019.01.31',
changeColor: -1,
ec: {
onInit: function(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
return chart;
},
lazyLoad: true, // 延迟加载
showt:false
},
},
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){
if(index<10){
this.setData({
time: "(" + "2019." + "0" + index + ".01" + "-2019." +'0'+ index + ".31" + ")"
})
}else{
this.setData({
time: "(" + "2019." + index + ".01" + "-2019." + index + ".31" + ")"
})
}
}else{
if(index<10){
this.setData({
time: "(" + "2019." + "0" + index + ".01" + "-2019." + '0' + index + ".30" + ")"
})
}else{
this.setData({
time: "(" + "2019." + index + ".01" + "-2019." + index + ".30" + ")"
})
}
}
this.setData({
changeColor: index-1
})
},
three(){
this.setData({
time:'近30天',
showt: !this.data.showt
})
},
toShowModal(e) {
this.setData({
showModal: true
})
},
hideModal() {
this.setData({
showModal: false
});
},
/**
* 生命周期函数--监听页面加载
*/
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: 5, //坐标轴的分割段数
min: 0,
max: 500,
},
series: [{
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],
symbol: 'true',
itemStyle: {
normal: {
lineStyle: {
color: '#6495F8'
}
}
},
// areaStyle: {
// normal: {
// color: '#6495F8' //改变区域颜色
// }
// },
}],
}
return option;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
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">2019年</view>
<!-- 月份 -->
<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>
<view class='btns'>
<view class="cacle" bindtap="hideModal">取消</view>
<view class="cacle sure" bindtap="hideModal">确定</view>
</view>
</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) -->
{{time}}
<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 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>当月:1788kw.h</view>
<view>累计:5898kw.h</view>
</view>
</view>
\ No newline at end of file
... ...
/* 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);
}
/* 折线图 */
.chart {
width: 750rpx;
height: 394rpx;
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 {
padding: 38rpx;
border: 1rpx solid #f5f5f5;
font-size: 28rpx;
color: #666;
text-align: center;
}
/* 月份 */
.modal_month {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 40rpx 0 30rpx;
}
.month_single {
width: 33.333%;
height: 120rpx;
text-align: center;
border-radius: 6rpx;
font-size: 32rpx;
color: #333;
line-height: 120rpx;
}
.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;
}
.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;
}
... ...
// pages/qiyeyongdian/qyyd/qyyd.js
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
index: 1,
name: "电表009",
num: "27.5",
unit: "昨日(千瓦时)",
unit1: "上月(千瓦时)"
},
{
index: 1,
name: "电表009",
num: "27.5",
unit: "昨日(千瓦时)",
unit1: "上月(千瓦时)"
},
{
index: 1,
name: "电表009",
num: "27.5",
unit: "昨日(千瓦时)",
unit1: "上月(千瓦时)"
},
{
index: 1,
name: "电表009",
num: "27.5",
unit: "昨日(千瓦时)",
unit1: "上月(千瓦时)"
},
],
},
toDetail(e){
wx.navigateTo({
url: '/pages/qiyeyongdian/detail/detail?id='+e.currentTarget.dataset.id,
})
},
/**
* 生命周期函数--监听页面加载
*/
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/qiyeyongdian/qyyd/qyyd.wxml-->
<!-- 标题 -->
<view class="qy_title">
<view class="pesudo">电表数量:3</view>
</view>
<!-- 内容 -->
<view class="qy_content_box">
<view class="content_single" wx:for="{{list}}" wx:key="" bindtap='toDetail' data-id="{{item.index}}">
<view>{{item.name}}</view>
<view class="qy_used">
<view>{{item.num}}</view>
<view class="unit">{{item.unit}}</view>
</view>
<view class="qy_used">
<view>{{item.num}}</view>
<view class="unit">{{item.unit1}}</view>
</view>
<view class="rowimg">
<image src='/img/row.png'></image>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/qiyeyongdian/qyyd/qyyd.wxss */
/* 标题 */
.qy_title {
font-size: 32rpx;
color: #333;
font-weight: 500;
padding: 30rpx 54rpx;
border: 1rpx solid #f5f5f5;
border-left: none;
border-right: none;
}
/* 伪类 */
.pesudo {
position: relative;
}
.pesudo::after {
position: absolute;
top: 6rpx;
left: -18rpx;
content: "";
display: block;
width: 8rpx;
height: 35rpx;
background-color: #ff9400;
}
/* 内容 */
.qy_content_box {
padding: 30rpx;
}
/* 内容列表 */
.content_single {
width: 630rpx;
height: 138rpx;
border: 1rpx solid #f5f5f5;
border-radius: 10rpx;
color: #333333;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding:0 30rpx;
margin-bottom: 30rpx;
}
.qy_used{
text-align: center;
}
.unit{
font-size: 20rpx;
color: #666666;
margin-top:10rpx;
}
... ...
// pages/shebei/shebeidetail/shebeidetail.js
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp();
function initChart1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '半年度开工曲线',
left: 'center'
},
toolbox: {
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04'],
axisLabel: {
interval: 0,
},
name: '日期'
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
},
min: 100,
max: 500,
splitNumber: 5,
name: '小时(h)'
},
series: [{
name: '',
type: 'line',
smooth: true,
color: '#FCB237',
data: [112, 115, 454, 135, 125, 135, 170],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
function initChart2(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['运行中', '待机中', '未运行'],
textStyle: {
fontSize: 14
},
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
name:'小时',
min:0,
max:24,
interval: 1,
},
yAxis: {
type: 'category',
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'],
name:'日期',
// itemStyle:{
// fontSize:0
// },
// splitNumber:1,
},
series: [{
name: '运行中',
type: 'bar',
stack: '总量',
barWidth: 12,
barGap:1,
label: {
normal: {
show: true,
position: 'insideRight',
}
},
// data: [12, 13, 14, 15, 16, 3, 4,5,9],
data:[2,2,3,4,5,6,7,8,9],
itemStyle: {
normal: { color: '#FFB974' }
},
},
{
name: '待机中',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [9,8,7,6,5,4,3,2,2],
itemStyle: {
normal: { color: '#FF8192' }
},
},
{
name: '未运行',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
itemStyle: {
normal: { color: '#C5C5C5' }
},
data: [13,14,14,14,14,14,14,14,13]
},
// {
// name: '视频广告',
// type: 'bar',
// stack: '总量',
// label: {
// normal: {
// show: true,
// position: 'insideRight'
// }
// },
// data: [150, 212, 201, 154, 190, 330, 410]
// },
// {
// name: '搜索引擎',
// type: 'bar',
// stack: '总量',
// label: {
// normal: {
// show: true,
// position: 'insideRight'
// }
// },
// data: [820, 832, 901, 934, 1290, 1330, 1320]
// }
]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function(res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '',
success: function() {},
fail: function() {}
}
},
/**
* 页面的初始数据
*/
data: {
state: 1,
statedate: "",
date: '',
ec: {
onInit: initChart1,
// onInit: initChart1
},
ec1: {
onInit: initChart2,
// onInit: initChart1
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({
statedate: app.monthnowDate(),
date: app.monthnowDate()
})
},
selectshebei(e) {
this.setData({
state: e.currentTarget.dataset.id
})
},
bindstateDateChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
statedate: e.detail.value
})
},
bindDateChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "开平机",
"usingComponents": {
"ec-canvas": "../../../ec-canvas/ec-canvas"
}
}
\ No newline at end of file
... ...
<view class="detailhead">
<view class="detailname {{state==1?'selactive':''}}" bindtap="selectshebei" data-id="1">设备状态</view>
<view class="detailname {{state==2?'selactive':''}}" bindtap="selectshebei" data-id="2">设备详情</view>
<view class="detailname {{state==3?'selactive':''}}" bindtap="selectshebei" data-id="3">设备月报</view>
</view>
<!-- 设备状态 -->
<view class="shebeizhuang" wx:if="{{state==1}}">
<view class="date">
<view class="dateleft">
<image src="/img/row.png"></image>
</view>
<view class="datetime">
<view class="datesel">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindstateDateChange" fields="month">
<view class="picker">
{{statedate}}
</view>
</picker>
</view>
<view class="datepic">
<image src="/img/row.png"></image>
</view>
</view>
<view class="dateright">
<image src="/img/row.png"></image>
</view>
</view>
<view class="containerzhu">
<ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec1 }}"></ec-canvas>
</view>
</view>
<!-- 设备详情 -->
<view class="shebeidetail" wx:if="{{state==2}}">
<view class="beginkaiji">开机时间</view>
<view class="hournum">13604.61</view>
<view class="xian"></view>
<view class="desbox">
<view class="desboxhead">设备描述</view>
<view class="destext">
该公司的生产线是专业设备,大设备中有小设备,小设备中还有更小的设备,而且这些设备并不是成套购买的,组装成生产线后不容易清点。在本案中,原本是两条生产线都抵押给银行了,但在法院现场清点中,我们发现还有相当数量的设备未设定抵押。在法院委托评估的报告中罗列了110项设备,而两家银行合计抵
</view>
</view>
<view class="shepic">
<view class="pictitle">设备照片</view>
<view class="piclist">
<view class="listitem">
<image src="/img/logo3.png"></image>
</view>
<view class="listitem">
<image src="/img/logo3.png"></image>
</view>
<view class="listitem">
<image src="/img/logo3.png"></image>
</view>
<view class="listitem">
<image src="/img/logo3.png"></image>
</view>
</view>
</view>
</view>
<!-- 设备月报 -->
<view class="yuebao" wx:if="{{state==3}}">
<view class="date">
<view class="dateleft">
<image src="/img/row.png"></image>
</view>
<view class="datetime">
<view class="datesel">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" fields="month">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<view class="datepic">
<image src="/img/row.png"></image>
</view>
</view>
<view class="dateright">
<image src="/img/row.png"></image>
</view>
</view>
<view class='shebeiworktime'>
<view class="tophour">
设备工作总时长(小时)
</view>
<view class="timenum">
<text class="timeleft">13604.61</text>
<text class="timeright">4.1%</text>
</view>
</view>
<view class="timelist">
<view class="timeitem">
<view class="timetop">
18044.32
</view>
<view class="timebottom">
总工作时长(h)
</view>
</view>
<view class="timeitem">
<view class="timetop">
18044.32
</view>
<view class="timebottom">
日均工作时长(h)
</view>
</view>
<view class="timeitem">
<view class="timetop">
18044.32
</view>
<view class="timebottom">
低于上月总工作时长(h)
</view>
</view>
<view class="timeitem">
<view class="timetop">
18044.32
</view>
<view class="timebottom">
低于上月日均工作时长(h)
</view>
</view>
</view>
<!-- 半年度开工曲线 -->
<view class="container">
<ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas>
</view>
</view>
\ No newline at end of file
... ...
.detailhead {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20rpx 69rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #f5f5f5;
}
.detailname {
color: #999;
font-size: 28rpx;
}
.selactive {
position: relative;
}
.selactive::after {
display: block;
content: '';
width: 130rpx;
border: 1rpx solid #ff9400;
background: #ff9400;
position: absolute;
left: -10rpx;
bottom: -20rpx;
}
.beginkaiji {
color: #666;
font-size: 28rpx;
margin-top: 52rpx;
text-align: center;
}
.hournum {
color: #ffb53c;
font-size: 80rpx;
text-align: center;
margin-top: 41rpx;
}
.xian {
width: 750rpx;
height: 20rpx;
background: #f6f7f8;
margin-top: 50rpx;
}
.desbox {
width: 710rpx;
margin: 0 auto;
border: 1rpx solid #d6d8db;
border-radius: 10rpx;
padding-bottom: 20rpx;
box-sizing: border-box;
margin-top: 50rpx;
}
.destext {
padding: 20rpx 20rpx 30rpx;
box-sizing: border-box;
color: #333;
font-size: 28rpx;
}
.desboxhead {
height: 70rpx;
background: #eef1f9;
line-height: 70rpx;
padding: 0 20rpx;
box-sizing: border-box;
color: #333;
font-size: 32rpx;
font-weight: bold;
}
.pictitle {
color: #333;
font-size: 32rpx;
font-weight: bold;
}
.shepic {
padding: 40rpx;
box-sizing: border-box;
}
.listitem {
width: 203rpx;
height: 203rpx;
font-size: 0;
margin-right: 20rpx;
margin-top: 15rpx;
}
.piclist {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 15rpx;
}
.date{
display:flex;
align-items: center;
justify-content: space-between;
height:70rpx;
background: #F3F5F8;
padding: 0 31rpx;
box-sizing: border-box
}
.dateleft {
width: 23rpx;
height:23rpx;
font-size: 0;
transform: rotate(180deg);
}
.dateright {
width: 23rpx;
height: 23rpx;
font-size: 0;
}
.datetime{
display:flex;
align-items: center
}
.datepic{
width:16rpx;
height:16rpx;
font-size: 0;
transform: rotate(90deg);
margin-left:12rpx;
}
.datesel{
color:#666666;
font-size: 28rpx;
}
.shebeiworktime{
width:750rpx;
height:369rpx;
background: #FFB53C;
overflow: hidden
}
.tophour{
color:#fff;
font-size: 28rpx;
opacity:0.4;
text-align: center;
margin-top:104rpx;
}
.timenum{
display:flex;
align-items: center;
justify-content: center;
margin-top:18rpx;
}
.timeleft{
color:#fff;
font-size: 80rpx;
}
.timeright{
color:#FF5D7E;
font-size: 24rpx;
}
.timelist{
display:flex;
align-items: center;
flex-wrap: wrap
}
.timeitem{
width:375rpx;
display:flex;
flex-direction: column;
justify-content: center;
padding: 18rpx 0;
box-sizing: border-box;
border-bottom:1rpx solid #f5f5f5;
}
.timeitem:nth-child(2n){
border-left:1rpx solid #f5f5f5;
}
.timetop{
color:#333333;
font-size: 40rpx;
text-align: center;
height:56rpx;
line-height: 56rpx;
}
.timebottom{
color:#666666;
font-size: 22rpx;
text-align: center;
margin-top:13rpx;
}
.container{
width:750rpx;
height:500rpx;
margin-top:48rpx;
}
.containerzhu{
width:750rpx;
height:1400rpx;
}
\ No newline at end of file
... ...
// pages/shebei/shebeilist/shebeilist.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
... ...
{
"navigationBarTitleText": "设备运行"
}
\ No newline at end of file
... ...
<view class="shebeinum">
<text class="she">设备数量:</text>
<text class="num"> 3</text>
</view>
<view class="shebelist">
<view class="shebielistitem">
<view class="car">
<view class="cartop">1车间:胶合机胶合机胶合机胶合机</view>
<view class="carbottom">运行中</view>
</view>
<view class="day">
<view class="daytop">27.5</view>
<view class="daybottom">昨日(小时)</view>
</view>
<view class="month">
<view class="monthtop">27.5</view>
<view class="monthbottom">上月(小时)</view>
</view>
<view class="rowimg">
<image src="img/demo (24).png"></image>
</view>
</view>
<view class="shebielistitem">
<view class="car">
<view class="cartop">1车间:胶合机胶合机胶合机胶合机</view>
<view class="carbottom yun">运行中</view>
</view>
<view class="day">
<view class="daytop">27.5</view>
<view class="daybottom">昨日(小时)</view>
</view>
<view class="month">
<view class="monthtop">27.5</view>
<view class="monthbottom">上月(小时)</view>
</view>
<view class="rowimg">
<image src="img/demo (24).png"></image>
</view>
</view>
<view class="shebielistitem">
<view class="car">
<view class="cartop">1车间:胶合机胶合机胶合机胶合机</view>
<view class="carbottom yun">运行中</view>
</view>
<view class="day">
<view class="daytop">27.5</view>
<view class="daybottom">昨日(小时)</view>
</view>
<view class="month">
<view class="monthtop">27.5</view>
<view class="monthbottom">上月(小时)</view>
</view>
<view class="rowimg">
<image src="img/demo (24).png"></image>
</view>
</view>
<view class="shebielistitem">
<view class="car">
<view class="cartop">1车间:胶合机胶合机胶合机胶合机</view>
<view class="carbottom yun">运行中</view>
</view>
<view class="day">
<view class="daytop">27.5</view>
<view class="daybottom">昨日(小时)</view>
</view>
<view class="month">
<view class="monthtop">27.5</view>
<view class="monthbottom">上月(小时)</view>
</view>
<view class="rowimg">
<image src="img/demo (24).png"></image>
</view>
</view>
<view class="shebielistitem">
<view class="car">
<view class="cartop">1车间:胶合机胶合机胶合机胶合机</view>
<view class="carbottom noyun">未运行</view>
</view>
<view class="day">
<view class="daytop">27.5</view>
<view class="daybottom">昨日(小时)</view>
</view>
<view class="month">
<view class="monthtop">27.5</view>
<view class="monthbottom">上月(小时)</view>
</view>
<view class="rowimg">
<image src="img/demo (24).png"></image>
</view>
</view>
</view>
\ No newline at end of file
... ...
page {
background: #fff;
}
.shebeinum {
color: #333;
font-size: 32rpx;
font-weight: bold;
padding: 30rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #f5f5f5;
border-top: 1rpx solid #f5f5f5;
position: relative;
}
.she{
margin-left:18rpx;
}
.shebeinum::before{
content:'';
display:block;
width:8rpx;
height:33rpx;
background: #FF9400FF;
position: absolute;
top:33rpx;
left:30rpx;
}
.num {
margin-left: 10rpx;
}
.shebelist {
padding: 30rpx;
box-sizing: border-box;
}
.shebielistitem {
width: 690rpx;
height: 138rpx;
border: 1rpx solid #f5f5f5;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.cartop {
width: 236rpx;
font-size: 28rpx;
color: #333;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.carbottom {
font-size: 20rpx;
margin-top: 10rpx;
}
.yun {
color: #eb483aff;
}
.noyun {
color: #538aeeff;
}
.daytop {
color: #333333ff;
font-size: 28rpx;
}
.daybottom {
color: #666666ff;
font-size: 20rpx;
margin-top: 10rpx;
}
.monthtop {
color: #333333ff;
font-size: 28rpx;
}
.monthbottom {
color: #666666ff;
font-size: 20rpx;
margin-top: 10rpx;
}
... ...
// 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
... ...
// pages/member/member.js
import * as echarts from '../../ec-canvas/echarts';
const app = getApp()
function initChart1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '',
left: 'center'
},
toolbox: {
},
xAxis: {
type: 'category',
boundaryGap: false,
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: {
interval: 1,
},
name: '日期'
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
},
min: 10,
max: 100,
splitNumber: 10,
name: '人数'
},
series: [{
name: '',
type: 'line',
smooth: true,
color: '#A8ACE8',
data: [41, 87, 35, 23, 42, 33, 40, 30, 50, 80],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function(res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '',
success: function() {},
fail: function() {}
}
},
/**
* 页面的初始数据
*/
data: {
state: 1,
timestate: 1,
ec1: {
onInit: initChart1,
},
statedate: '',
showdate: "",
watertime: '',
timesel: 1,
timearr: [
],
date: '',
datePickerValue: ['', '', ''],
datePickerIsShow: false,
datechu:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({
statedate: app.monthnowDate(),
watertime: app.newnowDate() + '-' + app.snewnowDate()
})
onLoad: function (options) {
console.log(this.data.statedate)
let newdate = this.data.statedate.split("-");
this.setData({
showdate: newdate[0] + '年' + newdate[1] + '月'
})
},
showDatePicker: function(e) {
// this.data.datePicker.show(this);
this.setData({
datePickerIsShow: true,
});
},
datePickerOnSureClick: function(e) {
console.log('datePickerOnSureClick');
console.log(e);
this.setData({
date: `${e.detail.value[0]}${e.detail.value[1]}${e.detail.value[2]}日`,
datePickerValue: e.detail.value,
datePickerIsShow: false,
datechu:false,
state:2
});
},
datePickerOnCancelClick: function(event) {
console.log('datePickerOnCancelClick');
console.log(event);
this.setData({
datePickerIsShow: false,
datechu:false,
state:2
});
},
changedate(e) {
console.log(e)
},
// 选择设备切换
selectshebei(e){
this.setData({
state:e.currentTarget.dataset.id
})
},
// 显示日期
datexianshi(){
this.setData({
datechu:true
})
//获取年
var date = new Date();
var obj = {}
var year = date.getFullYear();
var month = date.getMonth() + 1;
if (month < 10) {
month = '0' + month
}
var day = date.getDate();
if (day < 10) {
day = "0" + day
}
console.log()
if (typeof (day) == 'number') {
day = day.toString()
}
console.log(typeof (day))
this.setData({
datePickerValue: [year, month, day],
})
},
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
// 选择时间和摄像头切换
seltime(e) {
this.setData({
timestate: e.currentTarget.dataset.id
})
},
//开始时间和结束时间切换
xuanshijan(e) {
this.setData({
timesel: e.currentTarget.dataset.time
})
},
// 选择日期
bindstateDateChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
statedate: e.detail.value
})
let newdate = this.data.statedate.split("-");
this.setData({
showdate: newdate[0] + '年' + newdate[1] + '月'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
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
... ...
{
"navigationBarTitleText": "人员",
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas",
"date-picker": "../../components/date-picker/date-picker"
}
"usingComponents": {}
}
\ No newline at end of file
... ...