小区改版

432b0f00 · 郭铭瑶 · dcd8120f · 432b0f00 · 432b0f00 · 432b0f00
Commit 432b0f00 authored Nov 23, 2021 by 郭铭瑶 🤘
16 changed files
--- a/index.html
+++ b/index.html
@@ -10,8 +10,8 @@

 <body>
  <div id="app"></div>
-  <script src="/SMap.min.js"></script>
-  <!-- <script src="/dev/SMap.min.js"></script> -->
+  <!-- <script src="/SMap.min.js"></script> -->
+  <script src="/dev/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/assets/images/btn-bg2.png
+++ b/src/assets/images/btn-bg2.png
--- a/src/assets/images/c1.png
+++ b/src/assets/images/c1.png
--- a/src/assets/images/c2.png
+++ b/src/assets/images/c2.png
--- a/src/assets/images/icon42.png
+++ b/src/assets/images/icon42.png
--- a/src/assets/images/icon43.png
+++ b/src/assets/images/icon43.png
--- a/src/assets/images/icon44.png
+++ b/src/assets/images/icon44.png
--- a/src/components/MyComponent/main.styl
+++ b/src/components/MyComponent/main.styl
@@ -51,3 +51,9 @@ $card-bg2(opacity = 0.4, shadow = 0.2)
  background rgba(70,83,97,opacity)
  box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,shadow)
  border-radius .03rem
+
+$box()
+  background rgba(70,83,97,.4)
+  border-radius .04rem
+  box-shadow 0 0.01rem .01rem 0 rgba(255,255,255,.2) inset
+  box-sizing border-box
\ No newline at end of file
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
 const Main = () => import('@/view/main.vue')
