合并分支 'lhj' 到 'master'
Lhj 查看合并请求 !10
正在显示
39 个修改的文件
包含
3846 行增加
和
870 行删除
| 1 | -// pages/qiyeyongdian/detail/detail.js | ||
| 2 | - | ||
| 3 | -import * as echarts from '../../ec-canvas/echarts'; | ||
| 4 | - | ||
| 5 | -const app = getApp(); | ||
| 6 | -var Chart = null; | 1 | +// pages/chengpin/chengpin.js |
| 7 | Page({ | 2 | Page({ |
| 8 | 3 | ||
| 9 | /** | 4 | /** |
| 10 | * 页面的初始数据 | 5 | * 页面的初始数据 |
| 11 | */ | 6 | */ |
| 12 | data: { | 7 | data: { |
| 13 | - showModal: false, | ||
| 14 | - modalTitle: ["选择时间", "选择地磅", "选择货物"], | ||
| 15 | - modalNum: 2, | ||
| 16 | - monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", ], | ||
| 17 | - time: '2019.01.01-2019.01.31', | ||
| 18 | - changeColor: 0, | ||
| 19 | - tabList: ["出库", "流水"], | ||
| 20 | - tabNum: 0, | ||
| 21 | - tableTitle: ["时间", "地磅", "货物名称", "重量（T）"], | ||
| 22 | - trList: [{ | ||
| 23 | - date: "09.12", | ||
| 24 | - position: "大厅左上角", | ||
| 25 | - name: "名字妙哉妙", | ||
| 26 | - num: "18", | ||
| 27 | - btn: "详情" | ||
| 28 | - }, | ||
| 29 | - { | ||
| 30 | - date: "09.12", | ||
| 31 | - position: "大厅左上角", | ||
| 32 | - name: "啦啦啦啦啦啦啦啦啦啦", | ||
| 33 | - num: "18", | ||
| 34 | - btn: "详情" | ||
| 35 | - }, | ||
| 36 | - { | ||
| 37 | - date: "09.12", | ||
| 38 | - position: "车间后方大转盘", | ||
| 39 | - name: "啦啦啦啦啦啦啦啦啦啦", | ||
| 40 | - num: "18", | ||
| 41 | - btn: "详情" | ||
| 42 | - }, | ||
| 43 | - ], | ||
| 44 | - ec: { | ||
| 45 | - | ||
| 46 | - onInit: function(canvas, width, height) { | ||
| 47 | - | ||
| 48 | - chart = echarts.init(canvas, null, { | ||
| 49 | - | ||
| 50 | - width: width, | ||
| 51 | - | ||
| 52 | - height: height | ||
| 53 | - | ||
| 54 | - }); | ||
| 55 | - | ||
| 56 | - canvas.setChart(chart); | ||
| 57 | - | ||
| 58 | - return chart; | ||
| 59 | 8 | ||
| 60 | }, | 9 | }, |
| 61 | 10 | ||
| 62 | - lazyLoad: true, // 延迟加载 | ||
| 63 | - showt: false | ||
| 64 | - }, | ||
| 65 | - | ||
| 66 | - }, | ||
| 67 | - changeTab(e) { | ||
| 68 | - this.setData({ | ||
| 69 | - tabNum: e.currentTarget.dataset.id | ||
| 70 | - }) | ||
| 71 | - | ||
| 72 | - }, | ||
| 73 | - toShowModal(e) { | ||
| 74 | - this.setData({ | ||
| 75 | - showModal: true | ||
| 76 | - }) | ||
| 77 | - }, | ||
| 78 | - | ||
| 79 | - hideModal() { | ||
| 80 | - this.setData({ | ||
| 81 | - showModal: false | ||
| 82 | - }); | ||
| 83 | - }, | ||
| 84 | - choice(e) { | ||
| 85 | - | ||
| 86 | - this.setData({ | ||
| 87 | - changeColor: e.currentTarget.dataset.id | ||
| 88 | - }) | ||
| 89 | - }, | ||
| 90 | /** | 11 | /** |
| 91 | * 生命周期函数--监听页面加载 | 12 | * 生命周期函数--监听页面加载 |
| 92 | */ | 13 | */ |
| 93 | - onLoad: function(options) { | ||
| 94 | - | ||
| 95 | - this.echartsComponnet = this.selectComponent('#mychart'); | ||
| 96 | - | ||
| 97 | - | ||
| 98 | - //如果是第一次绘制 | ||
| 99 | - | ||
| 100 | - if (!Chart) { | ||
| 101 | - this.init_echarts(); //初始化图表 | ||
| 102 | - | ||
| 103 | - | ||
| 104 | - } else { | ||
| 105 | - | ||
| 106 | - this.setOption(Chart); //更新数据 | ||
| 107 | - | ||
| 108 | - } | ||
| 109 | - | ||
| 110 | - }, | ||
| 111 | - //初始化图表 | ||
| 112 | - | ||
| 113 | - init_echarts: function() { | ||
| 114 | - | ||
| 115 | - this.echartsComponnet.init((canvas, width, height) => { | ||
| 116 | - | ||
| 117 | - // 初始化图表 | ||
| 118 | - | ||
| 119 | - const Chart = echarts.init(canvas, null, { | ||
| 120 | - | ||
| 121 | - width: width, | ||
| 122 | - | ||
| 123 | - height: height | ||
| 124 | - | ||
| 125 | - }); | ||
| 126 | - | ||
| 127 | - this.setOption(Chart) | ||
| 128 | - | ||
| 129 | - // 注意这里一定要返回 chart 实例，否则会影响事件处理等 | ||
| 130 | - | ||
| 131 | - return Chart; | ||
| 132 | - | ||
| 133 | - }); | ||
| 134 | - | ||
| 135 | - }, | ||
| 136 | - | ||
| 137 | - setOption: function(Chart) { | ||
| 138 | - | ||
| 139 | - Chart.clear(); // 清除 | ||
| 140 | - | ||
| 141 | - Chart.setOption(this.getOption()); //获取新数据 | ||
| 142 | - | ||
| 143 | - }, | ||
| 144 | - | ||
| 145 | - // 图表配置项 | ||
| 146 | - | ||
| 147 | - getOption() { | ||
| 148 | - | ||
| 149 | - var self = this; | ||
| 150 | - | ||
| 151 | - var option = { | ||
| 152 | - | ||
| 153 | - color: ["#FFF"], //图例图标颜色 | ||
| 154 | - // lineStyle:{//阴影 | ||
| 155 | - // shadowColor: '#6495F8', | ||
| 156 | - // shadowBlur: 10 | ||
| 157 | - // }, | ||
| 158 | - xAxis: { //横坐标 | ||
| 159 | - | ||
| 160 | - type: 'category', | ||
| 161 | - | ||
| 162 | - name: '日期', //横坐标名称 | ||
| 163 | - | ||
| 164 | - nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 165 | - | ||
| 166 | - color: '#333', | ||
| 167 | - | ||
| 168 | - fontStyle: 'normal' | 14 | + onLoad: function (options) { |
| 169 | 15 | ||
| 170 | }, | 16 | }, |
| 171 | - axisLabel: { | ||
| 172 | - interval: 0, | ||
| 173 | - }, | ||
| 174 | - boundaryGap: false, //1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上 | ||
| 175 | - | ||
| 176 | - 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'], | ||
| 177 | - | ||
| 178 | - axisLabel: { | ||
| 179 | - | ||
| 180 | - textStyle: { | ||
| 181 | - | ||
| 182 | - fontSize: 13, | ||
| 183 | - | ||
| 184 | - color: '#5D5D5D' | ||
| 185 | - | ||
| 186 | - } | ||
| 187 | - | ||
| 188 | - } | ||
| 189 | - | ||
| 190 | - }, | ||
| 191 | - | ||
| 192 | - yAxis: { //纵坐标 | ||
| 193 | - | ||
| 194 | - type: 'value', | ||
| 195 | - | ||
| 196 | - position: 'left', | ||
| 197 | - | ||
| 198 | - name: '重量', //纵坐标名称 | ||
| 199 | - | ||
| 200 | - nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 201 | - | ||
| 202 | - color: '#333333', | ||
| 203 | - | ||
| 204 | - fontStyle: 'normal' | ||
| 205 | - | ||
| 206 | - }, | ||
| 207 | - | ||
| 208 | - splitNumber: 10, //坐标轴的分割段数 | ||
| 209 | - | ||
| 210 | - | ||
| 211 | - min: 0, | ||
| 212 | - | ||
| 213 | - max: 100, | ||
| 214 | 17 | ||
| 215 | - }, | ||
| 216 | - | ||
| 217 | - series: [{ | ||
| 218 | - | ||
| 219 | - type: 'line', | ||
| 220 | - | ||
| 221 | - 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], | ||
| 222 | - | ||
| 223 | - symbol: 'true', | ||
| 224 | - | ||
| 225 | - itemStyle: { | ||
| 226 | - | ||
| 227 | - normal: { | ||
| 228 | - | ||
| 229 | - lineStyle: { | ||
| 230 | - | ||
| 231 | - color: '#ED3676' | ||
| 232 | - | ||
| 233 | - } | ||
| 234 | - | ||
| 235 | - } | ||
| 236 | - | ||
| 237 | - }, | ||
| 238 | - // areaStyle: { | ||
| 239 | - // normal: { | ||
| 240 | - // color: '#6495F8' //改变区域颜色 | ||
| 241 | - // } | ||
| 242 | - // }, | ||
| 243 | - | ||
| 244 | - }], | ||
| 245 | - | ||
| 246 | - } | ||
| 247 | - | ||
| 248 | - return option; | ||
| 249 | - | ||
| 250 | - }, | ||
| 251 | /** | 18 | /** |
| 252 | * 生命周期函数--监听页面初次渲染完成 | 19 | * 生命周期函数--监听页面初次渲染完成 |
| 253 | */ | 20 | */ |
| 254 | - onReady: function() { | 21 | + onReady: function () { |
| 255 | 22 | ||
| 256 | }, | 23 | }, |
| 257 | 24 | ||
| 258 | /** | 25 | /** |
| 259 | * 生命周期函数--监听页面显示 | 26 | * 生命周期函数--监听页面显示 |
| 260 | */ | 27 | */ |
| 261 | - onShow: function() { | ||
| 262 | - this.echartsComponnet = this.selectComponent('#mychart'); | 28 | + onShow: function () { |
| 263 | 29 | ||
| 264 | - | ||
| 265 | - //如果是第一次绘制 | ||
| 266 | - | ||
| 267 | - if (!Chart) { | ||
| 268 | - this.init_echarts(); //初始化图表 | ||
| 269 | - | ||
| 270 | - | ||
| 271 | - } else { | ||
| 272 | - | ||
| 273 | - this.setOption(Chart); //更新数据 | ||
| 274 | - | ||
| 275 | - } | ||
| 276 | }, | 30 | }, |
| 277 | 31 | ||
| 278 | /** | 32 | /** |
| 279 | * 生命周期函数--监听页面隐藏 | 33 | * 生命周期函数--监听页面隐藏 |
| 280 | */ | 34 | */ |
| 281 | - onHide: function() { | 35 | + onHide: function () { |
| 282 | 36 | ||
| 283 | }, | 37 | }, |
| 284 | 38 | ||
| 285 | /** | 39 | /** |
| 286 | * 生命周期函数--监听页面卸载 | 40 | * 生命周期函数--监听页面卸载 |
| 287 | */ | 41 | */ |
| 288 | - onUnload: function() { | 42 | + onUnload: function () { |
| 289 | 43 | ||
| 290 | }, | 44 | }, |
| 291 | 45 | ||
| 292 | /** | 46 | /** |
| 293 | * 页面相关事件处理函数--监听用户下拉动作 | 47 | * 页面相关事件处理函数--监听用户下拉动作 |
| 294 | */ | 48 | */ |
| 295 | - onPullDownRefresh: function() { | 49 | + onPullDownRefresh: function () { |
| 296 | 50 | ||
| 297 | }, | 51 | }, |
| 298 | 52 | ||
| 299 | /** | 53 | /** |
| 300 | * 页面上拉触底事件的处理函数 | 54 | * 页面上拉触底事件的处理函数 |
| 301 | */ | 55 | */ |
| 302 | - onReachBottom: function() { | 56 | + onReachBottom: function () { |
| 303 | 57 | ||
| 304 | }, | 58 | }, |
| 305 | 59 | ||
| 306 | /** | 60 | /** |
| 307 | * 用户点击右上角分享 | 61 | * 用户点击右上角分享 |
| 308 | */ | 62 | */ |
| 309 | - onShareAppMessage: function() { | 63 | + onShareAppMessage: function () { |
| 310 | 64 | ||
| 311 | } | 65 | } |
| 312 | }) | 66 | }) |
| 1 | -<!--pages/qiyeyongdian/detail/detail.wxml--> | ||
| 2 | -<!-- 货物信息 --> | ||
| 3 | -<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view> | ||
| 4 | -<view wx:if="{{showModal}}"> | ||
| 5 | - <view class="modal-content"> | ||
| 6 | - <!-- 选项卡 --> | ||
| 7 | - <view class="modal_year"> | ||
| 8 | - <view class="modal_single {{modalNum == index ?'modal_choice':''}}" wx:for="{{modalTitle}}" wx:key="">{{item}}</view> | ||
| 9 | - </view> | ||
| 10 | - <!-- 月份 --> | ||
| 11 | - <scroll-view scroll-y style="height: 400px;"> | ||
| 12 | - <view class="modal_month"> | ||
| 13 | - <view class="month_single {{changeColor == index?'change':''}}" wx:for="{{monthList}}" wx:key="" data-id="{{index}}" catchtap="choice">{{item}}</view> | ||
| 14 | - </view> | ||
| 15 | - </scroll-view> | ||
| 16 | - <view class='btns'> | ||
| 17 | - <view class="cacle" bindtap="hideModal">取消</view> | ||
| 18 | - <view class="cacle sure" bindtap="hideModal">确定</view> | ||
| 19 | - </view> | ||
| 20 | - </view> | ||
| 21 | -</view> | ||
| 22 | -<!-- 选项卡 --> | ||
| 23 | -<view class="tab"> | ||
| 24 | - <view wx:for="{{tabList}}" wx:key="" class="tab_single {{tabNum == index?'tab_border':''}}" bindtap='changeTab' data-id="{{index}}">{{item}}</view> | ||
| 25 | -</view> | ||
| 26 | -<!-- 月份 --> | ||
| 27 | -<view class="search_month"> | ||
| 28 | - <view class="rowimg"> | ||
| 29 | - <image src='/img/row.png' class="left"></image> | ||
| 30 | - </view> | ||
| 31 | - <view class="date_time"> | ||
| 32 | - <!-- 出库 --> | ||
| 33 | - <view wx:if="{{tabNum == 0}}">2019.06</view> | ||
| 34 | - <!-- 流水 --> | ||
| 35 | - <view wx:if="{{tabNum == 1}}" bindtap='toShowModal'>{{time}}</view> | ||
| 36 | - <view class="rowimg"> | ||
| 37 | - <image src='/img/row.png' class="down"></image> | ||
| 38 | - </view> | ||
| 39 | - </view> | ||
| 40 | - <view class="rowimg"> | ||
| 41 | - <image src='/img/row.png'></image> | ||
| 42 | - </view> | ||
| 43 | -</view> | ||
| 44 | -<!-- 出库 --> | ||
| 45 | -<view wx:if="{{tabNum == 0}}"> | ||
| 46 | - <view class="cp_title"> | ||
| 47 | - 成品出库信息 | ||
| 48 | - </view> | ||
| 49 | - <view class="total"> | ||
| 50 | - 重量总计（吨） | ||
| 51 | - <text>1000</text> | ||
| 52 | - </view> | ||
| 53 | - <!-- 折线图 --> | ||
| 54 | - <view class="charts_line"> | ||
| 55 | - <view class="chart"> | ||
| 56 | - <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas> | ||
| 57 | - </view> | ||
| 58 | - <view class="total_power"> | ||
| 59 | - <view>2019年6月</view> | ||
| 60 | - </view> | ||
| 61 | - </view> | ||
| 62 | -</view> | ||
| 63 | -<!-- 流水 --> | ||
| 64 | -<view wx:if="{{tabNum == 1}}"> | ||
| 65 | - <view class="second_total">重量总计（吨）：1000</view> | ||
| 66 | - <!-- 数据 --> | ||
| 67 | - <view class="table"> | ||
| 68 | - <view class="table_title"> | ||
| 69 | - <view wx:for="{{tableTitle}}" wx:key="">{{item}}</view> | ||
| 70 | - </view> | ||
| 71 | - <view class="table_tr" wx:for="{{trList}}" wx:key=""> | ||
| 72 | - <view class="tr_time">{{item.date}}</view> | ||
| 73 | - <view class="tr_pos">{{item.position}}</view> | ||
| 74 | - <view class="tr_name">{{item.name}}</view> | ||
| 75 | - <view class="tr_time">{{item.num}}</view> | ||
| 76 | - <view class="tr_btn" >{{item.btn}}</view> | ||
| 77 | - </view> | ||
| 78 | - </view> | ||
| 79 | -</view> | ||
| 1 | +<!--pages/chengpin/chengpin.wxml--> | ||
| 2 | +<text>pages/chengpin/chengpin.wxml</text> |
| 1 | -/* pages/qiyeyongdian/detail/detail.wxss */ | ||
| 2 | - | ||
| 3 | -.search_month { | ||
| 4 | - width: 686rpx; | ||
| 5 | - padding: 0 30rpx; | ||
| 6 | - height: 70rpx; | ||
| 7 | - background-color: #f3f5f8; | ||
| 8 | - display: flex; | ||
| 9 | - flex-direction: row; | ||
| 10 | - justify-content: space-between; | ||
| 11 | - align-items: center; | ||
| 12 | -} | ||
| 13 | - | ||
| 14 | -/* 左箭头 */ | ||
| 15 | - | ||
| 16 | -.left { | ||
| 17 | - transform: rotate(180deg); | ||
| 18 | -} | ||
| 19 | - | ||
| 20 | -/* 日期 */ | ||
| 21 | - | ||
| 22 | -.date_time { | ||
| 23 | - color: #666; | ||
| 24 | - font-size: 28rpx; | ||
| 25 | - display: flex; | ||
| 26 | - flex-direction: row; | ||
| 27 | - align-items: center; | ||
| 28 | -} | ||
| 29 | - | ||
| 30 | -.down { | ||
| 31 | - transform: rotate(90deg); | ||
| 32 | - margin-left: 10rpx; | ||
| 33 | -} | ||
| 34 | - | ||
| 35 | -/* 折线图 */ | ||
| 36 | - | ||
| 37 | -.chart { | ||
| 38 | - width: 750rpx; | ||
| 39 | - height: 494rpx; | ||
| 40 | - margin: 0 auto; | ||
| 41 | - display: flex; | ||
| 42 | - justify-content: center; | ||
| 43 | - align-items: center; | ||
| 44 | -} | ||
| 45 | - | ||
| 46 | -ec-canvas { | ||
| 47 | - width: 100%; | ||
| 48 | - height: 100%; | ||
| 49 | -} | ||
| 50 | - | ||
| 51 | -.total_power { | ||
| 52 | - display: flex; | ||
| 53 | - flex-direction: row; | ||
| 54 | - justify-content: space-around; | ||
| 55 | -} | ||
| 56 | - | ||
| 57 | -/* 弹出框 */ | ||
| 58 | - | ||
| 59 | -.modal-mask { | ||
| 60 | - width: 100%; | ||
| 61 | - height: 100%; | ||
| 62 | - position: fixed; | ||
| 63 | - top: 0; | ||
| 64 | - left: 0; | ||
| 65 | - background: #000; | ||
| 66 | - opacity: 0.5; | ||
| 67 | - overflow: hidden; | ||
| 68 | - z-index: 9000; | ||
| 69 | - color: #fff; | ||
| 70 | -} | ||
| 71 | - | ||
| 72 | -.modal-dialog { | ||
| 73 | - width: 100%; | ||
| 74 | - overflow: hidden; | ||
| 75 | - position: fixed; | ||
| 76 | - top: 45%; | ||
| 77 | - left: 0; | ||
| 78 | - z-index: 9500; | ||
| 79 | - margin: -180rpx 70rpx; | ||
| 80 | -} | ||
| 81 | - | ||
| 82 | -.modal-content { | ||
| 83 | - position: fixed; | ||
| 84 | - top: 0; | ||
| 85 | - left: 0; | ||
| 86 | - z-index: 9500; | ||
| 87 | - width: 100%; | ||
| 88 | - /* height: 55%; */ | ||
| 89 | - overflow: hidden; | ||
| 90 | - /* padding: 120rpx 50rpx 50rpx; */ | ||
| 91 | - background: #fff; | ||
| 92 | - border-radius: 2rpx; | ||
| 93 | -} | ||
| 94 | - | ||
| 95 | -/* 弹出框选项卡 */ | ||
| 96 | - | ||
| 97 | -.modal_year { | ||
| 98 | - display: flex; | ||
| 99 | - flex-direction: row; | ||
| 100 | - justify-content: space-around; | ||
| 101 | - align-items: center; | ||
| 102 | - font-size: 28rpx; | ||
| 103 | - color: #666; | ||
| 104 | - padding-top: 20rpx; | ||
| 105 | - border:1rpx solid #f5f5f5; | ||
| 106 | - border-left:none; | ||
| 107 | - border-right: none; | ||
| 108 | -} | ||
| 109 | -.modal_single{ | ||
| 110 | - border-bottom:4rpx solid #fff; | ||
| 111 | -} | ||
| 112 | -.modal_choice{ | ||
| 113 | - border-bottom-color: #FF9400; | ||
| 114 | - color: #FF9400; | ||
| 115 | - font-weight: 600; | ||
| 116 | - padding-bottom:20rpx; | ||
| 117 | -} | ||
| 118 | -/* 选项卡 */ | ||
| 119 | - | ||
| 120 | -.tab { | ||
| 121 | - display: flex; | ||
| 122 | - flex-direction: row; | ||
| 123 | - justify-content: space-around; | ||
| 124 | - align-items: center; | ||
| 125 | - padding-top: 20rpx; | ||
| 126 | - color: #ff9400; | ||
| 127 | - border-top: 1rpx solid #f5f5f5; | ||
| 128 | -} | ||
| 129 | - | ||
| 130 | -.tab_single { | ||
| 131 | - padding-bottom: 20rpx; | ||
| 132 | - border-bottom: 4rpx solid #fff; | ||
| 133 | -} | ||
| 134 | - | ||
| 135 | -.tab_border { | ||
| 136 | - border-bottom: 4rpx solid #ff9400; | ||
| 137 | -} | ||
| 138 | - | ||
| 139 | -/* 月份 */ | ||
| 140 | - | ||
| 141 | -.modal_month { | ||
| 142 | - display: flex; | ||
| 143 | - flex-wrap: wrap; | ||
| 144 | - flex-direction: row; | ||
| 145 | - margin: 50rpx 30rpx; | ||
| 146 | - justify-content: space-between; | ||
| 147 | -} | ||
| 148 | - | ||
| 149 | -.month_single { | ||
| 150 | - background-color: #F9F8FE; | ||
| 151 | - padding: 20rpx 56rpx 15rpx; | ||
| 152 | - border-radius: 6rpx; | ||
| 153 | - font-size: 32rpx; | ||
| 154 | - color: #333; | ||
| 155 | - margin-bottom: 30rpx; | ||
| 156 | -} | ||
| 157 | - | ||
| 158 | -.change { | ||
| 159 | - background-color: #ff9400; | ||
| 160 | - color: #fff; | ||
| 161 | -} | ||
| 162 | - | ||
| 163 | -.date_descript { | ||
| 164 | - width: 296rpx; | ||
| 165 | - height: 70rpx; | ||
| 166 | - line-height: 70rpx; | ||
| 167 | - text-align: center; | ||
| 168 | - color: #ff9400; | ||
| 169 | - font-size: 28rpx; | ||
| 170 | - margin: 0 auto; | ||
| 171 | - background: rgba(244, 244, 244, 1); | ||
| 172 | - border-radius: 6rpx; | ||
| 173 | -} | ||
| 174 | - | ||
| 175 | -.tactive { | ||
| 176 | - background: #ff9400; | ||
| 177 | - color: #fff; | ||
| 178 | -} | ||
| 179 | - | ||
| 180 | -/* 标题 */ | ||
| 181 | - | ||
| 182 | -.cp_title { | ||
| 183 | - color: #333; | ||
| 184 | - font-size: 32rpx; | ||
| 185 | - font-weight: bold; | ||
| 186 | - padding: 30rpx 54rpx 41rpx; | ||
| 187 | - position: relative; | ||
| 188 | -} | ||
| 189 | - | ||
| 190 | -.cp_title::after { | ||
| 191 | - position: absolute; | ||
| 192 | - content: ""; | ||
| 193 | - display: block; | ||
| 194 | - left: 30rpx; | ||
| 195 | - top: 35rpx; | ||
| 196 | - width: 8rpx; | ||
| 197 | - height: 35rpx; | ||
| 198 | - background-color: #ff9400; | ||
| 199 | - border-radius: 4rpx; | ||
| 200 | -} | ||
| 201 | - | ||
| 202 | -/* 重量总计 */ | ||
| 203 | - | ||
| 204 | -.total { | ||
| 205 | - padding-left: 30rpx; | ||
| 206 | - color: #666; | ||
| 207 | - font-size: 20rpx; | ||
| 208 | - display: flex; | ||
| 209 | - flex-direction: row; | ||
| 210 | - align-items: center; | ||
| 211 | -} | ||
| 212 | - | ||
| 213 | -.total text { | ||
| 214 | - font-size: 32rpx; | ||
| 215 | - color: #333; | ||
| 216 | -} | ||
| 217 | - | ||
| 218 | -.btns { | ||
| 219 | - margin-top: 50rpx; | ||
| 220 | - display: flex; | ||
| 221 | - flex-direction: row; | ||
| 222 | - align-items: center; | ||
| 223 | - border-top: 1rpx solid #f5f5f5; | ||
| 224 | -} | ||
| 225 | - | ||
| 226 | -.cacle { | ||
| 227 | - width: 50%; | ||
| 228 | - color: #afafaf; | ||
| 229 | - height: 87rpx; | ||
| 230 | - line-height: 87rpx; | ||
| 231 | - text-align: center; | ||
| 232 | - font-size: 34rpx; | ||
| 233 | -} | ||
| 234 | - | ||
| 235 | -.sure { | ||
| 236 | - color: #ff9400; | ||
| 237 | - border-left: 1rpx solid #f5f5f5; | ||
| 238 | -} | ||
| 239 | - | ||
| 240 | -/* 流水 */ | ||
| 241 | - | ||
| 242 | -.second_total { | ||
| 243 | - padding: 40rpx 30rpx 20rpx; | ||
| 244 | - display: flex; | ||
| 245 | - justify-content: flex-end; | ||
| 246 | - flex-direction: row; | ||
| 247 | - font-size: 28rpx; | ||
| 248 | -} | ||
| 249 | - | ||
| 250 | -.table_title { | ||
| 251 | - display: flex; | ||
| 252 | - flex-direction: row; | ||
| 253 | - justify-content: space-around; | ||
| 254 | - align-items: center; | ||
| 255 | - padding: 30rpx 0 20rpx; | ||
| 256 | - font-size: 28rpx; | ||
| 257 | - color: #666; | ||
| 258 | - border: 1rpx solid #f5f5f5; | ||
| 259 | -} | ||
| 260 | - | ||
| 261 | -.table_tr { | ||
| 262 | - display: flex; | ||
| 263 | - flex-direction: row; | ||
| 264 | - justify-content: space-around; | ||
| 265 | - align-items: center; | ||
| 266 | - padding: 30rpx 0 20rpx; | ||
| 267 | - font-size: 24rpx; | ||
| 268 | - color: #666; | ||
| 269 | - border-bottom: 1rpx solid #f5f5f5; | ||
| 270 | -} | ||
| 271 | - | ||
| 272 | -.tr_time { | ||
| 273 | - font-size: 28rpx; | ||
| 274 | - color: #333; | ||
| 275 | -} | ||
| 276 | - | ||
| 277 | -.tr_btn { | ||
| 278 | - color: #ffb77e; | ||
| 279 | -} | ||
| 280 | - | ||
| 281 | -.tr_name { | ||
| 282 | - width: 120rpx; | ||
| 283 | - white-space: nowrap; | ||
| 284 | - overflow: hidden; | ||
| 285 | - text-overflow: ellipsis; | ||
| 286 | -} | ||
| 287 | - | ||
| 288 | -.tr_pos { | ||
| 289 | - width: 120rpx; | ||
| 290 | - white-space: nowrap; | ||
| 291 | - overflow: hidden; | ||
| 292 | - text-overflow: ellipsis; | ||
| 293 | -} | 1 | +/* pages/chengpin/chengpin.wxss */ |
| 1 | +// pages/qiyeyongdian/detail/detail.js | ||
| 2 | + | ||
| 3 | +import * as echarts from '../../ec-canvas/echarts'; | ||
| 4 | + | ||
| 5 | +const app = getApp(); | ||
| 6 | +var Chart = null; | ||
| 7 | +Page({ | ||
| 8 | + | ||
| 9 | + /** | ||
| 10 | + * 页面的初始数据 | ||
| 11 | + */ | ||
| 12 | + data: { | ||
| 13 | + showModal: false, | ||
| 14 | + modalTitle: ["选择时间", "选择地磅", "选择货物"], | ||
| 15 | + modalNum: 2, | ||
| 16 | + monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", ], | ||
| 17 | + time: '2019.01.01-2019.01.31', | ||
| 18 | + changeColor: 0, | ||
| 19 | + tabList: ["出库", "流水"], | ||
| 20 | + tabNum: 0, | ||
| 21 | + tableTitle: ["时间", "地磅", "货物名称", "重量（T）"], | ||
| 22 | + trList: [{ | ||
| 23 | + date: "09.12", | ||
| 24 | + position: "大厅左上角", | ||
| 25 | + name: "名字妙哉妙", | ||
| 26 | + num: "18", | ||
| 27 | + btn: "详情" | ||
| 28 | + }, | ||
| 29 | + { | ||
| 30 | + date: "09.12", | ||
| 31 | + position: "大厅左上角", | ||
| 32 | + name: "啦啦啦啦啦啦啦啦啦啦", | ||
| 33 | + num: "18", | ||
| 34 | + btn: "详情" | ||
| 35 | + }, | ||
| 36 | + { | ||
| 37 | + date: "09.12", | ||
| 38 | + position: "车间后方大转盘", | ||
| 39 | + name: "啦啦啦啦啦啦啦啦啦啦", | ||
| 40 | + num: "18", | ||
| 41 | + btn: "详情" | ||
| 42 | + }, | ||
| 43 | + ], | ||
| 44 | + ec: { | ||
| 45 | + | ||
| 46 | + onInit: function(canvas, width, height) { | ||
| 47 | + | ||
| 48 | + chart = echarts.init(canvas, null, { | ||
| 49 | + | ||
| 50 | + width: width, | ||
| 51 | + | ||
| 52 | + height: height | ||
| 53 | + | ||
| 54 | + }); | ||
| 55 | + | ||
| 56 | + canvas.setChart(chart); | ||
| 57 | + | ||
| 58 | + return chart; | ||
| 59 | + | ||
| 60 | + }, | ||
| 61 | + | ||
| 62 | + lazyLoad: true, // 延迟加载 | ||
| 63 | + showt: false | ||
| 64 | + }, | ||
| 65 | + | ||
| 66 | + }, | ||
| 67 | + changeTab(e) { | ||
| 68 | + this.setData({ | ||
| 69 | + tabNum: e.currentTarget.dataset.id | ||
| 70 | + }) | ||
| 71 | + | ||
| 72 | + }, | ||
| 73 | + toShowModal(e) { | ||
| 74 | + this.setData({ | ||
| 75 | + showModal: true | ||
| 76 | + }) | ||
| 77 | + }, | ||
| 78 | + | ||
| 79 | + hideModal() { | ||
| 80 | + this.setData({ | ||
| 81 | + showModal: false | ||
| 82 | + }); | ||
| 83 | + }, | ||
| 84 | + choice(e) { | ||
| 85 | + | ||
| 86 | + this.setData({ | ||
| 87 | + changeColor: e.currentTarget.dataset.id | ||
| 88 | + }) | ||
| 89 | + }, | ||
| 90 | + /** | ||
| 91 | + * 生命周期函数--监听页面加载 | ||
| 92 | + */ | ||
| 93 | + onLoad: function(options) { | ||
| 94 | + | ||
| 95 | + this.echartsComponnet = this.selectComponent('#mychart'); | ||
| 96 | + | ||
| 97 | + | ||
| 98 | + //如果是第一次绘制 | ||
| 99 | + | ||
| 100 | + if (!Chart) { | ||
| 101 | + this.init_echarts(); //初始化图表 | ||
| 102 | + | ||
| 103 | + | ||
| 104 | + } else { | ||
| 105 | + | ||
| 106 | + this.setOption(Chart); //更新数据 | ||
| 107 | + | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + }, | ||
| 111 | + //初始化图表 | ||
| 112 | + | ||
| 113 | + init_echarts: function() { | ||
| 114 | + | ||
| 115 | + this.echartsComponnet.init((canvas, width, height) => { | ||
| 116 | + | ||
| 117 | + // 初始化图表 | ||
| 118 | + | ||
| 119 | + const Chart = echarts.init(canvas, null, { | ||
| 120 | + | ||
| 121 | + width: width, | ||
| 122 | + | ||
| 123 | + height: height | ||
| 124 | + | ||
| 125 | + }); | ||
| 126 | + | ||
| 127 | + this.setOption(Chart) | ||
| 128 | + | ||
| 129 | + // 注意这里一定要返回 chart 实例，否则会影响事件处理等 | ||
| 130 | + | ||
| 131 | + return Chart; | ||
| 132 | + | ||
| 133 | + }); | ||
| 134 | + | ||
| 135 | + }, | ||
| 136 | + | ||
| 137 | + setOption: function(Chart) { | ||
| 138 | + | ||
| 139 | + Chart.clear(); // 清除 | ||
| 140 | + | ||
| 141 | + Chart.setOption(this.getOption()); //获取新数据 | ||
| 142 | + | ||
| 143 | + }, | ||
| 144 | + | ||
| 145 | + // 图表配置项 | ||
| 146 | + | ||
| 147 | + getOption() { | ||
| 148 | + | ||
| 149 | + var self = this; | ||
| 150 | + | ||
| 151 | + var option = { | ||
| 152 | + | ||
| 153 | + color: ["#FFF"], //图例图标颜色 | ||
| 154 | + // lineStyle:{//阴影 | ||
| 155 | + // shadowColor: '#6495F8', | ||
| 156 | + // shadowBlur: 10 | ||
| 157 | + // }, | ||
| 158 | + xAxis: { //横坐标 | ||
| 159 | + | ||
| 160 | + type: 'category', | ||
| 161 | + | ||
| 162 | + name: '日期', //横坐标名称 | ||
| 163 | + | ||
| 164 | + nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 165 | + | ||
| 166 | + color: '#333', | ||
| 167 | + | ||
| 168 | + fontStyle: 'normal' | ||
| 169 | + | ||
| 170 | + }, | ||
| 171 | + axisLabel: { | ||
| 172 | + interval: 0, | ||
| 173 | + }, | ||
| 174 | + boundaryGap: false, //1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上 | ||
| 175 | + | ||
| 176 | + 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'], | ||
| 177 | + | ||
| 178 | + axisLabel: { | ||
| 179 | + | ||
| 180 | + textStyle: { | ||
| 181 | + | ||
| 182 | + fontSize: 13, | ||
| 183 | + | ||
| 184 | + color: '#5D5D5D' | ||
| 185 | + | ||
| 186 | + } | ||
| 187 | + | ||
| 188 | + } | ||
| 189 | + | ||
| 190 | + }, | ||
| 191 | + | ||
| 192 | + yAxis: { //纵坐标 | ||
| 193 | + | ||
| 194 | + type: 'value', | ||
| 195 | + | ||
| 196 | + position: 'left', | ||
| 197 | + | ||
| 198 | + name: '重量', //纵坐标名称 | ||
| 199 | + | ||
| 200 | + nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 201 | + | ||
| 202 | + color: '#333333', | ||
| 203 | + | ||
| 204 | + fontStyle: 'normal' | ||
| 205 | + | ||
| 206 | + }, | ||
| 207 | + | ||
| 208 | + splitNumber: 10, //坐标轴的分割段数 | ||
| 209 | + | ||
| 210 | + | ||
| 211 | + min: 0, | ||
| 212 | + | ||
| 213 | + max: 100, | ||
| 214 | + | ||
| 215 | + }, | ||
| 216 | + | ||
| 217 | + series: [{ | ||
| 218 | + | ||
| 219 | + type: 'line', | ||
| 220 | + | ||
| 221 | + 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], | ||
| 222 | + | ||
| 223 | + symbol: 'true', | ||
| 224 | + | ||
| 225 | + itemStyle: { | ||
| 226 | + | ||
| 227 | + normal: { | ||
| 228 | + | ||
| 229 | + lineStyle: { | ||
| 230 | + | ||
| 231 | + color: '#ED3676' | ||
| 232 | + | ||
| 233 | + } | ||
| 234 | + | ||
| 235 | + } | ||
| 236 | + | ||
| 237 | + }, | ||
| 238 | + // areaStyle: { | ||
| 239 | + // normal: { | ||
| 240 | + // color: '#6495F8' //改变区域颜色 | ||
| 241 | + // } | ||
| 242 | + // }, | ||
| 243 | + | ||
| 244 | + }], | ||
| 245 | + | ||
| 246 | + } | ||
| 247 | + | ||
| 248 | + return option; | ||
| 249 | + | ||
| 250 | + }, | ||
| 251 | + /** | ||
| 252 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 253 | + */ | ||
| 254 | + onReady: function() { | ||
| 255 | + | ||
| 256 | + }, | ||
| 257 | + | ||
| 258 | + /** | ||
| 259 | + * 生命周期函数--监听页面显示 | ||
| 260 | + */ | ||
| 261 | + onShow: function() { | ||
| 262 | + this.echartsComponnet = this.selectComponent('#mychart'); | ||
| 263 | + | ||
| 264 | + | ||
| 265 | + //如果是第一次绘制 | ||
| 266 | + | ||
| 267 | + if (!Chart) { | ||
| 268 | + this.init_echarts(); //初始化图表 | ||
| 269 | + | ||
| 270 | + | ||
| 271 | + } else { | ||
| 272 | + | ||
| 273 | + this.setOption(Chart); //更新数据 | ||
| 274 | + | ||
| 275 | + } | ||
| 276 | + }, | ||
| 277 | + | ||
| 278 | + /** | ||
| 279 | + * 生命周期函数--监听页面隐藏 | ||
| 280 | + */ | ||
| 281 | + onHide: function() { | ||
| 282 | + | ||
| 283 | + }, | ||
| 284 | + | ||
| 285 | + /** | ||
| 286 | + * 生命周期函数--监听页面卸载 | ||
| 287 | + */ | ||
| 288 | + onUnload: function() { | ||
| 289 | + | ||
| 290 | + }, | ||
| 291 | + | ||
| 292 | + /** | ||
| 293 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 294 | + */ | ||
| 295 | + onPullDownRefresh: function() { | ||
| 296 | + | ||
| 297 | + }, | ||
| 298 | + | ||
| 299 | + /** | ||
| 300 | + * 页面上拉触底事件的处理函数 | ||
| 301 | + */ | ||
| 302 | + onReachBottom: function() { | ||
| 303 | + | ||
| 304 | + }, | ||
| 305 | + | ||
| 306 | + /** | ||
| 307 | + * 用户点击右上角分享 | ||
| 308 | + */ | ||
| 309 | + onShareAppMessage: function() { | ||
| 310 | + | ||
| 311 | + } | ||
| 312 | +}) |
| 1 | +<!--pages/qiyeyongdian/detail/detail.wxml--> | ||
| 2 | +<!-- 货物信息 --> | ||
| 3 | +<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view> | ||
| 4 | +<view wx:if="{{showModal}}"> | ||
| 5 | + <view class="modal-content"> | ||
| 6 | + <!-- 选项卡 --> | ||
| 7 | + <view class="modal_year"> | ||
| 8 | + <view class="modal_single {{modalNum == index ?'modal_choice':''}}" wx:for="{{modalTitle}}" wx:key="">{{item}}</view> | ||
| 9 | + </view> | ||
| 10 | + <!-- 月份 --> | ||
| 11 | + <scroll-view scroll-y style="height: 400px;"> | ||
| 12 | + <view class="modal_month"> | ||
| 13 | + <view class="month_single {{changeColor == index?'change':''}}" wx:for="{{monthList}}" wx:key="" data-id="{{index}}" catchtap="choice">{{item}}</view> | ||
| 14 | + </view> | ||
| 15 | + </scroll-view> | ||
| 16 | + <view class='btns'> | ||
| 17 | + <view class="cacle" bindtap="hideModal">取消</view> | ||
| 18 | + <view class="cacle sure" bindtap="hideModal">确定</view> | ||
| 19 | + </view> | ||
| 20 | + </view> | ||
| 21 | +</view> | ||
| 22 | +<!-- 选项卡 --> | ||
| 23 | +<view class="tab"> | ||
| 24 | + <view wx:for="{{tabList}}" wx:key="" class="tab_single {{tabNum == index?'tab_border':''}}" bindtap='changeTab' data-id="{{index}}">{{item}}</view> | ||
| 25 | +</view> | ||
| 26 | +<!-- 月份 --> | ||
| 27 | +<view class="search_month"> | ||
| 28 | + <view class="rowimg"> | ||
| 29 | + <image src='/img/row.png' class="left"></image> | ||
| 30 | + </view> | ||
| 31 | + <view class="date_time"> | ||
| 32 | + <!-- 出库 --> | ||
| 33 | + <view wx:if="{{tabNum == 0}}">2019.06</view> | ||
| 34 | + <!-- 流水 --> | ||
| 35 | + <view wx:if="{{tabNum == 1}}" bindtap='toShowModal'>{{time}}</view> | ||
| 36 | + <view class="rowimg"> | ||
| 37 | + <image src='/img/row.png' class="down"></image> | ||
| 38 | + </view> | ||
| 39 | + </view> | ||
| 40 | + <view class="rowimg"> | ||
| 41 | + <image src='/img/row.png'></image> | ||
| 42 | + </view> | ||
| 43 | +</view> | ||
| 44 | +<!-- 出库 --> | ||
| 45 | +<view wx:if="{{tabNum == 0}}"> | ||
| 46 | + <view class="cp_title"> | ||
| 47 | + 成品出库信息 | ||
| 48 | + </view> | ||
| 49 | + <view class="total"> | ||
| 50 | + 重量总计（吨） | ||
| 51 | + <text>1000</text> | ||
| 52 | + </view> | ||
| 53 | + <!-- 折线图 --> | ||
| 54 | + <view class="charts_line"> | ||
| 55 | + <view class="chart"> | ||
| 56 | + <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas> | ||
| 57 | + </view> | ||
| 58 | + <view class="total_power"> | ||
| 59 | + <view>2019年6月</view> | ||
| 60 | + </view> | ||
| 61 | + </view> | ||
| 62 | +</view> | ||
| 63 | +<!-- 流水 --> | ||
| 64 | +<view wx:if="{{tabNum == 1}}"> | ||
| 65 | + <view class="second_total">重量总计（吨）：1000</view> | ||
| 66 | + <!-- 数据 --> | ||
| 67 | + <view class="table"> | ||
| 68 | + <view class="table_title"> | ||
| 69 | + <view wx:for="{{tableTitle}}" wx:key="">{{item}}</view> | ||
| 70 | + </view> | ||
| 71 | + <view class="table_tr" wx:for="{{trList}}" wx:key=""> | ||
| 72 | + <view class="tr_time">{{item.date}}</view> | ||
| 73 | + <view class="tr_pos">{{item.position}}</view> | ||
| 74 | + <view class="tr_name">{{item.name}}</view> | ||
| 75 | + <view class="tr_time">{{item.num}}</view> | ||
| 76 | + <view class="tr_btn" >{{item.btn}}</view> | ||
| 77 | + </view> | ||
| 78 | + </view> | ||
| 79 | +</view> |
| 1 | +/* pages/qiyeyongdian/detail/detail.wxss */ | ||
| 2 | + | ||
| 3 | +.search_month { | ||
| 4 | + width: 686rpx; | ||
| 5 | + padding: 0 30rpx; | ||
| 6 | + height: 70rpx; | ||
| 7 | + background-color: #f3f5f8; | ||
| 8 | + display: flex; | ||
| 9 | + flex-direction: row; | ||
| 10 | + justify-content: space-between; | ||
| 11 | + align-items: center; | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +/* 左箭头 */ | ||
| 15 | + | ||
| 16 | +.left { | ||
| 17 | + transform: rotate(180deg); | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +/* 日期 */ | ||
| 21 | + | ||
| 22 | +.date_time { | ||
| 23 | + color: #666; | ||
| 24 | + font-size: 28rpx; | ||
| 25 | + display: flex; | ||
| 26 | + flex-direction: row; | ||
| 27 | + align-items: center; | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +.down { | ||
| 31 | + transform: rotate(90deg); | ||
| 32 | + margin-left: 10rpx; | ||
| 33 | +} | ||
| 34 | + | ||
| 35 | +/* 折线图 */ | ||
| 36 | + | ||
| 37 | +.chart { | ||
| 38 | + width: 750rpx; | ||
| 39 | + height: 494rpx; | ||
| 40 | + margin: 0 auto; | ||
| 41 | + display: flex; | ||
| 42 | + justify-content: center; | ||
| 43 | + align-items: center; | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +ec-canvas { | ||
| 47 | + width: 100%; | ||
| 48 | + height: 100%; | ||
| 49 | +} | ||
| 50 | + | ||
| 51 | +.total_power { | ||
| 52 | + display: flex; | ||
| 53 | + flex-direction: row; | ||
| 54 | + justify-content: space-around; | ||
| 55 | +} | ||
| 56 | + | ||
| 57 | +/* 弹出框 */ | ||
| 58 | + | ||
| 59 | +.modal-mask { | ||
| 60 | + width: 100%; | ||
| 61 | + height: 100%; | ||
| 62 | + position: fixed; | ||
| 63 | + top: 0; | ||
| 64 | + left: 0; | ||
| 65 | + background: #000; | ||
| 66 | + opacity: 0.5; | ||
| 67 | + overflow: hidden; | ||
| 68 | + z-index: 9000; | ||
| 69 | + color: #fff; | ||
| 70 | +} | ||
| 71 | + | ||
| 72 | +.modal-dialog { | ||
| 73 | + width: 100%; | ||
| 74 | + overflow: hidden; | ||
| 75 | + position: fixed; | ||
| 76 | + top: 45%; | ||
| 77 | + left: 0; | ||
| 78 | + z-index: 9500; | ||
| 79 | + margin: -180rpx 70rpx; | ||
| 80 | +} | ||
| 81 | + | ||
| 82 | +.modal-content { | ||
| 83 | + position: fixed; | ||
| 84 | + top: 0; | ||
| 85 | + left: 0; | ||
| 86 | + z-index: 9500; | ||
| 87 | + width: 100%; | ||
| 88 | + /* height: 55%; */ | ||
| 89 | + overflow: hidden; | ||
| 90 | + /* padding: 120rpx 50rpx 50rpx; */ | ||
| 91 | + background: #fff; | ||
| 92 | + border-radius: 2rpx; | ||
| 93 | +} | ||
| 94 | + | ||
| 95 | +/* 弹出框选项卡 */ | ||
| 96 | + | ||
| 97 | +.modal_year { | ||
| 98 | + display: flex; | ||
| 99 | + flex-direction: row; | ||
| 100 | + justify-content: space-around; | ||
| 101 | + align-items: center; | ||
| 102 | + font-size: 28rpx; | ||
| 103 | + color: #666; | ||
| 104 | + padding-top: 20rpx; | ||
| 105 | + border:1rpx solid #f5f5f5; | ||
| 106 | + border-left:none; | ||
| 107 | + border-right: none; | ||
| 108 | +} | ||
| 109 | +.modal_single{ | ||
| 110 | + border-bottom:4rpx solid #fff; | ||
| 111 | +} | ||
| 112 | +.modal_choice{ | ||
| 113 | + border-bottom-color: #FF9400; | ||
| 114 | + color: #FF9400; | ||
| 115 | + font-weight: 600; | ||
| 116 | + padding-bottom:20rpx; | ||
| 117 | +} | ||
| 118 | +/* 选项卡 */ | ||
| 119 | + | ||
| 120 | +.tab { | ||
| 121 | + display: flex; | ||
| 122 | + flex-direction: row; | ||
| 123 | + justify-content: space-around; | ||
| 124 | + align-items: center; | ||
| 125 | + padding-top: 20rpx; | ||
| 126 | + color: #ff9400; | ||
| 127 | + border-top: 1rpx solid #f5f5f5; | ||
| 128 | +} | ||
| 129 | + | ||
| 130 | +.tab_single { | ||
| 131 | + padding-bottom: 20rpx; | ||
| 132 | + border-bottom: 4rpx solid #fff; | ||
| 133 | +} | ||
| 134 | + | ||
| 135 | +.tab_border { | ||
| 136 | + border-bottom: 4rpx solid #ff9400; | ||
| 137 | +} | ||
| 138 | + | ||
| 139 | +/* 月份 */ | ||
| 140 | + | ||
| 141 | +.modal_month { | ||
| 142 | + display: flex; | ||
| 143 | + flex-wrap: wrap; | ||
| 144 | + flex-direction: row; | ||
| 145 | + margin: 50rpx 30rpx; | ||
| 146 | + justify-content: space-between; | ||
| 147 | +} | ||
| 148 | + | ||
| 149 | +.month_single { | ||
| 150 | + background-color: #F9F8FE; | ||
| 151 | + padding: 20rpx 56rpx 15rpx; | ||
| 152 | + border-radius: 6rpx; | ||
| 153 | + font-size: 32rpx; | ||
| 154 | + color: #333; | ||
| 155 | + margin-bottom: 30rpx; | ||
| 156 | +} | ||
| 157 | + | ||
| 158 | +.change { | ||
| 159 | + background-color: #ff9400; | ||
| 160 | + color: #fff; | ||
| 161 | +} | ||
| 162 | + | ||
| 163 | +.date_descript { | ||
| 164 | + width: 296rpx; | ||
| 165 | + height: 70rpx; | ||
| 166 | + line-height: 70rpx; | ||
| 167 | + text-align: center; | ||
| 168 | + color: #ff9400; | ||
| 169 | + font-size: 28rpx; | ||
| 170 | + margin: 0 auto; | ||
| 171 | + background: rgba(244, 244, 244, 1); | ||
| 172 | + border-radius: 6rpx; | ||
| 173 | +} | ||
| 174 | + | ||
| 175 | +.tactive { | ||
| 176 | + background: #ff9400; | ||
| 177 | + color: #fff; | ||
| 178 | +} | ||
| 179 | + | ||
| 180 | +/* 标题 */ | ||
| 181 | + | ||
| 182 | +.cp_title { | ||
| 183 | + color: #333; | ||
| 184 | + font-size: 32rpx; | ||
| 185 | + font-weight: bold; | ||
| 186 | + padding: 30rpx 54rpx 41rpx; | ||
| 187 | + position: relative; | ||
| 188 | +} | ||
| 189 | + | ||
| 190 | +.cp_title::after { | ||
| 191 | + position: absolute; | ||
| 192 | + content: ""; | ||
| 193 | + display: block; | ||
| 194 | + left: 30rpx; | ||
| 195 | + top: 35rpx; | ||
| 196 | + width: 8rpx; | ||
| 197 | + height: 35rpx; | ||
| 198 | + background-color: #ff9400; | ||
| 199 | + border-radius: 4rpx; | ||
| 200 | +} | ||
| 201 | + | ||
| 202 | +/* 重量总计 */ | ||
| 203 | + | ||
| 204 | +.total { | ||
| 205 | + padding-left: 30rpx; | ||
| 206 | + color: #666; | ||
| 207 | + font-size: 20rpx; | ||
| 208 | + display: flex; | ||
| 209 | + flex-direction: row; | ||
| 210 | + align-items: center; | ||
| 211 | +} | ||
| 212 | + | ||
| 213 | +.total text { | ||
| 214 | + font-size: 32rpx; | ||
| 215 | + color: #333; | ||
| 216 | +} | ||
| 217 | + | ||
| 218 | +.btns { | ||
| 219 | + margin-top: 50rpx; | ||
| 220 | + display: flex; | ||
| 221 | + flex-direction: row; | ||
| 222 | + align-items: center; | ||
| 223 | + border-top: 1rpx solid #f5f5f5; | ||
| 224 | +} | ||
| 225 | + | ||
| 226 | +.cacle { | ||
| 227 | + width: 50%; | ||
| 228 | + color: #afafaf; | ||
| 229 | + height: 87rpx; | ||
| 230 | + line-height: 87rpx; | ||
| 231 | + text-align: center; | ||
| 232 | + font-size: 34rpx; | ||
| 233 | +} | ||
| 234 | + | ||
| 235 | +.sure { | ||
| 236 | + color: #ff9400; | ||
| 237 | + border-left: 1rpx solid #f5f5f5; | ||
| 238 | +} | ||
| 239 | + | ||
| 240 | +/* 流水 */ | ||
| 241 | + | ||
| 242 | +.second_total { | ||
| 243 | + padding: 40rpx 30rpx 20rpx; | ||
| 244 | + display: flex; | ||
| 245 | + justify-content: flex-end; | ||
| 246 | + flex-direction: row; | ||
| 247 | + font-size: 28rpx; | ||
| 248 | +} | ||
| 249 | + | ||
| 250 | +.table_title { | ||
| 251 | + display: flex; | ||
| 252 | + flex-direction: row; | ||
| 253 | + justify-content: space-around; | ||
| 254 | + align-items: center; | ||
| 255 | + padding: 30rpx 0 20rpx; | ||
| 256 | + font-size: 28rpx; | ||
| 257 | + color: #666; | ||
| 258 | + border: 1rpx solid #f5f5f5; | ||
| 259 | +} | ||
| 260 | + | ||
| 261 | +.table_tr { | ||
| 262 | + display: flex; | ||
| 263 | + flex-direction: row; | ||
| 264 | + justify-content: space-around; | ||
| 265 | + align-items: center; | ||
| 266 | + padding: 30rpx 0 20rpx; | ||
| 267 | + font-size: 24rpx; | ||
| 268 | + color: #666; | ||
| 269 | + border-bottom: 1rpx solid #f5f5f5; | ||
| 270 | +} | ||
| 271 | + | ||
| 272 | +.tr_time { | ||
| 273 | + font-size: 28rpx; | ||
| 274 | + color: #333; | ||
| 275 | +} | ||
| 276 | + | ||
| 277 | +.tr_btn { | ||
| 278 | + color: #ffb77e; | ||
| 279 | +} | ||
| 280 | + | ||
| 281 | +.tr_name { | ||
| 282 | + width: 120rpx; | ||
| 283 | + white-space: nowrap; | ||
| 284 | + overflow: hidden; | ||
| 285 | + text-overflow: ellipsis; | ||
| 286 | +} | ||
| 287 | + | ||
| 288 | +.tr_pos { | ||
| 289 | + width: 120rpx; | ||
| 290 | + white-space: nowrap; | ||
| 291 | + overflow: hidden; | ||
| 292 | + text-overflow: ellipsis; | ||
| 293 | +} |
| 1 | +// pages/member/member.js | ||
| 2 | +import * as echarts from '../../ec-canvas/echarts'; | ||
| 3 | +const app = getApp() | ||
| 4 | + | ||
| 5 | + | ||
| 6 | +function initChart1(canvas, width, height) { | ||
| 7 | + const chart = echarts.init(canvas, null, { | ||
| 8 | + width: width, | ||
| 9 | + height: height | ||
| 10 | + }); | ||
| 11 | + canvas.setChart(chart); | ||
| 12 | + | ||
| 13 | + var option = { | ||
| 14 | + title: { | ||
| 15 | + text: '', | ||
| 16 | + left: 'center' | ||
| 17 | + }, | ||
| 18 | + | ||
| 19 | + | ||
| 20 | + toolbox: { | ||
| 21 | + | ||
| 22 | + }, | ||
| 23 | + xAxis: { | ||
| 24 | + type: 'category', | ||
| 25 | + boundaryGap: false, | ||
| 26 | + 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'], | ||
| 27 | + axisLabel: { | ||
| 28 | + interval: 1, | ||
| 29 | + }, | ||
| 30 | + name: '日期' | ||
| 31 | + | ||
| 32 | + | ||
| 33 | + }, | ||
| 34 | + yAxis: { | ||
| 35 | + type: 'value', | ||
| 36 | + axisLabel: { | ||
| 37 | + formatter: '{value}' | ||
| 38 | + }, | ||
| 39 | + min: 10, | ||
| 40 | + max: 100, | ||
| 41 | + splitNumber: 10, | ||
| 42 | + name: '人数' | ||
| 43 | + | ||
| 44 | + }, | ||
| 45 | + series: [{ | ||
| 46 | + name: '', | ||
| 47 | + type: 'line', | ||
| 48 | + smooth: true, | ||
| 49 | + color: '#A8ACE8', | ||
| 50 | + data: [41, 87, 35, 23, 42, 33, 40, 30, 50, 80], | ||
| 51 | + markPoint: { | ||
| 52 | + data: [{ | ||
| 53 | + type: 'max', | ||
| 54 | + name: '最大值' | ||
| 55 | + }, | ||
| 56 | + { | ||
| 57 | + type: 'min', | ||
| 58 | + name: '最小值' | ||
| 59 | + } | ||
| 60 | + ] | ||
| 61 | + }, | ||
| 62 | + markLine: { | ||
| 63 | + data: [{ | ||
| 64 | + type: 'average', | ||
| 65 | + name: '平均值' | ||
| 66 | + }] | ||
| 67 | + }, | ||
| 68 | + // areaStyle: { | ||
| 69 | + // // normal: { | ||
| 70 | + // // color: '#F8E9DD' //改变区域颜色 | ||
| 71 | + // // } | ||
| 72 | + // }, | ||
| 73 | + }, | ||
| 74 | + | ||
| 75 | + ] | ||
| 76 | + }; | ||
| 77 | + | ||
| 78 | + chart.setOption(option); | ||
| 79 | + return chart; | ||
| 80 | +} | ||
| 81 | + | ||
| 82 | +Page({ | ||
| 83 | + | ||
| 84 | + onShareAppMessage: function(res) { | ||
| 85 | + return { | ||
| 86 | + title: 'ECharts 可以在微信小程序中使用啦！', | ||
| 87 | + path: '', | ||
| 88 | + success: function() {}, | ||
| 89 | + fail: function() {} | ||
| 90 | + } | ||
| 91 | + }, | ||
| 92 | + | ||
| 93 | + /** | ||
| 94 | + * 页面的初始数据 | ||
| 95 | + */ | ||
| 96 | + data: { | ||
| 97 | + state: 1, | ||
| 98 | + timestate: 1, | ||
| 99 | + ec1: { | ||
| 100 | + | ||
| 101 | + onInit: initChart1, | ||
| 102 | + | ||
| 103 | + | ||
| 104 | + | ||
| 105 | + | ||
| 106 | + }, | ||
| 107 | + statedate: '', | ||
| 108 | + showdate: "", | ||
| 109 | + watertime: '', | ||
| 110 | + timesel: 1, | ||
| 111 | + timearr: [ | ||
| 112 | + | ||
| 113 | + | ||
| 114 | + ], | ||
| 115 | + date: '', | ||
| 116 | + datePickerValue: ['', '', ''], | ||
| 117 | + datePickerIsShow: false, | ||
| 118 | + datechu:false | ||
| 119 | + }, | ||
| 120 | + | ||
| 121 | + /** | ||
| 122 | + * 生命周期函数--监听页面加载 | ||
| 123 | + */ | ||
| 124 | + onLoad: function(options) { | ||
| 125 | + this.setData({ | ||
| 126 | + statedate: app.monthnowDate(), | ||
| 127 | + watertime: app.newnowDate() + '-' + app.snewnowDate() | ||
| 128 | + }) | ||
| 129 | + | ||
| 130 | + console.log(this.data.statedate) | ||
| 131 | + let newdate = this.data.statedate.split("-"); | ||
| 132 | + this.setData({ | ||
| 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], | ||
| 202 | + }) | ||
| 203 | + | ||
| 204 | + }, | ||
| 205 | + | ||
| 206 | + | ||
| 207 | + bindDateChange: function (e) { | ||
| 208 | + console.log('picker发送选择改变，携带值为', e.detail.value) | ||
| 209 | + this.setData({ | ||
| 210 | + date: e.detail.value | ||
| 211 | + }) | ||
| 212 | + }, | ||
| 213 | + // 选择时间和摄像头切换 | ||
| 214 | + seltime(e) { | ||
| 215 | + this.setData({ | ||
| 216 | + timestate: e.currentTarget.dataset.id | ||
| 217 | + }) | ||
| 218 | + }, | ||
| 219 | + | ||
| 220 | + //开始时间和结束时间切换 | ||
| 221 | + xuanshijan(e) { | ||
| 222 | + this.setData({ | ||
| 223 | + timesel: e.currentTarget.dataset.time | ||
| 224 | + }) | ||
| 225 | + }, | ||
| 226 | + // 选择日期 | ||
| 227 | + bindstateDateChange(e) { | ||
| 228 | + console.log('picker发送选择改变，携带值为', e.detail.value) | ||
| 229 | + this.setData({ | ||
| 230 | + statedate: e.detail.value | ||
| 231 | + }) | ||
| 232 | + let newdate = this.data.statedate.split("-"); | ||
| 233 | + this.setData({ | ||
| 234 | + showdate: newdate[0] + '年' + newdate[1] + '月' | ||
| 235 | + }) | ||
| 236 | + }, | ||
| 237 | + /** | ||
| 238 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 239 | + */ | ||
| 240 | + onReady: function() { | ||
| 241 | + | ||
| 242 | + }, | ||
| 243 | + | ||
| 244 | + /** | ||
| 245 | + * 生命周期函数--监听页面显示 | ||
| 246 | + */ | ||
| 247 | + onShow: function() { | ||
| 248 | + | ||
| 249 | + | ||
| 250 | + | ||
| 251 | + | ||
| 252 | + | ||
| 253 | + }, | ||
| 254 | + | ||
| 255 | + /** | ||
| 256 | + * 生命周期函数--监听页面隐藏 | ||
| 257 | + */ | ||
| 258 | + onHide: function() { | ||
| 259 | + | ||
| 260 | + }, | ||
| 261 | + | ||
| 262 | + /** | ||
| 263 | + * 生命周期函数--监听页面卸载 | ||
| 264 | + */ | ||
| 265 | + onUnload: function() { | ||
| 266 | + | ||
| 267 | + }, | ||
| 268 | + | ||
| 269 | + /** | ||
| 270 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 271 | + */ | ||
| 272 | + onPullDownRefresh: function() { | ||
| 273 | + | ||
| 274 | + }, | ||
| 275 | + | ||
| 276 | + /** | ||
| 277 | + * 页面上拉触底事件的处理函数 | ||
| 278 | + */ | ||
| 279 | + onReachBottom: function() { | ||
| 280 | + | ||
| 281 | + }, | ||
| 282 | + | ||
| 283 | + /** | ||
| 284 | + * 用户点击右上角分享 | ||
| 285 | + */ | ||
| 286 | + onShareAppMessage: function() { | ||
| 287 | + | ||
| 288 | + } | ||
| 289 | +}) |
| 1 | +<!-- 日期弹出层 --> | ||
| 2 | +<view class="register" wx:if="{{datechu}}"> | ||
| 3 | + | ||
| 4 | + <view class="timewrap"> | ||
| 5 | + | ||
| 6 | + <view class="detailhead"> | ||
| 7 | + <view class="detailname {{timestate==1?'selactive':''}}" bindtap="seltime" data-id="1">选择时间</view> | ||
| 8 | + <view class="detailname {{timestate==2?'selactive':''}}" bindtap="seltime" data-id="2">选摄像头</view> | ||
| 9 | + | ||
| 10 | + </view> | ||
| 11 | + | ||
| 12 | + <!-- 开始时间和结束时间 --> | ||
| 13 | + | ||
| 14 | + <view class="timetwo"> | ||
| 15 | + <view class="timebetin" bindtap="xuanshijan" data-time="1"> | ||
| 16 | + | ||
| 17 | + <view class="timetop {{timesel==1?'seltimeactive':''}}">开始时间</view> | ||
| 18 | + <view class="timebottom {{timesel==1?'selnameactive':''}}">2019.01.09</view> | ||
| 19 | + </view> | ||
| 20 | + <view class="timebetin" bindtap="xuanshijan" data-time="2"> | ||
| 21 | + | ||
| 22 | + <view class="timetop {{timesel==2?'seltimeactive':''}}">结束时间</view> | ||
| 23 | + <view class="timebottom {{timesel==2?'selnameactive':''}}">2019.01.09</view> | ||
| 24 | + </view> | ||
| 25 | + </view> | ||
| 26 | + | ||
| 27 | + <view class="timebox"> | ||
| 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 | + | ||
| 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" /> | ||
| 41 | + </view> | ||
| 42 | + | ||
| 43 | + | ||
| 44 | + | ||
| 45 | + | ||
| 46 | +</view> | ||
| 47 | + | ||
| 48 | +<view class="detailhead"> | ||
| 49 | + <view class="detailname {{state==1?'selactive':''}}" bindtap="selectshebei" data-id="1">人员状况</view> | ||
| 50 | + <view class="detailname {{state==2?'selactive':''}}" bindtap="selectshebei" data-id="2">进出水</view> | ||
| 51 | + | ||
| 52 | +</view> | ||
| 53 | + | ||
| 54 | + | ||
| 55 | +<!-- 人员状况 --> | ||
| 56 | + | ||
| 57 | +<view class="peoplestate" wx:if="{{state==1}}"> | ||
| 58 | + | ||
| 59 | + <view class="date"> | ||
| 60 | + <view class="dateleft"> | ||
| 61 | + <image src="/img/row.png"></image> | ||
| 62 | + </view> | ||
| 63 | + <view class="datetime"> | ||
| 64 | + <view class="datesel"> | ||
| 65 | + <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindstateDateChange" fields="month"> | ||
| 66 | + <view class="picker"> | ||
| 67 | + {{statedate}} | ||
| 68 | + </view> | ||
| 69 | + </picker> | ||
| 70 | + </view> | ||
| 71 | + | ||
| 72 | + <view class="datepic"> | ||
| 73 | + <image src="/img/row.png"></image> | ||
| 74 | + </view> | ||
| 75 | + </view> | ||
| 76 | + | ||
| 77 | + <view class="dateright"> | ||
| 78 | + <image src="/img/row.png"></image> | ||
| 79 | + </view> | ||
| 80 | + </view> | ||
| 81 | + | ||
| 82 | + <view class="shebeinum"> | ||
| 83 | + <text class="she">人员进出信息</text> | ||
| 84 | + </view> | ||
| 85 | + | ||
| 86 | + <view class="containerzhe"> | ||
| 87 | + <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec1 }}"></ec-canvas> | ||
| 88 | + </view> | ||
| 89 | + | ||
| 90 | + <view class="datetime">{{showdate}}</view> | ||
| 91 | + | ||
| 92 | + | ||
| 93 | +</view> | ||
| 94 | + | ||
| 95 | +<!-- 进出流水 --> | ||
| 96 | + | ||
| 97 | +<view class="lishui" wx:if="{{state==2}}"> | ||
| 98 | + <view class="date" bindtap="datexianshi"> | ||
| 99 | + <view class="dateleft"> | ||
| 100 | + <image src="/img/row.png"></image> | ||
| 101 | + </view> | ||
| 102 | + <view class="datetime"> | ||
| 103 | + <view class="datesel"> | ||
| 104 | + {{watertime}} | ||
| 105 | + </view> | ||
| 106 | + | ||
| 107 | + <view class="datepic"> | ||
| 108 | + <image src="/img/row.png"></image> | ||
| 109 | + </view> | ||
| 110 | + </view> | ||
| 111 | + | ||
| 112 | + <view class="dateright"> | ||
| 113 | + <image src="/img/row.png"></image> | ||
| 114 | + </view> | ||
| 115 | + </view> | ||
| 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 | + | ||
| 151 | +</view> |
| 1 | +.detailhead { | ||
| 2 | + display: flex; | ||
| 3 | + align-items: center; | ||
| 4 | + justify-content: space-around; | ||
| 5 | + padding: 20rpx 69rpx; | ||
| 6 | + box-sizing: border-box; | ||
| 7 | + border-bottom: 1rpx solid #f5f5f5; | ||
| 8 | + | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | + | ||
| 12 | +.detailname { | ||
| 13 | + color: #999; | ||
| 14 | + font-size: 28rpx; | ||
| 15 | +} | ||
| 16 | + | ||
| 17 | +.selactive { | ||
| 18 | + position: relative; | ||
| 19 | +} | ||
| 20 | + | ||
| 21 | +.selactive::after { | ||
| 22 | + display: block; | ||
| 23 | + content: ''; | ||
| 24 | + width: 60rpx; | ||
| 25 | + height: 1rpx; | ||
| 26 | + border: 1rpx solid #ff9400; | ||
| 27 | + position: absolute; | ||
| 28 | + left:50%; | ||
| 29 | + right:50%; | ||
| 30 | + transform: translate(-50%); | ||
| 31 | + bottom: -20rpx; | ||
| 32 | +} | ||
| 33 | +.date{ | ||
| 34 | + display:flex; | ||
| 35 | + align-items: center; | ||
| 36 | + justify-content: space-between; | ||
| 37 | + height:70rpx; | ||
| 38 | + background: #F3F5F8; | ||
| 39 | + padding: 0 31rpx; | ||
| 40 | + box-sizing: border-box | ||
| 41 | +} | ||
| 42 | +.dateleft { | ||
| 43 | + width: 23rpx; | ||
| 44 | + height:23rpx; | ||
| 45 | + font-size: 0; | ||
| 46 | + transform: rotate(180deg); | ||
| 47 | +} | ||
| 48 | + | ||
| 49 | +.dateright { | ||
| 50 | + width: 23rpx; | ||
| 51 | + height: 23rpx; | ||
| 52 | + font-size: 0; | ||
| 53 | +} | ||
| 54 | +.datetime{ | ||
| 55 | + display:flex; | ||
| 56 | + align-items: center | ||
| 57 | +} | ||
| 58 | +.datepic{ | ||
| 59 | + width:16rpx; | ||
| 60 | + height:16rpx; | ||
| 61 | + font-size: 0; | ||
| 62 | + transform: rotate(90deg); | ||
| 63 | + margin-left:12rpx; | ||
| 64 | +} | ||
| 65 | +.datesel{ | ||
| 66 | + color:#666666; | ||
| 67 | + font-size: 28rpx; | ||
| 68 | +} | ||
| 69 | + | ||
| 70 | +.shebeinum { | ||
| 71 | + color: #333; | ||
| 72 | + font-size: 32rpx; | ||
| 73 | + font-weight: bold; | ||
| 74 | + padding: 40rpx 0 0 30rpx; | ||
| 75 | + box-sizing: border-box; | ||
| 76 | + border-top: 1rpx solid #f5f5f5; | ||
| 77 | + position: relative; | ||
| 78 | +} | ||
| 79 | +.she{ | ||
| 80 | + margin-left:18rpx; | ||
| 81 | +} | ||
| 82 | +.shebeinum::before{ | ||
| 83 | + content:''; | ||
| 84 | + display:block; | ||
| 85 | + width:8rpx; | ||
| 86 | + height:33rpx; | ||
| 87 | + background: #FF9400FF; | ||
| 88 | + position: absolute; | ||
| 89 | + top:43rpx; | ||
| 90 | + left:30rpx; | ||
| 91 | + | ||
| 92 | +} | ||
| 93 | +.containerzhe{ | ||
| 94 | + width:750rpx; | ||
| 95 | + height:500rpx; | ||
| 96 | +} | ||
| 97 | +.datetime{ | ||
| 98 | + color:#333333; | ||
| 99 | + font-size: 28rpx; | ||
| 100 | + display:flex; | ||
| 101 | + justify-content: center | ||
| 102 | +} | ||
| 103 | + | ||
| 104 | +.timewrap{ | ||
| 105 | + background: #fff; | ||
| 106 | + height:700rpx; | ||
| 107 | +} | ||
| 108 | +.timetwo{ | ||
| 109 | + display:flex; | ||
| 110 | + align-items: center; | ||
| 111 | + padding: 60rpx 100rpx 50rpx; | ||
| 112 | + box-sizing: border-box; | ||
| 113 | + justify-content: space-between | ||
| 114 | +} | ||
| 115 | +.timebetin{ | ||
| 116 | + display:flex; | ||
| 117 | + flex-direction: column; | ||
| 118 | + justify-content: center; | ||
| 119 | + align-items: center | ||
| 120 | +} | ||
| 121 | +.timetop{ | ||
| 122 | + color:#999999; | ||
| 123 | + font-size: 24rpx; | ||
| 124 | +} | ||
| 125 | +.timebottom{ | ||
| 126 | + color:#999999; | ||
| 127 | + font-size: 32rpx; | ||
| 128 | + margin-top:10rpx; | ||
| 129 | +} | ||
| 130 | +.seltimeactive{ | ||
| 131 | + color:#FF9400; | ||
| 132 | + | ||
| 133 | +} | ||
| 134 | +.selnameactive{ | ||
| 135 | + color:#333 | ||
| 136 | +} | ||
| 137 | +.timebox{ | ||
| 138 | + width:580rpx; | ||
| 139 | + height:308rpx; | ||
| 140 | + overflow-y: scroll; | ||
| 141 | + margin:0 auto; | ||
| 142 | +} | ||
| 143 | +.timeboxitem{ | ||
| 144 | + display:flex; | ||
| 145 | + align-items: center; | ||
| 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; | ||
| 194 | +} |
| 1 | +// pages/qiyeyongdian/detail/detail.js | ||
| 2 | + | ||
| 3 | +import * as echarts from '../../../ec-canvas/echarts'; | ||
| 4 | + | ||
| 5 | +const app = getApp(); | ||
| 6 | +var Chart = null; | ||
| 7 | +Page({ | ||
| 8 | + | ||
| 9 | + /** | ||
| 10 | + * 页面的初始数据 | ||
| 11 | + */ | ||
| 12 | + data: { | ||
| 13 | + showModal: false, | ||
| 14 | + monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], | ||
| 15 | + time:'2019.01.01-2019.01.31', | ||
| 16 | + changeColor: -1, | ||
| 17 | + ec: { | ||
| 18 | + | ||
| 19 | + onInit: function(canvas, width, height) { | ||
| 20 | + | ||
| 21 | + chart = echarts.init(canvas, null, { | ||
| 22 | + | ||
| 23 | + width: width, | ||
| 24 | + | ||
| 25 | + height: height | ||
| 26 | + | ||
| 27 | + }); | ||
| 28 | + | ||
| 29 | + canvas.setChart(chart); | ||
| 30 | + | ||
| 31 | + return chart; | ||
| 32 | + | ||
| 33 | + }, | ||
| 34 | + | ||
| 35 | + lazyLoad: true, // 延迟加载 | ||
| 36 | + showt:false | ||
| 37 | + }, | ||
| 38 | + | ||
| 39 | + }, | ||
| 40 | + choice(e) { | ||
| 41 | + let index = e.currentTarget.dataset.id; | ||
| 42 | + index=index+1 | ||
| 43 | + if(index==1||index==3||index==5||index==7||index==8||index==10||index==12){ | ||
| 44 | + if(index<10){ | ||
| 45 | + this.setData({ | ||
| 46 | + time: "（" + "2019." + "0" + index + ".01" + "-2019." +'0'+ index + ".31" + "）" | ||
| 47 | + }) | ||
| 48 | + }else{ | ||
| 49 | + this.setData({ | ||
| 50 | + time: "（" + "2019." + index + ".01" + "-2019." + index + ".31" + "）" | ||
| 51 | + }) | ||
| 52 | + } | ||
| 53 | + | ||
| 54 | + }else{ | ||
| 55 | + if(index<10){ | ||
| 56 | + this.setData({ | ||
| 57 | + time: "（" + "2019." + "0" + index + ".01" + "-2019." + '0' + index + ".30" + "）" | ||
| 58 | + }) | ||
| 59 | + }else{ | ||
| 60 | + this.setData({ | ||
| 61 | + time: "（" + "2019." + index + ".01" + "-2019." + index + ".30" + "）" | ||
| 62 | + }) | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + } | ||
| 66 | + this.setData({ | ||
| 67 | + changeColor: index-1 | ||
| 68 | + }) | ||
| 69 | + }, | ||
| 70 | + three(){ | ||
| 71 | + this.setData({ | ||
| 72 | + time:'近30天', | ||
| 73 | + showt: !this.data.showt | ||
| 74 | + }) | ||
| 75 | + }, | ||
| 76 | + toShowModal(e) { | ||
| 77 | + this.setData({ | ||
| 78 | + showModal: true | ||
| 79 | + | ||
| 80 | + }) | ||
| 81 | + }, | ||
| 82 | + | ||
| 83 | + hideModal() { | ||
| 84 | + this.setData({ | ||
| 85 | + showModal: false | ||
| 86 | + }); | ||
| 87 | + }, | ||
| 88 | + /** | ||
| 89 | + * 生命周期函数--监听页面加载 | ||
| 90 | + */ | ||
| 91 | + onLoad: function(options) { | ||
| 92 | + | ||
| 93 | + this.echartsComponnet = this.selectComponent('#mychart'); | ||
| 94 | + | ||
| 95 | + //如果是第一次绘制 | ||
| 96 | + | ||
| 97 | + if (!Chart) { | ||
| 98 | + | ||
| 99 | + this.init_echarts(); //初始化图表 | ||
| 100 | + | ||
| 101 | + } else { | ||
| 102 | + | ||
| 103 | + this.setOption(Chart); //更新数据 | ||
| 104 | + | ||
| 105 | + } | ||
| 106 | + | ||
| 107 | + }, | ||
| 108 | + //初始化图表 | ||
| 109 | + | ||
| 110 | + init_echarts: function() { | ||
| 111 | + | ||
| 112 | + this.echartsComponnet.init((canvas, width, height) => { | ||
| 113 | + | ||
| 114 | + // 初始化图表 | ||
| 115 | + | ||
| 116 | + const Chart = echarts.init(canvas, null, { | ||
| 117 | + | ||
| 118 | + width: width, | ||
| 119 | + | ||
| 120 | + height: height | ||
| 121 | + | ||
| 122 | + }); | ||
| 123 | + | ||
| 124 | + this.setOption(Chart) | ||
| 125 | + | ||
| 126 | + // 注意这里一定要返回 chart 实例，否则会影响事件处理等 | ||
| 127 | + | ||
| 128 | + return Chart; | ||
| 129 | + | ||
| 130 | + }); | ||
| 131 | + | ||
| 132 | + }, | ||
| 133 | + | ||
| 134 | + setOption: function(Chart) { | ||
| 135 | + | ||
| 136 | + Chart.clear(); // 清除 | ||
| 137 | + | ||
| 138 | + Chart.setOption(this.getOption()); //获取新数据 | ||
| 139 | + | ||
| 140 | + }, | ||
| 141 | + | ||
| 142 | + // 图表配置项 | ||
| 143 | + | ||
| 144 | + getOption() { | ||
| 145 | + | ||
| 146 | + var self = this; | ||
| 147 | + | ||
| 148 | + var option = { | ||
| 149 | + | ||
| 150 | + color: ["#FFF"], //图例图标颜色 | ||
| 151 | + // lineStyle:{//阴影 | ||
| 152 | + // shadowColor: '#6495F8', | ||
| 153 | + // shadowBlur: 10 | ||
| 154 | + // }, | ||
| 155 | + xAxis: { //横坐标 | ||
| 156 | + | ||
| 157 | + type: 'category', | ||
| 158 | + | ||
| 159 | + name: '日期', //横坐标名称 | ||
| 160 | + | ||
| 161 | + nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 162 | + | ||
| 163 | + color: '#333', | ||
| 164 | + | ||
| 165 | + fontStyle: 'normal' | ||
| 166 | + | ||
| 167 | + }, | ||
| 168 | + axisLabel: { | ||
| 169 | + interval: 0, | ||
| 170 | + }, | ||
| 171 | + boundaryGap: false, //1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上 | ||
| 172 | + | ||
| 173 | + 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'], | ||
| 174 | + | ||
| 175 | + axisLabel: { | ||
| 176 | + | ||
| 177 | + textStyle: { | ||
| 178 | + | ||
| 179 | + fontSize: 13, | ||
| 180 | + | ||
| 181 | + color: '#5D5D5D' | ||
| 182 | + | ||
| 183 | + } | ||
| 184 | + | ||
| 185 | + } | ||
| 186 | + | ||
| 187 | + }, | ||
| 188 | + | ||
| 189 | + yAxis: { //纵坐标 | ||
| 190 | + | ||
| 191 | + type: 'value', | ||
| 192 | + | ||
| 193 | + position: 'left', | ||
| 194 | + | ||
| 195 | + name: '千瓦时', //纵坐标名称 | ||
| 196 | + | ||
| 197 | + nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 198 | + | ||
| 199 | + color: '#333333', | ||
| 200 | + | ||
| 201 | + fontStyle: 'normal' | ||
| 202 | + | ||
| 203 | + }, | ||
| 204 | + | ||
| 205 | + splitNumber: 5, //坐标轴的分割段数 | ||
| 206 | + | ||
| 207 | + | ||
| 208 | + min: 0, | ||
| 209 | + | ||
| 210 | + max: 500, | ||
| 211 | + | ||
| 212 | + }, | ||
| 213 | + | ||
| 214 | + series: [{ | ||
| 215 | + | ||
| 216 | + type: 'line', | ||
| 217 | + | ||
| 218 | + 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], | ||
| 219 | + | ||
| 220 | + symbol: 'true', | ||
| 221 | + | ||
| 222 | + itemStyle: { | ||
| 223 | + | ||
| 224 | + normal: { | ||
| 225 | + | ||
| 226 | + lineStyle: { | ||
| 227 | + | ||
| 228 | + color: '#6495F8' | ||
| 229 | + | ||
| 230 | + } | ||
| 231 | + | ||
| 232 | + } | ||
| 233 | + | ||
| 234 | + }, | ||
| 235 | + // areaStyle: { | ||
| 236 | + // normal: { | ||
| 237 | + // color: '#6495F8' //改变区域颜色 | ||
| 238 | + // } | ||
| 239 | + // }, | ||
| 240 | + | ||
| 241 | + }], | ||
| 242 | + | ||
| 243 | + } | ||
| 244 | + | ||
| 245 | + return option; | ||
| 246 | + | ||
| 247 | + }, | ||
| 248 | + /** | ||
| 249 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 250 | + */ | ||
| 251 | + onReady: function() { | ||
| 252 | + | ||
| 253 | + }, | ||
| 254 | + | ||
| 255 | + /** | ||
| 256 | + * 生命周期函数--监听页面显示 | ||
| 257 | + */ | ||
| 258 | + onShow: function() { | ||
| 259 | + | ||
| 260 | + }, | ||
| 261 | + | ||
| 262 | + /** | ||
| 263 | + * 生命周期函数--监听页面隐藏 | ||
| 264 | + */ | ||
| 265 | + onHide: function() { | ||
| 266 | + | ||
| 267 | + }, | ||
| 268 | + | ||
| 269 | + /** | ||
| 270 | + * 生命周期函数--监听页面卸载 | ||
| 271 | + */ | ||
| 272 | + onUnload: function() { | ||
| 273 | + | ||
| 274 | + }, | ||
| 275 | + | ||
| 276 | + /** | ||
| 277 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 278 | + */ | ||
| 279 | + onPullDownRefresh: function() { | ||
| 280 | + | ||
| 281 | + }, | ||
| 282 | + | ||
| 283 | + /** | ||
| 284 | + * 页面上拉触底事件的处理函数 | ||
| 285 | + */ | ||
| 286 | + onReachBottom: function() { | ||
| 287 | + | ||
| 288 | + }, | ||
| 289 | + | ||
| 290 | + /** | ||
| 291 | + * 用户点击右上角分享 | ||
| 292 | + */ | ||
| 293 | + onShareAppMessage: function() { | ||
| 294 | + | ||
| 295 | + } | ||
| 296 | +}) |
| 1 | +<!--pages/qiyeyongdian/detail/detail.wxml--> | ||
| 2 | +<!-- 日期选择 --> | ||
| 3 | +<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view> | ||
| 4 | +<view wx:if="{{showModal}}"> | ||
| 5 | + <view class="modal-content"> | ||
| 6 | + <!-- 年份 --> | ||
| 7 | + <view class="modal_year">2019年</view> | ||
| 8 | + <!-- 月份 --> | ||
| 9 | + <view class="modal_month"> | ||
| 10 | + <view class="month_single {{changeColor == index?'change':''}}" wx:for="{{monthList}}" wx:key="" data-id="{{index}}" catchtap="choice">{{item}}</view> | ||
| 11 | + </view> | ||
| 12 | + <view class="date_descript {{showt==true?'tactive':''}}" bindtap="three">近30天</view> | ||
| 13 | + <view class='btns'> | ||
| 14 | + <view class="cacle" bindtap="hideModal">取消</view> | ||
| 15 | + <view class="cacle sure" bindtap="hideModal">确定</view> | ||
| 16 | + </view> | ||
| 17 | + </view> | ||
| 18 | +</view> | ||
| 19 | +<!-- 月份 --> | ||
| 20 | +<view class="search_month"> | ||
| 21 | + <view class="rowimg"> | ||
| 22 | + <image src='/img/row.png' class="left"></image> | ||
| 23 | + </view> | ||
| 24 | + <view class="date_time" bindtap='toShowModal'> | ||
| 25 | + <!-- 近30天（2019.03.01-2019.03.30） --> | ||
| 26 | + {{time}} | ||
| 27 | + <view class="rowimg"> | ||
| 28 | + <image src='/img/row.png' class="down"></image> | ||
| 29 | + </view> | ||
| 30 | + </view> | ||
| 31 | + <view class="rowimg"> | ||
| 32 | + <image src='/img/row.png'></image> | ||
| 33 | + </view> | ||
| 34 | +</view> | ||
| 35 | +<!-- 折线图 --> | ||
| 36 | +<view class="charts_line"> | ||
| 37 | + <view class="chart"> | ||
| 38 | + <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas> | ||
| 39 | +<!-- <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ec}}"></ec-canvas> --> | ||
| 40 | + </view> | ||
| 41 | + | ||
| 42 | + <view class="total_power"> | ||
| 43 | + <view>当月：1788kw.h</view> | ||
| 44 | + <view>累计：5898kw.h</view> | ||
| 45 | + </view> | ||
| 46 | + | ||
| 47 | +</view> |
| 1 | +/* pages/qiyeyongdian/detail/detail.wxss */ | ||
| 2 | + | ||
| 3 | +.search_month { | ||
| 4 | + width: 686rpx; | ||
| 5 | + padding: 0 30rpx; | ||
| 6 | + height: 70rpx; | ||
| 7 | + background-color: #f3f5f8; | ||
| 8 | + display: flex; | ||
| 9 | + flex-direction: row; | ||
| 10 | + justify-content: space-between; | ||
| 11 | + align-items: center; | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +/* 左箭头 */ | ||
| 15 | + | ||
| 16 | +.left { | ||
| 17 | + transform: rotate(180deg); | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +/* 日期 */ | ||
| 21 | + | ||
| 22 | +.date_time { | ||
| 23 | + color: #666; | ||
| 24 | + font-size: 28rpx; | ||
| 25 | + display: flex; | ||
| 26 | + flex-direction: row; | ||
| 27 | + align-items: center; | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +.down { | ||
| 31 | + transform: rotate(90deg); | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +/* 折线图 */ | ||
| 35 | + | ||
| 36 | + | ||
| 37 | + | ||
| 38 | +.chart { | ||
| 39 | + width: 750rpx; | ||
| 40 | + height: 394rpx; | ||
| 41 | + margin: 0 auto; | ||
| 42 | + display: flex; | ||
| 43 | + justify-content: center; | ||
| 44 | + align-items: center; | ||
| 45 | +} | ||
| 46 | + | ||
| 47 | +ec-canvas { | ||
| 48 | + width: 100%; | ||
| 49 | + height: 100%; | ||
| 50 | +} | ||
| 51 | + | ||
| 52 | +.total_power { | ||
| 53 | + display: flex; | ||
| 54 | + flex-direction: row; | ||
| 55 | + justify-content: space-around; | ||
| 56 | +} | ||
| 57 | + | ||
| 58 | +/* 弹出框 */ | ||
| 59 | + | ||
| 60 | +.modal-mask { | ||
| 61 | + width: 100%; | ||
| 62 | + height: 100%; | ||
| 63 | + position: fixed; | ||
| 64 | + top: 0; | ||
| 65 | + left: 0; | ||
| 66 | + background: #000; | ||
| 67 | + opacity: 0.5; | ||
| 68 | + overflow: hidden; | ||
| 69 | + z-index: 9000; | ||
| 70 | + color: #fff; | ||
| 71 | +} | ||
| 72 | + | ||
| 73 | +.modal-dialog { | ||
| 74 | + width: 100%; | ||
| 75 | + overflow: hidden; | ||
| 76 | + position: fixed; | ||
| 77 | + top: 45%; | ||
| 78 | + left: 0; | ||
| 79 | + z-index: 9500; | ||
| 80 | + margin: -180rpx 70rpx; | ||
| 81 | +} | ||
| 82 | + | ||
| 83 | +.modal-content { | ||
| 84 | + position: fixed; | ||
| 85 | + top: 0; | ||
| 86 | + left: 0; | ||
| 87 | + z-index: 9500; | ||
| 88 | + width: 100%; | ||
| 89 | + /* height: 55%; */ | ||
| 90 | + overflow: hidden; | ||
| 91 | + /* padding: 120rpx 50rpx 50rpx; */ | ||
| 92 | + background: #fff; | ||
| 93 | + border-radius: 2rpx; | ||
| 94 | +} | ||
| 95 | + | ||
| 96 | +/* 年份 */ | ||
| 97 | + | ||
| 98 | +.modal_year { | ||
| 99 | + padding: 38rpx; | ||
| 100 | + border: 1rpx solid #f5f5f5; | ||
| 101 | + font-size: 28rpx; | ||
| 102 | + color: #666; | ||
| 103 | + text-align: center; | ||
| 104 | +} | ||
| 105 | + | ||
| 106 | +/* 月份 */ | ||
| 107 | + | ||
| 108 | +.modal_month { | ||
| 109 | + display: flex; | ||
| 110 | + flex-wrap: wrap; | ||
| 111 | + flex-direction: row; | ||
| 112 | + margin: 40rpx 0 30rpx; | ||
| 113 | +} | ||
| 114 | + | ||
| 115 | +.month_single { | ||
| 116 | + width: 33.333%; | ||
| 117 | + height: 120rpx; | ||
| 118 | + text-align: center; | ||
| 119 | + border-radius: 6rpx; | ||
| 120 | + font-size: 32rpx; | ||
| 121 | + color: #333; | ||
| 122 | + line-height: 120rpx; | ||
| 123 | +} | ||
| 124 | + | ||
| 125 | +.change { | ||
| 126 | + background-color: #ff9400; | ||
| 127 | + color: #fff; | ||
| 128 | +} | ||
| 129 | + | ||
| 130 | +.date_descript { | ||
| 131 | + width: 296rpx; | ||
| 132 | + height: 70rpx; | ||
| 133 | + line-height: 70rpx; | ||
| 134 | + text-align: center; | ||
| 135 | + color: #ff9400; | ||
| 136 | + font-size: 28rpx; | ||
| 137 | + margin: 0 auto; | ||
| 138 | + background: rgba(244, 244, 244, 1); | ||
| 139 | + border-radius: 6rpx; | ||
| 140 | +} | ||
| 141 | +.tactive{ | ||
| 142 | + background: #ff9400; | ||
| 143 | + color:#fff; | ||
| 144 | +} | ||
| 145 | + | ||
| 146 | +.btns { | ||
| 147 | + margin-top: 50rpx; | ||
| 148 | + display: flex; | ||
| 149 | + flex-direction: row; | ||
| 150 | + align-items: center; | ||
| 151 | + border-top: 1rpx solid #f5f5f5; | ||
| 152 | +} | ||
| 153 | + | ||
| 154 | +.cacle { | ||
| 155 | + width: 50%; | ||
| 156 | + color: #afafaf; | ||
| 157 | + height: 87rpx; | ||
| 158 | + line-height: 87rpx; | ||
| 159 | + text-align: center; | ||
| 160 | + font-size: 34rpx; | ||
| 161 | +} | ||
| 162 | + | ||
| 163 | +.sure { | ||
| 164 | + color: #ff9400; | ||
| 165 | + border-left: 1rpx solid #f5f5f5; | ||
| 166 | +} |
| 1 | +// pages/qiyeyongdian/qyyd/qyyd.js | ||
| 2 | +Page({ | ||
| 3 | + | ||
| 4 | + /** | ||
| 5 | + * 页面的初始数据 | ||
| 6 | + */ | ||
| 7 | + data: { | ||
| 8 | + list: [{ | ||
| 9 | + index: 1, | ||
| 10 | + name: "电表009", | ||
| 11 | + num: "27.5", | ||
| 12 | + unit: "昨日（千瓦时）", | ||
| 13 | + unit1: "上月（千瓦时）" | ||
| 14 | + }, | ||
| 15 | + { | ||
| 16 | + index: 1, | ||
| 17 | + name: "电表009", | ||
| 18 | + num: "27.5", | ||
| 19 | + unit: "昨日（千瓦时）", | ||
| 20 | + unit1: "上月（千瓦时）" | ||
| 21 | + }, | ||
| 22 | + { | ||
| 23 | + index: 1, | ||
| 24 | + name: "电表009", | ||
| 25 | + num: "27.5", | ||
| 26 | + unit: "昨日（千瓦时）", | ||
| 27 | + unit1: "上月（千瓦时）" | ||
| 28 | + }, | ||
| 29 | + { | ||
| 30 | + index: 1, | ||
| 31 | + name: "电表009", | ||
| 32 | + num: "27.5", | ||
| 33 | + unit: "昨日（千瓦时）", | ||
| 34 | + unit1: "上月（千瓦时）" | ||
| 35 | + }, | ||
| 36 | + ], | ||
| 37 | + }, | ||
| 38 | + toDetail(e){ | ||
| 39 | + wx.navigateTo({ | ||
| 40 | + url: '/pages/qiyeyongdian/detail/detail?id='+e.currentTarget.dataset.id, | ||
| 41 | + }) | ||
| 42 | + }, | ||
| 43 | + /** | ||
| 44 | + * 生命周期函数--监听页面加载 | ||
| 45 | + */ | ||
| 46 | + onLoad: function(options) { | ||
| 47 | + | ||
| 48 | + }, | ||
| 49 | + | ||
| 50 | + /** | ||
| 51 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 52 | + */ | ||
| 53 | + onReady: function() { | ||
| 54 | + | ||
| 55 | + }, | ||
| 56 | + | ||
| 57 | + /** | ||
| 58 | + * 生命周期函数--监听页面显示 | ||
| 59 | + */ | ||
| 60 | + onShow: function() { | ||
| 61 | + | ||
| 62 | + }, | ||
| 63 | + | ||
| 64 | + /** | ||
| 65 | + * 生命周期函数--监听页面隐藏 | ||
| 66 | + */ | ||
| 67 | + onHide: function() { | ||
| 68 | + | ||
| 69 | + }, | ||
| 70 | + | ||
| 71 | + /** | ||
| 72 | + * 生命周期函数--监听页面卸载 | ||
| 73 | + */ | ||
| 74 | + onUnload: function() { | ||
| 75 | + | ||
| 76 | + }, | ||
| 77 | + | ||
| 78 | + /** | ||
| 79 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 80 | + */ | ||
| 81 | + onPullDownRefresh: function() { | ||
| 82 | + | ||
| 83 | + }, | ||
| 84 | + | ||
| 85 | + /** | ||
| 86 | + * 页面上拉触底事件的处理函数 | ||
| 87 | + */ | ||
| 88 | + onReachBottom: function() { | ||
| 89 | + | ||
| 90 | + }, | ||
| 91 | + | ||
| 92 | + /** | ||
| 93 | + * 用户点击右上角分享 | ||
| 94 | + */ | ||
| 95 | + onShareAppMessage: function() { | ||
| 96 | + | ||
| 97 | + } | ||
| 98 | +}) |
| 1 | +<!--pages/qiyeyongdian/qyyd/qyyd.wxml--> | ||
| 2 | +<!-- 标题 --> | ||
| 3 | +<view class="qy_title"> | ||
| 4 | + <view class="pesudo">电表数量：3</view> | ||
| 5 | +</view> | ||
| 6 | +<!-- 内容 --> | ||
| 7 | +<view class="qy_content_box"> | ||
| 8 | + <view class="content_single" wx:for="{{list}}" wx:key="" bindtap='toDetail' data-id="{{item.index}}"> | ||
| 9 | + <view>{{item.name}}</view> | ||
| 10 | + <view class="qy_used"> | ||
| 11 | + <view>{{item.num}}</view> | ||
| 12 | + <view class="unit">{{item.unit}}</view> | ||
| 13 | + </view> | ||
| 14 | + <view class="qy_used"> | ||
| 15 | + <view>{{item.num}}</view> | ||
| 16 | + <view class="unit">{{item.unit1}}</view> | ||
| 17 | + </view> | ||
| 18 | + <view class="rowimg"> | ||
| 19 | + <image src='/img/row.png'></image> | ||
| 20 | + </view> | ||
| 21 | + </view> | ||
| 22 | +</view> |
| 1 | +/* pages/qiyeyongdian/qyyd/qyyd.wxss */ | ||
| 2 | + | ||
| 3 | +/* 标题 */ | ||
| 4 | + | ||
| 5 | +.qy_title { | ||
| 6 | + font-size: 32rpx; | ||
| 7 | + color: #333; | ||
| 8 | + font-weight: 500; | ||
| 9 | + padding: 30rpx 54rpx; | ||
| 10 | + border: 1rpx solid #f5f5f5; | ||
| 11 | + border-left: none; | ||
| 12 | + border-right: none; | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +/* 伪类 */ | ||
| 16 | + | ||
| 17 | +.pesudo { | ||
| 18 | + position: relative; | ||
| 19 | +} | ||
| 20 | + | ||
| 21 | +.pesudo::after { | ||
| 22 | + position: absolute; | ||
| 23 | + top: 6rpx; | ||
| 24 | + left: -18rpx; | ||
| 25 | + content: ""; | ||
| 26 | + display: block; | ||
| 27 | + width: 8rpx; | ||
| 28 | + height: 35rpx; | ||
| 29 | + background-color: #ff9400; | ||
| 30 | +} | ||
| 31 | + | ||
| 32 | +/* 内容 */ | ||
| 33 | + | ||
| 34 | +.qy_content_box { | ||
| 35 | + padding: 30rpx; | ||
| 36 | +} | ||
| 37 | + | ||
| 38 | +/* 内容列表 */ | ||
| 39 | + | ||
| 40 | +.content_single { | ||
| 41 | + width: 630rpx; | ||
| 42 | + height: 138rpx; | ||
| 43 | + border: 1rpx solid #f5f5f5; | ||
| 44 | + border-radius: 10rpx; | ||
| 45 | + color: #333333; | ||
| 46 | + display: flex; | ||
| 47 | + flex-direction: row; | ||
| 48 | + align-items: center; | ||
| 49 | + justify-content: space-between; | ||
| 50 | + padding:0 30rpx; | ||
| 51 | + margin-bottom: 30rpx; | ||
| 52 | +} | ||
| 53 | +.qy_used{ | ||
| 54 | + text-align: center; | ||
| 55 | +} | ||
| 56 | +.unit{ | ||
| 57 | + font-size: 20rpx; | ||
| 58 | + color: #666666; | ||
| 59 | + margin-top:10rpx; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | + |
| 1 | +// pages/shebei/shebeidetail/shebeidetail.js | ||
| 2 | +import * as echarts from '../../../ec-canvas/echarts'; | ||
| 3 | +const app = getApp(); | ||
| 4 | + | ||
| 5 | +function initChart1(canvas, width, height) { | ||
| 6 | + const chart = echarts.init(canvas, null, { | ||
| 7 | + width: width, | ||
| 8 | + height: height | ||
| 9 | + }); | ||
| 10 | + canvas.setChart(chart); | ||
| 11 | + | ||
| 12 | + var option = { | ||
| 13 | + title: { | ||
| 14 | + text: '半年度开工曲线', | ||
| 15 | + left: 'center' | ||
| 16 | + }, | ||
| 17 | + | ||
| 18 | + | ||
| 19 | + toolbox: { | ||
| 20 | + | ||
| 21 | + }, | ||
| 22 | + xAxis: { | ||
| 23 | + type: 'category', | ||
| 24 | + boundaryGap: false, | ||
| 25 | + data: ['2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04'], | ||
| 26 | + axisLabel: { | ||
| 27 | + interval: 0, | ||
| 28 | + }, | ||
| 29 | + name: '日期' | ||
| 30 | + | ||
| 31 | + | ||
| 32 | + }, | ||
| 33 | + yAxis: { | ||
| 34 | + type: 'value', | ||
| 35 | + axisLabel: { | ||
| 36 | + formatter: '{value}' | ||
| 37 | + }, | ||
| 38 | + min: 100, | ||
| 39 | + max: 500, | ||
| 40 | + splitNumber: 5, | ||
| 41 | + name: '小时(h)' | ||
| 42 | + | ||
| 43 | + }, | ||
| 44 | + series: [{ | ||
| 45 | + name: '', | ||
| 46 | + type: 'line', | ||
| 47 | + smooth: true, | ||
| 48 | + color: '#FCB237', | ||
| 49 | + data: [112, 115, 454, 135, 125, 135, 170], | ||
| 50 | + markPoint: { | ||
| 51 | + data: [{ | ||
| 52 | + type: 'max', | ||
| 53 | + name: '最大值' | ||
| 54 | + }, | ||
| 55 | + { | ||
| 56 | + type: 'min', | ||
| 57 | + name: '最小值' | ||
| 58 | + } | ||
| 59 | + ] | ||
| 60 | + }, | ||
| 61 | + markLine: { | ||
| 62 | + data: [{ | ||
| 63 | + type: 'average', | ||
| 64 | + name: '平均值' | ||
| 65 | + }] | ||
| 66 | + }, | ||
| 67 | + // areaStyle: { | ||
| 68 | + // // normal: { | ||
| 69 | + // // color: '#F8E9DD' //改变区域颜色 | ||
| 70 | + // // } | ||
| 71 | + // }, | ||
| 72 | + }, | ||
| 73 | + | ||
| 74 | + ] | ||
| 75 | + }; | ||
| 76 | + | ||
| 77 | + chart.setOption(option); | ||
| 78 | + return chart; | ||
| 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 | +} | ||
| 206 | +Page({ | ||
| 207 | + | ||
| 208 | + onShareAppMessage: function(res) { | ||
| 209 | + return { | ||
| 210 | + title: 'ECharts 可以在微信小程序中使用啦！', | ||
| 211 | + path: '', | ||
| 212 | + success: function() {}, | ||
| 213 | + fail: function() {} | ||
| 214 | + } | ||
| 215 | + }, | ||
| 216 | + | ||
| 217 | + /** | ||
| 218 | + * 页面的初始数据 | ||
| 219 | + */ | ||
| 220 | + data: { | ||
| 221 | + state: 1, | ||
| 222 | + statedate: "", | ||
| 223 | + date: '', | ||
| 224 | + | ||
| 225 | + ec: { | ||
| 226 | + onInit: initChart1, | ||
| 227 | + | ||
| 228 | + // onInit: initChart1 | ||
| 229 | + | ||
| 230 | + }, | ||
| 231 | + ec1: { | ||
| 232 | + onInit: initChart2, | ||
| 233 | + | ||
| 234 | + // onInit: initChart1 | ||
| 235 | + | ||
| 236 | + }, | ||
| 237 | + }, | ||
| 238 | + | ||
| 239 | + /** | ||
| 240 | + * 生命周期函数--监听页面加载 | ||
| 241 | + */ | ||
| 242 | + onLoad: function(options) { | ||
| 243 | + this.setData({ | ||
| 244 | + statedate: app.monthnowDate(), | ||
| 245 | + date: app.monthnowDate() | ||
| 246 | + }) | ||
| 247 | + }, | ||
| 248 | + selectshebei(e) { | ||
| 249 | + this.setData({ | ||
| 250 | + state: e.currentTarget.dataset.id | ||
| 251 | + }) | ||
| 252 | + }, | ||
| 253 | + | ||
| 254 | + bindstateDateChange(e) { | ||
| 255 | + console.log('picker发送选择改变，携带值为', e.detail.value) | ||
| 256 | + this.setData({ | ||
| 257 | + statedate: e.detail.value | ||
| 258 | + }) | ||
| 259 | + }, | ||
| 260 | + bindDateChange: function(e) { | ||
| 261 | + console.log('picker发送选择改变，携带值为', e.detail.value) | ||
| 262 | + this.setData({ | ||
| 263 | + date: e.detail.value | ||
| 264 | + }) | ||
| 265 | + }, | ||
| 266 | + /** | ||
| 267 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 268 | + */ | ||
| 269 | + onReady: function() { | ||
| 270 | + | ||
| 271 | + }, | ||
| 272 | + | ||
| 273 | + /** | ||
| 274 | + * 生命周期函数--监听页面显示 | ||
| 275 | + */ | ||
| 276 | + onShow: function() { | ||
| 277 | + | ||
| 278 | + }, | ||
| 279 | + | ||
| 280 | + /** | ||
| 281 | + * 生命周期函数--监听页面隐藏 | ||
| 282 | + */ | ||
| 283 | + onHide: function() { | ||
| 284 | + | ||
| 285 | + }, | ||
| 286 | + | ||
| 287 | + /** | ||
| 288 | + * 生命周期函数--监听页面卸载 | ||
| 289 | + */ | ||
| 290 | + onUnload: function() { | ||
| 291 | + | ||
| 292 | + }, | ||
| 293 | + | ||
| 294 | + /** | ||
| 295 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 296 | + */ | ||
| 297 | + onPullDownRefresh: function() { | ||
| 298 | + | ||
| 299 | + }, | ||
| 300 | + | ||
| 301 | + /** | ||
| 302 | + * 页面上拉触底事件的处理函数 | ||
| 303 | + */ | ||
| 304 | + onReachBottom: function() { | ||
| 305 | + | ||
| 306 | + }, | ||
| 307 | + | ||
| 308 | + /** | ||
| 309 | + * 用户点击右上角分享 | ||
| 310 | + */ | ||
| 311 | + onShareAppMessage: function() { | ||
| 312 | + | ||
| 313 | + } | ||
| 314 | +}) |
| 1 | +<view class="detailhead"> | ||
| 2 | + <view class="detailname {{state==1?'selactive':''}}" bindtap="selectshebei" data-id="1">设备状态</view> | ||
| 3 | + <view class="detailname {{state==2?'selactive':''}}" bindtap="selectshebei" data-id="2">设备详情</view> | ||
| 4 | + <view class="detailname {{state==3?'selactive':''}}" bindtap="selectshebei" data-id="3">设备月报</view> | ||
| 5 | +</view> | ||
| 6 | + | ||
| 7 | +<!-- 设备状态 --> | ||
| 8 | + | ||
| 9 | +<view class="shebeizhuang" wx:if="{{state==1}}"> | ||
| 10 | + | ||
| 11 | + <view class="date"> | ||
| 12 | + <view class="dateleft"> | ||
| 13 | + <image src="/img/row.png"></image> | ||
| 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> | ||
| 23 | + | ||
| 24 | + <view class="datepic"> | ||
| 25 | + <image src="/img/row.png"></image> | ||
| 26 | + </view> | ||
| 27 | + </view> | ||
| 28 | + | ||
| 29 | + <view class="dateright"> | ||
| 30 | + <image src="/img/row.png"></image> | ||
| 31 | + </view> | ||
| 32 | + </view> | ||
| 33 | + <view class="containerzhu"> | ||
| 34 | + <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec1 }}"></ec-canvas> | ||
| 35 | + </view> | ||
| 36 | + | ||
| 37 | +</view> | ||
| 38 | + | ||
| 39 | + | ||
| 40 | + | ||
| 41 | +<!-- 设备详情 --> | ||
| 42 | + | ||
| 43 | +<view class="shebeidetail" wx:if="{{state==2}}"> | ||
| 44 | + <view class="beginkaiji">开机时间</view> | ||
| 45 | + <view class="hournum">13604.61</view> | ||
| 46 | + <view class="xian"></view> | ||
| 47 | + | ||
| 48 | + <view class="desbox"> | ||
| 49 | + <view class="desboxhead">设备描述</view> | ||
| 50 | + <view class="destext"> | ||
| 51 | + 该公司的生产线是专业设备，大设备中有小设备，小设备中还有更小的设备，而且这些设备并不是成套购买的，组装成生产线后不容易清点。在本案中，原本是两条生产线都抵押给银行了，但在法院现场清点中，我们发现还有相当数量的设备未设定抵押。在法院委托评估的报告中罗列了110项设备，而两家银行合计抵 | ||
| 52 | + </view> | ||
| 53 | + </view> | ||
| 54 | + | ||
| 55 | + <view class="shepic"> | ||
| 56 | + <view class="pictitle">设备照片</view> | ||
| 57 | + <view class="piclist"> | ||
| 58 | + <view class="listitem"> | ||
| 59 | + <image src="/img/logo3.png"></image> | ||
| 60 | + </view> | ||
| 61 | + <view class="listitem"> | ||
| 62 | + <image src="/img/logo3.png"></image> | ||
| 63 | + </view> | ||
| 64 | + <view class="listitem"> | ||
| 65 | + <image src="/img/logo3.png"></image> | ||
| 66 | + </view> | ||
| 67 | + <view class="listitem"> | ||
| 68 | + <image src="/img/logo3.png"></image> | ||
| 69 | + </view> | ||
| 70 | + </view> | ||
| 71 | + | ||
| 72 | + </view> | ||
| 73 | +</view> | ||
| 74 | +<!-- 设备月报 --> | ||
| 75 | + | ||
| 76 | +<view class="yuebao" wx:if="{{state==3}}"> | ||
| 77 | + <view class="date"> | ||
| 78 | + <view class="dateleft"> | ||
| 79 | + <image src="/img/row.png"></image> | ||
| 80 | + </view> | ||
| 81 | + <view class="datetime"> | ||
| 82 | + <view class="datesel"> | ||
| 83 | + <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" fields="month"> | ||
| 84 | + <view class="picker"> | ||
| 85 | + {{date}} | ||
| 86 | + </view> | ||
| 87 | + </picker> | ||
| 88 | + </view> | ||
| 89 | + | ||
| 90 | + <view class="datepic"> | ||
| 91 | + <image src="/img/row.png"></image> | ||
| 92 | + </view> | ||
| 93 | + </view> | ||
| 94 | + | ||
| 95 | + <view class="dateright"> | ||
| 96 | + <image src="/img/row.png"></image> | ||
| 97 | + </view> | ||
| 98 | + </view> | ||
| 99 | + | ||
| 100 | + <view class='shebeiworktime'> | ||
| 101 | + <view class="tophour"> | ||
| 102 | + 设备工作总时长(小时) | ||
| 103 | + </view> | ||
| 104 | + | ||
| 105 | + <view class="timenum"> | ||
| 106 | + <text class="timeleft">13604.61</text> | ||
| 107 | + <text class="timeright">4.1%</text> | ||
| 108 | + </view> | ||
| 109 | + </view> | ||
| 110 | + | ||
| 111 | + <view class="timelist"> | ||
| 112 | + <view class="timeitem"> | ||
| 113 | + <view class="timetop"> | ||
| 114 | + 18044.32 | ||
| 115 | + </view> | ||
| 116 | + <view class="timebottom"> | ||
| 117 | + 总工作时长(h) | ||
| 118 | + </view> | ||
| 119 | + </view> | ||
| 120 | + <view class="timeitem"> | ||
| 121 | + <view class="timetop"> | ||
| 122 | + 18044.32 | ||
| 123 | + </view> | ||
| 124 | + <view class="timebottom"> | ||
| 125 | + 日均工作时长(h) | ||
| 126 | + </view> | ||
| 127 | + </view> | ||
| 128 | + <view class="timeitem"> | ||
| 129 | + <view class="timetop"> | ||
| 130 | + 18044.32 | ||
| 131 | + </view> | ||
| 132 | + <view class="timebottom"> | ||
| 133 | + 低于上月总工作时长(h) | ||
| 134 | + </view> | ||
| 135 | + </view> | ||
| 136 | + <view class="timeitem"> | ||
| 137 | + <view class="timetop"> | ||
| 138 | + 18044.32 | ||
| 139 | + </view> | ||
| 140 | + <view class="timebottom"> | ||
| 141 | + 低于上月日均工作时长(h) | ||
| 142 | + </view> | ||
| 143 | + </view> | ||
| 144 | + </view> | ||
| 145 | + | ||
| 146 | + <!-- 半年度开工曲线 --> | ||
| 147 | + | ||
| 148 | + <view class="container"> | ||
| 149 | + <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas> | ||
| 150 | + </view> | ||
| 151 | +</view> |
| 1 | +.detailhead { | ||
| 2 | + display: flex; | ||
| 3 | + align-items: center; | ||
| 4 | + justify-content: space-around; | ||
| 5 | + padding: 20rpx 69rpx; | ||
| 6 | + box-sizing: border-box; | ||
| 7 | + border-bottom: 1rpx solid #f5f5f5; | ||
| 8 | +} | ||
| 9 | + | ||
| 10 | +.detailname { | ||
| 11 | + color: #999; | ||
| 12 | + font-size: 28rpx; | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +.selactive { | ||
| 16 | + position: relative; | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | +.selactive::after { | ||
| 20 | + display: block; | ||
| 21 | + content: ''; | ||
| 22 | + width: 130rpx; | ||
| 23 | + | ||
| 24 | + border: 1rpx solid #ff9400; | ||
| 25 | + background: #ff9400; | ||
| 26 | + position: absolute; | ||
| 27 | + left: -10rpx; | ||
| 28 | + bottom: -20rpx; | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +.beginkaiji { | ||
| 32 | + color: #666; | ||
| 33 | + font-size: 28rpx; | ||
| 34 | + margin-top: 52rpx; | ||
| 35 | + text-align: center; | ||
| 36 | +} | ||
| 37 | + | ||
| 38 | +.hournum { | ||
| 39 | + color: #ffb53c; | ||
| 40 | + font-size: 80rpx; | ||
| 41 | + text-align: center; | ||
| 42 | + margin-top: 41rpx; | ||
| 43 | +} | ||
| 44 | + | ||
| 45 | +.xian { | ||
| 46 | + width: 750rpx; | ||
| 47 | + height: 20rpx; | ||
| 48 | + background: #f6f7f8; | ||
| 49 | + margin-top: 50rpx; | ||
| 50 | +} | ||
| 51 | + | ||
| 52 | +.desbox { | ||
| 53 | + width: 710rpx; | ||
| 54 | + margin: 0 auto; | ||
| 55 | + border: 1rpx solid #d6d8db; | ||
| 56 | + border-radius: 10rpx; | ||
| 57 | + padding-bottom: 20rpx; | ||
| 58 | + box-sizing: border-box; | ||
| 59 | + margin-top: 50rpx; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +.destext { | ||
| 63 | + padding: 20rpx 20rpx 30rpx; | ||
| 64 | + box-sizing: border-box; | ||
| 65 | + color: #333; | ||
| 66 | + font-size: 28rpx; | ||
| 67 | +} | ||
| 68 | + | ||
| 69 | +.desboxhead { | ||
| 70 | + height: 70rpx; | ||
| 71 | + background: #eef1f9; | ||
| 72 | + line-height: 70rpx; | ||
| 73 | + padding: 0 20rpx; | ||
| 74 | + box-sizing: border-box; | ||
| 75 | + color: #333; | ||
| 76 | + font-size: 32rpx; | ||
| 77 | + font-weight: bold; | ||
| 78 | +} | ||
| 79 | + | ||
| 80 | +.pictitle { | ||
| 81 | + color: #333; | ||
| 82 | + font-size: 32rpx; | ||
| 83 | + font-weight: bold; | ||
| 84 | +} | ||
| 85 | + | ||
| 86 | +.shepic { | ||
| 87 | + padding: 40rpx; | ||
| 88 | + box-sizing: border-box; | ||
| 89 | +} | ||
| 90 | + | ||
| 91 | +.listitem { | ||
| 92 | + width: 203rpx; | ||
| 93 | + height: 203rpx; | ||
| 94 | + font-size: 0; | ||
| 95 | + margin-right: 20rpx; | ||
| 96 | + margin-top: 15rpx; | ||
| 97 | +} | ||
| 98 | + | ||
| 99 | +.piclist { | ||
| 100 | + display: flex; | ||
| 101 | + flex-wrap: wrap; | ||
| 102 | + align-items: center; | ||
| 103 | + margin-top: 15rpx; | ||
| 104 | +} | ||
| 105 | +.date{ | ||
| 106 | + display:flex; | ||
| 107 | + align-items: center; | ||
| 108 | + justify-content: space-between; | ||
| 109 | + height:70rpx; | ||
| 110 | + background: #F3F5F8; | ||
| 111 | + padding: 0 31rpx; | ||
| 112 | + box-sizing: border-box | ||
| 113 | +} | ||
| 114 | +.dateleft { | ||
| 115 | + width: 23rpx; | ||
| 116 | + height:23rpx; | ||
| 117 | + font-size: 0; | ||
| 118 | + transform: rotate(180deg); | ||
| 119 | +} | ||
| 120 | + | ||
| 121 | +.dateright { | ||
| 122 | + width: 23rpx; | ||
| 123 | + height: 23rpx; | ||
| 124 | + font-size: 0; | ||
| 125 | +} | ||
| 126 | +.datetime{ | ||
| 127 | + display:flex; | ||
| 128 | + align-items: center | ||
| 129 | +} | ||
| 130 | +.datepic{ | ||
| 131 | + width:16rpx; | ||
| 132 | + height:16rpx; | ||
| 133 | + font-size: 0; | ||
| 134 | + transform: rotate(90deg); | ||
| 135 | + margin-left:12rpx; | ||
| 136 | +} | ||
| 137 | +.datesel{ | ||
| 138 | + color:#666666; | ||
| 139 | + font-size: 28rpx; | ||
| 140 | +} | ||
| 141 | +.shebeiworktime{ | ||
| 142 | + width:750rpx; | ||
| 143 | + height:369rpx; | ||
| 144 | + background: #FFB53C; | ||
| 145 | + overflow: hidden | ||
| 146 | +} | ||
| 147 | +.tophour{ | ||
| 148 | + color:#fff; | ||
| 149 | + font-size: 28rpx; | ||
| 150 | + opacity:0.4; | ||
| 151 | + text-align: center; | ||
| 152 | + margin-top:104rpx; | ||
| 153 | +} | ||
| 154 | +.timenum{ | ||
| 155 | + display:flex; | ||
| 156 | + align-items: center; | ||
| 157 | + justify-content: center; | ||
| 158 | + margin-top:18rpx; | ||
| 159 | + | ||
| 160 | +} | ||
| 161 | +.timeleft{ | ||
| 162 | + color:#fff; | ||
| 163 | + font-size: 80rpx; | ||
| 164 | +} | ||
| 165 | +.timeright{ | ||
| 166 | + color:#FF5D7E; | ||
| 167 | + font-size: 24rpx; | ||
| 168 | +} | ||
| 169 | +.timelist{ | ||
| 170 | + display:flex; | ||
| 171 | + align-items: center; | ||
| 172 | + flex-wrap: wrap | ||
| 173 | +} | ||
| 174 | +.timeitem{ | ||
| 175 | + width:375rpx; | ||
| 176 | + display:flex; | ||
| 177 | + flex-direction: column; | ||
| 178 | + justify-content: center; | ||
| 179 | + padding: 18rpx 0; | ||
| 180 | + box-sizing: border-box; | ||
| 181 | + border-bottom:1rpx solid #f5f5f5; | ||
| 182 | +} | ||
| 183 | +.timeitem:nth-child(2n){ | ||
| 184 | + border-left:1rpx solid #f5f5f5; | ||
| 185 | + | ||
| 186 | +} | ||
| 187 | +.timetop{ | ||
| 188 | + color:#333333; | ||
| 189 | + font-size: 40rpx; | ||
| 190 | + text-align: center; | ||
| 191 | + height:56rpx; | ||
| 192 | + line-height: 56rpx; | ||
| 193 | +} | ||
| 194 | +.timebottom{ | ||
| 195 | + color:#666666; | ||
| 196 | + font-size: 22rpx; | ||
| 197 | + text-align: center; | ||
| 198 | + margin-top:13rpx; | ||
| 199 | + | ||
| 200 | + | ||
| 201 | +} | ||
| 202 | +.container{ | ||
| 203 | + width:750rpx; | ||
| 204 | + height:500rpx; | ||
| 205 | + margin-top:48rpx; | ||
| 206 | + | ||
| 207 | +} | ||
| 208 | +.containerzhu{ | ||
| 209 | + width:750rpx; | ||
| 210 | + height:1400rpx; | ||
| 211 | +} |
| 1 | +// pages/shebei/shebeilist/shebeilist.js | ||
| 2 | +Page({ | ||
| 3 | + | ||
| 4 | + /** | ||
| 5 | + * 页面的初始数据 | ||
| 6 | + */ | ||
| 7 | + data: { | ||
| 8 | + | ||
| 9 | + }, | ||
| 10 | + | ||
| 11 | + /** | ||
| 12 | + * 生命周期函数--监听页面加载 | ||
| 13 | + */ | ||
| 14 | + onLoad: function (options) { | ||
| 15 | + | ||
| 16 | + }, | ||
| 17 | + | ||
| 18 | + /** | ||
| 19 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 20 | + */ | ||
| 21 | + onReady: function () { | ||
| 22 | + | ||
| 23 | + }, | ||
| 24 | + | ||
| 25 | + /** | ||
| 26 | + * 生命周期函数--监听页面显示 | ||
| 27 | + */ | ||
| 28 | + onShow: function () { | ||
| 29 | + | ||
| 30 | + }, | ||
| 31 | + | ||
| 32 | + /** | ||
| 33 | + * 生命周期函数--监听页面隐藏 | ||
| 34 | + */ | ||
| 35 | + onHide: function () { | ||
| 36 | + | ||
| 37 | + }, | ||
| 38 | + | ||
| 39 | + /** | ||
| 40 | + * 生命周期函数--监听页面卸载 | ||
| 41 | + */ | ||
| 42 | + onUnload: function () { | ||
| 43 | + | ||
| 44 | + }, | ||
| 45 | + | ||
| 46 | + /** | ||
| 47 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 48 | + */ | ||
| 49 | + onPullDownRefresh: function () { | ||
| 50 | + | ||
| 51 | + }, | ||
| 52 | + | ||
| 53 | + /** | ||
| 54 | + * 页面上拉触底事件的处理函数 | ||
| 55 | + */ | ||
| 56 | + onReachBottom: function () { | ||
| 57 | + | ||
| 58 | + }, | ||
| 59 | + | ||
| 60 | + /** | ||
| 61 | + * 用户点击右上角分享 | ||
| 62 | + */ | ||
| 63 | + onShareAppMessage: function () { | ||
| 64 | + | ||
| 65 | + } | ||
| 66 | +}) |
| 1 | +<view class="shebeinum"> | ||
| 2 | + <text class="she">设备数量:</text> | ||
| 3 | + <text class="num"> 3</text> | ||
| 4 | +</view> | ||
| 5 | + | ||
| 6 | +<view class="shebelist"> | ||
| 7 | + | ||
| 8 | + <view class="shebielistitem"> | ||
| 9 | + <view class="car"> | ||
| 10 | + <view class="cartop">1车间：胶合机胶合机胶合机胶合机</view> | ||
| 11 | + <view class="carbottom">运行中</view> | ||
| 12 | + </view> | ||
| 13 | + <view class="day"> | ||
| 14 | + <view class="daytop">27.5</view> | ||
| 15 | + <view class="daybottom">昨日（小时）</view> | ||
| 16 | + </view> | ||
| 17 | + <view class="month"> | ||
| 18 | + <view class="monthtop">27.5</view> | ||
| 19 | + <view class="monthbottom">上月（小时）</view> | ||
| 20 | + </view> | ||
| 21 | + <view class="rowimg"> | ||
| 22 | + <image src="img/demo (24).png"></image> | ||
| 23 | + </view> | ||
| 24 | + | ||
| 25 | + </view> | ||
| 26 | + <view class="shebielistitem"> | ||
| 27 | + <view class="car"> | ||
| 28 | + <view class="cartop">1车间：胶合机胶合机胶合机胶合机</view> | ||
| 29 | + <view class="carbottom yun">运行中</view> | ||
| 30 | + </view> | ||
| 31 | + <view class="day"> | ||
| 32 | + <view class="daytop">27.5</view> | ||
| 33 | + <view class="daybottom">昨日（小时）</view> | ||
| 34 | + </view> | ||
| 35 | + <view class="month"> | ||
| 36 | + <view class="monthtop">27.5</view> | ||
| 37 | + <view class="monthbottom">上月（小时）</view> | ||
| 38 | + </view> | ||
| 39 | + <view class="rowimg"> | ||
| 40 | + <image src="img/demo (24).png"></image> | ||
| 41 | + </view> | ||
| 42 | + | ||
| 43 | + </view> | ||
| 44 | + <view class="shebielistitem"> | ||
| 45 | + <view class="car"> | ||
| 46 | + <view class="cartop">1车间：胶合机胶合机胶合机胶合机</view> | ||
| 47 | + <view class="carbottom yun">运行中</view> | ||
| 48 | + </view> | ||
| 49 | + <view class="day"> | ||
| 50 | + <view class="daytop">27.5</view> | ||
| 51 | + <view class="daybottom">昨日（小时）</view> | ||
| 52 | + </view> | ||
| 53 | + <view class="month"> | ||
| 54 | + <view class="monthtop">27.5</view> | ||
| 55 | + <view class="monthbottom">上月（小时）</view> | ||
| 56 | + </view> | ||
| 57 | + <view class="rowimg"> | ||
| 58 | + <image src="img/demo (24).png"></image> | ||
| 59 | + </view> | ||
| 60 | + | ||
| 61 | + </view> | ||
| 62 | + <view class="shebielistitem"> | ||
| 63 | + <view class="car"> | ||
| 64 | + <view class="cartop">1车间：胶合机胶合机胶合机胶合机</view> | ||
| 65 | + <view class="carbottom yun">运行中</view> | ||
| 66 | + </view> | ||
| 67 | + <view class="day"> | ||
| 68 | + <view class="daytop">27.5</view> | ||
| 69 | + <view class="daybottom">昨日（小时）</view> | ||
| 70 | + </view> | ||
| 71 | + <view class="month"> | ||
| 72 | + <view class="monthtop">27.5</view> | ||
| 73 | + <view class="monthbottom">上月（小时）</view> | ||
| 74 | + </view> | ||
| 75 | + <view class="rowimg"> | ||
| 76 | + <image src="img/demo (24).png"></image> | ||
| 77 | + </view> | ||
| 78 | + | ||
| 79 | + </view> | ||
| 80 | + <view class="shebielistitem"> | ||
| 81 | + <view class="car"> | ||
| 82 | + <view class="cartop">1车间：胶合机胶合机胶合机胶合机</view> | ||
| 83 | + <view class="carbottom noyun">未运行</view> | ||
| 84 | + </view> | ||
| 85 | + <view class="day"> | ||
| 86 | + <view class="daytop">27.5</view> | ||
| 87 | + <view class="daybottom">昨日（小时）</view> | ||
| 88 | + </view> | ||
| 89 | + <view class="month"> | ||
| 90 | + <view class="monthtop">27.5</view> | ||
| 91 | + <view class="monthbottom">上月（小时）</view> | ||
| 92 | + </view> | ||
| 93 | + <view class="rowimg"> | ||
| 94 | + <image src="img/demo (24).png"></image> | ||
| 95 | + </view> | ||
| 96 | + | ||
| 97 | + </view> | ||
| 98 | +</view> |
| 1 | +page { | ||
| 2 | + background: #fff; | ||
| 3 | +} | ||
| 4 | + | ||
| 5 | +.shebeinum { | ||
| 6 | + color: #333; | ||
| 7 | + font-size: 32rpx; | ||
| 8 | + font-weight: bold; | ||
| 9 | + padding: 30rpx; | ||
| 10 | + box-sizing: border-box; | ||
| 11 | + border-bottom: 1rpx solid #f5f5f5; | ||
| 12 | + border-top: 1rpx solid #f5f5f5; | ||
| 13 | + position: relative; | ||
| 14 | +} | ||
| 15 | +.she{ | ||
| 16 | + margin-left:18rpx; | ||
| 17 | +} | ||
| 18 | +.shebeinum::before{ | ||
| 19 | + content:''; | ||
| 20 | + display:block; | ||
| 21 | + width:8rpx; | ||
| 22 | + height:33rpx; | ||
| 23 | + background: #FF9400FF; | ||
| 24 | + position: absolute; | ||
| 25 | + top:33rpx; | ||
| 26 | + left:30rpx; | ||
| 27 | + | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +.num { | ||
| 31 | + margin-left: 10rpx; | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +.shebelist { | ||
| 35 | + padding: 30rpx; | ||
| 36 | + box-sizing: border-box; | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +.shebielistitem { | ||
| 40 | + width: 690rpx; | ||
| 41 | + height: 138rpx; | ||
| 42 | + border: 1rpx solid #f5f5f5; | ||
| 43 | + border-radius: 10rpx; | ||
| 44 | + display: flex; | ||
| 45 | + align-items: center; | ||
| 46 | + justify-content: space-around; | ||
| 47 | +} | ||
| 48 | + | ||
| 49 | +.cartop { | ||
| 50 | + width: 236rpx; | ||
| 51 | + font-size: 28rpx; | ||
| 52 | + color: #333; | ||
| 53 | + font-weight: bold; | ||
| 54 | + overflow: hidden; | ||
| 55 | + text-overflow: ellipsis; | ||
| 56 | + white-space: nowrap; | ||
| 57 | +} | ||
| 58 | + | ||
| 59 | +.carbottom { | ||
| 60 | + font-size: 20rpx; | ||
| 61 | + margin-top: 10rpx; | ||
| 62 | +} | ||
| 63 | + | ||
| 64 | +.yun { | ||
| 65 | + color: #eb483aff; | ||
| 66 | +} | ||
| 67 | + | ||
| 68 | +.noyun { | ||
| 69 | + color: #538aeeff; | ||
| 70 | +} | ||
| 71 | + | ||
| 72 | +.daytop { | ||
| 73 | + color: #333333ff; | ||
| 74 | + font-size: 28rpx; | ||
| 75 | +} | ||
| 76 | + | ||
| 77 | +.daybottom { | ||
| 78 | + color: #666666ff; | ||
| 79 | + font-size: 20rpx; | ||
| 80 | + margin-top: 10rpx; | ||
| 81 | +} | ||
| 82 | + | ||
| 83 | +.monthtop { | ||
| 84 | + color: #333333ff; | ||
| 85 | + font-size: 28rpx; | ||
| 86 | +} | ||
| 87 | + | ||
| 88 | +.monthbottom { | ||
| 89 | + color: #666666ff; | ||
| 90 | + font-size: 20rpx; | ||
| 91 | + margin-top: 10rpx; | ||
| 92 | +} |
| 1 | +// pages/qiyeyongdian/detail/detail.js | ||
| 2 | + | ||
| 3 | +import * as echarts from '../../../ec-canvas/echarts'; | ||
| 4 | + | ||
| 5 | +const app = getApp(); | ||
| 6 | +var Chart = null; | ||
| 7 | +Page({ | ||
| 8 | + | ||
| 9 | + /** | ||
| 10 | + * 页面的初始数据 | ||
| 11 | + */ | ||
| 12 | + data: { | ||
| 13 | + showModal: false, | ||
| 14 | + modalTitle: ["选择时间", "选择地磅", "选择货物"], | ||
| 15 | + modalNum: 2, | ||
| 16 | + monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘",], | ||
| 17 | + time: '2019.01.01-2019.01.31', | ||
| 18 | + changeColor: 0, | ||
| 19 | + tabList: ["入库", "流水"], | ||
| 20 | + tabNum: 0, | ||
| 21 | + tableTitle: ["时间", "地磅", "货物名称", "重量（T）"], | ||
| 22 | + trList: [{ | ||
| 23 | + date: "09.12", | ||
| 24 | + position: "大厅左上角", | ||
| 25 | + name: "名字妙哉妙", | ||
| 26 | + num: "18", | ||
| 27 | + btn: "详情" | ||
| 28 | + }, | ||
| 29 | + { | ||
| 30 | + date: "09.12", | ||
| 31 | + position: "大厅左上角", | ||
| 32 | + name: "啦啦啦啦啦啦啦啦啦啦", | ||
| 33 | + num: "18", | ||
| 34 | + btn: "详情" | ||
| 35 | + }, | ||
| 36 | + { | ||
| 37 | + date: "09.12", | ||
| 38 | + position: "车间后方大转盘", | ||
| 39 | + name: "啦啦啦啦啦啦啦啦啦啦", | ||
| 40 | + num: "18", | ||
| 41 | + btn: "详情" | ||
| 42 | + }, | ||
| 43 | + ], | ||
| 44 | + ec: { | ||
| 45 | + | ||
| 46 | + onInit: function (canvas, width, height) { | ||
| 47 | + | ||
| 48 | + chart = echarts.init(canvas, null, { | ||
| 49 | + | ||
| 50 | + width: width, | ||
| 51 | + | ||
| 52 | + height: height | ||
| 53 | + | ||
| 54 | + }); | ||
| 55 | + | ||
| 56 | + canvas.setChart(chart); | ||
| 57 | + | ||
| 58 | + return chart; | ||
| 59 | + | ||
| 60 | + }, | ||
| 61 | + | ||
| 62 | + lazyLoad: true, // 延迟加载 | ||
| 63 | + showt: false | ||
| 64 | + }, | ||
| 65 | + | ||
| 66 | + }, | ||
| 67 | + // 流水详情页 | ||
| 68 | + toDetail(){ | ||
| 69 | + wx.navigateTo({ | ||
| 70 | + url: '/pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail' | ||
| 71 | + }) | ||
| 72 | + }, | ||
| 73 | + changeTab(e) { | ||
| 74 | + this.setData({ | ||
| 75 | + tabNum: e.currentTarget.dataset.id | ||
| 76 | + }) | ||
| 77 | + | ||
| 78 | + }, | ||
| 79 | + toShowModal(e) { | ||
| 80 | + this.setData({ | ||
| 81 | + showModal: true | ||
| 82 | + }) | ||
| 83 | + }, | ||
| 84 | + | ||
| 85 | + hideModal() { | ||
| 86 | + this.setData({ | ||
| 87 | + showModal: false | ||
| 88 | + }); | ||
| 89 | + }, | ||
| 90 | + choice(e) { | ||
| 91 | + | ||
| 92 | + this.setData({ | ||
| 93 | + changeColor: e.currentTarget.dataset.id | ||
| 94 | + }) | ||
| 95 | + }, | ||
| 96 | + /** | ||
| 97 | + * 生命周期函数--监听页面加载 | ||
| 98 | + */ | ||
| 99 | + onLoad: function (options) { | ||
| 100 | + | ||
| 101 | + this.echartsComponnet = this.selectComponent('#mychart'); | ||
| 102 | + | ||
| 103 | + | ||
| 104 | + //如果是第一次绘制 | ||
| 105 | + | ||
| 106 | + if (!Chart) { | ||
| 107 | + this.init_echarts(); //初始化图表 | ||
| 108 | + | ||
| 109 | + | ||
| 110 | + } else { | ||
| 111 | + | ||
| 112 | + this.setOption(Chart); //更新数据 | ||
| 113 | + | ||
| 114 | + } | ||
| 115 | + | ||
| 116 | + }, | ||
| 117 | + //初始化图表 | ||
| 118 | + | ||
| 119 | + init_echarts: function () { | ||
| 120 | + | ||
| 121 | + this.echartsComponnet.init((canvas, width, height) => { | ||
| 122 | + | ||
| 123 | + // 初始化图表 | ||
| 124 | + | ||
| 125 | + const Chart = echarts.init(canvas, null, { | ||
| 126 | + | ||
| 127 | + width: width, | ||
| 128 | + | ||
| 129 | + height: height | ||
| 130 | + | ||
| 131 | + }); | ||
| 132 | + | ||
| 133 | + this.setOption(Chart) | ||
| 134 | + | ||
| 135 | + // 注意这里一定要返回 chart 实例，否则会影响事件处理等 | ||
| 136 | + | ||
| 137 | + return Chart; | ||
| 138 | + | ||
| 139 | + }); | ||
| 140 | + | ||
| 141 | + }, | ||
| 142 | + | ||
| 143 | + setOption: function (Chart) { | ||
| 144 | + | ||
| 145 | + Chart.clear(); // 清除 | ||
| 146 | + | ||
| 147 | + Chart.setOption(this.getOption()); //获取新数据 | ||
| 148 | + | ||
| 149 | + }, | ||
| 150 | + | ||
| 151 | + // 图表配置项 | ||
| 152 | + | ||
| 153 | + getOption() { | ||
| 154 | + | ||
| 155 | + var self = this; | ||
| 156 | + | ||
| 157 | + var option = { | ||
| 158 | + | ||
| 159 | + color: ["#FFF"], //图例图标颜色 | ||
| 160 | + // lineStyle:{//阴影 | ||
| 161 | + // shadowColor: '#6495F8', | ||
| 162 | + // shadowBlur: 10 | ||
| 163 | + // }, | ||
| 164 | + xAxis: { //横坐标 | ||
| 165 | + | ||
| 166 | + type: 'category', | ||
| 167 | + | ||
| 168 | + name: '日期', //横坐标名称 | ||
| 169 | + | ||
| 170 | + nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 171 | + | ||
| 172 | + color: '#333', | ||
| 173 | + | ||
| 174 | + fontStyle: 'normal' | ||
| 175 | + | ||
| 176 | + }, | ||
| 177 | + axisLabel: { | ||
| 178 | + interval: 0, | ||
| 179 | + }, | ||
| 180 | + boundaryGap: false, //1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上 | ||
| 181 | + | ||
| 182 | + 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'], | ||
| 183 | + | ||
| 184 | + axisLabel: { | ||
| 185 | + | ||
| 186 | + textStyle: { | ||
| 187 | + | ||
| 188 | + fontSize: 13, | ||
| 189 | + | ||
| 190 | + color: '#5D5D5D' | ||
| 191 | + | ||
| 192 | + } | ||
| 193 | + | ||
| 194 | + } | ||
| 195 | + | ||
| 196 | + }, | ||
| 197 | + | ||
| 198 | + yAxis: { //纵坐标 | ||
| 199 | + | ||
| 200 | + type: 'value', | ||
| 201 | + | ||
| 202 | + position: 'left', | ||
| 203 | + | ||
| 204 | + name: '重量', //纵坐标名称 | ||
| 205 | + | ||
| 206 | + nameTextStyle: { //在name值存在下，设置name的样式 | ||
| 207 | + | ||
| 208 | + color: '#333333', | ||
| 209 | + | ||
| 210 | + fontStyle: 'normal' | ||
| 211 | + | ||
| 212 | + }, | ||
| 213 | + | ||
| 214 | + splitNumber: 10, //坐标轴的分割段数 | ||
| 215 | + | ||
| 216 | + | ||
| 217 | + min: 0, | ||
| 218 | + | ||
| 219 | + max: 100, | ||
| 220 | + | ||
| 221 | + }, | ||
| 222 | + | ||
| 223 | + series: [{ | ||
| 224 | + | ||
| 225 | + type: 'line', | ||
| 226 | + | ||
| 227 | + 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], | ||
| 228 | + | ||
| 229 | + symbol: 'true', | ||
| 230 | + | ||
| 231 | + itemStyle: { | ||
| 232 | + | ||
| 233 | + normal: { | ||
| 234 | + | ||
| 235 | + lineStyle: { | ||
| 236 | + | ||
| 237 | + color: '#ED3676' | ||
| 238 | + | ||
| 239 | + } | ||
| 240 | + | ||
| 241 | + } | ||
| 242 | + | ||
| 243 | + }, | ||
| 244 | + // areaStyle: { | ||
| 245 | + // normal: { | ||
| 246 | + // color: '#6495F8' //改变区域颜色 | ||
| 247 | + // } | ||
| 248 | + // }, | ||
| 249 | + | ||
| 250 | + }], | ||
| 251 | + | ||
| 252 | + } | ||
| 253 | + | ||
| 254 | + return option; | ||
| 255 | + | ||
| 256 | + }, | ||
| 257 | + /** | ||
| 258 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 259 | + */ | ||
| 260 | + onReady: function () { | ||
| 261 | + | ||
| 262 | + }, | ||
| 263 | + | ||
| 264 | + /** | ||
| 265 | + * 生命周期函数--监听页面显示 | ||
| 266 | + */ | ||
| 267 | + onShow: function () { | ||
| 268 | + this.echartsComponnet = this.selectComponent('#mychart'); | ||
| 269 | + | ||
| 270 | + | ||
| 271 | + //如果是第一次绘制 | ||
| 272 | + | ||
| 273 | + if (!Chart) { | ||
| 274 | + this.init_echarts(); //初始化图表 | ||
| 275 | + | ||
| 276 | + | ||
| 277 | + } else { | ||
| 278 | + | ||
| 279 | + this.setOption(Chart); //更新数据 | ||
| 280 | + | ||
| 281 | + } | ||
| 282 | + }, | ||
| 283 | + | ||
| 284 | + /** | ||
| 285 | + * 生命周期函数--监听页面隐藏 | ||
| 286 | + */ | ||
| 287 | + onHide: function () { | ||
| 288 | + | ||
| 289 | + }, | ||
| 290 | + | ||
| 291 | + /** | ||
| 292 | + * 生命周期函数--监听页面卸载 | ||
| 293 | + */ | ||
| 294 | + onUnload: function () { | ||
| 295 | + | ||
| 296 | + }, | ||
| 297 | + | ||
| 298 | + /** | ||
| 299 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 300 | + */ | ||
| 301 | + onPullDownRefresh: function () { | ||
| 302 | + | ||
| 303 | + }, | ||
| 304 | + | ||
| 305 | + /** | ||
| 306 | + * 页面上拉触底事件的处理函数 | ||
| 307 | + */ | ||
| 308 | + onReachBottom: function () { | ||
| 309 | + | ||
| 310 | + }, | ||
| 311 | + | ||
| 312 | + /** | ||
| 313 | + * 用户点击右上角分享 | ||
| 314 | + */ | ||
| 315 | + onShareAppMessage: function () { | ||
| 316 | + | ||
| 317 | + } | ||
| 318 | +}) |
| 1 | +<!--pages/qiyeyongdian/detail/detail.wxml--> | ||
| 2 | +<!-- 货物信息 --> | ||
| 3 | +<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view> | ||
| 4 | +<view wx:if="{{showModal}}"> | ||
| 5 | + <view class="modal-content"> | ||
| 6 | + <!-- 选项卡 --> | ||
| 7 | + <view class="modal_year"> | ||
| 8 | + <view class="modal_single {{modalNum == index ?'modal_choice':''}}" wx:for="{{modalTitle}}" wx:key="">{{item}}</view> | ||
| 9 | + </view> | ||
| 10 | + <!-- 月份 --> | ||
| 11 | + <scroll-view scroll-y style="height: 400px;"> | ||
| 12 | + <view class="modal_month"> | ||
| 13 | + <view class="month_single {{changeColor == index?'change':''}}" wx:for="{{monthList}}" wx:key="" data-id="{{index}}" catchtap="choice">{{item}}</view> | ||
| 14 | + </view> | ||
| 15 | + </scroll-view> | ||
| 16 | + <view class='btns'> | ||
| 17 | + <view class="cacle" bindtap="hideModal">取消</view> | ||
| 18 | + <view class="cacle sure" bindtap="hideModal">确定</view> | ||
| 19 | + </view> | ||
| 20 | + </view> | ||
| 21 | +</view> | ||
| 22 | +<!-- 选项卡 --> | ||
| 23 | +<view class="tab"> | ||
| 24 | + <view wx:for="{{tabList}}" wx:key="" class="tab_single {{tabNum == index?'tab_border':''}}" bindtap='changeTab' data-id="{{index}}">{{item}}</view> | ||
| 25 | +</view> | ||
| 26 | +<!-- 月份 --> | ||
| 27 | +<view class="search_month"> | ||
| 28 | + <view class="rowimg"> | ||
| 29 | + <image src='/img/row.png' class="left"></image> | ||
| 30 | + </view> | ||
| 31 | + <view class="date_time"> | ||
| 32 | + <!-- 出库 --> | ||
| 33 | + <view wx:if="{{tabNum == 0}}">2019.06</view> | ||
| 34 | + <!-- 流水 --> | ||
| 35 | + <view wx:if="{{tabNum == 1}}" bindtap='toShowModal'>{{time}}</view> | ||
| 36 | + <view class="rowimg"> | ||
| 37 | + <image src='/img/row.png' class="down"></image> | ||
| 38 | + </view> | ||
| 39 | + </view> | ||
| 40 | + <view class="rowimg"> | ||
| 41 | + <image src='/img/row.png'></image> | ||
| 42 | + </view> | ||
| 43 | +</view> | ||
| 44 | +<!-- 出库 --> | ||
| 45 | +<view wx:if="{{tabNum == 0}}"> | ||
| 46 | + <view class="cp_title"> | ||
| 47 | + 成品入库信息 | ||
| 48 | + </view> | ||
| 49 | + <view class="total"> | ||
| 50 | + 重量总计（吨） | ||
| 51 | + <text>1000</text> | ||
| 52 | + </view> | ||
| 53 | + <!-- 折线图 --> | ||
| 54 | + <view class="charts_line"> | ||
| 55 | + <view class="chart"> | ||
| 56 | + <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas> | ||
| 57 | + </view> | ||
| 58 | + <view class="total_power"> | ||
| 59 | + <view>2019年6月</view> | ||
| 60 | + </view> | ||
| 61 | + </view> | ||
| 62 | +</view> | ||
| 63 | +<!-- 流水 --> | ||
| 64 | +<view wx:if="{{tabNum == 1}}"> | ||
| 65 | + <view class="second_total">重量总计（吨）：1000</view> | ||
| 66 | + <!-- 数据 --> | ||
| 67 | + <view class="table"> | ||
| 68 | + <view class="table_title"> | ||
| 69 | + <view wx:for="{{tableTitle}}" wx:key="">{{item}}</view> | ||
| 70 | + </view> | ||
| 71 | + <view class="table_tr" wx:for="{{trList}}" wx:key=""> | ||
| 72 | + <view class="tr_time">{{item.date}}</view> | ||
| 73 | + <view class="tr_pos">{{item.position}}</view> | ||
| 74 | + <view class="tr_name">{{item.name}}</view> | ||
| 75 | + <view class="tr_time">{{item.num}}</view> | ||
| 76 | + <view class="tr_btn" bindtap='toDetail'>{{item.btn}}</view> | ||
| 77 | + </view> | ||
| 78 | + </view> | ||
| 79 | +</view> |
| 1 | +/* pages/qiyeyongdian/detail/detail.wxss */ | ||
| 2 | + | ||
| 3 | +.search_month { | ||
| 4 | + width: 686rpx; | ||
| 5 | + padding: 0 30rpx; | ||
| 6 | + height: 70rpx; | ||
| 7 | + background-color: #f3f5f8; | ||
| 8 | + display: flex; | ||
| 9 | + flex-direction: row; | ||
| 10 | + justify-content: space-between; | ||
| 11 | + align-items: center; | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +/* 左箭头 */ | ||
| 15 | + | ||
| 16 | +.left { | ||
| 17 | + transform: rotate(180deg); | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +/* 日期 */ | ||
| 21 | + | ||
| 22 | +.date_time { | ||
| 23 | + color: #666; | ||
| 24 | + font-size: 28rpx; | ||
| 25 | + display: flex; | ||
| 26 | + flex-direction: row; | ||
| 27 | + align-items: center; | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +.down { | ||
| 31 | + transform: rotate(90deg); | ||
| 32 | + margin-left: 10rpx; | ||
| 33 | +} | ||
| 34 | + | ||
| 35 | +/* 折线图 */ | ||
| 36 | + | ||
| 37 | +.chart { | ||
| 38 | + width: 750rpx; | ||
| 39 | + height: 494rpx; | ||
| 40 | + margin: 0 auto; | ||
| 41 | + display: flex; | ||
| 42 | + justify-content: center; | ||
| 43 | + align-items: center; | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +ec-canvas { | ||
| 47 | + width: 100%; | ||
| 48 | + height: 100%; | ||
| 49 | +} | ||
| 50 | + | ||
| 51 | +.total_power { | ||
| 52 | + display: flex; | ||
| 53 | + flex-direction: row; | ||
| 54 | + justify-content: space-around; | ||
| 55 | +} | ||
| 56 | + | ||
| 57 | +/* 弹出框 */ | ||
| 58 | + | ||
| 59 | +.modal-mask { | ||
| 60 | + width: 100%; | ||
| 61 | + height: 100%; | ||
| 62 | + position: fixed; | ||
| 63 | + top: 0; | ||
| 64 | + left: 0; | ||
| 65 | + background: #000; | ||
| 66 | + opacity: 0.5; | ||
| 67 | + overflow: hidden; | ||
| 68 | + z-index: 9000; | ||
| 69 | + color: #fff; | ||
| 70 | +} | ||
| 71 | + | ||
| 72 | +.modal-dialog { | ||
| 73 | + width: 100%; | ||
| 74 | + overflow: hidden; | ||
| 75 | + position: fixed; | ||
| 76 | + top: 45%; | ||
| 77 | + left: 0; | ||
| 78 | + z-index: 9500; | ||
| 79 | + margin: -180rpx 70rpx; | ||
| 80 | +} | ||
| 81 | + | ||
| 82 | +.modal-content { | ||
| 83 | + position: fixed; | ||
| 84 | + top: 0; | ||
| 85 | + left: 0; | ||
| 86 | + z-index: 9500; | ||
| 87 | + width: 100%; | ||
| 88 | + /* height: 55%; */ | ||
| 89 | + overflow: hidden; | ||
| 90 | + /* padding: 120rpx 50rpx 50rpx; */ | ||
| 91 | + background: #fff; | ||
| 92 | + border-radius: 2rpx; | ||
| 93 | +} | ||
| 94 | + | ||
| 95 | +/* 弹出框选项卡 */ | ||
| 96 | + | ||
| 97 | +.modal_year { | ||
| 98 | + display: flex; | ||
| 99 | + flex-direction: row; | ||
| 100 | + justify-content: space-around; | ||
| 101 | + align-items: center; | ||
| 102 | + font-size: 28rpx; | ||
| 103 | + color: #666; | ||
| 104 | + padding-top: 20rpx; | ||
| 105 | + border:1rpx solid #f5f5f5; | ||
| 106 | + border-left:none; | ||
| 107 | + border-right: none; | ||
| 108 | +} | ||
| 109 | +.modal_single{ | ||
| 110 | + border-bottom:4rpx solid #fff; | ||
| 111 | +} | ||
| 112 | +.modal_choice{ | ||
| 113 | + border-bottom-color: #FF9400; | ||
| 114 | + color: #FF9400; | ||
| 115 | + font-weight: 600; | ||
| 116 | + padding-bottom:20rpx; | ||
| 117 | +} | ||
| 118 | +/* 选项卡 */ | ||
| 119 | + | ||
| 120 | +.tab { | ||
| 121 | + display: flex; | ||
| 122 | + flex-direction: row; | ||
| 123 | + justify-content: space-around; | ||
| 124 | + align-items: center; | ||
| 125 | + padding-top: 20rpx; | ||
| 126 | + color: #ff9400; | ||
| 127 | + border-top: 1rpx solid #f5f5f5; | ||
| 128 | +} | ||
| 129 | + | ||
| 130 | +.tab_single { | ||
| 131 | + padding-bottom: 20rpx; | ||
| 132 | + border-bottom: 4rpx solid #fff; | ||
| 133 | +} | ||
| 134 | + | ||
| 135 | +.tab_border { | ||
| 136 | + border-bottom: 4rpx solid #ff9400; | ||
| 137 | +} | ||
| 138 | + | ||
| 139 | +/* 月份 */ | ||
| 140 | + | ||
| 141 | +.modal_month { | ||
| 142 | + display: flex; | ||
| 143 | + flex-wrap: wrap; | ||
| 144 | + flex-direction: row; | ||
| 145 | + margin: 50rpx 30rpx; | ||
| 146 | + justify-content: space-between; | ||
| 147 | +} | ||
| 148 | + | ||
| 149 | +.month_single { | ||
| 150 | + background-color: #F9F8FE; | ||
| 151 | + padding: 20rpx 56rpx 15rpx; | ||
| 152 | + border-radius: 6rpx; | ||
| 153 | + font-size: 32rpx; | ||
| 154 | + color: #333; | ||
| 155 | + margin-bottom: 30rpx; | ||
| 156 | +} | ||
| 157 | + | ||
| 158 | +.change { | ||
| 159 | + background-color: #ff9400; | ||
| 160 | + color: #fff; | ||
| 161 | +} | ||
| 162 | + | ||
| 163 | +.date_descript { | ||
| 164 | + width: 296rpx; | ||
| 165 | + height: 70rpx; | ||
| 166 | + line-height: 70rpx; | ||
| 167 | + text-align: center; | ||
| 168 | + color: #ff9400; | ||
| 169 | + font-size: 28rpx; | ||
| 170 | + margin: 0 auto; | ||
| 171 | + background: rgba(244, 244, 244, 1); | ||
| 172 | + border-radius: 6rpx; | ||
| 173 | +} | ||
| 174 | + | ||
| 175 | +.tactive { | ||
| 176 | + background: #ff9400; | ||
| 177 | + color: #fff; | ||
| 178 | +} | ||
| 179 | + | ||
| 180 | +/* 标题 */ | ||
| 181 | + | ||
| 182 | +.cp_title { | ||
| 183 | + color: #333; | ||
| 184 | + font-size: 32rpx; | ||
| 185 | + font-weight: bold; | ||
| 186 | + padding: 30rpx 54rpx 41rpx; | ||
| 187 | + position: relative; | ||
| 188 | +} | ||
| 189 | + | ||
| 190 | +.cp_title::after { | ||
| 191 | + position: absolute; | ||
| 192 | + content: ""; | ||
| 193 | + display: block; | ||
| 194 | + left: 30rpx; | ||
| 195 | + top: 35rpx; | ||
| 196 | + width: 8rpx; | ||
| 197 | + height: 35rpx; | ||
| 198 | + background-color: #ff9400; | ||
| 199 | + border-radius: 4rpx; | ||
| 200 | +} | ||
| 201 | + | ||
| 202 | +/* 重量总计 */ | ||
| 203 | + | ||
| 204 | +.total { | ||
| 205 | + padding-left: 30rpx; | ||
| 206 | + color: #666; | ||
| 207 | + font-size: 20rpx; | ||
| 208 | + display: flex; | ||
| 209 | + flex-direction: row; | ||
| 210 | + align-items: center; | ||
| 211 | +} | ||
| 212 | + | ||
| 213 | +.total text { | ||
| 214 | + font-size: 32rpx; | ||
| 215 | + color: #333; | ||
| 216 | +} | ||
| 217 | + | ||
| 218 | +.btns { | ||
| 219 | + margin-top: 50rpx; | ||
| 220 | + display: flex; | ||
| 221 | + flex-direction: row; | ||
| 222 | + align-items: center; | ||
| 223 | + border-top: 1rpx solid #f5f5f5; | ||
| 224 | +} | ||
| 225 | + | ||
| 226 | +.cacle { | ||
| 227 | + width: 50%; | ||
| 228 | + color: #afafaf; | ||
| 229 | + height: 87rpx; | ||
| 230 | + line-height: 87rpx; | ||
| 231 | + text-align: center; | ||
| 232 | + font-size: 34rpx; | ||
| 233 | +} | ||
| 234 | + | ||
| 235 | +.sure { | ||
| 236 | + color: #ff9400; | ||
| 237 | + border-left: 1rpx solid #f5f5f5; | ||
| 238 | +} | ||
| 239 | + | ||
| 240 | +/* 流水 */ | ||
| 241 | + | ||
| 242 | +.second_total { | ||
| 243 | + padding: 40rpx 30rpx 20rpx; | ||
| 244 | + display: flex; | ||
| 245 | + justify-content: flex-end; | ||
| 246 | + flex-direction: row; | ||
| 247 | + font-size: 28rpx; | ||
| 248 | +} | ||
| 249 | + | ||
| 250 | +.table_title { | ||
| 251 | + display: flex; | ||
| 252 | + flex-direction: row; | ||
| 253 | + justify-content: space-around; | ||
| 254 | + align-items: center; | ||
| 255 | + padding: 30rpx 0 20rpx; | ||
| 256 | + font-size: 28rpx; | ||
| 257 | + color: #666; | ||
| 258 | + border: 1rpx solid #f5f5f5; | ||
| 259 | +} | ||
| 260 | + | ||
| 261 | +.table_tr { | ||
| 262 | + display: flex; | ||
| 263 | + flex-direction: row; | ||
| 264 | + justify-content: space-around; | ||
| 265 | + align-items: center; | ||
| 266 | + padding: 30rpx 0 20rpx; | ||
| 267 | + font-size: 24rpx; | ||
| 268 | + color: #666; | ||
| 269 | + border-bottom: 1rpx solid #f5f5f5; | ||
| 270 | +} | ||
| 271 | + | ||
| 272 | +.tr_time { | ||
| 273 | + font-size: 28rpx; | ||
| 274 | + color: #333; | ||
| 275 | +} | ||
| 276 | + | ||
| 277 | +.tr_btn { | ||
| 278 | + color: #ffb77e; | ||
| 279 | +} | ||
| 280 | + | ||
| 281 | +.tr_name { | ||
| 282 | + width: 120rpx; | ||
| 283 | + white-space: nowrap; | ||
| 284 | + overflow: hidden; | ||
| 285 | + text-overflow: ellipsis; | ||
| 286 | +} | ||
| 287 | + | ||
| 288 | +.tr_pos { | ||
| 289 | + width: 120rpx; | ||
| 290 | + white-space: nowrap; | ||
| 291 | + overflow: hidden; | ||
| 292 | + text-overflow: ellipsis; | ||
| 293 | +} |
| 1 | +// pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail.js | ||
| 2 | +Page({ | ||
| 3 | + | ||
| 4 | + /** | ||
| 5 | + * 页面的初始数据 | ||
| 6 | + */ | ||
| 7 | + data: { | ||
| 8 | + | ||
| 9 | + }, | ||
| 10 | + | ||
| 11 | + /** | ||
| 12 | + * 生命周期函数--监听页面加载 | ||
| 13 | + */ | ||
| 14 | + onLoad: function (options) { | ||
| 15 | + | ||
| 16 | + }, | ||
| 17 | + | ||
| 18 | + /** | ||
| 19 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 20 | + */ | ||
| 21 | + onReady: function () { | ||
| 22 | + | ||
| 23 | + }, | ||
| 24 | + | ||
| 25 | + /** | ||
| 26 | + * 生命周期函数--监听页面显示 | ||
| 27 | + */ | ||
| 28 | + onShow: function () { | ||
| 29 | + | ||
| 30 | + }, | ||
| 31 | + | ||
| 32 | + /** | ||
| 33 | + * 生命周期函数--监听页面隐藏 | ||
| 34 | + */ | ||
| 35 | + onHide: function () { | ||
| 36 | + | ||
| 37 | + }, | ||
| 38 | + | ||
| 39 | + /** | ||
| 40 | + * 生命周期函数--监听页面卸载 | ||
| 41 | + */ | ||
| 42 | + onUnload: function () { | ||
| 43 | + | ||
| 44 | + }, | ||
| 45 | + | ||
| 46 | + /** | ||
| 47 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 48 | + */ | ||
| 49 | + onPullDownRefresh: function () { | ||
| 50 | + | ||
| 51 | + }, | ||
| 52 | + | ||
| 53 | + /** | ||
| 54 | + * 页面上拉触底事件的处理函数 | ||
| 55 | + */ | ||
| 56 | + onReachBottom: function () { | ||
| 57 | + | ||
| 58 | + }, | ||
| 59 | + | ||
| 60 | + /** | ||
| 61 | + * 用户点击右上角分享 | ||
| 62 | + */ | ||
| 63 | + onShareAppMessage: function () { | ||
| 64 | + | ||
| 65 | + } | ||
| 66 | +}) |
| 1 | +<!--pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail.wxml--> | ||
| 2 | +<view class="detail_single first_single"> | ||
| 3 | + <view>时间</view> | ||
| 4 | + <view>2019-07-03 19:00:00</view> | ||
| 5 | +</view> | ||
| 6 | +<view class="detail_single"> | ||
| 7 | + <view>地磅</view> | ||
| 8 | + <view>安装位置/地磅名称</view> | ||
| 9 | +</view> | ||
| 10 | +<view class="detail_single"> | ||
| 11 | + <view>货物名称</view> | ||
| 12 | + <view>安装位置/地磅名称</view> | ||
| 13 | +</view> | ||
| 14 | +<view class="detail_single"> | ||
| 15 | + <view>车牌号</view> | ||
| 16 | + <view>784646</view> | ||
| 17 | +</view> | ||
| 18 | +<view class="detail_single"> | ||
| 19 | + <view>毛重（吨）</view> | ||
| 20 | + <view>4154</view> | ||
| 21 | +</view> | ||
| 22 | +<view class="detail_single"> | ||
| 23 | + <view>皮重（吨）</view> | ||
| 24 | + <view>4154</view> | ||
| 25 | +</view> | ||
| 26 | +<view class="detail_single"> | ||
| 27 | + <view>净重（吨）</view> | ||
| 28 | + <view>4154</view> | ||
| 29 | +</view> | ||
| 30 | +<view class="equipment_pic"> | ||
| 31 | + <view>设备照片</view> | ||
| 32 | + <view class="pic_group"> | ||
| 33 | + <view class="equipment_img"> | ||
| 34 | + <image src="/img/logo3.png"></image> | ||
| 35 | + </view> | ||
| 36 | + <view class="equipment_img"> | ||
| 37 | + <image src="/img/logo3.png"></image> | ||
| 38 | + </view> | ||
| 39 | + <view class="equipment_img"> | ||
| 40 | + <image src="/img/logo3.png"></image> | ||
| 41 | + </view> | ||
| 42 | + </view> | ||
| 43 | +</view> |
| 1 | +/* pages/yuanliaomsg/yuanliaoDetail/yuanliaoDetail.wxss */ | ||
| 2 | + | ||
| 3 | + | ||
| 4 | +.detail_single{ | ||
| 5 | + display: flex; | ||
| 6 | + flex: row; | ||
| 7 | + align-items: center; | ||
| 8 | + justify-content: space-between; | ||
| 9 | + padding: 30rpx; | ||
| 10 | + border-bottom: 1rpx solid #f5f5f5; | ||
| 11 | + color: #333; | ||
| 12 | + font-size: 28rpx; | ||
| 13 | +} | ||
| 14 | +.first_single{ | ||
| 15 | + border-top: 1rpx solid #f5f5f5; | ||
| 16 | +} | ||
| 17 | +.equipment_pic{ | ||
| 18 | + padding:40rpx; | ||
| 19 | + color: #333; | ||
| 20 | + font-size: 32rpx; | ||
| 21 | + font-weight: 600; | ||
| 22 | +} | ||
| 23 | +.pic_group{ | ||
| 24 | + display: flex; | ||
| 25 | + flex-direction: row; | ||
| 26 | + justify-content: space-between; | ||
| 27 | + align-items: center; | ||
| 28 | + margin-top: 30rpx; | ||
| 29 | +} | ||
| 30 | +.equipment_img{ | ||
| 31 | + width: 210rpx; | ||
| 32 | + height: 210rpx; | ||
| 33 | + border-radius: 10rpx; | ||
| 34 | +} |
| 1 | // pages/member/member.js | 1 | // pages/member/member.js |
| 2 | -import * as echarts from '../../ec-canvas/echarts'; | ||
| 3 | -const app = getApp() | ||
| 4 | - | ||
| 5 | - | ||
| 6 | -function initChart1(canvas, width, height) { | ||
| 7 | - const chart = echarts.init(canvas, null, { | ||
| 8 | - width: width, | ||
| 9 | - height: height | ||
| 10 | - }); | ||
| 11 | - canvas.setChart(chart); | ||
| 12 | - | ||
| 13 | - var option = { | ||
| 14 | - title: { | ||
| 15 | - text: '', | ||
| 16 | - left: 'center' | ||
| 17 | - }, | ||
| 18 | - | ||
| 19 | - | ||
| 20 | - toolbox: { | ||
| 21 | - | ||
| 22 | - }, | ||
| 23 | - xAxis: { | ||
| 24 | - type: 'category', | ||
| 25 | - boundaryGap: false, | ||
| 26 | - 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'], | ||
| 27 | - axisLabel: { | ||
| 28 | - interval: 1, | ||
| 29 | - }, | ||
| 30 | - name: '日期' | ||
| 31 | - | ||
| 32 | - | ||
| 33 | - }, | ||
| 34 | - yAxis: { | ||
| 35 | - type: 'value', | ||
| 36 | - axisLabel: { | ||
| 37 | - formatter: '{value}' | ||
| 38 | - }, | ||
| 39 | - min: 10, | ||
| 40 | - max: 100, | ||
| 41 | - splitNumber: 10, | ||
| 42 | - name: '人数' | ||
| 43 | - | ||
| 44 | - }, | ||
| 45 | - series: [{ | ||
| 46 | - name: '', | ||
| 47 | - type: 'line', | ||
| 48 | - smooth: true, | ||
| 49 | - color: '#A8ACE8', | ||
| 50 | - data: [41, 87, 35, 23, 42, 33, 40, 30, 50, 80], | ||
| 51 | - markPoint: { | ||
| 52 | - data: [{ | ||
| 53 | - type: 'max', | ||
| 54 | - name: '最大值' | ||
| 55 | - }, | ||
| 56 | - { | ||
| 57 | - type: 'min', | ||
| 58 | - name: '最小值' | ||
| 59 | - } | ||
| 60 | - ] | ||
| 61 | - }, | ||
| 62 | - markLine: { | ||
| 63 | - data: [{ | ||
| 64 | - type: 'average', | ||
| 65 | - name: '平均值' | ||
| 66 | - }] | ||
| 67 | - }, | ||
| 68 | - // areaStyle: { | ||
| 69 | - // // normal: { | ||
| 70 | - // // color: '#F8E9DD' //改变区域颜色 | ||
| 71 | - // // } | ||
| 72 | - // }, | ||
| 73 | - }, | ||
| 74 | - | ||
| 75 | - ] | ||
| 76 | - }; | ||
| 77 | - | ||
| 78 | - chart.setOption(option); | ||
| 79 | - return chart; | ||
| 80 | -} | ||
| 81 | - | ||
| 82 | Page({ | 2 | Page({ |
| 83 | 3 | ||
| 84 | - onShareAppMessage: function(res) { | ||
| 85 | - return { | ||
| 86 | - title: 'ECharts 可以在微信小程序中使用啦！', | ||
| 87 | - path: '', | ||
| 88 | - success: function() {}, | ||
| 89 | - fail: function() {} | ||
| 90 | - } | ||
| 91 | - }, | ||
| 92 | - | ||
| 93 | /** | 4 | /** |
| 94 | * 页面的初始数据 | 5 | * 页面的初始数据 |
| 95 | */ | 6 | */ |
| 96 | data: { | 7 | data: { |
| 97 | - state: 1, | ||
| 98 | - timestate: 1, | ||
| 99 | - ec1: { | ||
| 100 | - | ||
| 101 | - onInit: initChart1, | ||
| 102 | - | ||
| 103 | - | ||
| 104 | - | ||
| 105 | 8 | ||
| 106 | }, | 9 | }, |
| 107 | - statedate: '', | ||
| 108 | - showdate: "", | ||
| 109 | - watertime: '', | ||
| 110 | - timesel: 1, | ||
| 111 | - timearr: [ | ||
| 112 | - | ||
| 113 | - | ||
| 114 | - ], | ||
| 115 | - date: '', | ||
| 116 | - datePickerValue: ['', '', ''], | ||
| 117 | - datePickerIsShow: false, | ||
| 118 | - datechu:false | ||
| 119 | - }, | ||
| 120 | 10 | ||
| 121 | /** | 11 | /** |
| 122 | * 生命周期函数--监听页面加载 | 12 | * 生命周期函数--监听页面加载 |
| 123 | */ | 13 | */ |
| 124 | - onLoad: function(options) { | ||
| 125 | - this.setData({ | ||
| 126 | - statedate: app.monthnowDate(), | ||
| 127 | - watertime: app.newnowDate() + '-' + app.snewnowDate() | ||
| 128 | - }) | ||
| 129 | - | ||
| 130 | - console.log(this.data.statedate) | ||
| 131 | - let newdate = this.data.statedate.split("-"); | ||
| 132 | - this.setData({ | ||
| 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], | ||
| 202 | - }) | 14 | + onLoad: function (options) { |
| 203 | 15 | ||
| 204 | }, | 16 | }, |
| 205 | 17 | ||
| 206 | - | ||
| 207 | - bindDateChange: function (e) { | ||
| 208 | - console.log('picker发送选择改变，携带值为', e.detail.value) | ||
| 209 | - this.setData({ | ||
| 210 | - date: e.detail.value | ||
| 211 | - }) | ||
| 212 | - }, | ||
| 213 | - // 选择时间和摄像头切换 | ||
| 214 | - seltime(e) { | ||
| 215 | - this.setData({ | ||
| 216 | - timestate: e.currentTarget.dataset.id | ||
| 217 | - }) | ||
| 218 | - }, | ||
| 219 | - | ||
| 220 | - //开始时间和结束时间切换 | ||
| 221 | - xuanshijan(e) { | ||
| 222 | - this.setData({ | ||
| 223 | - timesel: e.currentTarget.dataset.time | ||
| 224 | - }) | ||
| 225 | - }, | ||
| 226 | - // 选择日期 | ||
| 227 | - bindstateDateChange(e) { | ||
| 228 | - console.log('picker发送选择改变，携带值为', e.detail.value) | ||
| 229 | - this.setData({ | ||
| 230 | - statedate: e.detail.value | ||
| 231 | - }) | ||
| 232 | - let newdate = this.data.statedate.split("-"); | ||
| 233 | - this.setData({ | ||
| 234 | - showdate: newdate[0] + '年' + newdate[1] + '月' | ||
| 235 | - }) | ||
| 236 | - }, | ||
| 237 | /** | 18 | /** |
| 238 | * 生命周期函数--监听页面初次渲染完成 | 19 | * 生命周期函数--监听页面初次渲染完成 |
| 239 | */ | 20 | */ |
| 240 | - onReady: function() { | 21 | + onReady: function () { |
| 241 | 22 | ||
| 242 | }, | 23 | }, |
| 243 | 24 | ||
| 244 | /** | 25 | /** |
| 245 | * 生命周期函数--监听页面显示 | 26 | * 生命周期函数--监听页面显示 |
| 246 | */ | 27 | */ |
| 247 | - onShow: function() { | ||
| 248 | - | ||
| 249 | - | ||
| 250 | - | ||
| 251 | - | 28 | + onShow: function () { |
| 252 | 29 | ||
| 253 | }, | 30 | }, |
| 254 | 31 | ||
| 255 | /** | 32 | /** |
| 256 | * 生命周期函数--监听页面隐藏 | 33 | * 生命周期函数--监听页面隐藏 |
| 257 | */ | 34 | */ |
| 258 | - onHide: function() { | 35 | + onHide: function () { |
| 259 | 36 | ||
| 260 | }, | 37 | }, |
| 261 | 38 | ||
| 262 | /** | 39 | /** |
| 263 | * 生命周期函数--监听页面卸载 | 40 | * 生命周期函数--监听页面卸载 |
| 264 | */ | 41 | */ |
| 265 | - onUnload: function() { | 42 | + onUnload: function () { |
| 266 | 43 | ||
| 267 | }, | 44 | }, |
| 268 | 45 | ||
| 269 | /** | 46 | /** |
| 270 | * 页面相关事件处理函数--监听用户下拉动作 | 47 | * 页面相关事件处理函数--监听用户下拉动作 |
| 271 | */ | 48 | */ |
| 272 | - onPullDownRefresh: function() { | 49 | + onPullDownRefresh: function () { |
| 273 | 50 | ||
| 274 | }, | 51 | }, |
| 275 | 52 | ||
| 276 | /** | 53 | /** |
| 277 | * 页面上拉触底事件的处理函数 | 54 | * 页面上拉触底事件的处理函数 |
| 278 | */ | 55 | */ |
| 279 | - onReachBottom: function() { | 56 | + onReachBottom: function () { |
| 280 | 57 | ||
| 281 | }, | 58 | }, |
| 282 | 59 | ||
| 283 | /** | 60 | /** |
| 284 | * 用户点击右上角分享 | 61 | * 用户点击右上角分享 |
| 285 | */ | 62 | */ |
| 286 | - onShareAppMessage: function() { | 63 | + onShareAppMessage: function () { |
| 287 | 64 | ||
| 288 | } | 65 | } |
| 289 | }) | 66 | }) |
-
请 注册 或 登录 后发表评论