作者 lihongjuan

65232332

// pages/companybox/qiyeyuebao/qiyeyuebao.js
import * as echarts from '../../../ec-canvas/echarts';
const app=getApp()
// 开平机1
function initChart1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '开平机01每日开工时间',
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: 1,
max: 24,
splitNumber: 24,
name: '小时(h)'
},
series: [
{
name: '',
type: 'line',
smooth: true,
color: '#FCB237',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
// 开平机2
function initChart2(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '开平机02每日开工时间',
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: 1,
max: 24,
splitNumber: 24,
name: '小时(h)'
},
series: [
{
name: '',
type: 'line',
smooth: true,
color: '#FCB237',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
// 开工月累计时间
function initChart3(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: 1,
max: 24,
splitNumber: 24,
name: '小时(h)'
},
series: [
{
name: '',
type: 'line',
smooth: true,
color: '#AF56D7',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
// 半年度开工时间对比
function initChart4(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
chart.setOption(option);
return chart;
}
// 企业每日电耗
function initChart5(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: 1,
max: 24,
splitNumber: 24,
name: '小时(h)'
},
series: [
{
name: '',
type: 'line',
smooth: true,
color: '#6495F8',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
// 企业每日电耗
function initChart6(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: 1,
max: 24,
splitNumber: 24,
name: '小时(h)'
},
series: [
{
name: '',
type: 'line',
smooth: true,
color: '#6495F8',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
// areaStyle: {
// // normal: {
// // color: '#F8E9DD' //改变区域颜色
// // }
// },
},
]
};
chart.setOption(option);
return chart;
}
// 半年度企业电耗对比
function initChart7(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
chart.setOption(option);
return chart;
}
function initChart8(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
tooltip: {
trigger: 'axis'
},
title: {
text: '雷达图',
textStyle: {
color: 'rgba(221,221,221,1)', //标题颜色
fontSize: 14,
lineHeight: 20,
},
// 标题的位置,此时放在图的底边
left: 'center',
top: 'bottom',
},
legend: {
enabled: true
},
radar: [
{
indicator: [
{
text: '生产:90分',
max: 100,
},
{
text: '预警:60分',
max: 100
},
{
text: '稳定性:80分',
max: 100,
}
],
center: ['50%', '60%'],
radius: 80,
name: {
textStyle: {
fontSize: 14
}
},
},
],
series: [{
type: 'radar',
legend: {
},
itemStyle: {
normal: {
color: '#FBCB77',
areaStyle: {
type: 'default',
color: '#FBCB77',
},
lineStyle: {
color: '#FBCB77',
}
}
},
data: [{
value: [60, 73, 85],
// name: '某软件'
}]
},
]
};
chart.setOption(option);
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '',
success: function () { },
fail: function () { }
}
},
/**
* 页面的初始数据
*/
data: {
statedate:"",
ec1: {
onInit: initChart1
},
ec2: {
onInit: initChart2
},
ec3:{
onInit: initChart3
},
ec4: {
onInit: initChart4
},
ec5: {
onInit: initChart5
},
ec6: {
onInit: initChart6
},
ec7: {
onInit: initChart7
},
ec8: {
onInit: initChart8
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
statedate: app.monthnowDate(),
})
},
// 选择日期
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"
}
}
\ No newline at end of file
... ...
<!-- 头部日期 -->
<view class="date">
<view class="dateleft">
<image src="/img/whiterow.png"></image>
</view>
<view class="datetime">
<view class="datesel">
<picker mode="date" value="{{date}}" start="" end="" bindchange="bindstateDateChange" fields="month">
<view class="picker">
{{statedate}}
</view>
</picker>
</view>
<view class="datepic">
<image src="/img/whiterow.png"></image>
</view>
</view>
<view class="dateright">
<image src="/img/whiterow.png"></image>
</view>
</view>
<!-- 客观信息 -->
<view class="keguaninfo" wx:if="{{index==0}}">
<!-- 企业开工时间 -->
<view class="worktime">
<!-- 头部日期 -->
<!-- 企业设备月开工时间-->
<view class="shebeinum">
<text class="she">企业设备月开工时间</text>
</view>
<view class="kaijibox">
<!-- 开平机1 -->
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec1 }}"></ec-canvas>
</view>
<!-- 开平机2 -->
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec2 }}"></ec-canvas>
</view>
</view>
<view class="seemore">查看更多</view>
<!-- 企业得分 -->
<view class="companybox">
<view class="boxhead">
<view class="boxtopitem">企业名称</view>
<view class="boxtopitem">生产平稳性</view>
<view class="boxtopitem">生产趋势</view>
<view class="boxtopitem">生产状态</view>
<view class="boxtopitem">综合评分</view>
</view>
<view class="boxhead">
<view class="boxbottomitem">无锡市好事达人供 应链管理有限公司
</view>
<view class="boxbottomitem common">较平稳</view>
<view class="boxbottomitem common">下降</view>
<view class="boxbottomitem common">正常</view>
<view class="boxbottomitem common">87</view>
</view>
</view>
<!-- 分析-->
<view class="desbox">
<view class="desboxhead">分析</view>
<view class="destext">
在分析无锡市好事达供应链管理有限公司时,综合考虑无锡好事达供应链管理有限公司于2019年4月,目前处于
<text class="commonstate">正常状态</text>
</view>
</view>
</view>
<!-- 企业累计时间 -->
<view class='worktime'>
<!-- 企业开工月累计时间-->
<view class="shebeinum">
<text class="she">企业开工月累计时间</text>
</view>
<!-- 企业开工月累计时间 -->
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec3 }}"></ec-canvas>
</view>
<view class="atten">注:月累计开工时间=企业所有设备当月开工时间总和。</view>
<!-- 半年度开工时间对比 -->
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ec4}}"></ec-canvas>
</view>
<view class="desbox">
<view class="desboxhead">分析</view>
<view class="destext">
在分析无锡市好事达供应链管理有限公司时,综合考虑无锡好事达供应链管理有限公司于2019年4月,目前处于
<text class="commonstate">正常状态</text>
</view>
</view>
</view>
<!-- 企业开工率 -->
<view class="worktime">
<!-- 企业月开工率 -->
<view class="shebeinum">
<text class="she">企业月开工率</text>
</view>
<!-- 企业月开工率 -->
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec5 }}"></ec-canvas>
</view>
<view class="atten">注:企业开工率=企业每日平均开工时间/24。</view>
<view class="desbox">
<view class="desboxhead">分析</view>
<view class="destext">
无锡好事达供应链管理有限公司于
<text class="commonstate">2019年4月</text>,所有监测设备平均每日开工时间:
<text class="commonstate">5.14小时</text>,当月企业月开工率为:
<text class="commonstate">21.4%</text>
</view>
</view>
</view>
<!-- 企业当月用电情况 -->
<view class="worktime">
<!-- 企业当月用电情况 -->
<view class="shebeinum">
<text class="she">企业当月用电情况</text>
</view>
<!-- 企业每日耗电 -->
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec6}}"></ec-canvas>
</view>
<view class="containerzhe">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec7}}"></ec-canvas>
</view>
<view class="desbox">
<view class="desboxhead">分析</view>
<view class="destext">无锡好事达供应链管理有限公司
<text class="commonstate">2019年4月</text>总电耗:
<text class="commonstate">9025千瓦时</text>,日均电耗:
<text class="commonstate">300.8千瓦时 </text>,较上月减少
<text class="commonstate">1694千瓦时 </text>
</view>
</view>
</view>
</view>
<!-- 生产总评 -->
<view class="shengchanzog" wx:if="{{index==0}}">
<!-- 企业生产总评-->
<view class="shebeinum">
<text class="she">企业生产总评</text>
</view>
<view class="containerzhe con">
<ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec8 }}"></ec-canvas>
</view>
<!-- 企业得分 -->
<view class="companybox">
<view class="boxhead">
<view class="boxtopitem">企业名称</view>
<view class="boxtopitem">生产平稳性</view>
<view class="boxtopitem">生产趋势</view>
<view class="boxtopitem">生产状态</view>
<view class="boxtopitem">综合评分</view>
</view>
<view class="boxhead">
<view class="boxbottomitem">无锡市好事达人供 应链管理有限公司
</view>
<view class="boxbottomitem common">较平稳</view>
<view class="boxbottomitem common">下降</view>
<view class="boxbottomitem common">正常</view>
<view class="boxbottomitem common">87</view>
</view>
</view>
<view class="desbox">
<view class="desboxhead">分析</view>
<view class="destext">
在分析无锡市好事达供应链管理有限公司时,综合考虑该公司客观生产信息、生产稳定性、预警提示信息等维度,进行主客观综合评分。
</view>
</view>
</view>
<!-- 生产预警 -->
<view class="yujing">
<view class="yujinghead">
<view class="yuitem xuhao">序号</view>
<view class="yuitem time">生产预警时间</view>
<view class="yuitem reason">生产预警原因</view>
</view>
<view class="yujingbox">
<view class="yujingitem">
<view class="yuitem xuhao">1</view>
<view class="yuitem time">2019-06-12</view>
<view class="yuitem text">在分析无锡市好事达供应链管理有限公司时,综合考虑该公司客观生产信息、生产稳定性、预警提示信息等维度,进行主客观综合评分。</view>
</view>
<view class="yujingitem">
<view class="yuitem xuhao">1</view>
<view class="yuitem time">2019-06-12</view>
<view class="yuitem text">在分析无锡市好事达供应链管理有限公司时,综合考虑该公司客观生产信息、生产稳定性、预警提示信息等维度,进行主客观综合评分。</view>
</view>
<view class="yujingitem">
<view class="yuitem xuhao">1</view>
<view class="yuitem time">2019-06-12</view>
<view class="yuitem text">在分析无锡市好事达供应链管理有限公司时,综合考虑该公司客观生产信息、生产稳定性、预警提示信息等维度,进行主客观综合评分。</view>
</view>
<view class="yujingitem">
<view class="yuitem xuhao">1</view>
<view class="yuitem time">2019-06-12</view>
<view class="yuitem text">在分析无锡市好事达供应链管理有限公司时,综合考虑该公司客观生产信息、生产稳定性、预警提示信息等维度,进行主客观综合评分。</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
@import "../zhishudetail/member/member.wxss";
.date {
background: #ff9400;
}
.datesel {
color: #fff;
}
.containerzhe {
height: 800rpx;
margin-top: 40rpx;
}
.seemore {
width: 132rpx;
height: 49rpx;
background: rgba(211, 227, 255, 1);
opacity: 1;
border-radius: 4rpx;
font-size: 24rpx;
color: #538aee;
text-align: center;
line-height: 49rpx;
margin: 0 auto;
}
.boxhead {
display: flex;
align-items: center;
justify-content: space-between;
}
.companybox {
padding: 0 17rpx;
box-sizing: border-box;
margin-top: 40rpx;
}
.boxtopitem {
width: 190rpx;
padding: 47rpx 10rpx;
box-sizing: border-box;
color: #333;
font-size: 24rpx;
border-right: 1rpx solid #f5f5f5;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
text-align: center;
}
.boxtopitem:first-child {
border-left: 1rpx solid #f5f5f5;
}
.boxbottomitem {
width: 190rpx;
height:130rpx;
line-height: 130rpx;
padding: 10rpx;
box-sizing: border-box;
color: #333;
font-size: 24rpx;
border-right: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
text-align: center;
display: -webkit-box ;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
}
.boxbottomitem:first-child {
border-left: 1rpx solid #f5f5f5;
text-align: left;
line-height: 1.3;
}
.common {
color: #ff8e5a;
}
.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;
}
.commonstate {
color: #ff8e5a;
}
.worktime {
padding-bottom: 30rpx;
border-bottom: 20rpx solid #f6f7f8;
}
.atten{
color:#538AEE;
font-size: 20rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.con {
width: 100%;
height: 382rpx;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.con ec-canvas{
width:100%;
height:100%;
}
.yujinghead{
display:flex;
align-items: center;
/* justify-content: space-between; */
padding: 27rpx 40rpx;
box-sizing: border-box;
background: #F4F4F4;
color:#A0A0A0;
font-size: 24rpx;
}
.yuitem{
text-align: center
}
.xuhao{
width:48rpx;
}
.time{
/* width:116rpx; */
margin-left:40rpx;
}
.reason{
margin-left:49rpx;
width:56%;
}
.yujingbox{
padding: 0 40rpx;
box-sizing: border-box;
}
.yujingitem{
display:flex;
align-items: center;
/* justify-content: space-between; */
padding: 27rpx 0;
box-sizing: border-box;
color:#A0A0A0;
font-size: 24rpx;
border-bottom:1rpx solid #f5f5f5;
}
.text{
margin-left:49rpx;
width:56%;
text-align: left
}
\ 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: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['进车辆数', '出车辆数'],
textStyle: {
fontSize: 14
},
},
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,
textStyle: {
fontSize: 12
},
},
nameTextStyle: { //在name值存在下,设置name的样式
color: '#333',
fontStyle: 'normal',
},
},
yAxis: {
type: 'value',
min: 10,
max: 100,
splitNumber: 10,
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 10
},
}
},
series: [{
name: '进车辆数',
type: 'line',
color: '#FF5345',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
{
name: '出车辆数',
type: 'line',
color: '#6497F5',
data: [78, 20, 44, 33, 25, 45, 67],
markPoint: {
data: [{
name: '周最低',
value: 10,
xAxis: 1,
yAxis:10
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
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,
currentdate: true,
//开始日期
startdate: '',
//结束日期
enddate: '',
// 车辆状况日期
showModal: false,
monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
time: '',
year:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({
statedate: app.monthnowDate(),
watertime: app.newnowDate() + '-' + app.endate(),
startdate: app.newnowDate(),
enddate: app.endate()
})
//默认车辆状况日期
var date = new Date();
var month = date.getMonth() + 1;
var year=date.getFullYear();
this.setData({
showdate:year+'年'+month+'月'
})
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (month < 10) {
this.setData({
time: "(" + year+"." + "0" + month + ".01" + "-2019." + '0' + month + ".31" + ")"
})
} else {
this.setData({
time: "(" + year+"." + month + ".01" + "-2019." + month + ".31" + ")"
})
}
} else {
if (month < 10) {
this.setData({
time: "(" + year+"." + "0" + month + ".01" + "-2019." + '0' + month + ".30" + ")"
})
} else {
this.setData({
time: "(" + year+"." + month + ".01" + "-2019." + month + ".30" + ")"
})
}
}
},
//车辆状况日期
choice(e) {
//默认显示当前月份
this.setData({
showt: false
})
var date = new Date();
var year = date.getFullYear()
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 (month < 10) {
this.setData({
time: "(" + year + "." + "0" + index + ".01" + "-2019." + '0' + index + ".31" + ")"
})
} else {
this.setData({
time: "(" + year + "." + index + ".01" + "-2019." + index + ".31" + ")"
})
}
} else {
if (index < 10) {
this.setData({
time: "(" + year + "." + "0" + index + ".01" + "-2019." + '0' + index + ".30" + ")"
})
} else {
this.setData({
time: "(" + year + "." + index + ".01" + "-2019." + index + ".30" + ")"
})
}
}
this.setData({
changeColor: index - 1,
showdate: year + '年' + index + '月'
})
},
three() {
this.setData({
time: '近30天',
showt: !this.data.showt,
changeColor: -1
})
},
toShowModal(e) {
this.setData({
showModal: true
})
var date = new Date();
var mon = date.getMonth();
console.log(mon)
this.setData({
changeColor: mon
})
},
hideModal() {
this.setData({
showModal: false
});
},
showDatePicker: function(e) {
// this.data.datePicker.show(this);
this.setData({
datePickerIsShow: true,
});
},
datePickerOnSureClick: function(e) {
console.log('datePickerOnSureClick');
if (this.data.timesel == 1) {
console.log(e);
this.setData({
date: `${e.detail.value[0]}${e.detail.value[1]}${e.detail.value[2]}日`,
datePickerValue: e.detail.value,
datePickerIsShow: false,
currentdate: false,
startdate: e.detail.value[0] + '.' + e.detail.value[1] + "." + e.detail.value[2]
});
} else {
console.log(e);
this.setData({
date: `${e.detail.value[0]}${e.detail.value[1]}${e.detail.value[2]}日`,
datePickerValue: e.detail.value,
datePickerIsShow: false,
currentdate: false,
enddate: e.detail.value[0] + '.' + e.detail.value[1] + "." + e.detail.value[2]
});
}
},
datePickerOnCancelClick: function(event) {
console.log('datePickerOnCancelClick');
console.log(event);
this.setData({
datePickerIsShow: false,
currentdate: false,
});
},
changedate(e) {
console.log(e)
},
// 选择设备切换
selectshebei(e) {
this.setData({
state: e.currentTarget.dataset.id,
})
// if (e.currentdate.dataset.id == 1) {
// this.setData({
// ec1: {
// onInit: initChart1,
// },
// })
// }
},
// 显示日期
datexianshi() {
this.setData({
datechu: true,
currentdate: 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],
})
},
// 选择时间和摄像头切换
seltime(e) {
this.setData({
timestate: e.currentTarget.dataset.id
})
},
//开始时间和结束时间切换
xuanshijan(e) {
this.setData({
timesel: e.currentTarget.dataset.time,
currentdate: true
})
this.datexianshi()
},
//确定选择开始日期和结束日期
qudingxuandate() {
this.setData({
datechu: false,
watertime: this.data.startdate + '-' + this.data.enddate
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
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':''}}">{{startdate}}</view>
</view>
<view class="timebetin" bindtap="xuanshijan" data-time="2">
<view class="timetop {{timesel==2?'seltimeactive':''}}">结束时间</view>
<view class="timebottom {{timesel==2?'selnameactive':''}}">{{enddate}}</view>
</view>
</view>
<view class="timebox" wx:if="{{currentdate}}">
<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>
<view class="qudingdate" wx:else bindtap='qudingxuandate'>确定</view>
<view wx:if="{{currentdate}}">
<date-picker id="date-picker" value="{{datePickerValue}}" isShow="{{datePickerIsShow}}" bindsureclick="datePickerOnSureClick" bindcancelclick="datePickerOnCancelClick" />
</view>
</view>
</view>
<!-- 车辆状况日期弹出层 -->
<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="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" 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="date" bindtap='toShowModal'>
<view class="dateleft">
<image src="/img/row.png"></image>
</view>
<view class="datetime">
<view class="datesel">
{{time}}
</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
... ...
@import "../qiyeyongdian/detail/detail.wxss";
.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;
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: #666;
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: #333;
font-size: 28rpx;
display: flex;
justify-content: center;
}
.timewrap {
background: #fff;
/* height: 700rpx; */
padding-bottom: 40rpx;
box-sizing: border-box
}
.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: #999;
font-size: 24rpx;
}
.timebottom {
color: #999;
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: #999;
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: #666;
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: #333;
font-size: 24rpx;
text-align: left;
}
.shijian {
width: 60rpx;
}
.shexiang {
width: 196rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.derition {
width: 56rpx;
}
.qudingdate {
width: 260rpx;
height: 80rpx;
background: rgba(255, 148, 0, 1);
opacity: 1;
border-radius: 10rpx;
color:#fff;
font-size: 30rpx;
text-align: center;
line-height: 80rpx;
margin:8rpx auto 0;
}
... ...
// pages/companybox/zhishudetail/chengpindetail/chengpindetail.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
... ...
{
"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/ditu/ditu.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
... ...
{
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--pages/ditu/ditu.wxml-->
<text>pages/ditu/ditu.wxml</text>
... ...
/* pages/ditu/ditu.wxss */
\ No newline at end of file
... ...
module.exports = [{
"id": 1,
"name": "永州市中心医院",
"longitude": "111.62852107566833",
"latitude": "26.42142999357519"
},
{
"id": 2,
"name": "永州市中医院",
"longitude": "111.5972679762268",
"latitude": "26.44470581245983"
}
]
\ No newline at end of file
... ...