index.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <div class="page-container">
  3. <div class="head-card">
  4. <div class="head-card-item">
  5. <div class="item">
  6. <div class="count">{{ cardCount.org }}</div>
  7. <div class="label">区域统计</div>
  8. </div>
  9. <div class="logo">
  10. <img src="../../../assets/icon-org.png" class="img">
  11. </div>
  12. </div>
  13. <div class="head-card-item">
  14. <div class="item">
  15. <div class="count">{{ cardCount.plot }}</div>
  16. <div class="label">小区统计</div>
  17. </div>
  18. <div class="logo">
  19. <img src="../../../assets/icon-plot.png" class="img">
  20. </div>
  21. </div>
  22. <div class="head-card-item">
  23. <div class="item">
  24. <div class="count">{{ cardCount.resident }}</div>
  25. <div class="label">住户统计</div>
  26. </div>
  27. <div class="logo">
  28. <img src="../../../assets/icon-resident.png" class="img">
  29. </div>
  30. </div>
  31. </div>
  32. <div class="panel">
  33. <div class="left-panel">
  34. <el-input v-model="filterText" size="default" placeholder="搜索区域" />
  35. <el-tree
  36. :data="treeList"
  37. node-key="id"
  38. default-expand-all
  39. :props="{
  40. children: 'children'
  41. }"
  42. @node-click="onNodeClick"
  43. :expand-on-click-node="false"
  44. >
  45. <template #default="{ node, data }">
  46. <span class="custom-tree-node" :class="{ active: `${data.id}-${data.orgType}` === `${curNode.id}-${curNode.orgType}` }">
  47. <img src="/src/assets/icon-org.png" v-if="data.orgType === 'org'">
  48. <img src="/src/assets/icon-plot.png" v-else-if="data.orgType === 'plot'">
  49. <img src="/src/assets/icon-floor.png" v-else-if="data.orgType === 'floor'">
  50. <img src="/src/assets/icon-unit.png" v-else-if="data.orgType === 'unit'">
  51. <span class="name" :title="data.orgName">{{ data.orgName }}</span>
  52. </span>
  53. </template>
  54. </el-tree>
  55. </div>
  56. <div class="right-panel">
  57. <!-- 小区 -->
  58. <Regional v-if="curNode.orgType === 'org'" :organizationId="curNode.id" @finish="initPage()"/>
  59. <!-- 楼宇 -->
  60. <Floor v-else-if="curNode.orgType === 'plot'" :nodeId="curNode.id" @finish="initPage()"/>
  61. <!-- 单元 -->
  62. <Unit v-else-if="curNode.orgType === 'floor'" :nodeId="curNode.id" @finish="initPage()"/>
  63. <!-- 住户 -->
  64. <Resident v-else-if="curNode.orgType === 'unit'" :nodeId="curNode.id" @finish="initPage()"/>
  65. </div>
  66. </div>
  67. </div>
  68. </template>
  69. <script lang="ts">
  70. import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
  71. import api from '/@/api/heatingDistrict';
  72. import Regional from './children/regional/index.vue'
  73. import Floor from './children/floor/index.vue'
  74. import Unit from './children/unit/index.vue'
  75. import Resident from './children/resident/index.vue'
  76. export default defineComponent({
  77. name: '',
  78. components: {
  79. Regional,
  80. Floor,
  81. Unit,
  82. Resident
  83. },
  84. setup() {
  85. const treeList = ref([])
  86. const state = reactive({
  87. filterText: '',
  88. cardCount: {
  89. org: 0,
  90. plot: 0,
  91. resident: 0
  92. },
  93. curNode: {}
  94. });
  95. // 获取区域树
  96. const getTreeData = () => {
  97. api.heatingDistrict.getTree({})
  98. .then((res: any) => {
  99. treeList.value = res || []
  100. if (!state.curNode.id) {
  101. state.curNode = treeList.value[0]
  102. }
  103. })
  104. }
  105. // 获取组织数量
  106. const getOrgCount = () => {
  107. api.heatingDistrict.getOrganizationCount({})
  108. .then((res: any) => {
  109. console.log(res)
  110. state.cardCount.org = res.Count
  111. })
  112. }
  113. // 获取小区数量
  114. const getPlotCount = () => {
  115. api.heatingDistrict.getPlotCount({})
  116. .then((res: any) => {
  117. console.log(res)
  118. state.cardCount.plot = res.Count
  119. })
  120. }
  121. // 获取组织数量
  122. const getResidentCount = () => {
  123. api.heatingDistrict.getResidentCount({})
  124. .then((res: any) => {
  125. console.log(res)
  126. state.cardCount.resident = res.Count
  127. })
  128. }
  129. const initPage = () => {
  130. getTreeData()
  131. getOrgCount()
  132. getPlotCount()
  133. getResidentCount()
  134. }
  135. const onNodeClick = (data: any, node: any) => {
  136. // console.log(data)
  137. // console.log(node)
  138. if (data.orgType === 'floor') {
  139. data.plotId = node.parent.data.id
  140. } else if (data.orgType === 'unit') {
  141. data.floorId = node.parent.data.id
  142. data.plotId = node.parent.parent.data.id
  143. }
  144. state.curNode = data
  145. }
  146. // 页面加载时
  147. onMounted(() => {
  148. initPage()
  149. });
  150. return {
  151. treeList,
  152. onNodeClick,
  153. getTreeData,
  154. initPage,
  155. ...toRefs(state),
  156. };
  157. },
  158. });
  159. </script>
  160. <style lang="scss" scoped>
  161. .page-container {
  162. background-color: #fff;
  163. .panel {
  164. display: grid;
  165. grid-template-columns: 250px 1fr;
  166. border: 1px solid #ddd;
  167. // &::before {
  168. // content: " ";
  169. // display: block;
  170. // clear: both;
  171. // }
  172. }
  173. .left-panel {
  174. padding: 20px;
  175. }
  176. .right-panel {
  177. display: flex;
  178. flex-direction: column;
  179. padding: 20px;
  180. border-left: 1px solid #ddd;
  181. position: relative;
  182. }
  183. }
  184. .custom-tree-node {
  185. display: grid;
  186. grid-template-columns: 20px 1fr;
  187. align-items: center;
  188. img {
  189. width: 16px;
  190. height: 16px;
  191. }
  192. .name {
  193. overflow: hidden;
  194. text-overflow: ellipsis;
  195. }
  196. &.active {
  197. color: var(--el-color-primary);
  198. // background: var(--el-color-primary-light-9);
  199. }
  200. }
  201. .head-card {
  202. display: grid;
  203. grid-template-columns: 1fr 1fr 1fr;
  204. padding: 20px;
  205. &-item {
  206. display: flex;
  207. justify-content: center;
  208. align-items: center;
  209. .item {
  210. text-align: center;
  211. // margin-right: 10px;
  212. .count {
  213. font-size: 32px;
  214. font-weight: 700;
  215. color: #101010;
  216. margin-bottom: 5px;
  217. }
  218. }
  219. .logo {
  220. width: 72px;
  221. height: 72px;
  222. border-radius: 50%;
  223. // border: 1px solid #ddd;
  224. display: flex;
  225. align-items: center;
  226. justify-content: center;
  227. .img {
  228. width: 32px;
  229. height: 32px;
  230. }
  231. }
  232. }
  233. }
  234. :deep(.system-dic-container) {
  235. position: absolute;
  236. width: calc(100% - 40px);
  237. }
  238. </style>