供热区图片替换

.env.development

@@ -8,5 +8,5 @@ VITE_ASSESS_URL = 'http://zhgy.sagoo.cn/base-api/assess/v1'
 VITE_SCREEN_URL = 'http://home.yanglizhi.cn:10003'
 VITE_TOPO_URL = 'http://home.yanglizhi.cn:10001'
 VITE_WS_URL = 'ws://zhgy.sagoo.cn:8899/api/v1/websocket'
-#VITE_API_URL = 'http://sgadserver.wdeveloperw.xyz/api/v1'
+VITE_API_URL = 'http://sgadserver.wdeveloperw.xyz/api/v1'
 # VITE_IMG_URL = 'http://sgadserver.wdeveloperw.xyz/'

src/api/heatingDistrict/index.ts

@@ -3,6 +3,9 @@ import { get, post, del, put } from '/@/utils/request';
 export default {
   heatingDistrict: {
     getTree: (params: object) => get('/region/zhgy/tree', params),
+    getPlotCount: (params: object) => get('/region/plot/count', params), // 获取小区数量
+    getResidentCount: (params: object) => get('/region/resident/count', params), // 获取住户数量
+    getOrganizationCount: (params: object) => get('/system/organization/count', params), // 获取组织数量
   },
   regionalManage: {
     allList: (params: object) => get('/region/plot/all', params),

src/views/heatingDistrict/heatingDistrictManage/index.vue

@@ -1,33 +1,64 @@
 <template>
   <div class="page-container">
-		<div class="left-panel">
-  		<el-input v-model="filterText" size="default" placeholder="搜索区域" />
-			<el-tree
-				:data="treeList"
-				node-key="id"
-				default-expand-all
-				:props="{
-					children: 'children'
-				}"
-				@node-click="onNodeClick"
-				:expand-on-click-node="false"
-			>
-				<template #default="{ node, data }">
-					<span class="custom-tree-node" :class="{ active: `${data.id}-${data.orgType}` === `${curNode.id}-${curNode.orgType}` }">
-						<span>{{ data.orgName }}</span>
-					</span>
-				</template>
-			</el-tree>
+		<div class="head-card">
+			<div class="head-card-item">
+				<div class="item">
+					<div class="count">{{ cardCount.org }}</div>
+					<div class="label">区域统计</div>
+				</div>
+				<div class="logo">
+					<img src="../../../assets/icon-org.png" class="img">
+				</div>
+			</div>
+			<div class="head-card-item">
+				<div class="item">
+					<div class="count">{{ cardCount.plot }}</div>
+					<div class="label">小区统计</div>
+				</div>
+				<div class="logo">
+					<img src="../../../assets/icon-plot.png" class="img">
+				</div>
+			</div>
+			<div class="head-card-item">
+				<div class="item">
+					<div class="count">{{ cardCount.resident }}</div>
+					<div class="label">住户统计</div>
+				</div>
+				<div class="logo">
+					<img src="../../../assets/icon-resident.png" class="img">
+				</div>
+			</div>
 		</div>
-		<div class="right-panel">
-			<!-- 小区 -->
-			<Regional v-if="curNode.orgType === 'org'" :organizationId="curNode.id" @finish="getTreeData()"/>
-			<!-- 楼宇 -->
-			<Floor v-else-if="curNode.orgType === 'plot'" :nodeId="curNode.id" @finish="getTreeData()"/>
-			<!-- 单元 -->
-			<Unit v-else-if="curNode.orgType === 'floor'" :nodeId="curNode.id" @finish="getTreeData()"/>
-			<!-- 住户 -->
-			<Resident v-else-if="curNode.orgType === 'unit'" :nodeId="curNode.id" @finish="getTreeData()"/>
+		<div class="panel">
+			<div class="left-panel">
+				<el-input v-model="filterText" size="default" placeholder="搜索区域" />
+				<el-tree
+					:data="treeList"
+					node-key="id"
+					default-expand-all
+					:props="{
+						children: 'children'
+					}"
+					@node-click="onNodeClick"
+					:expand-on-click-node="false"
+				>
+					<template #default="{ node, data }">
+						<span class="custom-tree-node" :class="{ active: `${data.id}-${data.orgType}` === `${curNode.id}-${curNode.orgType}` }">
+							<span>{{ data.orgName }}</span>
+						</span>
+					</template>
+				</el-tree>
+			</div>
+			<div class="right-panel">
+				<!-- 小区 -->
+				<Regional v-if="curNode.orgType === 'org'" :organizationId="curNode.id" @finish="initPage()"/>
+				<!-- 楼宇 -->
+				<Floor v-else-if="curNode.orgType === 'plot'" :nodeId="curNode.id" @finish="initPage()"/>
+				<!-- 单元 -->
+				<Unit v-else-if="curNode.orgType === 'floor'" :nodeId="curNode.id" @finish="initPage()"/>
+				<!-- 住户 -->
+				<Resident v-else-if="curNode.orgType === 'unit'" :nodeId="curNode.id" @finish="initPage()"/>
+			</div>
 		</div>
   </div>
 </template>
