right-1

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

@@ -26,6 +26,7 @@ export default defineComponent({
 <style scoped lang="stylus">
 @import '../main.styl'
 .card-wrapper
+  $full()
   .card-title
     display flex
     background url('@/assets/images/card-mode2-header.png') center / cover no-repeat

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

@@ -15,6 +15,7 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../main.styl'
 .card-wrapper
+  $blur()
   padding .05rem
   box-sizing border-box
   border .01rem solid $primary-border

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

@@ -16,6 +16,8 @@ import mode2 from './mode-2.vue'
 import modeBorder from './mode-border.vue'
 import '../main.styl'
 
+type ModeType = '1' | '2' | 'border'
+
 export default defineComponent({
   name: 'MyCard',
   displayName: 'm-card',
@@ -31,7 +33,7 @@ export default defineComponent({
       default: '',
     },
     mode: {
-      type: String as PropType<string>,
+      type: String as PropType<ModeType>,
       default: '2',
     },
     enter: {
@@ -67,8 +69,8 @@ export default defineComponent({
 @import '../main.styl'
 .my-card
   $full()
-  width initial
-  height initial
+  // width initial
+  // height initial
   overflow hidden
   z-index 10
   :deep(.card-wrapper)
@@ -81,5 +83,5 @@ export default defineComponent({
     height calc(100% - .2rem)
     overflow-y auto
     overflow-x hidden
-    $blur()
+    // $blur()
 </style>

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

@@ -36,7 +36,7 @@ echarts.use([
 ])
 import useChartGenerate from '@/hooks/useChartGenerate'
 
-type ECOption = echarts.ComposeOption<
+export type ECOption = echarts.ComposeOption<
   | DatasetComponentOption
   | TitleComponentOption
   | TooltipComponentOption

src/components/MyComponent/MyWaveBall/my-wave-ball.vue

+<template>
+  <div class="my-wave-ball" :style="{ width: size, height: size }">
+    <div class="before" :style="{ top: `${percent}%` }" />
+    <div class="after" :style="{ top: `${percent}%` }" />
+    <p><m-count :value="value" /> %</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+  name: 'MyWaveBall',
+  displayName: 'm-wave-ball',
+  props: {
+    value: {
+      type: Number as PropType<number>,
+      default: 0,
+    },
+    size: {
+      type: String as PropType<string>,
+      default: '.4rem',
+    },
+  },
+  setup(props) {
+    const percent = computed(() => 250 - props.value)
+    return {
+      percent,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../main.styl'
+.my-wave-ball
+  position relative
+  background transparent
+  border-radius 50%
+  overflow hidden
+  border .02rem solid $green
+  box-sizing content-box
+  box-shadow 0 0 .08rem 0 #6EB629 inset
+  transform translateZ(0)
+  $center()
+  p
+    font-size .12rem
+    font-weight bold
+    z-index: 30;
+  .before
+  .after
+    content ''
+    position absolute
+    width 200%
+    height @width
+    left 50%
+    background $green
+    opacity .5
+    border-radius 40%
+    animation rotate 10s ease infinite alternate
+    z-index 20
+  .after
+    radius 30%
+    opacity .8
+    width 195%
+    height @width
+    animation rotate 20s linear infinite alternate
+    z-index 10
+@keyframes rotate {
+  from {
+    transform translate(-46%, -70%) rotate(0)
+  }
+  to {
+    transform translate(-50%, -72%) rotate(360deg)
+  }
+}
+</style>

src/components/MyComponent/index.ts

@@ -19,6 +19,7 @@ import MyPie from './MyChart/my-pie.vue'
 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 { withInstall } from './util'
 import 'normalize.css'
 
@@ -42,6 +43,7 @@ const components = [
   MyRadar,
   MyScatter,
   MySub,
+  MyWaveBall,
 ]
 
 const install = (app: App): App => {
@@ -74,6 +76,7 @@ export {
   MyRadar,
   MyScatter,
   MySub,
+  MyWaveBall,
 }
 
 // 默认导出 —— 使用import MyComponent from './components/MyComponent'来引入所有组件

src/components/MyComponent/main.styl

@@ -26,6 +26,7 @@ $primary-bg = rgba(49,94,139,.3)
 $primary-border = rgba(91,213,255,.5)
 $blue = #2F86EE
 $yellow = #ffd400
+$green = #4F953B
 $edge = #00f2ff
 
 $card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))

src/view/components/circle.vue

@@ -60,8 +60,7 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
 .circle-wrapper
-  width 100%
-  height 100%
+  $full()
   $center()
   flex-direction column
   >p

src/view/right/complain.vue

+<template>
+  <m-card title="有诉必答">
+    <div class="summary">
+      <div v-for="item in summary" :key="item.name">
+        <m-wave-ball :value="item.percent" size=".34rem" />
+        <div>
+          <m-count class="count" :value="item.value" />
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="manage">
+      <Tabs :list="tabList" />
+      <div class="content">
+        <m-line :dataset="responseChartData" :option="chartOption"></m-line>
+      </div>
+    </div>
+    <div class="emergency">
+      <m-sub>紧急案件</m-sub>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import Tabs, { TabsProp } from '../components/tabs.vue'
+
+export default defineComponent({
+  name: 'Complain',
+  components: { Tabs },
+  setup() {
+    const summary = ref([
+      {
+        name: '街面管理',
+        value: 75,
+        percent: 60,
+      },
+      {
+        name: '综合管理',
+        value: 56,
+        percent: 30,
+      },
+      {
+        name: '小区管理',
+        value: 85,
+        percent: 78,
+      },
+    ])
+    const tabList = ref<TabsProp[]>([
+      {
+        key: 'all',
+        name: '综合管理',
+      },
+      {
+        key: 'street',
+        name: '街面管理',
+      },
+      {
+        key: 'community',
+        name: '小区管理',
+      },
+    ])
+    const responseChartData = ref({
+      dimensions: [
+        { name: 'name', displayName: '坐标名' },
+        { name: 'data1', displayName: '今日新增及存量' },
+        { name: 'data2', displayName: '今日派单处置' },
+      ],
+      source: [
+        { name: '09-10', data1: 100, data2: 10 },
+        { name: '20-11', data1: 110, data2: 20 },
+        { name: '11-12', data1: 120, data2: 30 },
+        { name: '12-13', data1: 130, data2: 40 },
+        { name: '13-14', data1: 140, data2: 50 },
+        { name: '14-15', data1: 150, data2: 60 },
+        { name: '15-16', data1: 150, data2: 100 },
+      ],
+    })
+    const chartOption = ref({
+      color: ['#9B88F9', 'gold'],
+    })
+    return {
+      summary,
+      tabList,
+      responseChartData,
+      chartOption,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.summary
+  display flex
+  justify-content space-between
+  align-items center
+  margin .1rem 0
+  >div
+    display flex
+    align-items center
+    >div
+      margin-left .05rem
+      .count
+        font-size .12rem
+        font-weight bold
+      p
+        color #ccc
+.manage
+  display flex
+  .content
+    flex 1
+</style>

src/view/right/right-component.vue

 <template>
-  <div></div>
+  <div class="right-component">
+    <m-card mode="border">
+      <Complain />
+    </m-card>
+    <m-card mode="border"></m-card>
+    <m-card mode="border"></m-card>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import Complain from './complain.vue'
 
 export default defineComponent({
   name: 'RightComponent',
-  setup() {},
+  components: { Complain },
 })
 </script>
 
-<style lang="stylus" scoped></style>
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.right-component
+  $full()
+  display flex
+  justify-content space-between
+  >div
+    height 100%
+    width 33%
+</style>