first view page complete

src/components/MyComponent/MyCount/my-count.vue

 <template>
-  <span ref="countRef" />
+  <b ref="countRef" />
 </template>
 
 <script lang="ts">

src/components/MyComponent/MyProgress/my-progress.vue

+<template>
+  <div class="my-progress">
+    <div v-if="msg" class="msg">
+      <p v-if="msg.name">{{ msg.name }}</p>
+      <p v-if="msg.value">
+        <MonitorCount :value="msg.value" />
+        <span v-if="msg.unit">{{ msg.unit }}</span>
+      </p>
+    </div>
+    <div class="bar" :style="{ height: `${height}rem` }">
+      <div class="inner" :style="{ width: `${percent}%`, ...barColor }"></div>
+      <div class="bg" :style="bgColor"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
+import MonitorCount from '../MyCount/my-count.vue'
+
+export interface ProgressProps {
+  name?: string
+  value?: number
+  unit?: string
+}
+export default defineComponent({
+  name: 'MyProgress',
+  displayName: 'm-progress',
+  components: { MonitorCount },
+  props: {
+    color: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: () => ['#0094FF', '#1EFBFF'],
+    },
+    value: {
+      type: Number as PropType<number>,
+      default: 0,
+    },
+    msg: {
+      type: Object as PropType<ProgressProps>,
+      default: null,
+    },
+    height: {
+      type: Number as PropType<number>,
+      default: 0.09,
+    },
+  },
+  setup(props) {
+    const barColor = computed(() => {
+      if (Array.isArray(props.color)) {
+        return {
+          background: `linear-gradient(to right, ${props.color[0]}, ${props.color[1]})`,
+        }
+      }
+      return { background: props.color }
+    })
+    const bgColor = computed(() => {
+      if (Array.isArray(props.color)) {
+        return {
+          background: props.color[0],
+        }
+      }
+      return { background: props.color }
+    })
+    const percent = ref(0)
+    onMounted(() => {
+      setTimeout(() => {
+        percent.value = props.value > 100 ? 100 : props.value
+      }, 500)
+    })
+    return {
+      barColor,
+      bgColor,
+      percent,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../main.styl'
+
+.my-progress
+  width 100%
+  .msg
+    display flex
+    align-items center
+    justify-content space-between
+    padding 0 .05rem
+    >p
+      color #ccc
+      &:last-child
+        color $secondary-color
+        font-size .14rem
+        font-weight bold
+        span
+          font-size .1rem
+  .bar
+    width 100%
+    position relative
+    border-radius .1rem
+    >div
+      position absolute
+      border-radius inherit
+      left 0
+      right 0
+      bottom 0
+      top 0
+      &.inner
+        transition width .5s ease-in-out
+      &.bg
+        opacity .3
+</style>

src/components/MyComponent/index.ts

@@ -20,6 +20,7 @@ import MyRadar from './MyChart/my-radar.vue'
 import MyScatter from './MyChart/my-scatter.vue'
 import MySub from './MySub/my-sub.vue'
 import MyWaveBall from './MyWaveBall/my-wave-ball.vue'
+import MyProgress from './MyProgress/my-progress.vue'
 // import { withInstall } from './util'
 import 'normalize.css'
 
@@ -44,6 +45,7 @@ const components = [
   MyScatter,
   MySub,
   MyWaveBall,
+  MyProgress,
 ]
 
 const install = (app: App): App => {
@@ -77,6 +79,7 @@ export {
   MyScatter,
   MySub,
   MyWaveBall,
+  MyProgress,
 }
 
 // 默认导出 —— 使用import MyComponent from './components/MyComponent'来引入所有组件

src/view/components/place.vue

+<template>
+  <div class="place-wrapper">
+    <p>{{ data.name }}</p>
+    <div>
+      <m-count class="count" :value="data.value" />
+      <span :style="getStyle(data.type)">{{ data.type }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+export interface PlaceProp {
+  type: string
+  name: string
+  value: number
+}
+export default defineComponent({
+  name: 'Place',
+  props: {
+    data: {
+      type: Object as PropType<PlaceProp>,
+      required: true,
+    },
+  },
+  setup() {
+    const getStyle = (type: string) => {
+      switch (type) {
+        case '路段':
+          return {
+            borderColor: '#F7B500',
+            color: '#F7B500',
+            background: 'rgba(247, 181, 0, 0.3)',
+          }
+        case '小区':
+          return {
+            borderColor: '#6DD400',
+            color: '#6DD400',
+            background: 'rgba(109, 212, 0, 0.3)',
+          }
+        case '商业':
+          return {
+            borderColor: '#FA6400',
+            color: '#FA6400',
+            background: 'rgba(250,100,0,.3)',
+          }
+        default:
+          return {}
+      }
+    }
+    return {
+      getStyle,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.place-wrapper
+  width 100%
+  height 100%
+  background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
+  font-weight bold
+  padding .08rem .1rem
+  >div
+    display flex
+    align-items center
+    justify-content space-between
+    margin-top .1rem
+    .count
+      font-size .14rem
+      color $secondary-color
+    span
+      font-size .08rem
+      font-weight normal
+      border .01rem solid
+      padding 0 .03rem
+</style>

src/view/components/tabs.vue

 <template>
-  <div class="tabs-container">
+  <div class="tabs-container" :class="{ horizontal: horizontal }">
     <div
       v-for="tab in list"
       :key="tab.key"
       :class="{ on: curTabKey === tab.key }"
       @click.prevent="handleSelect(tab.key)"
     >
-      <img src="@/assets/images/tri.png" />
+      <img :src="`@/assets/images/${horizontal ? 'tri2' : 'tri'}.png`" />
       <p>{{ tab.name }}</p>
-      <img src="@/assets/images/tri.png" />
+      <img :src="`@/assets/images/${horizontal ? 'tri2' : 'tri'}.png`" />
     </div>
   </div>
 </template>
@@ -28,6 +28,10 @@ export default defineComponent({
       type: Array as PropType<TabsProp[]>,
       required: true,
     },
+    horizontal: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
   emits: ['select'],
   setup(props, ctx) {
@@ -53,6 +57,25 @@ export default defineComponent({
   display flex
   flex-direction column
   border-right .01rem solid $primary-border
+  &.horizontal
+    width 100%
+    height .25rem
+    flex-direction row
+    border-right none
+    border-bottom .01rem solid $primary-border
+    >div
+      flex-direction row
+      align-items center
+      &.on
+      &:hover
+        background url('@/assets/images/tab-on2.png') 100% / 100% 100% no-repeat
+      img
+        height 100%
+        width auto
+      p
+        min-height 0
+        // min-width .5rem
+        padding 0 .05rem
   >div
     flex 1
     display flex
@@ -60,11 +83,15 @@ export default defineComponent({
     justify-content space-between
     width inherit
     cursor pointer
+    color #acacac
+    font-weight bold
     &.on
     &:hover
+      color #fff
       background url('@/assets/images/tab-on.png') 100% / 100% 100% no-repeat
     img
-      width 100%
+      width .25rem
+      height .1rem
       &:last-child
         transform rotate(180deg)
     p

src/view/right/analysis.vue

+<template>
+  <m-card title="案件分析">
+    <div class="nav">
+      <div>
+        <Tabs :list="tabs" horizontal />
+      </div>
+      <div>
+        <span
+          v-for="option in options"
+          :key="option"
+          :class="{ on: curOption === option }"
+          @click="curOption = option"
+        >
+          {{ option }}
+        </span>
+      </div>
+    </div>
+    <div class="rank">
+      <SubTitle>分类排行</SubTitle>
+      <div class="content">
+        <m-progress
+          v-for="rank in rankList"
+          :key="rank.name"
+          :value="rank.value"
+          :msg="rank"
+        />
+      </div>
+    </div>
+    <div class="place">
+      <SubTitle>多发地点</SubTitle>
+      <div class="content">
+        <div v-for="item in placeList" :key="item.name">
+          <Place :data="item" />
+        </div>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import Tabs, { TabsProp } from '../components/tabs.vue'
+import SubTitle from '../components/sub-title.vue'
+import Place, { PlaceProp } from '../components/place.vue'
+
+export default defineComponent({
+  name: 'Analysis',
+  components: { Tabs, SubTitle, Place },
+  setup() {
+    const tabs = ref<TabsProp[]>([
+      {
+        key: 'all',
+        name: '综合管理',
+      },
+      {
+        key: 'street',
+        name: '街面管理',
+      },
+      {
+        key: 'community',
+        name: '小区管理',
+      },
+    ])
+    const options = ref(['日', '周', '月'])
+    const curOption = ref('月')
+    const rankList = ref([
+      { name: '分类1', value: 50 },
+      { name: '分类2', value: 31 },
+      { name: '分类3', value: 15 },
+    ])
+    const placeList = ref<PlaceProp[]>([
+      { name: '延安东路1292弄', value: 3, type: '路段' },
+      { name: '延安东路1293弄', value: 5, type: '小区' },
+      { name: '延安东路1294弄', value: 8, type: '商业' },
+    ])
+    return {
+      tabs,
+      options,
+      curOption,
+      rankList,
+      placeList,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.nav
+  width 100%
+  display flex
+  align-items center
+  justify-content space-between
+  margin .05rem 0
+  >div
+    width 70%
+    &:last-child
+      width 20%
+      display flex
+      >span
+        $center()
+        width .22rem
+        height @width
+        color $primary-border
+        border .01rem solid @color
+        cursor pointer
+        &:hover
+        &.on
+          color $secondary-color
+          border-color @color
+          background rgba(50,197,255,.2)
+.rank
+  flex 1
+.place
+  margin .05rem 0
+  .content
+    display flex
+    justify-content space-between
+    >div
+      width 30%
+</style>

src/view/right/business-entry.vue

+<template>
+  <m-card title="业务入口">
+    <div class="content">
+      <div>民宿群租整治</div>
+      <div>小型工程纳管</div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BussinessEntry',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped>
+.content
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  justify-content space-around
+  >div
+    width 40%
+    min-height 70%
+    background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
+    display flex
+    align-items center
+    justify-content center
+    font-size .12rem
+    font-weight bold
+</style>

src/view/right/key-task.vue

+<template>
+  <m-card title="重点工作">
+    <img src="@/assets/images/key-task.png" />
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'KeyTask',
+})
+</script>
+
+<style lang="stylus" scoped>
+img
+  height 95%
+  width auto
+  margin auto
+</style>

src/view/right/right-component.vue

@@ -6,7 +6,11 @@
     <m-card mode="border">
       <Demand />
     </m-card>
-    <m-card mode="border"></m-card>
+    <m-card mode="border">
+      <div class="first-child"><Analysis /></div>
+      <div class="second-child"><KeyTask /></div>
+      <div class="third-child"><BussinessEntry /></div>
+    </m-card>
   </div>
 </template>
 
@@ -14,10 +18,13 @@
 import { defineComponent } from 'vue'
 import Complain from './complain.vue'
 import Demand from './demand.vue'
+import Analysis from './analysis.vue'
+import KeyTask from './key-task.vue'
+import BussinessEntry from './business-entry.vue'
 
 export default defineComponent({
   name: 'RightComponent',
-  components: { Complain, Demand },
+  components: { Complain, Demand, Analysis, KeyTask, BussinessEntry },
 })
 </script>
 
@@ -31,4 +38,10 @@ export default defineComponent({
   >div
     height 100%
     width 33%
+    .first-child
+      flex 1
+    .second-child
+      height 2rem
+    .third-child
+      height .8rem
 </style>