miniprogram / appui · 提交

转到一个项目

作者 lihongjuan
提交 f8ae27b3a1d427a18ffa03aad2e7afcfc6fda661 1 个父辈 3b0bb90c

3423434

内嵌 并排对比
正在显示 12 个修改的文件 包含 744 行增加 和 89 行删除
{
"pages": [
"pages/qiyeyongdian/detail/detail",
"pages/changqu/changqu",
"pages/shebei/shebeidetail/shebeidetail",
"pages/changqu/changqu",
"pages/qiyeyongdian/detail/detail",
"pages/companybox/qiyedetail/qiyedetail",
"pages/companybox/defendetail/defendetail",
... ...
Component({
properties: {
value: {
type: Array,
value: [],
observer: "onValue"
},
isShow: {
type: Boolean,
value: false,
observer: "onShow"
}
},
data: {
years: [],
months: [],
days: [],
tempYearPos: [0],
tempMonthPos: [0],
tempDayPos: [0],
showPicker: true
},
attached: function() {
/**
* 初始化年月日
*/
var date = new Date();
var years = [];
var months = [];
var days = [];
for (let i = 1900; i <= date.getFullYear(); i++) {
years.push(i);
}
for (let i = 1; i <= 12; i++) {
let month = 0;
month = i < 10 ? '0' + i : i;
months.push(month);
}
days = this.getDays(date.getFullYear(), date.getMonth() + 1);
this.setData({
years: years,
months: months,
days: days
});
},
methods: {
onTouchmask: function(event) {
},
onCacnelClick(e) {
this.triggerEvent('cancelclick', {});
},
onSureClick(e) {
var curYear = this.data.years[this.data.tempYearPos];
var curMonth = this.data.months[this.data.tempMonthPos];
var curDay = this.data.days[this.data.tempDayPos];
var value = [curYear, curMonth, curDay];
this.triggerEvent('sureclick', {
value: value,
});
},
year_onChange: function(e) {
//年改变，月要滑到一月，天要重新计算该年该月多少天
var days = [];
var curYear = this.data.years[e.detail.value];
days = this.getDays(curYear, 1);
this.setData({
days: days,
tempYearPos: e.detail.value,
tempMonthPos: [0],
tempDayPos: [0],
});
},
month_onChange: function(e) {
var days = [];
var curYear = this.data.years[this.data.tempYearPos];
var curMonth = this.data.months[e.detail.value];
days = this.getDays(curYear, curMonth);
this.setData({
days: days,
tempMonthPos: e.detail.value,
tempDayPos: [0],
});
},
day_onChange: function(e) {
this.setData({
tempDayPos: e.detail.value
});
},
onValue() {
//通过传进来的年月日,计算对应的index
var data = this.getRefreshData();
this.setData(data)
},
onShow() {
var data = this.getRefreshData();
data.showPicker = this.data.isShow;
this.setData(data)
},
getDays(year, month) {
var days = [];
month = parseInt(month, 10);
var date = new Date(year, month, 0);
var maxDay = date.getDate();
for (let i = 1; i <= maxDay; i++) {
let day = 0;
day = i < 10 ? '0' + i : i;
days.push(day);
}
return days;
},
getRefreshData() {
//通过传进来的年月日,计算对应的inde
if (this.data.years == null || this.data.years.length == 0) {
return {};
}
var date = new Date();
var tempYearPos = this.data.years.length - 1;
var tempMonthPos = date.getMonth();
var tempDayPos = date.getDate() - 1;
for (var i = 0; i < this.data.years.length; i++) {
var item = this.data.years[i];
if (item == this.data.value[0]) {
tempYearPos = i;
break;
}
}
for (var i = 0; i < this.data.months.length; i++) {
var item = this.data.months[i];
if (item == this.data.value[1]) {
tempMonthPos = i;
break;
}
}
var days = [];
var curYear = this.data.years[tempYearPos];
days = this.getDays(curYear, this.data.months[tempMonthPos]);
for (var i = 0; i < days.length; i++) {
var item = days[i];
if (item == this.data.value[2]) {
tempDayPos = i;
break;
}
}
var data = {
days: days,
tempYearPos: [tempYearPos],
tempMonthPos: [tempMonthPos],
tempDayPos: [tempDayPos],
}
return data;
},
}
});
\ No newline at end of file
... ...
{
"component": true
}
\ No newline at end of file
... ...
<view wx:if="{{showPicker}}" class="date-picker">
<view class="date-picker-mask" catchtouchstart="onTouchmask"></view>
<view class="date-picker-content" catchtouchstart="onTouchmask">
<view class="date-picker-content-line" catchtouchstart="onTouchmask"></view>
<view class="date-picker-content-center" catchtouchstart="onTouchmask">
<picker-view class="date-picker-content-item" indicator-style="height: 70rpx;" value="{{tempYearPos}}" bindchange="year_onChange">
<picker-view-column>
<view wx:for="{{years}}" wx:key="*this" style="height: 70rpx; text-align:center; font-size: 28rpx; line-height:70rpx; color:#353535;">{{item}}年</view>
</picker-view-column>
</picker-view>
<picker-view class="date-picker-content-item" indicator-style="height: 70rpx; " value="{{tempMonthPos}}" bindchange="month_onChange">
<picker-view-column>
<view wx:for="{{months}}" wx:key="*this" style="height: 70rpx; text-align:center; font-size: 28rpx; line-height:70rpx; color:#353535;">{{item}}月</view>
</picker-view-column>
</picker-view>
<picker-view class="date-picker-content-item" indicator-style="height: 70rpx; " value="{{tempDayPos}}" bindchange="day_onChange">
<picker-view-column>
<view wx:for="{{days}}" wx:key="*this" style="height: 70rpx; text-align:center; font-size: 28rpx; line-height:70rpx; color:#353535;">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
<view class='date-picker-content-top' catchtouchstart="onTouchmask">
<view class="date-picker-content-cancel" hover-class="hover-class" catchtouchend="onCacnelClick">
取消
</view>
<view class="date-picker-content-sure" hover-class="hover-class" catchtouchend="onSureClick">
确认
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
@keyframes fade-in {
0% {
top: 1000rpx;
opacity: 0;
}/*初始状态 透明度为0*/
40% {
top: 1000rpx;
opcity: 0;
}/*过渡状态 透明度为0*/
100% {
margin-top: 0rpx;
opacity: 1;
}/*结束状态 透明度为1*/
}
/* .date-picker {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 9;
animation: fade-in 0.5s ease 1 forwards;
} */
/* .date-picker-mask {
position: absolute;
top: 0;
left: 0;
background-color: #353535;
opacity: 0.3;
width: 100%;
height: 100%;
z-index: 10;
} */
.date-picker-content {
position: absolute;
top: 249rpx;
left: 0;
width: 750rpx;
height: 474rpx;
/* margin-right: 48rpx;
margin-left: 48rpx; */
/* border-radius: 8px; */
background-color: #fff;
z-index: 33;
overflow: hidden;
}
.date-picker-content-top {
display: flex;
flex-direction: row;
align-items: center;
height: 90rpx;
justify-content: space-between;
border-top:1rpx solid #f5f5f5;
/* padding: 0 154rpx;
box-sizing: border-box */
}
/* .hover-class {
background-color: #e6e6e6;
} */
.date-picker-content-line {
background-color: #fff;
height: 1px;
width: 100%;
}
.date-picker-content-cancel {
/* line-height: 50rpx;
height: 50rpx; */
width:375rpx;
color: #AFAFAF;
font-size: 34rpx;
text-align: center;
height:90rpx;
line-height: 90rpx;
border-right:1rpx solid #f5f5f5;
/* padding: 30rpx 48rpx; */
}
.date-picker-content-sure {
/* line-height: 50rpx;
height: 50rpx; */
font-size: 34rpx;
color: #FF9400;
width:375rpx;
height:90rpx;
line-height: 90rpx;
text-align: center;
/* padding: 30rpx 48rpx; */
}
.date-picker-content-center {
display: flex;
flex-direction: row;
align-items: center;
height: 362rpx;
overflow: hidden;
margin-top: 6rpx;
margin-bottom: 6rpx;
justify-content: space-between;
}
.date-picker-content-item {
width: 33.3%;
height: 320rpx;
text-align: center;
}
... ...
// pages/member/member.js
import * as echarts from '../../ec-canvas/echarts';
const app =getApp()
const app = getApp()
function initChart1(canvas, width, height) {
... ... @@ -42,23 +42,28 @@ function initChart1(canvas, width, height) {
name: '人数'
},
series: [
{
series: [{
name: '',
type: 'line',
smooth: true,
color: '#A8ACE8',
data: [41, 87, 35, 23, 42, 33, 40,30,50,80],
data: [41, 87, 35, 23, 42, 33, 40, 30, 50, 80],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
data: [{
type: 'average',
name: '平均值'
}]
},
// areaStyle: {
// // normal: {
... ... @@ -76,12 +81,12 @@ function initChart1(canvas, width, height) {
Page({
onShareAppMessage: function (res) {
onShareAppMessage: function(res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '',
success: function () { },
fail: function () { }
success: function() {},
fail: function() {}
}
},
... ... @@ -89,26 +94,34 @@ Page({
* 页面的初始数据
*/
data: {
state:1,
timestate:1,
state: 1,
timestate: 1,
ec1: {
onInit: initChart1,
},
statedate: '',
showdate: "",
watertime: '',
timesel:1
timesel: 1,
timearr: [
],
date: '',
datePickerValue: ['', '', ''],
datePickerIsShow: false,
datechu:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
onLoad: function(options) {
this.setData({
statedate: app.monthnowDate(),
watertime: app.newnowDate() + '-' + app.snewnowDate()
... ... @@ -117,29 +130,100 @@ Page({
console.log(this.data.statedate)
let newdate = this.data.statedate.split("-");
this.setData({
showdate: newdate[0]+'年'+newdate[1]+'月'
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],
})
},
selectshebei(e) {
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
state: e.currentTarget.dataset.id
date: e.detail.value
})
},
// 选择时间和摄像头切换
seltime(e){
seltime(e) {
this.setData({
timestate:e.currentTarget.dataset.id
timestate: e.currentTarget.dataset.id
})
},
//开始时间和结束时间切换
xuanshijan(e){
xuanshijan(e) {
this.setData({
timesel:e.currentTarget.dataset.time
timesel: e.currentTarget.dataset.time
})
},
// 选择日期
// 选择日期
bindstateDateChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
... ... @@ -153,49 +237,53 @@ Page({
/**
* 生命周期函数--监听页面初次渲染完成
*/
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"
"ec-canvas": "../../ec-canvas/ec-canvas",
"date-picker": "../../components/date-picker/date-picker"
}
}
\ No newline at end of file
... ...
<!-- 日期弹出层 -->
<view class="register">
<view class="register" wx:if="{{datechu}}">
<view class="timewrap">
... ... @@ -25,16 +25,24 @@
</view>
<view class="timebox">
<view class="timeboxitem">
<view class="itemcontent">2017</view>
<view class="itemcontent">01</view>
<view class="itemcontent">01</view>
</view>
<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">
... ... @@ -87,7 +95,7 @@
<!-- 进出流水 -->
<view class="lishui" wx:if="{{state==2}}">
<view class="date">
<view class="date" bindtap="datexianshi">
<view class="dateleft">
<image src="/img/row.png"></image>
</view>
... ... @@ -106,4 +114,38 @@
</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
... ...
... ... @@ -103,7 +103,7 @@
.timewrap{
background: #fff;
height:757rpx;
height:700rpx;
}
.timetwo{
display:flex;
... ... @@ -136,10 +136,59 @@
}
.timebox{
width:580rpx;
height:308rpx;
overflow-y: scroll;
margin:0 auto;
}
.timeboxitem{
display:flex;
align-items: center;
justify-content: space-between
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/shebei/shebeidetail/shebeidetail.js
import * as echarts from '../../../ec-canvas/echarts';
const app=getApp();
const app = getApp();
function initChart1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
... ... @@ -41,23 +41,28 @@ function initChart1(canvas, width, height) {
name: '小时(h)'
},
series: [
{
series: [{
name: '',
type: 'line',
smooth: true,
color: '#FCB237',
data: [112, 115, 454, 135, 125, 135, 170],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
data: [{
type: 'average',
name: '平均值'
}]
},
// areaStyle: {
// // normal: {
... ... @@ -72,14 +77,140 @@ function initChart1(canvas, width, height) {
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) {
onShareAppMessage: function(res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '',
success: function () { },
fail: function () { }
success: function() {},
fail: function() {}
}
},
... ... @@ -87,40 +218,46 @@ Page({
* 页面的初始数据
*/
data: {
state:1,
state: 1,
statedate: "",
date: '',
ec: {
onInit: initChart1,
// onInit: initChart1
},
ec1: {
onInit: initChart2,
// onInit: initChart1
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
onLoad: function(options) {
this.setData({
statedate: app.monthnowDate(),
date: app.monthnowDate()
})
},
selectshebei(e){
selectshebei(e) {
this.setData({
state:e.currentTarget.dataset.id
state: e.currentTarget.dataset.id
})
},
bindstateDateChange(e){
bindstateDateChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
statedate: e.detail.value
})
},
bindDateChange: function (e) {
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
... ... @@ -129,49 +266,49 @@ Page({
/**
* 生命周期函数--监听页面初次渲染完成
*/
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
... ...
... ... @@ -6,29 +6,38 @@
<!-- 设备状态 -->
<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 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">
<view class="datepic">
<image src="/img/row.png"></image>
</view>
</view>
<view class="dateright">
<image src="/img/row.png"></image>
</view>
</view>
<view class="dateright">
<image src="/img/row.png"></image>
<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}}">
... ...
... ... @@ -20,8 +20,9 @@
display: block;
content: '';
width: 130rpx;
height: 1rpx;
border: 1rpx solid #ff9400;
background: #ff9400;
position: absolute;
left: -10rpx;
bottom: -20rpx;
... ... @@ -203,4 +204,8 @@
height:500rpx;
margin-top:48rpx;
}
.containerzhu{
width:750rpx;
height:1400rpx;
}
\ No newline at end of file
... ...