miniprogram / appui · 提交

转到一个项目

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

3423434

内嵌 并排对比
正在显示 12 个修改的文件 包含 744 行增加 和 89 行删除
1 { 1 {
2 "pages": [ 2 "pages": [
3 - "pages/qiyeyongdian/detail/detail",  
4 - "pages/changqu/changqu",  
5 "pages/shebei/shebeidetail/shebeidetail", 3 "pages/shebei/shebeidetail/shebeidetail",
  4 + "pages/changqu/changqu",
  5 + "pages/qiyeyongdian/detail/detail",
  6 +
  7 +
6 8
7 "pages/companybox/qiyedetail/qiyedetail", 9 "pages/companybox/qiyedetail/qiyedetail",
8 "pages/companybox/defendetail/defendetail", 10 "pages/companybox/defendetail/defendetail",
  1 +Component({
  2 + properties: {
  3 + value: {
  4 + type: Array,
  5 + value: [],
  6 + observer: "onValue"
  7 + },
  8 + isShow: {
  9 + type: Boolean,
  10 + value: false,
  11 + observer: "onShow"
  12 + }
  13 + },
  14 +
  15 + data: {
  16 + years: [],
  17 + months: [],
  18 + days: [],
  19 + tempYearPos: [0],
  20 + tempMonthPos: [0],
  21 + tempDayPos: [0],
  22 + showPicker: true
  23 + },
  24 +
  25 + attached: function() {
  26 + /**
  27 + * 初始化年月日
  28 + */
  29 + var date = new Date();
  30 + var years = [];
  31 + var months = [];
  32 + var days = [];
  33 +
  34 + for (let i = 1900; i <= date.getFullYear(); i++) {
  35 + years.push(i);
  36 + }
  37 +
  38 + for (let i = 1; i <= 12; i++) {
  39 + let month = 0;
  40 + month = i < 10 ? '0' + i : i;
  41 + months.push(month);
  42 + }
  43 +
  44 + days = this.getDays(date.getFullYear(), date.getMonth() + 1);
  45 +
  46 + this.setData({
  47 + years: years,
  48 + months: months,
  49 + days: days
  50 + });
  51 +
  52 + },
  53 +
  54 + methods: {
  55 + onTouchmask: function(event) {
  56 + },
  57 + onCacnelClick(e) {
  58 + this.triggerEvent('cancelclick', {});
  59 + },
  60 + onSureClick(e) {
  61 + var curYear = this.data.years[this.data.tempYearPos];
  62 + var curMonth = this.data.months[this.data.tempMonthPos];
  63 + var curDay = this.data.days[this.data.tempDayPos];
  64 + var value = [curYear, curMonth, curDay];
  65 + this.triggerEvent('sureclick', {
  66 + value: value,
  67 + });
  68 + },
  69 + year_onChange: function(e) {
  70 + //年改变，月要滑到一月，天要重新计算该年该月多少天
  71 + var days = [];
  72 + var curYear = this.data.years[e.detail.value];
  73 + days = this.getDays(curYear, 1);
  74 + this.setData({
  75 + days: days,
  76 + tempYearPos: e.detail.value,
  77 + tempMonthPos: [0],
  78 + tempDayPos: [0],
  79 + });
  80 + },
  81 + month_onChange: function(e) {
  82 + var days = [];
  83 + var curYear = this.data.years[this.data.tempYearPos];
  84 + var curMonth = this.data.months[e.detail.value];
  85 + days = this.getDays(curYear, curMonth);
  86 + this.setData({
  87 + days: days,
  88 + tempMonthPos: e.detail.value,
  89 + tempDayPos: [0],
  90 + });
  91 + },
  92 + day_onChange: function(e) {
  93 + this.setData({
  94 + tempDayPos: e.detail.value
  95 + });
  96 + },
  97 + onValue() {
  98 + //通过传进来的年月日,计算对应的index
  99 + var data = this.getRefreshData();
  100 + this.setData(data)
  101 + },
  102 + onShow() {
  103 + var data = this.getRefreshData();
  104 + data.showPicker = this.data.isShow;
  105 + this.setData(data)
  106 + },
  107 + getDays(year, month) {
  108 + var days = [];
  109 + month = parseInt(month, 10);
  110 + var date = new Date(year, month, 0);
  111 + var maxDay = date.getDate();
  112 + for (let i = 1; i <= maxDay; i++) {
  113 + let day = 0;
  114 + day = i < 10 ? '0' + i : i;
  115 + days.push(day);
  116 + }
  117 + return days;
  118 + },
  119 + getRefreshData() {
  120 + //通过传进来的年月日,计算对应的inde
  121 + if (this.data.years == null || this.data.years.length == 0) {
  122 + return {};
  123 + }
  124 +
  125 + var date = new Date();
  126 +
  127 + var tempYearPos = this.data.years.length - 1;
  128 + var tempMonthPos = date.getMonth();
  129 + var tempDayPos = date.getDate() - 1;
  130 +
  131 + for (var i = 0; i < this.data.years.length; i++) {
  132 + var item = this.data.years[i];
  133 + if (item == this.data.value[0]) {
  134 + tempYearPos = i;
  135 + break;
  136 + }
  137 + }
  138 +
  139 + for (var i = 0; i < this.data.months.length; i++) {
  140 + var item = this.data.months[i];
  141 + if (item == this.data.value[1]) {
  142 + tempMonthPos = i;
  143 + break;
  144 + }
  145 + }
  146 +
  147 + var days = [];
  148 + var curYear = this.data.years[tempYearPos];
  149 + days = this.getDays(curYear, this.data.months[tempMonthPos]);
  150 +
  151 + for (var i = 0; i < days.length; i++) {
  152 + var item = days[i];
  153 + if (item == this.data.value[2]) {
  154 + tempDayPos = i;
  155 + break;
  156 + }
  157 + }
  158 +
  159 + var data = {
  160 + days: days,
  161 + tempYearPos: [tempYearPos],
  162 + tempMonthPos: [tempMonthPos],
  163 + tempDayPos: [tempDayPos],
  164 + }
  165 + return data;
  166 + },
  167 + }
  168 +});
  1 +{
  2 + "component": true
  3 +}
  1 +<view wx:if="{{showPicker}}" class="date-picker">
  2 + <view class="date-picker-mask" catchtouchstart="onTouchmask"></view>
  3 + <view class="date-picker-content" catchtouchstart="onTouchmask">
  4 +
  5 + <view class="date-picker-content-line" catchtouchstart="onTouchmask"></view>
  6 + <view class="date-picker-content-center" catchtouchstart="onTouchmask">
  7 + <picker-view class="date-picker-content-item" indicator-style="height: 70rpx;" value="{{tempYearPos}}" bindchange="year_onChange">
  8 + <picker-view-column>
  9 + <view wx:for="{{years}}" wx:key="*this" style="height: 70rpx; text-align:center; font-size: 28rpx; line-height:70rpx; color:#353535;">{{item}}年</view>
  10 + </picker-view-column>
  11 + </picker-view>
  12 + <picker-view class="date-picker-content-item" indicator-style="height: 70rpx; " value="{{tempMonthPos}}" bindchange="month_onChange">
  13 + <picker-view-column>
  14 + <view wx:for="{{months}}" wx:key="*this" style="height: 70rpx; text-align:center; font-size: 28rpx; line-height:70rpx; color:#353535;">{{item}}月</view>
  15 + </picker-view-column>
  16 + </picker-view>
  17 + <picker-view class="date-picker-content-item" indicator-style="height: 70rpx; " value="{{tempDayPos}}" bindchange="day_onChange">
  18 + <picker-view-column>
  19 + <view wx:for="{{days}}" wx:key="*this" style="height: 70rpx; text-align:center; font-size: 28rpx; line-height:70rpx; color:#353535;">{{item}}日</view>
  20 + </picker-view-column>
  21 + </picker-view>
  22 + </view>
  23 +
  24 + <view class='date-picker-content-top' catchtouchstart="onTouchmask">
  25 + <view class="date-picker-content-cancel" hover-class="hover-class" catchtouchend="onCacnelClick">
  26 + 取消
  27 + </view>
  28 + <view class="date-picker-content-sure" hover-class="hover-class" catchtouchend="onSureClick">
  29 + 确认
  30 + </view>
  31 + </view>
  32 + </view>
  33 +</view>
  1 +@keyframes fade-in {
  2 + 0% {
  3 + top: 1000rpx;
  4 + opacity: 0;
  5 + }/*初始状态 透明度为0*/
  6 +
  7 + 40% {
  8 + top: 1000rpx;
  9 + opcity: 0;
  10 + }/*过渡状态 透明度为0*/
  11 +
  12 + 100% {
  13 + margin-top: 0rpx;
  14 + opacity: 1;
  15 + }/*结束状态 透明度为1*/
  16 +}
  17 +
  18 +/* .date-picker {
  19 + position: absolute;
  20 + top: 0;
  21 + left: 0;
  22 + margin: 0;
  23 + padding: 0;
  24 + width: 100%;
  25 + height: 100%;
  26 + z-index: 9;
  27 + animation: fade-in 0.5s ease 1 forwards;
  28 +} */
  29 +
  30 +/* .date-picker-mask {
  31 + position: absolute;
  32 + top: 0;
  33 + left: 0;
  34 + background-color: #353535;
  35 + opacity: 0.3;
  36 + width: 100%;
  37 + height: 100%;
  38 + z-index: 10;
  39 +} */
  40 +
  41 +.date-picker-content {
  42 + position: absolute;
  43 + top: 249rpx;
  44 + left: 0;
  45 + width: 750rpx;
  46 + height: 474rpx;
  47 + /* margin-right: 48rpx;
  48 + margin-left: 48rpx; */
  49 + /* border-radius: 8px; */
  50 + background-color: #fff;
  51 + z-index: 33;
  52 + overflow: hidden;
  53 +}
  54 +
  55 +.date-picker-content-top {
  56 + display: flex;
  57 + flex-direction: row;
  58 + align-items: center;
  59 + height: 90rpx;
  60 + justify-content: space-between;
  61 + border-top:1rpx solid #f5f5f5;
  62 + /* padding: 0 154rpx;
  63 + box-sizing: border-box */
  64 +}
  65 +
  66 +/* .hover-class {
  67 + background-color: #e6e6e6;
  68 +} */
  69 +
  70 +.date-picker-content-line {
  71 + background-color: #fff;
  72 + height: 1px;
  73 + width: 100%;
  74 +}
  75 +
  76 +.date-picker-content-cancel {
  77 + /* line-height: 50rpx;
  78 + height: 50rpx; */
  79 + width:375rpx;
  80 + color: #AFAFAF;
  81 + font-size: 34rpx;
  82 + text-align: center;
  83 + height:90rpx;
  84 + line-height: 90rpx;
  85 + border-right:1rpx solid #f5f5f5;
  86 + /* padding: 30rpx 48rpx; */
  87 +}
  88 +
  89 +.date-picker-content-sure {
  90 + /* line-height: 50rpx;
  91 + height: 50rpx; */
  92 + font-size: 34rpx;
  93 + color: #FF9400;
  94 + width:375rpx;
  95 + height:90rpx;
  96 + line-height: 90rpx;
  97 + text-align: center;
  98 +
  99 + /* padding: 30rpx 48rpx; */
  100 +}
  101 +
  102 +.date-picker-content-center {
  103 + display: flex;
  104 + flex-direction: row;
  105 + align-items: center;
  106 + height: 362rpx;
  107 + overflow: hidden;
  108 + margin-top: 6rpx;
  109 + margin-bottom: 6rpx;
  110 + justify-content: space-between;
  111 +}
  112 +
  113 +.date-picker-content-item {
  114 + width: 33.3%;
  115 + height: 320rpx;
  116 + text-align: center;
  117 +}
1 // pages/member/member.js 1 // pages/member/member.js
2 import * as echarts from '../../ec-canvas/echarts'; 2 import * as echarts from '../../ec-canvas/echarts';
3 -const app =getApp() 3 +const app = getApp()
4 4
5 5
6 function initChart1(canvas, width, height) { 6 function initChart1(canvas, width, height) {
@@ -42,23 +42,28 @@ function initChart1(canvas, width, height) { @@ -42,23 +42,28 @@ function initChart1(canvas, width, height) {
42 name: '人数' 42 name: '人数'
43 43
44 }, 44 },
45 - series: [  
46 - { 45 + series: [{
47 name: '', 46 name: '',
48 type: 'line', 47 type: 'line',
49 smooth: true, 48 smooth: true,
50 color: '#A8ACE8', 49 color: '#A8ACE8',
51 - data: [41, 87, 35, 23, 42, 33, 40,30,50,80], 50 + data: [41, 87, 35, 23, 42, 33, 40, 30, 50, 80],
52 markPoint: { 51 markPoint: {
53 - data: [  
54 - { type: 'max', name: '最大值' },  
55 - { type: 'min', name: '最小值' } 52 + data: [{
  53 + type: 'max',
  54 + name: '最大值'
  55 + },
  56 + {
  57 + type: 'min',
  58 + name: '最小值'
  59 + }
56 ] 60 ]
57 }, 61 },
58 markLine: { 62 markLine: {
59 - data: [  
60 - { type: 'average', name: '平均值' }  
61 - ] 63 + data: [{
  64 + type: 'average',
  65 + name: '平均值'
  66 + }]
62 }, 67 },
63 // areaStyle: { 68 // areaStyle: {
64 // // normal: { 69 // // normal: {
@@ -76,12 +81,12 @@ function initChart1(canvas, width, height) { @@ -76,12 +81,12 @@ function initChart1(canvas, width, height) {
76 81
77 Page({ 82 Page({
78 83
79 - onShareAppMessage: function (res) { 84 + onShareAppMessage: function(res) {
80 return { 85 return {
81 title: 'ECharts 可以在微信小程序中使用啦！', 86 title: 'ECharts 可以在微信小程序中使用啦！',
82 path: '', 87 path: '',
83 - success: function () { },  
84 - fail: function () { } 88 + success: function() {},
  89 + fail: function() {}
85 } 90 }
86 }, 91 },
87 92
@@ -89,26 +94,34 @@ Page({ @@ -89,26 +94,34 @@ Page({
89 * 页面的初始数据 94 * 页面的初始数据
90 */ 95 */
91 data: { 96 data: {
92 - state:1,  
93 - timestate:1, 97 + state: 1,
  98 + timestate: 1,
94 ec1: { 99 ec1: {
95 100
96 onInit: initChart1, 101 onInit: initChart1,
97 -  
98 - 102 +
  103 +
99 104
100 105
101 }, 106 },
102 statedate: '', 107 statedate: '',
103 showdate: "", 108 showdate: "",
104 watertime: '', 109 watertime: '',
105 - timesel:1 110 + timesel: 1,
  111 + timearr: [
  112 +
  113 +
  114 + ],
  115 + date: '',
  116 + datePickerValue: ['', '', ''],
  117 + datePickerIsShow: false,
  118 + datechu:false
106 }, 119 },
107 120
108 /** 121 /**
109 * 生命周期函数--监听页面加载 122 * 生命周期函数--监听页面加载
110 */ 123 */
111 - onLoad: function (options) { 124 + onLoad: function(options) {
112 this.setData({ 125 this.setData({
113 statedate: app.monthnowDate(), 126 statedate: app.monthnowDate(),
114 watertime: app.newnowDate() + '-' + app.snewnowDate() 127 watertime: app.newnowDate() + '-' + app.snewnowDate()
@@ -117,29 +130,100 @@ Page({ @@ -117,29 +130,100 @@ Page({
117 console.log(this.data.statedate) 130 console.log(this.data.statedate)
118 let newdate = this.data.statedate.split("-"); 131 let newdate = this.data.statedate.split("-");
119 this.setData({ 132 this.setData({
120 - showdate: newdate[0]+'年'+newdate[1]+'月' 133 + showdate: newdate[0] + '年' + newdate[1] + '月'
  134 + })
  135 +
  136 + },
  137 +
  138 + showDatePicker: function(e) {
  139 + // this.data.datePicker.show(this);
  140 + this.setData({
  141 + datePickerIsShow: true,
  142 + });
  143 + },
  144 +
  145 + datePickerOnSureClick: function(e) {
  146 + console.log('datePickerOnSureClick');
  147 + console.log(e);
  148 + this.setData({
  149 + date: `${e.detail.value[0]}年${e.detail.value[1]}月${e.detail.value[2]}日`,
  150 + datePickerValue: e.detail.value,
  151 + datePickerIsShow: false,
  152 + datechu:false,
  153 + state:2
  154 + });
  155 + },
  156 +
  157 + datePickerOnCancelClick: function(event) {
  158 + console.log('datePickerOnCancelClick');
  159 + console.log(event);
  160 + this.setData({
  161 + datePickerIsShow: false,
  162 + datechu:false,
  163 + state:2
  164 + });
  165 + },
  166 + changedate(e) {
  167 + console.log(e)
  168 + },
  169 + // 选择设备切换
  170 + selectshebei(e){
  171 + this.setData({
  172 + state:e.currentTarget.dataset.id
  173 + })
  174 + },
  175 +
  176 + // 显示日期
  177 + datexianshi(){
  178 + this.setData({
  179 + datechu:true
  180 + })
  181 +
  182 + //获取年
  183 + var date = new Date();
  184 + var obj = {}
  185 + var year = date.getFullYear();
  186 + var month = date.getMonth() + 1;
  187 + if (month < 10) {
  188 + month = '0' + month
  189 + }
  190 +
  191 + var day = date.getDate();
  192 + if (day < 10) {
  193 + day = "0" + day
  194 + }
  195 + console.log()
  196 + if (typeof (day) == 'number') {
  197 + day = day.toString()
  198 + }
  199 + console.log(typeof (day))
  200 + this.setData({
  201 + datePickerValue: [year, month, day],
121 }) 202 })
  203 +
122 }, 204 },
123 205
124 - selectshebei(e) { 206 +
  207 + bindDateChange: function (e) {
  208 + console.log('picker发送选择改变，携带值为', e.detail.value)
125 this.setData({ 209 this.setData({
126 - state: e.currentTarget.dataset.id 210 + date: e.detail.value
127 }) 211 })
128 }, 212 },
129 // 选择时间和摄像头切换 213 // 选择时间和摄像头切换
130 - seltime(e){ 214 + seltime(e) {
131 this.setData({ 215 this.setData({
132 - timestate:e.currentTarget.dataset.id 216 + timestate: e.currentTarget.dataset.id
133 }) 217 })
134 }, 218 },
135 219
136 //开始时间和结束时间切换 220 //开始时间和结束时间切换
137 - xuanshijan(e){ 221 + xuanshijan(e) {
138 this.setData({ 222 this.setData({
139 - timesel:e.currentTarget.dataset.time 223 + timesel: e.currentTarget.dataset.time
140 }) 224 })
141 }, 225 },
142 -// 选择日期 226 + // 选择日期
143 bindstateDateChange(e) { 227 bindstateDateChange(e) {
144 console.log('picker发送选择改变，携带值为', e.detail.value) 228 console.log('picker发送选择改变，携带值为', e.detail.value)
145 this.setData({ 229 this.setData({
@@ -153,49 +237,53 @@ Page({ @@ -153,49 +237,53 @@ Page({
153 /** 237 /**
154 * 生命周期函数--监听页面初次渲染完成 238 * 生命周期函数--监听页面初次渲染完成
155 */ 239 */
156 - onReady: function () { 240 + onReady: function() {
157 241
158 }, 242 },
159 243
160 /** 244 /**
161 * 生命周期函数--监听页面显示 245 * 生命周期函数--监听页面显示
162 */ 246 */
163 - onShow: function () { 247 + onShow: function() {
  248 +
  249 +
  250 +
164 251
  252 +
165 }, 253 },
166 254
167 /** 255 /**
168 * 生命周期函数--监听页面隐藏 256 * 生命周期函数--监听页面隐藏
169 */ 257 */
170 - onHide: function () { 258 + onHide: function() {
171 259
172 }, 260 },
173 261
174 /** 262 /**
175 * 生命周期函数--监听页面卸载 263 * 生命周期函数--监听页面卸载
176 */ 264 */
177 - onUnload: function () { 265 + onUnload: function() {
178 266
179 }, 267 },
180 268
181 /** 269 /**
182 * 页面相关事件处理函数--监听用户下拉动作 270 * 页面相关事件处理函数--监听用户下拉动作
183 */ 271 */
184 - onPullDownRefresh: function () { 272 + onPullDownRefresh: function() {
185 273
186 }, 274 },
187 275
188 /** 276 /**
189 * 页面上拉触底事件的处理函数 277 * 页面上拉触底事件的处理函数
190 */ 278 */
191 - onReachBottom: function () { 279 + onReachBottom: function() {
192 280
193 }, 281 },
194 282
195 /** 283 /**
196 * 用户点击右上角分享 284 * 用户点击右上角分享
197 */ 285 */
198 - onShareAppMessage: function () { 286 + onShareAppMessage: function() {
199 287
200 } 288 }
201 }) 289 })
1 { 1 {
2 "navigationBarTitleText": "人员", 2 "navigationBarTitleText": "人员",
3 "usingComponents": { 3 "usingComponents": {
4 - "ec-canvas": "../../ec-canvas/ec-canvas" 4 + "ec-canvas": "../../ec-canvas/ec-canvas",
  5 + "date-picker": "../../components/date-picker/date-picker"
5 } 6 }
  7 +
6 } 8 }
1 <!-- 日期弹出层 --> 1 <!-- 日期弹出层 -->
2 -<view class="register"> 2 +<view class="register" wx:if="{{datechu}}">
3 3
4 <view class="timewrap"> 4 <view class="timewrap">
5 5
@@ -25,16 +25,24 @@ @@ -25,16 +25,24 @@
25 </view> 25 </view>
26 26
27 <view class="timebox"> 27 <view class="timebox">
28 - <view class="timeboxitem">  
29 - <view class="itemcontent">2017</view>  
30 - <view class="itemcontent">01</view>  
31 - <view class="itemcontent">01</view>  
32 - </view>  
33 - 28 + <view class="timeboxitem {{sel==index?'timeboxactive':''}}" wx:for="{{timearr}}" wx:key="">
  29 + <view class="itemcontent">{{item.year}}</view>
  30 + <view class="itemcontent">{{item.month}}</view>
  31 + <view class="itemcontent">{{item.day}}</view>
  32 + </view>
  33 +
  34 +
34 </view> 35 </view>
  36 +
  37 + <!-- <text>当前日期：{{date}}</text>
  38 + <view bindtap="showDatePicker">选择日期</view> -->
  39 +
  40 + <date-picker id="date-picker" value="{{datePickerValue}}" isShow="{{datePickerIsShow}}" bindsureclick="datePickerOnSureClick" bindcancelclick="datePickerOnCancelClick" bindchange="bindDateChange" />
35 </view> 41 </view>
36 42
37 43
  44 +
  45 +
38 </view> 46 </view>
39 47
40 <view class="detailhead"> 48 <view class="detailhead">
@@ -87,7 +95,7 @@ @@ -87,7 +95,7 @@
87 <!-- 进出流水 --> 95 <!-- 进出流水 -->
88 96
89 <view class="lishui" wx:if="{{state==2}}"> 97 <view class="lishui" wx:if="{{state==2}}">
90 - <view class="date"> 98 + <view class="date" bindtap="datexianshi">
91 <view class="dateleft"> 99 <view class="dateleft">
92 <image src="/img/row.png"></image> 100 <image src="/img/row.png"></image>
93 </view> 101 </view>
@@ -106,4 +114,38 @@ @@ -106,4 +114,38 @@
106 </view> 114 </view>
107 </view> 115 </view>
108 116
  117 + <view class="shuibox">
  118 +
  119 + <view class="shihead">
  120 + <view class="headitem shijian">时间</view>
  121 + <view class="headitem shexiang">摄像头</view>
  122 + <view class="headitem derition">方向</view>
  123 +
  124 + </view>
  125 + <view class="shuicontent">
  126 + <view class="shuiitem">
  127 + <view class="shuiitemleft shijian">06.01</view>
  128 + <view class="shuiitemleft shexiang">大厅左上角</view>
  129 + <view class="shuiitemleft derition">进</view>
  130 + </view>
  131 + <view class="shuiitem">
  132 + <view class="shuiitemleft shijian">06.01</view>
  133 + <view class="shuiitemleft shexiang">大厅左上角</view>
  134 + <view class="shuiitemleft derition">进</view>
  135 + </view>
  136 +
  137 + <view class="shuiitem">
  138 + <view class="shuiitemleft shijian">06.01</view>
  139 + <view class="shuiitemleft shexiang">大厅左上角</view>
  140 + <view class="shuiitemleft derition">进</view>
  141 + </view>
  142 + <view class="shuiitem">
  143 + <view class="shuiitemleft shijian">06.01</view>
  144 + <view class="shuiitemleft shexiang">车间后方大转盘</view>
  145 + <view class="shuiitemleft derition">进</view>
  146 + </view>
  147 + </view>
  148 +
  149 + </view>
  150 +
109 </view> 151 </view>
@@ -103,7 +103,7 @@ @@ -103,7 +103,7 @@
103 103
104 .timewrap{ 104 .timewrap{
105 background: #fff; 105 background: #fff;
106 - height:757rpx; 106 + height:700rpx;
107 } 107 }
108 .timetwo{ 108 .timetwo{
109 display:flex; 109 display:flex;
@@ -136,10 +136,59 @@ @@ -136,10 +136,59 @@
136 } 136 }
137 .timebox{ 137 .timebox{
138 width:580rpx; 138 width:580rpx;
  139 + height:308rpx;
  140 + overflow-y: scroll;
139 margin:0 auto; 141 margin:0 auto;
140 } 142 }
141 .timeboxitem{ 143 .timeboxitem{
142 display:flex; 144 display:flex;
143 align-items: center; 145 align-items: center;
144 - justify-content: space-between 146 + justify-content: space-between;
  147 + padding: 30rpx 78rpx;
  148 + box-sizing: border-box;
  149 + background: #F9F8FE;
  150 + color:#999999;
  151 + font-size: 28rpx;
  152 + border-bottom:1rpx solid #f5f5f5;
  153 +}
  154 +.shihead{
  155 + display:flex;
  156 + align-items: center;
  157 + justify-content: space-between;
  158 + height:100rpx;
  159 + padding: 0 28rpx;
  160 + border-bottom:1rpx solid #f5f5f5;
  161 +
  162 +}
  163 +.headitem{
  164 + color:#666666;
  165 + font-size: 28rpx;
  166 + text-align: left
  167 +}
  168 +.shuiitem{
  169 + display:flex;
  170 + align-items: center;
  171 + justify-content: space-between;
  172 + padding: 34rpx 28rpx;
  173 + box-sizing: border-box;
  174 + border-bottom:1rpx solid #f5f5f5;
  175 +
  176 +}
  177 +.shuiitemleft{
  178 + color:#333333;
  179 + font-size: 24rpx;
  180 + text-align: left
  181 +}
  182 +.shijian{
  183 + width:60rpx;
  184 +}
  185 +.shexiang{
  186 + width:196rpx;
  187 + overflow: hidden;
  188 + text-overflow: ellipsis;
  189 + white-space: nowrap
  190 +
  191 +}
  192 +.derition{
  193 + width:56rpx;
145 } 194 }
1 // pages/shebei/shebeidetail/shebeidetail.js 1 // pages/shebei/shebeidetail/shebeidetail.js
2 import * as echarts from '../../../ec-canvas/echarts'; 2 import * as echarts from '../../../ec-canvas/echarts';
3 -const app=getApp(); 3 +const app = getApp();
4 4
5 function initChart1(canvas, width, height) { 5 function initChart1(canvas, width, height) {
6 const chart = echarts.init(canvas, null, { 6 const chart = echarts.init(canvas, null, {
@@ -41,23 +41,28 @@ function initChart1(canvas, width, height) { @@ -41,23 +41,28 @@ function initChart1(canvas, width, height) {
41 name: '小时(h)' 41 name: '小时(h)'
42 42
43 }, 43 },
44 - series: [  
45 - { 44 + series: [{
46 name: '', 45 name: '',
47 type: 'line', 46 type: 'line',
48 smooth: true, 47 smooth: true,
49 color: '#FCB237', 48 color: '#FCB237',
50 data: [112, 115, 454, 135, 125, 135, 170], 49 data: [112, 115, 454, 135, 125, 135, 170],
51 markPoint: { 50 markPoint: {
52 - data: [  
53 - { type: 'max', name: '最大值' },  
54 - { type: 'min', name: '最小值' } 51 + data: [{
  52 + type: 'max',
  53 + name: '最大值'
  54 + },
  55 + {
  56 + type: 'min',
  57 + name: '最小值'
  58 + }
55 ] 59 ]
56 }, 60 },
57 markLine: { 61 markLine: {
58 - data: [  
59 - { type: 'average', name: '平均值' }  
60 - ] 62 + data: [{
  63 + type: 'average',
  64 + name: '平均值'
  65 + }]
61 }, 66 },
62 // areaStyle: { 67 // areaStyle: {
63 // // normal: { 68 // // normal: {
@@ -72,14 +77,140 @@ function initChart1(canvas, width, height) { @@ -72,14 +77,140 @@ function initChart1(canvas, width, height) {
72 chart.setOption(option); 77 chart.setOption(option);
73 return chart; 78 return chart;
74 } 79 }
  80 +
  81 +
  82 +function initChart2(canvas, width, height) {
  83 + const chart = echarts.init(canvas, null, {
  84 + width: width,
  85 + height: height
  86 + });
  87 + canvas.setChart(chart);
  88 +
  89 + var option = {
  90 + tooltip: {
  91 + trigger: 'axis',
  92 + axisPointer: { // 坐标轴指示器，坐标轴触发有效
  93 + type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  94 + }
  95 + },
  96 + legend: {
  97 + data: ['运行中', '待机中', '未运行'],
  98 + textStyle: {
  99 + fontSize: 14
  100 + },
  101 +
  102 + },
  103 + grid: {
  104 + left: '3%',
  105 + right: '3%',
  106 + bottom: '3%',
  107 + containLabel: true
  108 + },
  109 + xAxis: {
  110 + type: 'value',
  111 + name:'小时',
  112 + min:0,
  113 + max:24,
  114 + interval: 1,
  115 +
  116 + },
  117 + yAxis: {
  118 + type: 'category',
  119 + 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'],
  120 + name:'日期',
  121 + // itemStyle:{
  122 + // fontSize:0
  123 + // },
  124 + // splitNumber:1,
  125 + },
  126 + series: [{
  127 + name: '运行中',
  128 + type: 'bar',
  129 + stack: '总量',
  130 +
  131 + barWidth: 12,
  132 + barGap:1,
  133 + label: {
  134 + normal: {
  135 + show: true,
  136 + position: 'insideRight',
  137 +
  138 + }
  139 + },
  140 + // data: [12, 13, 14, 15, 16, 3, 4,5,9],
  141 + data:[2,2,3,4,5,6,7,8,9],
  142 + itemStyle: {
  143 + normal: { color: '#FFB974' }
  144 + },
  145 + },
  146 + {
  147 + name: '待机中',
  148 + type: 'bar',
  149 + stack: '总量',
  150 + label: {
  151 + normal: {
  152 + show: true,
  153 + position: 'insideRight'
  154 + }
  155 + },
  156 + data: [9,8,7,6,5,4,3,2,2],
  157 + itemStyle: {
  158 + normal: { color: '#FF8192' }
  159 + },
  160 + },
  161 + {
  162 + name: '未运行',
  163 + type: 'bar',
  164 + stack: '总量',
  165 + label: {
  166 + normal: {
  167 + show: true,
  168 + position: 'insideRight'
  169 + }
  170 + },
  171 + itemStyle: {
  172 + normal: { color: '#C5C5C5' }
  173 + },
  174 + data: [13,14,14,14,14,14,14,14,13]
  175 + },
  176 + // {
  177 + // name: '视频广告',
  178 + // type: 'bar',
  179 + // stack: '总量',
  180 + // label: {
  181 + // normal: {
  182 + // show: true,
  183 + // position: 'insideRight'
  184 + // }
  185 + // },
  186 + // data: [150, 212, 201, 154, 190, 330, 410]
  187 + // },
  188 + // {
  189 + // name: '搜索引擎',
  190 + // type: 'bar',
  191 + // stack: '总量',
  192 + // label: {
  193 + // normal: {
  194 + // show: true,
  195 + // position: 'insideRight'
  196 + // }
  197 + // },
  198 + // data: [820, 832, 901, 934, 1290, 1330, 1320]
  199 + // }
  200 + ]
  201 + };
  202 +
  203 + chart.setOption(option);
  204 + return chart;
  205 +}
75 Page({ 206 Page({
76 207
77 - onShareAppMessage: function (res) { 208 + onShareAppMessage: function(res) {
78 return { 209 return {
79 title: 'ECharts 可以在微信小程序中使用啦！', 210 title: 'ECharts 可以在微信小程序中使用啦！',
80 path: '', 211 path: '',
81 - success: function () { },  
82 - fail: function () { } 212 + success: function() {},
  213 + fail: function() {}
83 } 214 }
84 }, 215 },
85 216
@@ -87,40 +218,46 @@ Page({ @@ -87,40 +218,46 @@ Page({
87 * 页面的初始数据 218 * 页面的初始数据
88 */ 219 */
89 data: { 220 data: {
90 - state:1, 221 + state: 1,
91 statedate: "", 222 statedate: "",
92 date: '', 223 date: '',
93 - 224 +
94 ec: { 225 ec: {
95 onInit: initChart1, 226 onInit: initChart1,
96 227
97 // onInit: initChart1 228 // onInit: initChart1
98 229
99 }, 230 },
  231 + ec1: {
  232 + onInit: initChart2,
  233 +
  234 + // onInit: initChart1
  235 +
  236 + },
100 }, 237 },
101 238
102 /** 239 /**
103 * 生命周期函数--监听页面加载 240 * 生命周期函数--监听页面加载
104 */ 241 */
105 - onLoad: function (options) { 242 + onLoad: function(options) {
106 this.setData({ 243 this.setData({
107 statedate: app.monthnowDate(), 244 statedate: app.monthnowDate(),
108 date: app.monthnowDate() 245 date: app.monthnowDate()
109 }) 246 })
110 }, 247 },
111 - selectshebei(e){ 248 + selectshebei(e) {
112 this.setData({ 249 this.setData({
113 - state:e.currentTarget.dataset.id 250 + state: e.currentTarget.dataset.id
114 }) 251 })
115 }, 252 },
116 253
117 - bindstateDateChange(e){ 254 + bindstateDateChange(e) {
118 console.log('picker发送选择改变，携带值为', e.detail.value) 255 console.log('picker发送选择改变，携带值为', e.detail.value)
119 this.setData({ 256 this.setData({
120 statedate: e.detail.value 257 statedate: e.detail.value
121 }) 258 })
122 }, 259 },
123 - bindDateChange: function (e) { 260 + bindDateChange: function(e) {
124 console.log('picker发送选择改变，携带值为', e.detail.value) 261 console.log('picker发送选择改变，携带值为', e.detail.value)
125 this.setData({ 262 this.setData({
126 date: e.detail.value 263 date: e.detail.value
@@ -129,49 +266,49 @@ Page({ @@ -129,49 +266,49 @@ Page({
129 /** 266 /**
130 * 生命周期函数--监听页面初次渲染完成 267 * 生命周期函数--监听页面初次渲染完成
131 */ 268 */
132 - onReady: function () { 269 + onReady: function() {
133 270
134 }, 271 },
135 272
136 /** 273 /**
137 * 生命周期函数--监听页面显示 274 * 生命周期函数--监听页面显示
138 */ 275 */
139 - onShow: function () { 276 + onShow: function() {
140 277
141 }, 278 },
142 279
143 /** 280 /**
144 * 生命周期函数--监听页面隐藏 281 * 生命周期函数--监听页面隐藏
145 */ 282 */
146 - onHide: function () { 283 + onHide: function() {
147 284
148 }, 285 },
149 286
150 /** 287 /**
151 * 生命周期函数--监听页面卸载 288 * 生命周期函数--监听页面卸载
152 */ 289 */
153 - onUnload: function () { 290 + onUnload: function() {
154 291
155 }, 292 },
156 293
157 /** 294 /**
158 * 页面相关事件处理函数--监听用户下拉动作 295 * 页面相关事件处理函数--监听用户下拉动作
159 */ 296 */
160 - onPullDownRefresh: function () { 297 + onPullDownRefresh: function() {
161 298
162 }, 299 },
163 300
164 /** 301 /**
165 * 页面上拉触底事件的处理函数 302 * 页面上拉触底事件的处理函数
166 */ 303 */
167 - onReachBottom: function () { 304 + onReachBottom: function() {
168 305
169 }, 306 },
170 307
171 /** 308 /**
172 * 用户点击右上角分享 309 * 用户点击右上角分享
173 */ 310 */
174 - onShareAppMessage: function () { 311 + onShareAppMessage: function() {
175 312
176 } 313 }
177 }) 314 })
@@ -6,29 +6,38 @@ @@ -6,29 +6,38 @@
6 6
7 <!-- 设备状态 --> 7 <!-- 设备状态 -->
8 8
9 -<view class="date">  
10 - <view class="dateleft">  
11 - <image src="/img/row.png"></image>  
12 - </view>  
13 - <view class="datetime">  
14 - <view class="datesel">  
15 - <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindstateDateChange" fields="month">  
16 - <view class="picker">  
17 - {{statedate}}  
18 - </view>  
19 - </picker> 9 +<view class="shebeizhuang" wx:if="{{state==1}}">
  10 +
  11 + <view class="date">
  12 + <view class="dateleft">
  13 + <image src="/img/row.png"></image>
20 </view> 14 </view>
  15 + <view class="datetime">
  16 + <view class="datesel">
  17 + <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindstateDateChange" fields="month">
  18 + <view class="picker">
  19 + {{statedate}}
  20 + </view>
  21 + </picker>
  22 + </view>
21 23
22 - <view class="datepic"> 24 + <view class="datepic">
  25 + <image src="/img/row.png"></image>
  26 + </view>
  27 + </view>
  28 +
  29 + <view class="dateright">
23 <image src="/img/row.png"></image> 30 <image src="/img/row.png"></image>
24 </view> 31 </view>
25 </view> 32 </view>
26 -  
27 - <view class="dateright">  
28 - <image src="/img/row.png"></image> 33 + <view class="containerzhu">
  34 + <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec1 }}"></ec-canvas>
29 </view> 35 </view>
  36 +
30 </view> 37 </view>
31 38
  39 +
  40 +
32 <!-- 设备详情 --> 41 <!-- 设备详情 -->
33 42
34 <view class="shebeidetail" wx:if="{{state==2}}"> 43 <view class="shebeidetail" wx:if="{{state==2}}">
@@ -20,8 +20,9 @@ @@ -20,8 +20,9 @@
20 display: block; 20 display: block;
21 content: ''; 21 content: '';
22 width: 130rpx; 22 width: 130rpx;
23 - height: 1rpx; 23 +
24 border: 1rpx solid #ff9400; 24 border: 1rpx solid #ff9400;
  25 + background: #ff9400;
25 position: absolute; 26 position: absolute;
26 left: -10rpx; 27 left: -10rpx;
27 bottom: -20rpx; 28 bottom: -20rpx;
@@ -203,4 +204,8 @@ @@ -203,4 +204,8 @@
203 height:500rpx; 204 height:500rpx;
204 margin-top:48rpx; 205 margin-top:48rpx;
205 206
  207 +}
  208 +.containerzhu{
  209 + width:750rpx;
  210 + height:1400rpx;
206 } 211 }