vue2-client 1.15.25 → 1.15.26-1

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.
@@ -1,166 +1,166 @@
1
- <template>
2
- <div>
3
- <a-row type="flex" justfy="space-around">
4
- <template v-for="(item, index) in config">
5
- <!-- 展示项 -->
6
- <a-col :key="'col' + index" :span="Math.floor(24 / config.length)">
7
- <div class="item">
8
- <!-- 标题 -->
9
- <p class="label">{{ item.label }}</p>
10
- <!-- 内容 - 进度条 -->
11
- <template v-if="item.type === 'percent'">
12
- <p class="value" :style="'color: ' + determineColor(data[item.key])">{{ data[item.key] }}%</p>
13
- </template>
14
- <!-- 内容 - 非进度条 -->
15
- <template v-else>
16
- <p class="value" :style="item.style ? item.style : ''">{{ data[item.key] }}</p>
17
- </template>
18
- </div>
19
- </a-col>
20
- <!-- 分割线 -->
21
- <a-col :key="'col' + index + 'after'" :span="1" v-if="index !== config.length - 1" class="divider-col">
22
- <a-divider type="vertical" class="divider"/>
23
- </a-col>
24
- </template>
25
- </a-row>
26
- </div>
27
- </template>
28
-
29
- <script>
30
-
31
- import { getConfigByName } from '@vue2-client/services/api/common'
32
-
33
- export default {
34
- name: 'XSimpleDescriptions',
35
- props: {
36
- // 配置
37
- dataConfig: {
38
- type: Array,
39
- default: undefined
40
- },
41
- // 数据
42
- dataContent: {
43
- type: Object,
44
- default: undefined
45
- },
46
- // 配置名
47
- dataConfigName: {
48
- type: String,
49
- default: undefined
50
- },
51
- // 服务名
52
- serviceName: {
53
- type: String,
54
- default: process.env.VUE_APP_SYSTEM_NAME
55
- }
56
- },
57
- data () {
58
- return {
59
- // 配置
60
- config: [],
61
- // 数据
62
- data: {},
63
- }
64
- },
65
- mounted () {
66
- // 初始化配置
67
- if (this.dataConfig) {
68
- this.config = this.dataConfig
69
- } else if (this.dataConfigName) {
70
- getConfigByName(this.dataConfigName, this.serviceName, (res) => {
71
- this.config = res.config
72
- })
73
- } else {
74
- this.config = [
75
- {
76
- label: '未能正确获取配置',
77
- key: 'totalUser'
78
- },
79
- {
80
- label: '未能正确获取配置',
81
- key: 'totalResidentArea'
82
- },
83
- {
84
- label: '未能正确获取配置',
85
- key: 'doneNum'
86
- },
87
- {
88
- label: '未能正确获取配置',
89
- key: 'todoNum'
90
- },
91
- {
92
- label: '未能正确获取配置',
93
- key: 'ratio',
94
- type: 'percent'
95
- }
96
- ]
97
- }
98
-
99
- // 初始化数据
100
- if (this.dataContent) {
101
- this.data = this.dataContent
102
- } else {
103
- this.data = {
104
- totalUser: 0,
105
- totalResidentArea: 0,
106
- doneNum: 0,
107
- todoNum: 0,
108
- ratio: 20
109
- }
110
- }
111
- },
112
- methods: {
113
- // 根据完成率决定颜色
114
- determineColor (ratio) {
115
- let result
116
- if (ratio >= 90) {
117
- result = 'rgb( 1,245, 38 )'
118
- } else if (ratio >= 75) {
119
- result = 'rgb( 139,245, 0)'
120
- } else if (ratio >= 40) {
121
- result = 'rgb(245,163, 0)'
122
- } else if (ratio >= 20) {
123
- result = 'rgb(244, 96, 0)'
124
- } else {
125
- result = 'rgb(255, 0, 0)'
126
- }
127
- return result
128
- }
129
- },
130
- watch: {
131
- dataContent: {
132
- handler (newValue) {
133
- this.data = newValue
134
- },
135
- deep: true
136
- }
137
- }
138
- }
139
- </script>
140
-
141
- <style lang="less" scoped>
142
- .item {
143
- padding: 5%;
144
-
145
- .label {
146
- color: rgba(117, 117, 117, 0.8);
147
- text-align: center;
148
- }
149
-
150
- .value {
151
- color: rgb( 51,157,255 );
152
- font-size: 1.6em;
153
- text-align: center;
154
- }
155
- }
156
-
157
- .divider-col {
158
- display: flex;
159
- justify-content: center;
160
-
161
- .divider {
162
- margin-top: 35%;
163
- height: 40px;
164
- }
165
- }
166
- </style>
1
+ <template>
2
+ <div>
3
+ <a-row type="flex" justfy="space-around">
4
+ <template v-for="(item, index) in config">
5
+ <!-- 展示项 -->
6
+ <a-col :key="'col' + index" :span="Math.floor(24 / config.length)">
7
+ <div class="item">
8
+ <!-- 标题 -->
9
+ <p class="label">{{ item.label }}</p>
10
+ <!-- 内容 - 进度条 -->
11
+ <template v-if="item.type === 'percent'">
12
+ <p class="value" :style="'color: ' + determineColor(data[item.key])">{{ data[item.key] }}%</p>
13
+ </template>
14
+ <!-- 内容 - 非进度条 -->
15
+ <template v-else>
16
+ <p class="value" :style="item.style ? item.style : ''">{{ data[item.key] }}</p>
17
+ </template>
18
+ </div>
19
+ </a-col>
20
+ <!-- 分割线 -->
21
+ <a-col :key="'col' + index + 'after'" :span="1" v-if="index !== config.length - 1" class="divider-col">
22
+ <a-divider type="vertical" class="divider"/>
23
+ </a-col>
24
+ </template>
25
+ </a-row>
26
+ </div>
27
+ </template>
28
+
29
+ <script>
30
+
31
+ import { getConfigByName } from '@vue2-client/services/api/common'
32
+
33
+ export default {
34
+ name: 'XSimpleDescriptions',
35
+ props: {
36
+ // 配置
37
+ dataConfig: {
38
+ type: Array,
39
+ default: undefined
40
+ },
41
+ // 数据
42
+ dataContent: {
43
+ type: Object,
44
+ default: undefined
45
+ },
46
+ // 配置名
47
+ dataConfigName: {
48
+ type: String,
49
+ default: undefined
50
+ },
51
+ // 服务名
52
+ serviceName: {
53
+ type: String,
54
+ default: process.env.VUE_APP_SYSTEM_NAME
55
+ }
56
+ },
57
+ data () {
58
+ return {
59
+ // 配置
60
+ config: [],
61
+ // 数据
62
+ data: {},
63
+ }
64
+ },
65
+ mounted () {
66
+ // 初始化配置
67
+ if (this.dataConfig) {
68
+ this.config = this.dataConfig
69
+ } else if (this.dataConfigName) {
70
+ getConfigByName(this.dataConfigName, this.serviceName, (res) => {
71
+ this.config = res.config
72
+ })
73
+ } else {
74
+ this.config = [
75
+ {
76
+ label: '未能正确获取配置',
77
+ key: 'totalUser'
78
+ },
79
+ {
80
+ label: '未能正确获取配置',
81
+ key: 'totalResidentArea'
82
+ },
83
+ {
84
+ label: '未能正确获取配置',
85
+ key: 'doneNum'
86
+ },
87
+ {
88
+ label: '未能正确获取配置',
89
+ key: 'todoNum'
90
+ },
91
+ {
92
+ label: '未能正确获取配置',
93
+ key: 'ratio',
94
+ type: 'percent'
95
+ }
96
+ ]
97
+ }
98
+
99
+ // 初始化数据
100
+ if (this.dataContent) {
101
+ this.data = this.dataContent
102
+ } else {
103
+ this.data = {
104
+ totalUser: 0,
105
+ totalResidentArea: 0,
106
+ doneNum: 0,
107
+ todoNum: 0,
108
+ ratio: 20
109
+ }
110
+ }
111
+ },
112
+ methods: {
113
+ // 根据完成率决定颜色
114
+ determineColor (ratio) {
115
+ let result
116
+ if (ratio >= 90) {
117
+ result = 'rgb( 1,245, 38 )'
118
+ } else if (ratio >= 75) {
119
+ result = 'rgb( 139,245, 0)'
120
+ } else if (ratio >= 40) {
121
+ result = 'rgb(245,163, 0)'
122
+ } else if (ratio >= 20) {
123
+ result = 'rgb(244, 96, 0)'
124
+ } else {
125
+ result = 'rgb(255, 0, 0)'
126
+ }
127
+ return result
128
+ }
129
+ },
130
+ watch: {
131
+ dataContent: {
132
+ handler (newValue) {
133
+ this.data = newValue
134
+ },
135
+ deep: true
136
+ }
137
+ }
138
+ }
139
+ </script>
140
+
141
+ <style lang="less" scoped>
142
+ .item {
143
+ padding: 5%;
144
+
145
+ .label {
146
+ color: rgba(117, 117, 117, 0.8);
147
+ text-align: center;
148
+ }
149
+
150
+ .value {
151
+ color: rgb( 51,157,255 );
152
+ font-size: 1.6em;
153
+ text-align: center;
154
+ }
155
+ }
156
+
157
+ .divider-col {
158
+ display: flex;
159
+ justify-content: center;
160
+
161
+ .divider {
162
+ margin-top: 35%;
163
+ height: 40px;
164
+ }
165
+ }
166
+ </style>
@@ -39,6 +39,7 @@
39
39
  v-model="data[item.field]"
