Skip to content

I
iot-web
Commit 5e167485 by 吴春元
Options

为UI增强添加新的图像资源 

-增加了equ-righticon3 .png改进的图像。
-引入map-screen -bg.png作为地图筛选功能的新背景图像。
增加地图筛选界面标题背景的map-screen - title -bg.png
parent b4c7a74a
Showing with 676 additions and 308 deletions
components.d.ts
...@@ -24,12 +24,14 @@ declare module 'vue' { ...@@ -24,12 +24,14 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElLink: typeof import('element-plus/es')['ElLink'] ElLink: typeof import('element-plus/es')['ElLink']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
ItemWrap: typeof import('./src/components/ItemWrap/index.vue')['default'] ItemWrap: typeof import('./src/components/ItemWrap/index.vue')['default']
......
node_modules/.vite/deps/_metadata.json
...@@ -2,315 +2,330 @@ ...@@ -2,315 +2,330 @@
"hash": "cafa6c33", "hash": "cafa6c33",
"configHash": "ca4ef806", "configHash": "ca4ef806",
"lockfileHash": "2e2ef206", "lockfileHash": "2e2ef206",
"browserHash": "0e27a73e", "browserHash": "150382ed",
"optimized": { "optimized": {
"vue": { "vue": {
"src": "../../.pnpm/vue@3.5.21_typescript@5.8.3/node_modules/vue/dist/vue.runtime.esm-bundler.js", "src": "../../.pnpm/vue@3.5.21_typescript@5.8.3/node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js", "file": "vue.js",
"fileHash": "87ddee12", "fileHash": "f5e17a85",
"needsInterop": false "needsInterop": false
}, },
"vue-router": { "vue-router": {
"src": "../../.pnpm/vue-router@4.5.1_vue@3.5.21_typescript@5.8.3_/node_modules/vue-router/dist/vue-router.mjs", "src": "../../.pnpm/vue-router@4.5.1_vue@3.5.21_typescript@5.8.3_/node_modules/vue-router/dist/vue-router.mjs",
"file": "vue-router.js", "file": "vue-router.js",
"fileHash": "5c928852", "fileHash": "16252a98",
"needsInterop": false "needsInterop": false
}, },
"element-plus": { "element-plus": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/index.mjs",
"file": "element-plus.js", "file": "element-plus.js",
"fileHash": "ccdc7587", "fileHash": "787234f2",
"needsInterop": false "needsInterop": false
}, },
"@element-plus/icons-vue": { "@element-plus/icons-vue": {
"src": "../../.pnpm/@element-plus+icons-vue@2.3.2_vue@3.5.21_typescript@5.8.3_/node_modules/@element-plus/icons-vue/dist/index.js", "src": "../../.pnpm/@element-plus+icons-vue@2.3.2_vue@3.5.21_typescript@5.8.3_/node_modules/@element-plus/icons-vue/dist/index.js",
"file": "@element-plus_icons-vue.js", "file": "@element-plus_icons-vue.js",
"fileHash": "264612ec", "fileHash": "8a909402",
"needsInterop": false "needsInterop": false
}, },
"nprogress": { "nprogress": {
"src": "../../.pnpm/nprogress@0.2.0/node_modules/nprogress/nprogress.js", "src": "../../.pnpm/nprogress@0.2.0/node_modules/nprogress/nprogress.js",
"file": "nprogress.js", "file": "nprogress.js",
"fileHash": "1b284b75", "fileHash": "1f7fcd41",
"needsInterop": true "needsInterop": true
}, },
"pinia": { "pinia": {
"src": "../../.pnpm/pinia@3.0.3_typescript@5.8.3_vue@3.5.21_typescript@5.8.3_/node_modules/pinia/dist/pinia.mjs", "src": "../../.pnpm/pinia@3.0.3_typescript@5.8.3_vue@3.5.21_typescript@5.8.3_/node_modules/pinia/dist/pinia.mjs",
"file": "pinia.js", "file": "pinia.js",
"fileHash": "be92118b", "fileHash": "bfbda65f",
"needsInterop": false "needsInterop": false
}, },
"js-cookie": { "js-cookie": {
"src": "../../.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.mjs", "src": "../../.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.mjs",
"file": "js-cookie.js", "file": "js-cookie.js",
"fileHash": "62c4cd6c", "fileHash": "37560378",
"needsInterop": false "needsInterop": false
}, },
"axios": { "axios": {
"src": "../../.pnpm/axios@1.12.2/node_modules/axios/index.js", "src": "../../.pnpm/axios@1.12.2/node_modules/axios/index.js",
"file": "axios.js", "file": "axios.js",
"fileHash": "ea2a71e4", "fileHash": "b567a3bf",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es": { "element-plus/es": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/index.mjs",
"file": "element-plus_es.js", "file": "element-plus_es.js",
"fileHash": "89bc77ef", "fileHash": "0b7c7bc3",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/base/style/index": { "element-plus/es/components/base/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/base/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/base/style/index.mjs",
"file": "element-plus_es_components_base_style_index.js", "file": "element-plus_es_components_base_style_index.js",
"fileHash": "43656ea6", "fileHash": "6b4cd206",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/dialog/style/index": { "element-plus/es/components/dialog/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/dialog/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/dialog/style/index.mjs",
"file": "element-plus_es_components_dialog_style_index.js", "file": "element-plus_es_components_dialog_style_index.js",
"fileHash": "d7741cf6", "fileHash": "f5828d77",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/icon/style/index": { "element-plus/es/components/icon/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/icon/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/icon/style/index.mjs",
"file": "element-plus_es_components_icon_style_index.js", "file": "element-plus_es_components_icon_style_index.js",
"fileHash": "2404825c", "fileHash": "9cf4fe7f",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/row/style/index": { "element-plus/es/components/row/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/row/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/row/style/index.mjs",
"file": "element-plus_es_components_row_style_index.js", "file": "element-plus_es_components_row_style_index.js",
"fileHash": "c1961891", "fileHash": "0c12f508",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/col/style/index": { "element-plus/es/components/col/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/col/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/col/style/index.mjs",
"file": "element-plus_es_components_col_style_index.js", "file": "element-plus_es_components_col_style_index.js",
"fileHash": "bf25bb81", "fileHash": "dc28641f",
"needsInterop": false "needsInterop": false
}, },
"@amap/amap-jsapi-loader": { "@amap/amap-jsapi-loader": {
"src": "../../.pnpm/@amap+amap-jsapi-loader@1.0.1/node_modules/@amap/amap-jsapi-loader/dist/index.js", "src": "../../.pnpm/@amap+amap-jsapi-loader@1.0.1/node_modules/@amap/amap-jsapi-loader/dist/index.js",
"file": "@amap_amap-jsapi-loader.js", "file": "@amap_amap-jsapi-loader.js",
"fileHash": "bd0193b2", "fileHash": "b6581875",
"needsInterop": true "needsInterop": true
}, },
"mitt": { "mitt": {
"src": "../../.pnpm/mitt@3.0.1/node_modules/mitt/dist/mitt.mjs", "src": "../../.pnpm/mitt@3.0.1/node_modules/mitt/dist/mitt.mjs",
"file": "mitt.js", "file": "mitt.js",
"fileHash": "aeb356e1", "fileHash": "db0b1ba1",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/select/style/index": { "element-plus/es/components/select/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/select/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/select/style/index.mjs",
"file": "element-plus_es_components_select_style_index.js", "file": "element-plus_es_components_select_style_index.js",
"fileHash": "8608194a", "fileHash": "1c376174",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/option/style/index": { "element-plus/es/components/option/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/option/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/option/style/index.mjs",
"file": "element-plus_es_components_option_style_index.js", "file": "element-plus_es_components_option_style_index.js",
"fileHash": "21f81b09", "fileHash": "0a677e66",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/cascader/style/index": { "element-plus/es/components/cascader/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/cascader/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/cascader/style/index.mjs",
"file": "element-plus_es_components_cascader_style_index.js", "file": "element-plus_es_components_cascader_style_index.js",
"fileHash": "e0a83a59", "fileHash": "7afc3ce6",
"needsInterop": false "needsInterop": false
}, },
"echarts": { "echarts": {
"src": "../../.pnpm/echarts@6.0.0/node_modules/echarts/index.js", "src": "../../.pnpm/echarts@6.0.0/node_modules/echarts/index.js",
"file": "echarts.js", "file": "echarts.js",
"fileHash": "6074d5e8", "fileHash": "c975bfc1",
"needsInterop": false "needsInterop": false
}, },
"lodash-es": { "lodash-es": {
"src": "../../lodash-es/lodash.js", "src": "../../lodash-es/lodash.js",
"file": "lodash-es.js", "file": "lodash-es.js",
"fileHash": "59e4445c", "fileHash": "237d3294",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/form/style/index": { "element-plus/es/components/form/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/form/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/form/style/index.mjs",
"file": "element-plus_es_components_form_style_index.js", "file": "element-plus_es_components_form_style_index.js",
"fileHash": "e954add2", "fileHash": "8a93cc4f",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/button/style/index": { "element-plus/es/components/button/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/button/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/button/style/index.mjs",
"file": "element-plus_es_components_button_style_index.js", "file": "element-plus_es_components_button_style_index.js",
"fileHash": "7a0082cf", "fileHash": "89e800e4",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/checkbox/style/index": { "element-plus/es/components/checkbox/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/checkbox/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/checkbox/style/index.mjs",
"file": "element-plus_es_components_checkbox_style_index.js", "file": "element-plus_es_components_checkbox_style_index.js",
"fileHash": "620b4d72", "fileHash": "0be9e2ae",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/form-item/style/index": { "element-plus/es/components/form-item/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/form-item/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/form-item/style/index.mjs",
"file": "element-plus_es_components_form-item_style_index.js", "file": "element-plus_es_components_form-item_style_index.js",
"fileHash": "01c653d7", "fileHash": "872d79f5",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/input/style/index": { "element-plus/es/components/input/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/input/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/input/style/index.mjs",
"file": "element-plus_es_components_input_style_index.js", "file": "element-plus_es_components_input_style_index.js",
"fileHash": "fbcbcbcf", "fileHash": "ed189b4e",
"needsInterop": false "needsInterop": false
}, },
"jsencrypt": { "jsencrypt": {
"src": "../../.pnpm/jsencrypt@3.5.4/node_modules/jsencrypt/lib/index.js", "src": "../../.pnpm/jsencrypt@3.5.4/node_modules/jsencrypt/lib/index.js",
"file": "jsencrypt.js", "file": "jsencrypt.js",
"fileHash": "b0d90799", "fileHash": "67dbe6bb",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/locales.mjs": { "element-plus/es/locales.mjs": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/locales.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/locales.mjs",
"file": "element-plus_es_locales__mjs.js", "file": "element-plus_es_locales__mjs.js",
"fileHash": "28aa4287", "fileHash": "c7fd4888",
"needsInterop": false "needsInterop": false
}, },
"gsap": { "gsap": {
"src": "../../.pnpm/gsap@3.13.0/node_modules/gsap/index.js", "src": "../../.pnpm/gsap@3.13.0/node_modules/gsap/index.js",
"file": "gsap.js", "file": "gsap.js",
"fileHash": "4ad6140f", "fileHash": "8d0308cb",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/image/style/index": { "element-plus/es/components/image/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/image/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/image/style/index.mjs",
"file": "element-plus_es_components_image_style_index.js", "file": "element-plus_es_components_image_style_index.js",
"fileHash": "8a7bbb14", "fileHash": "eaf1adaf",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/radio-group/style/index": { "element-plus/es/components/radio-group/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/radio-group/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/radio-group/style/index.mjs",
"file": "element-plus_es_components_radio-group_style_index.js", "file": "element-plus_es_components_radio-group_style_index.js",
"fileHash": "1d02d183", "fileHash": "d1bb7465",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/radio-button/style/index": { "element-plus/es/components/radio-button/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/radio-button/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/radio-button/style/index.mjs",
"file": "element-plus_es_components_radio-button_style_index.js", "file": "element-plus_es_components_radio-button_style_index.js",
"fileHash": "cca3c084", "fileHash": "88b878a1",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/table/style/index": { "element-plus/es/components/table/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/table/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/table/style/index.mjs",
"file": "element-plus_es_components_table_style_index.js", "file": "element-plus_es_components_table_style_index.js",
"fileHash": "7fd3a7bc", "fileHash": "4dfeb844",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/table-column/style/index": { "element-plus/es/components/table-column/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/table-column/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/table-column/style/index.mjs",
"file": "element-plus_es_components_table-column_style_index.js", "file": "element-plus_es_components_table-column_style_index.js",
"fileHash": "c6c96631", "fileHash": "3fa36b78",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/empty/style/index": { "element-plus/es/components/empty/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/empty/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/empty/style/index.mjs",
"file": "element-plus_es_components_empty_style_index.js", "file": "element-plus_es_components_empty_style_index.js",
"fileHash": "f87315b7", "fileHash": "394a8a93",
"needsInterop": false "needsInterop": false
}, },
"three": { "three": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/build/three.module.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/build/three.module.js",
"file": "three.js", "file": "three.js",
"fileHash": "d7a19317", "fileHash": "374f14ed",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/controls/OrbitControls.js": { "three/examples/jsm/controls/OrbitControls.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/controls/OrbitControls.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/controls/OrbitControls.js",
"file": "three_examples_jsm_controls_OrbitControls__js.js", "file": "three_examples_jsm_controls_OrbitControls__js.js",
"fileHash": "f0193881", "fileHash": "dbb52b87",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/renderers/CSS2DRenderer.js": { "three/examples/jsm/renderers/CSS2DRenderer.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/renderers/CSS2DRenderer.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/renderers/CSS2DRenderer.js",
"file": "three_examples_jsm_renderers_CSS2DRenderer__js.js", "file": "three_examples_jsm_renderers_CSS2DRenderer__js.js",
"fileHash": "5c5fdd84", "fileHash": "db978db5",
"needsInterop": false "needsInterop": false
}, },
"three/addons/renderers/CSS3DRenderer.js": { "three/addons/renderers/CSS3DRenderer.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/renderers/CSS3DRenderer.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/renderers/CSS3DRenderer.js",
"file": "three_addons_renderers_CSS3DRenderer__js.js", "file": "three_addons_renderers_CSS3DRenderer__js.js",
"fileHash": "8401fe7c", "fileHash": "b4dfb96c",
"needsInterop": false "needsInterop": false
}, },
"three/addons/postprocessing/EffectComposer.js": { "three/addons/postprocessing/EffectComposer.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/EffectComposer.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/EffectComposer.js",
"file": "three_addons_postprocessing_EffectComposer__js.js", "file": "three_addons_postprocessing_EffectComposer__js.js",
"fileHash": "e7ffac86", "fileHash": "f7f13f7b",
"needsInterop": false "needsInterop": false
}, },
"three/addons/postprocessing/RenderPass.js": { "three/addons/postprocessing/RenderPass.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/RenderPass.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/RenderPass.js",
"file": "three_addons_postprocessing_RenderPass__js.js", "file": "three_addons_postprocessing_RenderPass__js.js",
"fileHash": "2b0dd704", "fileHash": "ba2b4fa1",
"needsInterop": false "needsInterop": false
}, },
"three/addons/postprocessing/OutlinePass.js": { "three/addons/postprocessing/OutlinePass.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/OutlinePass.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/OutlinePass.js",
"file": "three_addons_postprocessing_OutlinePass__js.js", "file": "three_addons_postprocessing_OutlinePass__js.js",
"fileHash": "01742d42", "fileHash": "2929c620",
"needsInterop": false "needsInterop": false
}, },
"d3": { "d3": {
"src": "../../.pnpm/d3@7.9.0/node_modules/d3/src/index.js", "src": "../../.pnpm/d3@7.9.0/node_modules/d3/src/index.js",
"file": "d3.js", "file": "d3.js",
"fileHash": "82a9c8d0", "fileHash": "6adb0117",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/lines/Line2.js": { "three/examples/jsm/lines/Line2.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/lines/Line2.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/lines/Line2.js",
"file": "three_examples_jsm_lines_Line2__js.js", "file": "three_examples_jsm_lines_Line2__js.js",
"fileHash": "aaa10260", "fileHash": "e365d9c6",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/lines/LineGeometry.js": { "three/examples/jsm/lines/LineGeometry.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/lines/LineGeometry.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/lines/LineGeometry.js",
"file": "three_examples_jsm_lines_LineGeometry__js.js", "file": "three_examples_jsm_lines_LineGeometry__js.js",
"fileHash": "afba021a", "fileHash": "fca98eff",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/lines/LineMaterial.js": { "three/examples/jsm/lines/LineMaterial.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/lines/LineMaterial.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/lines/LineMaterial.js",
"file": "three_examples_jsm_lines_LineMaterial__js.js", "file": "three_examples_jsm_lines_LineMaterial__js.js",
"fileHash": "979cf533", "fileHash": "447ce7b9",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/renderers/CSS3DRenderer.js": { "three/examples/jsm/renderers/CSS3DRenderer.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/renderers/CSS3DRenderer.js", "src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/renderers/CSS3DRenderer.js",
"file": "three_examples_jsm_renderers_CSS3DRenderer__js.js", "file": "three_examples_jsm_renderers_CSS3DRenderer__js.js",
"fileHash": "e8002e08", "fileHash": "d7904248",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/card/style/index": { "element-plus/es/components/card/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/card/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/card/style/index.mjs",
"file": "element-plus_es_components_card_style_index.js", "file": "element-plus_es_components_card_style_index.js",
"fileHash": "d8002715", "fileHash": "b7ba9799",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/link/style/index": { "element-plus/es/components/link/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/link/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/link/style/index.mjs",
"file": "element-plus_es_components_link_style_index.js", "file": "element-plus_es_components_link_style_index.js",
"fileHash": "6bbb9ec6", "fileHash": "daa48ba3",
"needsInterop": false "needsInterop": false
}, },
"element-plus/es/components/tree-select/style/index": { "element-plus/es/components/tree-select/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/tree-select/style/index.mjs", "src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/tree-select/style/index.mjs",
"file": "element-plus_es_components_tree-select_style_index.js", "file": "element-plus_es_components_tree-select_style_index.js",
"fileHash": "c417acc4", "fileHash": "031b9986",
"needsInterop": false
},
"element-plus/es/components/tree/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/tree/style/index.mjs",
"file": "element-plus_es_components_tree_style_index.js",
"fileHash": "c5d195d9",
"needsInterop": false
},
"element-plus/es/components/radio/style/index": {
"src": "../../.pnpm/element-plus@2.11.2_vue@3.5.21_typescript@5.8.3_/node_modules/element-plus/es/components/radio/style/index.mjs",
"file": "element-plus_es_components_radio_style_index.js",
"fileHash": "31d1205b",
"needsInterop": false "needsInterop": false
} }
}, },
"chunks": { "chunks": {
"chunk-PPLACW3U": {
"file": "chunk-PPLACW3U.js"
},
"chunk-CQSJN7WN": { "chunk-CQSJN7WN": {
"file": "chunk-CQSJN7WN.js" "file": "chunk-CQSJN7WN.js"
}, },
"chunk-PPLACW3U": { "chunk-FTWWI2M3": {
"file": "chunk-PPLACW3U.js" "file": "chunk-FTWWI2M3.js"
}, },
"chunk-IXSGC3JQ": { "chunk-IXSGC3JQ": {
"file": "chunk-IXSGC3JQ.js" "file": "chunk-IXSGC3JQ.js"
...@@ -342,15 +357,15 @@ ...@@ -342,15 +357,15 @@
"chunk-XJ4FNH6G": { "chunk-XJ4FNH6G": {
"file": "chunk-XJ4FNH6G.js" "file": "chunk-XJ4FNH6G.js"
}, },
"chunk-E7BDDJX4": {
"file": "chunk-E7BDDJX4.js"
},
"chunk-ZFNCKSYC": { "chunk-ZFNCKSYC": {
"file": "chunk-ZFNCKSYC.js" "file": "chunk-ZFNCKSYC.js"
}, },
"chunk-WYGDTZ7H": { "chunk-WYGDTZ7H": {
"file": "chunk-WYGDTZ7H.js" "file": "chunk-WYGDTZ7H.js"
}, },
"chunk-HQ2UCEI6": {
"file": "chunk-HQ2UCEI6.js"
},
"chunk-5WDSIG6Y": { "chunk-5WDSIG6Y": {
"file": "chunk-5WDSIG6Y.js" "file": "chunk-5WDSIG6Y.js"
}, },
...@@ -359,6 +374,9 @@ ...@@ -359,6 +374,9 @@
}, },
"chunk-G3PMV62Z": { "chunk-G3PMV62Z": {
"file": "chunk-G3PMV62Z.js" "file": "chunk-G3PMV62Z.js"
},
"chunk-HQ2UCEI6": {
"file": "chunk-HQ2UCEI6.js"
} }
} }
} }
\ No newline at end of file
src/api/office.ts → src/api/iot/office.ts
import request from "@/utils/request"; import request from "@/utils/request";
import useUserStore from "@/store/modules/user";
// 获取机构信息,传用户id // 获取机构信息,传用户id
export function officeInfo() { export function officeTreeList(deptId: any) {
const userStore = useUserStore();
return request({ return request({
url: "/getOfficeInfo?userId=" + userStore.id, url: "/system/dept/list?deptId=" + deptId,
method: "get",
});
}
export function officeTreeParentList(parentId: any) {
return request({
url: "/system/dept/list?parentId=" + parentId,
method: "get", method: "get",
}); });
} }
src/api/tunnel/office.ts
...@@ -18,7 +18,7 @@ export function listForParent() { ...@@ -18,7 +18,7 @@ export function listForParent() {
"/system/dept/listForParent?deptId=" + "/system/dept/listForParent?deptId=" +
userStore.deptId + userStore.deptId +
"&noOffiiceType=" + "&noOffiiceType=" +
6, 5,
method: "get", method: "get",
}); });
} }
src/api/tunnelProjectNumCount.ts deleted 100644 → 0
import request from "@/utils/request";
// 统计隧道数量(总数、进行中、已完工)
export function tunnelProjectNumCount(deptId: string) {
return request({
url: "/getInfo?deptId=" + deptId,
method: "get",
});
}
src/assets/styles/element-plus.scss
...@@ -218,6 +218,21 @@ $blue-hover: #40a9ff; // 悬停蓝色 ...@@ -218,6 +218,21 @@ $blue-hover: #40a9ff; // 悬停蓝色
color: #{$white-text} !important; color: #{$white-text} !important;
} }
.el-radio {
color: var(--el-radio-text-color);
font-weight: var(--el-radio-font-weight);
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
white-space: nowrap;
outline: none;
font-size: var(--el-font-size-base);
user-select: none;
margin-right: 0px;
height: 32px;
}
// 全局滚动条样式（深蓝色主题） // 全局滚动条样式（深蓝色主题）
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
......
src/layout/main.vue
...@@ -15,22 +15,18 @@ ...@@ -15,22 +15,18 @@
<div class="office-select"> <div class="office-select">
<el-cascader <el-cascader
placeholder="请选择机构" placeholder="请选择机构"
:options="officeTree"
v-model="selectedOffice" v-model="selectedOffice"
clearable clearable
filterable filterable
:show-all-levels="false" :show-all-levels="false"
:props="{ :props="dataProps"
expandTrigger: 'hover',
multiple: false,
checkStrictly: true,
}"
@change="handleOfficeChange" @change="handleOfficeChange"
> >
</el-cascader> </el-cascader>
</div> </div>
<div class="scene-select"> <div class="scene-select">
<el-select <el-select
v-if="false"
v-model="selectedScene" v-model="selectedScene"
placeholder="应用场景" placeholder="应用场景"
@change="handleSceneChange" @change="handleSceneChange"
...@@ -60,9 +56,22 @@ import Menu from "./components/Menu.vue"; ...@@ -60,9 +56,22 @@ import Menu from "./components/Menu.vue";
import User from "./components/User.vue"; import User from "./components/User.vue";
import { ref } from "vue"; import { ref } from "vue";
import { eventBus } from "@/eventBus"; import { eventBus } from "@/eventBus";
import { officeTreeList, officeTreeParentList } from "@api/iot/office";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
var selectedOffice = ref(["1"]); const dataProps = {
var selectedScene = ref(); expandTrigger: "hover",
multiple: false,
checkStrictly: true,
lazy: true,
lazyLoad(node: any, resolve: any) {
getDeptForLazyLoad(node, resolve);
},
}; //级联框prop
var selectedOffice = ref([userStore.deptId]);
var selectedScene = ref(); //应用场景
var sceneTree = ref([ var sceneTree = ref([
{ {
...@@ -83,47 +92,62 @@ var sceneTree = ref([ ...@@ -83,47 +92,62 @@ var sceneTree = ref([
}, },
]); ]);
var officeTree = ref([ var officeTree = ref([]);
{
value: "1",
label: "路桥一公司",
children: [
{
value: "1-1",
label: "机构1",
children: [
{
value: "22",
label: "机构1-1-1",
},
{
value: "1-1-2",
label: "机构1-1-2",
},
],
},
{
value: "1-2",
label: "机构2",
},
],
},
{
value: "2",
label: "路桥二公司",
},
]);
function handleOfficeChange(val: any) { function handleOfficeChange(val: any) {
console.log(val);
//触发场景变化事件在选择机构后，弹出场景弹窗 //触发场景变化事件在选择机构后，弹出场景弹窗
eventBus.emit("officeChange", val); eventBus.emit("officeChange", val);
} }
function handleSceneChange(val: any) { function handleSceneChange(val: any) {
console.log(val);
eventBus.emit("sceneChange", val); eventBus.emit("sceneChange", val);
} }
//获取编辑时的数据
function getDeptForLazyLoad(node: any, resolve: any) {
// debugger;
const { level } = node;
if (level == 0) {
officeTreeList(userStore.deptId).then((res: any) => {
if (res.code === 200) {
officeTree.value = res.data;
// officeTree.value 将item.value、item.label赋值
officeTree.value.forEach((item: any) => {
item.value = item.deptId;
item.label = item.deptName;
item.leaf = level >= 2;
});
resolve(officeTree.value);
}
});
} else if (level == 1) {
officeTreeParentList(node.value).then((res: any) => {
if (res.code === 200) {
officeTree.value = res.data;
// officeTree.value 将item.value、item.label赋值
officeTree.value.forEach((item: any) => {
item.value = item.deptId;
item.label = item.deptName;
item.leaf = level >= 2;
});
resolve(officeTree.value);
}
});
} else {
officeTreeParentList(node.value).then((res: any) => {
if (res.code === 200) {
officeTree.value = res.data;
// officeTree.value 将item.value、item.label赋值
officeTree.value.forEach((item: any) => {
item.value = item.deptId;
item.label = item.deptName;
item.leaf = level >= 2;
});
resolve(officeTree.value);
}
});
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/store/modules/user.ts
...@@ -6,6 +6,8 @@ const useUserStore = defineStore("user", { ...@@ -6,6 +6,8 @@ const useUserStore = defineStore("user", {
state: (): any => ({ state: (): any => ({
token: getToken(), token: getToken(),
id: "", id: "",
deptId: "",
deptName: "",
name: "", name: "",
avatar: "", avatar: "",
roles: [], roles: [],
...@@ -48,6 +50,8 @@ const useUserStore = defineStore("user", { ...@@ -48,6 +50,8 @@ const useUserStore = defineStore("user", {
this.id = user.userId; this.id = user.userId;
this.name = user.userName; this.name = user.userName;
this.avatar = avatar; this.avatar = avatar;
this.deptId = user.deptId;
this.deptName = user.dept.deptName;
resolve(res); resolve(res);
}) })
.catch((error) => { .catch((error) => {
......
src/views/Home.vue
...@@ -5,17 +5,17 @@ ...@@ -5,17 +5,17 @@
<el-col :span="7" class="column"> <el-col :span="7" class="column">
<div class="grid-content tall-box"> <div class="grid-content tall-box">
<ContainerWrap title="设备接入数量" :endDate="nowTimes"> <ContainerWrap title="设备接入数量" :endDate="nowTimes">
<DeviceNumber :dept-id="selectedOffice[0]" /> <DeviceNumber :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
<div class="grid-content tall-box"> <div class="grid-content tall-box">
<ContainerWrap title="系统分类统计" :endDate="nowTimes"> <ContainerWrap title="系统分类统计" :endDate="nowTimes">
<SysClassification :dept-id="selectedOffice[0]" /> <SysClassification :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
<div class="grid-content tall-box"> <div class="grid-content tall-box">
<ContainerWrap title="设备分类占比" :endDate="nowTimes"> <ContainerWrap title="设备分类占比" :endDate="nowTimes">
<DeviceClassification :dept-id="selectedOffice[0]" /> <DeviceClassification :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
</el-col> </el-col>
...@@ -24,12 +24,12 @@ ...@@ -24,12 +24,12 @@
<el-col :span="10" class="column"> <el-col :span="10" class="column">
<div class="grid-content wide-box" style="flex: 2"> <div class="grid-content wide-box" style="flex: 2">
<ContainerWrap title="设备分布图" :endDate="nowTimes"> <ContainerWrap title="设备分布图" :endDate="nowTimes">
<MapEcharts :dept-id="selectedOffice[0]" /> <MapEcharts :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
<div class="grid-content wide-box" style="flex: 1"> <div class="grid-content wide-box" style="flex: 1">
<ContainerWrap title="下级单位设备统计" :endDate="nowTimes"> <ContainerWrap title="下级单位设备统计" :endDate="nowTimes">
<SubsidiaryCompanyEquipment :dept-id="selectedOffice[0]" /> <SubsidiaryCompanyEquipment :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
</el-col> </el-col>
...@@ -38,17 +38,17 @@ ...@@ -38,17 +38,17 @@
<el-col :span="7" class="column"> <el-col :span="7" class="column">
<div class="grid-content tall-box"> <div class="grid-content tall-box">
<ContainerWrap title="设备告警统计" :endDate="nowTimes"> <ContainerWrap title="设备告警统计" :endDate="nowTimes">
<EquipmentAlarm :dept-id="selectedOffice[0]" /> <EquipmentAlarm :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
<div class="grid-content tall-box"> <div class="grid-content tall-box">
<ContainerWrap title="近7天告警统计" :endDate="nowTimes"> <ContainerWrap title="近7天告警统计" :endDate="nowTimes">
<Alert7Days :dept-id="selectedOffice[0]" /> <Alert7Days :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
<div class="grid-content tall-box"> <div class="grid-content tall-box">
<ContainerWrap title="已部署系统" :endDate="nowTimes"> <ContainerWrap title="已部署系统" :endDate="nowTimes">
<DeployProject :dept-id="selectedOffice[0]" /> <DeployProject :dept-id="selectedOffice" />
</ContainerWrap> </ContainerWrap>
</div> </div>
</el-col> </el-col>
...@@ -133,79 +133,12 @@ import SubsidiaryCompanyEquipment from "./components/SubsidiaryCompanyEquipment. ...@@ -133,79 +133,12 @@ import SubsidiaryCompanyEquipment from "./components/SubsidiaryCompanyEquipment.
import ContainerWrap from "@/components/ContainerWrap/index.vue"; import ContainerWrap from "@/components/ContainerWrap/index.vue";
import { eventBus } from "@/eventBus"; import { eventBus } from "@/eventBus";
import { nowTime } from "@/api/iot/home"; import { nowTime } from "@/api/iot/home";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const nowTimes = ref(""); const nowTimes = ref("");
const dialogVisible = ref(false); const dialogVisible = ref(false);
const selectedOffice = ref([100]); const selectedOffice = ref(userStore.deptId);
const officeTree = ref([
{
value: "1",
label: "公司1",
children: [
{
value: "1-1",
label: "部门1-1",
children: [
{
value: "1-1-1",
label: "隧道1-1-1",
},
{
value: "1-1-2",
label: "隧道1-1-2",
},
],
},
{
value: "1-2",
label: "部门1-2",
children: [
{
value: "1-2-1",
label: "隧道1-2-1",
},
{
value: "1-2-2",
label: "隧道1-2-2",
},
],
},
],
},
{
value: "2",
label: "公司2",
children: [
{
value: "2-1",
label: "部门2-1",
children: [
{
value: "2-1-1",
label: "隧道2-1-1",
},
{
value: "2-1-2",
label: "隧道2-1-2",
},
],
},
{
value: "2-2",
label: "部门2-2",
children: [
{
value: "2-2-1",
label: "隧道2-2-1",
},
{
value: "2-2-2",
label: "隧道2-2-2",
},
],
},
],
},
]);
const sysClassificationList = ref([ const sysClassificationList = ref([
{ {
name: "智慧隧道", name: "智慧隧道",
...@@ -244,6 +177,7 @@ const sysClassificationList = ref([ ...@@ -244,6 +177,7 @@ const sysClassificationList = ref([
offline: 11, offline: 11,
}, },
]); ]);
onMounted(() => { onMounted(() => {
// 监听场景变化事件 // 监听场景变化事件
eventBus.on("sceneChange", (scene) => { eventBus.on("sceneChange", (scene) => {
...@@ -252,12 +186,13 @@ onMounted(() => { ...@@ -252,12 +186,13 @@ onMounted(() => {
// 监听机构变化事件 // 监听机构变化事件
eventBus.on("officeChange", (office) => { eventBus.on("officeChange", (office) => {
selectedOffice.value = office; selectedOffice.value = office[office.length - 1];
}); });
}); });
onUnmounted(() => { onUnmounted(() => {
eventBus.off("sceneChange"); // 避免内存泄漏 eventBus.off("sceneChange"); // 避免内存泄漏
eventBus.off("officeChange"); // 避免内存泄漏
}); });
//获取截止时间 //获取截止时间
......
src/views/components/Alert7Days.vue
...@@ -4,16 +4,38 @@ ...@@ -4,16 +4,38 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { countByDay } from "@/api/iot/home"; import { countByDay } from "@/api/iot/home";
const chartRef = ref<HTMLDivElement>(); const chartRef = ref<HTMLDivElement>();
const chartContainer = ref<HTMLDivElement>();
const chartInstance = ref<echarts.ECharts | null>(null); const chartInstance = ref<echarts.ECharts | null>(null);
let resizeObserver: ResizeObserver | null = null; let resizeObserver: ResizeObserver | null = null;
const isNull = ref(true); const isNull = ref(true);
const props = defineProps({
deptId: {
type: Number,
default: 0,
},
});
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
getList();
});
}
},
{ immediate: true }
);
const xData = ref<any[]>([ const xData = ref<any[]>([
{ {
time: "", time: "",
...@@ -264,15 +286,10 @@ const handleResize = () => { ...@@ -264,15 +286,10 @@ const handleResize = () => {
chartInstance.value?.resize(); chartInstance.value?.resize();
}; };
onMounted(() => { function getList() {
// 确保容器有尺寸
if (chartContainer.value) {
chartContainer.value.style.width = "100%";
chartContainer.value.style.height = "100%";
}
// 构建请求参数 beginTime（年月日时分秒）7天前 endTime（年月日时分秒）今天 // 构建请求参数 beginTime（年月日时分秒）7天前 endTime（年月日时分秒）今天
const data = { const data = {
deptId: deptId.value,
beginTime: beginTime:
new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000) new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
.toISOString() .toISOString()
...@@ -366,7 +383,7 @@ onMounted(() => { ...@@ -366,7 +383,7 @@ onMounted(() => {
}); });
resizeObserver.observe(chartRef.value); resizeObserver.observe(chartRef.value);
} }
}); }
onBeforeUnmount(() => { onBeforeUnmount(() => {
// 清理工作 // 清理工作
......
src/views/components/DeployProject.vue
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, watch, nextTick } from "vue";
import sysBg1 from "@/assets/imgs/sys-bg1.png"; import sysBg1 from "@/assets/imgs/sys-bg1.png";
import sysBg2 from "@/assets/imgs/sys-bg2.png"; import sysBg2 from "@/assets/imgs/sys-bg2.png";
import sysBg3 from "@/assets/imgs/sys-bg3.png"; import sysBg3 from "@/assets/imgs/sys-bg3.png";
...@@ -37,6 +37,21 @@ const props = defineProps({ ...@@ -37,6 +37,21 @@ const props = defineProps({
default: 0, default: 0,
}, },
}); });
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
getCountBySysType();
});
}
},
{ immediate: true }
);
const projectList = ref([ const projectList = ref([
{ {
...@@ -78,7 +93,7 @@ const projectList = ref([ ...@@ -78,7 +93,7 @@ const projectList = ref([
]); ]);
function getCountBySysType() { function getCountBySysType() {
countBySysType(props.deptId).then((res: any) => { countBySysType(deptId.value).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
res.data.map((item: any) => { res.data.map((item: any) => {
projectList.value.map((i: any) => { projectList.value.map((i: any) => {
...@@ -90,7 +105,7 @@ function getCountBySysType() { ...@@ -90,7 +105,7 @@ function getCountBySysType() {
} }
}); });
} }
getCountBySysType(); // getCountBySysType();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bg-container { .bg-container {
......
src/views/components/DeviceClassification.vue
...@@ -5,9 +5,10 @@ ...@@ -5,9 +5,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { deviceCountByType } from "@/api/iot/home"; import { deviceCountByType } from "@/api/iot/home";
import { set } from "nprogress";
const chartContainer = ref<HTMLElement | null>(null); const chartContainer = ref<HTMLElement | null>(null);
const chartInstance = ref<echarts.ECharts | null>(null); const chartInstance = ref<echarts.ECharts | null>(null);
...@@ -22,6 +23,21 @@ const props = defineProps({ ...@@ -22,6 +23,21 @@ const props = defineProps({
const datas = ref([]); const datas = ref([]);
const totalCount = ref(0); const totalCount = ref(0);
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
getList();
});
}
},
{ immediate: true }
);
const initChart = () => { const initChart = () => {
if (!chartContainer.value) return; if (!chartContainer.value) return;
...@@ -189,7 +205,11 @@ const handleResize = () => { ...@@ -189,7 +205,11 @@ const handleResize = () => {
chartInstance.value?.resize(); chartInstance.value?.resize();
}; };
onMounted(() => { // onMounted(() => {
// getList();
// });
function getList() {
deviceCountByType(props.deptId, "1").then((res: any) => { deviceCountByType(props.deptId, "1").then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
const dcbt = res.dcbt || []; const dcbt = res.dcbt || [];
...@@ -223,7 +243,6 @@ onMounted(() => { ...@@ -223,7 +243,6 @@ onMounted(() => {
initChart(); initChart();
} }
}); });
// 使用 ResizeObserver 监听容器大小变化 // 使用 ResizeObserver 监听容器大小变化
if (chartContainer.value) { if (chartContainer.value) {
resizeObserver = new ResizeObserver(() => { resizeObserver = new ResizeObserver(() => {
...@@ -231,10 +250,9 @@ onMounted(() => { ...@@ -231,10 +250,9 @@ onMounted(() => {
}); });
resizeObserver.observe(chartContainer.value); resizeObserver.observe(chartContainer.value);
} }
// 也添加窗口大小变化监听作为后备 // 也添加窗口大小变化监听作为后备
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
}); }
onBeforeUnmount(() => { onBeforeUnmount(() => {
// 移除监听器 // 移除监听器
...@@ -243,7 +261,6 @@ onBeforeUnmount(() => { ...@@ -243,7 +261,6 @@ onBeforeUnmount(() => {
resizeObserver = null; resizeObserver = null;
} }
window.removeEventListener("resize", handleResize); window.removeEventListener("resize", handleResize);
// 销毁图表实例 // 销毁图表实例
chartInstance.value?.dispose(); chartInstance.value?.dispose();
}); });
......
src/views/components/DeviceNumber.vue
...@@ -59,23 +59,16 @@ ...@@ -59,23 +59,16 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, watch } from "vue";
import { computed } from "vue"; import { computed } from "vue";
import { allDevice } from "@/api/iot/home"; import { allDevice } from "@/api/iot/home";
import { get } from "node_modules/axios/index.d.cts";
const props = defineProps({
deptId: {
type: Number,
default: 0,
},
});
// 设备接入数量(在线、离线) // 设备接入数量(在线、离线)
var sumCount = ref("0".padStart(9, "0").split("")); var sumCount = ref("0".padStart(9, "0").split(""));
//在线数量 //在线数量
var onLineCount = ref(0); var onLineCount = ref(0);
//离线数量 //离线数量
var noLineCount = ref(0); var noLineCount = ref(0);
//计算在线和离线百分比 //计算在线和离线百分比
const totalDevices = computed(() => onLineCount.value + noLineCount.value); const totalDevices = computed(() => onLineCount.value + noLineCount.value);
const onlinePercent = computed(() => { const onlinePercent = computed(() => {
...@@ -88,10 +81,30 @@ const offlinePercent = computed(() => { ...@@ -88,10 +81,30 @@ const offlinePercent = computed(() => {
? Math.round((noLineCount.value / totalDevices.value) * 100) ? Math.round((noLineCount.value / totalDevices.value) * 100)
: 0; : 0;
}); });
const props = defineProps({
deptId: {
type: Number,
default: 0,
},
});
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
getAllDevice();
}
},
{ immediate: true }
);
// 获取设备接入数量(在线、离线) // 获取设备接入数量(在线、离线)
function getAllDevice() { function getAllDevice() {
allDevice(props.deptId).then((res: any) => { allDevice(deptId.value).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
// 将数字转换为字符串并补零到9位,并将其拆分为单个数字数组 // 将数字转换为字符串并补零到9位,并将其拆分为单个数字数组
sumCount.value = (res.numMap?.sumCount?.toString() || "0") sumCount.value = (res.numMap?.sumCount?.toString() || "0")
...@@ -104,8 +117,6 @@ function getAllDevice() { ...@@ -104,8 +117,6 @@ function getAllDevice() {
} }
}); });
} }
getAllDevice();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/views/components/EquipmentAlarm.vue
<template> <template>
<div class="flex gap-20"> <div class="flex gap-20">
<!-- 设备告警统计 --> <div class="relative">
<div class="bg-container flex flex-col justify-center"> <!-- 设备告警统计 -->
<div <div class="bg-container flex flex-col justify-center">
class="text-center font-bold text-[34px] text-[#66FFFF] font-[YouSheBiaoTiHei]" <div
> class="text-center font-bold text-[34px] text-[#66FFFF] font-[YouSheBiaoTiHei]"
{{ alarmTotal }} >
{{ alarmTotal }}
</div>
<div class="text-center text-[12px] text-[#66FFFF] mt-0">告警总数</div>
</div> </div>
<div class="text-center text-[12px] text-[#66FFFF] mt-0">告警总数</div>
<div class="bg-container1 absolute top-0 right-0"></div>
</div> </div>
<div class="flex flex-row items-center gap-8"> <div class="flex flex-row items-center gap-8">
...@@ -19,11 +23,13 @@ ...@@ -19,11 +23,13 @@
{{ unprocessedCount }} {{ unprocessedCount }}
</div> </div>
<img <img
src="@/assets/imgs/equ-right-icon.png" src="@/assets/imgs/equ-right-icon1.png"
class="w-[45px] h-[50px] my-1" class="w-[45px] h-[50px] my-1 icon-animation"
alt="未处理图标" alt="未处理图标"
/> />
<div class="text-[12px] text-white mt-1">未处理</div> <div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
未处理
</div>
</div> </div>
<!-- 已处理统计 --> <!-- 已处理统计 -->
...@@ -34,11 +40,13 @@ ...@@ -34,11 +40,13 @@
{{ processedCount }} {{ processedCount }}
</div> </div>
<img <img
src="@/assets/imgs/equ-right-icon.png" src="@/assets/imgs/equ-right-icon2.png"
class="w-[45px] h-[50px] my-1" class="w-[45px] h-[50px] my-1 icon-animation"
alt="已处理图标" alt="已处理图标"
/> />
<div class="text-[12px] text-white mt-1">已处理</div> <div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
已处理
</div>
</div> </div>
<!-- 已处理统计 --> <!-- 已处理统计 -->
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
...@@ -48,11 +56,13 @@ ...@@ -48,11 +56,13 @@
{{ ignoredCount }} {{ ignoredCount }}
</div> </div>
<img <img
src="@/assets/imgs/equ-right-icon.png" src="@/assets/imgs/equ-right-icon3.png"
class="w-[45px] h-[50px] my-1" class="w-[45px] h-[50px] my-1 icon-animation"
alt="已处理图标" alt="已处理图标"
/> />
<div class="text-[12px] text-white mt-1">已忽略</div> <div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
已忽略
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -60,7 +70,7 @@ ...@@ -60,7 +70,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { alarmNumCount } from "@/api/iot/home"; import { alarmNumCount } from "@/api/iot/home";
import { onMounted, ref } from "vue"; import { onMounted, ref, watch, nextTick } from "vue";
// 告警总数 // 告警总数
let alarmTotal = ref(0); let alarmTotal = ref(0);
...@@ -78,9 +88,25 @@ const props = defineProps({ ...@@ -78,9 +88,25 @@ const props = defineProps({
}, },
}); });
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
getAlarmNumCount();
});
}
},
{ immediate: true }
);
// 获取设备告警统计 // 获取设备告警统计
function getAlarmNumCount() { function getAlarmNumCount() {
alarmNumCount(props.deptId).then((res: any) => { alarmNumCount(deptId.value).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
alarmTotal.value = res.data.count; alarmTotal.value = res.data.count;
unprocessedCount.value = res.data.notHandle; unprocessedCount.value = res.data.notHandle;
...@@ -90,19 +116,59 @@ function getAlarmNumCount() { ...@@ -90,19 +116,59 @@ function getAlarmNumCount() {
}); });
} }
getAlarmNumCount(); // getAlarmNumCount();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bg-container { .bg-container {
// background: url("@/assets/imgs/equ-bg.png") no-repeat center center;
// background-size: 100% 100%;
width: 155px;
height: 155px;
@media (max-width: 1440px) {
width: 115px;
height: 115px;
}
}
.bg-container1 {
background: url("@/assets/imgs/equ-bg.png") no-repeat center center; background: url("@/assets/imgs/equ-bg.png") no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
width: 155px; width: 155px;
height: 155px; height: 155px;
// 图片循环旋转动画
animation: rotate 9s linear infinite;
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 1440px) { @media (max-width: 1440px) {
width: 115px; width: 115px;
height: 115px; height: 115px;
} }
} }
.icon-animation {
//循环放大、缩小动画播放
animation: cluster-marker-zoom 0.9s ease-in-out infinite;
}
@keyframes cluster-marker-zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style> </style>
src/views/components/Map.vue
<template> <template>
<div class="w-full h-full relative"> <div class="w-full h-full relative">
<div class="map-container w-full h-full" id="container"></div> <div class="map-container w-full h-full" id="container"></div>
<div class="absolute top-2 left-2 z-[999]"> <div
<el-tree-select class="absolute top-2 left-2 z-[999] bg-[url('@/assets/imgs/map-screening-bg.png')] bg-cover cursor-pointer pl-3 pt-2 pb-2 pr-3"
>
<!-- <el-tree-select
style="width: 150px" style="width: 150px"
v-model="treeDataValue" v-model="treeDataValue"
:data="treeDataList" :data="treeDataList"
...@@ -12,7 +14,30 @@ ...@@ -12,7 +14,30 @@
check-strictly check-strictly
:render-after-expand="false" :render-after-expand="false"
@change="handleSceneChange" @change="handleSceneChange"
/> /> -->
<!-- 左对齐 -->
<div
class="text-[14px] mb-1 bg-[url('@/assets/imgs/map-screening-titile-bg.png')] bg-cover px-4"
>
设备筛选
</div>
<el-radio-group
v-model="radio"
style="
flex-direction: column;
gap: 0px;
align-items: flex-start;
display: grid;
grid-template-columns: repeat(2, 1fr);
"
>
<el-radio
v-for="treeData in dataList"
:key="treeData.id"
:label="treeData.label"
:value="treeData.id"
/>
</el-radio-group>
</div> </div>
</div> </div>
</template> </template>
...@@ -33,6 +58,7 @@ let map = null; ...@@ -33,6 +58,7 @@ let map = null;
let showInfoWindow = false; let showInfoWindow = false;
let infoWindow = null; let infoWindow = null;
var points = ref([]); var points = ref([]);
const deptId = ref(); //机构id
const treeDataValue = ref([]); const treeDataValue = ref([]);
const treeDataList = ref([]); const treeDataList = ref([]);
const treeDataAllList = ref([]); const treeDataAllList = ref([]);
...@@ -44,16 +70,102 @@ const fiveTypeId = ref(""); ...@@ -44,16 +70,102 @@ const fiveTypeId = ref("");
const sixTypeId = ref(""); const sixTypeId = ref("");
const map_opt = [ const map_opt = [
{ {
city: "太原", city: "太原市",
color: "red", color: "blue",
},
{
city: "大同市",
color: "blue",
},
{
city: "朔州市",
color: "blue",
},
{
city: "忻州市",
color: "blue",
},
{
city: "太原市",
color: "blue",
},
{
city: "阳泉市",
color: "blue",
},
{
city: "吕梁市",
color: "blue",
},
{
city: "长治市",
color: "blue",
},
{
city: "临汾市",
color: "blue",
},
{
city: "运城市",
color: "blue",
},
{
city: "晋城市",
color: "blue",
},
{
city: "晋中市",
color: "blue",
}, },
]; ];
const defaultProps = {
children: "children",
label: "label",
};
const radio = ref("");
const dataList = ref([
{
id: 1,
label: "LED",
value: "New York",
},
{
id: 2,
label: "摄像头",
value: "New York",
},
{
id: 3,
label: "LED",
value: "New York",
},
]);
const props = defineProps({ const props = defineProps({
deptId: { deptId: {
type: Number, type: Number,
default: 0, default: 0,
}, },
}); });
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
// 先清除现有地图（如果存在）
if (map) {
map.clearMap(); // 清除覆盖物而不是销毁地图
}
getDeviceList();
});
}
},
{ immediate: true }
);
onMounted(() => { onMounted(() => {
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
...@@ -110,46 +222,39 @@ function initMap() { ...@@ -110,46 +222,39 @@ function initMap() {
], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...'] ], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
}) })
.then((AMap) => { .then((AMap) => {
// 绘制省份边界 map = new AMap.Map("container", {
const district = new AMap.DistrictSearch({ pitch: 35, // 倾斜角度
subdistrict: 0, zoom: 6.7, // 设置当前显示级别
extensions: "all", expandZoomRange: true, // 开启显示范围设置
level: "province", animateEnable: true,
zooms: [3, 20], //最小显示级别为7，最大显示级别为20
center: [112.39, 36.99], // 设置地图中心点位置
viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
zoomEnable: true, // 是否可以缩放地图
resizeEnable: true, // 是否开启地图自动调整大小
mapStyle: "amap://styles/darkblue",
// mapStyle: "amap://styles/darkblue", // 地图样式，默认值为amap://styles/normal
}); });
district.search("山西", function (status, result) { // 获取边界坐标点
// 查询成功时，result即为对应的行政区信息 AMap.plugin("AMap.DistrictSearch", () => {
const bounds = result.districtList[0].boundaries; var districtSearch = new AMap.DistrictSearch({
const mask = []; // 关键字对应的行政区级别，共有5种级别
for (let i = 0; i < bounds.length; i++) { level: "province",
mask.push([bounds[i]]); // 是否显示下级行政区级数，1表示返回下一级行政区
} subdistrict: 0,
// 返回行政区边界坐标点
const map = new AMap.Map("container", { extensions: "all",
pitch: 30, // 倾斜角度
zoom: 6.7, // 设置当前显示级别
expandZoomRange: true, // 开启显示范围设置
animateEnable: true,
zooms: [3, 20], //最小显示级别为7，最大显示级别为20
center: [112.39, 36.99], // 设置地图中心点位置
viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
zoomEnable: true, // 是否可以缩放地图
resizeEnable: true, // 是否开启地图自动调整大小
mapStyle: "amap://styles/darkblue", // 地图样式，默认值为amap://styles/normal
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
}); });
// 添加描边
for (let i = 0; i < bounds.length; i++) { for (let i = 0; i < map_opt.length; i++) {
const polyline = new AMap.Polyline({ // 搜索所有省/直辖市信息
path: bounds[i], // polyline 路径，支持 lineString 和 MultiLineString districtSearch.search(map_opt[i].city, (status, result) => {
strokeColor: "blue", // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC // 查询成功时，result即为对应的行政区信息
strokeWeight: 5, // 轮廓线宽度,默认为:2 handlePolygon(result, map_opt[i].color);
// map:map // 这种方式相当于: polyline.setMap(map);
fillColor: "#80d8ff", // 填充颜色，使用16进制颜色代码赋值。默认值为#00D3FC
strokeColor: "blue", // 轮廓线颜色，使用16进制颜色代码赋值。默认值为#00D3FC
}); });
polyline.setMap(map);
} }
//添加图层MarkerClusterer //添加图层MarkerClusterer
const cluster = new AMap.MarkerClusterer( const cluster = new AMap.MarkerClusterer(
map, // 地图实例 map, // 地图实例
...@@ -157,13 +262,13 @@ function initMap() { ...@@ -157,13 +262,13 @@ function initMap() {
{ {
gridSize: 10, // 聚合网格的像素大小，默认值为60 gridSize: 10, // 聚合网格的像素大小，默认值为60
//聚合点样式 //聚合点样式
// renderClusterMarker: _renderClusterMarker, renderClusterMarker: _renderClusterMarker,
//非聚合点样式 //非聚合点样式
renderMarker: (context) => { renderMarker: (context) => {
const item = context.data[0]; const item = context.data[0];
//设置非聚合点样式 //设置非聚合点样式
context.marker.setContent( context.marker.setContent(
`<img src="${item.twoType.pic}" alt="" style="width: 25px;height: 25px;">` `<img src="${item.twoType.pic}" class="cluster-marker1" alt="" style="width: 25px;height: 25px;">`
); );
// 自定义点击事件 // 自定义点击事件
context.marker.on("click", function (e) { context.marker.on("click", function (e) {
...@@ -226,6 +331,45 @@ function initMap() { ...@@ -226,6 +331,45 @@ function initMap() {
console.log(e); console.log(e);
}); });
} }
// 根据坐标点画边界
function handlePolygon(result, color) {
let bounds = result.districtList[0].boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
let polygon = new AMap.Polygon({
map: map, // 指定地图对象
strokeWeight: 1.5, // 轮廓线宽度
path: bounds[i], //轮廓线的节点坐标数组
fillOpacity: 0.3, //透明度
fillColor: color, //填充颜色
strokeColor: "blue", //线条颜色
});
polygon.on("mouseout", (e) => {
// 点击绘制的区域时执行其他交互;
//点击后，图层突出
polygon.setOptions({
fillColor: "blue", //填充颜色
strokeWeight: 1.5, // 轮廓线宽度
strokeColor: "blue", //线条颜色
});
});
polygon.on("mouseover", (e) => {
// 点击绘制的区域时执行其他交互;
//点击后，图层突出
polygon.setOptions({
fillColor: "red", //填充颜色
strokeWeight: 3.5, // 轮廓线宽度
strokeColor: "red", //线条颜色
});
});
}
// 地图自适应
// map.setFitView();
}
}
//显示设备类型 //显示设备类型
var showDeviceType = function (item) { var showDeviceType = function (item) {
return item.twoType.name; return item.twoType.name;
...@@ -244,7 +388,50 @@ var closeInfoWindow = function () { ...@@ -244,7 +388,50 @@ var closeInfoWindow = function () {
infoWindow.close(); infoWindow.close();
}; };
//聚合点样式 //聚合点样式
var _renderClusterMarker = function (context) {}; var _renderClusterMarker = function (context) {
//在聚合点上显示聚合数量和城市名称
context.marker.setContent(`
<div style="position: relative; width: 45px; height: 45px;">
<img class="cluster-marker" src="${
context.count < 10
? "http://webapi.amap.com/theme/v1.3/m2.png"
: context.count < 50
? "http://webapi.amap.com/theme/v1.3/m4.png"
: context.count >= 50
? "http://webapi.amap.com/theme/v1.3/m3.png"
: "http://webapi.amap.com/theme/v1.3/m3.png"
}" style="width: 100%; height: 100%; display: block;">
<div style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
">
<div style="font-size: 8px; line-height: 1; margin-bottom: 1px;">
${""}
</div>
<div style="font-size: 14px; line-height: 1;font-family: 'PangMen';">
${context.count}
</div>
</div>
</div>
`);
context.marker.on("click", function (e) {
console.log(e);
var curZoom = map.getZoom();
if (curZoom < 20) {
curZoom += 2;
}
map.setZoomAndCenter(curZoom, e.lnglat);
});
};
onUnmounted(() => { onUnmounted(() => {
map?.destroy(); map?.destroy();
...@@ -261,6 +448,10 @@ function getDeviceList() { ...@@ -261,6 +448,10 @@ function getDeviceList() {
sixTypeId.value sixTypeId.value
).then((res) => { ).then((res) => {
points.value = res.rows; points.value = res.rows;
//将res.rows获取的数据循环两次 加入points.value
// res.rows.forEach((item) => {
// points.value.push(item);
// });
points.value.forEach((item) => { points.value.forEach((item) => {
item.lnglat = [item.longitude, item.latitude]; item.lnglat = [item.longitude, item.latitude];
item.weight = 1; item.weight = 1;
...@@ -273,10 +464,17 @@ function getDeviceTypeList() { ...@@ -273,10 +464,17 @@ function getDeviceTypeList() {
deviceTypeList().then((res) => { deviceTypeList().then((res) => {
treeDataAllList.value = res.data; treeDataAllList.value = res.data;
treeDataList.value = handleTree(res.data, "id"); treeDataList.value = handleTree(res.data, "id");
// 将 treeDataList.value内的二级数据遍历出来放到dataList
treeDataList.value.forEach((item) => {
if (item.children) {
item.children.forEach((child) => {
dataList.value.push(child);
});
}
});
}); });
} }
getDeviceList();
getDeviceTypeList(); getDeviceTypeList();
</script> </script>
...@@ -302,4 +500,23 @@ getDeviceTypeList(); ...@@ -302,4 +500,23 @@ getDeviceTypeList();
.amap-logo { .amap-logo {
display: none !important; display: none !important;
} }
.cluster-marker {
/* 定位点循环播放放大缩小动画 */
animation: cluster-marker-zoom 0.8s ease-in-out infinite;
}
@keyframes cluster-marker-zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.cluster-marker1:hover {
/* //移入放大 */
transform: scale(1.5);
}
</style> </style>
src/views/components/SubsidiaryCompanyEquipment.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { debounce } from "lodash-es"; // 或使用自定义防抖函数 import { debounce } from "lodash-es"; // 或使用自定义防抖函数
import { deviceCountByChild } from "@/api/iot/home"; import { deviceCountByChild } from "@/api/iot/home";
...@@ -21,6 +21,22 @@ const props = defineProps({ ...@@ -21,6 +21,22 @@ const props = defineProps({
default: 0, default: 0,
}, },
}); });
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
getList();
});
}
},
{ immediate: true }
);
// 防抖的重绘函数 // 防抖的重绘函数
const handleResize = debounce(() => { const handleResize = debounce(() => {
chart.value?.resize(); chart.value?.resize();
...@@ -112,8 +128,8 @@ const initChart = () => { ...@@ -112,8 +128,8 @@ const initChart = () => {
chart.value.setOption(option); chart.value.setOption(option);
}; };
onMounted(() => { function getList() {
deviceCountByChild(props.deptId).then((res: any) => { deviceCountByChild(deptId.value).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
const childDeptList = res.result?.childDeptList || []; const childDeptList = res.result?.childDeptList || [];
const numMap = res.result?.numMap || {}; const numMap = res.result?.numMap || {};
...@@ -150,7 +166,7 @@ onMounted(() => { ...@@ -150,7 +166,7 @@ onMounted(() => {
} }
// 仍然监听窗口大小变化作为后备 // 仍然监听窗口大小变化作为后备
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
}); }
onBeforeUnmount(() => { onBeforeUnmount(() => {
// 清理工作 // 清理工作
......
src/views/components/SysClassification.vue
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { countBySysType } from "@/api/iot/home"; import { countBySysType } from "@/api/iot/home";
const router = useRouter(); const router = useRouter();
...@@ -91,6 +91,20 @@ const sysClassificationList = ref([ ...@@ -91,6 +91,20 @@ const sysClassificationList = ref([
}, },
]); ]);
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
getCountBySysType();
}
},
{ immediate: true }
);
// 点击事件 // 点击事件
const handleClick = (item: any, index: number) => { const handleClick = (item: any, index: number) => {
switch (index) { switch (index) {
...@@ -121,7 +135,7 @@ const handleClick = (item: any, index: number) => { ...@@ -121,7 +135,7 @@ const handleClick = (item: any, index: number) => {
}; };
function getCountBySysType() { function getCountBySysType() {
countBySysType(props.deptId).then((res: any) => { countBySysType(deptId.value).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
res.data.map((item: any) => { res.data.map((item: any) => {
// 如果 item.type==1 则赋值给 sysClassificationList[0] // 如果 item.type==1 则赋值给 sysClassificationList[0]
...@@ -134,7 +148,6 @@ function getCountBySysType() { ...@@ -134,7 +148,6 @@ function getCountBySysType() {
} }
}); });
} }
getCountBySysType();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/views/tunnel/TunnelHome.vue
...@@ -97,11 +97,12 @@ import DataInfo from "./components/DataInfo.vue"; ...@@ -97,11 +97,12 @@ import DataInfo from "./components/DataInfo.vue";
import TunnelStatusNum from "./components/TunnelStatusNum.vue"; import TunnelStatusNum from "./components/TunnelStatusNum.vue";
import ConstructionProgress from "./components/ConstructionProgress.vue"; import ConstructionProgress from "./components/ConstructionProgress.vue";
import ContainerWrap from "@/layout/tunnel/components/ContainerWrap/index.vue"; import ContainerWrap from "@/layout/tunnel/components/ContainerWrap/index.vue";
import { officeInfo, listForParent } from "@/api/tunnel/office"; import { listForParent } from "@/api/tunnel/office";
import gsap from "gsap"; import gsap from "gsap";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const router = useRouter(); const router = useRouter();
const selectedOffice = ref(100); const selectedOffice = ref();
const selectedOfficeList = ref([]); const selectedOfficeList = ref([]);
const handleOfficeChange = (val: any) => { const handleOfficeChange = (val: any) => {
...@@ -116,20 +117,20 @@ const handleMoreVideoClick = () => { ...@@ -116,20 +117,20 @@ const handleMoreVideoClick = () => {
// 获取机构信息 // 获取机构信息
function getOfficeInfo() { function getOfficeInfo() {
// listForParent().then((res: any) => { listForParent().then((res: any) => {
// console.log(res); console.log(res);
// if (res.code === 200) { if (res.code === 200) {
// selectedOfficeList.value = res.data; selectedOfficeList.value = res.data;
// if (selectedOfficeList.value.length > 0) { if (selectedOfficeList.value.length > 0) {
// //为selectedOfficeList下标 0 添加一个默认值 //为selectedOfficeList下标 0 添加一个默认值
// selectedOfficeList.value.unshift({ selectedOfficeList.value.unshift({
// deptId: 100, deptId: userStore.deptId,
// deptName: "山西路桥集团", deptName: userStore.deptName,
// }); });
// selectedOffice.value = selectedOfficeList.value[0].deptId; selectedOffice.value = selectedOfficeList.value[0].deptId;
// } }
// } }
// }); });
} }
getOfficeInfo(); getOfficeInfo();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment