报告页优化

sleep/components/mpvue-echarts/src/echarts.vue

@@ -48,7 +48,6 @@ export default {
 			query
 				.select(`#${canvasId}`)
 				.boundingClientRect(res => {
-				  console.log('width==', res.width)
 					if (!res) {
 						setTimeout(() => this.init(), 50);
 						return;

sleep/components/uni-calendar/calendar.js

@@ -0,0 +1,546 @@
+/**
+* @1900-2100区间内的公历、农历互转
+* @charset UTF-8
+* @github  https://github.com/jjonline/calendar.js
+* @Author  Jea杨(JJonline@JJonline.Cn)
+* @Time    2014-7-21
+* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
+* @Version 1.0.3
+* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+*/
+/* eslint-disable */
+var calendar = {
+
+  /**
+      * 农历1900-2100的润大小信息表
+      * @Array Of Property
+      * @return Hex
+      */
+  lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
+    0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
+    0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
+    0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
+    0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
+    0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
+    0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
+    0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
+    0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
+    0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
+    0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
+    0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
+    0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
+    0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
+    0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
+    /** Add By JJonline@JJonline.Cn**/
+    0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
+    0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
+    0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
+    0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
+    0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
+    0x0d520], // 2100
+
+  /**
+      * 公历每个月份的天数普通表
+      * @Array Of Property
+      * @return Number
+      */
+  solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+
+  /**
+      * 天干地支之天干速查表
+      * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+      * @return Cn string
+      */
+  Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
+
+  /**
+      * 天干地支之地支速查表
+      * @Array Of Property
+      * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+      * @return Cn string
+      */
+  Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
+
+  /**
+      * 天干地支之地支速查表<=>生肖
+      * @Array Of Property
+      * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+      * @return Cn string
+      */
+  Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
+
+  /**
+      * 24节气速查表
+      * @Array Of Property
+      * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+      * @return Cn string
+      */
+  solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
+
+  /**
+      * 1900-2100各年的24节气日期速查表
+      * @Array Of Property
+      * @return 0x string For splice
+      */
+  sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
+    '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
+    'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
+    '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
+    '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
+    '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
+    '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
+    '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+    '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
+    '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+    '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+    '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+    '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+    '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
+    '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+    '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+    '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+    '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
+    '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
+    '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
+    '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+    '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
+    '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
+    '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
+    '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+    '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
+    '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
+    '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
+    '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+    '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+    '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
+    '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
+
+  /**
+      * 数字转中文速查表
+      * @Array Of Property
+      * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+      * @return Cn string
+      */
+  nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
+
+  /**
+      * 日期转农历称呼速查表
+      * @Array Of Property
+      * @trans ['初','十','廿','卅']
+      * @return Cn string
+      */
+  nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
+
+  /**
+      * 月份转农历称呼速查表
+      * @Array Of Property
+      * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+      * @return Cn string
+      */
+  nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
+
+  /**
+      * 返回农历y年一整年的总天数
+      * @param lunar Year
+      * @return Number
+      * @eg:var count = calendar.lYearDays(1987) ;//count=387
+      */
+  lYearDays: function (y) {
+    var i; var sum = 348
+    for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
+    return (sum + this.leapDays(y))
+  },
+
+  /**
+      * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+      * @param lunar Year
+      * @return Number (0-12)
+      * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+      */
+  leapMonth: function (y) { // 闰字编码 \u95f0
+    return (this.lunarInfo[y - 1900] & 0xf)
+  },
+
+  /**
+      * 返回农历y年闰月的天数 若该年没有闰月则返回0
+      * @param lunar Year
+      * @return Number (0、29、30)
+      * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+      */
+  leapDays: function (y) {
+    if (this.leapMonth(y)) {
+      return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
+    }
+    return (0)
+  },
+
+  /**
+      * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+      * @param lunar Year
+      * @return Number (-1、29、30)
+      * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+      */
+  monthDays: function (y, m) {
+    if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
+    return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
+  },
+
+  /**
+      * 返回公历(!)y年m月的天数
+      * @param solar Year
+      * @return Number (-1、28、29、30、31)
+      * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+      */
+  solarDays: function (y, m) {
+    if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+    var ms = m - 1
+    if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
+      return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
+    } else {
+      return (this.solarMonth[ms])
+    }
+  },
+
+  /**
+     * 农历年份转换为干支纪年
+     * @param  lYear 农历年的年份数
+     * @return Cn string
+     */
+  toGanZhiYear: function (lYear) {
+    var ganKey = (lYear - 3) % 10
+    var zhiKey = (lYear - 3) % 12
+    if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
+    if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
+    return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
+  },
+
+  /**
+     * 公历月、日判断所属星座
+     * @param  cMonth [description]
+     * @param  cDay [description]
+     * @return Cn string
+     */
+  toAstro: function (cMonth, cDay) {
+    var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
+    var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
+    return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
+  },
+
+  /**
+      * 传入offset偏移量返回干支
+      * @param offset 相对甲子的偏移量
+      * @return Cn string
+      */
+  toGanZhi: function (offset) {
+    return this.Gan[offset % 10] + this.Zhi[offset % 12]
+  },
+
+  /**
+      * 传入公历(!)y年获得该年第n个节气的公历日期
+      * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+      * @return day Number
+      * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+      */
+  getTerm: function (y, n) {
+    if (y < 1900 || y > 2100) { return -1 }
+    if (n < 1 || n > 24) { return -1 }
+    var _table = this.sTermInfo[y - 1900]
+    var _info = [
+      parseInt('0x' + _table.substr(0, 5)).toString(),
+      parseInt('0x' + _table.substr(5, 5)).toString(),
+      parseInt('0x' + _table.substr(10, 5)).toString(),
+      parseInt('0x' + _table.substr(15, 5)).toString(),
+      parseInt('0x' + _table.substr(20, 5)).toString(),
+      parseInt('0x' + _table.substr(25, 5)).toString()
+    ]
+    var _calday = [
+      _info[0].substr(0, 1),
+      _info[0].substr(1, 2),
+      _info[0].substr(3, 1),
+      _info[0].substr(4, 2),
+
+      _info[1].substr(0, 1),
+      _info[1].substr(1, 2),
+      _info[1].substr(3, 1),
+      _info[1].substr(4, 2),
+
+      _info[2].substr(0, 1),
+      _info[2].substr(1, 2),
+      _info[2].substr(3, 1),
+      _info[2].substr(4, 2),
+
+      _info[3].substr(0, 1),
+      _info[3].substr(1, 2),
+      _info[3].substr(3, 1),
+      _info[3].substr(4, 2),
+
+      _info[4].substr(0, 1),
+      _info[4].substr(1, 2),
+      _info[4].substr(3, 1),
+      _info[4].substr(4, 2),
+
+      _info[5].substr(0, 1),
+      _info[5].substr(1, 2),
+      _info[5].substr(3, 1),
+      _info[5].substr(4, 2)
+    ]
+    return parseInt(_calday[n - 1])
+  },
+
+  /**
+      * 传入农历数字月份返回汉语通俗表示法
+      * @param lunar month
+      * @return Cn string
+      * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+      */
+  toChinaMonth: function (m) { // 月 => \u6708
+    if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+    var s = this.nStr3[m - 1]
+    s += '\u6708'// 加上月字
+    return s
+  },
+
+  /**
+      * 传入农历日期数字返回汉字表示法
+      * @param lunar day
+      * @return Cn string
+      * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+      */
+  toChinaDay: function (d) { // 日 => \u65e5
+    var s
+    switch (d) {
+      case 10:
+        s = '\u521d\u5341'; break
+      case 20:
+        s = '\u4e8c\u5341'; break
+        break
+      case 30:
+        s = '\u4e09\u5341'; break
+        break
+      default :
+        s = this.nStr2[Math.floor(d / 10)]
+        s += this.nStr1[d % 10]
+    }
+    return (s)
+  },
+
+  /**
+      * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+      * @param y year
+      * @return Cn string
+      * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+      */
+  getAnimal: function (y) {
+    return this.Animals[(y - 4) % 12]
+  },
+
+  /**
+      * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+      * @param y  solar year
+      * @param m  solar month
+      * @param d  solar day
+      * @return JSON object
+      * @eg:console.log(calendar.solar2lunar(1987,11,01));
+      */
+  solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
+    // 年份限定、上限
+    if (y < 1900 || y > 2100) {
+      return -1// undefined转换为数字变为NaN
+    }
+    // 公历传参最下限
+    if (y == 1900 && m == 1 && d < 31) {
+      return -1
+    }
+    // 未传参  获得当天
+    if (!y) {
+      var objDate = new Date()
+    } else {
+      var objDate = new Date(y, parseInt(m) - 1, d)
+    }
+    var i; var leap = 0; var temp = 0
+    // 修正ymd参数
+    var y = objDate.getFullYear()
+    var m = objDate.getMonth() + 1
+    var d = objDate.getDate()
+    var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
+    for (i = 1900; i < 2101 && offset > 0; i++) {
+      temp = this.lYearDays(i)
+      offset -= temp
+    }
+    if (offset < 0) {
+      offset += temp; i--
+    }
+
+    // 是否今天
+    var isTodayObj = new Date()
+    var isToday = false
+    if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
+      isToday = true
+    }
+    // 星期几
+    var nWeek = objDate.getDay()
+    var cWeek = this.nStr1[nWeek]
+    // 数字表示周几顺应天朝周一开始的惯例
+    if (nWeek == 0) {
+      nWeek = 7
+    }
+    // 农历年
+    var year = i
+    var leap = this.leapMonth(i) // 闰哪个月
+    var isLeap = false
+
+    // 效验闰月
+    for (i = 1; i < 13 && offset > 0; i++) {
+      // 闰月
+      if (leap > 0 && i == (leap + 1) && isLeap == false) {
+        --i
+        isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
+      } else {
+        temp = this.monthDays(year, i)// 计算农历普通月天数
+      }
+      // 解除闰月
+      if (isLeap == true && i == (leap + 1)) { isLeap = false }
+      offset -= temp
+    }
+    // 闰月导致数组下标重叠取反
+    if (offset == 0 && leap > 0 && i == leap + 1) {
+      if (isLeap) {
+        isLeap = false
+      } else {
+        isLeap = true; --i
+      }
+    }
+    if (offset < 0) {
+      offset += temp; --i
+    }
+    // 农历月
+    var month = i
+    // 农历日
+    var day = offset + 1
+    // 天干地支处理
+    var sm = m - 1
+    var gzY = this.toGanZhiYear(year)
+
+    // 当月的两个节气
+    // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
+    var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
+    var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
+
+    // 依据12节气修正干支月
+    var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
+    if (d >= firstNode) {
+      gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
+    }
+
+    // 传入的日期的节气与否
+    var isTerm = false
+    var Term = null
+    if (firstNode == d) {
+      isTerm = true
+      Term = this.solarTerm[m * 2 - 2]
+    }
+    if (secondNode == d) {
+      isTerm = true
+      Term = this.solarTerm[m * 2 - 1]
+    }
+    // 日柱 当月一日与 1900/1/1 相差天数
+    var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
+    var gzD = this.toGanZhi(dayCyclical + d - 1)
+    // 该日期所属的星座
+    var astro = this.toAstro(m, d)
+
+    return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
+  },
+
+  /**
+      * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+      * @param y  lunar year
+      * @param m  lunar month
+      * @param d  lunar day
+      * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+      * @return JSON object
+      * @eg:console.log(calendar.lunar2solar(1987,9,10));
+      */
+  lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
+    var isLeapMonth = !!isLeapMonth
+    var leapOffset = 0
+    var leapMonth = this.leapMonth(y)
+    var leapDay = this.leapDays(y)
+    if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+    if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
+    var day = this.monthDays(y, m)
+    var _day = day
+    // bugFix 2016-9-25
+    // if month is leap, _day use leapDays method
+    if (isLeapMonth) {
+      _day = this.leapDays(y, m)
+    }
+    if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
+
+    // 计算农历的时间差
+    var offset = 0
+    for (var i = 1900; i < y; i++) {
+      offset += this.lYearDays(i)
+    }
+    var leap = 0; var isAdd = false
+    for (var i = 1; i < m; i++) {
+      leap = this.leapMonth(y)
+      if (!isAdd) { // 处理闰月
+        if (leap <= i && leap > 0) {
+          offset += this.leapDays(y); isAdd = true
+        }
+      }
+      offset += this.monthDays(y, i)
+    }
+    // 转换闰月农历 需补充该年闰月的前一个月的时差
+    if (isLeapMonth) { offset += day }
+    // 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+    var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
+    var calObj = new Date((offset + d - 31) * 86400000 + stmap)
+    var cY = calObj.getUTCFullYear()
+    var cM = calObj.getUTCMonth() + 1
+    var cD = calObj.getUTCDate()
+
+    return this.solar2lunar(cY, cM, cD)
+  }
+}
+
+export default calendar

