人口搜索加角标

dist/index.html

@@ -6,7 +6,7 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京东路街道</title>
-<script type="module" crossorigin src="./assets/index.8d537ddf.js"></script>
+<script type="module" crossorigin src="./assets/index.1e135886.js"></script>
   <link rel="modulepreload" href="./assets/vendor.0a2bc783.js">
   <link rel="stylesheet" href="./assets/index.a96a5e4b.css">
 </head>

src/tools/index.ts

@@ -55,3 +55,34 @@ export function transType(type: string): { text: string; color: string } {
       }
   }
 }
+
+export function roomStatus(status: string): { text: string; color: string } {
+  //房屋状态 0自住 1空关 2出租 3出租(群租)
+  switch (status) {
+    case '0':
+      return {
+        text: '自住',
+        color: '#2F86EE',
+      }
+    case '1':
+      return {
+        text: '空关',
+        color: '#00f2ff',
+      }
+    case '2':
+      return {
+        text: '出租',
+        color: '#ffd400',
+      }
+    case '3':
+      return {
+        text: '出租(群租)',
+        color: '#F7933E',
+      }
+    default:
+      return {
+        text: '',
+        color: '#fff',
+      }
+  }
+}

src/view/components/person-list.vue

@@ -18,6 +18,13 @@
             <b>实住人</b>
           </span>
         </div>
+        <div
+          v-if="item.houseStatus"
+          class="flag"
+          :style="`background:${roomStatus(item.houseStatus)?.color}`"
+        >
+          {{ roomStatus(item.houseStatus)?.text }}
+        </div>
       </div>
     </template>
     <m-empty v-else :img="empty" hidden-text />
@@ -30,6 +37,7 @@ import empty from '@/assets/images/empty.png'
 import { ajax, api } from '@/ajax'
 import store from '@/store'
 import { convertName } from '@/tools/index'
+import { roomStatus } from '@/tools/index'
 
 export default defineComponent({
   name: 'CaseList',
@@ -93,6 +101,7 @@ export default defineComponent({
       empty,
       handleClick,
       persons,
+      roomStatus,
     }
   },
 })
@@ -145,4 +154,16 @@ export default defineComponent({
         padding-bottom .06rem
         font-size .11rem
         font-weight bold
+    .flag
+      position absolute
+      top -0.16rem
+      right -0.36rem
+      transform rotate(45deg)
+      height .4rem
+      width .8rem
+      display flex
+      color #000
+      align-items flex-end
+      justify-content center
+      font-size .08rem
 </style>

src/view/new-community/left.vue

@@ -118,10 +118,11 @@
       </div>
       <m-table
         :template="[
-          '序号|分户地址*3|分户面积(㎡)*2|房屋类型*2',
-          'index|addr|houseArea|houseType',
+          '序号|分户地址*3|分户面积(㎡)*2|房屋类型*2|房屋状态*2',
+          'index|addr|houseArea|houseType|houseStatus>transStatus',
         ]"
         :data="roomList"
+        :formatter="{ transStatus }"
       />
     </template>
   </m-modal>
@@ -137,6 +138,7 @@ import store from '@/store'
 import Brief from '../components/brief.vue'
 import { ajax, api } from '@/ajax'
 import dayjs from 'dayjs'
+import { roomStatus } from '@/tools/index'
 
 const emit = defineEmit(['select'])
 const props = defineProps({
@@ -333,6 +335,9 @@ function checkRoom() {
       showRooms.value = true
     })
 }
+function transStatus(val: string) {
+  return roomStatus(val)?.text || ''
+}
 </script>
 
 <style lang="stylus" scoped>

src/view/right/demand.vue

@@ -32,7 +32,7 @@
             <span :style="{ background: item.color }" />
             <p>
               <span>{{ item.name }}</span>
-              <span>{{ item.value }}</span>
+              <span>{{ item.value }}%</span>
               <span>{{ item.num }}</span>
             </p>
             <!-- {{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{