公共安全右侧接口对接

.vscode/settings.json

@@ -19,11 +19,16 @@
   },
   "eslint.options": {
     "extensions": [
-        ".js",
-        ".vue",
-        ".ts",
-        ".tsx"
+      ".js",
+      ".vue",
+      ".ts",
+      ".tsx"
     ]
   },
   "editor.formatOnSave": true,
+  "stylusSupremacy.insertColons": false, // 是否插入冒号
+  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
+  "stylusSupremacy.insertBraces": false, // 是否插入大括号
+  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
+  "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
 }
\ No newline at end of file

src/ajax/api.ts

@@ -15,4 +15,17 @@ export default {
   GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
   GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
   GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
+  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', // 公共安全-右侧-实有人口
+  GET_PUBLICSAFE_HOUSE: '/service-basicdatasync-ddd/resource/count', // 公共安全-右侧-居住房屋
+  GET_PUBLICSAFE_NONRESIDENT:
+    '/service-basicdatasync-ddd/nonResident/statistical', // 公共安全-右侧-非居房屋
+  GET_PUBLICSAFE_TRUE_COMPANY: '/service-special-nandong/company/statistical', // 公共安全-右侧-实有单位
+  GET_PUBLICSAFE_SOS_MATERIAL: '/service-special-nandong/emergencySupplies', // 公共安全-右侧-应急物资储备
+  GET_PUBLICSAFE_OUTHOUSEWALL:
+    '/service-special-nandong/inspection/statistical', // 公共安全-右侧-房屋外立面
+  GET_PUBLICSAFE_BUILDINGS: '/service-special-nandong/inspections', // 公共安全-右侧-重点关注楼宇
+  GET_PUBLICSAFE_PIEDATA: '/service-special-nandong/inspection/getPie', // 公共安全-右侧-房屋外立面饼图
+  GET_PUBLICSAFE_NEWFIND: '/service-special-nandong/noAlert', // 公共安全-右侧-最新发现
 }

src/ajax/axios.ts

