小区监控视频更新

src/ajax/api.ts

@@ -9,6 +9,7 @@ switch (process.env.NODE_ENV) {
 
 export default {
   BASE_URL,
+  SOURCE_URL: 'http://zhongbang.omniview.pro/',
   GET_BUILDING: '/service-basicdatasync-ddd/building', // 门牌幢列表
   GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', // 业委会列表
   GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
@@ -38,6 +39,7 @@ export default {
   GET_COMMUNITY_INFO: '/service-special-nandong/bigscreenCommunity/statistical', // 小区档案
   GET_COMMUNITY_FACILITY: '/service-special-nandong/communityRelations', // 小区设施
   GET_ISSUE_LIST: '/service-special-nandong/management/factors', // 管理要素列表
+  GET_SCORE_ISSUE: '/service-special-nandong/score/elements', // 评分要素
   GET_COMBINE_LIST: '/service-special-nandong/league/linkage', // 联勤联动列表
   /** 报警发短信 */
   POST_ALARM: '/service-alarm-nandong/public/alarm',

src/store/actions.ts

@@ -286,6 +286,7 @@ export default {
   initCommunityData({ dispatch }: { dispatch: Dispatch }, id: string): void {
     dispatch('getCommunityInfo', id)
     dispatch('getIssueList', id)
+    dispatch('getScoreIssue', id)
     dispatch('getCombineList', id)
   },
   async getCommunityInfo(
@@ -314,6 +315,18 @@ export default {
     ).data
     commit('SET_ISSUE_DATA', content)
   },
+  async getScoreIssue(
+    { commit }: { commit: Commit },
+    id: string
+  ): Promise<void> {
+    const { content } = (
+      await ajax.get({
+        url: api.GET_SCORE_ISSUE,
+        params: { bigscreenCommunityId: id },
+      })
+    ).data
+    commit('SET_SCORE_ISSUE', content)
+  },
   async getCombineList(
     { commit }: { commit: Commit },
     id: string

src/store/index.ts

@@ -64,6 +64,7 @@ export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
   curMapType: string
+  showCommunityPoints: boolean
   readonly zhenxing: any
   readonly weihai: any
   readonly workArea1: any
@@ -95,6 +96,7 @@ export interface GlobalStateProps {
   /** 小区页面 */
   communityInfo: Partial<CommunityInfoProp>
   issueData: IssueProp[]
+  scoreIssue: any
   combineData: CombineProp
 
   /** 工作站 */

src/store/mutations.ts

@@ -23,6 +23,9 @@ export default {
   SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void {
     state.curTheme = val
   },
+  SET_SHOW_COMMUNITY_POINTS(state: GlobalStateProps, val: boolean): void {
+    state.showCommunityPoints = val
+  },
   SET_PROPERTY_SUMMARY(
     state: GlobalStateProps,
     val: { [key: string]: number }
@@ -38,14 +41,14 @@ export default {
   SET_PUBLICSAFE_GATESENTRY_SHEHUIWUYE(
     // 公共安全-门岗值守-社会物业
     state: GlobalStateProps,
-    data: { [key: string]: number }
+    data: { [key: string]: number }[]
   ): void {
     state.pubulicSafeGateSenteryShehuiwuye = data
   },
   SET_PUBLICSAFE_GATESENTRY_ZHIGUANGONGFANG(
     // 公共安全-门岗值守-直管公房
     state: GlobalStateProps,
-    data: { [key: string]: number }
+    data: { [key: string]: number }[]
   ): void {
     state.pubulicSafeGateSenteryZhiguangongfang = data
   },
@@ -162,6 +165,9 @@ export default {
   SET_ISSUE_DATA(state: GlobalStateProps, data: IssueProp[]): void {
     state.issueData = data
   },
+  SET_SCORE_ISSUE(state: GlobalStateProps, data: unknown): void {
+    state.scoreIssue = data
+  },
   SET_COMBINE_DATA(state: GlobalStateProps, data: CombineProp): void {
     state.combineData = data
   },

src/store/state.ts

@@ -4,6 +4,7 @@ export default {
   showLoading: false,
   curMapType: '2D',
   curView: { name: '南京东路街道', type: 'street' },
+  showCommunityPoints: false,
   viewOptions: [
     { name: '南京东路街道', type: 'street' },
     { name: '第一工作站', type: 'work1', id: '01001' },
@@ -195,6 +196,7 @@ export default {
   pubulicLeftEconomic: {},
   communityInfo: {},
   issueData: [],
+  scoreIssue: [],
   combineData: { cleanList: [], securityList: [], orderlyList: [] },
   dutySum: {},
   dutyList: [],

src/view/community.vue

@@ -36,16 +36,20 @@
     </div>
     <SiteSelector />
     <div class="operates">
-      <img
-        src="@/assets/images/map-btn5.png"
-        title="旋转90度"
-        @click="rotateAngle"
-      />
-      <img
-        src="@/assets/images/map-btn6.png"
-        title="电瓶车入梯报警"
-        @click="showMonitor = true"
-      />
+      <a-tooltip placement="left">
+        <img src="@/assets/images/map-btn5.png" @click="rotateAngle" />
+        <template #title>旋转90度</template>
+      </a-tooltip>
+      <a-tooltip placement="left">
+        <img src="@/assets/images/map-btn4.png" @click="showMonitor = true" />
+        <template #title>电瓶车入梯报警</template>
+      </a-tooltip>
+      <a-tooltip placement="left">
+        <img src="@/assets/images/map-btn6.png" @click="showCommunityPoints" />
+        <template #title>
+          {{ isCommunityPointsShowNow ? '隐藏' : '显示' }}小区点
+        </template>
+      </a-tooltip>
     </div>
     <m-modal v-model="showMonitor" title="电瓶车入梯监控" width="50%">
       <div>
@@ -54,18 +58,19 @@
       </div>
     </m-modal>
     <m-drawer v-model="showDrawer" width="32vw">
-      <div class="community-device">
-        <p>类型：{{ drawerInfo.key }}</p>
-        <p>名称：{{ drawerInfo.relationName }}</p>
-        <div v-if="drawerInfo.beforPhoto">
-          <p>改造前</p>
-          <img :src="drawerInfo.beforPhoto" />
-        </div>
+      <m-card :title="drawerInfo.key">
+        <div class="drawer-info">
+          <p class="title">[ {{ drawerInfo.relationName }} ]</p>
           <div v-if="drawerInfo.afterPhoto">
-          <p>改造后</p>
+            <p>整改后</p>
             <img :src="drawerInfo.afterPhoto" />
           </div>
+          <div v-if="drawerInfo.beforPhoto">
+            <p>整改前</p>
+            <img :src="drawerInfo.beforPhoto" />
           </div>
+        </div>
+      </m-card>
     </m-drawer>
   </m-grid>
 </template>
@@ -186,19 +191,27 @@ export default defineComponent({
       drawerInfo.value = e
       showDrawer.value = true
     }
+    const isCommunityPointsShowNow = ref(false)
     async function showCommunityPoints() {
+      isCommunityPointsShowNow.value = !isCommunityPointsShowNow.value
+      if (!isCommunityPointsShowNow.value) {
+        map.value.hideCommunity()
+        return
+      }
+      store.commit('SET_LOADING', true)
       const { content } = (
         await ajax.get({
           url: api.GET_COMMUNITY_IDS,
           params: { bigscreenCommunityId: curId.value },
+          showLoading: false,
         })
       ).data
       map.value.setFilter(content)
       map.value.showCommunity()
+      store.commit('SET_LOADING', false)
     }
     const handleComplete = () => {
       map.value.layer('model_white_zw').visible = false
-      showCommunityPoints()
       focusCenterAndAddLayer().layer()
       loading.value = false
 
@@ -254,7 +267,6 @@ export default defineComponent({
       map.value.remove(points.value)
       if (curBtn.value === key) {
         curBtn.value = null
-        showCommunityPoints()
         return
       }
       const pointList = (
@@ -314,6 +326,8 @@ export default defineComponent({
       showMonitor,
       video,
       handleAlarm,
+      isCommunityPointsShowNow,
+      showCommunityPoints,
     }
   },
 })
@@ -326,7 +340,7 @@ export default defineComponent({
   right calc(49vw + .1rem)
   top .45rem
   z-index 999
-  >img
+  img
     display block
     width .2rem
     height @width
@@ -336,9 +350,25 @@ export default defineComponent({
     &:hover
       transform-origin right top
       transform scale(1.2)
-.community-device
-  $full()
-  overflow hidden
+.drawer-info
+  height 81vh
+  overflow-x hidden
+  overflow-y auto
+  .title
+    color $blue
+    font-size .14rem
+    font-family $font-zcool
+    margin-bottom .1rem
+  >div
+    display flex
+    margin-bottom .1rem
+    >p
+      width .25rem
+      padding 0 .05rem
+      $center()
+      border .01rem solid $primary-border
+    img
+      flex 1
   img
     width 3rem
 .btns

src/view/community/community-photo.vue

@@ -3,8 +3,11 @@
     <div
       v-for="item in list"
       :key="item.name"
-      :style="`background:url(${item.photo}) 100% / 100% 100% no-repeat`"
-      @click="handleClick(item.id)"
+      :style="`background:url(${
+        item.photo &&
+        item.photo.replace('http://zhongbang.omniview.pro/', prefix)
+      }) 100% / 100% 100% no-repeat`"
+      @click="handleClick(item.video)"
     >
       <p>{{ item.name }}</p>
       <div class="mask">
@@ -18,13 +21,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
-import photo1 from '@/assets/images/community1.png'
-import photo2 from '@/assets/images/community2.png'
-import photo3 from '@/assets/images/community3.png'
-import { ajax } from '@/ajax'
+import { computed, defineComponent, ref } from 'vue'
+// import photo1 from '@/assets/images/community1.png'
+// import photo2 from '@/assets/images/community2.png'
+// import photo3 from '@/assets/images/community3.png'
+// import { ajax } from '@/ajax'
 import VideoComponent from '../components/video-component.vue'
-import video from '@/assets/images/video.mp4'
+import store from '@/store'
+import { useRoute } from 'vue-router'
+import { api } from '@/ajax'
 
 export default defineComponent({
   name: 'CommunityPhoto',
@@ -32,7 +37,8 @@ export default defineComponent({
   setup() {
     const showModal = ref(false)
     const src = ref<string | null>(null)
-    const handleClick = async (id: string) => {
+    const prefix = computed(() => api.SOURCE_URL)
+    const handleClick = async (video: string) => {
       // if (!id) return
       // const [{ remark2 }] = (
       //   await ajax.get({
@@ -41,30 +47,67 @@ export default defineComponent({
       // ).data
       // src.value = remark2
       src.value =
-        'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KNmAWXGgAfLx1DPNngc885.mp4'
+        video && video.replace('http://zhongbang.omniview.pro/', prefix.value)
       showModal.value = true
     }
+    const route = useRoute()
+    const curId = computed(
+      () => (route && route.query.id) || store.state.communityOptions[0].type
+    )
+    const list = computed(() => {
+      if (curId.value === '527635870583459840') {
+        // 振兴小区
+        return [
+          {
+            name: '重庆北路177弄64号',
+            photo:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
+            video:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
+          },
+          {
+            name: '重庆北路后门',
+            photo:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AXyAIUKZAAIFC2qNmKI384.jpg',
+            video:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AaCAPxQuAJBKkDzXu6A359.mp4',
+          },
+          {
+            name: '大沽路大门',
+            photo:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AYmAT-A1AAMElShNriM149.jpg',
+            video:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AbiAQSm8AFcZgGM-DsE721.mp4',
+          },
+        ]
+      }
+      return [
+        {
+          name: '62弄朝北',
+          photo:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5GdOAW6qQAAvNhxSqO-g179.jpg',
+          video:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB8_neAFTSLAfLx1EXkWbg945.mp4',
+        },
+        {
+          name: '62弄朝东',
+          photo:
+            'https://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
+          video:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AKeAStEUAYtR_B1xies646.mp4',
+        },
+        {
+          name: '62弄朝南',
+          photo:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5KrOAVcluAAnbZjB7fNA165.jpg',
+          video:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KrSAB6piAV39_CAFs0Y956.mp4',
+        },
+      ]
+    })
     return {
-      list: [
-        { name: '重庆北路205号入口', photo: photo1 },
-        { name: '重庆北路205号道路', photo: photo2 },
-        { name: '重庆北路205号电梯', photo: photo3 },
-        // {
-        //   name: '威海路163',
-        //   photo: photo1,
-        //   id: '05e1a5f24a224d66955ba2d22d6f64d3',
-        // },
-        // {
-        //   name: '威海路167',
-        //   photo: photo2,
-        //   id: 'fc82739cb3354262850c715aa9098c83',
-        // },
-        // {
-        //   name: '成都北路140',
-        //   photo: photo3,
-        //   id: '3c23b0ecd6bb4d73842617010a84cbcf',
-        // },
-      ],
+      prefix,
+      list,
       handleClick,
       showModal,
       src,

src/view/community/manage-issue.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref, watch, computed } from 'vue'
 import { ChartTypes } from '@/components/MyComponent'
 import Circle from '../components/circle.vue'
 import store from '@/store'
@@ -120,13 +120,32 @@ export default defineComponent({
         max: 100,
       },
     })
-    const issues = ref([
-      { name: '充电桩', value: 3 },
-      { name: '监控点位', value: 30 },
-      { name: '垃圾箱房', value: 5 },
-      { name: '停车棚', value: 3 },
-      { name: '物业公司', value: 4 },
-    ])
+    const scoreIssue = computed(() => {
+      const data = store.state.scoreIssue
+      const result: any = {}
+      data.forEach((item: { [key: string]: string | number }) => {
+        const [key] = Object.keys(item)
+        if (!key) return
+        result[key] = +item[key] || 0
+      })
+      return result
+    })
+    const issues = computed(() => {
+      const {
+        monitoryPoint = 0,
+        garbageWing = 0,
+        bikeShed = 0,
+        propertyCompany = 0,
+        chargingPile = 0,
+      } = scoreIssue.value
+      return [
+        { name: '充电桩', value: chargingPile },
+        { name: '监控点位', value: monitoryPoint },
+        { name: '垃圾箱房', value: garbageWing },
+        { name: '停车棚', value: bikeShed },
+        { name: '物业公司', value: propertyCompany },
+      ]
+    })
     return {
       counts,
       totalValue,

src/view/components/map-btns.vue

@@ -2,7 +2,7 @@
   <div class="map-btns" :class="{ full: fullScreen }">
     <!-- <a-checkbox-group :option="options" @change="handleChange" /> -->
     <template v-for="btn in btns">
-      <a-tooltip v-if="btn.key === 'home'" :key="btn.key" placement="right">
+      <a-tooltip v-if="btn.key === 'polyline'" :key="btn.key" placement="right">
         <img :key="btn.key" :src="btn.icon" draggable="false" />
         <template v-if="options.length > 0" #title>
           <div class="btns-tip">
@@ -67,6 +67,7 @@ import btn3 from '@/assets/images/map-btn3.png'
 import btn4 from '@/assets/images/map-btn4.png'
 import btn5 from '@/assets/images/map-btn5.png'
 import btn6 from '@/assets/images/map-btn6.png'
+import btn7 from '@/assets/images/map-btn7.png'
 import d2 from '@/assets/images/2d.png'
 import d3 from '@/assets/images/3d.png'
 import store from '@/store'
@@ -83,9 +84,10 @@ export default defineComponent({
       const list = [
         { key: 'search', icon: btn1 },
         { key: 'full', icon: btn2 },
-        { key: 'home', icon: btn3 },
-        { key: '', icon: btn4 },
-        { key: '', icon: btn5 },
+        { key: 'points', icon: btn6 },
+        { key: 'polyline', icon: btn7 },
+        // { key: '', icon: btn4 },
+        // { key: '', icon: btn5 },
         // { key: '', icon: btn6 },
       ]
       return [mapType, ...list]
@@ -107,6 +109,12 @@ export default defineComponent({
         case 'search':
           searchModal.value = true
           break
+        case 'points':
+          store.commit(
+            'SET_SHOW_COMMUNITY_POINTS',
+            !store.state.showCommunityPoints
+          )
+          break
         default:
           break
       }
@@ -292,4 +300,7 @@ $bg = rgba(6,34,67,.4)
     height @width
     margin-top .05rem
     cursor pointer
+    transition .3s ease
+    &:hover
+      transform scale(1.2)
 </style>

src/view/hooks/useSwitchMap.ts

@@ -13,9 +13,16 @@ export default function useSwitchMap(map: any) {
     },
     { immediate: true }
   )
+  watch(
+    () => store.state.showCommunityPoints,
+    (val) => {
+      val ? setPoints(curViewType.value) : map.value.hideCommunity()
+    }
+  )
   watch(
     () => curViewType.value,
     (type) => {
+      store.commit('SET_SHOW_COMMUNITY_POINTS', false)
       setPoints(type)
       if (areaLines.value && areaLines.value.length > 0) {
         map.value.remove(areaLines.value)
@@ -27,21 +34,22 @@ export default function useSwitchMap(map: any) {
 
   // 根据条件显示小区点
   function setPoints(type: string) {
+    const show = store.state.showCommunityPoints
     switch (type) {
       case 'work1':
-        showPoints({ gridId: store.state.workArea1.id })
+        show && showPoints({ gridId: store.state.workArea1.id })
         map.value.focus(...store.state.workArea1.center, 7.660867453405492)
         break
       case 'work2':
-        showPoints({ gridId: store.state.workArea2.id })
+        show && showPoints({ gridId: store.state.workArea2.id })
         map.value.focus(...store.state.workArea2.center, 7)
         break
       case 'work3':
-        showPoints({ gridId: store.state.workArea3.id })
+        show && showPoints({ gridId: store.state.workArea3.id })
         map.value.focus(...store.state.workArea3.center, 7)
         break
       case 'street':
-        showPoints()
+        show && showPoints()
         map.value.focus(990.973466, 10.295931, 7)
         // map.value.focus(1019.614669, 54.167243, 6.5)
         break