公共设施（菜场药店便利店暂时无法和小区关联上）

505cfdf2 · 郭铭瑶 · 0184d012 · 505cfdf2 · 505cfdf2 · 505cfdf2
Commit 505cfdf2 authored Jun 18, 2021 by 郭铭瑶 🤘
8 changed files
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 <body>
  <div id="app"></div>
-  <script src="/dev/SMap.min.js"></script>
+  <script src="/SMap.min.js"></script>
  <script src="/Plugins.min.js"></script>
  <script src="/hls.js"></script>
  <script type="module" src="/src/main.ts"></script>

--- a/src/ajax/api.ts
+++ b/src/ajax/api.ts
@@ -34,6 +34,11 @@ export default {
  GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
  GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
  GET_CASE_DETAIL: '/service-special-nandong/compair', // 案件详情
+  GET_MARKETS: '/service-special-nandong/vegetableMarkets', // 菜场、药店、便利店
+  GET_DUNGS: '/service-special-nandong/urDungs', // 倒粪口
+  GET_BINS: '/service-special-nandong/internalDustbins', // 垃圾箱
  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', // 公共安全-右侧-实有人口

--- a/src/assets/images/default.jpeg
+++ b/src/assets/images/default.jpeg
--- a/src/components/MyComponent/MyTable/my-table.vue
+++ b/src/components/MyComponent/MyTable/my-table.vue
@@ -140,7 +140,7 @@ export default defineComponent({
      if (formatter && key.match(/>(\w*)[#:]?/)) {
        return formatter[RegExp.$1](data[dataKey], data)
      }
-      return data[dataKey] || ''
+      return data[dataKey] || '无'
    }
    return {
      layout,

--- a/src/view/components/person-list.vue
+++ b/src/view/components/person-list.vue
@@ -25,7 +25,7 @@
 </template>
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue'
+import { defineComponent, nextTick, PropType, ref, watch } from 'vue'
 import empty from '@/assets/images/empty.png'
 import { ajax, api } from '@/ajax'
 import store from '@/store'
@@ -74,6 +74,7 @@ export default defineComponent({
            data.value = content
          }
        }
+        await nextTick()
        store.commit('SET_LOADING', false)
      },
      { immediate: true }

--- a/src/view/components/sub-tabs.vue
+++ b/src/view/components/sub-tabs.vue
+<template>
+  <div class="tabs-container">
+    <div
+      v-for="tab in list"
+      :key="tab.key"
+      :class="{ on: curTabKey === tab.key }"
+      @click.prevent="handleSelect(tab.key)"
+    >
+      <p>{{ tab.name }}</p>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue'
+export interface TabsProp {
+  name: string
+  key: string
+}
+export default defineComponent({
+  name: 'SubTabs',
+  props: {
+    list: {
+      type: Array as PropType<TabsProp[]>,
+      required: true,
+    },
+  },
+  emits: ['select'],
+  setup(props, ctx) {
+    const curTabKey = ref(props.list[0].key)
+    const handleSelect = (key: string) => {
+      curTabKey.value = key
+      ctx.emit('select', key)
+    }
+    return {
+      curTabKey,
+      handleSelect,
+    }
+  },
+})
+</script>
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.tabs-container
+  display flex
+  width 100%
+  margin .05rem 0
+  >div
+    display flex
+    align-items center
+    cursor pointer
+    color #aaa
+    font-size .1rem
+    transition color .1s ease
+    margin-right .1rem
+    &.on
+    &:hover
+      color #fff
+    &.on
+      &:before,
+      &:after
+        content ''
+        display inline-block
+        width .16rem
+        height @width
+        background url('@/assets/images/modal-head-tri.png') 100% / 100% 100% no-repeat
+      &:after
+        transform rotate(180deg)
+    p
+      padding 0 .05rem
+      flex 1
+</style>
--- a/src/view/drawers/community-drawer.vue
+++ b/src/view/drawers/community-drawer.vue
@@ -10,12 +10,13 @@
        class="basic-info"
        :template="[
          'stNameFrst:小区名称',
-          'address:小区地址|cmtName:所属居委会',
+          'addrFrst:小区地址|cmtName:所属居委会',
          'totUnits:总门牌幢数|totHous:总户数',
-          'stCnstArea:总建筑面积|landArea:占地面积',
+          'stCnstArea:总建筑面积>area|landArea:占地面积>area',
          'range:小区四至范围|stNotcsparea:四至范围不包括',
        ]"
        :data="communityData"
+        :formatter="formatter"
        label-width="1.2rem"
      />
      <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
@@ -36,7 +37,7 @@
          <div
            v-if="
              communityInfo.buildingList &&
-              communityInfo.buildingList.length > 0
+                communityInfo.buildingList.length > 0
            "
            class="building-list"
          >
@@ -118,7 +119,7 @@
            </a-select-option>
          </a-select>
        </div>
-        <div v-if="deviceList.length > 0" class="device-table">
+        <div v-if="deviceList.length > 0" class="wrapper">
          <m-table
            :template="[
              '序号|安装位置*2|名称*2|类型|维保单位*3',
@@ -130,22 +131,75 @@
        <m-empty v-else />
      </template>
      <template v-else-if="curTab === 'public'">
-        <m-empty />
+        <div class="select-bar">
+          <a-select
+            v-model:value="publicType"
+            dropdown-class-name="device-selector-drop-down"
+          >
+            <a-select-option
+              v-for="option in publicOptions"
+              :key="option.type"
+              :value="option.type"
+            >
+              {{ option.name }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div v-if="publicList.length > 0" class="wrapper">
+          <template v-if="publicType === '倒粪'">
+            <SubTabs
+              :list="
+                publicList.map((_, i) => ({ name: `倒粪口${i + 1}`, key: i }))
+              "
+              @select="curSubtabKey = $event"
+            />
+            <m-form
+              :template="[
+                'installAddr:地址|ownership:所有权',
+                'buildingArea:建筑面积>area|type:组织架构>structure',
+                'water:排水>water|servePersonNum:服务人数',
+                'stratTime:服务时间段|serveHouseholdNum:服务户数',
+                'trashNum:垃圾桶数|photo:照片#image',
+              ]"
+              :data="publicList[curSubtabKey]"
+              label-width="1.2rem"
+              :formatter="formatter"
+            />
+          </template>
+          <div v-else-if="publicType === '垃圾'" class="box">
+            <div v-for="item in publicList" :key="item.id">
+              <div>
+                <p>{{ item.dutyPersonnel }} {{ item.phone }}</p>
+                <p>{{ item.addr }}</p>
+              </div>
+            </div>
+          </div>
+          <!-- <m-table
+            v-if="publicType === '充电'"
+            :template="[
+              '序号|安装位置*2|名称*2|类型|维保单位*3',
+              'index|ieAddr|ieName|ieType|ieUnit',
+            ]"
+            :data="publicList"
+          /> -->
+        </div>
+        <m-empty v-else />
      </template>
    </m-card>
  </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, PropType, computed } from 'vue'
+import { defineComponent, ref, PropType, computed, watch } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
+import SubTabs from '../components/sub-tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import CaseList from '../components/case-list.vue'
 import { ajax, api } from '@/ajax'
 export default defineComponent({
  name: 'CommunityDrawer',
-  components: { Tabs, SubTitle, CaseList },
+  components: { Tabs, SubTitle, CaseList, SubTabs },
  props: {
    communityInfo: {
      type: Object as PropType<{ [key: string]: any } | null>,
@@ -191,7 +245,7 @@ export default defineComponent({
      },
    ])
    const communityData = computed(() => {
-      const { communityInfo = {}, caseInfo = [] } = props
+      const { communityInfo = {} } = props
      const keys = [
        { name: '北', key: 'stCspNorth' },
        { name: '南', key: 'stCspSouth' },
@@ -203,10 +257,8 @@ export default defineComponent({
          ? item.name + communityInfo[item.key]
          : null
      )
      return {
        ...communityInfo,
-        address: caseInfo && caseInfo[0] && caseInfo[0].address,
        range: range.filter((e) => e !== null).join('，'),
      }
    })
@@ -226,11 +278,11 @@ export default defineComponent({
    const deviceType = ref('大门')
    const deviceOptions = ref([
-      { name: '大门', type: 'gate' },
+      { name: '大门' },
-      { name: '监控', type: 'monitor' },
+      { name: '监控' },
-      { name: '防盗门', type: 'security' },
+      { name: '防盗门' },
-      { name: '电梯', type: 'elevator' },
+      { name: '电梯' },
-      { name: '消防泵', type: 'fire' },
+      { name: '消防泵' },
    ])
    const deviceList = computed(() => {
      const { deviceList: list } = props.communityInfo as any
@@ -240,6 +292,88 @@ export default defineComponent({
        .map((e: any, i: number) => ({ index: i + 1, ...e }))
    })
+    const publicList = ref([])
+    const publicType = ref('倒粪')
+    const publicOptions = ref([
+      { name: '倒粪口', type: '倒粪' },
+      { name: '垃圾箱', type: '垃圾' },
+      { name: '菜场菜店', type: '菜' },
+      { name: '药店药房', type: '药' },
+      { name: '便利店', type: '便利' },
+      { name: '充电桩', type: '充电' },
+    ])
+    const curSubtabKey = ref('0')
+    watch(
+      () => publicType.value,
+      async (type) => {
+        curSubtabKey.value = '0'
+        const markets = ['菜', '药', '便利']
+        if (markets.includes(type)) {
+          const { content } = (
+            await ajax.get({
+              url: api.GET_MARKETS,
+              params: {
+                pageSize: 1000,
+                labelName_l: type,
+              },
+            })
+          ).data
+          publicList.value = content || []
+        } else if (type === '倒粪') {
+          const { content } = (
+            await ajax.get({
+              url: api.GET_DUNGS,
+              params: {
+                pageSize: 1000,
+                sectIds: (communityData.value as any).sectId,
+              },
+            })
+          ).data
+          publicList.value = content || []
+        } else if (type === '垃圾') {
+          const { content } = (
+            await ajax.get({
+              url: api.GET_BINS,
+              params: {
+                pageSize: 1000,
+                sectId: (communityData.value as any).sectId,
+              },
+            })
+          ).data
+          publicList.value = content || []
+        } else {
+          publicList.value = []
+        }
+      },
+      { immediate: true }
+    )
+    const formatter = {
+      area(val: unknown) {
+        return val ? `${val}㎡` : '无'
+      },
+      structure(val: string, data: any) {
+        return `${val}(${+data.havePourDung === 1 ? '有' : '无'}倒粪口/${
+          +data.haveGarbageRoom === 1 ? '有' : '无'
+        }垃圾箱房/${+data.haveUrinal === 1 ? '有' : '无'}小便池)`
+      },
+      water(_: unknown, data: any) {
+        return `${+data.haveAboveWater === 1 ? '有' : '无'}上水/${
+          +data.haveBelowWater === 1 ? '有' : '无'
+        }下水`
+      },
+    }
+    watch(
+      () => curTab.value,
+      () => {
+        // 重置选项
+        deviceType.value = '大门'
+        publicType.value = '倒粪'
+        curSubtabKey.value = '0'
+      }
+    )
    return {
      curTab,
      tabs,
@@ -250,6 +384,11 @@ export default defineComponent({
      deviceType,
      deviceOptions,
      deviceList,
+      publicList,
+      publicType,
+      publicOptions,
+      curSubtabKey,
+      formatter,
    }
  },
 })
@@ -311,9 +450,28 @@ export default defineComponent({
 .room-table
  max-height 50vh
  overflow-y auto
-.device-table
+.wrapper
  max-height 48vh
  overflow-y auto
+  .box
+    $full()
+    display flex
+    flex-wrap wrap
+    >div
+      width 23.4%
+      height 1rem
+      margin-right .1rem
+      margin-bottom @margin-right
+      background url('@/assets/images/default.jpeg') 100% / 100% 100% no-repeat
+      position relative
+      >div
+        background rgba(0,0,0,0.6)
+        color #fff
+        position absolute
+        left 0
+        right 0
+        bottom 0
+        padding .02rem .05rem
 </style>
 <style lang="stylus">

--- a/src/view/drawers/population-drawer.vue
+++ b/src/view/drawers/population-drawer.vue
@@ -41,13 +41,14 @@
          <m-form
            :template="[
              'stNameFrst:小区名称',
-              'address:小区地址|cmtName:所属居委会',
+              'addrFrst:小区地址|cmtName:所属居委会',
              'totUnits:总门牌幢数|totHous:总户数',
-              'stCnstArea:总建筑面积|landArea:占地面积',
+              'stCnstArea:总建筑面积>area|landArea:占地面积>area',
              'range:小区四至范围|stNotcsparea:四至范围不包括',
            ]"
            :data="communityData"
            label-width="1.2rem"
+            :formatter="formatter"
          />
        </template>
        <template v-else-if="curTab2 === 'room'">
@@ -58,8 +59,9 @@
            </div>
            <div class="room-table">
              <m-table
-                :template="['户室|面积', 'houseNo|houseArea']"
+                :template="['户室|面积', 'houseNo|houseArea>area']"
                :data="buildingRoomList"
+                :formatter="formatter"
              />
            </div>
          </template>
@@ -149,7 +151,7 @@
              </a-select-option>
            </a-select>
          </div>
-          <div v-if="deviceList.length > 0" class="device-table">
+          <div v-if="deviceList.length > 0" class="wrapper">
            <m-table
              :template="[
                '序号|安装位置*2|名称*2|类型|维保单位*3',
@@ -161,7 +163,59 @@
          <m-empty v-else />
        </template>
        <template v-else-if="curTab2 === 'public'">
-          <m-empty />
+          <div class="select-bar">
+            <a-select
+              v-model:value="publicType"
+              dropdown-class-name="device-selector-drop-down"
+            >
+              <a-select-option
+                v-for="option in publicOptions"
+                :key="option.type"
+                :value="option.type"
+              >
+                {{ option.name }}
+              </a-select-option>
+            </a-select>
+          </div>
+          <div v-if="publicList.length > 0" class="wrapper">
+            <template v-if="publicType === '倒粪'">
+              <SubTabs
+                :list="
+                  publicList.map((_, i) => ({ name: `倒粪口${i + 1}`, key: i }))
+                "
+                @select="curSubtabKey = $event"
+              />
+              <m-form
+                :template="[
+                  'installAddr:地址|ownership:所有权',
+                  'buildingArea:建筑面积>area|type:组织架构>structure',
+                  'water:排水>water|servePersonNum:服务人数',
+                  'stratTime:服务时间段|serveHouseholdNum:服务户数',
+                  'trashNum:垃圾桶数|photo:照片#image',
+                ]"
+                :data="publicList[curSubtabKey]"
+                label-width="1.2rem"
+                :formatter="formatter"
+              />
+            </template>
+            <div v-else-if="publicType === '垃圾'" class="box">
+              <div v-for="item in publicList" :key="item.id">
+                <div>
+                  <p>{{ item.dutyPersonnel }} {{ item.phone }}</p>
+                  <p>{{ item.addr }}</p>
+                </div>
+              </div>
+            </div>
+            <!-- <m-table
+              v-if="publicType === '充电'"
+              :template="[
+                '序号|安装位置*2|名称*2|类型|维保单位*3',
+                'index|ieAddr|ieName|ieType|ieUnit',
+              ]"
+              :data="publicList"
+            /> -->
+          </div>
+          <m-empty v-else />
        </template>
      </template>
      <template v-else>
@@ -215,15 +269,16 @@
 </template>
 <script lang="ts">
-import { defineComponent, ref, PropType, computed } from 'vue'
+import { defineComponent, ref, PropType, computed, watch } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
+import SubTabs from '../components/sub-tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import CaseList from '../components/case-list.vue'
 import { ajax, api } from '@/ajax'
 export default defineComponent({
  name: 'PopulationDrawer',
-  components: { Tabs, SubTitle, CaseList },
+  components: { Tabs, SubTitle, CaseList, SubTabs },
  props: {
    communityInfo: {
      type: Object as PropType<{ [key: string]: any } | null>,
@@ -303,11 +358,11 @@ export default defineComponent({
    }
    const houseData = computed(() => {
-      const { communityInfo, buildingInfo, roomInfo, propertyInfo } = props
+      const { communityInfo, buildingInfo, roomInfo } = props
      return { ...communityInfo, ...buildingInfo, ...roomInfo }
    })
    const communityData = computed(() => {
-      const { communityInfo = {}, caseInfo = [] } = props
+      const { communityInfo = {} } = props
      const keys = [
        { name: '北', key: 'stCspNorth' },
        { name: '南', key: 'stCspSouth' },
@@ -322,7 +377,6 @@ export default defineComponent({
      return {
        ...communityInfo,
-        address: caseInfo && caseInfo[0] && caseInfo[0].address,
        range: range.filter((e) => e !== null).join('，'),
      }
    })
@@ -367,6 +421,87 @@ export default defineComponent({
        .filter((e: any) => e.ieClassify.includes(deviceType.value))
        .map((e: any, i: number) => ({ index: i + 1, ...e }))
    })
+    const publicList = ref([])
+    const publicType = ref('倒粪')
+    const publicOptions = ref([
+      { name: '倒粪口', type: '倒粪' },
+      { name: '垃圾箱', type: '垃圾' },
+      { name: '菜场菜店', type: '菜' },
+      { name: '药店药房', type: '药' },
+      { name: '便利店', type: '便利' },
+      { name: '充电桩', type: '充电' },
+    ])
+    const curSubtabKey = ref('0')
+    watch(
+      () => publicType.value,
+      async (type) => {
+        curSubtabKey.value = '0'
+        const markets = ['菜', '药', '便利']
+        if (markets.includes(type)) {
+          const { content } = (
+            await ajax.get({
+              url: api.GET_MARKETS,
+              params: {
+                pageSize: 1000,
+                labelName_l: type,
+              },
+            })
+          ).data
+          publicList.value = content || []
+        } else if (type === '倒粪') {
+          const { content } = (
+            await ajax.get({
+              url: api.GET_DUNGS,
+              params: {
+                pageSize: 1000,
+                sectIds: (communityData.value as any).sectId,
+              },
+            })
+          ).data
+          publicList.value = content || []
+        } else if (type === '垃圾') {
+          const { content } = (
+            await ajax.get({
+              url: api.GET_BINS,
+              params: {
+                pageSize: 1000,
+                sectId: (communityData.value as any).sectId,
+              },
+            })
+          ).data
+          publicList.value = content || []
+        } else {
+          publicList.value = []
+        }
+      },
+      { immediate: true }
+    )
+    const formatter = {
+      area(val: unknown) {
+        return val ? `${val}㎡` : '无'
+      },
+      structure(val: string, data: any) {
+        return `${val}(${+data.havePourDung === 1 ? '有' : '无'}倒粪口/${
+          +data.haveGarbageRoom === 1 ? '有' : '无'
+        }垃圾箱房/${+data.haveUrinal === 1 ? '有' : '无'}小便池)`
+      },
+      water(_: unknown, data: any) {
+        return `${+data.haveAboveWater === 1 ? '有' : '无'}上水/${
+          +data.haveBelowWater === 1 ? '有' : '无'
+        }下水`
+      },
+    }
+    watch(
+      () => curTab.value,
+      () => {
+        // 重置选项
+        deviceType.value = '大门'
+        publicType.value = '倒粪'
+        curSubtabKey.value = '0'
+      }
+    )
    return {
      curTab,
      tabs,
@@ -386,6 +521,11 @@ export default defineComponent({
      deviceType,
      deviceOptions,
      deviceList,
+      publicList,
+      publicType,
+      publicOptions,
+      curSubtabKey,
+      formatter,
    }
  },
 })
@@ -447,9 +587,28 @@ export default defineComponent({
 .room-table
  max-height 38vh
  overflow-y auto
-.device-table
+.wrapper
  max-height 35vh
  overflow-y auto
+  .box
+    $full()
+    display flex
+    flex-wrap wrap
+    >div
+      width 23.4%
+      height 1rem
+      margin-right .1rem
+      margin-bottom @margin-right
+      background url('@/assets/images/default.jpeg') 100% / 100% 100% no-repeat
+      position relative
+      >div
+        background rgba(0,0,0,0.6)
+        color #fff
+        position absolute
+        left 0
+        right 0
+        bottom 0
+        padding .02rem .05rem
 </style>
 <style lang="stylus">