左侧公共部分接口对接完成

src/ajax/api.ts

@@ -28,4 +28,10 @@ export default {
   GET_PUBLICSAFE_BUILDINGS: '/service-special-nandong/inspections', // 公共安全-右侧-重点关注楼宇
   GET_PUBLICSAFE_PIEDATA: '/service-special-nandong/inspection/getPie', // 公共安全-右侧-房屋外立面饼图
   GET_PUBLICSAFE_NEWFIND: '/service-special-nandong/noAlert', // 公共安全-右侧-最新发现
+
+  // 左侧公共
+  GET_PUBLICSAFE_COMMANDSYSTEM: '/service-special-nandong/commandSystem', // 指挥体系
+  GET_PUBLICSAFE_STREETPOWER: '/service-special-nandong/streetPower', // 网格工作站(原名街道力量)
+  GET_PUBLICSAFE_PARTY: '/service-special-nandong/party', // 党建
+  GET_PUBLICSAFE_ECONOMIC: '/service-special-nandong/economic', // 经济
 }

src/ajax/axios.ts

@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
   (config) => {
     // 添加token
     config.headers.Authorization =
-      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4Mzc0NDQzLCJqdGkiOiJiZTRlZTE1My1mOWQ0LTRjOWMtOWNhMS04OGM2NTQ0OTc3YWUiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzNjcyNDM2Mzh9.M4bs7zxUJg0W03XYhdgR6NABLC3n8tMX71MmBFM7PJYcYXvSDWJch7_fNnNaqAjekko0WkbFISzwLzV3QogiZD2dNQXDv9YGE5KecbLU9xN9AkGhfcl3GoetTw6rgyoJFrf7PMPWwsbCgmsEzK9ubC9ZEqxINg82BrVp-A295vQXqEG-eVKhh0JalzXrr8XNMoNfE-NyBc8IhQkSAFypHS8XVfRCTYsSSemPLIuZ2DXGTcn5GhacZTbMaCFSwy3z07TWaVjZa-RvZcS52nOBdDPmTXir-5fvR8YcuUywGn3uPKDkyy5J8mEkYduf0WTsy8YN_Uce1MdcJj3CVsiauA'
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4Mzk3MTk3LCJqdGkiOiI1MDRmZjA1Ni04MzRjLTQzY2YtOWJkNC0zYmNkNjYyNGU3NzkiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTgzODk5OTcyNzd9.DSqXZfmt7gsFpwaJrbwa_s-bETXaIL9f-kl4gzua158KiZi_TAkGfftFw-BFLF0irCcm_ZFVRoF5_BHhm4c73g7I-rPQw_lq54AoR2u0aejew1sTmXGh_0RLcAELPlQSQNJZfgqYVl9cEUABrupvXEBgU58-YseLFUvbGPR5NR_GbksV12r5sGAnNWvq5o0mtHHpBiI8eLWHN6q0pFlmfynRSqQ4KBLjwEPyhACgdtOPFMnHAN8I5Bjya1MP4vSbLHb5IHiii4rDfkYOZIyk_fNkb5P_Uvf6l7mUBeAx-RaUtcBtJ8tjzqKqZDUFs8Y5OBRQT4a1nsddonnpbMUPUQ'
     return config
   },
   (error) => {

src/store/actions.ts

@@ -8,6 +8,7 @@ export default {
   initData({ dispatch }: { dispatch: Dispatch }): void {
     dispatch('getPropertySummary')
     dispatch('getCaseList')
+    // dispatch('GET_PUBLICSAFE_ECONOMIC')
   },
   // 物业三架马车数据 （缺交叉任职数）
   async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
@@ -217,7 +218,7 @@ export default {
     const { content } = (
       await ajax.get({ url: api.GET_PUBLICSAFE_OUTHOUSEWALL })
     ).data
-    console.log(content)
+    // console.log(content)
     commit('SET_PUBLICSAFE_OUTHOUSEWALL', content)
   },
   // 公共服务 - 重点关注楼宇
@@ -239,7 +240,45 @@ export default {
     const { content } = (
       await ajax.get({ url: api.GET_PUBLICSAFE_PIEDATA })
     ).data
-    console.log(content)
+    // console.log(content)
     commit('SET_PUBLICSAFE_PIEDATA', content)
   },
+  // 左侧公共 - 指挥体系
+  async GET_PUBLICSAFE_COMMANDSYSTEM({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_COMMANDSYSTEM })
+    ).data
+    // console.log(content)
+    commit('SET_PUBLICSAFE_COMMANDSYSTEM', content)
+  },
+  // 左侧公共 - 网格工作站
+  async GET_PUBLICSAFE_STREETPOWER({
+    commit,
+  }: {
+    commit: Commit
+  }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_STREETPOWER })
+    ).data
+    // console.log(content, '网格工作站)')
+    commit('SET_PUBLICSAFE_STREETPOWER', content.workStation || [])
+  },
+  // 左侧公共 - 党建
+  async GET_PUBLICSAFE_PARTY({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (await ajax.get({ url: api.GET_PUBLICSAFE_PARTY })).data
+    // console.log(content, '党建')
+    commit('SET_PUBLICSAFE_PARTY', content)
+  },
+  // 左侧公共 - 经济
+  async GET_PUBLICSAFE_ECONOMIC({ commit }: { commit: Commit }): Promise<void> {
+    const { content } = (
+      await ajax.get({ url: api.GET_PUBLICSAFE_ECONOMIC })
+    ).data
+    // console.log(content, '经济')
+    commit('SET_PUBLICSAFE_ECONOMIC', content)
+  },
 }

src/store/index.ts

@@ -29,6 +29,10 @@ export interface GlobalStateProps {
   pubulicSafePieData: unknown[]
   pubulicSafeNewFindNum: { [key: string]: number }
   pubulicSafeOutHouseWall: any[]
+  pubulicLeftCommandSystem: { [key: string]: string }
+  pubulicLeftStreetPower: any[]
+  pubulicLeftParty: { [key: string]: number }
+  pubulicLeftEconomic: { [key: string]: string }
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

@@ -113,4 +113,33 @@ export default {
   ): void {
     state.pubulicSafeNewFindNum = data
   },
+  SET_PUBLICSAFE_COMMANDSYSTEM(
+    // 左侧公共-指挥体系
+    state: GlobalStateProps,
+    data: { [key: string]: string }
+  ): void {
+    state.pubulicLeftCommandSystem = data
+  },
+
+  SET_PUBLICSAFE_STREETPOWER(
+    // 左侧公共-网格工作站
+    state: GlobalStateProps,
+    data: unknown[]
+  ): void {
+    state.pubulicLeftStreetPower = data
+  },
+  SET_PUBLICSAFE_PARTY(
+    // 左侧公共-党建
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.pubulicLeftParty = data
+  },
+  SET_PUBLICSAFE_ECONOMIC(
+    // 左侧公共-经济
+    state: GlobalStateProps,
+    data: { [key: string]: string }
+  ): void {
+    state.pubulicLeftEconomic = data
+  },
 }

src/store/state.ts

@@ -26,4 +26,8 @@ export default {
   pubulicSafePieData: [],
   pubulicSafeNewFindNum: {},
   pubulicSafeOutHouseWall: [],
+  pubulicLeftCommandSystem: {},
+  pubulicLeftStreetPower: [],
+  pubulicLeftParty: {},
+  pubulicLeftEconomic: {},
 } as GlobalStateProps

src/view/left/command.vue

@@ -34,16 +34,16 @@
             <p class="doubleRow">
               <span>
                 <span>日</span>
-                <span>{{ item.leader }}(城管) 、{{ item.leader1 }}(绿化)</span>
+                <span>{{ item.personnelDay }}</span>
               </span>
               <span>
                 <span>夜</span>
-                <span>{{ item.leader2 }}(警长)</span>
+                <span>{{ item.personnelNight }}</span>
               </span>
             </p>
             <p class="doubleRow2">
-              <span>{{ item.dayTime }}</span>
-              <span>{{ item.nightTime }}</span>
+              <span>{{ item.workTimeDay }}</span>
+              <span>{{ item.workTimeNight }}</span>
             </p>
             <p>{{ item.number }}人</p>
           </div>
