Browse Source

Merge branch '20230223_pad_vue_new_branch' of http://git.shengws.com/csx/Pad_New into 20230223_pad_vue_new_branch

28169 1 year ago
parent
commit
7a84ddc1f5
1 changed files with 192 additions and 11 deletions
  1. 192 11
      src/pages/patientCenter/allCheck/index.vue

+ 192 - 11
src/pages/patientCenter/allCheck/index.vue View File

54
           <div class="nodata" v-else>
54
           <div class="nodata" v-else>
55
             <img src="../../../assets/images/none.png" alt />
55
             <img src="../../../assets/images/none.png" alt />
56
           </div>
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
         </van-tab>
57
         </van-tab>
66
       </van-tabs>
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
     </div>
71
     </div>
69
   </div>
72
   </div>
70
 </template>
73
 </template>
94
       patientid: 0,
97
       patientid: 0,
95
       data: [],
98
       data: [],
96
       projectName: [],
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
   methods: {
155
   methods: {
101
     GetAllProjectNameByDate(date, patientid) {
156
     GetAllProjectNameByDate(date, patientid) {
102
       GetAllProjectNameByDate(date, patientid).then(response => {
157
       GetAllProjectNameByDate(date, patientid).then(response => {
178
             this.activeTwo
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
   created() {
352
   created() {
184
     var patientid = this.$route.query.patientid ? this.$route.query.patientid : this.$route.query.patient_id;
353
     var patientid = this.$route.query.patientid ? this.$route.query.patientid : this.$route.query.patient_id;
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
 </style>
475
 </style>
295
 
476
 
296
 <style lang="scss">
477
 <style lang="scss">