对接接口

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/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>