@@ -70,7 +70,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { defineComponent, ref, computed, watch } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import Summary, { SummaryProp } from '../components/summary.vue'
@@ -88,91 +88,118 @@ export default defineComponent({
   name: 'Command',
   components: { Tabs, SubTitle, Summary, Brief, Cricle },
   setup() {
-    const leaders = ref([
-      {
-        img: avatar1,
-        type: '指挥长',
-        name: '袁登全',
-      },
-      {
-        img: avatar2,
-        type: '副指挥长',
-        name: '卢军',
-      },
-      // {
-      //   img: avatar1,
-      //   type: '指挥长',
-      //   name: '姓名',
-      // },
-      // {
-      //   img: avatar2,
-      //   type: '指挥长',
-      //   name: '姓名',
-      // },
-    ])
-    const members = ref([
-      {
-        name: '鲁涵智',
-        type: '社区管理办',
-      },
-      {
-        name: '范杲逻',
-        type: '党政办',
-      },
-      {
-        name: '庞勇',
-        type: '社区平安办',
-      },
-      {
-        name: '鲁涵智',
-        type: '社区管理办',
-      },
-      {
-        name: '鲁涵智',
-        type: '社区管理办',
-      },
-      {
-        name: '鲁涵智',
-        type: '社区管理办',
-      },
-      {
-        name: '鲁涵智',
-        type: '社区管理办',
-      },
-      {
-        name: '鲁涵智',
-        type: '社区管理办',
-      },
-    ])
+    // 指挥体系-领导
+    const leaders = computed(() => {
+      return [
+        {
+          img: avatar1,
+          type: '指挥长',
+          name: commandSystem.value.zhz,
+        },
+        {
+          img: avatar2,
+          type: '副指挥长',
+          name: commandSystem.value.fzhz,
+        },
+      ]
+    })
+    // 指挥体系-人员
+    const members = computed(() => {
+      return [
+        {
+          name: commandSystem.value.sqglb,
+          type: '社区管理办',
+        },
+        {
+          name: commandSystem.value.dzb,
+          type: '党政办',
+        },
+        {
+          name: commandSystem.value.sqpab,
+          type: '社区平安办',
+        },
+        {
+          name: commandSystem.value.sqzzb,
+          type: '社区自治办',
+        },
+        {
+          name: commandSystem.value.ndpcs,
+          type: '南东派出所',
+        },
+        {
+          name: commandSystem.value.gczas,
+          type: '广场治安所',
+        },
+        {
+          name: commandSystem.value.scjgs,
+          type: '市场监管所',
+        },
+        {
+          name: commandSystem.value.cgzd,
+          type: '城管中队',
+        },
+      ]
+    })
+
+    store.dispatch('GET_PUBLICSAFE_COMMANDSYSTEM')
+    store.dispatch('GET_PUBLICSAFE_STREETPOWER')
+    store.dispatch('GET_PUBLICSAFE_PARTY')
+    store.dispatch('GET_PUBLICSAFE_ECONOMIC')
+
+    const commandSystem = computed(() => store.state.pubulicLeftCommandSystem)
+    const streetPower = computed(() => store.state.pubulicLeftStreetPower)
+    const party = computed(() => store.state.pubulicLeftParty)
+    const economic = computed(() => store.state.pubulicLeftEconomic)
+
     const dutyTableData = ref([
       {
         group: '第一工作站',
-        leader: '长名',
-        leader1: '人名',
-        leader2: '名2',
-        dayTime: '8时-18时',
-        nightTime: '18时-8时',
-        number: 5,
+        personnelDay: '日间人',
+        personnelNight: '夜间人',
+        workTimeDay: '8时-18时',
+        workTimeNight: '18时-8时',
+        number: '5',
       },
       {
         group: '第二工作站',
-        leader: '长名',
-        leader1: '人名',
-        leader2: '名2',
-        dayTime: '8时-18时',
-        nightTime: '18时-8时',
-        number: 5,
+        personnelDay: '日间人',
+        personnelNight: '夜间人',
+        workTimeDay: '8时-18时',
+        workTimeNight: '18时-8时',
+        number: '5',
       },
       {
         group: '第三工作站',
-        leader: '长名',
-        leader1: '人名',
-        leader2: '名2',
-        dayTime: '8时-18时',
-        nightTime: '18时-8时',
-        number: 5,
+        personnelDay: '日间人',
+        personnelNight: '夜间人',
+        workTimeDay: '8时-18时',
+        workTimeNight: '18时-8时',
+        number: '5',
       },
     ])
+
+    watch(
+      // 监听改变网格工作站的数据
+      [() => streetPower.value, () => dutyTableData.value],
+      ([data, dutyData]) => {
+        if (data.length === 0) return
+        dutyData.forEach((ele: any, i: number) => {
+          const duty = data.find((e: any) => e.workstationName === ele.group)
+          if (duty) {
+            dutyTableData.value[i] = {
+              group: ele.group,
+              personnelDay: duty.personnelDay,
+              personnelNight: duty.personnelNight,
+              workTimeDay: duty.workTimeDay,
+              workTimeNight: duty.workTimeNight,
+              number: duty.num,
+            }
+          }
+        })
+      },
+      { immediate: true }
+    )
+
     const btns = ref([
       {
         icon: icon1,
@@ -212,62 +239,66 @@ export default defineComponent({
         name: '经济',
       },
     ])
-    const partySummary = ref<SummaryProp[]>([
-      {
-        name: '全部',
-        value: 165,
-        unit: '人',
-      },
-      {
-        name: '政府单位',
-        value: 20,
-        unit: '人',
-      },
-      {
-        name: '企业',
-        value: 45,
-        unit: '人',
-      },
-      {
-        name: '群众',
-        value: 100,
-        unit: '人',
-      },
-    ])
+    const partySummary = computed(() => {
+      return [
+        {
+          name: '全部',
+          value: party.value.partyNum || 0,
+          unit: '人',
+        },
+        {
+          name: '机关党员',
+          value: party.value.organsParty || 0,
+          unit: '人',
+        },
+        {
+          name: '居民区',
+          value: party.value.residential || 0,
+          unit: '人',
+        },
+        {
+          name: '企业',
+          value: party.value.enterprise || 0,
+          unit: '人',
+        },
+      ]
+    })
     const propertySummary = computed(() => {
-      const { num1, num2, num3 } = store.state.propertySummary
+      const { wy, com, ywh, cross } = store.state.pubulicLeftParty
       return [
         {
           name: '居委会',
-          value: num1 || 0,
+          value: com || 0,
           icon: icon3,
         },
         {
           name: '业委会',
-          value: num2 || 0,
+          value: ywh || 0,
           icon: icon4,
         },
         {
           name: '物业企业',
-          value: num3 || 0,
+          value: wy || 0,
           icon: icon5,
         },
         {
           name: '交叉任职',
-          value: 5,
+          value: cross || 0,
+        },
+      ]
+    })
+    const economicList = computed(() => {
+      return [
+        {
+          name: '商办空置率',
+          value: economic.value.vacancyRate.split('%')[0] || 0,
+        },
+        {
+          name: '综合商业体使用率',
+          value: economic.value.useRate.split('%')[0] || 0,
         },
       ]
     })
-    const economicList = ref([
-      {
-        name: '商办空置率',
-        value: 88,
-      },
-      {
-        name: '综合商业体使用率',
-        value: 88,
-      },
-    ])
     return {
       leaders,
       members,

src/view/right/police.vue

@@ -38,6 +38,8 @@
       v-model="searchModal"
       width="20%"
       offset="-50%"
+      enter="fadeInUp"
+      leave="fadeOutDown"
       translate-y="84%"
       :title="`${streetData.cmtName}2021年1季度得分`"
     >

src/view/right/public-safety.vue

@@ -100,7 +100,14 @@
         </div>
       </m-card>
     </m-card>
-    <m-modal v-model="searchModal" width="50%" title="重点关注楼宇清单">
+    <m-modal
+      v-model="searchModal"
+      enter="fadeInRight"
+      leave="fadeOutRight"
+      offset="55%"
+      width="40%"
+      title="重点关注楼宇清单"
+    >
       <div>
         <m-table
           :template="[
@@ -175,22 +182,22 @@ export default defineComponent({
       return [
         {
           img: Circle,
-          value: SOSMaterail.value.floodPreventionUnits,
+          value: SOSMaterail.value.floodPreventionUnits || 0,
           name: '防汛防台',
         },
         {
           img: Circle,
-          value: SOSMaterail.value.warmAntifreeze,
+          value: SOSMaterail.value.warmAntifreeze || 0,
           name: '防寒抗冻',
         },
         {
           img: Circle,
-          value: SOSMaterail.value.emergencySupplies,
+          value: SOSMaterail.value.emergencySupplies || 0,
           name: '疫情控制',
         },
         {
           img: Circle,
-          value: SOSMaterail.value.emergencyRescue,
+          value: SOSMaterail.value.emergencyRescue || 0,
           name: '应急抢险',
         },
       ]