kt-factor-legend 1.0.0

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.
Files changed (49) hide show
  1. package/index.html +13 -0
  2. package/package.json +35 -0
  3. package/public/wind-level/0.1.png +0 -0
  4. package/public/wind-level/0.png +0 -0
  5. package/public/wind-level/1.1.png +0 -0
  6. package/public/wind-level/1.png +0 -0
  7. package/public/wind-level/10.1.png +0 -0
  8. package/public/wind-level/10.png +0 -0
  9. package/public/wind-level/11.1.png +0 -0
  10. package/public/wind-level/11.png +0 -0
  11. package/public/wind-level/12.1.png +0 -0
  12. package/public/wind-level/12.png +0 -0
  13. package/public/wind-level/13.1.png +0 -0
  14. package/public/wind-level/13.png +0 -0
  15. package/public/wind-level/14.1.png +0 -0
  16. package/public/wind-level/14.png +0 -0
  17. package/public/wind-level/15.1.png +0 -0
  18. package/public/wind-level/15.png +0 -0
  19. package/public/wind-level/16.1.png +0 -0
  20. package/public/wind-level/16.png +0 -0
  21. package/public/wind-level/2.1.png +0 -0
  22. package/public/wind-level/2.png +0 -0
  23. package/public/wind-level/3.1.png +0 -0
  24. package/public/wind-level/3.png +0 -0
  25. package/public/wind-level/4.1.png +0 -0
  26. package/public/wind-level/4.png +0 -0
  27. package/public/wind-level/5.1.png +0 -0
  28. package/public/wind-level/5.png +0 -0
  29. package/public/wind-level/6.1.png +0 -0
  30. package/public/wind-level/6.png +0 -0
  31. package/public/wind-level/7.1.png +0 -0
  32. package/public/wind-level/7.png +0 -0
  33. package/public/wind-level/8.1.png +0 -0
  34. package/public/wind-level/8.png +0 -0
  35. package/public/wind-level/9.1.png +0 -0
  36. package/public/wind-level/9.png +0 -0
  37. package/public/wind-level/outline.1.png +0 -0
  38. package/public/wind-level/outline.png +0 -0
  39. package/src/App.vue +14 -0
  40. package/src/api/index.js +9 -0
  41. package/src/components/index.vue +51 -0
  42. package/src/index.js +10 -0
  43. package/src/style/index.scss +39 -0
  44. package/src/util/factorJson.js +507 -0
  45. package/src/util/form.js +8 -0
  46. package/src/util/mixin.js +31 -0
  47. package/src/util/table.js +0 -0
  48. package/test/index.vue +0 -0
  49. package/vite.config.js +29 -0
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>要素图例展示</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/index.js"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "name": "kt-factor-legend",
3
+ "version": "1.0.0",
4
+ "description": "各要素图例组件",
5
+ "type": "module",
6
+ "main": "dist/kt-factor-legend.umd.js",
7
+ "module": "dist/kt-factor-legend.es.js",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/kt-factor-legend.es.js",
11
+ "require": "./dist/kt-factor-legend.umd.js"
12
+ }
13
+ },
14
+ "scripts": {
15
+ "dev": "vite",
16
+ "build": "vite build",
17
+ "preview": "vite preview"
18
+ },
19
+ "keywords": [
20
+ "vue",
21
+ "element-plus",
22
+ "monitoring-station"
23
+ ],
24
+ "author": "zhaap",
25
+ "license": "ISC",
26
+ "dependencies": {
27
+ "element-plus": "^2.5.0",
28
+ "sass-embedded": "^1.97.3",
29
+ "vue": "^3.4.0"
30
+ },
31
+ "devDependencies": {
32
+ "@vitejs/plugin-vue": "^5.0.0",
33
+ "vite": "^5.0.0"
34
+ }
35
+ }
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
package/src/App.vue ADDED
@@ -0,0 +1,14 @@
1
+ <template>
2
+ <LegendIndex />
3
+ </template>
4
+
5
+ <script>
6
+ import LegendIndex from './components/index.vue'
7
+
8
+ export default {
9
+ name: 'App',
10
+ components: {
11
+ LegendIndex
12
+ }
13
+ }
14
+ </script>
@@ -0,0 +1,9 @@
1
+ import request from '@/utils/request'
2
+
3
+ export function get_regions(data) { //获取地区接口
4
+ return request({
5
+ url: '/bridgemanagement/baseCounty/getAddressByCode',
6
+ method: 'get',
7
+ params: data
8
+ })
9
+ }
@@ -0,0 +1,51 @@
1
+ <template>
2
+ <div class="legend-index">
3
+ <template v-for="item in factors" :key="item.key">
4
+ <div v-if="item?.children?.length" class="legend-group">
5
+ <div class="legend-item">
6
+ <div class="legend-name">{{item.name}}</div>
7
+ <div class="legend-color">
8
+ <div v-for="(child,index) in item.children" :key="index" :style="{backgroundColor:child.color}">
9
+ {{child.text}}
10
+ </div>
11
+ </div>
12
+ </div>
13
+ </div>
14
+ </template>
15
+ </div>
16
+ </template>
17
+ <script>
18
+ import { reactive, ref, toRefs, onMounted } from 'vue';
19
+ import factorData from '@/util/factorJson.js'
20
+
21
+ export default {
22
+ name: 'legendIndex',
23
+ props: {
24
+ elements: {
25
+ type: Array,
26
+ required: false,
27
+ },
28
+ },
29
+ setup(props,ctx) {
30
+ // 筛选表单
31
+ const that = reactive({
32
+ factors: [],
33
+
34
+ })
35
+
36
+ onMounted(()=>{
37
+ that.factors = props.elements || factorData;
38
+ console.log(factorData);
39
+ })
40
+
41
+ const methodsMap = {
42
+
43
+ }
44
+
45
+ return {
46
+ ...methodsMap,
47
+ ...toRefs(that)
48
+ }
49
+ }
50
+ }
51
+ </script>
package/src/index.js ADDED
@@ -0,0 +1,10 @@
1
+ import { createApp } from 'vue'
2
+ import App from './App.vue'
3
+ import ElementPlus from 'element-plus'
4
+ import 'element-plus/dist/index.css'
5
+ import './style/index.scss'
6
+ import zhCn from 'element-plus/es/locale/lang/zh-cn'
7
+
8
+ createApp(App).use(ElementPlus, { locale: zhCn }).mount('#app')
9
+
10
+ export { default as StationIndex } from './components/index.vue'
@@ -0,0 +1,39 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: 'Microsoft YaHei', Arial, sans-serif;
9
+ font-size: 14px;
10
+ line-height: 1.5;
11
+ color: #333;
12
+ background-color: #f5f7fa;
13
+ }
14
+
15
+ #app {
16
+ width: 100%;
17
+ min-height: 100vh;
18
+ padding: 5px 5px;
19
+ }
20
+
21
+ .legend-index{
22
+ .legend-group{
23
+ width:100%;
24
+ margin-bottom: 35px;
25
+ }
26
+ .legend-item{
27
+ .legend-color{
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: space-around;
31
+ >div{
32
+ width:100%;
33
+ height:13px;
34
+ padding-top:13px;
35
+ text-align: right;
36
+ }
37
+ }
38
+ }
39
+ }
@@ -0,0 +1,507 @@
1
+
2
+ const factorData = [
3
+ {
4
+ name:'积水深度(cm)',key:'waterDepth',
5
+ children:[
6
+ {
7
+ text: '<10',
8
+ color: '#70DFA6',
9
+ },
10
+ {
11
+ text: '10-15',
12
+ color: '#8ED6FD',
13
+ },
14
+ {
15
+ text: '15-27',
16
+ color: '#0098FA',
17
+ },
18
+ {
19
+ text: '27-40',
20
+ color: '#FDCC00',
21
+ },
22
+ {
23
+ text: '40-60',
24
+ color: '#F07E2C',
25
+ },
26
+ {
27
+ text: '>60',
28
+ color: '#EA0000',
29
+ },
30
+ ]
31
+ },
32
+ {
33
+ name:'温度(℃)',key:'temp',
34
+ children:[
35
+ {
36
+ text: '-30',
37
+ color: '#1875B6',
38
+ },
39
+ {
40
+ text: '-20',
41
+ color: '#2ABBE5',
42
+ },
43
+ {
44
+ text: '-10',
45
+ color: '#D1F4F2',
46
+ },
47
+ {
48
+ text: '0',
49
+ color: '#CBE4BE',
50
+ },
51
+ {
52
+ text: '10',
53
+ color: '#B1D162',
54
+ },
55
+ {
56
+ text: '20',
57
+ color: '#D3DD52',
58
+ },
59
+ {
60
+ text: '30',
61
+ color: '#F0E94B',
62
+ },
63
+ {
64
+ text: '40',
65
+ color: '#E48529',
66
+ },
67
+ {
68
+ text: '',
69
+ color: '#E74526',
70
+ },
71
+ ]
72
+ },
73
+ {
74
+ name:'气压(hPa)',key:'pres',
75
+ children:[
76
+ {
77
+ text: '948',
78
+ color: '#DFF5FD',
79
+ },
80
+ {
81
+ text: '964',
82
+ color: '#AEE5FA',
83
+ },
84
+ {
85
+ text: '981',
86
+ color: '#76D6F8',
87
+ },
88
+ {
89
+ text: '997',
90
+ color: '#38C3F5',
91
+ },
92
+ {
93
+ text: '1015',
94
+ color: '#00B7F2',
95
+ },
96
+ {
97
+ text: '1020',
98
+ color: '#00AAF1',
99
+ },
100
+ {
101
+ text: '1030',
102
+ color: '#009CE2',
103
+ },
104
+ {
105
+ text: '1040',
106
+ color: '#0089CD',
107
+ },
108
+ {
109
+ text: '1050',
110
+ color: '#0078BA',
111
+ },
112
+ {
113
+ text: '',
114
+ color: '#0B599A',
115
+ },
116
+ ]
117
+ },
118
+ {
119
+ name:'湿度(%)',key:'rh',
120
+ children:[
121
+ {
122
+ text: '10',
123
+ color: '#E74526',
124
+ },
125
+ {
126
+ text: '20',
127
+ color: '#E48529',
128
+ },
129
+ {
130
+ text: '30',
131
+ color: '#F0E94B',
132
+ },
133
+ {
134
+ text: '40',
135
+ color: '#D3DD52',
136
+ },
137
+ {
138
+ text: '50',
139
+ color: '#B1D162',
140
+ },
141
+ {
142
+ text: '60',
143
+ color: '#CBE4BE',
144
+ },
145
+ {
146
+ text: '70',
147
+ color: '#D1F4F2',
148
+ },
149
+ {
150
+ text: '80',
151
+ color: '#2ABBE5',
152
+ },
153
+ {
154
+ text: '90',
155
+ color: '#1875B6',
156
+ },
157
+ {
158
+ text: '100',
159
+ color: '#133DB5',
160
+ },
161
+ ]
162
+ },
163
+ {
164
+ name:'风级',
165
+ key:'wind-l',
166
+ Children:[
167
+ {name: "静风", value: 0, icon: "/wind-level/0.png"},
168
+ {name: "1级风", value: 1, icon: "/wind-level/1.png"},
169
+ {name: "2级风", value: 2, icon: "/wind-level/2.png"},
170
+ {name: "3级风", value: 3, icon: "/wind-level/3.png"},
171
+ {name: "4级风", value: 4, icon: "/wind-level/4.png"},
172
+ {name: "5级风", value: 5, icon: "/wind-level/5.png"},
173
+ {name: "6级风", value: 6, icon: "/wind-level/6.png"},
174
+ {name: "7级风", value: 7, icon: "/wind-level/7.png"},
175
+ {name: "8级风", value: 8, icon: "/wind-level/8.png"},
176
+ {name: "9级风", value: 9, icon: "/wind-level/9.png"},
177
+ {name: "10级风", value: 10, icon: "/wind-level/10.png"},
178
+ {name: "11级风", value: 11, icon: "/wind-level/11.png"},
179
+ {name: "12级风", value: 12, icon: "/wind-level/12.png"},
180
+ {name: "13级风", value: 13, icon: "/wind-level/13.png"},
181
+ {name: "14级风", value: 14, icon: "/wind-level/14.png"},
182
+ {name: "15级风", value: 15, icon: "/wind-level/15.png"},
183
+ {name: "16级风", value: 16, icon: "/wind-level/16.png"}
184
+ ],
185
+ },
186
+ {
187
+ name:'5分钟累积降雨(mm)',key:'prep_5min',
188
+ children:[
189
+ {
190
+ text: '0.4',
191
+ color: '#BDF071',
192
+ },
193
+ {
194
+ text: '1.0',
195
+ color: '#4B7902',
196
+ },
197
+ {
198
+ text: '2.0',
199
+ color: '#1BB1F1',
200
+ },
201
+ {
202
+ text: '5.0',
203
+ color: '#0000FF',
204
+ },
205
+ {
206
+ text: '10',
207
+ color: '#EC808D',
208
+ },
209
+ {
210
+ text: '',
211
+ color: '#D900B6',
212
+ },
213
+ ]
214
+ },
215
+ {
216
+ name:'1小时降雨(mm)',key:'prep_1h',
217
+ children:[
218
+ {
219
+ text: '<1.5',
220
+ color: '#B8EF9E',
221
+ },
222
+ {
223
+ text: '1.6-6.9',
224
+ color: '#66B755',
225
+ },
226
+ {
227
+ text: '7-14.9',
228
+ color: '#7AB8F7',
229
+ },
230
+ {
231
+ text: '15-39.9',
232
+ color: '#8792FD',
233
+ },
234
+ {
235
+ text: '40-49.9',
236
+ color: '#E440EF',
237
+ },
238
+ {
239
+ text: '>50',
240
+ color: '#74173F',
241
+ },
242
+ ]
243
+ },
244
+ {
245
+ name:'3小时降雨(mm)',key:'prep_3h',
246
+ children:[
247
+ {
248
+ text: '<2.9',
249
+ color: '#B8EF9E',
250
+ },
251
+ {
252
+ text: '3-9.9',
253
+ color: '#66B755',
254
+ },
255
+ {
256
+ text: '10-19.9',
257
+ color: '#7AB8F7',
258
+ },
259
+ {
260
+ text: '20-49.9',
261
+ color: '#8792FD',
262
+ },
263
+ {
264
+ text: '50-69.9',
265
+ color: '#E440EF',
266
+ },
267
+ {
268
+ text: '>70',
269
+ color: '#74173F',
270
+ },
271
+ ]
272
+ },
273
+ {
274
+ name:'6小时降雨(mm)',key:'prep_6h',
275
+ children:[
276
+ {
277
+ text: '<3.9',
278
+ color: '#B8EF9E',
279
+ },
280
+ {
281
+ text: '4-12.9',
282
+ color: '#66B755',
283
+ },
284
+ {
285
+ text: '13-24.9',
286
+ color: '#7AB8F7',
287
+ },
288
+ {
289
+ text: '25-59.9',
290
+ color: '#8792FD',
291
+ },
292
+ {
293
+ text: '60-119.9',
294
+ color: '#E440EF',
295
+ },
296
+ {
297
+ text: '>120',
298
+ color: '#74173F',
299
+ },
300
+ ]
301
+ },
302
+ {
303
+ name:'12小时降雨(mm)',key:'prep_12h',
304
+ children:[
305
+ {
306
+ text: '<4.9',
307
+ color: '#B8EF9E',
308
+ },
309
+ {
310
+ text: '5-14.9',
311
+ color: '#66B755',
312
+ },
313
+ {
314
+ text: '15-29.9',
315
+ color: '#7AB8F7',
316
+ },
317
+ {
318
+ text: '30-69.9',
319
+ color: '#8792FD',
320
+ },
321
+ {
322
+ text: '70-139.9',
323
+ color: '#E440EF',
324
+ },
325
+ {
326
+ text: '>140',
327
+ color: '#74173F',
328
+ },
329
+ ]
330
+ },
331
+ {
332
+ name:'24小时降雨(mm)',key:'prep_24h',
333
+ children:[
334
+ {
335
+ text: '<9.9',
336
+ color: '#B8EF9E',
337
+ },
338
+ {
339
+ text: '10-24.9',
340
+ color: '#66B755',
341
+ },
342
+ {
343
+ text: '25-49.9',
344
+ color: '#7AB8F7',
345
+ },
346
+ {
347
+ text: '50-99.9',
348
+ color: '#8792FD',
349
+ },
350
+ {
351
+ text: '100-250',
352
+ color: '#E440EF',
353
+ },
354
+ {
355
+ text: '>250',
356
+ color: '#74173F',
357
+ },
358
+ ]
359
+ },
360
+ {
361
+ name:'未来1小时降雨预报(mm)',key:'prep_f_1h',
362
+ children:[
363
+ {
364
+ text: '<1.5',
365
+ color: '#B8EF9E',
366
+ },
367
+ {
368
+ text: '1.6-6.9',
369
+ color: '#66B755',
370
+ },
371
+ {
372
+ text: '7-14.9',
373
+ color: '#7AB8F7',
374
+ },
375
+ {
376
+ text: '15-39.9',
377
+ color: '#8792FD',
378
+ },
379
+ {
380
+ text: '40-49.9',
381
+ color: '#E440EF',
382
+ },
383
+ {
384
+ text: '>50',
385
+ color: '#74173F',
386
+ },
387
+ ]
388
+ },
389
+ {
390
+ name:'未来3小时降雨预报(mm)',key:'prep_f_3h',
391
+ children:[
392
+ {
393
+ text: '<2.9',
394
+ color: '#B8EF9E',
395
+ },
396
+ {
397
+ text: '3-9.9',
398
+ color: '#66B755',
399
+ },
400
+ {
401
+ text: '10-19.9',
402
+ color: '#7AB8F7',
403
+ },
404
+ {
405
+ text: '20-49.9',
406
+ color: '#8792FD',
407
+ },
408
+ {
409
+ text: '50-69.9',
410
+ color: '#E440EF',
411
+ },
412
+ {
413
+ text: '>70',
414
+ color: '#74173F',
415
+ },
416
+ ]
417
+ },
418
+ {
419
+ name:'未来6小时降雨预报(mm)',key:'prep_f_6h',
420
+ children:[
421
+ {
422
+ text: '<3.9',
423
+ color: '#B8EF9E',
424
+ },
425
+ {
426
+ text: '4-12.9',
427
+ color: '#66B755',
428
+ },
429
+ {
430
+ text: '13-24.9',
431
+ color: '#7AB8F7',
432
+ },
433
+ {
434
+ text: '25-59.9',
435
+ color: '#8792FD',
436
+ },
437
+ {
438
+ text: '60-119.9',
439
+ color: '#E440EF',
440
+ },
441
+ {
442
+ text: '>120',
443
+ color: '#74173F',
444
+ },
445
+ ]
446
+ },
447
+ {
448
+ name:'未来12小时降雨预报(mm)',key:'prep_f_12h',
449
+ children:[
450
+ {
451
+ text: '<4.9',
452
+ color: '#B8EF9E',
453
+ },
454
+ {
455
+ text: '5-14.9',
456
+ color: '#66B755',
457
+ },
458
+ {
459
+ text: '15-29.9',
460
+ color: '#7AB8F7',
461
+ },
462
+ {
463
+ text: '30-69.9',
464
+ color: '#8792FD',
465
+ },
466
+ {
467
+ text: '70-139.9',
468
+ color: '#E440EF',
469
+ },
470
+ {
471
+ text: '>140',
472
+ color: '#74173F',
473
+ },
474
+ ]
475
+ },
476
+ {
477
+ name:'未来24小时降雨预报(mm)',key:'prep_f_24h',
478
+ children:[
479
+ {
480
+ text: '<9.9',
481
+ color: '#B8EF9E',
482
+ },
483
+ {
484
+ text: '10-24.9',
485
+ color: '#66B755',
486
+ },
487
+ {
488
+ text: '25-49.9',
489
+ color: '#7AB8F7',
490
+ },
491
+ {
492
+ text: '50-99.9',
493
+ color: '#8792FD',
494
+ },
495
+ {
496
+ text: '100-250',
497
+ color: '#E440EF',
498
+ },
499
+ {
500
+ text: '>250',
501
+ color: '#74173F',
502
+ },
503
+ ]
504
+ },
505
+ ]
506
+
507
+ export default factorData;
@@ -0,0 +1,8 @@
1
+ export const filterForm = [
2
+ {label:'请选择所属企业',prop:'companyIds',type:'cascader',enum:'company'},
3
+ {label:'请输入监测站名称',prop:'name',type:'input'},
4
+ {label:'请选择监测站类型',prop:'type',type:'select',enum:'stationType'},
5
+ {label:'在线/离线',prop:'online',type:'online',enum:'onlineStatus'},
6
+ {label:'显示/隐藏',prop:'status',type:'valid',enum:'validStatus'},
7
+ {label:'请选择地区',prop:'districtCoding',type:'select',enum:'district'},
8
+ ]
@@ -0,0 +1,31 @@
1
+ import { get_regions } from '@/api/region'
2
+ export default{
3
+ data(){
4
+ return{
5
+ companyList:[],//所属企业列表
6
+ stationTypeList:[],//监测站类型列表
7
+ onlineStatusList:[],//在线/离线状态列表
8
+ validStatusList:[],//显示/隐藏状态列表
9
+ districtList:[],//地区列表
10
+ regionsProp: {
11
+ lazy: true,
12
+ lazyLoad(node, resolve) {
13
+ const { level } = node;
14
+ const nodes = [];
15
+ let regionCode = level == 0 ? "000000" : node.value;
16
+ get_regions({ code: regionCode }).then((res) => {
17
+ res.data.map((item) => {
18
+ let obj = {
19
+ value: item.code,
20
+ label: item.name,
21
+ leaf: node.level >= 2,
22
+ };
23
+ nodes.push(obj);
24
+ });
25
+ resolve(nodes);
26
+ })
27
+ },
28
+ },
29
+ }
30
+ }
31
+ }
File without changes
package/test/index.vue ADDED
File without changes
package/vite.config.js ADDED
@@ -0,0 +1,29 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+ import { resolve } from 'path'
4
+
5
+ // https://vitejs.dev/config/
6
+ export default defineConfig({
7
+ plugins: [vue()],
8
+ resolve: {
9
+ alias: {
10
+ '@': resolve(__dirname, 'src')
11
+ }
12
+ },
13
+ build: {
14
+ lib: {
15
+ entry: './src/index.js',
16
+ name: 'KtFactorLegend',
17
+ fileName: (format) => `kt-factor-legend.${format}.js`
18
+ },
19
+ rollupOptions: {
20
+ external: ['vue', 'element-plus'],
21
+ output: {
22
+ globals: {
23
+ vue: 'Vue',
24
+ 'element-plus': 'ElementPlus'
25
+ }
26
+ }
27
+ }
28
+ }
29
+ })