对接接口

src/ajax/api.ts

@@ -21,6 +21,8 @@ export default {
   BASE_URL,
   SOURCE_URL,
   TEST: '/service-basicdatasync-ddd/communities',
+  GET_LIST: '/service-special-nandong/classifyAddrs', // 根据地址搜索
+  GET_ROOM: '/service-special-nandong/households', // 获取分户
   GET_COMMUNITY_DETAIL: '/service-basicdatasync-ddd/communities',
   GET_BUILDING: '/service-basicdatasync-ddd/building', // 门牌幢列表
   GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', // 业委会列表

src/components/MyComponent/MyDrawer/my-drawer.vue

@@ -85,6 +85,8 @@ export default defineComponent({
     border .01rem dotted rgba(47,134,238, .6)
     margin .06rem
     padding .06rem
+    // width 100%
+    height 99%
     .dot
       position absolute
       width .1rem

src/components/MyComponent/MyEmpty/my-empty.vue

 <template>
   <div class="my-empty">
-    <img src="@/assets/images/no-data.png" />
-    <p>— {{ text }} —</p>
+    <img :src="img" />
+    <p v-if="!hiddenText">— {{ text }} —</p>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import img from '@/assets/images/no-data.png'
 
 export default defineComponent({
   name: 'MyEmpty',
@@ -17,6 +18,14 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '暂无数据',
     },
+    img: {
+      type: String as PropType<string>,
+      default: () => img,
+    },
+    hiddenText: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
 })
 </script>

src/components/MyComponent/MyForm/my-form.vue

 <template>
-  <div class="my-form">
+  <div class="my-form" :class="{ stripe: stripe }">
     <div v-for="(row, rowIndex) in template" :key="rowIndex" class="row">
       <div
         v-for="(col, colIndex) in row.split('|')"
@@ -63,6 +63,10 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '1rem',
     },
+    stripe: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
   setup(props) {
     const calcWidth = (key: string): number => {
@@ -134,12 +138,20 @@ export default defineComponent({
 @import '../main.styl'
 .my-form
   $full()
+  &.stripe
     .row
-    display flex
       background $table-content-bg
-    padding .03rem 0
+      box-shadow none
+      margin-top 0
+      border-radius 0
       &:nth-child(odd)
         background transparent
+  .row
+    display flex
+    background rgba(70,83,97,.45)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
+    margin-top .04rem
+    border-radius .04rem
     .col
       display flex
       align-items center

src/components/MyComponent/MyTable/my-table.vue

@@ -11,7 +11,7 @@
         </p>
       </div>
     </div>
-    <div class="table-content">
+    <div v-if="data && data.length > 0" class="table-content">
       <div
         v-for="(item, index) in data"
         :key="index"
@@ -35,6 +35,7 @@
         </div>
       </div>
     </div>
+    <MyEmpty v-else />
     <MyModal v-model="showImgModal" title="照片预览">
       <img v-if="showImgModal && imgSrc" style="width: 100%" :src="imgSrc" />
     </MyModal>
@@ -44,6 +45,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue'
 import MyModal from '../MyModal/my-modal.vue'
+import MyEmpty from '../MyEmpty/my-empty.vue'
 
 interface FormatterType {
   [propName: string]: <T>(val: T) => T
@@ -55,7 +57,7 @@ interface DataType {
 export default defineComponent({
   name: 'MyTable',
   displayName: 'm-table',
-  components: { MyModal },
+  components: { MyModal, MyEmpty },
   props: {
     /** 布局模板 */
     template: {

src/components/MyComponent/index.ts

 import { App } from 'vue'
-import animate from 'animate.css'
 import MyMap from './MyMap/my-map.vue'
 import MyTitle from './MyTitle/my-title.vue'
 import MyLoader from './MyLoader/my-loader.vue'
@@ -25,6 +24,7 @@ import MyProgress from './MyProgress/my-progress.vue'
 import MyDrawer from './MyDrawer/my-drawer.vue'
 import * as ChartTypes from './MyChart/types'
 // import { withInstall } from './util'
+import 'animate.css'
 import 'normalize.css'
 
 const components = [
@@ -54,7 +54,6 @@ const components = [
 ]
 
 const install = (app: App): App => {
-  app.use(animate)
   // components.forEach((component) => app.use(withInstall(component)))
   components.forEach((component) =>
     app.component(component.displayName, component)

src/store/actions.ts

@@ -8,6 +8,7 @@ export default {
   initData({ dispatch }: { dispatch: Dispatch }): void {
     dispatch('getPropertySummary')
     dispatch('getCaseList')
+    dispatch('getRoomList')
     dispatch('GET_PUBLICSAFE_COMMANDSYSTEM')
     dispatch('GET_PUBLICSAFE_STREETPOWER')
     dispatch('GET_PUBLICSAFE_PARTY')
@@ -80,6 +81,18 @@ export default {
     ).data
     commit('SET_CASE_LIST', content)
   },
+  async getRoomList(
+    { commit }: { commit: Commit },
+    address = null
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_LIST,
+        params: { pageSize: 200, addr_l: address, classifyName: '分户' },
+      })
+    ).data
+    commit('SET_ROOM_LIST', content)
+  },
 
   // 公共服务 - 门岗值守 - 社会物业和直管公房数据
   async GET_PUBLICSAFE_NEWFIND({ commit }: { commit: Commit }): Promise<void> {

src/store/index.ts

@@ -110,6 +110,7 @@ export interface GlobalStateProps {
   curTheme: ThemeType
   propertySummary: { [key: string]: number }
   caseList: unknown[]
+  roomList: unknown[]
   pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }[]
   pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }[]
   pubulicSafeMap: unknown[]

src/store/mutations.ts

@@ -41,6 +41,9 @@ export default {
   SET_CASE_LIST(state: GlobalStateProps, data: unknown[]): void {
     state.caseList = data
   },
+  SET_ROOM_LIST(state: GlobalStateProps, data: unknown[]): void {
+    state.roomList = data
+  },
   SET_STATION(state: GlobalStateProps, data: { [key: string]: unknown }): void {
     state.stationInfo = data
   },

src/store/state.ts

@@ -181,6 +181,7 @@ export default {
   },
   propertySummary: {},
   caseList: [],
+  roomList: [],
   stationInfo: {},
   pubulicSafeGateSenteryShehuiwuye: [],
   pubulicSafeGateSenteryZhiguangongfang: [],

src/view/components/map-btns.vue

@@ -29,7 +29,7 @@
         <a-select v-model:value="searchType">
           <a-select-option value="case">案件</a-select-option>
           <a-select-option value="population">人口</a-select-option>
-          <a-select-option value="house">房屋</a-select-option>
+          <a-select-option value="community">小区</a-select-option>
         </a-select>
         <a-input
           v-model:value="searchKey"
@@ -42,10 +42,10 @@
     <div class="modal-case-content">
       <template v-if="caseList.length > 0">
         <div v-for="(item, i) in caseList" :key="i" @click="handleSelect(item)">
-          <span :class="getStyle(item.managementType)">{{
-            item.managementType
+          <span :class="getStyle(item.managementType || item.classifyName)">{{
+            item.managementType || item.classifyName
           }}</span>
-          <p>{{ item.address }}</p>
+          <p>{{ item.address || item.addr }}</p>
         </div>
       </template>
       <m-empty v-else />
@@ -58,6 +58,22 @@
       :case-info="caseInfo"
     />
   </m-drawer>
+  <m-drawer v-model="populationModal">
+    <PopulationDrawer
+      :community-info="communityInfo"
+      :property-info="propertyInfo"
+      :case-info="caseInfo"
+      :building-info="buildingInfo"
+      :room-info="roomInfo"
+    />
+  </m-drawer>
+  <m-drawer v-model="communityModal">
+    <CommunityDrawer
+      :community-info="communityInfo"
+      :property-info="propertyInfo"
+      :case-info="caseInfo"
+    />
+  </m-drawer>
 </template>
 
 <script lang="ts">
@@ -74,12 +90,14 @@ import d3 from '@/assets/images/3d.png'
 import zoomIn from '@/assets/images/zoom-in.png'
 import zoomOut from '@/assets/images/zoom-out.png'
 import CaseDrawer from '@/view/drawers/case-drawer.vue'
+import PopulationDrawer from '@/view/drawers/population-drawer.vue'
+import CommunityDrawer from '@/view/drawers/community-drawer.vue'
 import store from '@/store'
 import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'MapBtns',
-  components: { CaseDrawer },
+  components: { CaseDrawer, PopulationDrawer, CommunityDrawer },
   emits: ['full', 'change', 'zoom'],
   setup(_, ctx) {
     const curViewType = computed(() => store.state.curView.type)
@@ -121,10 +139,10 @@ export default defineComponent({
           ctx.emit('full', fullScreen.value)
           break
         case 'search':
+          store.dispatch('getCaseList')
           searchModal.value = true
           searchKey.value = ''
           searchType.value = 'case'
-          store.dispatch('getCaseList')
           break
         case 'in':
         case 'out':
@@ -140,7 +158,11 @@ export default defineComponent({
           break
       }
     }
-    const caseList = computed(() => store.state.caseList)
+    const caseList = computed(() =>
+      searchType.value === 'population'
+        ? store.state.roomList
+        : store.state.caseList
+    )
     const options = computed(() => {
       if (curViewType.value === 'street') {
         return [
@@ -165,8 +187,12 @@ export default defineComponent({
 
     const handleSearch = () => {
       const address = searchKey.value
+      if (searchType.value === 'population') {
+        store.dispatch('getRoomList', address)
+      } else {
         store.dispatch('getCaseList', address)
       }
+    }
     const getStyle = (type: string): string => {
       switch (type) {
         case '小区':
@@ -176,19 +202,20 @@ export default defineComponent({
         case '综合':
           return 'blue'
         default:
-          return ''
+          return 'blue'
       }
     }
 
     const caseModal = ref(false)
-    const communityInfo = ref(null)
-    const propertyInfo = ref(null)
-    const caseInfo = ref(null)
+    const populationModal = ref(false)
+    const communityModal = ref(false)
+    const communityInfo = ref<any>(null)
+    const propertyInfo = ref<any>(null)
+    const caseInfo = ref<any>(null)
+    const roomInfo = ref<any>(null)
+    const buildingInfo = ref<any>(null)
     const handleSelect = async (item: any) => {
-      const { content } = (
-        await ajax.get({ url: `${api.GET_CASE_DETAIL}/${item.id}` })
-      ).data
-      propertyInfo.value = content
+      caseInfo.value = item
       if (item.communityId) {
         const { content } = (
           await ajax.get({
@@ -197,8 +224,72 @@ export default defineComponent({
           })
         ).data
         communityInfo.value = content && content[0]
+        const cspId = content && content[0] && content[0].cspId
+        if (cspId) {
+          const { content } = (
+            await ajax.get({ url: api.GET_COMPANY, params: { cspId } })
+          ).data
+          propertyInfo.value = content && content[0]
         }
+      } else {
+        communityInfo.value = {}
+        propertyInfo.value = {}
+      }
+      if (searchType.value === 'case') {
         caseModal.value = true
+        populationModal.value = false
+        communityModal.value = false
+      } else {
+        const { content } = (
+          await ajax.get({
+            url: api.GET_CASE,
+            params: { pageSize: 200, address_l: item.address || item.addr },
+          })
+        ).data
+        caseInfo.value = content || []
+        if (searchType.value === 'population') {
+          if (item.addr) {
+            const { content } = (
+              await ajax.get({ url: api.GET_ROOM, params: { addr: item.addr } })
+            ).data
+            roomInfo.value = content && content[0]
+            const buildingId = content && content[0] && content[0].buildingId
+            if (buildingId) {
+              const { content } = (
+                await ajax.get({
+                  url: api.GET_BUILDING,
+                  params: { unitId: buildingId },
+                })
+              ).data
+              buildingInfo.value = content && content[0]
+              const sectId = content && content[0] && content[0].sectId
+              if (sectId) {
+                const { content } = (
+                  await ajax.get({
+                    url: api.GET_COMMUNITY_DETAIL,
+                    params: { sectId },
+                  })
+                ).data
+                communityInfo.value = content && content[0]
+              } else {
+                communityInfo.value = null
+              }
+            } else {
+              buildingInfo.value = null
+            }
+          } else {
+            roomInfo.value = null
+          }
+
+          populationModal.value = true
+          caseModal.value = false
+          communityModal.value = false
+        } else if (searchType.value === 'community') {
+          communityModal.value = true
+          populationModal.value = false
+          caseModal.value = false
+        }
+      }
     }
 
     return {
@@ -217,9 +308,13 @@ export default defineComponent({
       getStyle,
       handleSelect,
       caseModal,
+      populationModal,
+      communityModal,
       communityInfo,
       propertyInfo,
       caseInfo,
+      buildingInfo,
+      roomInfo,
     }
   },
 })

src/view/components/tabs.vue

@@ -6,10 +6,11 @@
       :class="{ on: curTabKey === tab.key }"
       @click.prevent="handleSelect(tab.key)"
     >
-      <img :src="horizontal ? img2 : img1" />
+      <!-- <img :src="horizontal ? img2 : img1" /> -->
       <p>{{ tab.name }}</p>
-      <img :src="horizontal ? img2 : img1" />
+      <!-- <img :src="horizontal ? img2 : img1" /> -->
     </div>
+    <span v-if="horizontal" class="dot"></span>
   </div>
 </template>
 
@@ -62,23 +63,41 @@ export default defineComponent({
   height 100%
   display flex
   flex-direction column
+  align-items center
   border-right .01rem solid $primary-border
+  position relative
+  >.dot
+    display inline-block
+    width 0
+    height @width
+    border .05rem solid transparent
+    border-right-color #FFB560
+    position absolute
+    right 0
   &.horizontal
     width 100%
     height .25rem
     flex-direction row
     border-right none
-    border-bottom .01rem solid $primary-border
+    border-bottom .01rem solid rgba(255,255,255,.2)
     >div
       flex-direction row
       align-items center
-      max-width .8rem
+      max-width .6rem
+      color $edge
+      font-size .09rem
+      opacity 0.6
+      transition all .2s ease
       &.on
       &:hover
-        background url('@/assets/images/tab-on2.png') 100% / 100% 100% no-repeat
-      img
-        height 100%
-        width auto
+        color #fff
+        font-size .11rem
+        opacity 1
+        font-weight bold
+        // background url('@/assets/images/tab-on2.png') 100% / 100% 100% no-repeat
+      // img
+      //   height 100%
+      //   width auto
       p
         min-height 0
         // min-width .5rem
@@ -92,15 +111,23 @@ export default defineComponent({
     cursor pointer
     color #acacac
     font-weight bold
+    color $edge
+    font-size .09rem
+    opacity 0.6
+    transition all .2s ease
     &.on
     &:hover
       color #fff
-      background url('@/assets/images/tab-on.png') 100% / 100% 100% no-repeat
-    img
-      width .25rem
-      height .1rem
-      &:last-child
-        transform rotate(180deg)
+      font-size .11rem
+      opacity 1
+      font-weight bold
+      // color #fff
+      // background url('@/assets/images/tab-on.png') 100% / 100% 100% no-repeat
+    // img
+    //   width .25rem
+    //   height .1rem
+    //   &:last-child
+    //     transform rotate(180deg)
     p
       display flex
       align-items center

src/view/drawers/case-drawer.vue

@@ -31,14 +31,19 @@
           'bizLicenseValidDate:营业执照有效期',
           'bizLicenseCode:营业执照号',
         ]"
-        :data="propertyData"
+        :data="propertyInfo"
         label-width="1.4rem"
       />
     </m-card>
     <m-card title="案件详情">
       <div class="sum">
-        <p>黄浦区重庆北路216弄2~66号重新校区15号605室</p>
-        <span>案件分类</span> <span>综合</span>
+        <p>{{ caseInfo.address }}</p>
+        <span v-show="caseInfo.managementScoreType">
+          <b>{{ caseInfo.managementScoreType }}</b>
+        </span>
+        <span v-show="caseInfo.managementType">
+          <b>{{ caseInfo.managementType }}</b>
+        </span>
       </div>
       <div v-for="item in details" :key="item.title" class="step">
         <p class="title">
@@ -46,7 +51,7 @@
         </p>
         <div class="content">
           <p class="sub">{{ item.sub }}</p>
-          <p>{{ item.content }}</p>
+          <p>{{ item.content || '无' }}</p>
           <template v-if="item.imgs">
             <img v-for="(img, i) in item.imgs" :key="i" :src="img" />
           </template>
@@ -57,31 +62,35 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import SubTitle from '../components/sub-title.vue'
-import detail1 from '@/assets/images/case-detail1.png'
-import detail2 from '@/assets/images/case-detail2.png'
 
 export default defineComponent({
   name: 'CaseDrawer',
   components: { SubTitle },
   props: {
     communityInfo: {
-      type: Object as PropType<{ [key: string]: any }>,
-      required: true,
+      type: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
+      },
     },
     propertyInfo: {
-      type: Object as PropType<{ [key: string]: any }>,
-      required: true,
+      type: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
+      },
     },
     caseInfo: {
-      type: Object as PropType<{ [key: string]: any }>,
-      required: true,
+      type: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
+      },
     },
   },
   setup(props) {
     const communityData = computed(() => {
-      const { communityInfo, propertyInfo } = props
+      const { communityInfo = {}, caseInfo = {} } = props
       const keys = [
         { name: '北', key: 'stCspNorth' },
         { name: '南', key: 'stCspSouth' },
@@ -91,63 +100,58 @@ export default defineComponent({
       const range = keys.map((item) =>
         communityInfo && communityInfo[item.key]
           ? item.name + communityInfo[item.key]
-          : ''
+          : null
       )
 
       return {
         ...communityInfo,
-        address: propertyInfo.address,
-        range: range.join('，'),
+        address: caseInfo && caseInfo.address,
+        range: range.filter((e) => e !== null).join('，'),
       }
     })
-    const propertyData = computed(() => {
-      console.log(props.propertyInfo)
-      return props.propertyInfo
-    })
-    const formData = ref({
-      name: '测试文字',
-      address: '测试文字',
-      belong: '测试文字',
-      buildingNum: '测试文字',
-      roomNum: '测试文字',
-      buidlingArea: '测试文字',
-      area: '测试文字',
-      rang: '测试文字',
-      excludeRang: '测试文字',
-    })
-    const details = ref([
-      {
-        title: '发现 · 举报人',
-        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
-        content:
-          '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
-        imgs: [detail1, detail2],
-      },
+    const details = computed(() => {
+      const { caseInfo } = props
+      if (!caseInfo) return []
+      return [
         {
-        title: '立案 · 举报人',
-        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
-        content:
-          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
-        imgs: [detail1, detail2],
+          title: `${caseInfo.phase} · ${caseInfo.reportPersonnel}`,
+          sub: caseInfo.acceptTime,
+          content: caseInfo.reportContent,
+          imgs: [],
         },
-      {
-        title: '派遣 · 举报人',
-        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
-        content:
-          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
-      },
-      {
-        title: '处置 · 举报人',
-        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
-        content:
-          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
-        imgs: [detail1, detail2],
-      },
-    ])
+      ]
+    })
+    // const details = ref([
+    //   {
+    //     title: '发现 · 举报人',
+    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+    //     content:
+    //       '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+    //     imgs: [detail1, detail2],
+    //   },
+    //   {
+    //     title: '立案 · 举报人',
+    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+    //     content:
+    //       '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+    //     imgs: [detail1, detail2],
+    //   },
+    //   {
+    //     title: '派遣 · 举报人',
+    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+    //     content:
+    //       '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+    //   },
+    //   {
+    //     title: '处置 · 举报人',
+    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+    //     content:
+    //       '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+    //     imgs: [detail1, detail2],
+    //   },
+    // ])
     return {
       communityData,
-      propertyData,
-      formData,
       details,
     }
   },
@@ -161,39 +165,55 @@ export default defineComponent({
   display flex
   justify-content space-between
   >div
-    width 35%
+    width 40%
     &:last-child
-      width 64%
+      width 59%
   .sum
-    border-bottom .01rem solid $primary-border
+    border-bottom .01rem dotted $primary-border
     padding-bottom .1rem
+    background rgba(70,83,97,.45)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
+    padding .05rem .1rem
     span
       display inline-block
       font-size .08rem
-      padding 0 .03rem
-      border .01rem solid orange
-      border-radius .02rem
-      margin-right .03rem
-      color orange
+      padding 0 .1rem
+      border-radius .08rem
+      margin-right .1rem
+      transform skew(-30deg)
+      background linear-gradient(to right, #FFF764, #BBA619)
+      >b
+        display inline-block
+        transform skew(30deg)
+        font-weight normal
+        color #000
       &:last-child
-        color gold
-        border-color gold
+        background linear-gradient(to right, #64DCFF, #02B2D2)
   .step
-    margin-top .05rem
+    background rgba(70,83,97,.45)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
+    padding .05rem .1rem
     p
       &.title
-        font-size .12rem
+        font-size .14rem
         display flex
         align-items center
         color $secondary-color
         font-weight bold
+        background-clip text
+        -webkit-background-clip text
+        -webkit-text-fill-color transparent
+        background-image linear-gradient(to right, #FF521E, gold)
         >img
           width .14rem
-          margin-right .05rem
+          margin-right .08rem
+          transform translateX(10%)
       &.sub
-        color #aaa
+        color #ccc
         font-size .09rem
-        border-bottom .01rem solid $primary-border
+        border-bottom .01rem solid rgba(255,255,255,0.1)
+        margin .04rem 0
+        padding .04rem 0
     .content
       padding-left .15rem
       border-left .01rem solid $secondary-color

src/view/drawers/community-drawer.vue

+<template>
+  <div class="community-drawer">
+    <m-card title="相关案件">
+      <div class="case-wrap">
+        <div
+          v-for="(item, i) in caseInfo"
+          :key="i"
+          class="case-item"
+          :class="{ done: item && item.phase === '结案' }"
+        >
+          <div>
+            <p>
+              {{ item.address }}
+              <span v-show="item.managementScoreType">
+                <b>{{ item.managementScoreType }}</b>
+              </span>
+              <span v-show="item.managementType">
+                <b>{{ item.managementType }}</b>
+              </span>
+            </p>
+            <p>{{ item.acceptTime }}</p>
+          </div>
+          <div>{{ item.reportContent || '无' }}</div>
+          <div v-if="item && item.phase === '结案'" class="flag">已结案</div>
+          <div v-else class="flag">处置中</div>
+        </div>
+      </div>
+    </m-card>
+    <m-card title="房屋档案">
+      <m-form
+        :template="[
+          'stNameFrst:小区名称',
+          'address:小区地址|cmtName:所属居委会',
+          'totUnits:总门牌幢数|totHous:总户数',
+          'stCnstArea:总建筑面积|landArea:占地面积',
+          'range:小区四至范围',
+          'stNotcsparea:四至范围不包括',
+        ]"
+        :data="communityData"
+        label-width="1.2rem"
+      />
+      <Tabs class="tabs" :list="tabs" horizontal />
+    </m-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType, computed } from 'vue'
+import Tabs, { TabsProp } from '../components/tabs.vue'
+import SubTitle from '../components/sub-title.vue'
+
+export default defineComponent({
+  name: 'CommunityDrawer',
+  components: { Tabs, SubTitle },
+  props: {
+    communityInfo: {
+      type: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
+      },
+    },
+    propertyInfo: {
+      type: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
+      },
+    },
+    caseInfo: {
+      type: Array as PropType<any[] | null>,
+      default: () => {
+        return []
+      },
+    },
+  },
+  setup(props) {
+    const curTab = ref('room')
+    const tabs = ref<TabsProp[]>([
+      {
+        key: 'room',
+        name: '门牌户室',
+      },
+      {
+        key: 'property',
+        name: '物业信息',
+      },
+      {
+        key: 'committee',
+        name: '业委会',
+      },
+      {
+        key: 'device',
+        name: '设施设备',
+      },
+      {
+        key: 'public',
+        name: '公共设施',
+      },
+    ])
+    const data1 = ref({
+      community: '测试文字',
+      building: '测试文字',
+      communityType: '测试文字',
+      roomNo: '测试文字',
+      company: '测试文字',
+      manager: '测试文字',
+      manageOffice: '测试文字',
+      hasElev: '测试文字',
+      yewei: '测试文字',
+      juwei: '测试文字',
+    })
+    const houseData = computed(() => {
+      const { communityInfo, propertyInfo, caseInfo } = props
+      console.log(communityInfo, propertyInfo, caseInfo)
+      return { ...communityInfo, ...propertyInfo }
+    })
+    const data2 = ref({
+      name: '暂无',
+      phone: '暂无',
+      household: '暂无',
+    })
+    const communityData = computed(() => {
+      const { communityInfo = {}, caseInfo = [] } = props
+      const keys = [
+        { name: '北', key: 'stCspNorth' },
+        { name: '南', key: 'stCspSouth' },
+        { name: '西', key: 'getStCspWest' },
+        { name: '东', key: 'stCspEast' },
+      ]
+      const range = keys.map((item) =>
+        communityInfo && communityInfo[item.key]
+          ? item.name + communityInfo[item.key]
+          : null
+      )
+
+      return {
+        ...communityInfo,
+        address: caseInfo && caseInfo[0] && caseInfo[0].address,
+        range: range.filter((e) => e !== null).join('，'),
+      }
+    })
+
+    const showPersonDetail = ref(false)
+    const selectPerson = (person: any) => {
+      console.log('select-person', person)
+      showPersonDetail.value = true
+    }
+    return {
+      curTab,
+      tabs,
+      houseData,
+      data1,
+      data2,
+      communityData,
+      selectPerson,
+      showPersonDetail,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+$border = .01rem solid rgba(91,213,255,.3)
+
+.community-drawer
+  display flex
+  justify-content space-between
+  >div
+    width 35%
+    &:last-child
+      width 64%
+  .case-wrap
+    max-height 85vh
+    overflow-y auto
+    .case-item
+      position relative
+      margin-top .08rem
+      padding .05rem .08rem
+      overflow hidden
+      background rgba(70,83,97,.45)
+      box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
+      border-radius .04rem
+      &.done
+        .flag
+          background #27C5A2
+      >div
+        &:nth-of-type(1)
+          border-bottom $border
+          padding-bottom .05rem
+          margin-bottom .05rem
+          p
+            &:last-child
+              font-size .09rem
+              color #ccc
+              margin .04rem 0
+            span
+              display inline-block
+              font-size .08rem
+              padding 0 .1rem
+              border-radius .08rem
+              margin-left .1rem
+              transform skew(-30deg)
+              background linear-gradient(to right, #FFF764, #BBA619)
+              >b
+                display inline-block
+                transform skew(30deg)
+                font-weight normal
+                color #000
+              &:last-child
+                background linear-gradient(to right, #64DCFF, #02B2D2)
+      .flag
+        background $secondary-color
+        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 .09rem
+.person-bar
+  display flex
+  justify-content space-between
+  .back-btn
+    padding 0 .06rem
+    background $primary-color
+    cursor pointer
+    border-radius .02rem
+    &:hover
+      background $secondary-color
+</style>

src/view/drawers/population-drawer.vue

 <template>
   <div class="population-drawer">
     <m-card title="相关案件">
+      <div class="case-wrap">
+        <template v-if="caseInfo && caseInfo.length > 0">
           <div
-        v-for="(item, i) in caseList"
+            v-for="(item, i) in caseInfo"
             :key="i"
             class="case-item"
-        :class="{ done: item.status === 1 }"
+            :class="{ done: item && item.phase === '结案' }"
           >
             <div>
               <p>
-            <span>{{ item.type }}</span>
                 {{ item.address }}
+                <span v-show="item.managementScoreType">
+                  <b>{{ item.managementScoreType }}</b>
+                </span>
+                <span v-show="item.managementType">
+                  <b>{{ item.managementType }}</b>
+                </span>
               </p>
-          <p>{{ item.date }}</p>
+              <p>{{ item.acceptTime }}</p>
             </div>
-        <div>{{ item.content }}</div>
-        <div v-if="item.status === 1" class="flag">已结案</div>
+            <div>{{ item.reportContent || '无' }}</div>
+            <div v-if="item && item.phase === '结案'" class="flag">已结案</div>
             <div v-else class="flag">处置中</div>
           </div>
+        </template>
+        <m-empty v-else :img="empty" hidden-text />
+      </div>
     </m-card>
     <m-card title="人口详情">
-      <Tabs class="tabs" :list="tabs" horizontal />
+      <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
+      <template v-if="curTab === 'house'">
         <SubTitle>基本信息</SubTitle>
         <m-form
           :template="[
-          'community:所属小区|building:门牌幢',
-          'communityType:小区类型|roomNo:室号',
-          'company:物业公司|manager:物业经理',
-          'manageOffice:管理处|hasElev:有无电梯',
-          'yewei:业委会|juwei:居委会',
+            'stNameFrst:所属小区|buildingAddr:门牌幢',
+            'sectTypeName:小区类型|houseNo:室号',
+            'cspName:物业公司|cspContacter:物业经理',
+            'csName:管理处|unitFlag:有无电梯',
+            'hocName:业委会|cmtName:居委会',
           ]"
-        :data="data1"
+          :data="houseData"
           label-width="1.2rem"
         />
         <SubTitle>房主信息</SubTitle>
@@ -42,63 +53,115 @@
         <Tabs class="tabs" :list="tabs2" horizontal />
         <m-form
           :template="[
-          'name:小区名称',
-          'address:小区地址|belong:所属居委会',
-          'buildingNum:总门牌幢数|roomNum:总户数',
-          'buildingArea:总建筑面积|aera:占地面积',
-          'range:小区四至范围|excludeRange:四至范围不包括',
+            'stNameFrst:小区名称',
+            'address:小区地址|cmtName:所属居委会',
+            'totUnits:总门牌幢数|totHous:总户数',
+            'stCnstArea:总建筑面积|landArea:占地面积',
+            'range:小区四至范围|stNotcsparea:四至范围不包括',
+          ]"
+          :data="communityData"
+          label-width="1.2rem"
+        />
+      </template>
+      <template v-else>
+        <template v-if="showPersonDetail">
+          <SubTitle>基本信息</SubTitle>
+          <div class="person-bar">
+            <div class="photo"></div>
+            <div class="back-btn" @click="showPersonDetail = false">返回</div>
+          </div>
+          <m-form
+            :template="[
+              'cnName:姓名|sex:性别',
+              'birthday:出生日期|roomNo:民族',
+              'nationalityName:国籍|hometown:籍贯',
+              'homtownAdmArea:户籍|certCode:证件号',
+              'educationName:学历|maritalStatus:婚姻状况',
             ]"
-        :data="data3"
+            :data="{}"
             label-width="1.2rem"
           />
+          <SubTitle>标签信息</SubTitle>
+        </template>
+        <template v-else>
+          <SubTitle>现居住人</SubTitle>
+          <m-table
+            :template="[
+              '姓名|国籍/户籍|证件号|性别|婚姻状况|入住时间',
+              'cnName|nationalityName|certCode|sex|maritalStatus|time',
+            ]"
+            selectable
+            :data="[]"
+            @select="selectPerson"
+          />
+          <SubTitle>历史居住人</SubTitle>
+          <m-table
+            :template="[
+              '姓名|国籍/户籍|证件号|性别|婚姻状况|入住时间',
+              'name|nation|id|sexual|marry|time',
+            ]"
+            selectable
+            :data="[]"
+            @select="selectPerson"
+          />
+        </template>
+      </template>
     </m-card>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, PropType, computed } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
+import empty from '@/assets/images/empty.png'
 
 export default defineComponent({
   name: 'PopulationDrawer',
   components: { Tabs, SubTitle },
-  setup() {
-    const caseList = ref([
-      {
-        address: 'XX区XX路XX弄XX号',
-        date: '2021-01-23 ~ 2021-01-24',
-        type: '案件分类',
-        status: 1,
-        content:
-          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
+  props: {
+    communityInfo: {
+      type: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
       },
-      {
-        address: 'XX区XX路XX弄XX号',
-        date: '2021-01-23 ~ 2021-01-24',
-        type: '案件分类',
-        status: 0,
-        content:
-          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
     },
-      {
-        address: 'XX区XX路XX弄XX号',
-        date: '2021-01-23 ~ 2021-01-24',
-        type: '案件分类',
-        status: 0,
-        content:
-          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
+    propertyInfo: {
+      type: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
+      },
+    },
+    caseInfo: {
+      type: Array as PropType<any[] | null>,
+      default: () => {
+        return []
       },
-    ])
-    const tabs = ref<TabsProp[]>([
-      {
-        key: 'person',
-        name: '实住人',
     },
+    roomInfo: {
+      type: Object as PropType<any[] | null>,
+      default: () => {
+        return {}
+      },
+    },
+    buildingInfo: {
+      type: Object as PropType<any[] | null>,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  setup(props) {
+    const curTab = ref('house')
+    const tabs = ref<TabsProp[]>([
       {
         key: 'house',
         name: '房屋信息',
       },
+      {
+        key: 'person',
+        name: '实住人',
+      },
     ])
     const tabs2 = ref<TabsProp[]>([
       {
@@ -138,29 +201,53 @@ export default defineComponent({
       yewei: '测试文字',
       juwei: '测试文字',
     })
+    const houseData = computed(() => {
+      const { communityInfo, buildingInfo, roomInfo } = props
+      console.log(communityInfo, buildingInfo, roomInfo)
+      return { ...communityInfo, ...buildingInfo, ...roomInfo }
+    })
     const data2 = ref({
       name: '暂无',
       phone: '暂无',
       household: '暂无',
     })
-    const data3 = ref({
-      name: '测试文字',
-      address: '测试文字',
-      belong: '测试文字',
-      buildingNum: '测试文字',
-      roomNum: '测试文字',
-      buildingArea: '测试文字',
-      area: '测试文字',
-      range: '测试文字',
-      excludeRange: '测试文字',
+    const communityData = computed(() => {
+      const { communityInfo = {}, caseInfo = [] } = props
+      const keys = [
+        { name: '北', key: 'stCspNorth' },
+        { name: '南', key: 'stCspSouth' },
+        { name: '西', key: 'getStCspWest' },
+        { name: '东', key: 'stCspEast' },
+      ]
+      const range = keys.map((item) =>
+        communityInfo && communityInfo[item.key]
+          ? item.name + communityInfo[item.key]
+          : null
+      )
+
+      return {
+        ...communityInfo,
+        address: caseInfo && caseInfo[0] && caseInfo[0].address,
+        range: range.filter((e) => e !== null).join('，'),
+      }
     })
+
+    const showPersonDetail = ref(false)
+    const selectPerson = (person: any) => {
+      console.log('select-person', person)
+      showPersonDetail.value = true
+    }
     return {
-      caseList,
+      empty,
+      curTab,
       tabs,
       tabs2,
+      houseData,
       data1,
       data2,
-      data3,
+      communityData,
+      selectPerson,
+      showPersonDetail,
     }
   },
 })
@@ -177,18 +264,18 @@ $border = .01rem solid rgba(91,213,255,.3)
     width 35%
     &:last-child
       width 64%
-  .tabs
-    margin .1rem 0
+  .case-wrap
+    height 85vh
+    overflow-y auto
     .case-item
       position relative
-    border $border
-    border-left .02rem solid $secondary-color
-    margin .1rem 0
-    padding .05rem .1rem
+      margin-top .08rem
+      padding .05rem .08rem
       overflow hidden
-    background rgba(51,145,255,.1)
+      background rgba(70,83,97,.45)
+      box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
+      border-radius .04rem
       &.done
-      border-left-color #27C5A2
         .flag
           background #27C5A2
       >div
@@ -197,29 +284,46 @@ $border = .01rem solid rgba(91,213,255,.3)
           padding-bottom .05rem
           margin-bottom .05rem
           p
+            &:last-child
+              font-size .09rem
+              color #ccc
+              margin .04rem 0
             span
               display inline-block
-            color orange
-            border .01rem solid orange
-            border-radius .02rem
-            margin-right .1rem
-            padding 0 .03rem
               font-size .08rem
+              padding 0 .1rem
+              border-radius .08rem
+              margin-left .1rem
+              transform skew(-30deg)
+              background linear-gradient(to right, #FFF764, #BBA619)
+              >b
+                display inline-block
+                transform skew(30deg)
+                font-weight normal
+                color #000
               &:last-child
-            color #aaa
-            font-size .08rem
-            margin-top .05rem
+                background linear-gradient(to right, #64DCFF, #02B2D2)
       .flag
         background $secondary-color
         position absolute
-      top -0.08rem
-      right -0.28rem
+        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-weight bold
-      padding-bottom .02rem
+        font-size .09rem
+.person-bar
+  display flex
+  justify-content space-between
+  .back-btn
+    padding 0 .06rem
+    background $primary-color
+    cursor pointer
+    border-radius .02rem
+    &:hover
+      background $secondary-color
 </style>

src/view/right/case-analysis.vue

@@ -57,12 +57,16 @@ export default defineComponent({
     const rankList = computed(() => {
       const data = store.state.analysisRank[curOption.value] || []
       const total = data.reduce((acc, cur) => acc + cur.num, 0)
-      return data.map((item: any) => ({
+      const result = data.map((item: any) => ({
         name: item.managementType,
         rate: +Math.ceil((item.num / total) * 100).toFixed(0),
         value: item.num,
       }))
-      // return [c, a, b]
+      if (result.length > 0) {
+        const [a, b, c] = result
+        return [c, a, b]
+      }
+      return []
     })
 
     const placeList = computed(() => {

src/view/right/duty-analysis.vue

@@ -125,13 +125,18 @@ export default defineComponent({
     const rankList = computed(() => {
       const data = store.state.dutyRanking[curOption.value] || []
       const total = data.reduce((acc, cur) => acc + cur.num, 0)
-      return data.map((item: any) => ({
+      const result = data.map((item: any) => ({
         name: item.managementType,
         rate: +Math.ceil((item.num / total) * 100).toFixed(0),
         value: item.num,
         unit: '件',
         color: '#fff',
       }))
+      if (result.length > 0) {
+        const [a, b, c] = result
+        return [b, a, c]
+      }
+      return []
     })
     const placeList = computed(() => {
       const data = store.state.dutyPlaces[curOption.value] || []

src/view/right/emergency-store.vue

@@ -83,7 +83,7 @@
           'projectName|houseAddr|inspectionDate|useType|buildYear|planeSituation|constructArea|structureType|floor|outerWallFacilityHiddenPoint|outerWallFacilityDangerPoint',
         ]"
         :data="buildings"
-      ></m-table>
+      />
     </div>
   </m-modal>
 </template>