茶室

components/uni-ec-canvas/uni-ec-canvas.vue

@@ -0,0 +1,315 @@
+<template>
+  <canvas type="2d" v-if="isUseNewCanvas" class="ec-canvas" :canvas-id="canvasId" @init="init" @touchstart="touchStart"
+    @touchmove="touchMove" @touchend="touchEnd">
+  </canvas>
+  <canvas v-else class="ec-canvas" :canvas-id="canvasId" @init="init" @touchstart="touchStart" @touchmove="touchMove"
+    @touchend="touchEnd">
+  </canvas>
+</template>
+
+<script>
+  import WxCanvas from "./wx-canvas";
+  import * as echarts from "./echarts";
+
+  let ctx;
+
+  function wrapTouch(event) {
+    for (let i = 0; i < event.touches.length; ++i) {
+      const touch = event.touches[i];
+      touch.offsetX = touch.x;
+      touch.offsetY = touch.y;
+    }
+    return event;
+  }
+
+  export default {
+    props: {
+      canvasId: {
+        type: String,
+        default: () => {
+          return "ec-canvas";
+        }
+      },
+      ec: {
+        type: Object
+      },
+      forceUseOldCanvas: {
+        type: Boolean,
+        value: false
+      }
+    },
+    data() {
+      return {
+        $curChart: {},
+        toHandleList: [],
+        isUseNewCanvas: true
+      };
+    },
+    watch: {
+      "ec.option": {
+        deep: true,
+        handler(val, oldVal) {
+          this.setOption(val);
+        }
+      }
+    },
+    onReady: function() {
+      if (!this.ec) {
+        console.warn(
+          '组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
+          'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'
+        );
+        return;
+      }
+      if (!this.ec.lazyLoad) {
+        this.init();
+      }
+    },
+    methods: {
+      compareVersion(v1, v2) {
+        v1 = v1.split(".");
+        v2 = v2.split(".");
+        const len = Math.max(v1.length, v2.length);
+
+        while (v1.length < len) {
+          v1.push("0");
+        }
+        while (v2.length < len) {
+          v2.push("0");
+        }
+
+        for (let i = 0; i < len; i++) {
+          const num1 = parseInt(v1[i]);
+          const num2 = parseInt(v2[i]);
+
+          if (num1 > num2) {
+            return 1;
+          } else if (num1 < num2) {
+            return -1;
+          }
+        }
+        return 0;
+      },
+      init(callback) {
+        const version = wx.getSystemInfoSync().SDKVersion;
+
+        let canUseNewCanvas = this.compareVersion(version, "2.9.0") >= 0;
+        if (this.forceUseOldCanvas) {
+          if (canUseNewCanvas) console.warn("开发者强制使用旧canvas,建议关闭");
+          canUseNewCanvas = false;
+        }
+        this.isUseNewCanvas = canUseNewCanvas && !this.forceUseOldCanvas;
+        if (this.isUseNewCanvas) {
+          console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
+          // 2.9.0 可以使用 <canvas type="2d"></canvas>
+          this.initByNewWay(callback);
+        } else {
+          const isValid = this.compareVersion(version, "1.9.91") >= 0;
+          if (!isValid) {
+            console.error(
+              "微信基础库版本过低，需大于等于 1.9.91。" +
+              "参见：https://github.com/ecomfe/echarts-for-weixin" +
+              "#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82"
+            );
+            return;
+          } else {
+            console.warn(
+              "建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能"
+            );
+            this.initByOldWay(callback);
+          }
+        }
+      },
+      initByOldWay(callback) {
+        // 1.9.91 <= version < 2.9.0：原来的方式初始化
+        ctx = wx.createCanvasContext(this.canvasId, this);
+        const canvas = new WxCanvas(ctx, this.canvasId, false);
+        const that = this
+        echarts.setCanvasCreator(() => {
+          return canvas;
+        });
+        // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
+        const canvasDpr = 1;
+        var query = wx.createSelectorQuery().in(this);
+        query
+          .select(".ec-canvas")
+          .boundingClientRect(res => {
+            if (typeof callback === "function") {
+              that.$curChart = callback(canvas, res.width, res.height, canvasDpr);
+            } else if (that.ec) {
+              that.initChart(canvas, res.width, res.height, canvasDpr)
+            } else {
+              that.triggerEvent("init", {
+                canvas: canvas,
+                width: res.width,
+                height: res.height,
+                devicePixelRatio: canvasDpr // 增加了dpr，可方便外面echarts.init
+              });
+            }
+          })
+          .exec();
+      },
+      initByNewWay(callback) {
+        const that = this
+        // version >= 2.9.0：使用新的方式初始化
+        const query = wx.createSelectorQuery().in(this);
+        query
+          .select(".ec-canvas")
+          .fields({
+            node: true,
+            size: true
+          })
+          .exec(res => {
+            const canvasNode = res[0].node;
+
+            const canvasDpr = wx.getSystemInfoSync().pixelRatio;
+            const canvasWidth = res[0].width;
+            const canvasHeight = res[0].height;
+
+            const ctx = canvasNode.getContext("2d");
+
+            const canvas = new WxCanvas(ctx, that.canvasId, true, canvasNode);
+            echarts.setCanvasCreator(() => {
+              return canvas;
+            });
+
+            if (typeof callback === "function") {
+              that.$curChart = callback(
+                canvas,
+                canvasWidth,
+                canvasHeight,
+                canvasDpr
+              );
+            } else if (that.ec) {
+              that.initChart(canvas, canvasWidth, canvasHeight, canvasDpr)
+            } else {
+              that.triggerEvent("init", {
+                canvas: canvas,
+                width: canvasWidth,
+                height: canvasHeight,
+                devicePixelRatio: canvasDpr
+              });
+            }
+          });
+      },
+      setOption(val) {
+        if (!this.$curChart || !this.$curChart.setOption) {
+          this.toHandleList.push(val);
+        } else {
+          this.$curChart.setOption(val);
+        }
+      },
+      canvasToTempFilePath(opt) {
+        if (this.isUseNewCanvas) {
+          // 新版
+          const query = wx.createSelectorQuery().in(this);
+          query
+            .select(".ec-canvas")
+            .fields({
+              node: true,
+              size: true
+            })
+            .exec(res => {
+              const canvasNode = res[0].node;
+              opt.canvas = canvasNode;
+              wx.canvasToTempFilePath(opt);
+            });
+        } else {
+          // 旧的
+          if (!opt.canvasId) {
+            opt.canvasId = this.canvasId;
+          }
+          ctx.draw(true, () => {
+            wx.canvasToTempFilePath(opt, this);
+          });
+        }
+      },
+
+      touchStart(e) {
+        if (this.ec.stopTouchEvent) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        this.$emit("touchstart", e);
+        if (this.$curChart && e.touches.length > 0) {
+          var touch = e.touches[0];
+          var handler = this.$curChart.getZr().handler;
+          if (handler) {
+            handler.dispatch("mousedown", {
+              zrX: touch.x,
+              zrY: touch.y
+            });
+            handler.dispatch("mousemove", {
+              zrX: touch.x,
+              zrY: touch.y
+            });
+            handler.processGesture(wrapTouch(e), "start");
+          }
+        }
+      },
+
+      touchMove(e) {
+        if (this.ec.stopTouchEvent) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        this.$emit("touchmove", e);
+        if (this.$curChart && e.touches.length > 0) {
+          var touch = e.touches[0];
+          var handler = this.$curChart.getZr().handler;
+          if (handler) {
+            handler.dispatch("mousemove", {
+              zrX: touch.x,
+              zrY: touch.y
+            });
+            handler.processGesture(wrapTouch(e), "change");
+          }
+        }
+      },
+
+      touchEnd(e) {
+        if (this.ec.stopTouchEvent) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        this.$emit("touchend", e);
+        if (this.$curChart) {
+          const touch = e.changedTouches ? e.changedTouches[0] : {};
+          var handler = this.$curChart.getZr().handler;
+          if (handler) {
+            handler.dispatch("mouseup", {
+              zrX: touch.x,
+              zrY: touch.y
+            });
+            handler.dispatch("click", {
+              zrX: touch.x,
+              zrY: touch.y
+            });
+            handler.processGesture(wrapTouch(e), "end");
+          }
+        }
+      },
+
+      initChart(canvas, width, height, canvasDpr) {
+        this.$curChart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: canvasDpr
+        });
+        canvas.setChart(this.$curChart);
+        this.$curChart.setOption(this.ec.option);
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  .ec-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+</style>

components/uni-ec-canvas/wx-canvas.js

@@ -0,0 +1,121 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId, isNew, canvasNode) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+    this.isNew = isNew
+    if (isNew) {
+      this.canvasNode = canvasNode;
+    } else {
+      this._initStyle(ctx);
+    }
+
+    // this._initCanvas(zrender, ctx);
+
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
+      'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
+      'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
+    ];
+
+    styles.forEach(style => {
+      Object.defineProperty(ctx, style, {
+        set: value => {
+          if (style !== 'fillStyle' && style !== 'strokeStyle' ||
+            value !== 'none' && value !== null
+          ) {
+            ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
+          }
+        }
+      });
+    });
+
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+
+  set width(w) {
+    if (this.canvasNode) this.canvasNode.width = w
+  }
+  set height(h) {
+    if (this.canvasNode) this.canvasNode.height = h
+  }
+
+  get width() {
+    if (this.canvasNode)
+      return this.canvasNode.width
+    return 0
+  }
+  get height() {
+    if (this.canvasNode)
+      return this.canvasNode.height
+    return 0
+  }
+}

