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 662 additions and 294 deletions
components.d.ts
......@@ -24,12 +24,14 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput']
ElLink: typeof import('element-plus/es')['ElLink']
ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
ItemWrap: typeof import('./src/components/ItemWrap/index.vue')['default']
......
node_modules/.vite/deps/_metadata.json
......@@ -2,315 +2,330 @@
"hash": "cafa6c33",
"configHash": "ca4ef806",
"lockfileHash": "2e2ef206",
"browserHash": "0e27a73e",
"browserHash": "150382ed",
"optimized": {
"vue": {
"src": "../../.pnpm/vue@3.5.21_typescript@5.8.3/node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js",
"fileHash": "87ddee12",
"fileHash": "f5e17a85",
"needsInterop": false
},
"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",
"file": "vue-router.js",
"fileHash": "5c928852",
"fileHash": "16252a98",
"needsInterop": false
},
"element-plus": {
"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",
"fileHash": "ccdc7587",
"fileHash": "787234f2",
"needsInterop": false
},
"@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",
"file": "@element-plus_icons-vue.js",
"fileHash": "264612ec",
"fileHash": "8a909402",
"needsInterop": false
},
"nprogress": {
"src": "../../.pnpm/nprogress@0.2.0/node_modules/nprogress/nprogress.js",
"file": "nprogress.js",
"fileHash": "1b284b75",
"fileHash": "1f7fcd41",
"needsInterop": true
},
"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",
"file": "pinia.js",
"fileHash": "be92118b",
"fileHash": "bfbda65f",
"needsInterop": false
},
"js-cookie": {
"src": "../../.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.mjs",
"file": "js-cookie.js",
"fileHash": "62c4cd6c",
"fileHash": "37560378",
"needsInterop": false
},
"axios": {
"src": "../../.pnpm/axios@1.12.2/node_modules/axios/index.js",
"file": "axios.js",
"fileHash": "ea2a71e4",
"fileHash": "b567a3bf",
"needsInterop": false
},
"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",
"file": "element-plus_es.js",
"fileHash": "89bc77ef",
"fileHash": "0b7c7bc3",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_base_style_index.js",
"fileHash": "43656ea6",
"fileHash": "6b4cd206",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_dialog_style_index.js",
"fileHash": "d7741cf6",
"fileHash": "f5828d77",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_icon_style_index.js",
"fileHash": "2404825c",
"fileHash": "9cf4fe7f",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_row_style_index.js",
"fileHash": "c1961891",
"fileHash": "0c12f508",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_col_style_index.js",
"fileHash": "bf25bb81",
"fileHash": "dc28641f",
"needsInterop": false
},
"@amap/amap-jsapi-loader": {
"src": "../../.pnpm/@amap+amap-jsapi-loader@1.0.1/node_modules/@amap/amap-jsapi-loader/dist/index.js",
"file": "@amap_amap-jsapi-loader.js",
"fileHash": "bd0193b2",
"fileHash": "b6581875",
"needsInterop": true
},
"mitt": {
"src": "../../.pnpm/mitt@3.0.1/node_modules/mitt/dist/mitt.mjs",
"file": "mitt.js",
"fileHash": "aeb356e1",
"fileHash": "db0b1ba1",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_select_style_index.js",
"fileHash": "8608194a",
"fileHash": "1c376174",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_option_style_index.js",
"fileHash": "21f81b09",
"fileHash": "0a677e66",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_cascader_style_index.js",
"fileHash": "e0a83a59",
"fileHash": "7afc3ce6",
"needsInterop": false
},
"echarts": {
"src": "../../.pnpm/echarts@6.0.0/node_modules/echarts/index.js",
"file": "echarts.js",
"fileHash": "6074d5e8",
"fileHash": "c975bfc1",
"needsInterop": false
},
"lodash-es": {
"src": "../../lodash-es/lodash.js",
"file": "lodash-es.js",
"fileHash": "59e4445c",
"fileHash": "237d3294",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_form_style_index.js",
"fileHash": "e954add2",
"fileHash": "8a93cc4f",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_button_style_index.js",
"fileHash": "7a0082cf",
"fileHash": "89e800e4",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_checkbox_style_index.js",
"fileHash": "620b4d72",
"fileHash": "0be9e2ae",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_form-item_style_index.js",
"fileHash": "01c653d7",
"fileHash": "872d79f5",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_input_style_index.js",
"fileHash": "fbcbcbcf",
"fileHash": "ed189b4e",
"needsInterop": false
},
"jsencrypt": {
"src": "../../.pnpm/jsencrypt@3.5.4/node_modules/jsencrypt/lib/index.js",
"file": "jsencrypt.js",
"fileHash": "b0d90799",
"fileHash": "67dbe6bb",
"needsInterop": false
},
"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",
"fileHash": "28aa4287",
"fileHash": "c7fd4888",
"needsInterop": false
},
"gsap": {
"src": "../../.pnpm/gsap@3.13.0/node_modules/gsap/index.js",
"file": "gsap.js",
"fileHash": "4ad6140f",
"fileHash": "8d0308cb",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_image_style_index.js",
"fileHash": "8a7bbb14",
"fileHash": "eaf1adaf",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_radio-group_style_index.js",
"fileHash": "1d02d183",
"fileHash": "d1bb7465",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_radio-button_style_index.js",
"fileHash": "cca3c084",
"fileHash": "88b878a1",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_table_style_index.js",
"fileHash": "7fd3a7bc",
"fileHash": "4dfeb844",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_table-column_style_index.js",
"fileHash": "c6c96631",
"fileHash": "3fa36b78",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_empty_style_index.js",
"fileHash": "f87315b7",
"fileHash": "394a8a93",
"needsInterop": false
},
"three": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/build/three.module.js",
"file": "three.js",
"fileHash": "d7a19317",
"fileHash": "374f14ed",
"needsInterop": false
},
"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",
"fileHash": "f0193881",
"fileHash": "dbb52b87",
"needsInterop": false
},
"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",
"fileHash": "5c5fdd84",
"fileHash": "db978db5",
"needsInterop": false
},
"three/addons/renderers/CSS3DRenderer.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/renderers/CSS3DRenderer.js",
"file": "three_addons_renderers_CSS3DRenderer__js.js",
"fileHash": "8401fe7c",
"fileHash": "b4dfb96c",
"needsInterop": false
},
"three/addons/postprocessing/EffectComposer.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/EffectComposer.js",
"file": "three_addons_postprocessing_EffectComposer__js.js",
"fileHash": "e7ffac86",
"fileHash": "f7f13f7b",
"needsInterop": false
},
"three/addons/postprocessing/RenderPass.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/RenderPass.js",
"file": "three_addons_postprocessing_RenderPass__js.js",
"fileHash": "2b0dd704",
"fileHash": "ba2b4fa1",
"needsInterop": false
},
"three/addons/postprocessing/OutlinePass.js": {
"src": "../../.pnpm/three@0.181.2/node_modules/three/examples/jsm/postprocessing/OutlinePass.js",
"file": "three_addons_postprocessing_OutlinePass__js.js",
"fileHash": "01742d42",
"fileHash": "2929c620",
"needsInterop": false
},
"d3": {
"src": "../../.pnpm/d3@7.9.0/node_modules/d3/src/index.js",
"file": "d3.js",
"fileHash": "82a9c8d0",
"fileHash": "6adb0117",
"needsInterop": false
},
"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",
"fileHash": "aaa10260",
"fileHash": "e365d9c6",
"needsInterop": false
},
"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",
"fileHash": "afba021a",
"fileHash": "fca98eff",
"needsInterop": false
},
"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",
"fileHash": "979cf533",
"fileHash": "447ce7b9",
"needsInterop": false
},
"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",
"fileHash": "e8002e08",
"fileHash": "d7904248",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_card_style_index.js",
"fileHash": "d8002715",
"fileHash": "b7ba9799",
"needsInterop": false
},
"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",
"file": "element-plus_es_components_link_style_index.js",
"fileHash": "6bbb9ec6",
"fileHash": "daa48ba3",
"needsInterop": false
},
"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",
"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
}
},
"chunks": {
"chunk-PPLACW3U": {
"file": "chunk-PPLACW3U.js"
},
"chunk-CQSJN7WN": {
"file": "chunk-CQSJN7WN.js"
},
"chunk-PPLACW3U": {
"file": "chunk-PPLACW3U.js"
"chunk-FTWWI2M3": {
"file": "chunk-FTWWI2M3.js"
},
"chunk-IXSGC3JQ": {
"file": "chunk-IXSGC3JQ.js"
......@@ -342,15 +357,15 @@
"chunk-XJ4FNH6G": {
"file": "chunk-XJ4FNH6G.js"
},
"chunk-E7BDDJX4": {
"file": "chunk-E7BDDJX4.js"
},
"chunk-ZFNCKSYC": {
"file": "chunk-ZFNCKSYC.js"
},
"chunk-WYGDTZ7H": {
"file": "chunk-WYGDTZ7H.js"
},
"chunk-HQ2UCEI6": {
"file": "chunk-HQ2UCEI6.js"
},
"chunk-5WDSIG6Y": {
"file": "chunk-5WDSIG6Y.js"
},
......@@ -359,6 +374,9 @@
},
"chunk-G3PMV62Z": {
"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 useUserStore from "@/store/modules/user";
// 获取机构信息,传用户id
export function officeInfo() {
const userStore = useUserStore();
export function officeTreeList(deptId: any) {
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",
});
}
src/api/tunnel/office.ts
......@@ -18,7 +18,7 @@ export function listForParent() {
"/system/dept/listForParent?deptId=" +
userStore.deptId +
"&noOffiiceType=" +
6,
5,
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; // 悬停蓝色
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 {
width: 8px;
......
src/layout/main.vue
......@@ -15,22 +15,18 @@
<div class="office-select">
<el-cascader
placeholder="请选择机构"
:options="officeTree"
v-model="selectedOffice"
clearable
filterable
:show-all-levels="false"
:props="{
expandTrigger: 'hover',
multiple: false,
checkStrictly: true,
}"
:props="dataProps"
@change="handleOfficeChange"
>
</el-cascader>
</div>
<div class="scene-select">
<el-select
v-if="false"
v-model="selectedScene"
placeholder="应用场景"
@change="handleSceneChange"
......@@ -60,9 +56,22 @@ import Menu from "./components/Menu.vue";
import User from "./components/User.vue";
import { ref } from "vue";
import { eventBus } from "@/eventBus";
import { officeTreeList, officeTreeParentList } from "@api/iot/office";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
var selectedOffice = ref(["1"]);
var selectedScene = ref();
const dataProps = {
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([
{
......@@ -83,47 +92,62 @@ var sceneTree = 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: "路桥二公司",
},
]);
var officeTree = ref([]);
function handleOfficeChange(val: any) {
console.log(val);
//触发场景变化事件在选择机构后，弹出场景弹窗
eventBus.emit("officeChange", val);
}
function handleSceneChange(val: any) {
console.log(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>
<style scoped lang="scss">
......
src/store/modules/user.ts
......@@ -6,6 +6,8 @@ const useUserStore = defineStore("user", {
state: (): any => ({
token: getToken(),
id: "",
deptId: "",
deptName: "",
name: "",
avatar: "",
roles: [],
......@@ -48,6 +50,8 @@ const useUserStore = defineStore("user", {
this.id = user.userId;
this.name = user.userName;
this.avatar = avatar;
this.deptId = user.deptId;
this.deptName = user.dept.deptName;
resolve(res);
})
.catch((error) => {
......
src/views/Home.vue
......@@ -5,17 +5,17 @@
<el-col :span="7" class="column">
<div class="grid-content tall-box">
<ContainerWrap title="设备接入数量" :endDate="nowTimes">
<DeviceNumber :dept-id="selectedOffice[0]" />
<DeviceNumber :dept-id="selectedOffice" />
</ContainerWrap>
</div>
<div class="grid-content tall-box">
<ContainerWrap title="系统分类统计" :endDate="nowTimes">
<SysClassification :dept-id="selectedOffice[0]" />
<SysClassification :dept-id="selectedOffice" />
</ContainerWrap>
</div>
<div class="grid-content tall-box">
<ContainerWrap title="设备分类占比" :endDate="nowTimes">
<DeviceClassification :dept-id="selectedOffice[0]" />
<DeviceClassification :dept-id="selectedOffice" />
</ContainerWrap>
</div>
</el-col>
......@@ -24,12 +24,12 @@
<el-col :span="10" class="column">
<div class="grid-content wide-box" style="flex: 2">
<ContainerWrap title="设备分布图" :endDate="nowTimes">
<MapEcharts :dept-id="selectedOffice[0]" />
<MapEcharts :dept-id="selectedOffice" />
</ContainerWrap>
</div>
<div class="grid-content wide-box" style="flex: 1">
<ContainerWrap title="下级单位设备统计" :endDate="nowTimes">
<SubsidiaryCompanyEquipment :dept-id="selectedOffice[0]" />
<SubsidiaryCompanyEquipment :dept-id="selectedOffice" />
</ContainerWrap>
</div>
</el-col>
......@@ -38,17 +38,17 @@
<el-col :span="7" class="column">
<div class="grid-content tall-box">
<ContainerWrap title="设备告警统计" :endDate="nowTimes">
<EquipmentAlarm :dept-id="selectedOffice[0]" />
<EquipmentAlarm :dept-id="selectedOffice" />
</ContainerWrap>
</div>
<div class="grid-content tall-box">
<ContainerWrap title="近7天告警统计" :endDate="nowTimes">
<Alert7Days :dept-id="selectedOffice[0]" />
<Alert7Days :dept-id="selectedOffice" />
</ContainerWrap>
</div>
<div class="grid-content tall-box">
<ContainerWrap title="已部署系统" :endDate="nowTimes">
<DeployProject :dept-id="selectedOffice[0]" />
<DeployProject :dept-id="selectedOffice" />
</ContainerWrap>
</div>
</el-col>
......@@ -133,79 +133,12 @@ import SubsidiaryCompanyEquipment from "./components/SubsidiaryCompanyEquipment.
import ContainerWrap from "@/components/ContainerWrap/index.vue";
import { eventBus } from "@/eventBus";
import { nowTime } from "@/api/iot/home";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const nowTimes = ref("");
const dialogVisible = ref(false);
const selectedOffice = ref([100]);
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 selectedOffice = ref(userStore.deptId);
const sysClassificationList = ref([
{
name: "智慧隧道",
......@@ -244,6 +177,7 @@ const sysClassificationList = ref([
offline: 11,
},
]);
onMounted(() => {
// 监听场景变化事件
eventBus.on("sceneChange", (scene) => {
......@@ -252,12 +186,13 @@ onMounted(() => {
// 监听机构变化事件
eventBus.on("officeChange", (office) => {
selectedOffice.value = office;
selectedOffice.value = office[office.length - 1];
});
});
onUnmounted(() => {
eventBus.off("sceneChange"); // 避免内存泄漏
eventBus.off("officeChange"); // 避免内存泄漏
});
//获取截止时间
......
src/views/components/Alert7Days.vue
......@@ -4,16 +4,38 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { countByDay } from "@/api/iot/home";
const chartRef = ref<HTMLDivElement>();
const chartContainer = ref<HTMLDivElement>();
const chartInstance = ref<echarts.ECharts | null>(null);
let resizeObserver: ResizeObserver | null = null;
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[]>([
{
time: "",
......@@ -264,15 +286,10 @@ const handleResize = () => {
chartInstance.value?.resize();
};
onMounted(() => {
// 确保容器有尺寸
if (chartContainer.value) {
chartContainer.value.style.width = "100%";
chartContainer.value.style.height = "100%";
}
function getList() {
// 构建请求参数 beginTime（年月日时分秒）7天前 endTime（年月日时分秒）今天
const data = {
deptId: deptId.value,
beginTime:
new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
.toISOString()
......@@ -366,7 +383,7 @@ onMounted(() => {
});
resizeObserver.observe(chartRef.value);
}
});
}
onBeforeUnmount(() => {
// 清理工作
......
src/views/components/DeployProject.vue
......@@ -24,7 +24,7 @@
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch, nextTick } from "vue";
import sysBg1 from "@/assets/imgs/sys-bg1.png";
import sysBg2 from "@/assets/imgs/sys-bg2.png";
import sysBg3 from "@/assets/imgs/sys-bg3.png";
......@@ -37,6 +37,21 @@ const props = defineProps({
default: 0,
},
});
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
getCountBySysType();
});
}
},
{ immediate: true }
);
const projectList = ref([
{
......@@ -78,7 +93,7 @@ const projectList = ref([
]);
function getCountBySysType() {
countBySysType(props.deptId).then((res: any) => {
countBySysType(deptId.value).then((res: any) => {
if (res.code === 200) {
res.data.map((item: any) => {
projectList.value.map((i: any) => {
......@@ -90,7 +105,7 @@ function getCountBySysType() {
}
});
}
getCountBySysType();
// getCountBySysType();
</script>
<style scoped lang="scss">
.bg-container {
......
src/views/components/DeviceClassification.vue
......@@ -5,9 +5,10 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { deviceCountByType } from "@/api/iot/home";
import { set } from "nprogress";
const chartContainer = ref<HTMLElement | null>(null);
const chartInstance = ref<echarts.ECharts | null>(null);
......@@ -22,6 +23,21 @@ const props = defineProps({
const datas = ref([]);
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 = () => {
if (!chartContainer.value) return;
......@@ -189,7 +205,11 @@ const handleResize = () => {
chartInstance.value?.resize();
};
onMounted(() => {
// onMounted(() => {
// getList();
// });
function getList() {
deviceCountByType(props.deptId, "1").then((res: any) => {
if (res.code === 200) {
const dcbt = res.dcbt || [];
......@@ -223,7 +243,6 @@ onMounted(() => {
initChart();
}
});
// 使用 ResizeObserver 监听容器大小变化
if (chartContainer.value) {
resizeObserver = new ResizeObserver(() => {
......@@ -231,10 +250,9 @@ onMounted(() => {
});
resizeObserver.observe(chartContainer.value);
}
// 也添加窗口大小变化监听作为后备
window.addEventListener("resize", handleResize);
});
}
onBeforeUnmount(() => {
// 移除监听器
......@@ -243,7 +261,6 @@ onBeforeUnmount(() => {
resizeObserver = null;
}
window.removeEventListener("resize", handleResize);
// 销毁图表实例
chartInstance.value?.dispose();
});
......
src/views/components/DeviceNumber.vue
......@@ -59,23 +59,16 @@
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import { computed } from "vue";
import { allDevice } from "@/api/iot/home";
const props = defineProps({
deptId: {
type: Number,
default: 0,
},
});
import { get } from "node_modules/axios/index.d.cts";
// 设备接入数量(在线、离线)
var sumCount = ref("0".padStart(9, "0").split(""));
//在线数量
var onLineCount = ref(0);
//离线数量
var noLineCount = ref(0);
//计算在线和离线百分比
const totalDevices = computed(() => onLineCount.value + noLineCount.value);
const onlinePercent = computed(() => {
......@@ -88,10 +81,30 @@ const offlinePercent = computed(() => {
? Math.round((noLineCount.value / totalDevices.value) * 100)
: 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() {
allDevice(props.deptId).then((res: any) => {
allDevice(deptId.value).then((res: any) => {
if (res.code === 200) {
// 将数字转换为字符串并补零到9位,并将其拆分为单个数字数组
sumCount.value = (res.numMap?.sumCount?.toString() || "0")
......@@ -104,8 +117,6 @@ function getAllDevice() {
}
});
}
getAllDevice();
</script>
<style scoped lang="scss">
......
src/views/components/EquipmentAlarm.vue
<template>
<div class="flex gap-20">
<div class="relative">
<!-- 设备告警统计 -->
<div class="bg-container flex flex-col justify-center">
<div
......@@ -10,6 +11,9 @@
<div class="text-center text-[12px] text-[#66FFFF] mt-0">告警总数</div>
</div>
<div class="bg-container1 absolute top-0 right-0"></div>
</div>
<div class="flex flex-row items-center gap-8">
<!-- 未处理统计 -->
<div class="flex flex-col items-center">
......@@ -19,11 +23,13 @@
{{ unprocessedCount }}
</div>
<img
src="@/assets/imgs/equ-right-icon.png"
class="w-[45px] h-[50px] my-1"
src="@/assets/imgs/equ-right-icon1.png"
class="w-[45px] h-[50px] my-1 icon-animation"
alt="未处理图标"
/>
<div class="text-[12px] text-white mt-1">未处理</div>
<div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
未处理
</div>
</div>
<!-- 已处理统计 -->
......@@ -34,11 +40,13 @@
{{ processedCount }}
</div>
<img
src="@/assets/imgs/equ-right-icon.png"
class="w-[45px] h-[50px] my-1"
src="@/assets/imgs/equ-right-icon2.png"
class="w-[45px] h-[50px] my-1 icon-animation"
alt="已处理图标"
/>
<div class="text-[12px] text-white mt-1">已处理</div>
<div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
已处理
</div>
</div>
<!-- 已处理统计 -->
<div class="flex flex-col items-center">
......@@ -48,11 +56,13 @@
{{ ignoredCount }}
</div>
<img
src="@/assets/imgs/equ-right-icon.png"
class="w-[45px] h-[50px] my-1"
src="@/assets/imgs/equ-right-icon3.png"
class="w-[45px] h-[50px] my-1 icon-animation"
alt="已处理图标"
/>
<div class="text-[12px] text-white mt-1">已忽略</div>
<div class="text-[14px] text-white mt-1 font-[YouSheBiaoTiHei]">
已忽略
</div>
</div>
</div>
</div>
......@@ -60,7 +70,7 @@
<script setup lang="ts">
import { alarmNumCount } from "@/api/iot/home";
import { onMounted, ref } from "vue";
import { onMounted, ref, watch, nextTick } from "vue";
// 告警总数
let alarmTotal = ref(0);
......@@ -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() {
alarmNumCount(props.deptId).then((res: any) => {
alarmNumCount(deptId.value).then((res: any) => {
if (res.code === 200) {
alarmTotal.value = res.data.count;
unprocessedCount.value = res.data.notHandle;
......@@ -90,19 +116,59 @@ function getAlarmNumCount() {
});
}
getAlarmNumCount();
// getAlarmNumCount();
</script>
<style scoped lang="scss">
.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-size: 100% 100%;
width: 155px;
height: 155px;
// 图片循环旋转动画
animation: rotate 9s linear infinite;
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 1440px) {
width: 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>
src/views/components/Map.vue
<template>
<div class="w-full h-full relative">
<div class="map-container w-full h-full" id="container"></div>
<div class="absolute top-2 left-2 z-[999]">
<el-tree-select
<div
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"
v-model="treeDataValue"
:data="treeDataList"
......@@ -12,7 +14,30 @@
check-strictly
:render-after-expand="false"
@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>
</template>
......@@ -33,6 +58,7 @@ let map = null;
let showInfoWindow = false;
let infoWindow = null;
var points = ref([]);
const deptId = ref(); //机构id
const treeDataValue = ref([]);
const treeDataList = ref([]);
const treeDataAllList = ref([]);
......@@ -44,16 +70,102 @@ const fiveTypeId = ref("");
const sixTypeId = ref("");
const map_opt = [
{
city: "太原",
color: "red",
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",
},
{
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({
deptId: {
type: Number,
default: 0,
},
});
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
// 先清除现有地图（如果存在）
if (map) {
map.clearMap(); // 清除覆盖物而不是销毁地图
}
getDeviceList();
});
}
},
{ immediate: true }
);
onMounted(() => {
window._AMapSecurityConfig = {
......@@ -110,23 +222,8 @@ function initMap() {
], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
// 绘制省份边界
const district = new AMap.DistrictSearch({
subdistrict: 0,
extensions: "all",
level: "province",
});
district.search("山西", function (status, result) {
// 查询成功时，result即为对应的行政区信息
const bounds = result.districtList[0].boundaries;
const mask = [];
for (let i = 0; i < bounds.length; i++) {
mask.push([bounds[i]]);
}
const map = new AMap.Map("container", {
pitch: 30, // 倾斜角度
map = new AMap.Map("container", {
pitch: 35, // 倾斜角度
zoom: 6.7, // 设置当前显示级别
expandZoomRange: true, // 开启显示范围设置
animateEnable: true,
......@@ -135,21 +232,29 @@ function initMap() {
viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
zoomEnable: true, // 是否可以缩放地图
resizeEnable: true, // 是否开启地图自动调整大小
mapStyle: "amap://styles/darkblue", // 地图样式，默认值为amap://styles/normal
// mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
mapStyle: "amap://styles/darkblue",
// mapStyle: "amap://styles/darkblue", // 地图样式，默认值为amap://styles/normal
});
// 获取边界坐标点
AMap.plugin("AMap.DistrictSearch", () => {
var districtSearch = new AMap.DistrictSearch({
// 关键字对应的行政区级别，共有5种级别
level: "province",
// 是否显示下级行政区级数，1表示返回下一级行政区
subdistrict: 0,
// 返回行政区边界坐标点
extensions: "all",
});
// 添加描边
for (let i = 0; i < bounds.length; i++) {
const polyline = new AMap.Polyline({
path: bounds[i], // polyline 路径，支持 lineString 和 MultiLineString
strokeColor: "blue", // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
strokeWeight: 5, // 轮廓线宽度,默认为:2
// map:map // 这种方式相当于: polyline.setMap(map);
fillColor: "#80d8ff", // 填充颜色，使用16进制颜色代码赋值。默认值为#00D3FC
strokeColor: "blue", // 轮廓线颜色，使用16进制颜色代码赋值。默认值为#00D3FC
for (let i = 0; i < map_opt.length; i++) {
// 搜索所有省/直辖市信息
districtSearch.search(map_opt[i].city, (status, result) => {
// 查询成功时，result即为对应的行政区信息
handlePolygon(result, map_opt[i].color);
});
polyline.setMap(map);
}
//添加图层MarkerClusterer
const cluster = new AMap.MarkerClusterer(
map, // 地图实例
......@@ -157,13 +262,13 @@ function initMap() {
{
gridSize: 10, // 聚合网格的像素大小，默认值为60
//聚合点样式
// renderClusterMarker: _renderClusterMarker,
renderClusterMarker: _renderClusterMarker,
//非聚合点样式
renderMarker: (context) => {
const item = context.data[0];
//设置非聚合点样式
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) {
......@@ -226,6 +331,45 @@ function initMap() {
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) {
return item.twoType.name;
......@@ -244,7 +388,50 @@ var closeInfoWindow = function () {
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(() => {
map?.destroy();
......@@ -261,6 +448,10 @@ function getDeviceList() {
sixTypeId.value
).then((res) => {
points.value = res.rows;
//将res.rows获取的数据循环两次 加入points.value
// res.rows.forEach((item) => {
// points.value.push(item);
// });
points.value.forEach((item) => {
item.lnglat = [item.longitude, item.latitude];
item.weight = 1;
......@@ -273,10 +464,17 @@ function getDeviceTypeList() {
deviceTypeList().then((res) => {
treeDataAllList.value = res.data;
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();
</script>
......@@ -302,4 +500,23 @@ getDeviceTypeList();
.amap-logo {
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>
src/views/components/SubsidiaryCompanyEquipment.vue
......@@ -4,7 +4,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { debounce } from "lodash-es"; // 或使用自定义防抖函数
import { deviceCountByChild } from "@/api/iot/home";
......@@ -21,6 +21,22 @@ const props = defineProps({
default: 0,
},
});
const deptId = ref<any>(); //机构id
//监听父组件传递的 deptId 变化
watch(
() => props.deptId,
(newVal) => {
if (newVal) {
deptId.value = newVal;
nextTick(() => {
getList();
});
}
},
{ immediate: true }
);
// 防抖的重绘函数
const handleResize = debounce(() => {
chart.value?.resize();
......@@ -112,8 +128,8 @@ const initChart = () => {
chart.value.setOption(option);
};
onMounted(() => {
deviceCountByChild(props.deptId).then((res: any) => {
function getList() {
deviceCountByChild(deptId.value).then((res: any) => {
if (res.code === 200) {
const childDeptList = res.result?.childDeptList || [];
const numMap = res.result?.numMap || {};
......@@ -150,7 +166,7 @@ onMounted(() => {
}
// 仍然监听窗口大小变化作为后备
window.addEventListener("resize", handleResize);
});
}
onBeforeUnmount(() => {
// 清理工作
......
src/views/components/SysClassification.vue
......@@ -41,7 +41,7 @@
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { countBySysType } from "@/api/iot/home";
const router = useRouter();
......@@ -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) => {
switch (index) {
......@@ -121,7 +135,7 @@ const handleClick = (item: any, index: number) => {
};
function getCountBySysType() {
countBySysType(props.deptId).then((res: any) => {
countBySysType(deptId.value).then((res: any) => {
if (res.code === 200) {
res.data.map((item: any) => {
// 如果 item.type==1 则赋值给 sysClassificationList[0]
......@@ -134,7 +148,6 @@ function getCountBySysType() {
}
});
}
getCountBySysType();
</script>
<style scoped lang="scss">
......
src/views/tunnel/TunnelHome.vue
......@@ -97,11 +97,12 @@ import DataInfo from "./components/DataInfo.vue";
import TunnelStatusNum from "./components/TunnelStatusNum.vue";
import ConstructionProgress from "./components/ConstructionProgress.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 useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const router = useRouter();
const selectedOffice = ref(100);
const selectedOffice = ref();
const selectedOfficeList = ref([]);
const handleOfficeChange = (val: any) => {
......@@ -116,20 +117,20 @@ const handleMoreVideoClick = () => {
// 获取机构信息
function getOfficeInfo() {
// listForParent().then((res: any) => {
// console.log(res);
// if (res.code === 200) {
// selectedOfficeList.value = res.data;
// if (selectedOfficeList.value.length > 0) {
// //为selectedOfficeList下标 0 添加一个默认值
// selectedOfficeList.value.unshift({
// deptId: 100,
// deptName: "山西路桥集团",
// });
// selectedOffice.value = selectedOfficeList.value[0].deptId;
// }
// }
// });
listForParent().then((res: any) => {
console.log(res);
if (res.code === 200) {
selectedOfficeList.value = res.data;
if (selectedOfficeList.value.length > 0) {
//为selectedOfficeList下标 0 添加一个默认值
selectedOfficeList.value.unshift({
deptId: userStore.deptId,
deptName: userStore.deptName,
});
selectedOffice.value = selectedOfficeList.value[0].deptId;
}
}
});
}
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