@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
   (config) => {
     // 添加token
     config.headers.Authorization =
-      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE3Njg3MTY2LCJqdGkiOiIwMTJmNGRlOC1jZTlkLTQ0NzYtYmQzMC0yMGJlZGQyMjE1Y2QiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTc2Nzk5NjY2Mjd9.eZ1fXintx7bEW1xeglW_10yGje4Bx5qpsCeQPo_0VBm3Di2kb01_0nYX98rtJNloIZVv8mSyZC8dG-xqBbF4i8PtrkvphLvEDLs3ztQu1JckLEswumDx7yVjmOaLo2FegvWskltbYpH32nkG4jU9WgAJSV0MLNe2x9q76rlTP8EyrnOYOEwK2KHW6lszEmZf4YeXHkpaF1XzqwSJCRkplKn6Yv4bmdCGiOxCTX8gGxLaatkv4_uH8g6ji4sUjeS_VIXL1UvuOUrPOLGoVvPv0hxsSe3EPP8MJw7NVYWjT8l_DtXWGHF9kuIGFpU4ILrSEsAN1obqxAQYhoynrk8F3Q'
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4MzA5MjIzLCJqdGkiOiJmODhkY2FhMy1iNGIyLTQ3OGUtYjhmMC1kZTQ5ZWU5NWUxYjciLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzMDIwMjM4NzR9.XRQSEkUuLSh8QmqGkXxFs_rL4jUuVKrYBuWa7E2DK2rYROvAe4ROJnyQAw8yKbTnZVWLwcKjPUqgVVr_OCW0MeY00pq8YaphxZTAlDdcQ88aJ_04l1F29w55n4lWZqIzveAQxOw6-U_0vTCHGzgBKHfUlbAMxG2WR54b1BDL32hqNGPjZcs7VoFZGi6sfiAYWKu8v_KeOe13tE5BelRYBxNklWYfG1npU8tKM6O3K1hANFpDmZRVSN70PQox0oiZHwJR_61RUsFPCbh-4qoI2H3fyiQMdrz7zsxakcAb2GGr0GJGoNpSMpg-qkydmIkdV3O_lFzHt4CMY78TZPg2lg'
     return config
   },
   (error) => {
@@ -37,32 +37,32 @@ interface ParamsProp {
 
 interface RequestOptions {
   method?:
-    | 'GET'
-    | 'get'
-    | 'delete'
-    | 'DELETE'
-    | 'head'
-    | 'HEAD'
-    | 'options'
-    | 'OPTIONS'
-    | 'post'
-    | 'POST'
-    | 'put'
-    | 'PUT'
-    | 'patch'
-    | 'PATCH'
-    | 'purge'
-    | 'PURGE'
-    | 'link'
-    | 'LINK'
-    | 'unlink'
-    | 'UNLINK'
-    | undefined
+  | 'GET'
+  | 'get'
+  | 'delete'
+  | 'DELETE'
+  | 'head'
+  | 'HEAD'
+  | 'options'
+  | 'OPTIONS'
+  | 'post'
+  | 'POST'
+  | 'put'
+  | 'PUT'
+  | 'patch'
+  | 'PATCH'
+  | 'purge'
+  | 'PURGE'
+  | 'link'
+  | 'LINK'
+  | 'unlink'
+  | 'UNLINK'
+  | undefined
   url: string
   params?: ParamsProp
   contentType?:
-    | 'application/json;charset=UTF-8'
-    | 'application/x-www-form-urlencoded;charset=UTF-8'
+  | 'application/json;charset=UTF-8'
+  | 'application/x-www-form-urlencoded;charset=UTF-8'
   showLoading?: boolean
 }
 

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

@@ -13,7 +13,7 @@
       >
         <div
           class="my-modal"
-          :style="`width:${width};transform: translateX(${offset})`"
+          :style="`width:${width};transform: translateX(${offset}) translateY(${translateY})`"
         >
           <span class="edge left-top" />
           <span class="edge right-top" />
@@ -72,6 +72,10 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '0',
     },
+    translateY: {
+      type: String as PropType<string>,
+      default: '0',
+    },
     maskClosable: {
       type: Boolean as PropType<boolean>,
       default: true,
@@ -98,22 +102,22 @@ export default defineComponent({
   right 0
   bottom 0
   left 0
-  background rgba(0,0,0,0.1)
+  background rgba(0, 0, 0, 0.1)
   z-index 9999
   $center()
   .my-modal
     color #fff
     z-index 99999
-    padding .04rem
+    padding 0.04rem
     background transparent
     position relative
     $blur(0.01rem)
     .edge
       display block
       position absolute
-      width .1rem
+      width 0.1rem
       height @width
-      border .01rem solid $secondary-color
+      border 0.01rem solid $secondary-color
       &.left-top
         top 0
         left 0
@@ -136,38 +140,38 @@ export default defineComponent({
         border-top none
     .inner
       $blur()
-      background rgba(6,34,67,.8)
-      border .01rem solid rgba(91,213,255,.3)
+      background rgba(6, 34, 67, 0.8)
+      border 0.01rem solid rgba(91, 213, 255, 0.3)
       head
-        height .28rem
+        height 0.28rem
         background url('@/assets/images/modal-head-bg.png') 100% / 100% 100% no-repeat
         display flex
         align-items center
         position relative
         >p
-          font-size .14rem
+          font-size 0.14rem
           font-family $font-zcool
-          text-indent .14rem
+          text-indent 0.14rem
           line-height 1.5
         >img
-          width .14rem
+          width 0.14rem
           height @width
           position absolute
           &:nth-of-type(1)
-            width .24rem
+            width 0.24rem
             height @width
             left -0.095rem
           &:nth-of-type(2)
-            right .05rem
+            right 0.05rem
             cursor pointer
-            transition transform .3s ease-in-out
+            transition transform 0.3s ease-in-out
             &:hover
               transform rotate(180deg)
       .content
         min-height 30vh
         max-height 80vh
-        padding .1rem
+        padding 0.1rem
         overflow-y auto
         overflow-x hidden
-        font-size .1rem
+        font-size 0.1rem
 </style>

src/store/actions.ts

 import { ajax, api } from '@/ajax'
 import { Dispatch, Commit } from 'vuex'
+import inImg from '@/assets/images/in.png'
+import china from '@/assets/images/china.png'
+import out from '@/assets/images/out.png'
 
 export default {
   initData({ dispatch }: { dispatch: Dispatch }): void {
@@ -34,4 +37,191 @@ export default {
     const { content } = (await ajax.get({ url: api.GET_STATION })).data
     commit('SET_STATION_LIST', content)
   },
+
+  // 公共服务 - 门岗值守 - 社会物业和直管公房数据
+  async GET_PUBLICSAFE_NEWFIND({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_NEWFIND })
+    ).data
+    console.log(content)
+
+    // commit('SET_PUBLICSAFE_NEWFIND', publicHouse)
+  },
+  // 公共服务 - 门岗值守 - 社会物业和直管公房数据
+  async GET_PUBLICSAFE_RIGHT_GATE({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_RIGHT_GATE })
+    ).data
+    const shehuiwuye: any[] = []
+    const publicHouse: any[] = []
+    function formatData(arr: any[], obj: { [x: string]: any }) {
+      for (const k in obj) {
+        switch (k) {
+          case 'isWatch':
+            arr.push({
+              index: 3,
+              name: '值守处',
+              value: obj[k] || 0,
+            })
+            break
+          case 'isClosed':
+            arr.push({
+              index: 1,
+              name: '已封闭',
+              value: obj[k] || 0,
+            })
+            break
+          case 'addrNum':
+            arr.push({
+              index: 0,
+              name: '出入口',
+              value: obj[k] || 0,
+            })
+            break
+          case 'isSentry':
+            arr.push({
+              index: 2,
+              name: '有门岗处',
+              value: obj[k] || 0,
+            })
+            break
+
+          default:
+            break
+        }
+      }
+      arr.sort((a, b) => {
+        return a.index - b.index
+      })
+    }
+    formatData(shehuiwuye, content.property)
+    formatData(publicHouse, content.publicHouse)
+    commit('SET_PUBLICSAFE_GATESENTRY_SHEHUIWUYE', shehuiwuye)
+    commit('SET_PUBLICSAFE_GATESENTRY_ZHIGUANGONGFANG', publicHouse)
+  },
+  // 公共服务 - 门岗值守 - 平安地图
+  async GET_PUBLICSAFE_RIGHT_SAFEMAP({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_PUBLICSAFE_RIGHT_SAFEMAP,
+        params: { pageSize: 1000 },
+      })
+    ).data
+    commit('SET_PUBLICSAFE_SAFEMAP', content)
+  },
+  // 公共服务 - 实有人口
+  async GET_PUBLICSAFE_TRUE_PEOPLE({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_TRUE_PEOPLE })
+    ).data
+    commit('SET_PUBLICSAFE_TRUE_PEOPLE', content)
+  },
+  // 公共服务 - 实有房屋
+  async GET_PUBLICSAFE_HOUSE({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (await ajax.get({ url: api.GET_PUBLICSAFE_HOUSE })).data
+    commit('SET_PUBLICSAFE_HOUSE', content)
+    const obj = {
+      spf: 0,
+      other: 0,
+      zggf: 0,
+    }
+    content.stKind.forEach((item: { stKindName: string; totHous: number }) => {
+      switch (item.stKindName) {
+        case '商品房':
+          obj.spf = item.totHous
+          break
+        case '直管公房':
+          obj.zggf = item.totHous
+          break
+        default:
+          obj.other += item.totHous
+          break
+      }
+    })
+    commit('SET_PUBLICSAFE_HOUSE_STKIND', content.stKind)
+    commit('SET_PUBLICSAFE_HOUSE_STKIND', obj)
+  },
+  // 公共服务 - 非居房屋
+  async GET_PUBLICSAFE_NONRESIDENT({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_NONRESIDENT })
+    ).data
+    commit('SET_PUBLICSAFE_NONRESIDENT', content)
+  },
+  // 公共服务 - 实有单位
+  async GET_PUBLICSAFE_TRUE_COMPANY({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_TRUE_COMPANY })
+    ).data
+    commit('SET_PUBLICSAFE_TRUE_COMPANY', content)
+  },
+  // 公共服务 - 应急物资储备
+  async GET_PUBLICSAFE_SOS_MATERIAL({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_SOS_MATERIAL })
+    ).data
+    // console.log(content)
+    commit('SET_PUBLICSAFE_SOS_MATERIAL', content)
+  },
+  // 公共服务 - 房屋外立面
+  async GET_PUBLICSAFE_OUTHOUSEWALL({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_OUTHOUSEWALL })
+    ).data
+    console.log(content)
+
+    commit('SET_PUBLICSAFE_OUTHOUSEWALL_2019', content[0])
+    commit('SET_PUBLICSAFE_OUTHOUSEWALL_2020', content[1])
+  },
+  // 公共服务 - 重点关注楼宇
+  async GET_PUBLICSAFE_BUILDINGS({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_PUBLICSAFE_BUILDINGS,
+        params: { pageSize: 1000 },
+      })
+    ).data
+    console.log(content)
+    commit('SET_PUBLICSAFE_BUILDINGS', content)
+  },
+  // 公共服务 - 房屋外立面饼图
+  async GET_PUBLICSAFE_PIEDATA({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_PIEDATA })
+    ).data
+    console.log(content)
+    commit('SET_PUBLICSAFE_PIEDATA', content)
+  },
 }