sleep/components/uni-calendar/uni-calendar-item.vue

@@ -0,0 +1,152 @@
+<template>
+	<view class="uni-calendar-item__weeks-box" :class="{
+		'uni-calendar-item--disable':weeks.disable,
+		'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+		'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
+		'uni-calendar-item--multiple': weeks.multiple
+		}"
+	 @click="choiceDate(weeks)">
+		<view class="uni-calendar-item__weeks-box-item">
+			<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
+			<text class="uni-calendar-item__weeks-box-text" :class="{
+				'uni-calendar-item--isDay-text': weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.date}}</text>
+			<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--multiple': weeks.multiple,
+				}">今天</text>
+			<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
+			<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
+				'uni-calendar-item--extra':weeks.extraInfo.info,
+				'uni-calendar-item--isDay-text':weeks.isDay,
+				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+				'uni-calendar-item--multiple': weeks.multiple,
+				'uni-calendar-item--disable':weeks.disable,
+				}">{{weeks.extraInfo.info}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			weeks: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			calendar: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			selected: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			lunar: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			choiceDate(weeks) {
+				this.$emit('change', weeks)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-calendar-item__weeks-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-calendar-item__weeks-box-text {
+		font-size: $uni-font-size-base;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar-item__weeks-lunar-text {
+		font-size: $uni-font-size-sm;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar-item__weeks-box-item {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100rpx;
+		height: 100rpx;
+	}
+
+	.uni-calendar-item__weeks-box-circle {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 8px;
+		height: 8px;
+		border-radius: 8px;
+		background-color: $uni-color-error;
+
+	}
+
+	.uni-calendar-item--disable {
+		background-color: rgba(249, 249, 249, $uni-opacity-disabled);
+		color: $uni-text-color-disable;
+	}
+
+	.uni-calendar-item--isDay-text {
+		color: $uni-color-primary;
+	}
+
+	.uni-calendar-item--isDay {
+		background-color: $uni-color-primary;
+		opacity: 0.8;
+		color: #fff;
+	}
+
+	.uni-calendar-item--extra {
+		color: $uni-color-error;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item--checked {
+		background-color: $uni-color-primary;
+		color: #fff;
+		opacity: 0.8;
+	}
+
+	.uni-calendar-item--multiple {
+		background-color: $uni-color-primary;
+		color: #fff;
+		opacity: 0.8;
+	}
+</style>

sleep/components/uni-calendar/uni-calendar.vue

@@ -0,0 +1,441 @@
+<template>
+	<view class="uni-calendar" @touchmove.stop.prevent="clean">
+		<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
+		<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
+			<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
+				<view class="uni-calendar__header-btn-box" @click="close">
+					<text class="uni-calendar__header-text uni-calendar--fixed-width">取消</text>
+				</view>
+				<view class="uni-calendar__header-btn-box" @click="confirm">
+					<text class="uni-calendar__header-text uni-calendar--fixed-width">确定</text>
+				</view>
+			</view>
+			<view class="uni-calendar__header">
+				<view class="uni-calendar__header-btn-box" @click="pre">
+					<view class="uni-calendar__header-btn uni-calendar--left"></view>
+				</view>
+				<text class="uni-calendar__header-text">{{ (nowDate.year||'') +'年'+( nowDate.month||'') +'月'}}</text>
+				<view class="uni-calendar__header-btn-box" @click="next">
+					<view class="uni-calendar__header-btn uni-calendar--right"></view>
+				</view>
+				<text class="uni-calendar__backtoday" @click="backtoday">{{returnName}}</text>
+			</view>
+			<view class="uni-calendar__box">
+				<view v-if="showMonth" class="uni-calendar__box-bg">
+					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
+				</view>
+				<view class="uni-calendar__weeks">
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">日</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">一</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">二</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">三</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">四</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">五</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">六</text>
+					</view>
+				</view>
+				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+					<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+						<uni-calendar-item :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></uni-calendar-item>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import Calendar from './util.js';
+	import uniCalendarItem from './uni-calendar-item.vue'
+	export default {
+		components: {
+			uniCalendarItem
+		},
+		props: {
+			/**
+			 * 当前日期
+			 */
+			date: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 打点日期
+			 */
+			selected: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			/**
+			 * 是否开启阴历日期
+			 */
+			lunar: {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 开始时间
+			 */
+			startDate: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 结束时间
+			 */
+			endDate: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 范围
+			 */
+			range: {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 插入
+			 */
+			insert: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 是否显示月份背景
+			 */
+			showMonth: {
+				type: Boolean,
+				default: true
+			},
+      /**
+       * 回到今天按钮名称
+       */
+      returnName: {
+        type: String,
+        default: '回到今天'
+      },
+		},
+		data() {
+			return {
+				show: false,
+				weeks: [],
+				calendar: {},
+				nowDate: '',
+				aniMaskShow: false
+			}
+		},
+		watch: {
+			selected(newVal) {
+				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
+				this.weeks = this.cale.weeks
+			}
+		},
+		created() {
+			// 获取日历方法实例
+			this.cale = new Calendar({
+				date: this.date,
+				selected: this.selected,
+				startDate: this.startDate,
+				endDate: this.endDate,
+				range: this.range,
+			})
+			this.init(this.cale.date.fullDate)
+		},
+		methods: {
+			// 取消穿透
+			clean() {},
+			init(date) {
+				this.weeks = this.cale.weeks
+				this.nowDate = this.calendar = this.cale.getInfo(date)
+			},
+			open() {
+				this.show = true
+				this.$nextTick(() => {
+					setTimeout(()=>{
+						this.aniMaskShow = true
+					},50)
+				})
+			},
+			close() {
+				this.aniMaskShow = false
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.show = false
+					}, 300)
+				})
+			},
+			confirm() {
+				this.setEmit('confirm')
+				this.close()
+			},
+			change() {
+				if (!this.insert) return
+				this.setEmit('change')
+			},
+			monthSwitch() {
+				let {
+					year,
+					month
+				} = this.nowDate
+				this.$emit('monthSwitch', {
+					year,
+					month: Number(month)
+				})
+			},
+			setEmit(name) {
+				let {
+					year,
+					month,
+					date,
+					fullDate,
+					lunar,
+					extraInfo
+				} = this.calendar
+				this.$emit(name, {
+					range: this.cale.multipleStatus,
+					year,
+					month,
+					date,
+					fulldate: fullDate,
+					lunar,
+					extraInfo: extraInfo || {}
+				})
+			},
+			choiceDate(weeks) {
+				if (weeks.disable) return
+				this.calendar = weeks
+				// 设置多选
+				this.cale.setMultiple(this.calendar.fullDate)
+				this.weeks = this.cale.weeks
+				this.change()
+			},
+			backtoday() {
+				this.cale.setDate(this.date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.calendar = this.cale.getInfo(this.date)
+				this.change()
+			},
+			pre() {
+				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
+				this.setDate(preDate)
+				this.monthSwitch()
+
+			},
+			next() {
+				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
+				this.setDate(nextDate)
+				this.monthSwitch()
+			},
+			setDate(date) {
+				this.cale.setDate(date)
+				this.weeks = this.cale.weeks
+				this.nowDate = this.cale.getInfo(date)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-calendar {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-calendar__mask {
+		position: fixed;
+		bottom: 0;
+		top: 0;
+		left: 0;
+		right: 0;
+		background-color: $uni-bg-color-mask;
+		transition-property: opacity;
+		transition-duration: 0.3s;
+		opacity: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--mask-show {
+		opacity: 1
+	}
+
+	.uni-calendar--fixed {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transform: translateY(460px);
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-calendar--ani-show {
+		transform: translateY(0);
+	}
+
+	.uni-calendar__content {
+		background-color: #fff;
+	}
+
+	.uni-calendar__header {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 50px;
+		border-bottom-color: $uni-border-color;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+
+	.uni-calendar--fixed-top {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		border-top-color: $uni-border-color;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-calendar--fixed-width {
+		width: 50px;
+		// padding: 0 15px;
+	}
+
+	.uni-calendar__backtoday {
+		position: absolute;
+		right: 0;
+		top: 25rpx;
+		padding: 0 5px;
+		padding-left: 10px;
+		height: 25px;
+		line-height: 25px;
+		font-size: 12px;
+		border-top-left-radius: 25px;
+		border-bottom-left-radius: 25px;
+		color: $uni-text-color;
+		background-color: $uni-bg-color-hover;
+	}
+
+	.uni-calendar__header-text {
+		text-align: center;
+		width: 100px;
+		font-size: $uni-font-size-base;
+		color: $uni-text-color;
+	}
+
+	.uni-calendar__header-btn-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 50px;
+		height: 50px;
+	}
+
+	.uni-calendar__header-btn {
+		width: 10px;
+		height: 10px;
+		border-left-color: $uni-text-color-placeholder;
+		border-left-style: solid;
+		border-left-width: 2px;
+		border-top-color: $uni-color-subtitle;
+		border-top-style: solid;
+		border-top-width: 2px;
+	}
+
+	.uni-calendar--left {
+		transform: rotate(-45deg);
+	}
+
+	.uni-calendar--right {
+		transform: rotate(135deg);
+	}
+
+
+	.uni-calendar__weeks {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-calendar__weeks-item {
+		flex: 1;
+	}
+
+	.uni-calendar__weeks-day {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 45px;
+		border-bottom-color: #F5F5F5;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+	}
+	.uni-calendar__weeks-day-text {
+		font-size: 14px;
+	}
+
+	.uni-calendar__box {
+		position: relative;
+	}
+
+	.uni-calendar__box-bg {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.uni-calendar__box-bg-text {
+		font-size: 200px;
+		font-weight: bold;
+		color: $uni-text-color-grey;
+		opacity: 0.1;
+		text-align: center;
+		/* #ifndef APP-NVUE */
+		line-height: 1;
+		/* #endif */
+	}
+</style>

sleep/components/uni-calendar/util.js

@@ -0,0 +1,327 @@
+import CALENDAR from './calendar.js'
+
+class Calendar {
+	constructor({
+		date,
+		selected,
+		startDate,
+		endDate,
+		range
+	} = {}) {
+		// 当前日期
+		this.date = this.getDate(date) // 当前初入日期
+		// 打点信息
+		this.selected = selected || [];
+		// 范围开始
+		this.startDate = startDate
+		// 范围结束
+		this.endDate = endDate
+		this.range = range
+		// 多选状态
+		this.multipleStatus = {
+			before: '',
+			after: '',
+			data: []
+		}
+		// 每周日期
+		this.weeks = {}
+
+		this._getWeek(this.date.fullDate)
+	}
+
+	/**
+	 * 获取任意时间
+	 */
+	getDate(date, AddDayCount = 0, str = 'day') {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+		switch (str) {
+			case 'day':
+				dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+			case 'month':
+				if (dd.getDate() === 31) {
+					dd.setDate(dd.getDate() + AddDayCount)
+				} else {
+					dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
+				}
+				break
+			case 'year':
+				dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
+				break
+		}
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
+
+
+	/**
+	 * 获取上月剩余天数
+	 */
+	_getLastMonthDays(firstDay, full) {
+		let dateArr = []
+		for (let i = firstDay; i > 0; i--) {
+			const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
+			dateArr.push({
+				date: beforeDate,
+				month: full.month - 1,
+				lunar: this.getlunar(full.year, full.month - 1, beforeDate),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+	/**
+	 * 获取本月天数
+	 */
+	_currentMonthDys(dateData, full) {
+		let dateArr = []
+		let fullDate = this.date.fullDate
+		for (let i = 1; i <= dateData; i++) {
+			let isinfo = false
+			let nowDate = full.year + '-' + (full.month < 10 ?
+				full.month : full.month) + '-' + (i < 10 ?
+				'0' + i : i)
+			// 是否今天
+			let isDay = fullDate === nowDate
+			// 获取打点信息
+			let info = this.selected && this.selected.find((item) => {
+				if (this.dateEqual(nowDate, item.date)) {
+					return item
+				}
+			})
+
+			// 日期禁用
+			let disableBefore = true
+			let disableAfter = true
+			if (this.startDate) {
+				let dateCompBefore = this.dateCompare(this.startDate, fullDate)
+				disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
+			}
+
+			if (this.endDate) {
+				let dateCompAfter = this.dateCompare(fullDate, this.endDate)
+				disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
+			}
+
+			let multiples = this.multipleStatus.data
+			let checked = false
+			let multiplesStatus = -1
+			if (this.range) {
+				if (multiples) {
+					multiplesStatus = multiples.findIndex((item) => {
+						return this.dateEqual(item, nowDate)
+					})
+				}
+				if (multiplesStatus !== -1) {
+					checked = true
+				}
+			}
+
+			let data = {
+				fullDate: nowDate,
+				year: full.year,
+				date: i,
+				multiple: this.range ? checked : false,
+				month: full.month,
+				lunar: this.getlunar(full.year, full.month, i),
+				disable: !disableBefore || !disableAfter,
+				isDay
+			}
+			if (info) {
+				data.extraInfo = info
+			}
+
+			dateArr.push(data)
+		}
+		return dateArr
+	}
+	/**
+	 * 获取下月天数
+	 */
+	_getNextMonthDays(surplus, full) {
+		let dateArr = []
+		for (let i = 1; i < surplus + 1; i++) {
+			dateArr.push({
+				date: i,
+				month: Number(full.month) + 1,
+				lunar: this.getlunar(full.year, Number(full.month) + 1, i),
+				disable: true
+			})
+		}
+		return dateArr
+	}
+	/**
+	 * 设置日期
+	 * @param {Object} date
+	 */
+	setDate(date) {
+		this._getWeek(date)
+	}
+	/**
+	 * 获取当前日期详情
+	 * @param {Object} date
+	 */
+	getInfo(date) {
+		if (!date) {
+			date = new Date()
+		}
+		const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
+		return dateInfo
+	}
+
+	/**
+	 * 比较时间大小
+	 */
+	dateCompare(startDate, endDate) {
+		// 计算截止时间
+		startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+		if (startDate <= endDate) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+	/**
+	 * 比较时间是否相等
+	 */
+	dateEqual(before, after) {
+		// 计算截止时间
+		before = new Date(before.replace('-', '/').replace('-', '/'))
+		// 计算详细项的截止时间
+		after = new Date(after.replace('-', '/').replace('-', '/'))
+		if (before.getTime() - after.getTime() === 0) {
+			return true
+		} else {
+			return false
+		}
+	}
+
+
+	/**
+	 * 获取日期范围内所有日期
+	 * @param {Object} begin
+	 * @param {Object} end
+	 */
+	geDateAll(begin, end) {
+		var arr = []
+		var ab = begin.split('-')
+		var ae = end.split('-')
+		var db = new Date()
+		db.setFullYear(ab[0], ab[1] - 1, ab[2])
+		var de = new Date()
+		de.setFullYear(ae[0], ae[1] - 1, ae[2])
+		var unixDb = db.getTime() - 24 * 60 * 60 * 1000
+		var unixDe = de.getTime() - 24 * 60 * 60 * 1000
+		for (var k = unixDb; k <= unixDe;) {
+			k = k + 24 * 60 * 60 * 1000
+			arr.push(this.getDate(new Date(parseInt(k))).fullDate)
+		}
+		return arr
+	}
+	/**
+	 * 计算阴历日期显示
+	 */
+	getlunar(year, month, date) {
+		return CALENDAR.solar2lunar(year, month, date)
+	}
+	/**
+	 * 设置打点
+	 */
+	setSelectInfo(data, value) {
+		this.selected = value
+		this._getWeek(data)
+	}
+
+	/**
+	 *  获取多选状态
+	 */
+	setMultiple(fullDate) {
+		let {
+			before,
+			after
+		} = this.multipleStatus
+		if (!this.range) return
+		if (before && after) {
+			this.multipleStatus.before = ''
+			this.multipleStatus.after = ''
+			this.multipleStatus.data = []
+			this._getWeek(fullDate)
+		} else {
+			if (!before) {
+				this.multipleStatus.before = fullDate
+			} else {
+				this.multipleStatus.after = fullDate
+				if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
+				} else {
+					this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
+				}
+				this._getWeek(fullDate)
+			}
+		}
+	}
+
+	/**
+	 * 获取每周数据
+	 * @param {Object} dateData
+	 */
+	_getWeek(dateData) {
+		const {
+			fullDate,
+			year,
+			month,
+			date,
+			day
+		} = this.getDate(dateData)
+		let firstDay = new Date(year, month - 1, 1).getDay()
+		let currentDay = new Date(year, month, 0).getDate()
+		let dates = {
+			lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
+			currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
+			nextMonthDays: [], // 下个月开始几天
+			weeks: []
+		}
+		let canlender = []
+		const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
+		dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
+		canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
+		let weeks = {}
+		// 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
+		for (let i = 0; i < canlender.length; i++) {
+			if (i % 7 === 0) {
+				weeks[parseInt(i / 7)] = new Array(7)
+			}
+			weeks[parseInt(i / 7)][i % 7] = canlender[i]
+		}
+		this.canlender = canlender
+		this.weeks = weeks
+	}
+
+	//静态方法
+	// static init(date) {
+	// 	if (!this.instance) {
+	// 		this.instance = new Calendar(date);
+	// 	}
+	// 	return this.instance;
+	// }
+}
+
+
+export default Calendar

sleep/pages/home/index.vue

@@ -371,8 +371,8 @@ export default {
           if (Date.parse(new Date()) - _this.lastMsgTime > 5000) { // 5秒没有收到新消息，则判断为离线
             _this.homeFrom.status = '离线'
             _this.sleepStatus = '离线'
-            _this.pjxl = '-'
-            _this.pjhx = '-'
+            _this.pjxl = '--'
+            _this.pjhx = '--'
           }
           _this.mySocketTask.send({data: 'ping'})
         }, 30000) // 30秒的心跳包
@@ -544,7 +544,6 @@ export default {
         }
       }
       this.myChart1.setOption(this.options1)
-      this.myChart1.setOption(this.options1)
     },
     getValue2(value) {
       // console.log("呼吸值是", value)
@@ -567,7 +566,6 @@ export default {
         }
       }
       this.myChart2.setOption(this.options2)
-      this.myChart2.setOption(this.options2)
     },
 		handleAlertSetting() {
 			uni.navigateTo({
@@ -602,7 +600,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../colorui/animation.css";
 .echarts-wrap {
   width: 100%;
   height: 150px;

sleep/pages/report/report.vue

@@ -2,11 +2,6 @@
 	<view class="report-container">
 
 		<cu-custom bgColor="#000000"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>
-		<time-slot
-		    ref="timeslot"
-		    :title="'选择时间段'"
-		    @confirm="confirmTime">
-		</time-slot>
 
 		<view v-if="!isDeviceAdded" class="flex-col page">
 		  <view class="flex-col flex-auto image-wrapper_2">
@@ -34,13 +29,14 @@
 					<view class="flex-col report_score space-y-55">
 						<view class="flex-row space-x-10 report_period">
 							<view class="flex-row justify-between flex-auto section_3">
-								<view class="flex-row items-center space-x-24">
+								<view class="flex-row items-center space-x-24" @click="calendarShow=true">
 									<image class="shrink-0 image_4"
 										src="../../static/report/reportIconLeft.png"
 									/>
-									<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
-										<text class="font_2 text_2">{{date}}</text>
-									</picker>
+<!--									<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">-->
+<!--										<text class="font_2 text_2">{{date}}</text>-->
+<!--									</picker>-->
+                  <text class="margin-right text-white">{{ selectDay }}</text>
 
 									<image class="image_4"
 										src="../../static/report/reportIconRight.png"
@@ -48,27 +44,33 @@
 								</view>
 							</view>
 
-							<view @click="handleTimeChoose" class="flex-row items-center shrink-0 section_4 space-x-10">
-								<text class="font_2 text_3">23:30～05:42</text>
+							<view class="flex-row items-center shrink-0 section_4 space-x-10">
+<!--								<text class="font_2 text_3">23:30～05:42</text>-->
+                <picker v-if="todayTimeList.length > 0" @change="PickerChange" :value="index" :range="todayTimeList">
+                  <view class="picker text-white">
+                    {{ todayTimeList[index] }}
+                  </view>
+                </picker>
 								<image
 									class="shrink-0 image_5"
 									src="../../static/report/reportIconTop.png"
 								/>
+
 							</view>
 						</view>
 
 						<view class="flex-col report_score_data items-center">
 							<view class="flex-row justify-between items-center space-x-76-reverse">
-								<text class="text_4">极好</text>
-							</view>
-							<view class="flex-row items-center self-end section_5 space-x-8">
-								<image
-									class="shrink-0 image_6"
-									src="../../static/report/reportIconPower.png"
-								/>
-								<text class="font_2 text_5">+25</text>
+								<text class="text_4">{{ sleepReportFrom.report_content.score.desc }}</text>
 							</view>
-							<text class="self-center text_6">98</text>
+<!--							<view class="flex-row items-center self-end section_5 space-x-8">-->
+<!--								<image-->
+<!--									class="shrink-0 image_6"-->
+<!--									src="../../static/report/reportIconPower.png"-->
+<!--								/>-->
+<!--								<text class="font_2 text_5">+25</text>-->
+<!--							</view>-->
+							<text class="self-center text_6">{{ sleepReportFrom.report_content.score.value }}</text>
 							<text class="self-center font_2 text_7">香睡指数</text>
 						</view>
 
@@ -81,10 +83,7 @@
 								<view class="flex-col items-center text-data-sum">
 									<view class="title-data-sum">睡眠总时长</view>
 									<view class="flex-row justify-evenly items-baseline group_5">
-										<text class="font_4">6</text>
-										<text class="font_5">小时</text>
-										<text class="font_4">12</text>
-										<text class="font_5">分钟</text>
+										<text class="font_5">{{ formateSeconds(sleepReportFrom.total_duration) }}</text>
 									</view>
 								</view>
 							</view>
@@ -97,7 +96,7 @@
 								<view class="flex-col items-center text-data-sum">
 									<view class="title-data-sum">睡眠时间</view>
 									<view class="flex-row justify-evenly items-baseline group_5">
-										<text class="font_5">23:30～05:42</text>
+										<text class="font_5">{{ sleepReportFrom.gobed_time + '~' + sleepReportFrom.outbed_time }}</text>
 									</view>
 								</view>
 							</view>
@@ -113,7 +112,7 @@
 
 						<view class="flex-row equal-division space-x-29 pos">
 							<view class="flex-col equal-division-item">
-								<view class="flex-col section_6 space-y-12">
+								<view class="flex-col section_6 space-y-12 bg-gradual-blue">
 									<view class="flex-row space-x-10">
 										<image
 											class="image_7"
@@ -121,7 +120,7 @@
 										/>
 										<text class="font_3">上床时间</text>
 									</view>
-									<text class="self-start font_4 text_9">23:30</text>
+									<text class="self-start font_4 text_9">{{ sleepReportFrom.gobed_time }}</text>
 								</view>
 								<view class="flex-col section_6 view space-y-12">
 									<view class="flex-row items-center space-x-12">
@@ -129,13 +128,25 @@
 											class="image_7"
 											src="../../static/report/reportIconYellow.png"
 										/>
-										<text class="font_3">体动次数</text>
+										<text class="font_3">深睡时长</text>
 									</view>
 									<view class="flex-row items-baseline group_6 space-x-6">
-										<text class="font_4">73</text>
-										<text class="font_5">次</text>
+										<text class="font_4">{{ formateSeconds(sleepReportFrom.deep_duration) }}</text>
 									</view>
 								</view>
+                <view class="flex-col section_6 view space-y-12">
+                  <view class="flex-row items-center space-x-12">
+                    <image
+                        class="image_7"
+                        src="../../static/report/reportIconYellow.png"
+                    />
+                    <text class="font_3">平均呼吸率</text>
+                  </view>
+                  <view class="flex-row items-baseline group_6 space-x-6">
+                    <text class="font_4">{{ sleepReportFrom.report_content.avg_hx.value }}</text>
+                    <text class="font_5">次/分</text>
+                  </view>
+                </view>
 								<view class="flex-col items-left group_7 space-x-10">
 									<view>
 										<image
@@ -150,6 +161,7 @@
 							</view>
 
 							<view class="flex-col equal-division-item_2 space-y-10">
+
 								<view class="flex-col section_7 space-y-12">
 									<view class="flex-row space-x-10">
 										<image
@@ -159,27 +171,63 @@
 										<text class="font_3">在床时间</text>
 									</view>
 									<view class="flex-row justify-evenly items-baseline group_5">
-										<text class="font_4">6</text>
-										<text class="font_5">小时</text>
-										<text class="font_4">12</text>
-										<text class="font_5">分钟</text>
+										<text class="font_4">{{ formateSeconds(sleepReportFrom.inbed_duration) }}</text>
 									</view>
 								</view>
 
+                <view class="flex-col section_7 space-y-12">
+                  <view class="flex-row space-x-10">
+                    <image
+                        class="image_7"
+                        src="../../static/report/reportIconGreen.png"
+                    />
+                    <text class="font_3">睡眠效率</text>
+                  </view>
+                  <view class="flex-row justify-evenly items-baseline group_5">
+                    <text class="font_4">{{ sleepReportFrom.report_content.sleep_eff.value }}</text>
+                  </view>
+                </view>
+
 								<view class="flex-col section_7 space-y-12">
 									<view class="flex-row space-x-10">
 										<image
 											class="image_7"
 											src="../../static/report/reportIconGreen.png"
 										/>
-										<text class="font_3">平均呼吸率</text>
+										<text class="font_3">平均心率</text>
 									</view>
 									<view class="flex-row items-baseline group_6 space-x-4">
-										<text class="font_4">14</text>
+										<text class="font_4">{{ sleepReportFrom.report_content.avg_rh.value }}</text>
 										<text class="font_5">次/分</text>
 									</view>
 								</view>
 
+                <view class="flex-row shrink-0 justify-between section_8 space-x-34">
+                  <view class="flex-row items-center space-x-8">
+                    <image
+                        class="shrink-0 image_7"
+                        src="../../static/report/reportIconGreen.png"
+                    />
+                    <text class="font_3">体动次数</text>
+                  </view>
+                  <view class="flex-row items-baseline space-x-6">
+                    <text class="font_4">{{ sleepReportFrom.report_content.move_count.value }}</text>
+                    <text class="font_5">次</text>
+                  </view>
+                </view>
+                <view class="flex-row shrink-0 justify-between section_8 space-x-34">
+                  <view class="flex-row items-center space-x-8">
+                    <image
+                        class="shrink-0 image_7"
+                        src="../../static/report/reportIconGreen.png"
+                    />
+                    <text class="font_3">离床次数</text>
+                  </view>
+                  <view class="flex-row items-baseline space-x-6">
+                    <text class="font_4">{{ sleepReportFrom.report_content.outbed_count.value }}</text>
+                    <text class="font_5">次</text>
+                  </view>
+                </view>
 								<view class="flex-row justify-between section_8">
 									<view class="flex-row items-center space-x-8">
 										<image
@@ -189,24 +237,12 @@
 										<text class="font_3">打鼾次数</text>
 									</view>
 									<view class="flex-row items-baseline space-x-6">
-										<text class="font_4">0</text>
+										<text class="font_4">{{ sleepReportFrom.report_content.snoring_count.value }}</text>
 										<text class="font_5">次</text>
 									</view>
 								</view>
 
-								<view class="flex-row shrink-0 justify-between section_8 space-x-34">
-									<view class="flex-row items-center space-x-8">
-										<image
-											class="shrink-0 image_7"
-											src="../../static/report/reportIconGreen.png"
-										/>
-										<text class="font_3">离床次数</text>
-									</view>
-									<view class="flex-row items-baseline space-x-6">
-										<text class="font_4">0</text>
-										<text class="font_5">次</text>
-									</view>
-								</view>
+
 							</view>
 						</view>
 					</view>
@@ -220,7 +256,7 @@
 							<text class="font_3">睡眠效率</text>
 						</view>
 						<view class="flex-row items-center space-x-6">
-							<text class="font_4">68%</text>
+							<text class="font_4">{{ sleepReportFrom.report_content.sleep_eff.value }}</text>
 						</view>
 					</view>
 
@@ -233,7 +269,8 @@
 							<text class="font_3">安稳度</text>
 						</view>
 						<view class="flex-row items-center space-x-6">
-							<text class="font_4"><text class="font_7">入睡时间</text>134分钟</text>
+							<text class="font_4"><text class="font_7">入睡时长</text>
+                {{ formateSeconds(sleepReportFrom.rs_duration) }}</text>
 						</view>
 					</view>
 
@@ -245,7 +282,13 @@
 				      <view class="flex-col group_8 space-y-10">
 
 				        <view class="flex-col justify-start relative report_leave_bed">
-				          <view class="section_10"></view>
+				          <view class="section_10">
+                    <view class="content">
+                      <view class="echarts-wrap">
+                        <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="refChart-1" @onInit="onInit1"></mpvue-echarts>
+                      </view>
+                    </view>
+                  </view>
 				          <view class="flex-row justify-between items-center pos_2">
 				            <view class="flex-row items-center space-x-12">
 				              <image
@@ -255,15 +298,20 @@
 				              <text class="font_3">离床次数</text>
 				            </view>
 				            <view class="flex-row items-baseline space-x-6">
-				              <text class="font_5">2</text>
+				              <text class="font_5">{{ sleepReportFrom.report_content.outbed_count.value }}</text>
 				              <text class="font_6">次</text>
 				            </view>
 				          </view>
 
+
 				        </view>
 
 				        <view class="flex-col justify-start relative report_move">
-				          <view class="section_20"></view>
+				          <view class="section_20">
+                    <view class="echarts-wrap">
+                      <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="refChart-2" @onInit="onInit1"></mpvue-echarts>
+                    </view>
+                  </view>
 				          <view class="flex-row justify-between items-center pos_11">
 				            <view class="flex-row items-center space-x-10">
 				              <image
@@ -273,7 +321,7 @@
 				              <text class="font_3">体动次数</text>
 				            </view>
 				            <view class="flex-row items-baseline space-x-6">
-				              <text class="font_5">73</text>
+				              <text class="font_5">{{ sleepReportFrom.report_content.move_count.value }}</text>
 				              <text class="font_6">次</text>
 				            </view>
 				          </view>
@@ -281,7 +329,13 @@
 				        </view>
 
 				        <view class="flex-col justify-start relative report_heart">
-				          <view class="section_25"></view>
+				          <view class="section_25 bg-gradual-blue">
+                    <view class="content">
+                      <view class="echarts-wrap">
+                        <mpvue-echarts class="ec-canvas" canvasId="canvasChart-3" ref="refChart-3" @onInit="onInit1"></mpvue-echarts>
+                      </view>
+                    </view>
+                  </view>
 				          <view class="flex-row justify-center items-center group_11 space-x-9 pos_21">
 				            <image
 				              class="image_8"
@@ -298,7 +352,7 @@
 				            <view class="flex-row items-center space-x-48">
 				              <text class="font_10">平均心率</text>
 				              <view class="flex-row items-baseline shrink-0 space-x-6">
-				                <text class="font_5">61</text>
+				                <text class="font_5">{{ sleepReportFrom.report_content.avg_rh.value }}</text>
 				                <text class="font_6">次/分</text>
 				              </view>
 				            </view>
@@ -328,7 +382,7 @@
 				                  <view class="flex-row items-center space-x-30">
 				                    <text class="font_10">平均呼吸率</text>
 				                    <view class="flex-row items-baseline shrink-0 space-x-6">
-				                      <text class="font_5">73</text>
+				                      <text class="font_5">{{ sleepReportFrom.report_content.avg_hx.value }}</text>
 				                      <text class="font_6">次/分</text>
 				                    </view>
 				                  </view>
@@ -340,35 +394,36 @@
 				          </view>
 				        </view>
 
-						<view class="flex-col justify-start relative report_heart">
-						  <view class="section_25"></view>
-						  <view class="flex-row justify-center items-center group_11 space-x-9 pos_21">
-						    <image
-						      class="image_8"
-							  src="../../static/report/reportIconMoon.png"
-						    />
-						    <text class="font_3">深浅睡眠</text>
-						    <image
-						      class="image_11"
-							  src="../../static/report/reportIconWhy.png"
-						    />
-						  </view>
-
-						  <view class="flex-row justify-between report-sleep items-center">
-							<view class="flex-col item-sleep">
-								<text class="item-sleep-title">清醒</text>
-								<text class="item-sleep-desc">2小时14分钟</text>
-						  	</view>
-						  	<view class="flex-col item-sleep">
-						  		<text class="item-sleep-title">浅睡</text>
-						  		<text class="item-sleep-desc">2小时14分钟</text>
-						  	</view>
-							<view class="flex-col item-sleep">
-								<text class="item-sleep-title">深睡</text>
-								<text class="item-sleep-desc">2小时14分钟</text>
-							</view>
-						  </view>
-						</view>
+<!--                <view class="flex-col justify-start relative report_heart">-->
+<!--                  <view class="section_25"></view>-->
+<!--                  <view class="flex-row justify-center items-center group_11 space-x-9 pos_21">-->
+<!--                    <image-->
+<!--                      class="image_8"-->
+<!--                    src="../../static/report/reportIconMoon.png"-->
+<!--                    />-->
+<!--                    <text class="font_3">深浅睡眠</text>-->
+<!--                    <image-->
+<!--                      class="image_11"-->
+<!--                    src="../../static/report/reportIconWhy.png"-->
+<!--                    />-->
+<!--                  </view>-->
+<!--    -->
+<!--                  <view class="flex-row justify-between report-sleep items-center">-->
+<!--                  <view class="flex-col item-sleep">-->
+<!--                    <text class="item-sleep-title">清醒</text>-->
+<!--                    <text class="item-sleep-desc">2小时14分钟</text>-->
+<!--                    </view>-->
+<!--                    <view class="flex-col item-sleep">-->
+<!--                      <text class="item-sleep-title">浅睡</text>-->
+<!--                      <text class="item-sleep-desc">2小时14分钟</text>-->
+<!--                    </view>-->
+<!--                    <view class="flex-col item-sleep">-->
+<!--                      <text class="item-sleep-title">深睡</text>-->
+<!--                      <text class="item-sleep-desc">2小时14分钟</text>-->
+<!--                    </view>-->
+<!--                  </view>-->
+<!--                </view>-->
+
 				      </view>
 				    </view>
 				  </view>
@@ -380,66 +435,317 @@
 
 		</view>
 		<!-- <tab-bar currentPage="report" /> -->
+    <view class="cu-modal bottom-modal" :class="calendarShow === true?'show':''">
+      <view class="cu-dialog">
+        <uni-calendar
+            @change="change"
+            @monthSwitch="monthSwitch"
+            :selected="selected"
+            returnName="最新一次"
+        ></uni-calendar>
+      </view>
+    </view>
 	</view>
 </template>
 
 <script>
-	import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
+
+  import echarts from '@/static/echarts.min.js'
+  import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
+  import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
+  import * as Foundation from '@/ui-utils/Foundation'
+  import * as API_SLEEP_REPORT from '@/api/sleep_report'
 
 	export default {
+    components: {
+      uniCalendar,mpvueEcharts
+    },
 		data() {
-			const currentDate = this.getDate({
-			    format: true
-			})
 			return {
 				isDeviceAdded: true,
-				date: currentDate
-			};
+        todayStr: Foundation.unixToDate(parseInt(new Date() / 1000), "yyyy-MM-dd"),
+        selectDay: '',
+        selectYearMonth: {
+          year: Foundation.unixToDate(parseInt(new Date() / 1000), "yyyy"),
+          month: Foundation.unixToDate(parseInt(new Date() / 1000), "M")
+        },
+        calendarShow: false,
+        selected: [
+          {
+            // 打点日期
+            "date": Foundation.unixToDate(parseInt(new Date() / 1000), "yyyy-MM-dd")
+          }
+        ],
+        index: 0,
+        todayTimeList: [],
+        sleepReportFrom: {
+          total_duration: 0,
+          inbed_duration: 0,
+          deep_duration: 0,
+          rs_duration: 0
+        },
+        sleepReportList: [],
+        chartObj1: null, // 离床次数图表
+        chartObj2: null, // 体动次数图表
+        myData1: [], // 离床次数数据
+        myData2: [], // 体动次数数据
+        params: {
+          unionId: '',
+          reportTime: -1
+        },
+        disabled: false
+			}
 		},
-		onReady: function() {
+    mounted() {
+      this.params.unionId = '6291d3bde21b840008ae7842'
+      this.getNewSleepReport()
+    },
+    methods: {
+      // 获取睡眠报告
+      getNewSleepReport() {
+        const _this = this
+        this.todayTimeList = []
+        API_SLEEP_REPORT.getNewListByUnionId(this.params).then(res => {
+          _this.disabled = false
+          console.log(res)
+          if (res.length > 0) {
+            _this.sleepReportFrom = Object.assign({}, res[0])
+            _this.sleepReportFrom.report_content = JSON.parse(_this.sleepReportFrom.report_content)
+            console.log(_this.sleepReportFrom)
+            _this.sleepReportList = res
+            res.forEach(item => {
+              _this.todayTimeList.push(item.gobed_time + '~' + item.outbed_time)
+            })
+            console.log('this.todayTimeList==', this.todayTimeList)
+            _this.selectDay = Foundation.unixToDate(_this.sleepReportFrom.report_time, "yyyy-MM-dd")
+            let str = _this.selectDay.split("-")
+            _this.selectYearMonth.year = str[0]
+            _this.selectYearMonth.month = str[1]
+            console.log('this.selectYearMonth===', _this.selectYearMonth)
+            if (_this.params.reportTime === -1) {
+              _this.getDaysTag()
+            }
+            _this.initAllChar(_this.sleepReportFrom)
+          }
+        })
+      },
+      // 选中日历
+      change(e) {
+        console.log('change===', e)
+        const date = this.selected.find(item=> item.date === e.extraInfo.date)
+        if (date) {
+          this.params.reportTime = date.report_time
+          this.selectDay = e.fulldate
+          this.calendarShow = false
+          this.getNewSleepReport()
+        } else {
+          if (this.todayStr === e.fulldate && this.selectYearMonth.month !== e.month) {
+            this.params.reportTime = -1
+            this.calendarShow = false
+            this.getNewSleepReport()
+          }
+        }
+        // this.selected[0].date = e.fulldate
 
-		},
-		components: {
-			timeSlot
-		},
-		computed: {
-		    startDate() {
-				return this.getDate('start');
-			},
-		    endDate() {
-		        return this.getDate('end');
-		    }
-		},
-		methods: {
-			handleTimeChoose() {
-				this.$refs.timeslot.open();
-			},
-			confirmTime(val) {
-
-			},
-			bindDateChange: function(e) {
-			    this.date = e.detail.value
-		    },
-			getDate(type) {
-			    const date = new Date();
-			    let year = date.getFullYear();
-			    let month = date.getMonth() + 1;
-			    let day = date.getDate();
-
-			    if (type === 'start') {
-			        year = year - 60;
-			    } else if (type === 'end') {
-			        year = year + 2;
-			    }
-			    month = month > 9 ? month : '0' + month;
-			    day = day > 9 ? day : '0' + day;
-			    return `${year}-${month}-${day}`;
-			}
-		}
+      },
+      // 月份切换
+      monthSwitch(e) {
+        console.log('monthSwitch===', e)
+        //{year: 2020, month: 5}
+        this.selectYearMonth = e
+        this.getDaysTag()
+      },
+      // 获取日期点
+      getDaysTag() {
+        this.selectYearMonth.unionId = this.params.unionId
+        API_SLEEP_REPORT.getSleepReportDaysTag(this.selectYearMonth).then(res => {
+          this.selected = []
+          res.forEach(p => {
+            this.selected.push({
+              date: this.selectYearMonth.year + '-' + this.selectYearMonth.month + '-' + p.flog_time,
+              report_time: p.report_time
+            })
+          })
+        })
+      },
+      // 获取最新睡眠报告
+      getLastLog() {
+        console.log("获取最新睡眠报告。。。")
+        this.disabled = true
+        const _this = this
+        setTimeout(() => {
+          _this.params.reportTime = -1
+          _this.getNewSleepReport()
+        }, 2000)
+
+      },
+      // 时间选择
+      PickerChange(e) {
+        this.index = e.detail.value
+        this.sleepReportFrom = Object.assign({}, this.sleepReportList[this.index])
+        this.sleepReportFrom.report_content = JSON.parse(this.sleepReportFrom.report_content)
+        this.initAllChar(this.sleepReportFrom)
+      },
+      initAllChar(data) {
+        const _this = this
+        setTimeout(() => {
+          _this.nowChart("refChart-1", 1, data.report_content.dt_arr, data.report_content.outbed_arr)
+          _this.nowChart("refChart-2", 2, data.report_content.dt_arr, data.report_content.move_arr)
+          _this.nowChart("refChart-3", 3, data.report_content.dt_arr, data.report_content.rh_arr)
+          // _this.nowChart("refChart-4", 4, data.report_content.dt_arr, data.report_content.hx_arr)
+          // _this.nowChart("refChart-5", 0, data.report_content.dt_arr, data.report_content.snoring_arr)
+          // _this.nowChart("refChart-6", 6, data.report_content.dt_arr, data.report_content.hxstop_arr)
+        }, 800)
+      },
+      // 将分转化为时分
+      formateSeconds(endTime) {
+        let secondTime = endTime//将传入的秒的值转化为Number
+        let h = 0// 初始化小时
+        if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
+          h = parseInt(secondTime / 60)//获取小时，获取分钟除以60，得到整数小时
+          secondTime = parseInt(secondTime % 60) //获取小时后取佘的分，获取分钟除以60取佘的分
+          return h + '小时' + secondTime + '分钟'
+        } else {
+          return secondTime + '分钟'
+        }
+      },
+      onInit1(e) {
+        this.chartObj = e
+      },
+      // 组装图表
+      nowChart(refChar, type, xData, yData) {
+        this.onInit1(this.chartObj)
+        let canvas = this.$refs[refChar].canvas
+        echarts.setCanvasCreator(() => canvas)
+        let myChart = echarts.init(canvas, 'halloween', {
+          width: this.chartObj.width + 10,
+          height: this.chartObj.height - 10
+        })
+        let options = Object.assign(this.getOptions(xData, yData), {})
+        if (type <=2) {
+          options.yAxis = this.getOptionsY1(type)
+        } else {
+          options.yAxis = this.getOptionsY2()
+        }
+        myChart.setOption(options)
+      },
+      getOptions(xData, yData) {
+        return {
+          visualMap: [
+            {
+              show: false,
+              type: 'continuous',
+              seriesIndex: 0,
+              min: 0,
+              max: 300,
+            },
+          ],
+          color: '#FFFFFF',
+          title: {
+            left: 'left',
+            // text: title,
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              animation: false,
+            },
+          },
+          grid: {
+            top: '15%',
+            bottom: '10%',
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: [0, '100%'],
+            // show: false, // 不显示x轴
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle:{
+                color:'#FFFFFF',
+                width:1, //x轴线的宽度
+              }
+            },
+            triggerEvent: true,
+            data: xData,
+          },
+          yAxis: {},
+          series: [
+            {
+              type: 'line',
+              showSymbol: false,
+              hoverAnimation: false,
+              data: yData,
+            },
+          ]
+        }
+      },
+      getOptionsY1(type) {
+        return {
+          type: 'value',
+          // boundaryGap: [0, '100%'],
+          min: 0,
+          max: 1, // dataMax取数据在该轴上的最大值作为最大刻度
+          minInterval: 1,
+          splitLine: {
+            show: false, // 是否显示分隔线
+          },
+          axisLine: {
+            lineStyle:{
+              color:'#FFFFFF',
+              width:1, //x轴线的宽度
+            }
+          },
+          // axisLine: {
+          //   show: false // 是否显示坐标轴轴线
+          // },
+          axisLabel: {
+            formatter: function (value, index) {
+              switch (type) {
+                case 0:
+                  return value === 0 ? '睡眠' : '打鼾'
+                case 1:
+                  return value === 0 ? '离床' : '在床'
+                case 2:
+                  return value === 0 ? '睡眠' : '体动'
+                default:
+                  return value
+              }
+            }
+          }
+        }
+      },
+      getOptionsY2() {
+        return {
+          type: 'value',
+          boundaryGap: [0, '100%'],
+          min: 0,
+          max: 'dataMax', // 取数据在该轴上的最大值作为最大刻度
+          splitLine: {
+            show: false, // 是否显示分隔线
+          },
+          axisLine: {
+            show: false, // 是否显示坐标轴轴线
+            lineStyle:{
+              color:'#FFFFFF'
+            }
+          }
+        }
+      }
+    }
 	}
 </script>
 
 <style lang="scss">
+.echarts-wrap {
+  width: 100%;
+  height: 7.41rem;
+  margin-bottom: 0.3rem;
+  position: absolute;
+  bottom: 0
+}
 	.report-sleep {
 		position: absolute;
 		top: 3rem;
@@ -547,9 +853,9 @@
 	        .report_leave_bed {
 	          .section_10 {
 	            opacity: 0.8;
-	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
+              background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
 	            border-radius: 0.5rem;
-	            height: 7.81rem;
+	            height: 9.91rem;
 	          }
 	          .pos_2 {
 	            position: absolute;
@@ -579,9 +885,9 @@
 	        .report_move {
 	          .section_20 {
 	            opacity: 0.8;
-	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
+              background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
 	            border-radius: 0.5rem;
-	            height: 9.19rem;
+              height: 9.91rem;
 	          }
 	          .pos_11 {
 	            position: absolute;
@@ -727,9 +1033,9 @@
 	        .report_heart {
 	          .section_25 {
 	            opacity: 0.8;
-	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
+              //background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
 	            border-radius: 0.5rem;
-	            height: 12.19rem;
+	            height: 11.19rem;
 	          }
 	          .space-x-9 {
 	            & > view:not(:first-child),
@@ -1308,7 +1614,7 @@
 			}
 		  }
 	      .report_analysis_data {
-	        padding-top: 17.5rem;
+	        padding-top: 22.5rem;
 
 	        .space-x-26 {
 	          & > view:not(:first-child),
@@ -1392,7 +1698,7 @@
 	              }
 	            }
 	            .section_8 {
-	              padding: 1.25rem 0.5rem 1.25rem 0.75rem;
+	              padding: 0.55rem 0.5rem 0.55rem 0.75rem;
 	              background-color: #1751e6cc;
 	              border-radius: 0.5rem;
 	            }

sleep/ui-utils/Foundation.js

@@ -0,0 +1,71 @@
+/**
+ * 一些常用的基础方法
+ * unixToDate    将unix时间戳转换为指定格式
+ * dateToUnix    将时间转unix时间戳
+ * deepClone     对一个对象进行深拷贝
+ * formatPrice   货币格式化
+ * secrecyMobile 手机号隐私保护
+ * randomString  随机生成指定长度的字符串
+ */
+
+/**
+ * 将unix时间戳转换为指定格式
+ * @param unix   时间戳【秒】
+ * @param format 转换格式
+ * @returns {*|string}
+ */
+export function unixToDate(unix, format) {
+  if (!unix) return unix
+  let _format = format || 'yyyy-MM-dd hh:mm:ss'
+  const d = new Date(unix * 1000)
+  const o = {
+    'M+': d.getMonth() + 1,
+    'd+': d.getDate(),
+    'h+': d.getHours(),
+    'm+': d.getMinutes(),
+    's+': d.getSeconds(),
+    'q+': Math.floor((d.getMonth() + 3) / 3),
+    S: d.getMilliseconds()
+  }
+  if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
+  for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+  return _format
+}
+
+/**
+ * 将时间转unix时间戳
+ * @param date
+ * @returns {number} 【秒】
+ */
+export function dateToUnix(date) {
+  let newStr = date.replace(/:/g, '-')
+  newStr = newStr.replace(/ /g, '-')
+  const arr = newStr.split('-')
+  const datum = new Date(Date.UTC(
+    arr[0],
+    arr[1] - 1,
+    arr[2],
+    arr[3] - 8 || -8,
+    arr[4] || 0,
+    arr[5] || 0
+  ))
+  return parseInt(datum.getTime() / 1000)
+}
+
+/**
+ * 计算传秒数的倒计时【天、时、分、秒】
+ * @param seconds
+ * @returns {{day : *, hours : *, minutes : *, seconds : *}}
+ */
+export function countTimeDown(seconds) {
+  const leftTime = (time) => {
+    if (time < 10) time = '0' + time
+    return time + ''
+  }
+  return {
+    day: leftTime(parseInt(seconds / 60 / 60 / 24, 10)),
+    hours: leftTime(parseInt(seconds / 60 / 60 % 24, 10)),
+    minutes: leftTime(parseInt(seconds / 60 % 60, 10)),
+    seconds: leftTime(parseInt(seconds % 60, 10))
+  }
+}