gui-schedule.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794
  1. <template>
  2. <view class="gui-schedule-wrap">
  3. <view
  4. class="gui-flex gui-row gui-space-between gui-align-items-center">
  5. <picker
  6. mode="date"
  7. :value="currentDayIn"
  8. :start="startDate"
  9. :end="endDate"
  10. @change="selectDate">
  11. <text
  12. class="gui-schedule-header-date gui-icons gui-primary-text">{{cYear}} 年 {{cMonthStr}} 月 &#xe603;</text>
  13. </picker>
  14. <text
  15. class="gui-border gui-schedule-today gui-secondary-text"
  16. @tap="gotoToday">返回今天</text>
  17. </view>
  18. <view
  19. class="gui-flex gui-row gui-nowrap">
  20. <text
  21. class="gui-schedule-weeks gui-color-gray gui-block"
  22. v-for="(item, index) in weeks"
  23. :key="index">{{item}}</text>
  24. </view>
  25. <view class="gui-flex gui-row gui-wrap">
  26. <view class="gui-schedule-7item gui-flex gui-row gui-justify-content-center"
  27. v-for="(item, index) in days"
  28. :key="index">
  29. <view
  30. v-if="item != ''"
  31. class="gui-date-ditems gui-flex gui-columns gui-justify-content-center"
  32. :class="[
  33. currentDayIn == cYear+'-'+cMonthStr+'-'+ item.date ? 'gui-bg-primary' : 'gui-bg-gray gui-dark-bg-level-3'
  34. ]"
  35. @click="chooseDate(cYear+'-'+cMonthStr+'-'+item.date, item.date)">
  36. <text
  37. class="gui-date-day gui-block"
  38. :class="[
  39. currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ? 'gui-color-white' : 'gui-primary-text'
  40. ]">{{item.date}}</text>
  41. <text
  42. class="gui-date-nl gui-block"
  43. v-if="isLunar"
  44. :class="[
  45. currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ? 'gui-color-white' : 'gui-primary-text']">{{item.nl}}</text>
  46. <view
  47. class="gui-schedule-point"
  48. v-if="item.haveSe"
  49. :style="{backgroundColor:pointColor}"></view>
  50. </view>
  51. <view
  52. class="gui-date-ditems"
  53. v-else></view>
  54. </view>
  55. </view>
  56. <view class="gui-border-b gui-schedule-line"></view>
  57. <view
  58. class="gui-schedule-time-list-wrap">
  59. <view
  60. class="gui-schedule-time-list gui-flex gui-row gui-nowrap"
  61. v-for="(item, index) in hours"
  62. :key="index">
  63. <text
  64. class="gui-schedule-timer gui-block gui-color-gray">{{item}}:00</text>
  65. <view
  66. class="gui-border-b gui-schedule-body gui-flex gui-columns">
  67. <text
  68. class="gui-schedules gui-block"
  69. v-for="(schedule, idx) in schedulesIn[index]"
  70. :key="idx"
  71. @tap="scheduleTap"
  72. :data-id="schedule.id"
  73. :style="{
  74. backgroundColor:schedule.bgColor,
  75. color:schedule.color
  76. }">{{schedule.content}}</text>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. </template>
  82. <script>
  83. var guiCalendar = {
  84. /**
  85. * 农历1900-2100的润大小信息表
  86. * @Array Of Property
  87. * @return Hex
  88. */
  89. lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
  90. 0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
  91. 0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
  92. 0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
  93. 0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
  94. 0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
  95. 0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
  96. 0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
  97. 0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
  98. 0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,//1990-1999
  99. 0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
  100. 0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
  101. 0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
  102. 0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
  103. 0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
  104. /**Add By JJonline@JJonline.Cn**/
  105. 0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50, 0x06b20,0x1a6c4,0x0aae0,//2050-2059
  106. 0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
  107. 0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
  108. 0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
  109. 0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
  110. 0x0d520],//2100
  111. /**
  112. * 公历每个月份的天数普通表
  113. * @Array Of Property
  114. * @return Number
  115. */
  116. solarMonth:[31,28,31,30,31,30,31,31,30,31,30,31],
  117. /**
  118. * 天干地支之天干速查表
  119. * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
  120. * @return Cn string
  121. */
  122. Gan:["\u7532","\u4e59","\u4e19","\u4e01","\u620a","\u5df1","\u5e9a","\u8f9b","\u58ec","\u7678"],
  123. /**
  124. * 天干地支之地支速查表
  125. * @Array Of Property
  126. * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
  127. * @return Cn string
  128. */
  129. Zhi:["\u5b50","\u4e11","\u5bc5","\u536f","\u8fb0","\u5df3","\u5348","\u672a","\u7533","\u9149","\u620c","\u4ea5"],
  130. /**
  131. * 天干地支之地支速查表<=>生肖
  132. * @Array Of Property
  133. * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
  134. * @return Cn string
  135. */
  136. Animals:["\u9f20","\u725b","\u864e","\u5154","\u9f99","\u86c7","\u9a6c","\u7f8a","\u7334","\u9e21","\u72d7","\u732a"],
  137. /**
  138. * 24节气速查表
  139. * @Array Of Property
  140. * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
  141. * @return Cn string
  142. */
  143. 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"],
  144. /**
  145. * 1900-2100各年的24节气日期速查表
  146. * @Array Of Property
  147. * @return 0x string For splice
  148. */
  149. sTermInfo:['9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f',
  150. '97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  151. '97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa',
  152. '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f',
  153. 'b027097bd097c36b0b6fc9274c91aa','9778397bd19801ec9210c965cc920e','97b6b97bd19801ec95f8c965cc920f',
  154. '97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2','9778397bd197c36c9210c9274c91aa',
  155. '97b6b97bd19801ec95f8c965cc920e','97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2',
  156. '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e','97bcf97c3598082c95f8e1cfcc920f',
  157. '97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e',
  158. '97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  159. '97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722',
  160. '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f',
  161. '97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  162. '97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  163. '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd097bd07f595b0b6fc920fb0722',
  164. '9778397bd097c36b0b6fc9210c8dc2','9778397bd19801ec9210c9274c920e','97b6b97bd19801ec95f8c965cc920f',
  165. '97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
  166. '97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
  167. '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e','97bd07f1487f595b0b0bc920fb0722',
  168. '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  169. '97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  170. '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
  171. '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722',
  172. '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  173. '97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  174. '97b6b97bd19801ec9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
  175. '9778397bd097c36b0b6fc9210c91aa','97b6b97bd197c36c9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722',
  176. '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
  177. '97b6b7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
  178. '9778397bd097c36b0b70c9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
  179. '7f0e397bd097c35b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
  180. '7f0e27f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  181. '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
  182. '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
  183. '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
  184. '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  185. '97b6b7f0e47f531b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
  186. '9778397bd097c36b0b6fc9210c91aa','97b6b7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
  187. '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','977837f0e37f149b0723b0787b0721',
  188. '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c35b0b6fc9210c8dc2',
  189. '977837f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
  190. '7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  191. '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','977837f0e37f14998082b0787b06bd',
  192. '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
  193. '977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
  194. '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  195. '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd',
  196. '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
  197. '977837f0e37f14998082b0723b06bd','7f07e7f0e37f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
  198. '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721',
  199. '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f595b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5',
  200. '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f531b0b0bb0b6fb0722',
  201. '7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  202. '7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
  203. '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35',
  204. '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
  205. '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721',
  206. '7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd',
  207. '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35',
  208. '7ec967f0e37f14998082b0723b06bd','7f07e7f0e37f14998083b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
  209. '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14898082b0723b02d5','7f07e7f0e37f14998082b0787b0721',
  210. '7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66aa89801e9808297c35','665f67f0e37f14898082b0723b02d5',
  211. '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66a449801e9808297c35',
  212. '665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  213. '7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
  214. '7f07e7f0e47f531b0723b0b6fb0721','7f0e26665b66a449801e9808297c35','665f67f0e37f1489801eb072297c35',
  215. '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722'],
  216. /**
  217. * 数字转中文速查表
  218. * @Array Of Property
  219. * @trans ['日','一','二','三','四','五','六','七','八','九','十']
  220. * @return Cn string
  221. */
  222. nStr1:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341"],
  223. /**
  224. * 日期转农历称呼速查表
  225. * @Array Of Property
  226. * @trans ['初','十','廿','卅']
  227. * @return Cn string
  228. */
  229. nStr2:["\u521d","\u5341","\u5eff","\u5345"],
  230. /**
  231. * 月份转农历称呼速查表
  232. * @Array Of Property
  233. * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
  234. * @return Cn string
  235. */
  236. nStr3:["\u6b63","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u51ac","\u814a"],
  237. /**
  238. * 返回农历y年一整年的总天数
  239. * @param lunar Year
  240. * @return Number
  241. * @eg:var count = this.lYearDays(1987) ;//count=387
  242. */
  243. lYearDays:function(y) {
  244. var i, sum = 348;
  245. for(i=0x8000; i>0x8; i>>=1) { sum += (this.lunarInfo[y-1900] & i)? 1: 0; }
  246. return(sum+this.leapDays(y));
  247. },
  248. /**
  249. * 返回农历y年闰月是哪个月;若y年没有闰月 则返回0
  250. * @param lunar Year
  251. * @return Number (0-12)
  252. * @eg:var leapMonth = this.leapMonth(1987) ;//leapMonth=6
  253. */
  254. leapMonth:function(y) { //闰字编码 \u95f0
  255. return(this.lunarInfo[y-1900] & 0xf);
  256. },
  257. /**
  258. * 返回农历y年闰月的天数 若该年没有闰月则返回0
  259. * @param lunar Year
  260. * @return Number (0、29、30)
  261. * @eg:var leapMonthDay = this.leapDays(1987) ;//leapMonthDay=29
  262. */
  263. leapDays:function(y) {
  264. if(this.leapMonth(y)) {
  265. return((this.lunarInfo[y-1900] & 0x10000)? 30: 29);
  266. }
  267. return(0);
  268. },
  269. /**
  270. * 返回农历y年m月(非闰月)的总天数,计算m为闰月时的天数请使用leapDays方法
  271. * @param lunar Year
  272. * @return Number (-1、29、30)
  273. * @eg:var MonthDay = this.monthDays(1987,9) ;//MonthDay=29
  274. */
  275. monthDays:function(y,m) {
  276. if(m>12 || m<1) {return -1}//月份参数从1至12,参数错误返回-1
  277. return( (this.lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );
  278. },
  279. /**
  280. * 返回公历(!)y年m月的天数
  281. * @param solar Year
  282. * @return Number (-1、28、29、30、31)
  283. * @eg:var solarMonthDay = this.leapDays(1987) ;//solarMonthDay=30
  284. */
  285. solarDays:function(y,m) {
  286. if(m>12 || m<1) {return -1} //若参数错误 返回-1
  287. var ms = m-1;
  288. if(ms==1) { //2月份的闰平规律测算后确认返回28或29
  289. return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);
  290. }else {
  291. return(this.solarMonth[ms]);
  292. }
  293. },
  294. /**
  295. * 农历年份转换为干支纪年
  296. * @param lYear 农历年的年份数
  297. * @return Cn string
  298. */
  299. toGanZhiYear:function(lYear) {
  300. var ganKey = (lYear - 3) % 10;
  301. var zhiKey = (lYear - 3) % 12;
  302. if(ganKey == 0) ganKey = 10;//如果余数为0则为最后一个天干
  303. if(zhiKey == 0) zhiKey = 12;//如果余数为0则为最后一个地支
  304. return this.Gan[ganKey-1] + this.Zhi[zhiKey-1];
  305. },
  306. /**
  307. * 公历月、日判断所属星座
  308. * @param cMonth [description]
  309. * @param cDay [description]
  310. * @return Cn string
  311. */
  312. toAstro:function(cMonth,cDay) {
  313. 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";
  314. var arr = [20,19,21,21,21,22,23,23,23,23,22,22];
  315. return s.substr(cMonth*2 - (cDay < arr[cMonth-1] ? 2 : 0),2) + "\u5ea7";//座
  316. },
  317. /**
  318. * 传入offset偏移量返回干支
  319. * @param offset 相对甲子的偏移量
  320. * @return Cn string
  321. */
  322. toGanZhi:function(offset) {
  323. return this.Gan[offset%10] + this.Zhi[offset%12];
  324. },
  325. /**
  326. * 传入公历(!)y年获得该年第n个节气的公历日期
  327. * @param y公历年(1900-2100);n二十四节气中的第几个节气(1~24);从n=1(小寒)算起
  328. * @return day Number
  329. * @eg:var _24 = this.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
  330. */
  331. getTerm:function(y,n) {
  332. if(y<1900 || y>2100) {return -1;}
  333. if(n<1 || n>24) {return -1;}
  334. var _table = this.sTermInfo[y-1900];
  335. var _info = [
  336. parseInt('0x'+_table.substr(0,5)).toString() ,
  337. parseInt('0x'+_table.substr(5,5)).toString(),
  338. parseInt('0x'+_table.substr(10,5)).toString(),
  339. parseInt('0x'+_table.substr(15,5)).toString(),
  340. parseInt('0x'+_table.substr(20,5)).toString(),
  341. parseInt('0x'+_table.substr(25,5)).toString()
  342. ];
  343. var _calday = [
  344. _info[0].substr(0,1),
  345. _info[0].substr(1,2),
  346. _info[0].substr(3,1),
  347. _info[0].substr(4,2),
  348. _info[1].substr(0,1),
  349. _info[1].substr(1,2),
  350. _info[1].substr(3,1),
  351. _info[1].substr(4,2),
  352. _info[2].substr(0,1),
  353. _info[2].substr(1,2),
  354. _info[2].substr(3,1),
  355. _info[2].substr(4,2),
  356. _info[3].substr(0,1),
  357. _info[3].substr(1,2),
  358. _info[3].substr(3,1),
  359. _info[3].substr(4,2),
  360. _info[4].substr(0,1),
  361. _info[4].substr(1,2),
  362. _info[4].substr(3,1),
  363. _info[4].substr(4,2),
  364. _info[5].substr(0,1),
  365. _info[5].substr(1,2),
  366. _info[5].substr(3,1),
  367. _info[5].substr(4,2),
  368. ];
  369. return parseInt(_calday[n-1]);
  370. },
  371. /**
  372. * 传入农历数字月份返回汉语通俗表示法
  373. * @param lunar month
  374. * @return Cn string
  375. * @eg:var cnMonth = this.toChinaMonth(12) ;//cnMonth='腊月'
  376. */
  377. toChinaMonth:function(m) { // 月 => \u6708
  378. if(m>12 || m<1) {return -1} //若参数错误 返回-1
  379. var s = this.nStr3[m-1];
  380. s+= "\u6708";//加上月字
  381. return s;
  382. },
  383. /**
  384. * 传入农历日期数字返回汉字表示法
  385. * @param lunar day
  386. * @return Cn string
  387. * @eg:var cnDay = this.toChinaDay(21) ;//cnMonth='廿一'
  388. */
  389. toChinaDay:function(d){ //日 => \u65e5
  390. var s;
  391. switch (d) {
  392. case 10:
  393. s = '\u521d\u5341'; break;
  394. case 20:
  395. s = '\u4e8c\u5341'; break;
  396. break;
  397. case 30:
  398. s = '\u4e09\u5341'; break;
  399. break;
  400. default :
  401. s = this.nStr2[Math.floor(d/10)];
  402. s += this.nStr1[d%10];
  403. }
  404. return(s);
  405. },
  406. /**
  407. * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
  408. * @param y year
  409. * @return Cn string
  410. * @eg:var animal = this.getAnimal(1987) ;//animal='兔'
  411. */
  412. getAnimal: function(y) {
  413. return this.Animals[(y - 4) % 12]
  414. },
  415. /**
  416. * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
  417. * @param y solar year
  418. * @param m solar month
  419. * @param d solar day
  420. * @return JSON object
  421. * @eg:console.log(this.solar2lunar(1987,11,01));
  422. */
  423. solar2lunar:function (y,m,d) { //参数区间1900.1.31~2100.12.31
  424. if(y<1900 || y>2100) {return -1;}//年份限定、上限
  425. if(y==1900&&m==1&&d<31) {return -1;}//下限
  426. // 未传参 获得当天
  427. if(!y){
  428. var objDate = new Date();
  429. }else {
  430. var objDate = new Date(y,parseInt(m)-1,d)
  431. }
  432. var i, leap=0, temp=0;
  433. // 修正ymd参数
  434. // console.log(y);
  435. // var y = objDate.getFullYear(),m = objDate.getMonth()+1,d = objDate.getDate();
  436. var offset = (Date.UTC(objDate.getFullYear(),objDate.getMonth(),objDate.getDate()) - Date.UTC(1900,0,31))/86400000;
  437. for(i=1900; i<2101 && offset>0; i++) { temp=this.lYearDays(i); offset-=temp; }
  438. if(offset<0) { offset+=temp; i--; }
  439. console.log(y);
  440. //是否今天
  441. var isTodayObj = new Date(),isToday=false;
  442. if(isTodayObj.getFullYear()==y && isTodayObj.getMonth()+1==m && isTodayObj.getDate()==d) {
  443. isToday = true;
  444. }
  445. //星期几
  446. var nWeek = objDate.getDay(),cWeek = this.nStr1[nWeek];
  447. if(nWeek==0) {nWeek =7;}//数字表示周几顺应天朝周一开始的惯例
  448. //农历年
  449. var year = i;
  450. var leap = this.leapMonth(i); //闰哪个月
  451. var isLeap = false;
  452. //效验闰月
  453. for(i=1; i<13 && offset>0; i++) {
  454. //闰月
  455. if(leap>0 && i==(leap+1) && isLeap==false){
  456. --i;
  457. isLeap = true; temp = this.leapDays(year); //计算农历闰月天数
  458. }
  459. else{
  460. temp = this.monthDays(year, i);//计算农历普通月天数
  461. }
  462. //解除闰月
  463. if(isLeap==true && i==(leap+1)) { isLeap = false; }
  464. offset -= temp;
  465. }
  466. if(offset==0 && leap>0 && i==leap+1)
  467. if(isLeap){
  468. isLeap = false;
  469. }else{
  470. isLeap = true; --i;
  471. }
  472. if(offset<0){ offset += temp; --i; }
  473. //农历月
  474. var month = i;
  475. //农历日
  476. var day = offset + 1;
  477. //天干地支处理
  478. var sm = m-1;
  479. var gzY = this.toGanZhiYear(year);
  480. //月柱 1900年1月小寒以前为 丙子月(60进制12)
  481. var firstNode = this.getTerm(year,(m*2-1));//返回当月「节」为几日开始
  482. var secondNode = this.getTerm(year,(m*2));//返回当月「节」为几日开始
  483. //依据12节气修正干支月
  484. var gzM = this.toGanZhi((y-1900)*12+m+11);
  485. if(d>=firstNode) {
  486. gzM = this.toGanZhi((y-1900)*12+m+12);
  487. }
  488. //传入的日期的节气与否
  489. var isTerm = false;
  490. var Term = null;
  491. if(firstNode==d) {
  492. isTerm = true;
  493. Term = this.solarTerm[m*2-2];
  494. }
  495. if(secondNode==d) {
  496. isTerm = true;
  497. Term = this.solarTerm[m*2-1];
  498. }
  499. //日柱 当月一日与 1900/1/1 相差天数
  500. var dayCyclical = Date.UTC(y,sm,1,0,0,0,0)/86400000+25567+10;
  501. var gzD = this.toGanZhi(dayCyclical+d-1);
  502. //该日期所属的星座
  503. var astro = this.toAstro(m,d);
  504. 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};
  505. },
  506. /**
  507. * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
  508. * @param y lunar year
  509. * @param m lunar month
  510. * @param d lunar day
  511. * @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
  512. * @return JSON object
  513. * @eg:console.log(this.lunar2solar(1987,9,10));
  514. */
  515. lunar2solar:function(y,m,d,isLeapMonth) {
  516. //参数区间1900.1.31~2100.12.1
  517. var isLeapMonth = !!isLeapMonth;
  518. var leapOffset = 0;
  519. var leapMonth = this.leapMonth(y);
  520. var leapDay = this.leapDays(y);
  521. if(isLeapMonth&&(leapMonth!=m)) {return -1;}//传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
  522. if(y==2100&&m==12&&d>1 || y==1900&&m==1&&d<31) {return -1;}//超出了最大极限值
  523. var day = this.monthDays(y,m);
  524. var _day = day;
  525. //bugFix 2016-9-25
  526. //if month is leap, _day use leapDays method
  527. if(isLeapMonth) {
  528. _day = this.leapDays(y,m);
  529. }
  530. if(y < 1900 || y > 2100 || d > _day) {return -1;}//参数合法性效验
  531. //计算农历的时间差
  532. var offset = 0;
  533. for(var i=1900;i<y;i++) {
  534. offset+=this.lYearDays(i);
  535. }
  536. var leap = 0,isAdd= false;
  537. for(var i=1;i<m;i++) {
  538. leap = this.leapMonth(y);
  539. if(!isAdd) {//处理闰月
  540. if(leap<=i && leap>0) {
  541. offset+=this.leapDays(y);isAdd = true;
  542. }
  543. }
  544. offset+=this.monthDays(y,i);
  545. }
  546. //转换闰月农历 需补充该年闰月的前一个月的时差
  547. if(isLeapMonth) {offset+=day;}
  548. //1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
  549. var stmap = Date.UTC(1900,1,30,0,0,0);
  550. var calObj = new Date((offset+d-31)*86400000+stmap);
  551. var cY = calObj.getUTCFullYear();
  552. var cM = calObj.getUTCMonth()+1;
  553. var cD = calObj.getUTCDate();
  554. return this.solar2lunar(cY,cM,cD);
  555. },
  556. defaultLunar : {
  557. '1y1': '春节',
  558. '1y15': '元宵节',
  559. '2y2': '龙头节',
  560. '5y5': '端午节',
  561. '7y7': '七夕节',
  562. '7y15': '中元节',
  563. '8y15': '中秋节',
  564. '9y9': '重阳节',
  565. '10y1': '寒衣节',
  566. '10y15': '下元节',
  567. '12y8': '腊八节',
  568. '12y23': '小年',
  569. },
  570. defaultGregorian : {
  571. '1y1': '元旦',
  572. '2y14': '情人节',
  573. '3y8': '妇女节',
  574. '3y12': '植树节',
  575. '5y1': '劳动节',
  576. '5y4': '青年节',
  577. '6y1': '儿童节',
  578. '7y1': '建党节',
  579. '8y1': '建军节',
  580. '9y10': '教师节',
  581. '10y1': '国庆节',
  582. '12y24': '平安夜',
  583. '12y25': '圣诞节',
  584. },
  585. getLunarInfo : function(y, m, d) {
  586. // 匹配阳历节日
  587. var glDay = m+'y'+d;
  588. if(this.defaultGregorian[glDay]){
  589. return this.defaultGregorian[glDay];
  590. }
  591. var nlObj = this.solar2lunar(y, m, d);
  592. // 阴历节日
  593. var nlDay = nlObj.lMonth+'y'+nlObj.lDay;
  594. if(this.defaultLunar[nlDay]){
  595. return this.defaultLunar[nlDay]
  596. }
  597. return nlObj.IDayCn;
  598. }
  599. }
  600. export default{
  601. name : "gui-schedule",
  602. data() {
  603. return {
  604. cYear : 2020,
  605. cMonth : 1,
  606. cDay : 10,
  607. cMonthStr : '01',
  608. weeks : ['一', '二', '三', '四', '五', '六', '日'],
  609. days : [],
  610. currentDayIn : '',
  611. hours : ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
  612. schedulesIn: []
  613. }
  614. },
  615. props:{
  616. // 当前默认日期
  617. currentDate : {type:String, default:""},
  618. isLunar : {type:Boolean, default:true },
  619. startDate : {type:String, default:'1950-01-01'},
  620. endDate : {type:String, default:'2050-01-01'},
  621. schedules : {type:Array, default:function () {return []}},
  622. pointColor : {type:String, default:"#FF0036"}
  623. },
  624. created:function(){
  625. this.currentDayIn = this.currentDate;
  626. this.initTime();
  627. this.getSchedulesIn();
  628. },
  629. methods:{
  630. initTime : function(){
  631. if(this.currentDayIn == ''){
  632. var dateObj = new Date();
  633. this.cYear = Number(dateObj.getFullYear());
  634. this.cMonth = Number(dateObj.getMonth() + 1);
  635. this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
  636. this.cDay = dateObj.getDate();
  637. this.cDay = this.cDay < 10 ? '0' + this.cDay : this.cDay;
  638. this.currentDayIn = this.cYear + '-' + this.cMonthStr + '-' + this.cDay;
  639. this.changeMonth();
  640. }else{
  641. var dates = this.currentDayIn.split(' ');
  642. if (!dates[1]) { dates[1] = '';}
  643. var dayArr = dates[0].split('-');
  644. this.cYear = Number(dayArr[0]);
  645. this.cMonth = dayArr[1];
  646. this.cDay = dayArr[2];
  647. var reg = new RegExp('^0[0-9]+$');
  648. if(reg.test(this.cMonth)){this.cMonth = this.cMonth.substr(1,1);}
  649. this.cMonth = Number(this.cMonth);
  650. this.cMonthStr = this.cMonth < 10 ? '0'+this.cMonth : this.cMonth;
  651. this.currentDayIn = dates[0];
  652. this.currentTimeIn = dates[1];
  653. this.changeMonth();
  654. }
  655. },
  656. changeMonth:function(){
  657. var daysList = [];
  658. var days = this.getDaysInOneMonth();
  659. var startWeek = this.getDay();
  660. var forSteps = 0;
  661. for (var i = (0 - startWeek); i < days; i++){
  662. if(i >= 0){
  663. daysList[forSteps] = {date : i >= 9 ? i + 1 : '0' + (i+1), nl : ''};
  664. daysList[forSteps].nl = guiCalendar.getLunarInfo(this.cYear, this.cMonth, i + 1);
  665. daysList[forSteps].haveSe = this.haveSchedule(daysList[forSteps].date);
  666. }else{
  667. daysList[forSteps] = '';
  668. }
  669. forSteps++;
  670. }
  671. this.days = daysList;
  672. },
  673. haveSchedule : function (day) {
  674. var cDay = this.cYear+'-'+this.cMonthStr+'-'+day;
  675. for(let i = 0; i < this.schedules.length; i++){
  676. if(this.schedules[i].datetime.indexOf(cDay) != -1){
  677. return true;
  678. }
  679. }
  680. return false;
  681. },
  682. getDaysInOneMonth : function (){
  683. var d = new Date(this.cYear, this.cMonth, 0);
  684. return d.getDate();
  685. },
  686. getDay : function (){
  687. var d = new Date(this.cYear, this.cMonth - 1, 0);
  688. return d.getDay();
  689. },
  690. selectDate : function(e){
  691. this.currentDayIn = e.detail.value;
  692. this.initTime();
  693. this.getSchedulesIn();
  694. this.$emit('selectDate', e.detail.value);
  695. },
  696. chooseDate: function (sedDate) {
  697. this.currentDayIn = sedDate;
  698. this.getSchedulesIn();
  699. this.$emit('chooseDate', sedDate);
  700. },
  701. getSchedulesIn : function (){
  702. var res = [];
  703. for(let i = 0; i < this.hours.length; i++){
  704. var ctime = this.currentDayIn + ' ' + this.hours[i] + ':00';
  705. res.push([]);
  706. for(let ii = 0; ii < this.schedules.length; ii++){
  707. if(this.schedules[ii].datetime == ctime){
  708. res[i].push(this.schedules[ii]);
  709. }
  710. }
  711. }
  712. this.schedulesIn = res;
  713. },
  714. scheduleTap : function (e) {
  715. var id = e.currentTarget.dataset.id;
  716. this.$emit('scheduleTap', id);
  717. },
  718. gotoToday : function(){
  719. var dateObj = new Date();
  720. this.cYear = Number(dateObj.getFullYear());
  721. this.cMonth = Number(dateObj.getMonth() + 1);
  722. this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
  723. this.cDay = dateObj.getDate();
  724. this.cDay = this.cDay < 10 ? '0' + this.cDay : this.cDay;
  725. this.currentDayIn = this.cYear + '-' + this.cMonthStr + '-' + this.cDay;
  726. this.changeMonth();
  727. this.getSchedulesIn();
  728. this.$emit('gotoToday', this.currentDayIn);
  729. }
  730. },
  731. emits:['scheduleTap', 'selectDate', 'chooseDate', 'gotoToday']
  732. }
  733. </script>
  734. <style scoped>
  735. .gui-schedule-wrap{width:690rpx;}
  736. .gui-schedule-header-date{height:88rpx; line-height:88rpx; font-size:28rpx;}
  737. .gui-schedule-7item{width:98rpx; margin-bottom:22rpx; position:relative;}
  738. .gui-schedule-weeks{width:98rpx; height:88rpx; font-size:26rpx; line-height:88rpx; text-align:center;}
  739. .gui-date-ditems{width:82rpx; height:82rpx; border-radius:80rpx;}
  740. .gui-date-day{height:32rpx; line-height:32rpx; text-align:center; font-size:28rpx;}
  741. .gui-date-nl{height:24rpx; line-height:26rpx; font-size:20rpx; text-align:center;}
  742. .gui-schedule-line{height:20rpx; border-color:#F8F8F8;}
  743. .gui-schedule-time-list{margin-top:20rpx;}
  744. .gui-schedule-timer{width:88rpx; font-size:22rpx; line-height:36rpx;}
  745. .gui-schedule-body{width:200rpx; flex:1; margin-top:15rpx;}
  746. .gui-schedules{padding:10rpx; line-height:30rpx; font-size:22rpx; margin-top:15rpx; border-radius:8rpx;}
  747. .gui-schedule-time-list-wrap{padding:20rpx;}
  748. .gui-schedule-today{line-height:50rpx; height:50rpx; font-size:22rpx; padding-left:20rpx; padding-right:20rpx;}
  749. .gui-schedule-point{width:18rpx; height:18rpx; border-radius:10rpx; background-color:#FF0036; position:absolute; right:6rpx; top:6rpx;}
  750. </style>