toutiaoTime.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. <template>
  2. <div class="calendar">
  3. <table class="time_table table" v-on:mouseleave="mouseleave">
  4. <thead>
  5. <tr>
  6. <th rowspan="2" style="width:120px">日期/时间(时)</th>
  7. </tr>
  8. <tr>
  9. <th class="unselectable" colspan="2" v-for="(num, index) in numData" :key="index" style="width:50px">{{ num }}</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr v-for="(options, index) in timeData" :key="index">
  14. <th scope="row">{{ options.date }}</th>
  15. <td v-for="(timeItem, key) in options.time" :key="key" style="width:15px"
  16. :class="[{ active_select: timeItem.isSelected, active_select_move: timeItem.show }]"
  17. v-on:mousedown="mousedown(index, key)" v-on:mouseover="mouseover(index, key)"
  18. v-on:mouseup="mouseup(index, key)" @click="showOne(index, key)"></td>
  19. </tr>
  20. </tbody>
  21. </table>
  22. </div>
  23. </template>
  24. <script>
  25. var arr = []
  26. for (let i = 0; i < 48; i++) {
  27. arr.push(i / 2)
  28. }
  29. export default {
  30. name: 'calendar-table',
  31. props: {
  32. scheduleTime: {
  33. type: String,
  34. default () {
  35. var str = ''
  36. for (let i = 0; i < 7 * 48; i++) {
  37. str += '0'
  38. }
  39. return str
  40. }
  41. }
  42. },
  43. data() {
  44. return {
  45. show: false,
  46. numData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
  47. // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
  48. dateTime: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  49. timeData: [{
  50. date: '周一',
  51. time: []
  52. },
  53. {
  54. date: '周二',
  55. time: []
  56. },
  57. {
  58. date: '周三',
  59. time: []
  60. },
  61. {
  62. date: '周四',
  63. time: []
  64. },
  65. {
  66. date: '周五',
  67. time: []
  68. },
  69. {
  70. date: '周六',
  71. time: []
  72. },
  73. {
  74. date: '周日',
  75. time: []
  76. }
  77. ],
  78. selectFlag: false,
  79. max: {
  80. x: 0,
  81. y: 0
  82. },
  83. dataString: ''
  84. }
  85. },
  86. methods: {
  87. // handleClose(item) {
  88. // var index = Math.floor(item / 24)
  89. // var key = item % 7
  90. // if (this.timeData[index].time[key].value == false) {
  91. // if (this.timeData[index].time[key].isSelected) {
  92. // this.timeData[index].time[key].isSelected = false
  93. // } else {
  94. // this.$set(this.timeData[index].time[key], 'isSelected', true)
  95. // }
  96. // }
  97. // },
  98. showOne(index, key) {
  99. // this.timeData[index].time[key].isSelected = !this.timeData[index].time[key].isSelected
  100. },
  101. mousedown: function (index, key) {
  102. this.selectStart = []
  103. this.selectFlag = true
  104. if (this.timeData[index].time[key].value == false) {
  105. if (this.timeData[index].time[key].isSelected) {
  106. this.timeData[index].time[key].isSelected = false
  107. } else {
  108. this.$set(this.timeData[index].time[key], 'isSelected', true)
  109. }
  110. }
  111. this.selectStart.push({
  112. index: index,
  113. key: key
  114. })
  115. },
  116. mouseover: function (index, key) {
  117. // x 垂直方向 y 水平方向
  118. if (this.selectFlag) {
  119. if (index >= this.max.x) {
  120. this.max.x = index
  121. }
  122. if (key >= this.max.y) {
  123. this.max.y = key
  124. }
  125. var start = {
  126. x: this.selectStart[0].index,
  127. y: this.selectStart[0].key
  128. }
  129. var end = {
  130. x: index,
  131. y: key
  132. }
  133. for (var i = end.x; i <= this.max.x; i++) {
  134. for (var j = end.y; j <= this.max.y; j++) {
  135. this.$set(this.timeData[i].time[j], 'isSelected', false)
  136. }
  137. }
  138. /* 渲染选中的区域 */
  139. // for (var i = start.x; i <= end.x; i++) {
  140. // for (var j = start.y; j <= end.y; j++) {
  141. // // this.$set(this.timeData[i].time[j], 'isSelected', true)
  142. // this.$set(this.timeData[i].time[j], 'show', true)
  143. // }
  144. // }
  145. for (var i = start.x; i <= end.x; i++) {
  146. for (var j = start.y; j <= end.y; j++) {
  147. this.$set(this.timeData[i].time[j], 'isSelected', true)
  148. }
  149. }
  150. }
  151. },
  152. mouseup: function (index, key) {
  153. var start = {
  154. x: this.selectStart[0].index,
  155. y: this.selectStart[0].key
  156. }
  157. var end = {
  158. x: index,
  159. y: key
  160. }
  161. /* 渲染选中的区域 */
  162. var data = []
  163. var arr = []
  164. // for (let i = 0; i < this.timeData.length; i++) {
  165. // for (let j = 0; j < this.timeData[i].time.length; j++) {
  166. // this.timeData[i].time[j].show = false
  167. // }
  168. // }
  169. arr = data.concat(
  170. this.timeData[0].time,
  171. this.timeData[1].time,
  172. this.timeData[2].time,
  173. this.timeData[3].time,
  174. this.timeData[4].time,
  175. this.timeData[5].time,
  176. this.timeData[6].time
  177. )
  178. this.dataString = arr.map(item => {
  179. if (item.isSelected) {
  180. return 1
  181. } else {
  182. return 0
  183. }
  184. })
  185. console.log(this.dataString.join(''))
  186. this.$emit('update:scheduleTime', this.dataString.join(''))
  187. this.selectFlag = false
  188. this.max = {
  189. x: 0,
  190. y: 0
  191. }
  192. },
  193. mouseleave: function () {
  194. this.selectFlag = false
  195. },
  196. setItemDate(sum) {
  197. let i = sum
  198. if (i < 24) {
  199. return '周一' + i + ':00~' + (i + 1) + ':00'
  200. } else if (i < 48 && i >= 24) {
  201. return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
  202. } else if (i < 72 && i >= 48) {
  203. return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
  204. } else if (i < 96 && i >= 72) {
  205. return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
  206. } else if (i < 120 && i >= 96) {
  207. return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
  208. } else if (i < 144 && i >= 120) {
  209. return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
  210. } else {
  211. return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
  212. }
  213. },
  214. init() {
  215. var str = this.scheduleTime
  216. var arr = str.split('')
  217. this.timeData = [{
  218. date: '周一',
  219. time: []
  220. },
  221. {
  222. date: '周二',
  223. time: []
  224. },
  225. {
  226. date: '周三',
  227. time: []
  228. },
  229. {
  230. date: '周四',
  231. time: []
  232. },
  233. {
  234. date: '周五',
  235. time: []
  236. },
  237. {
  238. date: '周六',
  239. time: []
  240. },
  241. {
  242. date: '周日',
  243. time: []
  244. }
  245. ]
  246. for (let i = 0; i < arr.length; i++) {
  247. if (i < 48) {
  248. this.timeData[0].time.push({
  249. isSelected: arr[i] == 1 ? true : false,
  250. move: false,
  251. value: false
  252. })
  253. } else if (i < 96 && i >= 48) {
  254. this.timeData[1].time.push({
  255. isSelected: arr[i] == 1 ? true : false,
  256. move: false,
  257. value: false
  258. })
  259. } else if (i < 144 && i >= 96) {
  260. this.timeData[2].time.push({
  261. isSelected: arr[i] == 1 ? true : false,
  262. move: false,
  263. value: false
  264. })
  265. } else if (i < 192 && i >= 144) {
  266. this.timeData[3].time.push({
  267. isSelected: arr[i] == 1 ? true : false,
  268. move: false,
  269. value: false
  270. })
  271. } else if (i < 240 && i >= 192) {
  272. this.timeData[4].time.push({
  273. isSelected: arr[i] == 1 ? true : false,
  274. move: false,
  275. value: false
  276. })
  277. } else if (i < 288 && i >= 240) {
  278. this.timeData[5].time.push({
  279. isSelected: arr[i] == 1 ? true : false,
  280. move: false,
  281. value: false
  282. })
  283. } else {
  284. this.timeData[6].time.push({
  285. isSelected: arr[i] == 1 ? true : false,
  286. move: false,
  287. value: false
  288. })
  289. }
  290. }
  291. }
  292. },
  293. watch: {
  294. scheduleTime: {
  295. immediate: true, // immediate选项可以开启首次赋值监听
  296. handler(newVal, oldVal) {
  297. this.init()
  298. }
  299. }
  300. }
  301. }
  302. </script>
  303. <style lang="scss">
  304. .time_table {
  305. border: 1px solid #ccc;
  306. border-collapse: collapse;
  307. }
  308. .time_table th,
  309. .time_table td {
  310. border: 1px solid #ccc;
  311. text-align: center;
  312. }
  313. .time_table .unselectable {
  314. width: 5px !important;
  315. height: 30px;
  316. }
  317. .active_select {
  318. background: cornflowerblue;
  319. }
  320. .active_select_move {
  321. background: aqua;
  322. }
  323. * {
  324. -webkit-touch-callout: none;
  325. -webkit-user-select: none;
  326. -moz-user-select: none;
  327. -ms-user-select: none;
  328. user-select: none;
  329. }
  330. </style>