src/store/index.ts

@@ -16,6 +16,19 @@ export interface GlobalStateProps {
   propertySummary: { [key: string]: number }
   caseList: unknown[]
   stationList: unknown[]
+  pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }
+  pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }
+  pubulicSafeMap: unknown[]
+  pubulicSafeTruePeople: { [key: string]: number }
+  pubulicSafeHouse: { [key: string]: any }
+  pubulicSafeNonResident: { [key: string]: any }
+  pubulicSafeHouseStKind: { [key: string]: number }
+  pubulicSafeTrueCompany: { [key: string]: number }
+  pubulicSafeSOSMaterail: { [key: string]: number }
+  pubulicSafeOutHouseWall2019: { [key: string]: number }
+  pubulicSafeOutHouseWall2020: { [key: string]: number }
+  pubulicSafeBuildings: unknown[]
+  pubulicSafePieData: unknown[]
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

@@ -22,4 +22,95 @@ export default {
   SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void {
     state.stationList = data
   },
+  SET_PUBLICSAFE_GATESENTRY_SHEHUIWUYE(
+    // 公共安全-门岗值守-社会物业
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.pubulicSafeGateSenteryShehuiwuye = data
+  },
+  SET_PUBLICSAFE_GATESENTRY_ZHIGUANGONGFANG(
+    // 公共安全-门岗值守-直管公房
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.pubulicSafeGateSenteryZhiguangongfang = data
+  },
+  SET_PUBLICSAFE_SAFEMAP(
+    // 公共安全-平安地图
+    state: GlobalStateProps,
+    data: unknown[]
+  ): void {
+    state.pubulicSafeMap = data
+  },
+  SET_PUBLICSAFE_TRUE_PEOPLE(
+    // 公共安全-实有人口
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.pubulicSafeTruePeople = data
+  },
+  SET_PUBLICSAFE_HOUSE(
+    // 公共安全-居住房屋
+    state: GlobalStateProps,
+    data: { [key: string]: any }
+  ): void {
+    state.pubulicSafeHouse = data
+  },
+  SET_PUBLICSAFE_NONRESIDENT(
+    // 公共安全-非居房屋
+    state: GlobalStateProps,
+    data: { [key: string]: any }
+  ): void {
+    state.pubulicSafeNonResident = data
+  },
+  SET_PUBLICSAFE_HOUSE_STKIND(
+    // 公共安全-居住房屋-stkind
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.pubulicSafeHouseStKind = data
+  },
+  SET_PUBLICSAFE_TRUE_COMPANY(
+    // 公共安全-实有单位
+    state: GlobalStateProps,
+    data: { [key: string]: any }
+  ): void {
+    state.pubulicSafeTrueCompany = data
+  },
+  SET_PUBLICSAFE_SOS_MATERIAL(
+    // 公共安全-应急物资储备
+    state: GlobalStateProps,
+    data: { [key: string]: any }
+  ): void {
+    state.pubulicSafeSOSMaterail = data
+  },
+  SET_PUBLICSAFE_OUTHOUSEWALL_2019(
+    // 公共安全-房屋外立面
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.pubulicSafeOutHouseWall2019 = data
+  },
+  SET_PUBLICSAFE_OUTHOUSEWALL_2020(
+    // 公共安全-房屋外立面
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.pubulicSafeOutHouseWall2020 = data
+  },
+  SET_PUBLICSAFE_BUILDINGS(
+    // 公共安全-重点关注楼宇
+    state: GlobalStateProps,
+    data: unknown[]
+  ): void {
+    state.pubulicSafeBuildings = data
+  },
+  SET_PUBLICSAFE_PIEDATA(
+    // 公共安全-房屋外立面饼图
+    state: GlobalStateProps,
+    data: unknown[]
+  ): void {
+    state.pubulicSafePieData = data
+  },
 }

src/store/state.ts

@@ -13,4 +13,17 @@ export default {
   propertySummary: {},
   caseList: [],
   stationList: [],
+  pubulicSafeGateSenteryShehuiwuye: {},
+  pubulicSafeGateSenteryZhiguangongfang: {},
+  pubulicSafeMap: [],
+  pubulicSafeTruePeople: {},
+  pubulicSafeHouse: {},
+  pubulicSafeNonResident: {},
+  pubulicSafeHouseStKind: {},
+  pubulicSafeTrueCompany: {},
+  pubulicSafeSOSMaterail: {},
+  pubulicSafeOutHouseWall2019: {},
+  pubulicSafeOutHouseWall2020: {},
+  pubulicSafeBuildings: [],
+  pubulicSafePieData: [],
 } as GlobalStateProps

src/view/components/map-btns.vue

@@ -224,7 +224,7 @@ $bg = rgba(6,34,67,.4)
 .map-btns
   position fixed
   bottom .05rem
-  left calc(16vw + .1rem)
+  left calc(20vw + .1rem)
   transition left .3s ease
   &.full
     left .05rem

src/view/components/sub-title.vue

@@ -2,6 +2,7 @@
   <div class="sub-title">
     <p><slot /></p>
     <span />
+    <p @click="clickSecTitle"><slot name="secTitle" /></p>
   </div>
 </template>
 
@@ -10,6 +11,16 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'SubTitle',
+  emits: ['clicktit'],
+
+  setup(_, ctx) {
+    function clickSecTitle() {
+      ctx.emit('clicktit')
+    }
+    return {
+      clickSecTitle,
+    }
+  },
 })
 </script>
 
