safecheck-client 3.0.39-75 → 3.0.39-77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "safecheck-client",
3
3
  "//": "主分支版本别乱升,测试包的版本直接发包(建议使用1.XX.XX-XXX格式作为测试包,不要频繁升级第三位版本号),别提交版本号。切了分支切记把主分支版本升了,保证主分支始终是最高版本!!!!!",
4
- "version": "3.0.39-75",
4
+ "version": "3.0.39-77",
5
5
  "description": "安检模块 前端组件",
6
6
  "author": "丁新 <417755458@qq.com>",
7
7
  "license": "ISC",
@@ -104,13 +104,13 @@
104
104
  "sinon-chai": "^2.8.0",
105
105
  "style": "0.0.3",
106
106
  "style-loader": "^0.20.3",
107
- "system-clients": "3.2.80",
107
+ "system-clients": "4.0.13",
108
108
  "system-phone": "1.2.100",
109
109
  "telephone-clients": "1.1.27",
110
110
  "terser-webpack-plugin-legacy": "^1.2.5",
111
111
  "url-loader": "^0.5.7",
112
112
  "vue-amap": "0.5.10",
113
- "vue-client": "1.24.125",
113
+ "vue-client": "1.25.33",
114
114
  "vue-hot-reload-api": "^1.2.0",
115
115
  "vue-html-loader": "^1.0.0",
116
116
  "vue-loader": "^8.2.1",
