成品

刘晓艳
pages/chengpin/chengpin.js
pages/chengpin/chengpin.json
pages/chengpin/chengpin.wxml
pages/chengpin/chengpin.wxss
--- a/pages/chengpin/chengpin.js
查看文件 @953c4c2
+++ b/pages/chengpin/chengpin.js
查看文件 @953c4c2
@@ -11,12 +11,39 @@ Page({
    */
   data: {
     showModal: false,
-    monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+    modalTitle: ["选择时间", "选择地磅", "选择货物"],
+    modalNum: 2,
+    monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", ],
     time: '2019.01.01-2019.01.31',
-    changeColor: -1,
+    changeColor: 0,
+    tabList: ["出库", "流水"],
+    tabNum: 0,
+    tableTitle: ["时间", "地磅", "货物名称", "重量（T）"],
+    trList: [{
+        date: "09.12",
+        position: "大厅左上角",
+        name: "名字妙哉妙",
+        num: "18",
+        btn: "详情"
+      },
+      {
+        date: "09.12",
+        position: "大厅左上角",
+        name: "啦啦啦啦啦啦啦啦啦啦",
+        num: "18",
+        btn: "详情"
+      },
+      {
+        date: "09.12",
+        position: "车间后方大转盘",
+        name: "啦啦啦啦啦啦啦啦啦啦",
+        num: "18",
+        btn: "详情"
+      },
+    ],
     ec: {
-      onInit: function (canvas, width, height) {
+      onInit: function(canvas, width, height) {
         chart = echarts.init(canvas, null, {
@@ -37,32 +64,15 @@ Page({
     },
   },
-  choice(e) {
-    let index = e.currentTarget.dataset.id;
-    index = index + 1
-    if (index == 1 || index == 3 || index == 5 || index == 7 || index == 8 || index == 10 || index == 12) {
-      this.setData({
-        time: "（" + "2019." + "0" + index + ".01" + "-2019" + index + ".31" + "）"
-      })
-    } else {
-      this.setData({
-        time: "（" + "2019." + "0" + index + ".01" + "-2019" + index + ".30" + "）"
-      })
-    }
-    this.setData({
-      changeColor: index - 1
-    })
-  },
-  three() {
+  changeTab(e) {
     this.setData({
-      time: '近30天',
-      showt: !this.data.showt
+      tabNum: e.currentTarget.dataset.id
     })
+
   },
   toShowModal(e) {
     this.setData({
       showModal: true
-
     })
   },
@@ -71,19 +81,26 @@ Page({
       showModal: false
     });
   },
+  choice(e) {
+
+    this.setData({
+      changeColor: e.currentTarget.dataset.id
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
+  onLoad: function(options) {
     this.echartsComponnet = this.selectComponent('#mychart');
+
     //如果是第一次绘制
     if (!Chart) {
-
       this.init_echarts(); //初始化图表
+
     } else {
       this.setOption(Chart); //更新数据
@@ -93,7 +110,7 @@ Page({
   },
   //初始化图表
-  init_echarts: function () {
+  init_echarts: function() {
     this.echartsComponnet.init((canvas, width, height) => {
@@ -117,7 +134,7 @@ Page({
   },
-  setOption: function (Chart) {
+  setOption: function(Chart) {
     Chart.clear(); // 清除
@@ -178,7 +195,7 @@ Page({
         position: 'left',
-        name: '千瓦时', //纵坐标名称
+        name: '重量', //纵坐标名称
         nameTextStyle: { //在name值存在下，设置name的样式
@@ -188,12 +205,12 @@ Page({
         },
-        splitNumber: 5, //坐标轴的分割段数
+        splitNumber: 10, //坐标轴的分割段数
         min: 0,
-        max: 500,
+        max: 100,
       },
@@ -201,7 +218,7 @@ Page({
         type: 'line',
-        data: [100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 253],
+        data: [10, 12, 13, 14, 23, 31, 23, 31, 48, 43, 1, 100, 23, 42, 21, 31, 23, 34, 97, 43, 59, 67, 82, 42, 23, 31, 13, 34, 34, 43, 25],
         symbol: 'true',
@@ -211,7 +228,7 @@ Page({
             lineStyle: {
-              color: '#6495F8'
+              color: '#ED3676'
             }
@@ -234,49 +251,62 @@ Page({
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
+  onReady: function() {
   },
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
+  onShow: function() {
+    this.echartsComponnet = this.selectComponent('#mychart');
+
+
+    //如果是第一次绘制
+
+    if (!Chart) {
+      this.init_echarts(); //初始化图表
+
+
+    } else {
+
+      this.setOption(Chart); //更新数据
+    }
   },
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide: function () {
+  onHide: function() {
   },
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload: function () {
+  onUnload: function() {
   },
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh: function () {
+  onPullDownRefresh: function() {
   },
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom: function () {
+  onReachBottom: function() {
   },
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
+  onShareAppMessage: function() {
   }
 })
--- a/pages/chengpin/chengpin.json
查看文件 @953c4c2
+++ b/pages/chengpin/chengpin.json
查看文件 @953c4c2
 {
   "navigationBarTextStyle": "black",
   "navigationBarTitleText": "成品",
-  "usingComponents": {}
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
 }
--- a/pages/chengpin/chengpin.wxml
查看文件 @953c4c2
+++ b/pages/chengpin/chengpin.wxml
查看文件 @953c4c2
 <!--pages/qiyeyongdian/detail/detail.wxml-->
-<!-- 日期选择 -->
+<!-- 货物信息 -->
 <view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view>
 <view wx:if="{{showModal}}">
   <view class="modal-content">
-    <!-- 年份 -->
-    <view class="modal_year">2019年</view>
+    <!-- 选项卡 -->
+    <view class="modal_year">
+      <view class="modal_single {{modalNum == index ?'modal_choice':''}}" wx:for="{{modalTitle}}" wx:key="">{{item}}</view>
+    </view>
     <!-- 月份 -->
+    <scroll-view scroll-y style="height: 400px;">
     <view class="modal_month">
       <view class="month_single {{changeColor == index?'change':''}}" wx:for="{{monthList}}" wx:key="" data-id="{{index}}" catchtap="choice">{{item}}</view>
     </view>
-    <view class="date_descript {{showt==true?'tactive':''}}" bindtap="three">近30天</view>
+    </scroll-view>
     <view class='btns'>
       <view class="cacle" bindtap="hideModal">取消</view>
       <view class="cacle sure" bindtap="hideModal">确定</view>
     </view>
   </view>
 </view>
+<!-- 选项卡 -->
+<view class="tab">
+  <view wx:for="{{tabList}}" wx:key="" class="tab_single {{tabNum == index?'tab_border':''}}" bindtap='changeTab' data-id="{{index}}">{{item}}</view>
+</view>
 <!-- 月份 -->
 <view class="search_month">
   <view class="rowimg">
     <image src='/img/row.png' class="left"></image>
   </view>
-  <view class="date_time" bindtap='toShowModal'>
-  <!-- 近30天（2019.03.01-2019.03.30） -->
-  2019.06
+  <view class="date_time">
+    <!-- 出库 -->
+    <view wx:if="{{tabNum == 0}}">2019.06</view>
+    <!-- 流水 -->
+    <view wx:if="{{tabNum == 1}}">{{time}}</view>
     <view class="rowimg">
       <image src='/img/row.png' class="down"></image>
     </view>
@@ -32,15 +41,39 @@
     <image src='/img/row.png'></image>
   </view>
 </view>
-<!-- 折线图 -->
-<view class="charts_line">
-  <view class="chart">
-    <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
-<!-- <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ec}}"></ec-canvas> -->
+<!-- 出库 -->
+<view wx:if="{{tabNum == 0}}">
+  <view class="cp_title">
+    成品出库信息
+  </view>
+  <view class="total">
+    重量总计（吨）
+    <text>1000</text>
   </view>
-
-  <view class="total_power">
-    <view>2019.06</view>
+  <!-- 折线图 -->
+  <view class="charts_line">
+    <view class="chart">
+      <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
+    </view>
+    <view class="total_power">
+      <view>2019年6月</view>
+    </view>
+  </view>
+</view>
+<!-- 流水 -->
+<view wx:if="{{tabNum == 1}}">
+  <view class="second_total">重量总计（吨）：1000</view>
+  <!-- 数据 -->
+  <view class="table">
+    <view class="table_title">
+      <view wx:for="{{tableTitle}}" wx:key="">{{item}}</view>
+    </view>
+    <view class="table_tr" wx:for="{{trList}}" wx:key="">
+      <view class="tr_time">{{item.date}}</view>
+      <view class="tr_pos">{{item.position}}</view>
+      <view class="tr_name">{{item.name}}</view>
+      <view class="tr_time">{{item.num}}</view>
+      <view class="tr_btn" bindtap='toShowModal'>{{item.btn}}</view>
+    </view>
   </view>
-
 </view>
--- a/pages/chengpin/chengpin.wxss
查看文件 @953c4c2
+++ b/pages/chengpin/chengpin.wxss
查看文件 @953c4c2
@@ -29,16 +29,14 @@
 .down {
   transform: rotate(90deg);
-  margin-left: 10rpx
+  margin-left: 10rpx;
 }
 /* 折线图 */
-
-
 .chart {
   width: 750rpx;
-  height: 394rpx;
+  height: 494rpx;
   margin: 0 auto;
   display: flex;
   justify-content: center;
@@ -94,14 +92,48 @@ ec-canvas {
   border-radius: 2rpx;
 }
-/* 年份 */
+/* 弹出框选项卡 */
 .modal_year {
-  padding: 38rpx;
-  border: 1rpx solid #f5f5f5;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
   font-size: 28rpx;
   color: #666;
-  text-align: center;
+  padding-top: 20rpx;
+  border:1rpx solid #f5f5f5;
+  border-left:none;
+  border-right: none;
+}
+.modal_single{
+  border-bottom:4rpx solid #fff;
+}
+.modal_choice{
+  border-bottom-color: #FF9400;
+  color: #FF9400;
+  font-weight: 600;
+  padding-bottom:20rpx;
+}
+/* 选项卡 */
+
+.tab {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 20rpx;
+  color: #ff9400;
+  border-top: 1rpx solid #f5f5f5;
+}
+
+.tab_single {
+  padding-bottom: 20rpx;
+  border-bottom: 4rpx solid #fff;
+}
+
+.tab_border {
+  border-bottom: 4rpx solid #ff9400;
 }
 /* 月份 */
@@ -110,17 +142,17 @@ ec-canvas {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  margin: 40rpx 0 30rpx;
+  margin: 50rpx 30rpx;
+  justify-content: space-between;
 }
 .month_single {
-  width: 33.333%;
-  height: 120rpx;
-  text-align: center;
+  background-color: #F9F8FE;
+  padding: 20rpx 56rpx 15rpx;
   border-radius: 6rpx;
   font-size: 32rpx;
   color: #333;
-  line-height: 120rpx;
+  margin-bottom: 30rpx;
 }
 .change {
@@ -139,9 +171,48 @@ ec-canvas {
   background: rgba(244, 244, 244, 1);
   border-radius: 6rpx;
 }
-.tactive{
-  background:  #ff9400;
-  color:#fff;
+
+.tactive {
+  background: #ff9400;
+  color: #fff;
+}
+
+/* 标题 */
+
+.cp_title {
+  color: #333;
+  font-size: 32rpx;
+  font-weight: bold;
+  padding: 30rpx 54rpx 41rpx;
+  position: relative;
+}
+
+.cp_title::after {
+  position: absolute;
+  content: "";
+  display: block;
+  left: 30rpx;
+  top: 35rpx;
+  width: 8rpx;
+  height: 35rpx;
+  background-color: #ff9400;
+  border-radius: 4rpx;
+}
+
+/* 重量总计 */
+
+.total {
+  padding-left: 30rpx;
+  color: #666;
+  font-size: 20rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.total text {
+  font-size: 32rpx;
+  color: #333;
 }
 .btns {
@@ -165,3 +236,58 @@ ec-canvas {
   color: #ff9400;
   border-left: 1rpx solid #f5f5f5;
 }
+
+/* 流水 */
+
+.second_total {
+  padding: 40rpx 30rpx 20rpx;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  font-size: 28rpx;
+}
+
+.table_title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  padding: 30rpx 0 20rpx;
+  font-size: 28rpx;
+  color: #666;
+  border: 1rpx solid #f5f5f5;
+}
+
+.table_tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  padding: 30rpx 0 20rpx;
+  font-size: 24rpx;
+  color: #666;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.tr_time {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.tr_btn {
+  color: #ffb77e;
+}
+
+.tr_name {
+  width: 120rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tr_pos {
+  width: 120rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}