-const CommunityView = () => import('@/view/community.vue')
-
+// const CommunityView = () => import('@/view/community.vue')
+const CommunityView = () => import('@/view/new-community.vue')
 export default [
  { name: 'main', path: '/', component: Main },
  { name: 'community', path: '/community', component: CommunityView },

--- a/src/view/community.vue
+++ b/src/view/community.vue
@@ -142,7 +142,7 @@ import { ajax, api } from '@/ajax'
 import { message } from 'ant-design-vue'

 export default defineComponent({
-  name: 'Main',
+  name: 'Community',
  components: { LeftSection, RightSection, SiteSelector, VideoComponent },
  setup() {
    const prefix = computed(() => api.SOURCE_URL)
@@ -161,13 +161,13 @@ export default defineComponent({
    )
    const communityOptions = computed(() => store.state.communityOptions)
    const route = useRoute()
-    const curId = ref<unknown>(null)
-    const initData = (id: unknown) => {
+    const curId = ref<undefined | string>()
+    const initData = (id?: string) => {
      store.dispatch('initCommunityData', id)
    }
    const map = ref<any>(null)
    onMounted(async () => {
-      curId.value = route.query.id || communityOptions.value[0].type
+      curId.value = (route.query.id as string) || communityOptions.value[0].type
      initData(curId.value)
      store.commit(
        'SET_CURRENT_VIEW',
@@ -363,7 +363,6 @@ export default defineComponent({
    const zoomMap = (type: string) => {
      map.value.zoom(type)
    }
-    const dragAble = ref(false)
    return {
      prefix,
      rotation,

--- a/src/view/new-community.vue
+++ b/src/view/new-community.vue
--- a/src/view/new-community/archive.vue
+++ b/src/view/new-community/archive.vue
+<template>
+  <m-card title="小区档案">
+    <div>
+      <Brief :list="summary.slice(0, 3)" size="0.24rem" />
+      <h1></h1>
+      <Brief :list="summary.slice(3)" size="0.24rem" />
+    </div>
+    <div class="buildings">
+      <div
+        v-for="item in buildingList"
+        :key="item.sectId"
+        :class="{ on: curBuilding === item.sectId }"
+        @click="selectBuilding(item.sectId)"
+      >
+        {{ item.sectName }}
+      </div>
+    </div>
+    <div class="address">
+      <div
+        v-for="(item, i) in addrList"
+        :key="i"
+        :style="`border-left-color: ${getColor(item.classification)}`"
+      >
+        <div>
+          <div>
+            <img :src="getIcon(item.relationName)" />
+            <p>{{ item.sectName }}</p>
+          </div>
+          <div class="type">
+            <span>{{ item.relationName }}</span>
+            <span>{{ item.classification }}</span>
+          </div>
+          <i :style="`background:${getColor(item.classification)}`" />
+        </div>
+      </div>
+    </div>
+    <div v-show="memberList.length > 0" class="industry">
+      <m-sub2>业务会</m-sub2>
+      <div class="content">
+        <div v-for="(item, i) in memberList" :key="i">
+          <p>{{ item.dirName }}</p>
+          <p>{{ getDuty(item.dirDuty) }}</p>
+          <p>{{ item.hocName }}</p>
+        </div>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watch } from 'vue'
+import Brief, { BriefProp } from '@/view/components/brief.vue'
+import p1 from '@/assets/images/icon31.png'
+import p2 from '@/assets/images/icon37.png'
+import p3 from '@/assets/images/icon38.png'
+import p4 from '@/assets/images/icon42.png'
+import p5 from '@/assets/images/icon43.png'
+import p6 from '@/assets/images/icon44.png'
+import type1 from '@/assets/images/type1.png'
+import type2 from '@/assets/images/type2.png'
+import type3 from '@/assets/images/type3.png'
+import type4 from '@/assets/images/type4.png'
+import type5 from '@/assets/images/type5.png'
+import type6 from '@/assets/images/type6.png'
+import type7 from '@/assets/images/type7.png'
+import store from '@/store'
+import { ajax, api } from '@/ajax'
+
+export default defineComponent({
+  name: 'Archive',
+  components: { Brief },
+  setup() {
+    const summary = ref<BriefProp[]>([])
+    const buildingList = ref<unknown[]>([])
+    const curBuilding = ref<string | null>(null)
+    const memberList = ref<unknown[]>([])
+    const addrList = ref([])
+
+    watch(
+      () => store.state.communityInfo,
+      (cur) => {
+        const {
+          totCommunity = 0,
+          totHous = 0,
+          totCmp = 0,
+          chargingPile = 0,
+          parkingSpace = 0,
+          totForOld = 0,
+          communityList = [],
+        } = cur
+        summary.value = [
+          { name: '小区数', value: totCommunity, icon: p1 },
+          { name: '总户数', value: totHous, icon: p2 },
+          { name: '物业企业', value: totCmp, icon: p3 },
+          { name: '充电桩', value: chargingPile, icon: p4 },
+          { name: '车棚', value: parkingSpace, icon: p5 },
+          { name: '为老设施', value: totForOld, icon: p6 },
+        ]
+        buildingList.value = communityList
+        curBuilding.value =
+          (communityList[0] && communityList[0].sectId) || null
+        addrList.value = []
+        memberList.value = []
+        selectBuilding(curBuilding.value)
+      },
+      { deep: true, immediate: true }
+    )
+    const getColor = (type: string): string => {
+      switch (type) {
+        case '摄像头':
+          return '#826AFA'
+        case '为老设施':
+          return '#FF6161'
+        case '小区设施':
+          return '#8ED617'
+        default:
+          return '#fff'
+      }
+    }
+    const getIcon = (type: string): string => {
+      if (!type) return type2
+      if (type.indexOf('集合') >= 0) return type3
+      if (type.indexOf('餐') >= 0) return type6
+      if (type.indexOf('助浴') >= 0) return type7
+      if (type.indexOf('充电') >= 0) return type1
+      if (type.indexOf('车棚') >= 0) return type5
+      if (type.indexOf('垃圾') >= 0) return type4
+      return type2
+    }
+    const getDuty = (type: string): string => {
+      switch (type) {
+        case '1':
+          return '主任'
+        case '2':
+          return '预留印鉴副主任'
+        case '3':
+          return '副主任'
+        default:
+          return '业委会成员'
+      }
+    }
+    async function selectBuilding(id: string | null): Promise<void> {
+      if (!id) return
+      curBuilding.value = id
+      addrList.value = (
+        await ajax.get({
+          url: api.GET_COMMUNITY_FACILITY,
+          params: { sectId: id, pageSize: 1000 },
+        })
+      ).data.content.filter((item: any) => item.classification != '微更新')
+      memberList.value =
+        (
+          buildingList.value &&
+          (buildingList.value.find(
+            (b: any) => b.sectId === curBuilding.value
+          ) as any)
+        ).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
+    }
+    return {
+      summary,
+      buildingList,
+      curBuilding,
+      addrList,
+      getColor,
+      getIcon,
+      memberList,
+      getDuty,
+      selectBuilding,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.buildings
+  display flex
+  justify-content space-between
+  margin .05rem 0
+  padding 0 .05rem
+  >div
+    $box()
+    $center()
+    width 23%
+    height .4rem
+    cursor pointer
+    position relative
+    color #aaa
+    opacity .8
+    text-align center
+    padding 0 .08rem
+    &:hover
+      opacity 1
+      color #fff
+    &.on
+      color #fff
+      opacity 1
+      box-shadow none
+.address
+  // display flex
+  // flex-wrap wrap
+  height 3.2rem
+  overflow-y auto
+  margin-bottom .1rem
+  >div
+    display inline-block
+    width 48%
+    height .6rem
+    margin-top .04rem
+    margin-left .04rem
+    overflow hidden
+    padding .03rem .05rem
+    box-sizing border-box
+    position relative
+    background rgba(33,58,89,.2)
+    border .01rem solid rgba(91,213,255,.1)
+    border-left .02rem solid transparent
+    i
+      position absolute
+      right -0.1rem
+      bottom -0.1rem
+      width .2rem
+      height .2rem
+      transform rotate(45deg)
+      opacity .4
+    >div
+      display flex
+      width 100%
+      height 100%
+      flex-direction column
+      justify-content space-around
+      >div
+        display flex
+        align-items center
+        p
+          color #aaa
+          flex 1
+        img
+          width .15rem
+          height @width
+          margin-right .1rem
+      .type
+        display flex
+        justify-content space-between
+        font-size .08rem
+.industry
+  .title
+    display flex
+    align-items center
+    font-family $font-zcool
+    font-size .14rem
+    color $edge
+    img
+      width .18rem
+      height @width
+      margin-right .05rem
+  .content
+    display flex
+    justify-content space-between
+    flex-wrap wrap
+    overflow hidden
+    >div
+      flex 1
+      display flex
+      flex-direction column
+      justify-content center
+      padding .05rem .08rem
+      min-height .5rem
+      margin-bottom .05rem
+      margin-right @margin-bottom
+      $box()
+      p
+        font-size .08rem
+        color #aaa
+        &:first-child
+          font-size .09rem
+          color #fff
+</style>
--- a/src/view/new-community/community-video.vue
+++ b/src/view/new-community/community-video.vue
+<template>
+  <m-card class="card" title="场景监控视频">
+    <div class="nav">
+      <a-select
+        v-model:value="curScene"
+        dropdown-class-name="community-video-selector-drop-down"
+      >
+        <a-select-option
+          v-for="option in scenes"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.name }}
+        </a-select-option>
+      </a-select>
+      <a-select
+        v-model:value="curAddress"
+        dropdown-class-name="community-video-selector-drop-down"
+      >
+        <a-select-option
+          v-for="option in addresses"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.name }}
+        </a-select-option>
+      </a-select>
+    </div>
+    <div class="community-video">
+      <div
+        v-for="item in list"
+        :key="item.name"
+        :style="`background:url(${
+          item.photo &&
+          item.photo
+            .replace('https://zhongbang.omniview.pro/', prefix)
+            .replace('http://zhongbang.omniview.pro/', prefix)
+        }) 100% / 100% 100% no-repeat`"
+        @click="handleClick(item.video)"
+      >
+        <p>{{ item.name }}</p>
+        <div class="mask">
+          <img src="@/assets/images/play.png" />
+        </div>
+      </div>
+    </div>
+  </m-card>
+  <m-modal v-model="showModal" title="视频" width="30%" offset="-70%">
+    <VideoComponent v-if="showModal" :video-src="src" />
+  </m-modal>
+</template>
+
+<script lang="ts">
+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 store from '@/store'
+import { useRoute } from 'vue-router'
+import { api } from '@/ajax'
+
+export default defineComponent({
+  name: 'CommunityPhoto',
+  components: { VideoComponent },
+  setup() {
+    const showModal = ref(false)
+    const src = ref<string | null>(null)
+    const prefix = computed(() => api.SOURCE_URL)
+    const handleClick = async (video: string) => {
+      // if (!id) return
+      // const [{ remark2 }] = (
+      //   await ajax.get({
+      //     url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
+      //   })
+      // ).data
+      // src.value = remark2
+      src.value =
+        video &&
+        video.replace('https://zhongbang.omniview.pro/', prefix.value) &&
+        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: '重庆北路后门',
+            photo:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AXyAIUKZAAIFC2qNmKI384.jpg',
+            video:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9PlmAH8-oAEmHxWhriqw954.mov',
+          },
+          {
+            name: '大沽路大门',
+            photo:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AYmAT-A1AAMElShNriM149.jpg',
+            video:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9QE6AckoPAEM3swvgmFQ182.mov',
+          },
+          {
+            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',
+          },
+        ]
+      }
+      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/CgAG5WB9OkmAFxVMAS7MAmRH2Xc004.mp4',
+        },
+        {
+          name: '62弄朝东',
+          photo:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
+          video:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9QIiAaz9fAS3gvWsrxYQ927.mp4',
+        },
+        {
+          name: '62弄朝南',
+          photo:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5KrOAVcluAAnbZjB7fNA165.jpg',
+          video:
+            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9P1mALYigATKoQQw6Y8k841.mp4',
+        },
+      ]
+    })
+    const curScene = ref('all')
+    const curAddress = ref('all')
+    const scenes = [{ name: '全部场景', value: 'all' }]
+    const addresses = [{ name: '全部地址', value: 'all' }]
+    return {
+      prefix,
+      list,
+      handleClick,
+      showModal,
+      src,
+      scenes,
+      addresses,
+      curScene,
+      curAddress,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.card
+  :deep(.card-content)
+    display flex
+    flex-direction column
+    justify-content space-between
+    overflow hidden
+.nav
+  display flex
+  justify-content space-between
+  margin .04rem 0
+  padding 0 .06rem
+  >div
+    width 48%
+.community-video
+  flex 1
+  display flex
+  flex-direction column
+  justify-content space-between
+  padding .05rem
+  >div
+    height 32%
+    position relative
+    cursor pointer
+    .mask
+      $center()
+      display flex
+      position absolute
+      width 100%
+      height 100%
+      opacity 0.8
+      transition all .3s ease-in-out
+      >img
+        width .3rem
+        height @width
+        transition transform .3s ease-in-out
+        transform-origin center center
+    &:hover
+      .mask
+        opacity 1
+        background-color rgba(0,0,0,0.4)
+        >img
+          transform scale(1.2) rotate(360deg)
+    >p
+      position absolute
+      bottom .05rem
+      right @bottom
+      padding .04rem .1rem
+      border-radius .14rem
+      color #fff
+      background rgba(0,0,0,0.6)
+</style>
--- a/src/view/new-community/left.vue
+++ b/src/view/new-community/left.vue
+<template>
+  <div class="part-left">
+    <m-card mode="border2" style="flex: 1">
+      <m-card class="card" title="基本情况">
+        <Brief :list="situation" color="#F7933E" />
+        <div class="wrapper">
+          <div class="chart">
+            <p>房屋类型分布</p>
+            <m-pie :dataset="pieData1" :option="option1" />
+          </div>
+          <div class="legend">
+            <div v-for="(item, i) in pieData1.source" :key="item.name">
+              <p>
+                <i class="dot" :style="`background:${option1.color[i][0]}`" />
+                {{ item.name }}
+              </p>
+              <p>
+                <span><m-count :value="item.value" /> 幢</span>
+                <span><m-count :value="item.area" /> ㎡</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="wrapper">
+          <div class="chart">
+            <p>物业管理面积占比</p>
+            <m-pie :dataset="pieData2" :option="option2" />
+          </div>
+          <div class="legend">
+            <div v-for="(item, i) in pieData2.source" :key="item.name">
+              <p>
+                <i class="dot" :style="`background:${option2.color[i][0]}`" />
+                {{ item.name }}
+                <span><m-count :value="item.value" /> ㎡</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </m-card>
+      <m-card class="card" title="小区健康度">
+        <div class="sum">
+          <div v-for="item in scoreSum" :key="item.name">
+            <m-count class="orange-count" :value="item.value" :decimal="1" />
+            <p>{{ item.name }}</p>
+          </div>
+        </div>
+        <div>
+          <m-sub2 :addition="{ value: 90 }">评分走势</m-sub2>
+          <div class="score-chart">
+            <m-line :dataset="scoreData" :option="option3" />
+          </div>
+        </div>
+      </m-card>
+    </m-card>
+    <div class="btns">
+      <span>紫华大厦</span>
+      <span>文海大楼</span>
+      <span>振兴片区</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import icon1 from '@/assets/images/icon31.png'
+import icon2 from '@/assets/images/icon37.png'
+import icon3 from '@/assets/images/icon38.png'
+import { ref } from 'vue'
+import Brief from '../components/brief.vue'
+
+const situation = [
+  {
+    name: '门牌数',
+    value: 39,
+    icon: icon1,
+  },
+  {
+    name: '管理面积(㎡)',
+    value: 1579.15,
+    icon: icon2,
+  },
+  {
+    name: '物业企业',
+    value: 3,
+    icon: icon3,
+  },
+]
+const pieData1 = ref({
+  dimensions: [
+    { name: 'name', displayName: '类型' },
+    { name: 'value', displayName: '幢' },
+  ],
+  source: [
+    { name: '商品房', value: 261, area: 1876 },
+    { name: '售后房', value: 237, area: 1532 },
+    { name: '公房', value: 218, area: 957 },
+  ],
+})
+const option1 = {
+  color: [
+    ['#F6C84E', '#EE7837'],
+    ['#815FFC', '#7320A0'],
+    ['#32C5FF', '#328EFF'],
+  ],
+  legend: {
+    show: false,
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: ['46%', '76%'],
+      center: ['40%', '45%'],
+      label: {
+        show: false,
+      },
+    },
+  ],
+}
+const pieData2 = ref({
+  dimensions: [
+    { name: 'name', displayName: '名称' },
+    { name: 'value', displayName: '面积' },
+  ],
+  source: [
+    { name: '物业1', value: 1876 },
+    { name: '物业2', value: 1532 },
+    { name: '物业3', value: 957 },
+  ],
+})
+const option2 = {
+  color: [
+    ['#29EFD1', '#0986B2'],
+    ['#F6C84E', '#EE7837'],
+    ['#32C5FF', '#328EFF'],
+  ],
+  legend: {
+    show: false,
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: ['0%', '76%'],
+      center: ['40%', '45%'],
+      label: {
+        show: false,
+      },
+    },
+  ],
+}
+
+const scoreSum = [
+  {
+    name: '本市平均分',
+    value: 89.5,
+  },
+  {
+    name: '本区平均分',
+    value: 88.3,
+  },
+  {
+    name: '本街镇平均分',
+    value: 89.6,
+  },
+]
+
+const scoreData = ref({
+  dimensions: [
+    { name: 'name', displayName: 'date' },
+    { name: 'value', displayName: '分数' },
+  ],
+  source: [
+    { name: '11-01', value: 70 },
+    { name: '11-02', value: 60 },
+    { name: '11-03', value: 90 },
+    { name: '11-04', value: 85 },
+    { name: '11-05', value: 80 },
+    { name: '11-06', value: 70 },
+    { name: '11-07', value: 90 },
+  ],
+})
+const option3 = {
+  color: ['#FFCE34'],
+  legend: { show: false },
+  yAxis: {
+    min: 50,
+    max: 100,
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.part-left
+  width 100%
+  height 100%
+  display flex
+  flex-direction column
+.card
+  flex 1
+  :deep(.card-content)
+    display flex
+    flex-direction column
+    justify-content space-between
+    overflow hidden
+  &:first-child
+    flex 1.4
+.btns
+  height .4rem
+  margin-top .05rem
+  display flex
+  justify-content space-between
+  >span
+    $center()
+    width 30%
+    background url('@/assets/images/btn-bg2.png') 50% 50% / 100% 100% no-repeat
+    opacity .8
+    color #fff
+    font-weight bold
+    cursor pointer
+    transition opacity .3s ease-in-out
+    &:hover
+      opacity 1
+.wrapper
+  $box()
+  padding .05rem .1rem
+  display flex
+  width 100%
+  margin .04rem 0
+  .chart
+    width 50%
+    height 1rem
+  .legend
+    flex 1
+    display flex
+    flex-direction column
+    justify-content space-around
+    .dot
+      display inline-block
+      width .06rem
+      height @width
+      border-radius 50%
+      margin-right .05rem
+    p
+      &:last-child
+        padding-left .15rem
+        span+span
+          margin-left .1rem
+.sum
+  display flex
+  justify-content space-around
+  >div
+    text-align center
+    color #ccc
+.score-chart
+  width 100%
+  height 1.2rem
+</style>
--- a/src/view/new-community/right.vue
+++ b/src/view/new-community/right.vue
+<template>
+  <div class="right">
+    <m-card mode="border2">
+      <CommunityVideo />
+    </m-card>
+    <m-card mode="border2">
+      <WarningStatistics />
+    </m-card>
+    <m-card mode="border2">
+      <Archive />
+    </m-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CommunityVideo from './community-video.vue'
+import WarningStatistics from './warning-statistics.vue'
+import Archive from './archive.vue'
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.right
+  $full()
+  display flex
+  justify-content space-between
+  >div
+    height 100%
+    width 33%
+</style>
--- a/src/view/new-community/warning-statistics.vue
+++ b/src/view/new-community/warning-statistics.vue
+<template>
+  <m-card class="card" title="预警数量统计">
+    <div class="sum">
+      <div class="left">
+        <div v-for="item in sum" :key="item.name">
+          <m-count class="orange-count" :value="item.value" />
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
+      <div class="right">
+        <div v-for="item in sub" :key="item.name">
+          <i class="dot" />
+          <p>{{ item.name }}</p>
+          <span>{{ item.value }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="list">
+      <div v-for="item in list" :key="item.name">
+        <p>
+          <i class="dot" />
+          {{ item.name }}
+        </p>
+        <m-count :value="item.value" />
+      </div>
+    </div>
+    <div class="wrapper">
+      <m-sub2>快处闭环</m-sub2>
+      <div class="events">
+        <m-scroll :length="events.length" :limit="5" mode="2" :step="0.8">
+          <div v-for="(item, i) in events" :key="i" class="event-item">
+            <div class="left">
+              <p>{{ item.name }}</p>
+              <p>发现时间：{{ item.time }}</p>
+              <p>
+                处置部门：<span class="department">{{ item.department }}</span>
+              </p>
+            </div>
+            <div class="middle">
+              <div :style="`background-image: url(${item.discover})`">
+                <span>发现</span>
+              </div>
+              <div :style="`background-image: url(${item.process})`">
+                <span>处置</span>
+              </div>
+            </div>
+            <div class="right">
+              <div
+                v-for="(step, index) in steps"
+                :key="step"
+                :class="{ on: index == item.cur, unreach: +item.cur < index }"
+              >
+                <span class="step" />
+                <p>{{ step }}</p>
+              </div>
+            </div>
+          </div>
+        </m-scroll>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts" setup>
+import c1 from '@/assets/images/c1.png'
+import c2 from '@/assets/images/c2.png'
+const sum = [
+  {
+    name: '今日预警数量',
+    value: 3,
+  },
+  {
+    name: '历史预警数量',
+    value: 41,
+  },
+  {
+    name: '预警类型',
+    value: 5,
+  },
+]
+const sub = [
+  { name: '视频识别', value: 2 },
+  { name: '物联感知', value: 2 },
+  { name: '数据关联分析', value: 2 },
+  { name: '数据统计预警', value: 1 },
+]
+const list = [
+  { name: '电瓶车入库', value: 38 },
+  { name: '垃圾暴露', value: 5 },
+  { name: '占用消防通道', value: 2 },
+  { name: '垃圾满溢', value: 28 },
+  { name: '高叠隐患', value: 2 },
+  { name: '易积水预警', value: 19 },
+  { name: '群租', value: 16 },
+]
+
+const events = [
+  {
+    name: '占用消防通道',
+    time: '2020-03-13 13:23:08',
+    department: '小区物业',
+    discover: c1,
+    process: c2,
+    cur: 2,
+  },
+  {
+    name: '占用消防通道',
+    time: '2020-03-13 13:23:08',
+    department: '小区物业',
+    discover: c1,
+    process: c2,
+    cur: 2,
+  },
+  {
+    name: '占用消防通道',
+    time: '2020-03-13 13:23:08',
+    department: '小区物业',
+    discover: c1,
+    process: c2,
+    cur: 2,
+  },
+  {
+    name: '占用消防通道',
+    time: '2020-03-13 13:23:08',
+    department: '小区物业',
+    discover: c1,
+    process: c2,
+    cur: 2,
+  },
+  {
+    name: '占用消防通道',
+    time: '2020-03-13 13:23:08',
+    department: '小区物业',
+    discover: c1,
+    process: c2,
+    cur: 2,
+  },
+  {
+    name: '占用消防通道',
+    time: '2020-03-13 13:23:08',
+    department: '小区物业',
+    discover: c1,
+    process: c2,
+    cur: 2,
+  },
+]
+const steps = ['发现', '接收', '处置', '完成']
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+$orange = #FA6400
+
+.card
+  :deep(.card-content)
+    display flex
+    flex-direction column
+    justify-content space-between
+    overflow hidden
+i.dot
+  display inline-block
+  width .04rem
+  height @width
+  border-radius 50%
+  background #77BFF9
+  margin-right .06rem
+.sum
+  display flex
+  align-items center
+  padding-right .06rem
+  .left
+    color #ccc
+    flex 2.6
+    display flex
+    justify-content space-around
+  .right
+    flex 1
+    >div
+      display flex
+      align-items center
+      p
+        flex 1
+.list
+  display flex
+  flex-wrap wrap
+  margin-bottom .04rem
+  >div
+    display flex
+    align-items center
+    justify-content space-between
+    padding .04rem .08rem
+    width 48%
+    $box()
+    margin .04rem 0 0 .04rem
+.wrapper
+  flex 1
+  display flex
+  flex-direction column
+  overflow hidden
+.events
+  height 3.4rem
+  overflow hidden
+  .event-item
+    height .74rem
+    margin-bottom .06rem
+    $box()
+    padding .04rem .08rem
+    display flex
+    justify-content space-between
+    align-items center
+    .left
+      p
+        font-size .08rem
+        white-space nowrap
+        &:first-child
+          font-size .12rem
+          color $orange
+        .department
+          display inline-block
+          background linear-gradient(to right, #61E4FF, #3289FF)
+          border-radius .04rem
+          padding .01rem .05rem
+          text-align center
+          color #000
+          font-size .08rem
+    .middle
+      display flex
+      >div
+        width .5rem
+        height @width
+        background-size cover
+        background-position center center
+        background-repeat no-repeat
+        border .02rem solid
+        position relative
+        &+div
+          margin-left .05rem
+        &:first-child
+          border-color $orange
+          span
+            background $orange
+        &:last-child
+          border-color $blue
+          span
+            background $blue
+        span
+          display inline-block
+          position absolute
+          left 0
+          top 0
+          padding 0 .02rem
+    .right
+      position relative
+      &:before
+        content ''
+        width .02rem
+        height 80%
+        position absolute
+        background #32C5FF
+        z-index 1
+        top 0
+        bottom 0
+        margin auto 0
+        transform translateX(150%)
+      >div
+        display flex
+        align-items center
+        .step
+          display inline-block
+          width .04rem
+          height @width
+          border-radius 50%
+          background #32C5FF
+          border .02rem solid #fff
+          box-sizing content-box
+          margin-right .05rem
+          z-index 2
+        p
+          color #ccc
+          font-size .08rem
+        &.on
+          .step
+            background #fff
+            border-color $blue
+          p
+            color $primary-color
+        &.unreach
+          .step
+            background #fff
+            border-color #fff
+          p
+            color #999
+</style>