40
40
  :disabled="item.disabled"
41
41
  class="form-input"
42
+ @change="bottomFieldsChange($event,item)"
42
43
  />
43
44
  </a-col>
44
45
  </a-row>
@@ -110,6 +111,11 @@ export default {
110
111
  console.warn('页面数据 ====》' + JSON.stringify(this.data))
111
112
  console.warn('选择的支付方式 ====》' + this.selectedMethod)
112
113
  this.$emit('action', { key, data: this.data, method: this.selectedMethod })
114
+ },
115
+ bottomFieldsChange (e, item) {
116
+ if (item.changeEventName && this.$listeners[item.changeEventName]) {
117
+ this.$emit(item.changeEventName, e, item)
118
+ }
113
119
  }
114
120
  },
115
121
  watch: {
@@ -8,7 +8,7 @@
8
8
  @cancel="handleCancel"
9
9
  :maskClosable="false"
10
10
  >
11
- <div class="scanner-container">
11
+ <div class="scanner-container" >
12
12
  <a-row>
13
13
  <a-space>
14
14
  <a-button type="primary" @click="capturePhoto">拍照</a-button>
@@ -19,6 +19,7 @@
19
19
  <a-button type="primary" @click="openApp">开启程序</a-button>
20
20
  <a-button v-if="showid" type="primary" @click="startReadCard">读身份证</a-button>
21
21
  <a-button v-if="showid" @click="stopReadCard">停止读卡</a-button>
22
+ <a-button type="primary" @click="rotateCamera">画面旋转</a-button>
22
23
  </a-space>
23
24
  </a-row>
24
25
  <a-row>
@@ -43,12 +44,15 @@
43
44
  :disabled="true"></a-textarea>
44
45
  </a-col>
45
46
  <a-col :span="24">
46
- <img
47
- id="cam"
48
- :src="cameraurl"
49
- width="100%"
50
- height="540"
51
- alt=""/>
47
+ <div
48
+ :style="{...heightStyle, display: 'flex', justifyContent: 'center', alignItems: 'center'}">
49
+ <img
50
+ id="cam"
51
+ :src="cameraurl"
52
+ :style="rotateStyle"
53
+ class="video"
54
+ alt=""/>
55
+ </div>
52
56
  </a-col>
53
57
  <a-col :span="24" v-if="showid">
54
58
  <a-form layout="horizontal">
@@ -145,9 +149,11 @@ export default {
145
149
  },
146
150
  callback: {},
147
151
  context: 0,
152
+ rotateAngle: 0,
148
153
  base_offset: 0,
149
154
  orgdrawwidth: 0,
150
155
  orgdrawheight: 0,
156
+ containerHeight: 440,
151
157
 
152
158
  CLT_MSG: {
153
159
  // 打开相机 cap:相机ID
@@ -234,8 +240,29 @@ export default {
234
240
  }
235
241
  }
236
242
  },