@@ -52,6 +83,11 @@ export default defineComponent({
 		const treeList = ref([])
 		const state = reactive({
 			filterText: '',
+			cardCount: {
+				org: 0,
+				plot: 0,
+				resident: 0
+			},
 			curNode: {}
 		});
 		// 获取区域树
@@ -64,9 +100,43 @@ export default defineComponent({
 					}
 				})
 		}
+		// 获取组织数量
+		const getOrgCount = () => {
+			api.heatingDistrict.getOrganizationCount({})
+				.then((res: any) => {
+					console.log(res)
+					state.cardCount.org = res.Count
+				})
+		}
+
+		// 获取小区数量
+		const getPlotCount = () => {
+			api.heatingDistrict.getPlotCount({})
+				.then((res: any) => {
+					console.log(res)
+					state.cardCount.plot = res.Count
+				})
+		}
+
+		// 获取组织数量
+		const getResidentCount = () => {
+			api.heatingDistrict.getResidentCount({})
+				.then((res: any) => {
+					console.log(res)
+					state.cardCount.resident = res.Count
+				})
+		}
+
+		const initPage = () => {
+			getTreeData()
+			getOrgCount()
+			getPlotCount()
+			getResidentCount()
+		}
+
 		const onNodeClick = (data: any, node: any) => {
-			console.log(data)
-			console.log(node)
+			// console.log(data)
+			// console.log(node)
 			if (data.orgType === 'floor') {
 				data.plotId = node.parent.data.id
 			} else if (data.orgType === 'unit') {
@@ -78,7 +148,7 @@ export default defineComponent({
 
 		// 页面加载时
 		onMounted(() => {
-			getTreeData()
+			initPage()
 		});
 
 
@@ -86,6 +156,7 @@ export default defineComponent({
 			treeList,
 			onNodeClick,
 			getTreeData,
+			initPage,
 			...toRefs(state),
 		};
 	},
@@ -94,10 +165,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .page-container {
-	display: grid;
-	grid-template-columns: 250px 1fr;
 	background-color: #fff;
-	border: 1px solid #ddd;
+	.panel {
+		display: grid;
+		grid-template-columns: 250px 1fr;
+		border: 1px solid #ddd;
+	}
 	.left-panel {
 		padding: 20px;
 	}
@@ -116,4 +189,38 @@ export default defineComponent({
 		// background: var(--el-color-primary-light-9);
   }
 }
+
+.head-card {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	padding: 20px;
+	&-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.item {
+			text-align: center;
+			// margin-right: 10px;
+			.count {
+				font-size: 32px;
+				font-weight: 700;
+				color: #101010;
+				margin-bottom: 5px;
+			}
+		}
+		.logo {
+			width: 72px;
+			height: 72px;
+			border-radius: 50%;
+			// border: 1px solid #ddd;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.img {
+				width: 32px;
+				height: 32px;
+			}
+		}
+	}
+}
 </style>