小区页面布局

package-lock.json

@@ -16,6 +16,7 @@
         "normalize.css": "^8.0.1",
         "qs": "^6.9.6",
         "vue": "^3.0.5",
+        "vue-router": "^4.0.6",
         "vuex": "^4.0.0"
       },
       "devDependencies": {
@@ -4292,6 +4293,14 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.6.tgz?cache=0&sync_timestamp=1617697726574&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.6.tgz",
+      "integrity": "sha1-kXUNtQfSZkLyJbDsYGRWjl/kSNY=",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-types": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/vue-types/download/vue-types-3.0.2.tgz",
@@ -8016,6 +8025,12 @@
         }
       }
     },
+    "vue-router": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.6.tgz?cache=0&sync_timestamp=1617697726574&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.6.tgz",
+      "integrity": "sha1-kXUNtQfSZkLyJbDsYGRWjl/kSNY=",
+      "requires": {}
+    },
     "vue-types": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/vue-types/download/vue-types-3.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "normalize.css": "^8.0.1",
     "qs": "^6.9.6",
     "vue": "^3.0.5",
+    "vue-router": "^4.0.6",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

src/App.vue

 <template>
-  <Main />
+  <router-view />
   <m-loader v-if="showLoading" />
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import Main from '@/view/main.vue'
 import store from '@/store'
 
 export default defineComponent({
   name: 'App',
-  components: { Main },
   setup() {
     const showLoading = computed(() => store.state.showLoading)
     return {

src/components/MyComponent/MyCard/mode-3.vue

+<template>
+  <div class="card-wrapper">
+    <div class="card-title">
+      {{ title }}
+      <img class="tri" src="@/assets/images/modal-head-tri.png" />
+      <img class="tri" src="@/assets/images/modal-head-tri.png" />
+    </div>
+    <div class="card-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import flag from '@/assets/images/card-model2-flag.png'
+
+export interface AdditionProp {
+  name?: string
+  value?: number
+  unit?: string
+}
+export default defineComponent({
+  name: 'Mode3',
+  props: {
+    title: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+  setup() {
+    return {
+      flag,
+    }
+  },
+})
+</script>
+
+<style scoped lang="stylus">
+@import '../main.styl'
+.card-wrapper
+  $full()
+  .card-title
+    display flex
+    background linear-gradient(to bottom, transparent, rgba(0,148,255,.3))
+    position relative
+    color #D0EBEC
+    font-family $font-zcool
+    font-size $card-title-size
+    height .2rem
+    padding-left .2rem
+    align-items center
+    font-size .13rem
+    box-sizing border-box
+    border-bottom .01rem solid $primary-border
+    .tri
+      position absolute
+      left 0
+      width .2rem
+      &:nth-of-type(2)
+        left auto
+        right 0
+        transform rotate(180deg)
+  .card-content
+    display flex
+    flex-direction column
+    justify-content space-around
+    position relative
+    box-sizing border-box
+    padding .02rem .05rem
+    overflow hidden !important
+    >div
+      $full()
+</style>

src/components/MyComponent/MyCard/my-card.vue

@@ -13,10 +13,11 @@ import { computed, defineComponent, PropType } from 'vue'
 import MyAnimate from '../MyAnimate/my-animate.vue'
 import mode1 from './mode-1.vue'
 import mode2 from './mode-2.vue'
+import mode3 from './mode-3.vue'
 import modeBorder from './mode-border.vue'
 import '../main.styl'
 
-type ModeType = '1' | '2' | 'border'
+type ModeType = '1' | '2' | '3' | 'border'
 
 export default defineComponent({
   name: 'MyCard',
@@ -52,6 +53,8 @@ export default defineComponent({
           return mode1
         case '2':
           return mode2
+        case '3':
+          return mode3
         case 'border':
           return modeBorder
         default:

src/components/MyComponent/MyChart/my-line.vue

@@ -38,8 +38,7 @@ export default defineComponent({
         top: '20%',
         containLabel: true,
       },
-      xAxis: [
-        {
+      xAxis: {
         type: 'category',
         boundaryGap: false,
         axisLine: {
@@ -48,9 +47,7 @@ export default defineComponent({
           },
         },
       },
-      ],
-      yAxis: [
-        {
+      yAxis: {
         type: 'value',
         splitLine: {
           lineStyle: {
@@ -58,7 +55,6 @@ export default defineComponent({
           },
         },
       },
-      ],
     }
     const defaultSeriesItem = {
       type: 'line',

src/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
 import MyComponent from '@/components/MyComponent'
+import router from '@/router'
 import { Progress, Select, Input } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import './assets/style/reset.styl'
 
 createApp(App)
+  .use(router)
   .use(MyComponent)
   .use(Progress)
   .use(Select)

src/router/index.ts

+import { createRouter, createWebHashHistory } from 'vue-router'
+import routes from './routes'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+export default router

src/router/routes.ts

+import Main from '@/view/main.vue'
+import CommunityView from '@/view/community.vue'
+
+export default [
+  { name: 'main', path: '/', component: Main },
+  { name: 'community', path: '/community', component: CommunityView },
+]

src/view/community.vue

+<template>
+  <m-grid
+    :template="['title title title', 'left . right']"
+    columns="16vw auto 49vw"
+    rows="0.4rem auto"
+    gap="0.05rem"
+  >
+    <m-title area="title">南东城运</m-title>
+    <m-map ref="map" />
+    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
+      <LeftSection area="left" />
+    </m-animate>
+    <m-animate enter="fadeInRight" leave="fadeOutRight">
+      <RightSection area="right" />
+    </m-animate>
+  </m-grid>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LeftSection from '@/view/community/left-section.vue'
+import RightSection from '@/view/community/right-section.vue'
+
+export default defineComponent({
+  name: 'Main',
+  components: { LeftSection, RightSection },
+})
+</script>
+
+<style lang="stylus" scoped></style>

src/view/community/community-photo.vue

+<template>
+  <div class="community-photo">
+    <div
+      v-for="item in list"
+      :key="item.name"
+      :style="`background:url(${item.photo}) 100% / 100% 100% no-repeat`"
+    >
+      <p>{{ item.name }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import photo1 from '@/assets/images/community1.png'
+import photo2 from '@/assets/images/community2.png'
+import photo3 from '@/assets/images/community3.png'
+
+export default defineComponent({
+  name: 'CommunityPhoto',
+  setup() {
+    return {
+      list: [
+        { name: '重庆北路205号入口', photo: photo1 },
+        { name: '重庆北路205号道路', photo: photo2 },
+        { name: '重庆北路205号电梯', photo: photo3 },
+      ],
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.community-photo
+  $full()
+  display flex
+  flex-direction column
+  justify-content space-between
+  padding .05rem
+  >div
+    height 32%
+    position relative
+    >p
+      position absolute
+      right 0
+      bottom 0
+      padding .05rem .1rem
+      border-radius .1rem 0 0 0
+      color $secondary-color
+      background rgba(8,28,52,.5)
+</style>

src/view/community/left-section.vue

+<template>
+  <m-card mode="border">
+    <m-card title="小区档案" mode="3">
+      <div class="info">
+        <div><img src="@/assets/images/zhenxing.png" /></div>
+        <div>
+          <h3>振兴小区</h3>
+          <p>
+            振兴小区建筑面积44250.0000平米，占地面积20000.0000平米，雅致的绿化，成熟的小区，营造安静且优雅的空间环境，构筑温情社区空间。对口育才幼儿园、凯乐幼儿园、蛇口启鹏幼儿园、蓓蕾幼儿园育才二中。
+          </p>
+        </div>
+      </div>
+      <div>
+        <Brief :list="summary.slice(0, 3)" size="0.32rem" />
+        <h1></h1>
+        <Brief :list="summary.slice(3)" size="0.32rem" />
+      </div>
+      <div class="buildings">
+        <div v-for="item in ['紫光大厦', '文海大楼', '振兴小区']" :key="item">
+          {{ item }}
+        </div>
+      </div>
+      <div class="address">
+        <div
+          v-for="(item, i) in addrList"
+          :key="i"
+          :style="`border-left-color: ${getColor(item.type)}`"
+        >
+          <div>
+            <img src="@/assets/images/p7.png" />
+            <p>{{ item.address }}</p>
+          </div>
+          <div>
+            <img src="@/assets/images/p8.png" />
+            {{ item.name }}
+          </div>
+          <span>{{ item.type }}</span>
+          <b :style="`background:${getColor(item.type)}`" />
+        </div>
+      </div>
+      <div class="industry">
+        <div class="title">
+          <img src="@/assets/images/p9.png" />
+          业委会
+        </div>
+        <div class="content">
+          <div v-for="item in 3" :key="item">
+            <p>姓名</p>
+            <p>XX业委会主任</p>
+          </div>
+        </div>
+      </div>
+    </m-card>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import Brief, { BriefProp } from '@/view/components/brief.vue'
+import p1 from '@/assets/images/p1.png'
+import p2 from '@/assets/images/p2.png'
+import p3 from '@/assets/images/p3.png'
+import p4 from '@/assets/images/p4.png'
+import p5 from '@/assets/images/p5.png'
+import p6 from '@/assets/images/p6.png'
+
+export default defineComponent({
+  name: 'LeftSection',
+  components: { Brief },
+  setup() {
+    const summary = ref<BriefProp[]>([
+      { name: '小区数', value: 3, icon: p1 },
+      { name: '总户数', value: 2715, icon: p2 },
+      { name: '物业企业', value: 3, icon: p3 },
+      { name: '充电桩', value: 150, icon: p4 },
+      { name: '车位', value: 2500, icon: p5 },
+      { name: '为老设施', value: 15, icon: p6 },
+    ])
+    const addrList = ref([
+      {
+        name: '封闭',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        type: '门岗',
+      },
+      {
+        name: '有门岗无值班',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        type: '门岗',
+      },
+      {
+        name: '助浴点',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        type: '为老',
+      },
+      {
+        name: '充电桩',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        type: '公共',
+      },
+      {
+        name: '停车位',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        type: '公共',
+      },
+      {
+        name: '充电桩',
+        address: '上海市黄浦区延安东路1292弄6~40号',
+        type: '公共',
+      },
+    ])
+    const getColor = (type: string): string => {
+      switch (type) {
+        case '门岗':
+          return '#826AFA'
+        case '为老':
+          return '#FF6161'
+        case '公共':
+          return '#8ED617'
+        default:
+          return '#fff'
+      }
+    }
+    return {
+      summary,
+      addrList,
+      getColor,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.info
+  display flex
+  height 1.1rem
+  margin .05rem 0
+  overflow hidden
+  >div
+    flex 1
+    color #ccc
+    text-align justify
+    &:first-child
+      flex .56
+      $center()
+      background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
+      margin-right .05rem
+      > img
+        width 90%
+    &:last-child
+      display flex
+      flex-direction column
+      justify-content space-around
+      h3
+        color #ccc
+        font-size .16rem
+        margin 0
+.buildings
+  display flex
+  justify-content space-between
+  >div
+    $center()
+    width 30%
+    height .4rem
+    background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
+.address
+  display flex
+  flex-wrap wrap
+  justify-content space-around
+  >div
+    width 48%
+    padding .05rem .07rem
+    box-sizing border-box
+    position relative
+    margin-bottom .05rem
+    background rgba(33,58,89,.2)
+    border .01rem solid rgba(91,213,255,.1)
+    border-left .02rem solid transparent
+    overflow hidden
+    >div
+      display flex
+      align-items center
+      p
+        color #aaa
+      &:nth-of-type(2)
+        margin-top .02rem
+        font-weight bold
+      img
+        width .15rem
+        margin-right .05rem
+    span
+      position absolute
+      right .04rem
+      bottom .02rem
+      font-size .08rem
+    b
+      position absolute
+      right -0.1rem
+      bottom -0.1rem
+      width .2rem
+      height .2rem
+      transform rotate(45deg)
+      opacity .4
+.industry
+  .title
+    display flex
+    align-items center
+    font-family $font-zcool
+    font-size .14rem
+    color #ccc
+    img
+      width .18rem
+      height @width
+      margin-right .05rem
+  .content
+    display flex
+    justify-content space-between
+    >div
+      display flex
+      flex-direction column
+      justify-content center
+      padding 0 .12rem
+      min-height .5rem
+      width 31%
+      background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
+      p
+        &:nth-of-type(2)
+          color #aaa
+</style>

src/view/community/manage-issue.vue

+<template>
+  <m-card mode="3" title="管理要素">
+    <div class="sum">
+      <div class="total">
+        评分
+        <m-count class="count" :value="92" />
+      </div>
+      <div class="safety">
+        安全
+        <m-count class="count" :value="95" />
+      </div>
+      <div class="clean">
+        干净
+        <m-count class="count" :value="92" />
+      </div>
+      <div class="order">
+        有序
+        <m-count class="count" :value="89" />
+      </div>
+    </div>
+    <div class="detail">
+      <div class="title">
+        <img src="@/assets/images/p10.png" />
+        安全
+        <m-count class="count" :value="95" />
+      </div>
+      <div class="chart">
+        <m-line :dataset="data" :option="option1" />
+      </div>
+    </div>
+    <div class="detail">
+      <div class="title">
+        <img src="@/assets/images/p10.png" />
+        干净
+        <m-count class="count" :value="92" />
+      </div>
+      <div class="chart">
+        <m-line :dataset="data" :option="option2" />
+      </div>
+    </div>
+    <div class="detail">
+      <div class="title">
+        <img src="@/assets/images/p10.png" />
+        有序
+        <m-count class="count" :value="89" />
+      </div>
+      <div class="chart">
+        <m-line :dataset="data" :option="option3" />
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { ChartTypes } from '@/components/MyComponent'
+
+export default defineComponent({
+  name: 'ManageIssue',
+  setup() {
+    const data = ref<ChartTypes.DatasetComponentOption>({
+      dimensions: [
+        { name: 'date', displayName: '日期' },
+        { name: 'value', displayName: '分数' },
+      ],
+      source: [
+        { date: '0325', value: 60 },
+        { date: '0326', value: 70 },
+        { date: '0327', value: 80 },
+        { date: '0328', value: 90 },
+        { date: '0329', value: 80 },
+        { date: '0330', value: 70 },
+        { date: '0331', value: 60 },
+        { date: '0401', value: 60 },
+        { date: '0402', value: 70 },
+        { date: '0403', value: 90 },
+      ],
+    })
+    const option1 = ref<ChartTypes.LineOption>({
+      color: [['#8ED617', '#429321']],
+      grid: { top: '5%' },
+      legend: { show: false },
+      series: [
+        {
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            width: 2,
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(142,214,23,.7)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(142,214,23,.1)', // 100% 处的颜色
+                },
+              ],
+            } as any,
+          },
+        },
+      ],
+      xAxis: { axisLabel: { interval: 0 } },
+    })
+    const option2 = ref<ChartTypes.LineOption>({
+      color: [['#00f2ff', '#05A4FF']],
+      grid: { top: '5%' },
+      legend: { show: false },
+      series: [
+        {
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            width: 2,
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(0,242,255,.7)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(0,242,255,.1)', // 100% 处的颜色
+                },
+              ],
+            } as any,
+          },
+        },
+      ],
+      xAxis: { axisLabel: { interval: 0 } },
+    })
+    const option3 = ref<ChartTypes.LineOption>({
+      color: [['#ffd400', '#F77120']],
+      grid: { top: '5%' },
+      legend: { show: false },
+      series: [
+        {
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            width: 2,
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(255,212,0,.7)', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255,212,0,.1)', // 100% 处的颜色
+                },
+              ],
+            } as any,
+          },
+        },
+      ],
+      xAxis: { axisLabel: { interval: 0 } },
+    })
+    return {
+      data,
+      option1,
+      option2,
+      option3,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.sum
+  position relative
+  height 1.4rem
+  background url('@/assets/images/issue-bg.png') 100% / 100% 100% no-repeat
+  >div
+    position absolute
+    font-size .12rem
+    font-weight bold
+    .count
+      font-size .15rem
+      font-family $font-pang
+    &.total
+      top 6%
+      left @top
+      color #ccc
+    &.safety
+      top 40%
+      left 22%
+      color #8ED617
+    &.clean
+      top 48%
+      left 58%
+      color $edge
+    &.order
+      top 20%
+      left 74%
+      color $yellow
+.title
+  display flex
+  align-items center
+  font-family $font-zcool
+  font-size .14rem
+  color #ccc
+  margin-bottom .05rem
+  img
+    width .18rem
+    height @width
+    margin-right .05rem
+  .count
+    margin-left .05rem
+    font-family $font-pang
+    margin-bottom .03rem
+.detail
+  margin-bottom .05rem
+  .chart
+    width 100%
+    height .8rem
+  &:nth-of-type(2)
+    .count
+      color #8ED617
+  &:nth-of-type(3)
+    .count
+      color $edge
+  &:nth-of-type(4)
+    .count
+      color $yellow
+</style>

src/view/community/right-section.vue

+<template>
+  <div class="right-section">
+    <m-card mode="border">
+      <CommunityPhoto />
+    </m-card>
+    <m-card mode="border">
+      <ManageIssue />
+    </m-card>
+    <m-card mode="border"> </m-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import CommunityPhoto from './community-photo.vue'
+import ManageIssue from './manage-issue.vue'
+
+export default defineComponent({
+  name: 'RightSection',
+  components: { CommunityPhoto, ManageIssue },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.right-section
+  $full()
+  display flex
+  justify-content space-between
+  >div
+    height 100%
+    width 33%
+    .beauty1
+      flex 1
+    .beauty2
+      flex 1.6
+</style>

src/view/components/brief.vue

 <template>
   <div class="brief-container">
     <div v-for="item in list" :key="item.name">
-      <img v-if="item.icon" :src="item.icon" />
+      <img
+        v-if="item.icon"
+        :src="item.icon"
+        :style="`width:${size};height:${size}`"
+      />
       <div v-if="Array.isArray(item.value)">
         <div class="count-group">
           <m-count class="count yellow" :value="item.value[0]" />
@@ -41,6 +45,10 @@ export default defineComponent({
       type: String as PropType<string>,
       default: null,
     },
+    size: {
+      type: String as PropType<string>,
+      default: '0.22rem',
+    },
   },
 })
 </script>
@@ -60,8 +68,6 @@ export default defineComponent({
     display flex
     align-items center
     >img
-      width .22rem
-      height @width
       margin-right .05rem
     >div
       font-weight bold