237
-
243
+ computed: {
244
+ rotateStyle () {
245
+ return {
246
+ transform: `rotate(${this.rotateAngle}deg)`,
247
+ transition: 'transform 0.5s ease',
248
+ maxHeight: `${this.rotateAngle % 180 === 0 ? '440px' : '660px'}`
249
+ }
250
+ },
251
+ heightStyle () {
252
+ return {
253
+ width: '100%',
254
+ height: `${this.containerHeight}px`,
255
+ }
256
+ }
257
+ },
238
258
  methods: {
259
+ rotateCamera () {
260
+ console.log('>>> 旋转镜头')
261
+ // 每次点击增加 90 度,超过 360 度时归零
262
+ this.rotateAngle = (this.rotateAngle + 90) % 360
263
+ // 根据旋转角度设置不同的高度
264
+ this.containerHeight = this.rotateAngle % 180 === 0 ? 440 : 660
265
+ },
239
266
  // handleImgError (e) {
240
267
  // e.target.style.display = 'none'
241
268
  // },
@@ -419,14 +446,20 @@ export default {
419
446
  return
420
447
  }
421
448
  const param = {
422
- camidx: camidx
449
+ camidx: camidx,
450
+ image_process_info: {
451
+ cut_type: '0',
452
+ multi_object: '0',
453
+ rotate: `${this.rotateAngle}`,
454
+ },
423
455
  }
424
456
  const msg = await this.newInstancePost('http://127.0.0.1:38088/video=grabimage', param)
425
457
  if (msg.data.code != '0') {
426
458
  this.$message.info(msg.data.message)
427
459
  return
428
460
  }
429
- this.previewImage = 'data:image/jpg;base64,' + msg.data.photoBase64
461
+ console.log('msg========================>', msg)
462
+ this.previewImage = 'data:image/jpg;base64,' + msg.data.images[0].base64
430
463
  this.output('base64 长度 : ' + this.previewImage)
431
464
  this.$emit('photo-finish', { img: this.previewImage })
432
465
  this.name = ''
@@ -569,3 +602,14 @@ export default {
569
602
  }
570
603
  }
571
604
  </script>
605
+ <style lang="less" scoped>
606
+ .video {
607
+ width: 70%;
608
+ height: 440px;
609
+ display: flex;
610
+ flex-direction: column;
611
+ background-size: contain;
612
+ background-repeat: no-repeat;
613
+ background-position: center;
614
+ }
615
+ </style>