对接部分接口

src/ajax/api.ts

@@ -20,11 +20,14 @@ switch (process.env.NODE_ENV) {
 export default {
   BASE_URL,
   SOURCE_URL,
+  TEST: '/service-basicdatasync-ddd/communities',
+  GET_COMMUNITY_DETAIL: '/service-basicdatasync-ddd/communities',
   GET_BUILDING: '/service-basicdatasync-ddd/building', // 门牌幢列表
   GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', // 业委会列表
   GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
   GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
   GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
+  GET_CASE_DETAIL: '/service-special-nandong/compair', // 案件详情
   GET_PUBLICSAFE_RIGHT_GATE: '/service-special-nandong/ironGate/statistical', // 公共安全-右侧-门岗分布
   GET_PUBLICSAFE_RIGHT_SAFEMAP: '/service-special-nandong/peaceMaps', // 公共安全-右侧-平安地图
   GET_PUBLICSAFE_TRUE_PEOPLE: '/service-special-nandong/personnel/statistical', // 公共安全-右侧-实有人口
@@ -78,11 +81,15 @@ export default {
   GET_TRACKEVENT: '/service-special-nandong/compairs', // 有求必应-事件跟踪
   GET_CASE_CLASSIFICATION_RANK: '/service-special-nandong/compair/analysis', // 案件分析-分类排行
   GET_MOREHAPPEN_ADDR: '/service-special-nandong/compair/analysis/addr', // 案件分析-多发地点
+  GET_RESPONSIVITY: '/service-special-nandong/compair/responsivity', // 响应度
+  GET_ENTRY: '/service-special-nandong/inputUrl', // 业务入口
 
   /** 公共服务 */
   GET_ECOLOGY_LIST: '/service-basicdatasync-ddd/nonResident/ecological', // 生态-衣食住行
+  GET_ECOLOGY_POINTS: '/service-basicdatasync-ddd/nonResidents', // 获取衣食住行撒点
   GET_ECOLOGY_CONVENIENT: '/service-special-nandong/convenient/ecological', // 生态-便民设施
   GET_ECOLOGY_PHOTO: '/service-special-nandong/buildingPhotos', // 生态 - 商业综合体、文保、历保照片
   GET_ELEV_COUNT: '/service-special-nandong/elevatorAdd/statistical', // 美丽家园-电梯加装统计数字
   GET_ELEV_LIST: '/service-special-nandong/elevatorAdds', // 美丽家园 - 根据名称查询列表
+  GET_TOILET: '/service-special-nandong/toilet/renovation', // 马桶改造
 }

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

@@ -8,7 +8,13 @@
           draggable="false"
           @click="closeDrawer"
         />
-        <div class="content"><slot /></div>
+        <div class="wrap">
+          <img class="dot" src="@/assets/images/dot2.png" />
+          <img class="dot" src="@/assets/images/dot2.png" />
+          <img class="dot" src="@/assets/images/dot2.png" />
+          <img class="dot" src="@/assets/images/dot2.png" />
+          <div class="content"><slot /></div>
+        </div>
       </div>
     </MyAnimate>
   </teleport>
@@ -55,14 +61,12 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../main.styl'
 .my-drawer
-  background url('@/assets/images/drawer-bg.png') 100% / 100% 100% no-repeat
   background-color $table-title-bg
   position fixed
   top .45rem
   right .05rem
   bottom @right
   z-index 9999
-  padding .15rem .25rem
   $blur()
   color #fff
   .close-btn
@@ -76,4 +80,29 @@ export default defineComponent({
     transition transform .3s ease
     &:hover
       transform scale(1.2)
+  .wrap
+    position relative
+    border .01rem dotted rgba(47,134,238, .6)
+    margin .06rem
+    padding .06rem
+    .dot
+      position absolute
+      width .1rem
+      height @width
+      &:nth-of-type(1)
+        left 0
+        top 0
+        transform translate(-50%, -50%)
+      &:nth-of-type(2)
+        right 0
+        top 0
+        transform translate(50%, -50%)
+      &:nth-of-type(3)
+        left 0
+        bottom 0
+        transform translate(-50%, 50%)
+      &:nth-of-type(4)
+        right 0
+        bottom 0
+        transform translate(50%, 50%)
 </style>

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

@@ -105,7 +105,7 @@ export default defineComponent({
       if (formatter && key.match(/>(\w*)[#\*:]?/)) {
         return formatter[RegExp.$1](data[dataKey])
       }
-      return data[dataKey] || ''
+      return data[dataKey] || '无'
     }
 
     const calcAlign = (key: string): string => {

src/components/MyComponent/MyModal/my-modal.vue

@@ -15,13 +15,8 @@
           class="my-modal"
           :style="`width:${width};transform: translateX(${offset}) translateY(${translateY})`"
         >
-          <span class="edge left-top" />
-          <span class="edge right-top" />
-          <span class="edge left-bottom" />
-          <span class="edge right-bottom" />
           <div class="inner">
             <head>
-              <img draggable="false" src="@/assets/images/modal-head-tri.png" />
               <p>{{ title }}</p>
               <img
                 draggable="false"
@@ -29,8 +24,14 @@
                 @click.prevent="closeModal"
               />
             </head>
-            <div class="content">
-              <slot />
+            <div class="wrap">
+              <img class="dot" src="@/assets/images/dot2.png" />
+              <img class="dot" src="@/assets/images/dot2.png" />
+              <img class="dot" src="@/assets/images/dot2.png" />
+              <img class="dot" src="@/assets/images/dot2.png" />
+              <div class="content">
+                <slot />
+              </div>
             </div>
           </div>
         </div>
@@ -78,7 +79,7 @@ export default defineComponent({
     },
     maskClosable: {
       type: Boolean as PropType<boolean>,
-      default: true,
+      default: false,
     },
   },
   emits: ['update:modelValue', 'close'],
@@ -108,70 +109,77 @@ export default defineComponent({
   .my-modal
     color #fff
     z-index 99999
-    padding 0.04rem
+    padding 0.06rem
     background transparent
     position relative
+    box-sizing border-box
     $blur(0.01rem)
-    .edge
-      display block
-      position absolute
-      width 0.1rem
-      height @width
-      border 0.01rem solid $secondary-color
-      &.left-top
-        top 0
-        left 0
-        border-right none
-        border-bottom none
-      &.right-top
-        top 0
-        right 0
-        border-left none
-        border-bottom none
-      &.left-bottom
-        bottom 0
-        left 0
-        border-right none
-        border-top none
-      &.right-bottom
-        bottom 0
-        right 0
-        border-left none
-        border-top none
     .inner
       $blur()
-      background rgba(6, 34, 67, 0.8)
-      border 0.01rem solid rgba(91, 213, 255, 0.3)
+      background rgba(29, 42, 65, 0.9)
+      padding-bottom .02rem
+      box-sizing border-box
       head
-        height 0.28rem
-        background url('@/assets/images/modal-head-bg.png') 100% / 100% 100% no-repeat
+        min-height .24rem
+        box-sizing border-box
         display flex
         align-items center
+        justify-content space-between
+        background linear-gradient(to right, rgba(59,85,102,.8), transparent)
         position relative
+        border-bottom .01rem solid rgba(105,110,114,.3)
+        margin-bottom .05rem
+        padding 0 .1rem
+        box-sizing border-box
+        &:before
+          content ''
+          display block
+          position absolute
+          left 0
+          width .02rem
+          height 60%
+          background #FADB71
         >p
           font-size 0.14rem
           font-family $font-zcool
-          text-indent 0.14rem
           line-height 1.5
         >img
-          width 0.14rem
+          width 0.1rem
           height @width
+          cursor pointer
+          transition transform 0.3s ease-in-out
+          &:hover
+            transform rotate(180deg)
+      .wrap
+        position relative
+        border .01rem dotted rgba(47,134,238, .6)
+        margin .06rem
+        padding .06rem
+        .dot
           position absolute
+          width .1rem
+          height @width
           &:nth-of-type(1)
-            width 0.24rem
-            height @width
-            left -0.095rem
+            left 0
+            top 0
+            transform translate(-50%, -50%)
           &:nth-of-type(2)
-            right 0.05rem
-            cursor pointer
-            transition transform 0.3s ease-in-out
-            &:hover
-              transform rotate(180deg)
-      .content
-        min-height 30vh
-        max-height 80vh
-        padding 0.1rem
-        overflow-y auto
-        overflow-x hidden
-        font-size 0.1rem
+            right 0
+            top 0
+            transform translate(50%, -50%)
+          &:nth-of-type(3)
+            left 0
+            bottom 0
+            transform translate(-50%, 50%)
+          &:nth-of-type(4)
+            right 0
+            bottom 0
+            transform translate(50%, 50%)
+        .content
+          // min-height 30vh
+          max-height 80vh
+          overflow-y auto
+          overflow-x hidden
+          font-size 0.1rem
+          box-sizing border-box
 </style>

src/components/MyComponent/MySub/my-sub2.vue

@@ -8,21 +8,28 @@
         <span v-if="addition.unit">{{ addition.unit }}</span>
         <img src="@/assets/images/title-dec.png" />
       </div>
-      <input
-        v-if="searchAble"
-        v-model="inputValue"
-        :class="{ open: isOpened }"
-        class="search-bar"
-        type="text"
-        @keypress.enter="handleSearch"
-      />
-      <img
-        v-if="searchAble"
-        class="search-btn"
-        src="@/assets/images/search.png"
-        draggable="false"
-        @click.prevent="handleOpenSearchBar"
-      />
+      <div v-if="searchAble" class="search-container">
+        <input
+          v-model="inputValue"
+          :class="{ open: isOpened }"
+          class="search-bar"
+          type="text"
+          @keypress.enter="handleSearch"
+        />
+        <img
+          v-show="isOpened"
+          class="close-btn"
+          src="@/assets/images/close-btn2.png"
+          draggable="false"
+          @click.prevent="handleClose"
+        />
+        <img
+          class="search-btn"
+          src="@/assets/images/search.png"
+          draggable="false"
+          @click.prevent="handleOpenSearchBar"
+        />
+      </div>
     </div>
     <!-- <img src="@/assets/images/sub-dot.png" draggable="false" /> -->
     <span class="dot" />
@@ -52,13 +59,17 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['search'],
-  setup(props, ctx) {
+  emits: ['search', 'close'],
+  setup(_, ctx) {
     const isOpened = ref(false)
     const inputValue = ref('')
     const handleSearch = () => {
       ctx.emit('search', inputValue.value.trim())
     }
+    const handleClose = () => {
+      inputValue.value = ''
+      ctx.emit('close')
+    }
     const handleOpenSearchBar = () => {
       if (!isOpened.value) {
         isOpened.value = true
@@ -74,6 +85,7 @@ export default defineComponent({
       isOpened,
       inputValue,
       handleSearch,
+      handleClose,
       handleOpenSearchBar,
     }
   },
@@ -110,34 +122,45 @@ export default defineComponent({
       img
         width .3rem
         margin-left .1rem
-    .search-bar
-      display block
-      width 0
-      height .16rem
-      background rgba(0,0,0,0.1)
-      border-radius .02rem
-      outline none
-      margin 0 .05rem
-      padding 0
-      box-sizing border-box
-      font-family $font-din
-      font-size .1rem
-      transition all .3s ease-in-out
-      opacity 0
-      &.open
-        width 1rem
-        padding .02rem .05rem
-        border .01rem solid $blue
-        opacity 1
-    .search-btn
-      width .14rem
-      height @width
-      cursor pointer
-      transition transform .3s ease-in-out
-      &:hover
-        transform scale(1.3) rotate(360deg)
-  // >img
-  //   width .6rem
+    .search-container
+      display flex
+      align-items center
+      position relative
+      .search-bar
+        display block
+        width 0
+        height .16rem
+        background rgba(0,0,0,0.1)
+        border-radius .02rem
+        outline none
+        margin 0 .05rem
+        padding 0
+        box-sizing border-box
+        font-family $font-din
+        font-size .1rem
+        transition all .3s ease-in-out
+        opacity 0
+        &.open
+          width 1.6rem
+          padding .02rem .16rem .02rem .05rem
+          border .01rem solid $blue
+          opacity 1
+      .search-btn
+        width .14rem
+        height @width
+        cursor pointer
+        transition transform .2s ease-in-out
+        &:hover
+          transform scale(1.3) rotate(360deg)
+      .close-btn
+        width .08rem
+        height @width
+        cursor pointer
+        position absolute
+        right .24rem
+        transition transform .2s ease-in-out
+        &:hover
+          transform scale(1.3) rotate(360deg)
   >.dot
     display inline-block
     width 0

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

 <template>
-  <div class="my-table">
+  <div class="my-table" :class="{ stripe: stripe }">
     <div class="table-title">
       <div
         v-for="(title, index) in layout.header"
@@ -77,6 +77,10 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
     },
+    stripe: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
   emits: ['select'],
   setup(props, ctx) {
@@ -154,6 +158,21 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../main.styl'
 .my-table
+  position relative
+  &.stripe
+    .table-title
+      background $table-title-bg
+      color $blue
+      box-shadow none
+      border-radius 0
+    .table-content
+      >div
+        background $table-content-bg
+        box-shadow none
+        border-radius 0
+        margin-top 0
+        &:nth-child(odd)
+          background transparent
   $full()
   p
     padding .05rem
@@ -161,21 +180,27 @@ export default defineComponent({
     flex 1
     box-sizing border-box
   .table-title
+    $blur(0.1rem)
     display flex
-    background $table-title-bg
-    color $blue
+    background rgba(114,123,132, .5)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65), inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+    border-radius .04rem
     font-weight bold
+    font-size .12rem
     box-sizing inherit
+    position sticky
+    top 0
     >div
       box-sizing inherit
   .table-content
     >div
       display flex
       align-items center
-      background $table-content-bg
       box-sizing inherit
-      &:nth-child(odd)
-        background transparent
+      background rgba(70,83,97,.45)
+      box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
+      margin-top .06rem
+      border-radius .04rem
       &.selectable
         cursor pointer
         &:hover

src/components/MyComponent/main.styl

@@ -37,8 +37,8 @@ $card-title-color = #fff
 $card-title-size = .14rem
 $card-border = .01rem solid $primary-border
 
-$table-title-bg =rgba(2,27,53,.5)
-$table-content-bg = rgba(2,27,53,.2)
+$table-title-bg =rgba(2,27,53,.8)
+$table-content-bg = rgba(2,27,53,.6)
 $table-content-hover-color = $primary-color
 $table-content-hover-bg = $primary-bg
 

src/store/actions.ts

@@ -19,7 +19,7 @@ export default {
       bxmaintainType: '1',
       status_in: '待派遣,已派单',
       acceptTime_gte: today,
-      pageSize: 1000,
+      pageSize: 100,
     })
     dispatch('GET_TODAYCASE')
     dispatch('GET_STAGECASE')
@@ -27,7 +27,7 @@ export default {
     dispatch('GET_TRACKEVENT', {
       status_in: '待处置,已签收',
       acceptTime_gte: today,
-      pageSize: 1000,
+      pageSize: 100,
     })
     dispatch('GET_CASE_CLASSIFICATION_RANK', {
       managementType: '综合',
@@ -35,6 +35,8 @@ export default {
     dispatch('GET_MOREHAPPEN_ADDR', {
       managementType: '综合',
     })
+    dispatch('GET_RESPONSIVITY')
+    dispatch('GET_ENTRY')
     dispatch('GET_PUBLICSAFE_SOS_MATERIAL')
     dispatch('GET_PUBLICSAFE_OUTHOUSEWALL')
     dispatch('GET_PUBLICSAFE_BUILDINGS')
@@ -66,9 +68,15 @@ export default {
   },
 
   // 案件汇总列表
-  async getCaseList({ commit }: { commit: Commit }): Promise<void> {
+  async getCaseList(
+    { commit }: { commit: Commit },
+    address = null
+  ): Promise<void> {
     const { content } = (
-      await ajax.get({ url: api.GET_CASE, params: { pageSize: 100 } })
+      await ajax.get({
+        url: api.GET_CASE,
+        params: { pageSize: 200, address_l: address },
+      })
     ).data
     commit('SET_CASE_LIST', content)
   },
@@ -161,7 +169,7 @@ export default {
     commit('SET_PUBLICSAFE_GATESENTRY_ZHIGUANGONGFANG', publicHouse)
   },
 
-  // 公共服务 - 门岗值守 - 平安地图
+  // 公共安全 - 门岗值守 - 平安地图
   async GET_PUBLICSAFE_RIGHT_SAFEMAP({
     commit,
   }: {
@@ -263,7 +271,7 @@ export default {
     commit('SET_PUBLICSAFE_OUTHOUSEWALL', content)
   },
 
-  // 公共服务 - 重点关注楼宇
+  // 公共安全 - 重点关注楼宇
   async GET_PUBLICSAFE_BUILDINGS({
     commit,
   }: {
@@ -291,6 +299,18 @@ export default {
     const { content } = (await ajax.get({ url: api.GET_ECOLOGY_LIST })).data
     commit('SET_ECOLOGY_LIST', content)
   },
+  async getEcologyPoints(
+    { commit }: { commit: Commit },
+    name: string
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_ECOLOGY_POINTS,
+        params: { labelName: name },
+      })
+    ).data
+    commit('SET_ECOLOGY_POINTS', content)
+  },
   async getEcologyConvenient({ commit }: { commit: Commit }): Promise<void> {
     const { content } = (
       await ajax.get({ url: api.GET_ECOLOGY_CONVENIENT })
@@ -401,7 +421,7 @@ export default {
     const { content } = (
       await ajax.get({
         url: api.GET_COMBINE_LIST,
-        params: { bigscreenCommunityId: id, pageSize: 1000 },
+        params: { bigscreenCommunityId: id, pageSize: 200 },
       })
     ).data
     commit('SET_COMBINE_DATA', content)
@@ -528,6 +548,12 @@ export default {
   },
 
   /** 公共管理 */
+  // 业务入口
+  async GET_ENTRY({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (await ajax.get({ url: api.GET_ENTRY })).data
+    commit('SET_ENTRY', content)
+  },
+
   async GET_YOUSUBIDA_RANK({ commit }: { commit: Commit }): Promise<void> {
     // 有诉必答 - 占比
     const { content } = (await ajax.get({ url: api.GET_YOUSUBIDA_RANK })).data
@@ -684,4 +710,14 @@ export default {
     ).data
     commit('SET_MOREHAPPEN_ADDR', content)
   },
+
+  //响应度
+  async GET_RESPONSIVITY({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_RESPONSIVITY,
+      })
+    ).data
+    commit('SET_RESPONSIVITY', content)
+  },
 }

src/store/index.ts

@@ -82,6 +82,19 @@ export interface ElevCountProp {
   num: number
 }
 
+export interface ResponsivityProp {
+  date: string
+  statistical: {
+    totalNum: number
+    reachNum: number
+  }
+}
+
+export interface EntryProp {
+  inputName: string
+  url: string
+}
+
 export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
@@ -142,11 +155,14 @@ export interface GlobalStateProps {
   analysisRank: Partial<DutyDataProp>
   moreHappenAddr: Partial<DutyDataProp>
   ecologyList: EcologyListProp[]
+  ecologyPoints: any[]
   ecologyConvenient: EcologyListProp[]
   ecologyPhoto: EcologyPhotoProp[]
   oldService: ForOldProp[]
   lifeConvenient: EcologyListProp[]
   elevCount: ElevCountProp[]
+  responsivity: ResponsivityProp[]
+  entry: EntryProp[]
 }
 
 export default createStore<GlobalStateProps>({

src/store/mutations.ts

@@ -12,6 +12,8 @@ import {
   EcologyPhotoProp,
   ForOldProp,
   ElevCountProp,
+  ResponsivityProp,
+  EntryProp,
 } from './index'
 
 export default {
@@ -203,6 +205,9 @@ export default {
   },
 
   /** 公共管理 */
+  SET_ENTRY(state: GlobalStateProps, data: EntryProp[]): void {
+    state.entry = data
+  },
   // 有诉必答-占比
   SET_YOUSUBIDA_RANK(state: GlobalStateProps, data: YousubidaRankProp): void {
     state.yousubidaRank = data
@@ -257,11 +262,18 @@ export default {
   SET_MOREHAPPEN_ADDR(state: GlobalStateProps, data: DutyDataProp): void {
     state.moreHappenAddr = data
   },
+  // 响应度
+  SET_RESPONSIVITY(state: GlobalStateProps, data: ResponsivityProp[]): void {
+    state.responsivity = data
+  },
 
   /** 公共服务 - 生态 */
   SET_ECOLOGY_LIST(state: GlobalStateProps, data: EcologyListProp[]): void {
     state.ecologyList = data
   },
+  SET_ECOLOGY_POINTS(state: GlobalStateProps, data: any[]): void {
+    state.ecologyPoints = data
+  },
   SET_ECOLOGY_CONVENIENT(
     state: GlobalStateProps,
     data: EcologyListProp[]

src/store/state.ts

@@ -220,9 +220,12 @@ export default {
   analysisRank: { day: [], week: [], month: [] },
   moreHappenAddr: { day: [], week: [], month: [] },
   ecologyList: [],
+  ecologyPoints: [],
   ecologyConvenient: [],
   ecologyPhoto: [],
   oldService: [],
   lifeConvenient: [],
   elevCount: [],
+  responsivity: [],
+  entry: [],
 } as GlobalStateProps

src/view/community.vue

@@ -165,6 +165,8 @@ export default defineComponent({
     }
     const map = ref<any>(null)
     onMounted(async () => {
+      console.log('route', route)
+
       curId.value = route.query.id || communityOptions.value[0].type
       initData(curId.value)
       store.commit(

src/view/components/map-btns.vue

@@ -19,7 +19,7 @@
       </a-tooltip>
     </template>
   </div>
-  <m-modal v-model="searchModal" title="搜索" width="30%" offset="-70%">
+  <m-modal v-model="searchModal" title="搜索" width="20%" offset="-70%">
     <div id="modal-search-bar">
       <span class="edge left-top" />
       <span class="edge right-top" />
@@ -29,30 +29,35 @@
         <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>
-        <a-input v-model:value="searchKey" placeholder="请输入搜索关键词" />
+        <a-input
+          v-model:value="searchKey"
+          placeholder="请输入搜索关键词"
+          @pressEnter="handleSearch"
+        />
       </a-input-group>
-      <div class="search-btn">搜索</div>
+      <div class="search-btn" @click="handleSearch">搜索</div>
     </div>
     <div class="modal-case-content">
-      <div
-        v-for="(item, i) in caseList"
-        :key="i"
-        :class="{ done: item.status === 1 }"
-      >
-        <div>
-          <p>
-            <span>{{ item.troubleType }}</span>
-            {{ item.address }}
-          </p>
-          <p>{{ item.acceptTime }} ~ {{ item.backTime }}</p>
+      <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>
+          <p>{{ item.address }}</p>
         </div>
-        <div>{{ item.reportContent }}</div>
-        <div v-if="item.status === '已结'" class="flag">已结案</div>
-        <div v-else class="flag">处置中</div>
-      </div>
+      </template>
+      <m-empty v-else />
     </div>
   </m-modal>
+  <m-drawer v-model="caseModal">
+    <CaseDrawer
+      :community-info="communityInfo"
+      :property-info="propertyInfo"
+      :case-info="caseInfo"
+    />
+  </m-drawer>
 </template>
 
 <script lang="ts">
@@ -68,10 +73,13 @@ import d2 from '@/assets/images/2d.png'
 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 store from '@/store'
+import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'MapBtns',
+  components: { CaseDrawer },
   emits: ['full', 'change', 'zoom'],
   setup(_, ctx) {
     const curViewType = computed(() => store.state.curView.type)
@@ -81,7 +89,7 @@ export default defineComponent({
           ? { key: '3D', icon: d3, title: '开启3D地图' }
           : { key: '2D', icon: d2, title: '开启2D地图' }
       const list = [
-        // { key: 'search', icon: btn1 },
+        { key: 'search', icon: btn1 },
         { key: 'in', icon: zoomIn, title: '放大地图' },
         { key: 'out', icon: zoomOut, title: '缩小地图' },
         { key: 'full', icon: btn2, title: '全屏' },
@@ -98,6 +106,8 @@ export default defineComponent({
     })
     const fullScreen = ref(false)
     const searchModal = ref(false)
+    const searchType = ref('case')
+    const searchKey = ref('')
     const handleClick = (key: string) => {
       switch (key) {
         case '3D':
@@ -112,6 +122,9 @@ export default defineComponent({
           break
         case 'search':
           searchModal.value = true
+          searchKey.value = ''
+          searchType.value = 'case'
+          store.dispatch('getCaseList')
           break
         case 'in':
         case 'out':
@@ -127,8 +140,6 @@ export default defineComponent({
           break
       }
     }
-    const searchType = ref('case')
-    const searchKey = ref('')
     const caseList = computed(() => store.state.caseList)
     const options = computed(() => {
       if (curViewType.value === 'street') {
@@ -151,6 +162,45 @@ export default defineComponent({
       [() => curViewType.value, () => store.state.curMapType],
       () => (checkboxValues.value = [])
     )
+
+    const handleSearch = () => {
+      const address = searchKey.value
+      store.dispatch('getCaseList', address)
+    }
+    const getStyle = (type: string): string => {
+      switch (type) {
+        case '小区':
+          return 'green'
+        case '街面':
+          return 'yellow'
+        case '综合':
+          return 'blue'
+        default:
+          return ''
+      }
+    }
+
+    const caseModal = ref(false)
+    const communityInfo = ref(null)
+    const propertyInfo = ref(null)
+    const caseInfo = ref(null)
+    const handleSelect = async (item: any) => {
+      const { content } = (
+        await ajax.get({ url: `${api.GET_CASE_DETAIL}/${item.id}` })
+      ).data
+      propertyInfo.value = content
+      if (item.communityId) {
+        const { content } = (
+          await ajax.get({
+            url: api.GET_COMMUNITY_DETAIL,
+            params: { sectId: item.communityId },
+          })
+        ).data
+        communityInfo.value = content && content[0]
+      }
+      caseModal.value = true
+    }
+
     return {
       btns,
       fullScreen,
@@ -163,6 +213,13 @@ export default defineComponent({
       checkboxValues,
       handleChange,
       curViewType,
+      handleSearch,
+      getStyle,
+      handleSelect,
+      caseModal,
+      communityInfo,
+      propertyInfo,
+      caseInfo,
     }
   },
 })
@@ -252,48 +309,37 @@ $bg = rgba(6,34,67,.4)
       font-weight bold
       text-decoration underline
 .modal-case-content
+  max-height 60vh
+  overflow-y auto
+  overflow-x hidden
   >div
-    position relative
-    padding .1rem
-    border $border
-    border-left .02rem solid $secondary-color
-    margin-bottom .1rem
-    overflow hidden
-    &.done
-      border-left-color #27C5A2
-      .flag
-        background #27C5A2
-    >div
-      &:nth-of-type(1)
-        border-bottom $border
-        padding-bottom .1rem
-        margin-bottom .1rem
-        p
-          span
-            display inline-block
-            color orange
-            border .01rem solid orange
-            border-radius .02rem
-            margin-right .1rem
-            padding 0 .03rem
-            font-size .08rem
-          &:last-child
-            color #aaa
-            font-size .08rem
-            margin-top .05rem
-    .flag
-      background $secondary-color
-      position absolute
-      top -0.08rem
-      right -0.28rem
-      transform rotate(45deg)
-      height .4rem
-      width .8rem
-      display flex
-      align-items flex-end
-      justify-content center
-      font-weight bold
-      padding-bottom .02rem
+    display flex
+    align-items center
+    background $table-content-bg
+    padding .04rem
+    box-sizing border-box
+    cursor pointer
+    &:nth-of-type(odd)
+      background transparent
+    &:hover
+      background $table-content-title
+      color $secondary-color
+    >span
+      display inline-block
+      border .01rem solid #fff
+      border-radius .02rem
+      font-size .08rem
+      padding 0 .02rem
+      margin-right .1rem
+      &.yellow
+        color $yellow
+        border-color @color
+      &.green
+        color $green
+        border-color @color
+      &.blue
+        color $blue
+        border-color @color
 </style>
 <style lang="stylus" scoped>
 .map-btns

src/view/components/sub-title.vue

 <template>
   <div class="sub-title">
     <p><slot /></p>
-    <span />
+    <img src="@/assets/images/title-dec.png" />
     <p @click="clickSecTitle"><slot name="secTitle" /></p>
   </div>
 </template>
@@ -31,12 +31,9 @@ export default defineComponent({
   align-items center
   margin 0.04rem 0
   p
-    color $secondary-color
-    margin-right 0.1rem
-    font-weight bold
-  span
-    flex 1
-    display block
-    height 0.01rem
-    background $primary-border
+    font-size .12rem
+    font-family $font-zcool
+  img
+    width .26rem
+    margin-left .1rem
 </style>

src/view/drawers/case-drawer.vue

 <template>
   <div class="case-drawer">
-    <m-card title="房屋档案">
+    <m-card title="相关案件">
       <SubTitle>小区信息</SubTitle>
       <m-form
         :template="[
-          'name:小区名称',
+          'stNameFrst:小区名称',
           'address:小区地址',
-          'belong:所属居委会',
-          'buildingNum:总门牌幢数',
-          'roomNum:总户数',
-          'buidlingArea:总建筑面积',
-          'area:占地面积',
-          'rang:小区四至范围',
-          'excludeRang:小区四至范围不包括',
+          'cmtName:所属居委会',
+          'totUnits:总门牌幢数',
+          'totHous:总户数',
+          'stCnstArea:总建筑面积',
+          'landArea:占地面积',
+          'range:小区四至范围',
+          'stNotcsparea:小区四至范围不包括',
         ]"
-        :data="formData"
+        :data="communityData"
         label-width="1.4rem"
       />
       <SubTitle>物业信息</SubTitle>
       <m-form
         :template="[
-          'name:小区名称',
-          'address:小区地址',
-          'belong:所属居委会',
-          'buildingNum:总门牌幢数',
-          'roomNum:总户数',
-          'buidlingArea:总建筑面积',
-          'area:占地面积',
-          'rang:小区四至范围',
-          'excludeRang:小区四至范围不包括',
+          'cspName:物业企业名称',
+          'hpbName:注册区县',
+          'registerAddress:注册地址',
+          'orgCode:组织机构代码',
+          'legalRepName:法人代表',
+          'cspContacter:企业联系人',
+          'cspTel:企业联系人电话',
+          'cspFax:企业联系人传真',
+          'bizLicenseValidDate:营业执照有效期',
+          'bizLicenseCode:营业执照号',
         ]"
-        :data="formData"
+        :data="propertyData"
         label-width="1.4rem"
       />
     </m-card>
@@ -56,7 +57,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, PropType, ref } 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'
@@ -64,7 +65,45 @@ import detail2 from '@/assets/images/case-detail2.png'
 export default defineComponent({
   name: 'CaseDrawer',
   components: { SubTitle },
-  setup() {
+  props: {
+    communityInfo: {
+      type: Object as PropType<{ [key: string]: any }>,
+      required: true,
+    },
+    propertyInfo: {
+      type: Object as PropType<{ [key: string]: any }>,
+      required: true,
+    },
+    caseInfo: {
+      type: Object as PropType<{ [key: string]: any }>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const communityData = computed(() => {
+      const { communityInfo, propertyInfo } = 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]
+          : ''
+      )
+
+      return {
+        ...communityInfo,
+        address: propertyInfo.address,
+        range: range.join('，'),
+      }
+    })
+    const propertyData = computed(() => {
+      console.log(props.propertyInfo)
+      return props.propertyInfo
+    })
     const formData = ref({
       name: '测试文字',
       address: '测试文字',
@@ -106,6 +145,8 @@ export default defineComponent({
       },
     ])
     return {
+      communityData,
+      propertyData,
       formData,
       details,
     }

src/view/right/beauty-home.vue

@@ -24,16 +24,27 @@
       <m-sub2>马桶改造</m-sub2>
       <Brief :list="toiletSituation" color="#fff" />
       <m-progress
-        :value="80"
+        :value="
+          Math.round(
+            (toiletSituation[0].value / toiletSituation[1].value) * 100
+          )
+        "
         :color="['rgba(253,211,116,.15)', '#F7933E']"
-        :msg="{ value: 80, unit: '%', name: '改造进度', color: '#fff' }"
+        :msg="{
+          value: Math.round(
+            (toiletSituation[0].value / toiletSituation[1].value) * 100
+          ),
+          unit: '%',
+          name: '改造进度',
+          color: '#fff',
+        }"
       />
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import store from '@/store'
 import icon31 from '@/assets/images/icon31.png'
@@ -74,9 +85,14 @@ export default defineComponent({
       console.log(`美丽街区-加装电梯-${name}区域电梯列表`, content)
     }
     const toiletSituation = ref<BriefProp[]>([
-      { name: '已完成改造', value: 26, icon: icon35 },
-      { name: '应改造', value: 64, icon: icon36 },
+      { name: '已完成改造', value: 0, icon: icon35 },
+      { name: '应改造', value: 0, icon: icon36 },
     ])
+    onMounted(async () => {
+      const { content } = (await ajax.get({ url: api.GET_TOILET })).data
+      toiletSituation.value[0].value = content.completeNum
+      toiletSituation.value[1].value = content.totalNum
+    })
     const workStationProjects = ref([
       { name: '架空线梳理', value: 16 },
       { name: '店招店牌美化', value: 26 },

src/view/right/business-entry.vue

 <template>
   <m-card title="业务入口" :mode="mode">
     <div class="content">
-      <div
-        v-for="entry in entrys"
-        :key="entry.type"
-        @click="routeTo(entry.type)"
-      >
-        {{ entry.name }}
+      <div v-for="entry in entrys" :key="entry.url" @click="routeTo(entry.url)">
+        {{ entry.inputName }}
       </div>
     </div>
   </m-card>
@@ -25,15 +21,14 @@ export default defineComponent({
     },
   },
   setup() {
-    const entrys = computed(() => store.state.communityOptions)
+    const entrys = computed(() => store.state.entry)
     const router = useRouter()
-    const routeTo = (id: string) => {
-      router.push({
-        name: 'community',
-        query: {
-          id,
-        },
-      })
+    const routeTo = (url: string) => {
+      if (url.includes('http')) {
+        window.open(url, '_blank')
+      } else {
+        router.push(url)
+      }
     }
     return {
       entrys,

src/view/right/case-analysis.vue

@@ -62,6 +62,7 @@ export default defineComponent({
         rate: +Math.ceil((item.num / total) * 100).toFixed(0),
         value: item.num,
       }))
+      // return [c, a, b]
     })
 
     const placeList = computed(() => {

src/view/right/complain.vue

@@ -87,13 +87,6 @@ export default defineComponent({
         communityNum = 0,
       } = rank.value
       return [
-        {
-          name: '街面管理',
-          value: streetDispatchNum,
-          percent: streetNum
-            ? Math.floor((streetDispatchNum / streetNum) * 100)
-            : 0,
-        },
         {
           name: '综合管理',
           value: communityNum,
@@ -101,6 +94,13 @@ export default defineComponent({
             ? Math.floor(comprehensiveDispatchNum / comprehensiveNum) * 100
             : 0,
         },
+        {
+          name: '街面管理',
+          value: streetDispatchNum,
+          percent: streetNum
+            ? Math.floor((streetDispatchNum / streetNum) * 100)
+            : 0,
+        },
         {
           name: '小区管理',
           value: communityDispatchNum,
@@ -111,67 +111,67 @@ export default defineComponent({
       ]
     })
 
-    const classChartData = ref({
-      dimensions: [
-        { name: 'class1', displayName: '分类1', max: 100 },
-        { name: 'class2', displayName: '分类2', max: 100 },
-        { name: 'class3', displayName: '分类3', max: 100 },
-      ],
-      source: [
+    const classChartData = computed(() => {
+      const data = classificationRank.value
+      if (!data || data.length === 0) return { dimensions: null, source: null }
+      const source: any = [
         {
           seriesName: '分类排行',
           class1: 0,
           class2: 0,
           class3: 0,
         },
-      ],
-    })
-
-    // 监听年份切花更改检查楼数  隐患点数 危险点数
-    watch(
-      () => classificationRank.value,
-      (data) => {
-        if (!data || data.length === 0) return
-        const source: any = [
-          {
-            seriesName: '分类排行',
-            class1: 0,
-            class2: 0,
-            class3: 0,
-          },
-        ]
-        const dimensions = data.map((item, index) => {
-          const name = `class${index + 1}`
-          source[0][name] = item.num
-          return {
-            name,
-            displayName: item.managementType,
-            max: 150,
-          }
-        })
-        classChartData.value = {
-          dimensions,
-          source,
+      ]
+      const [a, b, c] = data.map((item, index) => {
+        const name = `class${index + 1}`
+        source[0][name] = item.num
+        return {
+          name,
+          displayName: item.managementType,
+          max: 150,
         }
-      },
-      { immediate: true }
-    )
+      })
+      const dimensions = [c, a, b]
+      return {
+        dimensions,
+        source,
+      }
+    })
 
-    const responseChartData = ref({
-      dimensions: [
+    // const responseChartData = ref({
+    //   dimensions: [
+    //     { name: 'name', displayName: '坐标名' },
+    //     { name: 'data1', displayName: '今日新增及存量' },
+    //     { name: 'data2', displayName: '今日派单处置' },
+    //   ],
+    //   source: [
+    //     { name: '09-10', data1: 100, data2: 10 },
+    //     { name: '20-11', data1: 110, data2: 20 },
+    //     { name: '11-12', data1: 120, data2: 30 },
+    //     { name: '12-13', data1: 130, data2: 40 },
+    //     { name: '13-14', data1: 140, data2: 50 },
+    //     { name: '14-15', data1: 150, data2: 60 },
+    //     { name: '15-16', data1: 150, data2: 100 },
+    //   ],
+    // })
+    const responseChartData = computed(() => {
+      const data = store.state.responsivity
+      const dimensions = [
         { name: 'name', displayName: '坐标名' },
-        { name: 'data1', displayName: '今日新增及存量' },
-        { name: 'data2', displayName: '今日派单处置' },
-      ],
-      source: [
-        { name: '09-10', data1: 100, data2: 10 },
-        { name: '20-11', data1: 110, data2: 20 },
-        { name: '11-12', data1: 120, data2: 30 },
-        { name: '12-13', data1: 130, data2: 40 },
-        { name: '13-14', data1: 140, data2: 50 },
-        { name: '14-15', data1: 150, data2: 60 },
-        { name: '15-16', data1: 150, data2: 100 },
-      ],
+        { name: 'data1', displayName: '总数' },
+        { name: 'data2', displayName: '派遣数' },
+      ]
+      if (!data || data.length === 0) return { dimensions, source: [] }
+      const source = data.reverse().map((item: any) => {
+        const date = item.date && item.date.split('-')
+        const { totalNum = 0, reachNum = 0 } = item.statistical || {}
+        return {
+          name: `${date[1]}-${date[2]}`,
+          data1: totalNum,
+          data2: reachNum,
+        }
+      })
+      return { dimensions, source }
     })
     const chartOption = ref<ChartTypes.ECOption>({
       color: ['#6BE1B2', '#FFCE34'],
@@ -180,6 +180,11 @@ export default defineComponent({
         itemWidth: fontSize.value,
         itemHeight: fontSize.value * 0.8,
       },
+      xAxis: {
+        axisLabel: {
+          interval: 0,
+        },
+      },
     })
 
     const chartOption2 = ref({
@@ -240,17 +245,18 @@ export default defineComponent({
         &.wrapper
           display flex
           >div
-            width 50%
+            width 46%
             height 100%
             &:first-child
               $center()
               flex-direction column
+              font-size .12rem
               p
-                width 60%
+                width 50%
                 margin 0 auto
                 .count
                   font-family $font-barlow
-                  font-size .12rem
+                  font-size .16rem
                   margin-left .1rem
   .emergency
     height 1.22rem

src/view/right/demand.vue

@@ -33,7 +33,13 @@
       </div>
     </div>
     <div class="case-follow">
-      <m-sub2>事件跟踪</m-sub2>
+      <m-sub2
+        search-able
+        @search="searchKey = $event"
+        @close="searchKey = null"
+      >
+        跟踪
+      </m-sub2>
       <m-empty
         v-if="!trackEvent || trackEvent.length === 0"
         style="height: 1.8rem"
@@ -75,7 +81,14 @@ export default defineComponent({
     const stageCase = computed(() => store.state.stageCase)
     const workstationKind = computed(() => store.state.workstationKind)
     const pieDatamodel = computed(() => store.state.workstationKindPiEData)
-    const trackEvent = computed(() => store.state.trackEvent)
+
+    const searchKey = ref('')
+    const trackEvent = computed(() => {
+      const data = store.state.trackEvent
+      return searchKey.value
+        ? data.filter((item: any) => item.address.includes(searchKey.value))
+        : data
+    })
 
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curTheme === 'manage')
@@ -230,9 +243,6 @@ export default defineComponent({
       ]
     })
     const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
-    const searchCase = (key: string) => {
-      console.log('searck key: ', key)
-    }
 
     return {
       summary,
@@ -242,9 +252,8 @@ export default defineComponent({
       barOption,
       pieData,
       steps,
-      // caseList,
-      searchCase,
       todayCase,
+      searchKey,
       trackEvent,
       workstationKind,
     }

src/view/right/ecology.vue

 <template>
   <m-card title="生态">
     <div class="detail">
-      <div v-for="item in ecologyList" :key="item.labelName">
+      <div
+        v-for="item in ecologyList"
+        :key="item.labelName"
+        @click="getPoints(item.labelName)"
+      >
         <m-count class="count orange-count" :value="item.num" />
         <p>{{ item.labelName }}</p>
       </div>
@@ -134,12 +138,14 @@ export default defineComponent({
     const photos2 = computed(() =>
       photosList.value.filter((e) => e.buildingType.includes('文保'))
     )
+    const getPoints = (name: string) => store.dispatch('getEcologyPoints', name)
     return {
       ecologyList,
       sumList,
       businessPhotos,
       photos1,
       photos2,
+      getPoints,
     }
   },
 })
@@ -155,6 +161,10 @@ export default defineComponent({
   >div
     $center()
     width 25%
+    cursor pointer
+    &:hover
+      color #FF8635
+      font-weight bold
   .count
     font-size .14rem
     font-family $font-barlow
@@ -165,7 +175,7 @@ export default defineComponent({
   >div
     display flex
     align-items center
-    width 33.3%
+    width 25%
     margin .02rem 0
     img
       width .26rem

src/view/right/emergency-store.vue

@@ -71,10 +71,8 @@
   </m-card>
   <m-modal
     v-model="listModal"
-    enter="fadeInRight"
-    leave="fadeOutRight"
-    offset="65%"
     width="40%"
+    offset="60%"
     title="重点关注楼宇清单"
     :mask-closable="false"
   >

src/view/right/police.vue

@@ -45,7 +45,7 @@
       offset="-50%"
       enter="fadeInUp"
       leave="fadeOutDown"
-      translate-y="84%"
+      translate-y="100%"
       :mask-closable="false"
       :title="`${streetData.cmtName}2021年1季度得分`"
     >