添加快处搜索及详情,小区预警统计点击出列表等

dist/index.html

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

src/view/components/dispose-list.vue

+<template>
+  <div class="case-list" :class="{ 'select-able': selectAble }">
+    <template v-if="list && list.length > 0">
+      <div
+        v-for="(item, i) in list"
+        :key="i"
+        class="case-item"
+        :class="{
+          done: item?.disposalStatus === 'over',
+        }"
+        @click="handleClick(item)"
+      >
+        <div>
+          <p>
+            {{ item.communityName }} | {{ item.buildingAddr }}
+            <span :style="`background:${transType(item.category).color}`">{{
+              transType(item.category).text
+            }}</span>
+          </p>
+        </div>
+        <div v-show="item.acceptTime">{{ item.acceptTime || '无' }}</div>
+        <div v-if="item?.disposalStatus === 'over'" class="flag">已完结</div>
+        <div v-else class="flag">待处置</div>
+      </div>
+    </template>
+    <m-empty v-else :img="empty" hidden-text />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import empty from '@/assets/images/empty.png'
+
+export default defineComponent({
+  name: 'DisposeList',
+  props: {
+    list: {
+      type: Array as PropType<any[] | null>,
+      default: () => {
+        return []
+      },
+    },
+    selectAble: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  emits: ['select'],
+  setup(_, ctx) {
+    const handleClick = (data: unknown) => {
+      ctx.emit('select', data)
+    }
+    const transType = (type: string) => {
+      switch (type) {
+        case 'fire':
+          return {
+            text: '消防通道占用',
+            color: '#2F86EE',
+          }
+        case 'batteryCar':
+          return {
+            text: '电瓶车入梯',
+            color: '#ffd400',
+          }
+        case 'overflowingGarbage':
+          return {
+            text: '垃圾满溢',
+            color: '#00f2ff',
+          }
+        case 'groupRent':
+          return {
+            text: '违规租赁',
+            color: '#F7933E',
+          }
+        case 'highFall':
+          return {
+            text: '高抛隐患',
+            color: '#5BD5FF',
+          }
+        default:
+          return '无'
+      }
+    }
+    return {
+      empty,
+      handleClick,
+      transType,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.case-list
+  width 100%
+  height 100%
+  padding-right .05rem
+  overflow-y auto
+  &.select-able
+    .case-item
+      cursor pointer
+      transition all .1s ease
+      &:hover
+        background rgba(70,83,97,.25)
+        box-shadow none
+  .case-item
+    position relative
+    margin-bottom .08rem
+    padding .05rem .08rem
+    overflow hidden
+    background rgba(70,83,97,.45)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65), inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+    border-radius .04rem
+    &.done
+      .flag
+        background #27C5A2
+    >div
+      &:nth-of-type(1)
+        border-bottom .01rem dotted rgba(91,213,255,.5)
+        margin-bottom .05rem
+        padding-bottom .05rem
+        p
+          width 94%
+          font-size .11rem
+          font-weight bold
+          span
+            display inline-block
+            font-size .08rem
+            padding 0 .1rem
+            border-radius .08rem
+            margin-left .1rem
+            transform skew(-30deg)
+            background gold
+            color #333
+    .flag
+      background $orange
+      position absolute
+      top -0.16rem
+      right -0.36rem
+      transform rotate(45deg)
+      height .4rem
+      width .8rem
+      display flex
+      color #000
+      align-items flex-end
+      justify-content center
+      font-size .08rem
+</style>

src/view/components/person-list.vue

@@ -75,7 +75,8 @@ export default defineComponent({
         } else {
           data.value = []
         }
-      }
+      },
+      { immediate: true }
     )
     const persons = (data: any) => {
       const { personInfo } = data

src/view/components/search-view.vue

@@ -7,6 +7,7 @@
     <a-input-group compact>
       <a-select v-model:value="searchType">
         <a-select-option value="case">案件</a-select-option>
+        <a-select-option value="dispose">快处</a-select-option>
         <a-select-option value="population">人口</a-select-option>
         <a-select-option value="community">小区</a-select-option>
       </a-select>
@@ -23,6 +24,9 @@
       <template v-if="searchType === 'case'">
         <CaseList :list="list" select-able @select="handleSelect" />
       </template>
+      <template v-if="searchType === 'dispose'">
+        <DisposeList :list="list" select-able @select="handleSelect" />
+      </template>
       <template v-else-if="searchType === 'population'">
         <PersonList :list="list" select-able @select="handleSelect" />
       </template>
@@ -39,6 +43,13 @@
       :case-info="caseInfo"
     />
   </m-drawer>
+  <m-drawer v-model="disposeModal">
+    <DisposeDrawer
+      :community-info="communityInfo"
+      :property-info="propertyInfo"
+      :case-info="caseInfo"
+    />
+  </m-drawer>
   <m-drawer v-model="populationModal">
     <PopulationDrawer
       :community-info="communityInfo"
@@ -60,10 +71,12 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue'
 import CaseDrawer from '@/view/drawers/case-drawer.vue'
+import DisposeDrawer from '@/view/drawers/dispose-drawer.vue'
 import PopulationDrawer from '@/view/drawers/population-drawer.vue'
 import CommunityDrawer from '@/view/drawers/community-drawer.vue'
 import { ajax, api } from '@/ajax'
 import CaseList from './case-list.vue'
+import DisposeList from './dispose-list.vue'
 import PersonList from './person-list.vue'
 import CommunityList from './community-list.vue'
 import empty from '@/assets/images/empty.png'
@@ -72,9 +85,11 @@ export default defineComponent({
   name: 'SearchView',
   components: {
     CaseDrawer,
+    DisposeDrawer,
     PopulationDrawer,
     CommunityDrawer,
     CaseList,
+    DisposeList,
     PersonList,
     CommunityList,
   },
@@ -92,6 +107,15 @@ export default defineComponent({
       ).data
       return content
     }
+    const searchDispose = async (address: string, pageSize = 100) => {
+      const { content } = (
+        await ajax.get({
+          url: api.GET_DISCOVER_LIST,
+          params: { pageSize, buildingAddr_l: address },
+        })
+      ).data
+      return content
+    }
     const searchRoom = async (address: string, pageSize = 100) => {
       const { content } = (
         await ajax.get({
@@ -158,11 +182,15 @@ export default defineComponent({
       return content
     }
     const handleSearch = async () => {
+      list.value = []
       const address = searchKey.value
       switch (searchType.value) {
         case 'case':
           list.value = await searchCase(address)
           break
+        case 'dispose':
+          list.value = await searchDispose(address)
+          break
         case 'population':
           list.value = await searchRoom(address)
           break
@@ -177,6 +205,7 @@ export default defineComponent({
     watch(() => searchType.value, handleSearch, { immediate: true })
 
     const caseModal = ref(false)
+    const disposeModal = ref(false)
     const populationModal = ref(false)
     const communityModal = ref(false)
     const communityInfo = ref<any>(null)
@@ -189,6 +218,9 @@ export default defineComponent({
         case 'case':
           await selectCase(item)
           break
+        case 'dispose':
+          await selectDispose(item)
+          break
         case 'population':
           await selectRoom(item)
           break
@@ -220,6 +252,24 @@ export default defineComponent({
       populationModal.value = false
       communityModal.value = false
     }
+    async function selectDispose(data: any) {
+      caseInfo.value = data
+      if (data.communityId) {
+        const content = await searchCommunity(null, data.communityId)
+        communityInfo.value = content && content[0]
+        const cspId = content && content[0] && content[0].cspId
+        if (cspId) {
+          const content = await searchCompany(cspId)
+          propertyInfo.value = content && content[0]
+        }
+      } else {
+        communityInfo.value = {}
+        propertyInfo.value = {}
+      }
+      disposeModal.value = true
+      populationModal.value = false
+      communityModal.value = false
+    }
     async function selectRoom(data: any) {
       roomInfo.value = data
       const content = await searchCase(data.address || data.addr)
@@ -329,6 +379,7 @@ export default defineComponent({
       handleSearch,
       handleSelect,
       caseModal,
+      disposeModal,
       populationModal,
       communityModal,
       communityInfo,

src/view/drawers/dispose-drawer.vue

+<template>
+  <div class="case-drawer">
+    <m-card title="相关案件">
+      <SubTitle>小区信息</SubTitle>
+      <m-form
+        :template="[
+          'stNameFrst:小区名称',
+          'address:小区地址',
+          'cmtName:所属居委会',
+          'totUnits:总门牌幢数',
+          'totHous:总户数',
+          'stCnstArea:总建筑面积',
+          'landArea:占地面积',
+          'range:小区四至范围',
+          'stNotcsparea:小区四至范围不包括',
+        ]"
+        :data="communityData"
+        label-width="1.4rem"
+      />
+      <SubTitle>物业信息</SubTitle>
+      <m-form
+        :template="[
+          'cspName:物业企业名称',
+          'hpbName:注册区县',
+          'registerAddress:注册地址',
+          'orgCode:组织机构代码',
+          'legalRepName:法人代表',
+          'cspContacter:企业联系人',
+          'cspTel:企业联系人电话',
+          'cspFax:企业联系人传真',
+          'bizLicenseValidDate:营业执照有效期',
+          'bizLicenseCode:营业执照号',
+        ]"
+        :data="propertyInfo"
+        label-width="1.4rem"
+      />
+    </m-card>
+    <m-card title="案件详情">
+      <div class="sum">
+        <p>{{ caseInfo.buildingAddr }}</p>
+        <span
+          v-if="caseInfo.category"
+          :style="`background:${transType(caseInfo.category).color}`"
+        >
+          <b>{{ transType(caseInfo.category).text }}</b>
+        </span>
+      </div>
+      <div v-for="item in details" :key="item.title" class="step">
+        <p class="title">
+          <img src="@/assets/images/dot.png" /> {{ item.title }}
+        </p>
+        <div class="content">
+          <p class="sub">{{ item.sub }}</p>
+          <p>{{ item.content || '无' }}</p>
+          <template v-if="item.imgs && item.imgs.length > 0">
+            <template v-for="(img, i) in item.imgs">
+              <img v-if="img" :key="i" :src="'data:image/png;base64,' + img" />
+            </template>
+          </template>
+        </div>
+      </div>
+    </m-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import SubTitle from '../components/sub-title.vue'
+
+export default defineComponent({
+  name: 'DisposeDrawer',
+  components: { 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: Object as PropType<{ [key: string]: any } | null>,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  setup(props) {
+    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.address,
+        range: range.filter((e) => e !== null).join('，'),
+      }
+    })
+    const details = computed(() => {
+      const { caseInfo } = props
+      if (!caseInfo) return []
+      const result = [
+        {
+          title: '受理',
+          sub: `${caseInfo?.acceptTime} | ${caseInfo?.buildingAddr}`,
+          content: caseInfo?.description,
+          imgs: [caseInfo?.alarmPic],
+        },
+      ]
+      if (caseInfo?.disposalStatus === 'over') {
+        result.push({
+          title: `整治 ${
+            caseInfo.disposalOrg ? '· ' + caseInfo.disposalOrg : ''
+          }`,
+          sub: caseInfo?.disposalTime,
+          content: caseInfo?.disposalDescription,
+          imgs: [caseInfo?.donePic],
+        })
+      }
+      return result
+    })
+    const transType = (type: string) => {
+      switch (type) {
+        case 'fire':
+          return {
+            text: '消防通道占用',
+            color: '#2F86EE',
+          }
+        case 'batteryCar':
+          return {
+            text: '电瓶车入梯',
+            color: '#ffd400',
+          }
+        case 'overflowingGarbage':
+          return {
+            text: '垃圾满溢',
+            color: '#00f2ff',
+          }
+        case 'groupRent':
+          return {
+            text: '违规租赁',
+            color: '#F7933E',
+          }
+        case 'highFall':
+          return {
+            text: '高抛隐患',
+            color: '#5BD5FF',
+          }
+        default:
+          return '无'
+      }
+    }
+    return {
+      communityData,
+      details,
+      transType,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.case-drawer
+  display flex
+  justify-content space-between
+  >div
+    width 40%
+    &:last-child
+      width 59%
+  .sum
+    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
+    p
+      font-size .12rem
+      font-weight bold
+    span
+      display inline-block
+      font-size .08rem
+      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
+        background linear-gradient(to right, #64DCFF, #02B2D2)
+  .step
+    background rgba(70,83,97,.45)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
+    padding .05rem .1rem
+    p
+      &.title
+        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 .08rem
+          transform translateX(10%)
+      &.sub
+        color #ccc
+        font-size .09rem
+        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
+      margin-left .05rem
+      >img
+        width 1rem
+        margin-right .05rem
+</style>

src/view/new-community/warning-statistics.vue

@@ -16,7 +16,11 @@
       </div>
     </div>
     <div class="list">
-      <div v-for="item in list" :key="item.name">
+      <div
+        v-for="item in list"
+        :key="item.name"
+        @click="onSelect(item.key, item.name)"
+      >
         <p>
           <i class="dot" />
           {{ item.name }}
@@ -101,6 +105,24 @@
       :src="`data:image/png;base64,${curImgSrc}`"
     />
   </m-modal>
+  <m-modal
+    v-model="discoverModal"
+    width="40%"
+    offset="60%"
+    :title="modalTitle"
+    :mask-closable="false"
+  >
+    <div>
+      <m-table
+        :template="[
+          '序号|预警地址*3|发现时间*4|处置状态*2|处置部门*2|处置时间*4',
+          'index|buildingAddr|acceptTime|disposalStatus>transType|disposalOrg|disposalTime',
+        ]"
+        :data="discoverList"
+        :formatter="{ transType }"
+      />
+    </div>
+  </m-modal>
 </template>
 
 <script lang="ts" setup>
@@ -132,13 +154,12 @@ const sub = ref([
   { name: '人为发现', value: 0 },
 ])
 const list = ref([
-  { name: '电瓶车入梯', value: 0 },
-  { name: '垃圾暴露', value: 0 },
-  { name: '占用消防通道', value: 0 },
-  { name: '垃圾满溢', value: 0 },
-  { name: '高抛隐患', value: 0 },
-  // { name: '易积水预警', value: 0 },
-  { name: '群租', value: 0 },
+  { name: '电瓶车入梯', value: 0, key: '1' },
+  { name: '垃圾暴露', value: 0, key: '// Todo' },
+  { name: '占用消防通道', value: 0, key: '0' },
+  { name: '垃圾满溢', value: 0, key: '2' },
+  { name: '高抛隐患', value: 0, key: '4' },
+  { name: '群租', value: 0, key: '3' },
 ])
 onMounted(() => {
   ajax
@@ -199,14 +220,19 @@ onMounted(() => {
         batteryCar = 0, //电瓶车入梯
         overflowingGarbage = 0, //垃圾满溢
         groupRent = 0, //群租
+        highFall = 0, //高抛
       } = res?.data?.content || {}
       list.value = [
-        { name: '电瓶车入梯', value: batteryCar },
-        { name: '垃圾暴露', value: 0 },
-        { name: '占用消防通道', value: fire },
-        { name: '垃圾满溢', value: overflowingGarbage },
-        { name: '高抛隐患', value: 0 },
-        { name: '群租', value: groupRent },
+        { name: '电瓶车入梯', value: batteryCar, key: '1' },
+        { name: '垃圾暴露', value: 0, key: '// Todo' },
+        { name: '占用消防通道', value: fire, key: '0' },
+        {
+          name: '垃圾满溢',
+          value: overflowingGarbage,
+          key: '2',
+        },
+        { name: '高抛隐患', value: highFall, key: '4' },
+        { name: '群租', value: groupRent, key: '3' },
       ]
     })
 })
@@ -242,6 +268,8 @@ const transName = (type: string) => {
       return '垃圾满溢'
     case 'groupRent':
       return '违规租赁'
+    case 'highFall':
+      return '高抛隐患'
     default:
       return '无'
   }
@@ -254,6 +282,40 @@ const viewImage = (src: string) => {
   curImgSrc.value = src
   showImgageModal.value = true
 }
+
+const discoverList = ref<any[]>([])
+const modalTitle = ref('')
+const discoverModal = ref(false)
+function onSelect(key: string, name: string) {
+  modalTitle.value = name
+  ajax
+    .get({
+      url: api.GET_DISCOVER_LIST,
+      params: {
+        category: key,
+        pageSize: 9000,
+      },
+    })
+    .then((res) => {
+      discoverList.value = (res?.data?.content || [])?.map(
+        (item: any, i: number) => {
+          item.index = i + 1
+          return item
+        }
+      )
+      discoverModal.value = true
+    })
+}
+function transType(type: string) {
+  switch (type) {
+    case 'pending':
+      return '待处置'
+    case 'over':
+      return '已完结'
+    default:
+      return '无'
+  }
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -301,6 +363,11 @@ i.dot
     width 48%
     $box()
     margin .04rem 0 0 .04rem
+    cursor pointer
+    &:hover
+      box-shadow none
+      .dot
+        background $orange
 .wrapper
   flex 1
   display flex