page_shanghu/bangding.vue

@@ -168,7 +168,7 @@
 			
 			// 点击门店是否绑定
 			btnmendian(){
-				if(this.gateSnobj.device.sn == null){
+				if(this.gateSnobj.device == null){
 					let that = this
 					uni.showModal({
 						    title: '温馨提示',  

page_shanghu/dianpuroomadd.vue

@@ -862,6 +862,9 @@
 				this.$u.get(`app/store/mch/${this.storeId}`).then(res => {
 					if (res.code == 200) {
 						this.roomobj = res.data
+						// this.roomList = res.data.roomList
+						// this.datingobj = res.data.hallEquList
+						// this.cesuolist = res.da
 						res.data.roomList.forEach(item => {
 							if (item.type2 == 1) {
 								this.roomList.push(item)

page_shanghu/yunying.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="page">
+	<view class="page" >
       <u-navbar :is-back="false" title="运营" :border-bottom="false" back-icon-color="000" :background="bgc"
       			title-color='#000' title-size='36' height='40' id="navbar">
       		</u-navbar>
@@ -73,7 +73,10 @@
 					</view>
 				</view>
 				<view class="zhixian">
-					<l-echart class="line-chart" ref="lineChart2"></l-echart>
+					<!-- <l-echart class="line-chart" ref="lineChart2"></l-echart> -->
+					<view class="echarts" style="padding: 20rpx;">
+							<uni-ec-canvas  class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec"></uni-ec-canvas>
+					</view>
 					<view class="shuom">
 						<view class="">
 							<image src="https://api.ccttiot.com/smartmeter/img/static/uk2PaAnt4mMTrYhbM7PY" mode="">
@@ -111,151 +114,266 @@
 				<view class="bd">
 					<view class="one">
 						<view class="">
-							房间
+							设备总数
 						</view>
 						<view class="cu">
-							<text>2</text>/10
+							<text>1/</text> 10
 						</view>
 					</view>
 					<view class="one">
 						<view class="">
-							大厅设施
+							空闲
 						</view>
 						<view class="cu">
-							<text>3</text>/10
+							<text>1/</text>6
 						</view>
 					</view>
 					<view class="one" style="border: none;">
 						<view class="">
-							设备总数
+							租赁中
 						</view>
 						<view class="cu">
-							<text>5</text>/20
+							<text>1/</text>4
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
+		
+         <!-- <tab-bar :indexs='1' style=""></tab-bar> -->
 	</view>
 </template>
 
 <script>
-	// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
+	// import * as echarts from '@/components/lime-echart/static/echarts.min.js';
+	import * as echarts from '@/components/uni-ec-canvas/echarts.js'
+	let chart = null
 	export default {
 		data() {
 			return {
+				ec: {
+					lazyLoad: true
+				},
+				
 				bgc: {
 					backgroundColor: "",
 				},
-				tabindex: 1,
 				smflag:false
 			}
 		},
-		onLoad() {
+		// 分享到好友（会话）
+		  onShareAppMessage: function () {  
+		    return {  
+		      title: '创想物联',  
+		      path: '/pages/shouye/index'  
+		    }  
+		  },  
+		  
+		  // 分享到朋友圈  
+		  onShareTimeline: function () {  
+		    return {  
+		      title: '创想物联',  
+		      query: '',  
+		      path: '/pages/shouye/index'  
+		    }  
+		  },
+		onLoad(option) {
 
 		},
 		onShow() {
-			//加载折线图数据
+			this.timelist = []
-			// this.loadLineData2() 
+			setTimeout(() => {
-		},
+				console.log(this.$refs)
-		mounted() {
+				this.$refs.canvas.init(this.initChart)
-
+			}, 500)
+			this.recharge = 0
+			const now = new Date();
+			this.yeartime = {
+			    year: now.getFullYear(),
+			    month: now.getMonth() + 1, // 月份从0开始，所以需要+1
+			    day: 1 // 设置为月份的第一天
+			}
+			this.kstime = this.yeartime.year + '-' + (this.yeartime.month < 10 ? '0' + this.yeartime.month : this.yeartime.month) + '-' + (this.yeartime.day < 10 ? '0' + this.yeartime.day : this.yeartime.day)
+			this.yeartimes.year = now.getFullYear()
+			this.yeartimes.month = now.getMonth() + 1
+			this.yeartimes.day = now.getDate()
+			this.jstime = this.yeartimes.year + '-' + (this.yeartimes.month < 10 ? '0' + this.yeartimes.month : this.yeartimes.month) + '-' + (this.yeartimes.day < 10 ? '0' + this.yeartimes.day : this.yeartimes.day)
+			this.gettime()
 		},
 		methods: {
 			// 点击切换周还是月
 			btntab(num) {
 				this.tabindex = num
 			},
-			//加载折线图数据
+			
-			loadLineData2() {
+			// 点击导航栏回到首页
-				//这里请求服务器拿到数据
+			btnshouye() {
-				let res = {
+				uni.reLaunch({
-					//x轴数据
+					url: '/pages/shouye/index'
-					xData: ['6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17'],
+				})
-					//y轴数据
+			},
-					yData: [50, 120, 150, 220, 180, 300, 130], //订单数
+
-					yData1: [2000, 1820, 2350, 1200, 800, 3000, 2190], //营收
+
+			gettimes() {
+				let data = {
+					deviceId: this.deviceId,
+					year: this.yeartime.year,
+					month: this.yeartime.month,
+					groupBy: 'create_date'
 				}
-				let option = {
+				this.loging = false
+				this.$u.get('/app/device/electric/count', data).then((res) => {
+					if (res.code == 200) {
+						this.timelist = res.data
+						this.chartData = this.timelist.map(item => item.usedElectriQuantity);
+						this.chartday = [1,2,3,4,5,6,7,8];
+						this.loging = true
+					}
+				})
+			},
+			generateWaveData(length) {
+				const data = []
+				for (let i = 0; i < length; i++) {
+					const y = Math.sin((i / (length - 1)) * Math.PI * 2) // 正弦函数生成波浪形状的y值
+					data.push((y + 1) * 50) // 映射到0-100的范围
+				}
+				return data
+			},
+			initChart(canvas, width, height, canvasDpr) {
+				let that = this
+				console.log(canvas, width, height, canvasDpr)
+				const option = {
+					grid: {
+						left: 35,
+						right: 0,
+						top: 10,
+						bottom: 20,
+					},
 					xAxis: {
 						type: 'category',
-						// x轴数据文字颜色
+						boundaryGap: false,
-						axisLabel: {
-							color: '#a7a7a7'
-						},
-						// x轴那天坐标轴线的颜色
 						axisLine: {
-							lineStyle: {
+							show: false,
-								color: '#f1f1f1',
-							}
 						},
-						//x轴上面刻度线隐藏
 						axisTick: {
 							show: false,
 						},
-						//这里是x轴数据
-						data: res.xData
-					},
-					//设置网格
-					grid: {
-						top: 40,
-						bottom: 30,
-					},
-					//y轴设置
-					yAxis: {
-						type: 'value',
-						//y轴标签文字颜色
 						axisLabel: {
-							color: '#a7a7a7'
-						},
-						// y轴分割线设置为虚线
-						splitLine: {
 							show: true,
-							lineStyle: {
+							color: '#808080',
-								type: 'dashed'
+							fontSize: 11,
-							}
+							rotate: 0,
-						}
+						},
+						splitLine: {
+							show: false,
+						},
+						data: that.chartday,
+					},
+					yAxis: {
+						show: true,
+						axisLine: {
+							show: false,
+						},
+						axisTick: {
+							show: false,
+						},
+						axisLabel: {
+							show: true,
+							color: '#808080',
+							fontSize: 11,
+							formatter: function(value) {
+								// 保留两位小数，没有小数时显示00
+								return value
+							},
+						},
+						splitLine: {
+							show: false,
 						},
-					//设置提示为点击时
-					tooltip: {
-						trigger: 'axis',
-						triggerOn: 'click',
-						formatter: '{b}:  \n {a0}: {c0} \n {a1}: {c1}'
 					},
-					//设置曲线的颜色
-					color: ['#A9D2FF', '#B1A5FF'],
 					series: [{
-							name: "订单营收",
-							//这里是数据
-							data: res.yData1,
 						type: 'line',
-							//设置为平滑，默认为折线
+						smooth: 0.6,
-							smooth: false,
+						symbol: 'none',
+						lineStyle: {
+							color: '#E0DBFF',
+							width: 4,
 						},
-						{
+						areaStyle: {
-							name: "订单数",
+							normal: {
-							//这里是数据
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-							data: res.yData,
+									offset: 0,
+									color: '#ECE8FF'
+								}, ]),
+							}, 
+						},
+						data: that.chartData,
+					},{
 						type: 'line',
-							//设置为平滑，默认为折线
+						smooth: 0.6,
-							smooth: false,
+						symbol: 'none',
+						lineStyle: {
+							color: '#A9D2FF',
+							width: 4,
+						},
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: '#C3E0FF'
+								}, ]),
+							}, 
+						},
+						data: that.chartData,
+					}],
 				}
-					]
+				chart = echarts.init(canvas, null, {
-				}
+					width: width,
-				this.$refs.lineChart2.init(echarts, chart => {
+					height: height,
-					chart.setOption(option);
+					devicePixelRatio: canvasDpr
 				})
-			}
+				option.series[0].data = [2000,400,1000,800,5000,2000,6000,8000]
-
+				option.series[1].data = [104,205,350,510,250,630,720,801]
+				canvas.setChart(chart)
+				chart.setOption(option)
+				return chart
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
-	.page {
+	/deep/ .u-title{
-		// background: #fff;
+		padding-bottom: 20rpx;
+	}
+	/deep/ .u-icon__icon{
+		padding-bottom: 20rpx;
+	}
+    .imgbj{
+		width: 750rpx;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: -1;
+	}
+	.uni-ec-canvas {
+		width: 100%;
+		height: 320rpx;
+		display: block;
+		margin-top: 30rpx;
+	}
+	.btnxz {
+		padding: 0 20rpx;
+		box-sizing: border-box;
+		font-size: 28rpx;
+		font-family: Source Han Sans, Source Han Sans;
+		font-weight: 400;
+		color: #FFFFFF;
 	}
 
+	page {
+		background-color: #F7FAFE;
+	}
     .actives {
     	background: #fff !important;
     	box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.15) !important;
@@ -263,7 +381,7 @@
     
     .box {
     	width: 100%;
-		height: 80vh;
+    	height: 77vh;
     	overflow: scroll;
     }
     .shebei{
@@ -317,7 +435,7 @@
     				color: #3D3D3D; 
     				margin-top: 8rpx;
     				text{
-						color: #48893B;
+    					color: #48893B !important;
     				}
     			}
     		}
@@ -457,17 +575,19 @@
     		margin-top: 20rpx;
     		box-sizing: border-box;
     		justify-content: space-between;
-
+            padding:0 50rpx;
     		.one {
     			.top {
     				font-weight: 600;
     				font-size: 36rpx;
     				color: #48893B;
+					margin-bottom: 12rpx;
     			}
     
     			.bot {
     				font-size: 28rpx;
     				color: #7C7C7C;
+					margin-top: 12rpx;
     			}
     		}
     	}
@@ -479,12 +599,128 @@
     	}
     }
     
-	.imgbj {
+	.page {
-		width: 100%;
+		// padding: 0 59rpx;
-		height: 100vh;
+		.titles {
-		position: fixed;
+			padding-left: 32rpx;
-		top: 0;
+			font-size: 40rpx;
-		left: 0;
+			color: #fff;
-		z-index: -1;
+			margin-bottom: 30rpx;
+			padding-top: 104rpx;
+			height: 200rpx;
+			background-color: #48893B;
+			text {
+				padding-left: 33%;
+			}
+		}
+        .name{
+			font-size: 36rpx;
+			color: #3D3D3D;
+			margin-top: 20rpx;
+		}
+		.gongneng{
+			margin-top: 40rpx;
+			width: 632rpx;
+			height: 150rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
+			border-radius: 24rpx 24rpx 24rpx 24rpx;
+			display: flex;
+			justify-content: space-between;
+			padding: 26rpx 50rpx;
+			box-sizing: border-box;
+			image{
+				width: 96rpx;
+				height: 102rpx;
+			}
+		}
+		.title {
+			margin-top: 120rpx;
+			font-size: 48rpx;
+			font-weight: 400;
+			letter-spacing: 0rpx;
+            
+			color: rgba(38, 43, 55, 1);
+		}
+
+		.card {
+			padding-top: 32rpx;
+			margin-top: 10rpx;
+			width: 632rpx;
+			height: 540rpx;
+			background: #48893B;
+			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
+			opacity: 1;
+			border-radius: 40rpx;
+
+			.month {
+
+				margin-left: 22rpx;
+				font-size: 28rpx;
+				font-family: Source Han Sans, Source Han Sans;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+
+			.tit {
+				margin-top: 18rpx;
+				margin-left: 22rpx;
+				font-size: 20rpx;
+				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+				font-weight: 400;
+				color: #FFFFFF;
+
+			}
+
+			.txt {
+				margin-top: 2rpx;
+				margin-left: 22rpx;
+				font-size: 36rpx;
+				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+				font-weight: 700;
+				color: #FFFFFF;
+			}
+
+			.echarts {
+				margin-left: 22rpx;
+				margin-top: 60rpx;
+				width: 588rpx;
+				height: 320rpx;
+			}
+		}
+
+		.list {
+			margin-top: 16rpx;
+            height: 630rpx;
+			overflow: auto;
+			.card_list {
+				width: 632rpx;
+				height: 88rpx;
+				background: #FFFFFF;
+				opacity: 1;
+				border-radius: 30rpx;
+				display: flex;
+				flex-wrap: nowrap;
+				justify-content: space-between;
+				margin-top: 16rpx;
+				align-items: center;
+
+				.left {
+					margin-left: 52rpx;
+					font-size: 28rpx;
+					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+					font-weight: 400;
+					color: #808080;
+				}
+
+				.right {
+					margin-right: 20rpx;
+					font-size: 28rpx;
+					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+					font-weight: 400;
+					color: #808080;
+				}
+			}
+		}
 	}
 </style>

pages/myorder/index.vue

@@ -659,7 +659,7 @@
 						if (!isBooked) {
 							let timeshijian = this.timeshijian
 							let targetDate = new Date(timeshijian.replace(/-/g, '/'))
-							let currentDate = new Date();
+							let currentDate = new Date()
 							console.log(targetDate,currentDate,'020202');
 							if (targetDate < currentDate) {
 							  uni.showToast({
@@ -753,18 +753,18 @@
 					this.jstime = this.addOneHourToTimess(this.kstime)
 					this.price = this.tclist[0].deposit //订单金额
 					this.hourstime = Math.ceil(this.tclist[0].deposit / this.tclist[0].price) //订单时间
-					console.log(Math.ceil(this.tclist[0].deposit / this.tclist[0].price),'0000');
+					console.log(Math.ceil(this.tclist[0].deposit / this.tclist[0].price),'0000')
 				}
 			},
 			// 判断是否需要格式化
 			isValidDateFormatOnly(inputString) {
-			  const parts = inputString.split(/[\s/]/);
+			  const parts = inputString.split(/[\s/]/)
 			  return parts.length === 5 &&
 			    !isNaN(parts[0]) && parts[0].length === 4 && // 年份
 			    !isNaN(parts[1]) && parts[1].length === 2 && // 月份
 			    !isNaN(parts[2]) && parts[2].length === 2 && // 日期
 			    !isNaN(parts[3]) && parts[3].length === 2 && // 小时
-			    !isNaN(parts[4]) && parts[4].length === 2;   // 分钟
+			    !isNaN(parts[4]) && parts[4].length === 2   // 分钟
 			},
 			// 计算结束时间
 			addOneHourToTime(timeString, date = new Date()) {