@@ -18,14 +29,14 @@ export default defineComponent({
 .sub-title
   display flex
   align-items center
-  margin .04rem 0
+  margin 0.04rem 0
   p
     color $secondary-color
-    margin-right .1rem
+    margin-right 0.1rem
     font-weight bold
   span
     flex 1
     display block
-    height .01rem
+    height 0.01rem
     background $primary-border
 </style>

src/view/components/view-selector.vue

@@ -50,7 +50,7 @@ $height = .26rem
 #view-selector.view-selector
   position fixed
   top .45rem
-  left calc(16vw + .1rem)
+  left calc(20vw + .1rem)
   z-index 99
   .ant-select
     background $bg

src/view/left/command.vue

@@ -2,10 +2,6 @@
   <m-card mode="border">
     <m-card class="card" title="指挥体系">
       <div class="command">
-        <div class="flag">
-          <img src="@/assets/images/zheng.png" />
-          <img src="@/assets/images/jing.png" />
-        </div>
         <div class="leader">
           <div v-for="(item, i) in leaders" :key="i">
             <img :src="item.img" />
@@ -15,50 +11,41 @@
             </div>
           </div>
         </div>
-      </div>
-      <div class="disposal">
-        <m-sub>处置力量</m-sub>
-        <div class="duty">
-          <div>
-            <p>值班人员</p>
-            <p>日间值班 · 08:00 ~ 18:00</p>
-          </div>
-          <span />
-          <div>
-            <p>值班人员</p>
-            <p>夜间值班 · 18:00 ~ 08:00</p>
+        <div class="member">
+          <div v-for="(item, i) in members" :key="i">
+            <div>
+              <p>{{ item.name }}</p>
+              <span>{{ item.type }}</span>
+            </div>
           </div>
         </div>
+      </div>
+      <div class="disposal">
+        <m-sub>网格工作站</m-sub>
         <div class="table">
           <div>
-            <p>工作小组</p>
-            <p>组长</p>
-            <p>电话</p>
-            <p>常驻人数</p>
-            <p>报道制人数</p>
+            <p>网格工作站</p>
+            <p class="thead3">网格长</p>
+            <p>工作时段</p>
+            <p>总人数</p>
           </div>
           <div v-for="(item, i) in dutyTableData" :key="i">
             <p>{{ item.group }}</p>
-            <p>{{ item.leader }}</p>
-            <p>{{ item.phone }}</p>
-            <p>{{ item.number1 }}</p>
-            <p>{{ item.number2 }}</p>
-          </div>
-        </div>
-      </div>
-      <div class="soldier">
-        <m-sub>单兵巡查边量</m-sub>
-        <div class="btns">
-          <div v-for="btn in btns" :key="btn.name">
-            <img :src="btn.icon" />
-            {{ btn.name }}
-          </div>
-        </div>
-        <div class="list">
-          <div v-for="soldier in soldierList" :key="soldier.id">
-            <p>{{ soldier.name }}</p>
-            <p>{{ soldier.phone }}</p>
-            <span>查看点位</span>
+            <p class="doubleRow">
+              <span>
+                <span>日</span>
+                <span>{{ item.leader }}(城管) 、{{ item.leader1 }}(绿化)</span>
+              </span>
+              <span>
+                <span>夜</span>
+                <span>{{ item.leader2 }}(警长)</span>
+              </span>
+            </p>
+            <p class="doubleRow2">
+              <span>{{ item.dayTime }}</span>
+              <span>{{ item.nightTime }}</span>
+            </p>
+            <p>{{ item.number }}人</p>
           </div>
         </div>
       </div>
@@ -105,45 +92,85 @@ export default defineComponent({
       {
         img: avatar1,
         type: '指挥长',
-        name: '姓名',
+        name: '袁登全',
       },
       {
         img: avatar2,
-        type: '指挥长',
-        name: '姓名',
+        type: '副指挥长',
+        name: '卢军',
       },
+      // {
+      //   img: avatar1,
+      //   type: '指挥长',
+      //   name: '姓名',
+      // },
+      // {
+      //   img: avatar2,
+      //   type: '指挥长',
+      //   name: '姓名',
+      // },
+    ])
+    const members = ref([
       {
-        img: avatar1,
-        type: '指挥长',
-        name: '姓名',
+        name: '鲁涵智',
+        type: '社区管理办',
       },
       {
-        img: avatar2,
-        type: '指挥长',
-        name: '姓名',
+        name: '范杲逻',
+        type: '党政办',
+      },
+      {
+        name: '庞勇',
+        type: '社区平安办',
+      },
+      {
+        name: '鲁涵智',
+        type: '社区管理办',
+      },
+      {
+        name: '鲁涵智',
+        type: '社区管理办',
+      },
+      {
+        name: '鲁涵智',
+        type: '社区管理办',
+      },
+      {
+        name: '鲁涵智',
+        type: '社区管理办',
+      },
+      {
+        name: '鲁涵智',
+        type: '社区管理办',
       },
     ])
     const dutyTableData = ref([
       {
-        group: '第一小组',
-        leader: '组长名',
-        phone: '1356249823',
-        number1: 5,
-        number2: 5,
+        group: '第一工作站',
+        leader: '长名',
+        leader1: '人名',
+        leader2: '名2',
+        dayTime: '8时-18时',
+        nightTime: '18时-8时',
+        number: 5,
       },
       {
-        group: '第一小组',
-        leader: '组长名',
-        phone: '1356249823',
-        number1: 5,
-        number2: 5,
+        group: '第二工作站',
+        leader: '长名',
+        leader1: '人名',
+        leader2: '名2',
+        dayTime: '8时-18时',
+        nightTime: '18时-8时',
+        number: 5,
       },
       {
-        group: '第一小组',
-        leader: '组长名',
-        phone: '1356249823',
-        number1: 5,
-        number2: 5,
+        group: '第三工作站',
+        leader: '长名',
+        leader1: '人名',
+        leader2: '名2',
+        dayTime: '8时-18时',
+        nightTime: '18时-8时',
+        number: 5,
       },
     ])
     const btns = ref([
@@ -243,6 +270,7 @@ export default defineComponent({
     ])
     return {
       leaders,
+      members,
       dutyTableData,
       btns,
       soldierList,
@@ -262,117 +290,118 @@ export default defineComponent({
 .card
   flex 1
   &:first-child
-    flex 2.1
+    flex 1.8
 .command
+  flex 1
   display flex
-  .flag
-    display flex
-    flex-direction column
-    justify-content space-around
-    margin 0 .3rem 0 .05rem
-    >img
-      display block
-      width .3rem
-      height @width
-      margin .04rem 0
+  flex-direction column
+  white-space nowrap
   .leader
     display flex
     flex-wrap wrap
     flex 1
+    padding 0.1rem 0
+    border-bottom 1px solid rgba(91, 213, 255, 0.5)
     >div
       width 50%
       display flex
       align-items center
       p
-        font-size .11rem
+        font-size 0.11rem
         font-weight bold
       img
-        width .28rem
+        width 0.28rem
         height @width
-        margin-right .1rem
+        margin-right 0.1rem
       span
         color #ccc
-.disposal
-  .duty
+  .member
     display flex
-    align-items center
-    margin-bottom .05rem
-    >span
-      width .01rem
-      height .14rem
-      margin 0 .2rem
-      background $secondary-color
-    >div
-      flex 1
-      >p
-        &:last-child
-          color #ccc
-.soldier
-  margin .05rem 0
-  .btns
-    display flex
-    justify-content flex-end
+    flex-wrap wrap
+    borde 1px solid red
+    flex 2
     >div
+      width 25%
       display flex
       align-items center
-      color $primary-color
-      margin-left .2rem
-      cursor pointer
-      transition .3s ease-in-out
-      &:hover
-        transform scale(1.1)
-        text-decoration underline
+      p
+        font-size 0.11rem
+        font-weight bold
       img
-        width .1rem
+        width 0.28rem
         height @width
-        margin-right .05rem
-  .list
-    display flex
-    justify-content space-between
-    >div
-      width 30%
-      background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
-      padding .05rem .1rem
-      box-sizing border-box
+        margin-right 0.1rem
       span
-        color $primary-color
-        cursor pointer
-        &:hover
-          text-decoration underline
+        color #ccc
+.disposal
+  flex 1.3
 .party
   display flex
   .content
-    padding-left .1rem
+    padding-left 0.1rem
     flex 1
     &.party
       display flex
       flex-direction column
       justify-content space-around
-      padding-bottom .1rem
+      padding-bottom 0.1rem
     &.economic
       display flex
       >div
         flex 1
 .table
-  border .01rem solid $blue
+  border 0.01rem solid $blue
+  font-size 0.09rem
   >div
     display flex
-    background $table-bg(.15)
+    background $table-bg(0.15)
     &:first-child
       background $table-bg()
     &+div
       border-top inherit
     p
       flex 1
-      line-height 2
-      padding 0 .05rem
+      line-height 4
+      text-align center
       overflow hidden
       text-overflow ellipsis
       white-space nowrap
       &+p
-        border-left .01rem solid $blue
+        border-left 0.01rem solid $blue
       &:nth-of-type(3)
         flex 1.4
       &:last-child
-        flex 1.1
+        flex 0.7
+      &:first-child
+        flex 1.2
+    .thead3
+      flex 2.5
+    .doubleRow
+      flex 2.5
+      line-height 2
+      display flex
+      flex-direction column
+      flex-wrap wrap
+      >span
+        flex 1
+        padding 0
+        margin 0
+        display flex
+        &:first-child
+          flex 0.2
+          border-bottom 0.01rem solid $blue
+        >span
+          flex 1
+          &:first-child
+            width 30px
+            flex 0.2
+            border-right 0.01rem solid $blue
+    .doubleRow2
+      display flex
+      flex-direction column
+      line-height 2
+      >span
+        flex 1
+        &:first-child
+          border-bottom 0.01rem solid $blue
 </style>

src/view/main.vue

 <template>
   <m-grid
     :template="['title title title', 'left . right']"
-    columns="16vw auto 49vw"
+    columns="20vw auto 49vw"
     rows="0.4rem auto"
     gap="0.05rem"
   >
-    <m-title area="title" @click="showDrawer = true">南东城运</m-title>
+    <m-title area="title" @click="showDrawer = false">南东城运</m-title>
     <m-map ref="map" @complete="handleMapComplete" />
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
@@ -96,13 +96,15 @@ export default defineComponent({
     const fullScreen = ref(false)
     const showDrawer = ref(false)
     const map = ref<any>(null)
-    // ajax
-    //   .get({
-    //     url: api.GET_CASE,
-    //   })
-    //   .then((res) => {
-    //     console.log(res)
-    //   })
+
+    ajax
+      .get({
+        url: api.GET_CASE,
+      })
+      .then((res) => {
+        console.log(res)
+      })
+
     const handleMapComplete = () => {
       console.log('complete', map.value)
       map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })

src/view/right/company.vue

 <template>
-  <m-card title="实有单位" :addition="{ value: 10203, unit: '家' }">
+  <m-card
+    title="实有单位"
+    :addition="{ value: trueCompany.companyNum, unit: '家' }"
+  >
     <div class="sum">
       <div v-for="item in sum" :key="item.name">
         <m-count class="count" :value="item.value" />
         <p>
           {{ item.name }}
-          <img v-if="item.icon" :src="item.icon" />
+          <!-- <img v-if="item.icon" :src="item.icon" /> -->
         </p>
       </div>
     </div>
     <div class="content">
       <div v-if="showChart" class="chart">
-        <m-pie :dataset="pieData" :option="pieOption" />
+        <m-pie
+          v-if="showChart && pieData.source[0].value > 0"
+          :dataset="pieData"
+          :option="pieOption"
+        />
       </div>
       <div class="legend">
         <div v-for="(item, i) in pieData.source" :key="item.name">
@@ -36,23 +43,31 @@ import store from '@/store'
 export default defineComponent({
   name: 'Company',
   setup() {
+    store.dispatch('GET_PUBLICSAFE_TRUE_COMPANY')
+    const trueCompany = computed(() => store.state.pubulicSafeTrueCompany)
+
     const showChart = computed(() => store.state.curTheme === 'safety')
-    const sum = ref([
-      { name: '本街道注册', value: 6741 },
-      { name: '境外注册', value: 1658, icon: icon1 },
-      { name: '境内注册', value: 1804, icon: icon1 },
-    ])
-    const pieData = ref({
-      dimensions: [
-        { name: 'name', displayName: '类型' },
-        { name: 'value', displayName: '数量' },
-      ],
-      source: [
-        { name: '事业单位', value: 4591 },
-        { name: '企业单位', value: 4591 },
-        { name: '机关团体', value: 1020 },
-        { name: '其他', value: 899 },
-      ],
+
+    const sum = computed(() => {
+      return [
+        { name: '本街道注册', value: trueCompany.value.thisCity },
+        { name: '境外注册', value: trueCompany.value.outCountry, icon: icon1 },
+        { name: '境内注册', value: trueCompany.value.inCountry, icon: icon1 },
+      ]
+    })
+    const pieData = computed(() => {
+      return {
+        dimensions: [
+          { name: 'name', displayName: '类型' },
+          { name: 'value', displayName: '数量' },
+        ],
+        source: [
+          { name: '事业单位', value: trueCompany.value.institution },
+          { name: '企业单位', value: trueCompany.value.enterprise },
+          { name: '机关团体', value: trueCompany.value.organization },
+          { name: '其他', value: trueCompany.value.other },
+        ],
+      }
     })
     const pieOption = ref({
       color: [
@@ -78,6 +93,7 @@ export default defineComponent({
       sum,
       pieData,
       pieOption,
+      trueCompany,
     }
   },
 })
@@ -88,7 +104,7 @@ export default defineComponent({
 .sum
   display flex
   align-items center
-  margin .05rem 0
+  margin 0.05rem 0
   >div
     flex 1
     text-align center
@@ -102,15 +118,15 @@ export default defineComponent({
         color $blue
         transform translateY(-50%)
     .count
-      font-size .12rem
+      font-size 0.12rem
     p
       color #ccc
-      font-size .09rem
-      text-indent .1rem
+      font-size 0.09rem
+      text-indent 0.1rem
     img
-      width .1rem
+      width 0.1rem
       height @width
-      margin-left .02rem
+      margin-left 0.02rem
 .content
   flex 1
   display flex
@@ -123,7 +139,7 @@ export default defineComponent({
     display flex
     flex-direction column
     justify-content space-around
-    padding 0 .1rem
+    padding 0 0.1rem
     >div
       display flex
       justify-content space-between
@@ -131,16 +147,16 @@ export default defineComponent({
       >p
         &:first-child
           span
-            width .06rem
+            width 0.06rem
             height @width
             display inline-block
             margin-right @width
             border-radius 50%
         &:last-child
           .count
-            font-size .12rem
+            font-size 0.12rem
           .unit
-            font-size .08rem
+            font-size 0.08rem
             color #aaa
-            margin-left .03rem
+            margin-left 0.03rem
 </style>

src/view/right/house.vue

 <template>
-  <m-card title="实有房屋" :addition="{ value: 18980, unit: '幢' }">
+  <m-card
+    title="实有房屋"
+    :addition="{
+      value: allTrueHouse,
+      unit: '幢',
+    }"
+  >
     <div>
-      <m-sub :addition="{ value: 11883, unit: '幢' }">居住房屋</m-sub>
+      <m-sub :addition="{ value: pubulicSafeHouse.house, unit: '幢' }">
+        居住房屋
+      </m-sub>
       <Brief :list="summary" color="#fff" />
       <div class="bar-txt">
         <p>
           <span>2000年前房屋</span>
-          <m-count class="count" :value="5616" />
+          <m-count class="count" :value="pubulicSafeHouse.befor" />
           <span class="unit">幢</span>
         </p>
         <img src="@/assets/images/location.png" />
       </div>
-      <m-progress :value="80" :height="0.1" />
+      <m-progress
+        v-if="allTrueHouse"
+        :value="(pubulicSafeHouse.befor / allTrueHouse) * 100"
+        :height="0.1"
+      />
       <div class="house-types">
         <div v-for="item in houseTypes" :key="item.name">
-          <m-wave :value="item.percent" size=".34rem" />
+          <m-wave v-if="item.percent" :value="item.percent" size=".34rem" />
           <div>
             <m-count class="count" :value="item.value" />
             <p>{{ item.name }}</p>
@@ -23,14 +35,18 @@
       </div>
     </div>
     <div>
-      <m-sub :addition="{ value: 7097, unit: '幢' }">非居房屋</m-sub>
+      <m-sub
+        :addition="{ value: pubulicSafeNonResident.nonResidentNum, unit: '幢' }"
+      >
+        非居房屋
+      </m-sub>
       <Brief :list="houseSum" color="#fff" />
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import icon18 from '@/assets/images/icon18.png'
 import icon19 from '@/assets/images/icon19.png'
@@ -38,42 +54,102 @@ import icon20 from '@/assets/images/icon20.png'
 import icon7 from '@/assets/images/icon7.png'
 import icon21 from '@/assets/images/icon21.png'
 import icon22 from '@/assets/images/icon22.png'
-
+import store from '@/store'
 export default defineComponent({
   name: 'House',
   components: { Brief },
   setup() {
-    const summary = ref<BriefProp[]>([
-      { name: '小区数', value: 65465, icon: icon18 },
-      { name: '物业公司', value: 1648, icon: icon19 },
-      { name: '业委会', value: 56462, icon: icon20 },
-    ])
-    const houseTypes = ref([
-      {
-        name: '商品房',
-        value: 7128,
-        percent: 60,
-      },
-      {
-        name: '直管公房',
-        value: 3564,
-        percent: 30,
-      },
-      {
-        name: '保障房及其他',
-        value: 1188,
-        percent: 15,
-      },
-    ])
-    const houseSum = ref<BriefProp[]>([
-      { name: '门面房', value: 1658, icon: icon7 },
-      { name: '商办', value: 3564, icon: icon21 },
-      { name: '商业综合体', value: 1875, icon: icon22 },
-    ])
+    store.dispatch('GET_PUBLICSAFE_HOUSE')
+    store.dispatch('GET_PUBLICSAFE_NONRESIDENT')
+    const pubulicSafeHouse = computed(() => store.state.pubulicSafeHouse)
+    const pubulicSafeNonResident = computed(
+      () => store.state.pubulicSafeNonResident
+    )
+    const pubulicSafeHouseStKind = computed(
+      () => store.state.pubulicSafeHouseStKind
+    )
+
+    const pubulicSafeHouseStKindNum = computed(() => {
+      let num = 0
+      for (const k in store.state.pubulicSafeHouseStKind) {
+        num += store.state.pubulicSafeHouseStKind[k]
+      }
+      return num
+    })
+
+    const allTrueHouse = computed(
+      () => pubulicSafeHouse.value.nonResident + pubulicSafeHouse.value.house
+    )
+
+    const summary = computed(() => {
+      return [
+        {
+          name: '小区数',
+          value: pubulicSafeHouse.value.community,
+          icon: icon18,
+        },
+        {
+          name: '物业公司',
+          value: pubulicSafeHouse.value.company,
+          icon: icon19,
+        },
+        { name: '业委会', value: pubulicSafeHouse.value.ic, icon: icon20 },
+      ]
+    })
+    const houseTypes = computed(() => {
+      return [
+        {
+          name: '商品房',
+          value: pubulicSafeHouseStKind.value.spf,
+          percent:
+            (pubulicSafeHouseStKind.value.spf /
+              pubulicSafeHouseStKindNum.value) *
+            100,
+        },
+        {
+          name: '直管公房',
+          value: pubulicSafeHouseStKind.value.zggf,
+          percent:
+            (pubulicSafeHouseStKind.value.zggf /
+              pubulicSafeHouseStKindNum.value) *
+            100,
+        },
+        {
+          name: '保障房及其他',
+          value: pubulicSafeHouseStKind.value.other,
+          percent:
+            (pubulicSafeHouseStKind.value.other /
+              pubulicSafeHouseStKindNum.value) *
+            100,
+        },
+      ]
+    })
+    const houseSum = computed(() => {
+      return [
+        {
+          name: '门面房',
+          value: pubulicSafeNonResident.value.others,
+          icon: icon7,
+        },
+        {
+          name: '商办',
+          value: pubulicSafeNonResident.value.commercial,
+          icon: icon21,
+        },
+        {
+          name: '商业综合体',
+          value: pubulicSafeNonResident.value.comprehensive,
+          icon: icon22,
+        },
+      ]
+    })
     return {
       summary,
       houseTypes,
       houseSum,
+      pubulicSafeHouse,
+      pubulicSafeNonResident,
+      allTrueHouse,
     }
   },
 })
@@ -85,32 +161,32 @@ export default defineComponent({
   display flex
   align-items center
   justify-content space-between
-  padding 0 .03rem
-  margin .05rem 0 .02rem
+  padding 0 0.03rem
+  margin 0.05rem 0 0.02rem
   color #eee
   .count
     color $secondary-color
-    font-size .14rem
-    margin-left .15rem
+    font-size 0.14rem
+    margin-left 0.15rem
   .unit
     color #aaa
-    font-size .08rem
-    margin-left .05rem
+    font-size 0.08rem
+    margin-left 0.05rem
   img
-    width .1rem
+    width 0.1rem
     height @width
 .house-types
   display flex
   justify-content space-between
   align-items center
-  margin-top .1rem
+  margin-top 0.1rem
   >div
     display flex
     align-items center
     >div
-      margin-left .05rem
+      margin-left 0.05rem
       .count
-        font-size .12rem
+        font-size 0.12rem
         font-weight bold
       p
         color #ccc

src/view/right/police.vue

@@ -11,20 +11,20 @@
       <m-sub>门岗值守分布</m-sub>
       <div class="gate">
         <p>直管公房</p>
-        <Summary :list="houseSum" />
+        <Summary :list="zggfList" />
       </div>
       <div class="gate">
         <p>社会物业</p>
-        <Summary :list="houseSum" />
+        <Summary :list="shwyList" />
       </div>
     </div>
     <div>
       <m-sub>平安地图</m-sub>
       <div class="safe-map">
         <div>
-          <p v-for="item in mapList" :key="item.name">
-            <span>{{ item.name }}</span>
-            <m-count class="count" :value="item.value" />
+          <p v-for="item in safeMap" :key="item.cmtName">
+            <span @click="clickStreetName(item)">{{ item.cmtName }}</span>
+            <m-count class="count" :value="item.score" />
           </p>
         </div>
         <div>
@@ -32,6 +32,26 @@
         </div>
       </div>
     </div>
+    <m-modal
+      v-model="searchModal"
+      width="20%"
+      offset="-50%"
+      translate-y="84%"
+      :title="`${streetData.cmtName}2021年1季度得分`"
+    >
+      <div>
+        <m-form
+          :template="[
+            'score:得分|householdNum:户籍户数(户)',
+            'foreignNum:外来人口|permanentNum:常住人口',
+            'newNum:新航人员|improvementNum:自强人员',
+            'healthNum:安康人员|sunNum:阳光人员',
+            'remark:总结',
+          ]"
+          :data="streetData"
+        />
+      </div>
+    </m-modal>
   </m-card>
 </template>
 
@@ -48,8 +68,20 @@ export default defineComponent({
   name: 'Police',
   components: { Brief, Summary },
   setup() {
+    store.dispatch('GET_PUBLICSAFE_RIGHT_GATE')
+    store.dispatch('GET_PUBLICSAFE_RIGHT_SAFEMAP')
+    const searchModal = ref(false)
     const showChart = computed(() => store.state.curTheme === 'safety')
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
+    const zggfList = computed(
+      () => store.state.pubulicSafeGateSenteryZhiguangongfang
+    ) // 门岗值守数据 - 直管公房
+    const shwyList = computed(
+      () => store.state.pubulicSafeGateSenteryShehuiwuye
+    ) // 门岗值守数据 - 社会物业
+    const safeMap = computed(() => store.state.pubulicSafeMap) // 门岗值守数据 - 社会物业
+    const streetData = ref('')
+
     const sumList = ref<BriefProp[]>([
       { name: '今日发现', value: 157, icon: icon15 },
       { name: '今日处置中', value: 64, icon: icon16 },
@@ -99,39 +131,50 @@ export default defineComponent({
         },
       ],
     })
-    const houseSum = ref<SummaryProp[]>([
-      { name: '出入口', value: 165 },
-      { name: '已封闭', value: 165 },
-      { name: '有门岗处', value: 165 },
-      { name: '值守处', value: 165 },
-    ])
-    const mapList = ref([
-      { name: '龙泉', value: 92 },
-      { name: '厦门', value: 90 },
-      { name: '牛庄', value: 90 },
-      { name: '贵州', value: 92 },
-      { name: '长江', value: 92 },
-      { name: '云中', value: 92 },
-      { name: '小花园', value: 92 },
-      { name: '平望', value: 92 },
-      { name: '振兴', value: 90 },
-      { name: '新昌', value: 90 },
-      { name: '江阴', value: 90 },
-      { name: '顺天村', value: 92 },
-      { name: '新桥', value: 92 },
-      { name: '三德', value: 90 },
-      { name: '福海', value: 92 },
-      { name: '福瑞', value: 90 },
-      { name: '承兴', value: 92 },
-      { name: '定兴', value: 92 },
-    ])
+
+    const clickStreetName = (item: any): void => {
+      searchModal.value = true
+      streetData.value = item
+    }
+    // const houseSum = ref<SummaryProp[]>([
+    //   { name: '出入口', value: 165 },
+    //   { name: '已封闭', value: 165 },
+    //   { name: '有门岗处', value: 165 },
+    //   { name: '值守处', value: 165 },
+    // ])
+
+    // const mapList = ref([
+    //   { name: '龙泉', value: 92 },
+    //   { name: '厦门', value: 90 },
+    //   { name: '牛庄', value: 90 },
+    //   { name: '贵州', value: 92 },
+    //   { name: '长江', value: 92 },
+    //   { name: '云中', value: 92 },
+    //   { name: '小花园', value: 92 },
+    //   { name: '平望', value: 92 },
+    //   { name: '振兴', value: 90 },
+    //   { name: '新昌', value: 90 },
+    //   { name: '江阴', value: 90 },
+    //   { name: '顺天村', value: 92 },
+    //   { name: '新桥', value: 92 },
+    //   { name: '三德', value: 90 },
+    //   { name: '福海', value: 92 },
+    //   { name: '福瑞', value: 90 },
+    //   { name: '承兴', value: 92 },
+    //   { name: '定兴', value: 92 },
+    // ])
     return {
       sumList,
       lineData,
       lineOption,
       showChart,
-      houseSum,
-      mapList,
+      safeMap,
+      // mapList,
+      streetData,
+      searchModal,
+      zggfList,
+      shwyList,
+      clickStreetName,
     }
   },
 })
@@ -139,15 +182,14 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import ('../../components/MyComponent/main.styl')
-
 .chart
   width 100%
   height 1.4rem
-  margin .1rem 0
+  margin 0.1rem 0
 .gate
-  margin-bottom .1rem
+  margin-bottom 0.01rem
   p
-    margin-bottom .05rem
+    margin-bottom 0.01rem
 .safe-map
   display flex
   >div
@@ -157,12 +199,12 @@ export default defineComponent({
       flex-wrap wrap
       >p
         width 33.3%
-        margin-bottom .04rem
+        margin-bottom 0.04rem
         span
           color #ccc
         .count
-          margin-left .08rem
-          font-size .12rem
+          margin-left 0.08rem
+          font-size 0.12rem
     &:last-child
       $center()
       flex 1

src/view/right/population.vue

 <template>
-  <m-card title="实有人口" :addition="{ value: 76618, unit: '人' }">
+  <m-card
+    title="实有人口"
+    :addition="{ value: truePeople.personnelNum, unit: '人' }"
+  >
     <Brief :list="summary" />
     <div class="content">
       <div v-for="item in population" :key="item.name">
         <m-count class="count" :value="item.value" />
         <div>
           <span>{{ item.name }}</span>
-          <img src="@/assets/images/location.png" />
+          <!-- <img src="@/assets/images/location.png" /> -->
         </div>
       </div>
     </div>
@@ -14,21 +17,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import inImg from '@/assets/images/in.png'
 import out from '@/assets/images/out.png'
+import store from '@/store'
 import china from '@/assets/images/china.png'
 
 export default defineComponent({
   name: 'Population',
   components: { Brief },
   setup() {
-    const summary = ref<BriefProp[]>([
-      { name: '本市户籍', value: 18733, icon: inImg },
-      { name: '境外流入', value: 28833, icon: out },
-      { name: '境内流入', value: 29052, icon: china },
-    ])
+    store.dispatch('GET_PUBLICSAFE_TRUE_PEOPLE')
+    const truePeople = computed(() => store.state.pubulicSafeTruePeople)
+
+    const summary = computed(() => {
+      return [
+        { name: '本市户籍', value: truePeople.value.thisCity, icon: inImg },
+        { name: '境外流入', value: truePeople.value.outCountry, icon: out },
+        { name: '境内流入', value: truePeople.value.inCountry, icon: china },
+      ]
+    })
+
     const population = ref([
       { name: '老龄人口', value: 35648 },
       { name: '低保人口', value: 65315 },
@@ -37,6 +47,7 @@ export default defineComponent({
     return {
       summary,
       population,
+      truePeople,
     }
   },
 })
@@ -49,18 +60,18 @@ export default defineComponent({
   >div
     width 32%
     background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
-    padding .05rem .15rem
+    padding 0.05rem 0.15rem
     .count
-      font-size .12rem
+      font-size 0.12rem
     >div
       display flex
       align-items center
       justify-content space-between
       width 100%
       span
-        font-size .09rem
+        font-size 0.09rem
         color #ccc
       img
-        width .1rem
+        width 0.1rem
         height @width
 </style>

src/view/right/public-work.vue

@@ -39,23 +39,28 @@ export default defineComponent({
 </script>
 
 <style lang="stylus" scoped>
-@import '../../components/MyComponent/main.styl'
-
-.public-work
-  $full()
-  display flex
-  justify-content space-between
-  >div
-    height 100%
-    width 33%
-
-.convenient
-.beauty
-.duty
-.analysis
-  flex 1
-.task
-  height 1rem
-.neighbor
-  height .8rem
+@import '../../components/MyComponent/main.styl';
+
+.public-work {
+  $full();
+  display: flex;
+  justify-content: space-between;
+
+  >div {
+    height: 100%;
+    width: 33%;
+  }
+}
+
+.convenient, .beauty, .duty, .analysis {
+  flex: 1;
+}
+
+.task {
+  height: 1rem;
+}
+
+.neighbor {
+  height: 0.8rem;
+}
 </style>