@@ -1,218 +1,218 @@
1
- <template>
2
- <div>
3
- <img :src="src" :alt="alt" @click.stop="open()" :width="width" :height="height" title="点击查看图片"
4
- :id="'vc-imgself-img-'+attach">
5
- <div class="full-img" v-show="show" @contextmenu.prevent.stop="clearStyle">
6
- <img :src="src2" alt="" class="img-state" :alt="alt || ''" @mousewheel="bigimg(this)" id="image" draggable="false"
7
- @mousedown.prevent="dropImage" style="position:fixed">
8
- <div class="btns row">
9
- <button type="button" name="button" class="btn btn-primary" @click.stop="leftRevolve()">向左旋转</button>
10
- <button type="button" name="button" class="btn btn-primary" @click.stop="rightRevolve()">向右旋转</button>
11
- <button type="button" name="button" class="btn btn-primary" @click.stop="close()">关闭</button>
12
- <button type="button" v-if="list.length>0" name="button" class="btn btn-primary" @click.stop="previousPage()">上一页</button>
13
- <button type="button" v-if="list.length>0" name="button" class="btn btn-primary" @click.stop="nextPage()">下一页</button>
14
- </div>
15
- </div>
16
- </div>
17
- </template>
18
-
19
- <script>
20
- import $ from 'jquery'
21
-
22
- export default {
23
- props: {
24
- src: {
25
- type: String
26
- },
27
- width: {
28
- default: 60
29
- },
30
- height: {
31
- default: 60
32
- },
33
- alt: {
34
- default: '图片加载失败'
35
- },
36
- attach: {
37
- type: String,
38
- default: 'name'
39
- },
40
- list: {
41
- type: Array,
42
- default: []
43
- }
44
- },
45
- data() {
46
- return {
47
- show: false,
48
- deg: 0,
49
- odiv: null,
50
- powerw: 1.0,
51
- container:null,
52
- positionX: null,
53
- positionY: null,
54
- powerh: 1.0,
55
- src2:""
56
- }
57
- },
58
- ready(){
59
- const elementsToMount = document.getElementsByClassName("full-img");
60
- this.container = document.createElement('div');
61
- this.container.style.height = '0px'
62
- // 将要挂载的元素放入新创建的 div中
63
- for (let i = 0; i < elementsToMount.length; i++) {
64
- this.container.appendChild(elementsToMount[i]);
65
- }
66
- // 将新创建的 div 挂载到 body 上
67
- document.body.appendChild(this.container);
68
- this.src2=this.src
69
- },
70
- beforeDestroy(){
71
- // 销毁挂载的
72
- if (this.container && this.container.parentNode) {
73
- this.container.parentNode.removeChild(this.container);
74
- }
75
- },
76
- methods: {
77
- nextPage() {
78
- console.log(this.list)
79
- //当前图片,是最后一张图片
80
- if (this.src2=== this.list[this.list.length - 1].f_overall_path) {
81
- this.src2= this.list[0].f_overall_path
82
- } else {
83
- for (let i = 0; i < this.list.length; i++) {
84
- if (this.src2=== this.list[i].f_overall_path) {
85
- this.src2= this.list[i + 1].f_overall_path
86
- break
87
- }
88
- }
89
- }
90
-
91
- },
92
- previousPage() {
93
- console.log(this.list)
94
- //当前图片,是第一张图片
95
- if (this.src2 === this.list[0].f_overall_path) {
96
- this.src2= this.list[this.list.length - 1].f_overall_path
97
- } else {
98
- for (let i = 0; i < this.list.length; i++) {
99
- if (this.src2=== this.list[i].f_overall_path) {
100
- this.src2= this.list[i - 1].f_overall_path
101
- break
102
- }
103
- }
104
- }
105
- },
106
- clearStyle(e){
107
- if (e === null) {
108
- return
109
- }
110
- this.odiv = document.getElementById('image')
111
- this.odiv.style.left = 500 + 'px';
112
- this.odiv.style.top = -150 + 'px';
113
- },
114
- bigimg() {
115
- if (event.wheelDelta > 0) {
116
- this.powerh = this.powerh * 1.15
117
- this.powerw = 1.15 * this.powerw
118
- } else {
119
- this.powerh = this.powerh * 0.85
120
- this.powerw = 0.85 * this.powerw
121
- }
122
- this.imgState()
123
- },
124
- dropImage(e) {
125
- if (e === null) {
126
- return
127
- }
128
- this.odiv = e.target;
129
- let disX = e.clientX - this.odiv.offsetLeft;
130
- let disY = e.clientY - this.odiv.offsetTop;
131
- document.onmousemove = (e) => {
132
- let left = e.clientX - disX;
133
- let top = e.clientY - disY;
134
- this.positionX = top;
135
- this.positionY = left;
136
- this.odiv.style.left = left + 'px';
137
- this.odiv.style.top = top + 'px';
138
- };
139
- document.onmouseup = (e) => {
140
- document.onmousemove = null;
141
- document.onmouseup = null;
142
- };
143
- },
144
- open() {
145
- this.deg = 0
146
- this.powerw = 0.7
147
- this.powerh = 0.8
148
- $('.full-img').css({
149
- 'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
150
- })
151
- $('.container').css({
152
- 'opacity': '1'
153
- })
154
- this.show = true
155
- },
156
- close() {
157
- this.show = false
158
- },
159
- leftRevolve() {
160
- //tag
161
- this.deg -= 90
162
- this.imgState()
163
- },
164
- rightRevolve() {
165
- //tag
166
- this.deg += 90
167
- this.imgState()
168
- },
169
- imgState() {
170
- $('.img-state').css({
171
- 'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
172
- })
173
-
174
- }
175
- },
176
- watch:{
177
- 'src'(val){
178
- if(val){
179
- this.src2 = val
180
- }
181
- }
182
- }
183
- }
184
- </script>
185
- <style media="screen" scoped>
186
- .full-img {
187
- position: fixed;
188
- width: 100%;
189
- /*height: 1000px;*/
190
- overflow: hidden;
191
- top: 0;
192
- bottom: 0;
193
- left: 0;
194
- right: 0;
195
- z-index: 1070;
196
- opacity: 1;
197
- background: rgba(0, 0, 0, 0.8);
198
- display: flex;
199
- flex-direction: column;
200
- justify-content: center;
201
- align-items: center;
202
- color: #fff;
203
- }
204
-
205
- .btns {
206
- position: fixed;
207
- bottom: 100px;
208
- height: auto;
209
- }
210
-
211
- .btns button {
212
- margin-right: 20px;
213
- }
214
-
215
- .img-state {
216
-
217
- }
218
- </style>
1
+ <template>
2
+ <div>
3
+ <img :src="src" :alt="alt" @click.stop="open()" :width="width" :height="height" title="点击查看图片"
4
+ :id="'vc-imgself-img-'+attach">
5
+ <div class="full-img" v-show="show" @contextmenu.prevent.stop="clearStyle">
6
+ <img :src="src2" alt="" class="img-state" :alt="alt || ''" @mousewheel="bigimg(this)" id="image" draggable="false"
7
+ @mousedown.prevent="dropImage" style="position:fixed">
8
+ <div class="btns row">
9
+ <button type="button" name="button" class="btn btn-primary" @click.stop="leftRevolve()">向左旋转</button>
10
+ <button type="button" name="button" class="btn btn-primary" @click.stop="rightRevolve()">向右旋转</button>
11
+ <button type="button" name="button" class="btn btn-primary" @click.stop="close()">关闭</button>
12
+ <button type="button" v-if="list.length>0" name="button" class="btn btn-primary" @click.stop="previousPage()">上一页</button>
13
+ <button type="button" v-if="list.length>0" name="button" class="btn btn-primary" @click.stop="nextPage()">下一页</button>
14
+ </div>
15
+ </div>
16
+ </div>
17
+ </template>
18
+
19
+ <script>
20
+ import $ from 'jquery'
21
+
22
+ export default {
23
+ props: {
24
+ src: {
25
+ type: String
26
+ },
27
+ width: {
28
+ default: 60
29
+ },
30
+ height: {
31
+ default: 60
32
+ },
33
+ alt: {
34
+ default: '图片加载失败'
35
+ },
36
+ attach: {
37
+ type: String,
38
+ default: 'name'
39
+ },
40
+ list: {
41
+ type: Array,
42
+ default: []
43
+ }
44
+ },
45
+ data() {
46
+ return {
47
+ show: false,
48
+ deg: 0,
49
+ odiv: null,
50
+ powerw: 1.0,
51
+ container:null,
52
+ positionX: null,
53
+ positionY: null,
54
+ powerh: 1.0,
55
+ src2:""
56
+ }
57
+ },
58
+ ready(){
59
+ const elementsToMount = document.getElementsByClassName("full-img");
60
+ this.container = document.createElement('div');
61
+ this.container.style.height = '0px'
62
+ // 将要挂载的元素放入新创建的 div中
63
+ for (let i = 0; i < elementsToMount.length; i++) {
64
+ this.container.appendChild(elementsToMount[i]);
65
+ }
66
+ // 将新创建的 div 挂载到 body 上
67
+ document.body.appendChild(this.container);
68
+ this.src2=this.src
69
+ },
70
+ beforeDestroy(){
71
+ // 销毁挂载的
72
+ if (this.container && this.container.parentNode) {
73
+ this.container.parentNode.removeChild(this.container);
74
+ }
75
+ },
76
+ methods: {
77
+ nextPage() {
78
+ console.log(this.list)
79
+ //当前图片,是最后一张图片
80
+ if (this.src2=== this.list[this.list.length - 1].f_overall_path) {
81
+ this.src2= this.list[0].f_overall_path
82
+ } else {
83
+ for (let i = 0; i < this.list.length; i++) {
84
+ if (this.src2=== this.list[i].f_overall_path) {
85
+ this.src2= this.list[i + 1].f_overall_path
86
+ break
87
+ }
88
+ }
89
+ }
90
+
91
+ },
92
+ previousPage() {
93
+ console.log(this.list)
94
+ //当前图片,是第一张图片
95
+ if (this.src2 === this.list[0].f_overall_path) {
96
+ this.src2= this.list[this.list.length - 1].f_overall_path
97
+ } else {
98
+ for (let i = 0; i < this.list.length; i++) {
99
+ if (this.src2=== this.list[i].f_overall_path) {
100
+ this.src2= this.list[i - 1].f_overall_path
101
+ break
102
+ }
103
+ }
104
+ }
105
+ },
106
+ clearStyle(e){
107
+ if (e === null) {
108
+ return
109
+ }
110
+ this.odiv = document.getElementById('image')
111
+ this.odiv.style.left = 500 + 'px';
112
+ this.odiv.style.top = -150 + 'px';
113
+ },
114
+ bigimg() {
115
+ if (event.wheelDelta > 0) {
116
+ this.powerh = this.powerh * 1.15
117
+ this.powerw = 1.15 * this.powerw
118
+ } else {
119
+ this.powerh = this.powerh * 0.85
120
+ this.powerw = 0.85 * this.powerw
121
+ }
122
+ this.imgState()
123
+ },
124
+ dropImage(e) {
125
+ if (e === null) {
126
+ return
127
+ }
128
+ this.odiv = e.target;
129
+ let disX = e.clientX - this.odiv.offsetLeft;
130
+ let disY = e.clientY - this.odiv.offsetTop;
131
+ document.onmousemove = (e) => {
132
+ let left = e.clientX - disX;
133
+ let top = e.clientY - disY;
134
+ this.positionX = top;
135
+ this.positionY = left;
136
+ this.odiv.style.left = left + 'px';
137
+ this.odiv.style.top = top + 'px';
138
+ };
139
+ document.onmouseup = (e) => {
140
+ document.onmousemove = null;
141
+ document.onmouseup = null;
142
+ };
143
+ },
144
+ open() {
145
+ this.deg = 0
146
+ this.powerw = 0.7
147
+ this.powerh = 0.8
148
+ $('.full-img').css({
149
+ 'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
150
+ })
151
+ $('.container').css({
152
+ 'opacity': '1'
153
+ })
154
+ this.show = true
155
+ },
156
+ close() {
157
+ this.show = false
158
+ },
159
+ leftRevolve() {
160
+ //tag
161
+ this.deg -= 90
162
+ this.imgState()
163
+ },
164
+ rightRevolve() {
165
+ //tag
166
+ this.deg += 90
167
+ this.imgState()
168
+ },
169
+ imgState() {
170
+ $('.img-state').css({
171
+ 'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
172
+ })
173
+
174
+ }
175
+ },
176
+ watch:{
177
+ 'src'(val){
178
+ if(val){
179
+ this.src2 = val
180
+ }
181
+ }
182
+ }
183
+ }
184
+ </script>
185
+ <style media="screen" scoped>
186
+ .full-img {
187
+ position: fixed;
188
+ width: 100%;
189
+ /*height: 1000px;*/
190
+ overflow: hidden;
191
+ top: 0;
192
+ bottom: 0;
193
+ left: 0;
194
+ right: 0;
195
+ z-index: 1070;
196
+ opacity: 1;
197
+ background: rgba(0, 0, 0, 0.8);
198
+ display: flex;
199
+ flex-direction: column;
200
+ justify-content: center;
201
+ align-items: center;
202
+ color: #fff;
203
+ }
204
+
205
+ .btns {
206
+ position: fixed;
207
+ bottom: 100px;
208
+ height: auto;
209
+ }
210
+
211
+ .btns button {
212
+ margin-right: 20px;
213
+ }
214
+
215
+ .img-state {
216
+
217
+ }
218
+ </style>