|
@@ -54,17 +54,20 @@
|
54
|
54
|
<div class="nodata" v-else>
|
55
|
55
|
<img src="../../../assets/images/none.png" alt />
|
56
|
56
|
</div>
|
57
|
|
- <div style="display: flex;justify-content: space-around;">
|
58
|
|
- <div style="margin-right: 20px;">
|
59
|
|
- <el-button type="primary">上一张</el-button>
|
60
|
|
- </div>
|
61
|
|
- <div><el-button type="primary">下一张</el-button></div>
|
62
|
|
- <!-- <el-button>上一张</el-button>
|
63
|
|
- <el-button>下一张</el-button> -->
|
64
|
|
- </div>
|
65
|
57
|
</van-tab>
|
66
|
58
|
</van-tabs>
|
67
|
|
-
|
|
59
|
+ <div class="fixedBox3" ref="butt">
|
|
60
|
+ <div @mousedown="down" @touchstart="down" @mousemove="move"
|
|
61
|
+ @touchmove="move" @mouseup="end" @touchend="end" @touchcancel="end">
|
|
62
|
+ <el-button type="primary">上一张</el-button>
|
|
63
|
+ </div>
|
|
64
|
+ </div>
|
|
65
|
+ <div class="fixedBox4" ref="butt2">
|
|
66
|
+ <div @mousedown="down2" @touchstart="down2" @mousemove="move2"
|
|
67
|
+ @touchmove="move2" @mouseup="end2" @touchend="end2" @touchcancel="end2">
|
|
68
|
+ <el-button type="primary">下一张</el-button>
|
|
69
|
+ </div>
|
|
70
|
+ </div>
|
68
|
71
|
</div>
|
69
|
72
|
</div>
|
70
|
73
|
</template>
|
|
@@ -94,9 +97,61 @@ export default {
|
94
|
97
|
patientid: 0,
|
95
|
98
|
data: [],
|
96
|
99
|
projectName: [],
|
97
|
|
- restatus: 0
|
|
100
|
+ restatus: 0,
|
|
101
|
+ nx: '',
|
|
102
|
+ ny: '',
|
|
103
|
+ dx: '',
|
|
104
|
+ dy: '',
|
|
105
|
+ xPum: '',
|
|
106
|
+ yPum: '',
|
|
107
|
+ position: {
|
|
108
|
+ x: 0,
|
|
109
|
+ y: 0
|
|
110
|
+ },
|
|
111
|
+ moveBtnbut: {},
|
|
112
|
+ keyBoardShow:true,
|
|
113
|
+ flags: false,
|
|
114
|
+ nx2: '',
|
|
115
|
+ ny2: '',
|
|
116
|
+ dx2: '',
|
|
117
|
+ dy2: '',
|
|
118
|
+ xPum2: '',
|
|
119
|
+ yPum2: '',
|
|
120
|
+ position2: {
|
|
121
|
+ x: 0,
|
|
122
|
+ y: 0
|
|
123
|
+ },
|
|
124
|
+ moveBtnbut2: {},
|
|
125
|
+
|
98
|
126
|
};
|
99
|
127
|
},
|
|
128
|
+ mounted(){
|
|
129
|
+ this.moveBtnbut = this.$refs.butt
|
|
130
|
+ if (sessionStorage.getItem('checkBtnTop2')) {
|
|
131
|
+ this.moveBtnbut.style.top = sessionStorage.getItem('checkBtnTop2')
|
|
132
|
+ this.moveBtnbut.style.bottom = 'initial'
|
|
133
|
+ }
|
|
134
|
+ if (sessionStorage.getItem('checkBtnLeft2')) {
|
|
135
|
+ this.moveBtnbut.style.left = sessionStorage.getItem('checkBtnLeft2')
|
|
136
|
+ }
|
|
137
|
+ this.moveBtnbut2 = this.$refs.butt2
|
|
138
|
+ if (sessionStorage.getItem('checkBtnTop3')) {
|
|
139
|
+ this.moveBtnbut2.style.top = sessionStorage.getItem('checkBtnTop3')
|
|
140
|
+ this.moveBtnbut2.style.bottom = 'initial'
|
|
141
|
+ }
|
|
142
|
+ if (sessionStorage.getItem('checkBtnLeft3')) {
|
|
143
|
+ this.moveBtnbut2.style.left = sessionStorage.getItem('checkBtnLeft3')
|
|
144
|
+ }
|
|
145
|
+ const originHeight = document.documentElement.clientHeight || document.body.clientHeight
|
|
146
|
+ window.addEventListener('resize', () => {
|
|
147
|
+ const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
|
|
148
|
+ if (resizeHeight < originHeight) {
|
|
149
|
+ this.keyBoardShow = false
|
|
150
|
+ } else {
|
|
151
|
+ this.keyBoardShow = true
|
|
152
|
+ }
|
|
153
|
+ }, false)
|
|
154
|
+ },
|
100
|
155
|
methods: {
|
101
|
156
|
GetAllProjectNameByDate(date, patientid) {
|
102
|
157
|
GetAllProjectNameByDate(date, patientid).then(response => {
|
|
@@ -178,7 +233,121 @@ export default {
|
178
|
233
|
this.activeTwo
|
179
|
234
|
);
|
180
|
235
|
}
|
181
|
|
- }
|
|
236
|
+ },
|
|
237
|
+ // 拖动
|
|
238
|
+ down (event) {
|
|
239
|
+ this.flags = true
|
|
240
|
+ var touch
|
|
241
|
+ if (event.touches) {
|
|
242
|
+ touch = event.touches[0]
|
|
243
|
+ } else {
|
|
244
|
+ touch = event
|
|
245
|
+ }
|
|
246
|
+ console.log('touch',touch);
|
|
247
|
+ this.position.x = touch.clientX
|
|
248
|
+ this.position.y = touch.clientY
|
|
249
|
+ this.dx = this.moveBtnbut.offsetLeft
|
|
250
|
+ this.dy = this.moveBtnbut.offsetTop
|
|
251
|
+ },
|
|
252
|
+ move (event) {
|
|
253
|
+ if (this.flags) {
|
|
254
|
+ var touch
|
|
255
|
+ if (event.touches) {
|
|
256
|
+ touch = event.touches[0]
|
|
257
|
+ } else {
|
|
258
|
+ touch = event
|
|
259
|
+ }
|
|
260
|
+ this.nx = touch.clientX - this.position.x
|
|
261
|
+ this.ny = touch.clientY - this.position.y
|
|
262
|
+ this.xPum = this.dx + this.nx
|
|
263
|
+ this.yPum = this.dy + this.ny
|
|
264
|
+ var clientWidth = document.documentElement.clientWidth
|
|
265
|
+ var clientHeight = document.documentElement.clientHeight
|
|
266
|
+ if (
|
|
267
|
+ this.xPum > 0 &&
|
|
268
|
+ this.xPum < clientWidth - this.moveBtnbut.offsetWidth
|
|
269
|
+ ) {
|
|
270
|
+ this.moveBtnbut.style.left = this.xPum + 'px'
|
|
271
|
+ }
|
|
272
|
+ if (
|
|
273
|
+ this.yPum > 0 &&
|
|
274
|
+ this.yPum < clientHeight - this.moveBtnbut.offsetHeight
|
|
275
|
+ ) {
|
|
276
|
+ this.moveBtnbut.style.top = this.yPum + 'px'
|
|
277
|
+ }
|
|
278
|
+
|
|
279
|
+ // 阻止页面的滑动默认事件
|
|
280
|
+ document.addEventListener('touchmove', this.handler, {
|
|
281
|
+ passive: false
|
|
282
|
+ })
|
|
283
|
+ }
|
|
284
|
+ },
|
|
285
|
+ // 鼠标释放时候的函数
|
|
286
|
+ end () {
|
|
287
|
+ this.flags = false
|
|
288
|
+ sessionStorage.setItem('checkBtnTop2', this.moveBtnbut.style.top)
|
|
289
|
+ sessionStorage.setItem('checkBtnLeft2', this.moveBtnbut.style.left)
|
|
290
|
+ document.addEventListener('touchmove', this.handler, {
|
|
291
|
+ passive: false
|
|
292
|
+ })
|
|
293
|
+ },
|
|
294
|
+ // 拖动
|
|
295
|
+ down2 (event) {
|
|
296
|
+ this.flags = true
|
|
297
|
+ var touch
|
|
298
|
+ if (event.touches) {
|
|
299
|
+ touch = event.touches[0]
|
|
300
|
+ } else {
|
|
301
|
+ touch = event
|
|
302
|
+ }
|
|
303
|
+ console.log('touch',touch);
|
|
304
|
+ this.position2.x = touch.clientX
|
|
305
|
+ this.position2.y = touch.clientY
|
|
306
|
+ this.dx2 = this.moveBtnbut2.offsetLeft
|
|
307
|
+ this.dy2 = this.moveBtnbut2.offsetTop
|
|
308
|
+ },
|
|
309
|
+ move2 (event) {
|
|
310
|
+ if (this.flags) {
|
|
311
|
+ var touch
|
|
312
|
+ if (event.touches) {
|
|
313
|
+ touch = event.touches[0]
|
|
314
|
+ } else {
|
|
315
|
+ touch = event
|
|
316
|
+ }
|
|
317
|
+ this.nx2 = touch.clientX - this.position2.x
|
|
318
|
+ this.ny2 = touch.clientY - this.position2.y
|
|
319
|
+ this.xPum2 = this.dx2 + this.nx2
|
|
320
|
+ this.yPum2 = this.dy2 + this.ny2
|
|
321
|
+ var clientWidth = document.documentElement.clientWidth
|
|
322
|
+ var clientHeight = document.documentElement.clientHeight
|
|
323
|
+ if (
|
|
324
|
+ this.xPum2 > 0 &&
|
|
325
|
+ this.xPum2 < clientWidth - this.moveBtnbut2.offsetWidth
|
|
326
|
+ ) {
|
|
327
|
+ this.moveBtnbut2.style.left = this.xPum2 + 'px'
|
|
328
|
+ }
|
|
329
|
+ if (
|
|
330
|
+ this.yPum2 > 0 &&
|
|
331
|
+ this.yPum2 < clientHeight - this.moveBtnbut2.offsetHeight
|
|
332
|
+ ) {
|
|
333
|
+ this.moveBtnbut2.style.top = this.yPum2 + 'px'
|
|
334
|
+ }
|
|
335
|
+
|
|
336
|
+ // 阻止页面的滑动默认事件
|
|
337
|
+ document.addEventListener('touchmove', this.handler, {
|
|
338
|
+ passive: false
|
|
339
|
+ })
|
|
340
|
+ }
|
|
341
|
+ },
|
|
342
|
+ // 鼠标释放时候的函数
|
|
343
|
+ end2 () {
|
|
344
|
+ this.flags = false
|
|
345
|
+ sessionStorage.setItem('checkBtnTop3', this.moveBtnbut2.style.top)
|
|
346
|
+ sessionStorage.setItem('checkBtnLeft3', this.moveBtnbut2.style.left)
|
|
347
|
+ document.addEventListener('touchmove', this.handler, {
|
|
348
|
+ passive: false
|
|
349
|
+ })
|
|
350
|
+ },
|
182
|
351
|
},
|
183
|
352
|
created() {
|
184
|
353
|
var patientid = this.$route.query.patientid ? this.$route.query.patientid : this.$route.query.patient_id;
|
|
@@ -291,6 +460,18 @@ export default {
|
291
|
460
|
}
|
292
|
461
|
}
|
293
|
462
|
}
|
|
463
|
+.fixedBox3{
|
|
464
|
+ position: fixed;
|
|
465
|
+ bottom: 1.2rem;
|
|
466
|
+ right: 0.2rem;
|
|
467
|
+ z-index: 5;
|
|
468
|
+}
|
|
469
|
+.fixedBox4{
|
|
470
|
+ position: fixed;
|
|
471
|
+ bottom: 0.625rem;
|
|
472
|
+ right: 0.2rem;
|
|
473
|
+ z-index: 5;
|
|
474
|
+}
|
294
|
475
|
</style>
|
295
|
476
|
|
296
|
477
|
<style lang="scss">
|