成品

@@ -14,7 +14,8 @@
     "pages/logs/logs",
     "pages/logs/logs",
     "pages/yujing/yujing",
     "pages/yujing/yujing",
     "pages/qiyeyongdian/qyyd/qyyd",
     "pages/qiyeyongdian/qyyd/qyyd",
-    "pages/member/member"
+    "pages/member/member",
+    "pages/chengpin/chengpin"
   ],
   ],
   "window": {
   "window": {
     "backgroundTextStyle": "light",
     "backgroundTextStyle": "light",

+// pages/qiyeyongdian/detail/detail.js
+
+import * as echarts from '../../ec-canvas/echarts';
+
+const app = getApp();
+var Chart = null;
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    showModal: false,
+    monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+    time: '2019.01.01-2019.01.31',
+    changeColor: -1,
+    ec: {
+
+      onInit: function (canvas, width, height) {
+
+        chart = echarts.init(canvas, null, {
+
+          width: width,
+
+          height: height
+
+        });
+
+        canvas.setChart(chart);
+
+        return chart;
+
+      },
+
+      lazyLoad: true, // 延迟加载
+      showt: false
+    },
+
+  },
+  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() {
+    this.setData({
+      time: '近30天',
+      showt: !this.data.showt
+    })
+  },
+  toShowModal(e) {
+    this.setData({
+      showModal: true
+
+    })
+  },
+
+  hideModal() {
+    this.setData({
+      showModal: false
+    });
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+    this.echartsComponnet = this.selectComponent('#mychart');
+
+    //如果是第一次绘制
+
+    if (!Chart) {
+
+      this.init_echarts(); //初始化图表
+
+    } else {
+
+      this.setOption(Chart); //更新数据
+
+    }
+
+  },
+  //初始化图表
+
+  init_echarts: function () {
+
+    this.echartsComponnet.init((canvas, width, height) => {
+
+      // 初始化图表
+
+      const Chart = echarts.init(canvas, null, {
+
+        width: width,
+
+        height: height
+
+      });
+
+      this.setOption(Chart)
+
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+
+      return Chart;
+
+    });
+
+  },
+
+  setOption: function (Chart) {
+
+    Chart.clear(); // 清除
+
+    Chart.setOption(this.getOption()); //获取新数据
+
+  },
+
+  // 图表配置项
+
+  getOption() {
+
+    var self = this;
+
+    var option = {
+
+      color: ["#FFF"], //图例图标颜色
+      // lineStyle:{//阴影
+      //   shadowColor: '#6495F8',
+      //   shadowBlur: 10
+      // },
+      xAxis: { //横坐标
+
+        type: 'category',
+
+        name: '日期', //横坐标名称
+
+        nameTextStyle: { //在name值存在下，设置name的样式
+
+          color: '#333',
+
+          fontStyle: 'normal'
+
+        },
+        axisLabel: {
+          interval: 0,
+        },
+        boundaryGap: false, //1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上
+
+        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+
+        axisLabel: {
+
+          textStyle: {
+
+            fontSize: 13,
+
+            color: '#5D5D5D'
+
+          }
+
+        }
+
+      },
+
+      yAxis: { //纵坐标
+
+        type: 'value',
+
+        position: 'left',
+
+        name: '千瓦时', //纵坐标名称
+
+        nameTextStyle: { //在name值存在下，设置name的样式
+
+          color: '#333333',
+
+          fontStyle: 'normal'
+
+        },
+
+        splitNumber: 5, //坐标轴的分割段数
+
+
+        min: 0,
+
+        max: 500,
+
+      },
+
+      series: [{
+
+        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],
+
+        symbol: 'true',
+
+        itemStyle: {
+
+          normal: {
+
+            lineStyle: {
+
+              color: '#6495F8'
+
+            }
+
+          }
+
+        },
+        // areaStyle: {
+        //   normal: {
+        //     color: '#6495F8' //改变区域颜色
+        //   }
+        // },
+
+      }],
+
+    }
+
+    return option;
+
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

+{
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "成品",
+  "usingComponents": {}
+}

+<!--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_month">
+      <view class="month_single {{changeColor == index?'change':''}}" wx:for="{{monthList}}" wx:key="" data-id="{{index}}" catchtap="choice">{{item}}</view>
+    </view>
+    <view class="date_descript {{showt==true?'tactive':''}}" bindtap="three">近30天</view>
+    <view class='btns'>
+      <view class="cacle" bindtap="hideModal">取消</view>
+      <view class="cacle sure" bindtap="hideModal">确定</view>
+    </view>
+  </view>
+</view>
+<!-- 月份 -->
+<view class="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="rowimg">
+      <image src='/img/row.png' class="down"></image>
+    </view>
+  </view>
+  <view class="rowimg">
+    <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>
+
+  <view class="total_power">
+    <view>2019.06</view>
+  </view>
+
+</view>

+/* pages/qiyeyongdian/detail/detail.wxss */
+
+.search_month {
+  width: 686rpx;
+  padding: 0 30rpx;
+  height: 70rpx;
+  background-color: #f3f5f8;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* 左箭头 */
+
+.left {
+  transform: rotate(180deg);
+}
+
+/* 日期 */
+
+.date_time {
+  color: #666;
+  font-size: 28rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.down {
+  transform: rotate(90deg);
+  margin-left: 10rpx
+}
+
+/* 折线图 */
+
+
+
+.chart {
+  width: 750rpx;
+  height: 394rpx;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.total_power {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+/* 弹出框 */
+
+.modal-mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.5;
+  overflow: hidden;
+  z-index: 9000;
+  color: #fff;
+}
+
+.modal-dialog {
+  width: 100%;
+  overflow: hidden;
+  position: fixed;
+  top: 45%;
+  left: 0;
+  z-index: 9500;
+  margin: -180rpx 70rpx;
+}
+
+.modal-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9500;
+  width: 100%;
+  /* height: 55%; */
+  overflow: hidden;
+  /* padding: 120rpx 50rpx 50rpx; */
+  background: #fff;
+  border-radius: 2rpx;
+}
+
+/* 年份 */
+
+.modal_year {
+  padding: 38rpx;
+  border: 1rpx solid #f5f5f5;
+  font-size: 28rpx;
+  color: #666;
+  text-align: center;
+}
+
+/* 月份 */
+
+.modal_month {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin: 40rpx 0 30rpx;
+}
+
+.month_single {
+  width: 33.333%;
+  height: 120rpx;
+  text-align: center;
+  border-radius: 6rpx;
+  font-size: 32rpx;
+  color: #333;
+  line-height: 120rpx;
+}
+
+.change {
+  background-color: #ff9400;
+  color: #fff;
+}
+
+.date_descript {
+  width: 296rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  text-align: center;
+  color: #ff9400;
+  font-size: 28rpx;
+  margin: 0 auto;
+  background: rgba(244, 244, 244, 1);
+  border-radius: 6rpx;
+}
+.tactive{
+  background:  #ff9400;
+  color:#fff;
+}
+
+.btns {
+  margin-top: 50rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-top: 1rpx solid #f5f5f5;
+}
+
+.cacle {
+  width: 50%;
+  color: #afafaf;
+  height: 87rpx;
+  line-height: 87rpx;
+  text-align: center;
+  font-size: 34rpx;
+}
+
+.sure {
+  color: #ff9400;
+  border-left: 1rpx solid #f5f5f5;
+}

@@ -39,7 +39,7 @@
 			"list": []
 			"list": []
 		},
 		},
 		"miniprogram": {
 		"miniprogram": {
-			"current": 4,
+			"current": -1,
 			"list": [
 			"list": [
 				{
 				{
 					"id": -1,
 					"id": -1,
@@ -49,13 +49,6 @@
 					"scene": null
 					"scene": null
 				},
 				},
 				{
 				{
-					"id": 1,
-					"name": "detail",
-					"pathName": "pages/qiyeyongdian/detail/detail",
-					"query": "",
-					"scene": null
-				},
-				{
 					"id": -1,
 					"id": -1,
 					"name": "企业用电",
 					"name": "企业用电",
 					"pathName": "pages/qiyeyongdian/detail/detail",
 					"pathName": "pages/qiyeyongdian/detail/detail",
@@ -64,15 +57,16 @@
 				},
 				},
 				{
 				{
 					"id": -1,
 					"id": -1,
-					"name": "企业用电",
-					"pathName": "pages/qiyeyongdian/detail/detail",
+					"name": "人员",
+					"pathName": "pages/member/member",
 					"query": "",
 					"query": "",
 					"scene": null
 					"scene": null
 				},
 				},
 				{
 				{
 					"id": -1,
 					"id": -1,
-					"name": "人员",
-					"pathName": "pages/member/member",
+					"name": "成品",
+					"pathName": "pages/chengpin/chengpin",
+					"query": "",
 					"scene": null
 					"scene": null
 				}
 				}
 			]
 			]