af-mobile-client-vue3 1.2.27 → 1.2.29
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/CLAUDE.md +184 -0
- package/package.json +1 -1
- package/src/components/core/ImageUploader/index.vue +159 -159
- package/src/components/data/XCellList/index.vue +9 -1
- package/src/components/data/XForm/index.vue +14 -1
- package/src/components/data/XFormGroup/index.vue +31 -22
- package/src/components/data/XOlMap/utils/wgs84ToGcj02.js +154 -154
- package/src/components/data/XReportForm/DateTimeSecondsPicker.vue +208 -0
- package/src/components/data/XReportForm/index.vue +86 -116
- package/src/styles/app.less +5 -0
- package/src/views/component/XCellListView/index.vue +93 -14
- package/src/views/component/XFormGroupView/index.vue +39 -2
- package/src/views/component/XFormView/index.vue +0 -17
- package/src/views/component/XOlMapView/XLocationPicker/index.vue +118 -118
- package/src/views/component/XFormView/oldindex.vue +0 -70
|
@@ -1,154 +1,154 @@
|
|
|
1
|
-
// 导入proj控件
|
|
2
|
-
import * as proj from 'ol/proj'
|
|
3
|
-
|
|
4
|
-
function forEachPoint(func) {
|
|
5
|
-
return function (input, opt_output, opt_dimension) {
|
|
6
|
-
const len = input.length
|
|
7
|
-
|
|
8
|
-
const dimension = opt_dimension || 2
|
|
9
|
-
let output
|
|
10
|
-
|
|
11
|
-
if (opt_output) {
|
|
12
|
-
output = opt_output
|
|
13
|
-
}
|
|
14
|
-
else {
|
|
15
|
-
if (dimension !== 2) {
|
|
16
|
-
output = input.slice()
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
output = [len]
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
for (let offset = 0; offset < len; offset += dimension) {
|
|
23
|
-
func(input, output, offset)
|
|
24
|
-
}
|
|
25
|
-
return output
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const gcj02 = {}
|
|
30
|
-
const PI = Math.PI
|
|
31
|
-
const AXIS = 6378245.0
|
|
32
|
-
// eslint-disable-next-line no-loss-of-precision
|
|
33
|
-
const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
|
|
34
|
-
|
|
35
|
-
function delta(wgLon, wgLat) {
|
|
36
|
-
let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
|
|
37
|
-
let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
|
|
38
|
-
const radLat = (wgLat / 180.0) * PI
|
|
39
|
-
let magic = Math.sin(radLat)
|
|
40
|
-
magic = 1 - OFFSET * magic * magic
|
|
41
|
-
const sqrtMagic = Math.sqrt(magic)
|
|
42
|
-
dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
|
|
43
|
-
dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
|
|
44
|
-
return [dLon, dLat]
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function outOfChina(lon, lat) {
|
|
48
|
-
if (lon < 72.004 || lon > 137.8347) {
|
|
49
|
-
return true
|
|
50
|
-
}
|
|
51
|
-
return lat < 0.8293 || lat > 55.8271
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function transformLat(x, y) {
|
|
55
|
-
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
|
|
56
|
-
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
57
|
-
ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
|
|
58
|
-
ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
|
|
59
|
-
return ret
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function transformLon(x, y) {
|
|
63
|
-
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
|
|
64
|
-
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
65
|
-
ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
|
|
66
|
-
ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
|
|
67
|
-
return ret
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
gcj02.toWGS84 = forEachPoint((input, output, offset) => {
|
|
71
|
-
let lng = input[offset]
|
|
72
|
-
let lat = input[offset + 1]
|
|
73
|
-
if (!outOfChina(lng, lat)) {
|
|
74
|
-
const deltaD = delta(lng, lat)
|
|
75
|
-
lng = lng - deltaD[0] // 改回减法
|
|
76
|
-
lat = lat - deltaD[1] // 改回减法
|
|
77
|
-
}
|
|
78
|
-
output[offset] = lng
|
|
79
|
-
output[offset + 1] = lat
|
|
80
|
-
})
|
|
81
|
-
|
|
82
|
-
gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
|
|
83
|
-
let lng = input[offset]
|
|
84
|
-
let lat = input[offset + 1]
|
|
85
|
-
if (!outOfChina(lng, lat)) {
|
|
86
|
-
const deltaD = delta(lng, lat)
|
|
87
|
-
lng = lng + deltaD[0] // 改回加法
|
|
88
|
-
lat = lat + deltaD[1] // 改回加法
|
|
89
|
-
}
|
|
90
|
-
output[offset] = lng
|
|
91
|
-
output[offset + 1] = lat
|
|
92
|
-
})
|
|
93
|
-
|
|
94
|
-
const sphericalMercator = {}
|
|
95
|
-
const RADIUS = 6378137
|
|
96
|
-
const MAX_LATITUDE = 85.0511287798
|
|
97
|
-
const RAD_PER_DEG = Math.PI / 180
|
|
98
|
-
|
|
99
|
-
sphericalMercator.forward = forEachPoint((input, output, offset) => {
|
|
100
|
-
const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
|
|
101
|
-
const sin = Math.sin(lat * RAD_PER_DEG)
|
|
102
|
-
output[offset] = RADIUS * input[offset] * RAD_PER_DEG
|
|
103
|
-
output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
|
|
104
|
-
})
|
|
105
|
-
|
|
106
|
-
sphericalMercator.inverse = forEachPoint((input, output, offset) => {
|
|
107
|
-
output[offset] = input[offset] / RADIUS / RAD_PER_DEG
|
|
108
|
-
output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
|
|
109
|
-
})
|
|
110
|
-
|
|
111
|
-
const projzh = {}
|
|
112
|
-
|
|
113
|
-
projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
|
|
114
|
-
const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
|
|
115
|
-
return projzh.ll2smerc(output, output, opt_dimension)
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
|
|
119
|
-
const output = projzh.smerc2ll(input, input, opt_dimension)
|
|
120
|
-
return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// smerc2gmerc 需要修改
|
|
124
|
-
|
|
125
|
-
projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
|
|
126
|
-
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
127
|
-
output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
|
|
128
|
-
return projzh.ll2smerc(output, output, opt_dimension)
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
// gmerc2smerc 需要修改
|
|
132
|
-
|
|
133
|
-
projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
|
|
134
|
-
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
135
|
-
output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
|
|
136
|
-
return projzh.ll2smerc(output, output, opt_dimension)
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
projzh.ll2smerc = sphericalMercator.forward
|
|
140
|
-
projzh.smerc2ll = sphericalMercator.inverse
|
|
141
|
-
|
|
142
|
-
// 定义WGS84转GCJ02的投影
|
|
143
|
-
const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
|
|
144
|
-
export const wgs84ToGcj02Projection = new proj.Projection({
|
|
145
|
-
code: 'WGS84-TO-GCJ02',
|
|
146
|
-
extent,
|
|
147
|
-
units: 'm',
|
|
148
|
-
})
|
|
149
|
-
|
|
150
|
-
// 添加投影和转换方法
|
|
151
|
-
proj.addProjection(wgs84ToGcj02Projection)
|
|
152
|
-
// 注意这里转换方法的顺序与原来相反
|
|
153
|
-
proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
|
|
154
|
-
proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
|
|
1
|
+
// 导入proj控件
|
|
2
|
+
import * as proj from 'ol/proj'
|
|
3
|
+
|
|
4
|
+
function forEachPoint(func) {
|
|
5
|
+
return function (input, opt_output, opt_dimension) {
|
|
6
|
+
const len = input.length
|
|
7
|
+
|
|
8
|
+
const dimension = opt_dimension || 2
|
|
9
|
+
let output
|
|
10
|
+
|
|
11
|
+
if (opt_output) {
|
|
12
|
+
output = opt_output
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
if (dimension !== 2) {
|
|
16
|
+
output = input.slice()
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
output = [len]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
for (let offset = 0; offset < len; offset += dimension) {
|
|
23
|
+
func(input, output, offset)
|
|
24
|
+
}
|
|
25
|
+
return output
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const gcj02 = {}
|
|
30
|
+
const PI = Math.PI
|
|
31
|
+
const AXIS = 6378245.0
|
|
32
|
+
// eslint-disable-next-line no-loss-of-precision
|
|
33
|
+
const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
|
|
34
|
+
|
|
35
|
+
function delta(wgLon, wgLat) {
|
|
36
|
+
let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
|
|
37
|
+
let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
|
|
38
|
+
const radLat = (wgLat / 180.0) * PI
|
|
39
|
+
let magic = Math.sin(radLat)
|
|
40
|
+
magic = 1 - OFFSET * magic * magic
|
|
41
|
+
const sqrtMagic = Math.sqrt(magic)
|
|
42
|
+
dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
|
|
43
|
+
dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
|
|
44
|
+
return [dLon, dLat]
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function outOfChina(lon, lat) {
|
|
48
|
+
if (lon < 72.004 || lon > 137.8347) {
|
|
49
|
+
return true
|
|
50
|
+
}
|
|
51
|
+
return lat < 0.8293 || lat > 55.8271
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function transformLat(x, y) {
|
|
55
|
+
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
|
|
56
|
+
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
57
|
+
ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
|
|
58
|
+
ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
|
|
59
|
+
return ret
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function transformLon(x, y) {
|
|
63
|
+
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
|
|
64
|
+
ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
|
|
65
|
+
ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
|
|
66
|
+
ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
|
|
67
|
+
return ret
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
gcj02.toWGS84 = forEachPoint((input, output, offset) => {
|
|
71
|
+
let lng = input[offset]
|
|
72
|
+
let lat = input[offset + 1]
|
|
73
|
+
if (!outOfChina(lng, lat)) {
|
|
74
|
+
const deltaD = delta(lng, lat)
|
|
75
|
+
lng = lng - deltaD[0] // 改回减法
|
|
76
|
+
lat = lat - deltaD[1] // 改回减法
|
|
77
|
+
}
|
|
78
|
+
output[offset] = lng
|
|
79
|
+
output[offset + 1] = lat
|
|
80
|
+
})
|
|
81
|
+
|
|
82
|
+
gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
|
|
83
|
+
let lng = input[offset]
|
|
84
|
+
let lat = input[offset + 1]
|
|
85
|
+
if (!outOfChina(lng, lat)) {
|
|
86
|
+
const deltaD = delta(lng, lat)
|
|
87
|
+
lng = lng + deltaD[0] // 改回加法
|
|
88
|
+
lat = lat + deltaD[1] // 改回加法
|
|
89
|
+
}
|
|
90
|
+
output[offset] = lng
|
|
91
|
+
output[offset + 1] = lat
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
const sphericalMercator = {}
|
|
95
|
+
const RADIUS = 6378137
|
|
96
|
+
const MAX_LATITUDE = 85.0511287798
|
|
97
|
+
const RAD_PER_DEG = Math.PI / 180
|
|
98
|
+
|
|
99
|
+
sphericalMercator.forward = forEachPoint((input, output, offset) => {
|
|
100
|
+
const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
|
|
101
|
+
const sin = Math.sin(lat * RAD_PER_DEG)
|
|
102
|
+
output[offset] = RADIUS * input[offset] * RAD_PER_DEG
|
|
103
|
+
output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
|
|
104
|
+
})
|
|
105
|
+
|
|
106
|
+
sphericalMercator.inverse = forEachPoint((input, output, offset) => {
|
|
107
|
+
output[offset] = input[offset] / RADIUS / RAD_PER_DEG
|
|
108
|
+
output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
|
|
109
|
+
})
|
|
110
|
+
|
|
111
|
+
const projzh = {}
|
|
112
|
+
|
|
113
|
+
projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
|
|
114
|
+
const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
|
|
115
|
+
return projzh.ll2smerc(output, output, opt_dimension)
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
|
|
119
|
+
const output = projzh.smerc2ll(input, input, opt_dimension)
|
|
120
|
+
return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// smerc2gmerc 需要修改
|
|
124
|
+
|
|
125
|
+
projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
|
|
126
|
+
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
127
|
+
output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
|
|
128
|
+
return projzh.ll2smerc(output, output, opt_dimension)
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// gmerc2smerc 需要修改
|
|
132
|
+
|
|
133
|
+
projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
|
|
134
|
+
let output = projzh.smerc2ll(input, input, opt_dimension)
|
|
135
|
+
output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
|
|
136
|
+
return projzh.ll2smerc(output, output, opt_dimension)
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
projzh.ll2smerc = sphericalMercator.forward
|
|
140
|
+
projzh.smerc2ll = sphericalMercator.inverse
|
|
141
|
+
|
|
142
|
+
// 定义WGS84转GCJ02的投影
|
|
143
|
+
const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
|
|
144
|
+
export const wgs84ToGcj02Projection = new proj.Projection({
|
|
145
|
+
code: 'WGS84-TO-GCJ02',
|
|
146
|
+
extent,
|
|
147
|
+
units: 'm',
|
|
148
|
+
})
|
|
149
|
+
|
|
150
|
+
// 添加投影和转换方法
|
|
151
|
+
proj.addProjection(wgs84ToGcj02Projection)
|
|
152
|
+
// 注意这里转换方法的顺序与原来相反
|
|
153
|
+
proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
|
|
154
|
+
proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { Field as vanField, Picker as vanPicker, Popup as vanPopup } from 'vant'
|
|
3
|
+
import { computed, ref, watch } from 'vue'
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
modelValue?: string | number | Date
|
|
7
|
+
label?: string
|
|
8
|
+
placeholder?: string
|
|
9
|
+
title?: string
|
|
10
|
+
format?: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
14
|
+
modelValue: undefined,
|
|
15
|
+
label: '选择时间',
|
|
16
|
+
placeholder: '请选择时间',
|
|
17
|
+
title: '选择完整时间',
|
|
18
|
+
format: 'YYYY-MM-DD HH:mm:ss',
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
const emit = defineEmits<{
|
|
22
|
+
'update:modelValue': [value: string]
|
|
23
|
+
'confirm': [value: string]
|
|
24
|
+
}>()
|
|
25
|
+
|
|
26
|
+
const showPicker = ref(false)
|
|
27
|
+
const columns = ref<any[]>([])
|
|
28
|
+
const selectedValues = ref<string[]>([])
|
|
29
|
+
|
|
30
|
+
const displayValue = computed(() => {
|
|
31
|
+
if (props.modelValue) {
|
|
32
|
+
const date = new Date(props.modelValue)
|
|
33
|
+
return formatDate(date, props.format)
|
|
34
|
+
}
|
|
35
|
+
return ''
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
watch(() => showPicker.value, (val) => {
|
|
39
|
+
if (val) {
|
|
40
|
+
columns.value = []
|
|
41
|
+
selectedValues.value = []
|
|
42
|
+
getColumns()
|
|
43
|
+
}
|
|
44
|
+
}, { immediate: true })
|
|
45
|
+
|
|
46
|
+
function formatDate(date: Date, format: string): string {
|
|
47
|
+
const year = date.getFullYear()
|
|
48
|
+
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
49
|
+
const day = String(date.getDate()).padStart(2, '0')
|
|
50
|
+
const hours = String(date.getHours()).padStart(2, '0')
|
|
51
|
+
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
52
|
+
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|
53
|
+
|
|
54
|
+
return format
|
|
55
|
+
.replace('YYYY', String(year))
|
|
56
|
+
.replace('YY', String(year).slice(-2))
|
|
57
|
+
.replace('MM', month)
|
|
58
|
+
.replace('DD', day)
|
|
59
|
+
.replace('HH', hours)
|
|
60
|
+
.replace('mm', minutes)
|
|
61
|
+
.replace('ss', seconds)
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function getColumns() {
|
|
65
|
+
const strtime = props.modelValue ? String(props.modelValue) : ''
|
|
66
|
+
|
|
67
|
+
let dateValues: Date
|
|
68
|
+
if (strtime) {
|
|
69
|
+
const date = new Date(strtime.replace(/-/g, '/'))
|
|
70
|
+
dateValues = date
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
dateValues = new Date()
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
const Y = dateValues.getFullYear()
|
|
77
|
+
const M = dateValues.getMonth()
|
|
78
|
+
const D = dateValues.getDate()
|
|
79
|
+
const h = dateValues.getHours()
|
|
80
|
+
const m = dateValues.getMinutes()
|
|
81
|
+
const s = dateValues.getSeconds()
|
|
82
|
+
|
|
83
|
+
// 生成年份列 (前后10年)
|
|
84
|
+
const year: any[] = []
|
|
85
|
+
const currentYear = new Date().getFullYear()
|
|
86
|
+
for (let i = currentYear - 10; i < currentYear + 10; i++) {
|
|
87
|
+
year.push({ text: i.toString(), value: i.toString() })
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// 生成月份列 (01-12)
|
|
91
|
+
const month: any[] = []
|
|
92
|
+
for (let i = 1; i <= 12; i++) {
|
|
93
|
+
const monthStr = i.toString().padStart(2, '0')
|
|
94
|
+
month.push({ text: monthStr, value: monthStr })
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// 生成日期列 (01-31,根据当前年月动态计算)
|
|
98
|
+
const daysInMonth = getCountDays(Y, M + 1)
|
|
99
|
+
const day: any[] = []
|
|
100
|
+
for (let i = 1; i <= daysInMonth; i++) {
|
|
101
|
+
const dayStr = i.toString().padStart(2, '0')
|
|
102
|
+
day.push({ text: dayStr, value: dayStr })
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// 生成小时列 (00-23)
|
|
106
|
+
const hour: any[] = []
|
|
107
|
+
for (let i = 0; i < 24; i++) {
|
|
108
|
+
const hourStr = i.toString().padStart(2, '0')
|
|
109
|
+
hour.push({ text: hourStr, value: hourStr })
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// 生成分钟列 (00-59)
|
|
113
|
+
const minute: any[] = []
|
|
114
|
+
for (let i = 0; i < 60; i++) {
|
|
115
|
+
const minuteStr = i.toString().padStart(2, '0')
|
|
116
|
+
minute.push({ text: minuteStr, value: minuteStr })
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// 生成秒钟列 (00-59)
|
|
120
|
+
const second: any[] = []
|
|
121
|
+
for (let i = 0; i < 60; i++) {
|
|
122
|
+
const secondStr = i.toString().padStart(2, '0')
|
|
123
|
+
second.push({ text: secondStr, value: secondStr })
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
columns.value = [year, month, day, hour, minute, second]
|
|
127
|
+
|
|
128
|
+
// 设置默认选中值
|
|
129
|
+
const _M = (M + 1).toString().padStart(2, '0')
|
|
130
|
+
const _D = D.toString().padStart(2, '0')
|
|
131
|
+
const _h = h.toString().padStart(2, '0')
|
|
132
|
+
const _m = m.toString().padStart(2, '0')
|
|
133
|
+
const _s = s.toString().padStart(2, '0')
|
|
134
|
+
|
|
135
|
+
selectedValues.value = [Y.toString(), _M, _D, _h, _m, _s]
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
function getCountDays(year: number, month: number): number {
|
|
139
|
+
const day = new Date(year, month, 0)
|
|
140
|
+
return day.getDate()
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
function onChange() {
|
|
144
|
+
// 当年月发生变化时,重新计算日期列
|
|
145
|
+
if (selectedValues.value.length >= 2) {
|
|
146
|
+
const year = Number.parseInt(selectedValues.value[0])
|
|
147
|
+
const month = Number.parseInt(selectedValues.value[1])
|
|
148
|
+
const currentDay = Number.parseInt(selectedValues.value[2])
|
|
149
|
+
|
|
150
|
+
const daysInMonth = getCountDays(year, month)
|
|
151
|
+
|
|
152
|
+
// 重新生成日期列
|
|
153
|
+
const dayColumn: any[] = []
|
|
154
|
+
for (let i = 1; i <= daysInMonth; i++) {
|
|
155
|
+
const dayStr = i.toString().padStart(2, '0')
|
|
156
|
+
dayColumn.push({ text: dayStr, value: dayStr })
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// 如果当前选中的日期超过了新月份的最大天数,调整为最大天数
|
|
160
|
+
if (currentDay > daysInMonth) {
|
|
161
|
+
selectedValues.value[2] = daysInMonth.toString().padStart(2, '0')
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
// 更新列
|
|
165
|
+
columns.value[2] = dayColumn
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
function onCancel() {
|
|
170
|
+
showPicker.value = false
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
function onConfirm() {
|
|
174
|
+
const endval = `${selectedValues.value[0]}-${selectedValues.value[1]}-${selectedValues.value[2]} ${selectedValues.value[3]}:${selectedValues.value[4]}:${selectedValues.value[5]}`
|
|
175
|
+
|
|
176
|
+
emit('update:modelValue', endval)
|
|
177
|
+
emit('confirm', endval)
|
|
178
|
+
showPicker.value = false
|
|
179
|
+
}
|
|
180
|
+
</script>
|
|
181
|
+
|
|
182
|
+
<template>
|
|
183
|
+
<div>
|
|
184
|
+
<van-field
|
|
185
|
+
v-model="displayValue"
|
|
186
|
+
:label="label"
|
|
187
|
+
:placeholder="placeholder"
|
|
188
|
+
readonly
|
|
189
|
+
is-link
|
|
190
|
+
@click="showPicker = true"
|
|
191
|
+
/>
|
|
192
|
+
|
|
193
|
+
<van-popup v-model:show="showPicker" position="bottom" round @close="onCancel">
|
|
194
|
+
<van-picker
|
|
195
|
+
v-model="selectedValues"
|
|
196
|
+
:title="title"
|
|
197
|
+
:columns="columns"
|
|
198
|
+
@change="onChange"
|
|
199
|
+
@cancel="onCancel"
|
|
200
|
+
@confirm="onConfirm"
|
|
201
|
+
/>
|
|
202
|
+
</van-popup>
|
|
203
|
+
</div>
|
|
204
|
+
</template>
|
|
205
|
+
|
|
206
|
+
<style scoped>
|
|
207
|
+
/* 可以根据需要添加自定义样式 */
|
|
208
|
+
</style>
|