toutiaoTime.vue 9.3 KB

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