工作站改版完成（勤务分析待接口修改后处理）

src/assets/style/reset.styl

@@ -5,7 +5,7 @@ $color-main = #5BD5FF
   .ant-progress-circle
     .ant-progress-text
       color #fff
-      font-size 0.2rem
+      font-size 0.12rem
       font-weight bold
   .ant-select
     z-index 99

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

 <template>
-  <div class="card-wrapper" :class="{ 'no-bg': noBg }">
+  <div class="card-wrapper">
     <div class="card-title">
-      <p>
-        {{ title }}
-      </p>
+      {{ 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">
-      <span class="border" />
-      <span class="border" />
       <slot />
     </div>
   </div>
@@ -15,18 +13,25 @@
 
 <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: 'Mode1',
+  name: 'Mode3',
   props: {
     title: {
       type: String as PropType<string>,
       required: true,
     },
-    noBg: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
+  },
+  setup() {
+    return {
+      flag,
+    }
   },
 })
 </script>
@@ -34,49 +39,36 @@ export default defineComponent({
 <style scoped lang="stylus">
 @import '../main.styl'
 .card-wrapper
-  &.no-bg
-    .card-title
-      margin-bottom 0
-    .card-content
-      background transparent
+  $full()
   .card-title
     display flex
-    align-items center
-    background linear-gradient(to right, rgba(59,85,102,.8), transparent)
-    position relative
-    border-bottom .01rem solid rgba(105,110,114,.15)
-    margin-bottom .05rem
-    &:before
-      content ''
-      display block
-      position absolute
-      left 0
-      width .02rem
-      height 60%
-      background #FADB71
-    >p
-      color $card-title-color
-      font-size $card-title-size
-      font-weight bold
-      margin 0
-      margin-left .1rem
-  .card-content
+    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
-    background rgba(105,110,114,.15)
-    padding .05rem .08rem
-    &.no-bg
-      background transparent
-    >.border
-      display block
+    border-bottom .01rem solid $primary-border
+    .tri
       position absolute
-      top 0
       left 0
-      bottom 0
-      width .01rem
+      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/mode-4.vue

+<template>
+  <div class="card-wrapper" :class="{ 'no-bg': noBg }">
+    <div class="card-title">
+      <p>
+        {{ title }}
+      </p>
+    </div>
+    <div class="card-content">
+      <span class="border" />
+      <span class="border" />
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+  name: 'Mode4',
+  props: {
+    title: {
+      type: String as PropType<string>,
+      required: true,
+    },
+    noBg: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
+  },
+})
+</script>
+
+<style scoped lang="stylus">
+@import '../main.styl'
+.card-wrapper
+  &.no-bg
+    .card-title
+      margin-bottom 0
+    .card-content
+      background transparent
+  .card-title
+    display flex
+    align-items center
+    background linear-gradient(to right, rgba(59,85,102,.8), transparent)
+    position relative
+    border-bottom .01rem solid rgba(105,110,114,.15)
+    margin-bottom .05rem
+    &:before
+      content ''
+      display block
+      position absolute
+      left 0
+      width .02rem
+      height 60%
+      background #FADB71
+    >p
+      color $card-title-color
+      font-size $card-title-size
+      font-weight bold
+      margin 0
+      margin-left .1rem
+  .card-content
+    position relative
+    box-sizing border-box
+    background rgba(105,110,114,.15)
+    padding .05rem .08rem
+    &.no-bg
+      background transparent
+    >.border
+      display block
+      position absolute
+      top 0
+      left 0
+      bottom 0
+      width .01rem
+      &:nth-of-type(2)
+        left auto
+        right 0
+    >div
+      $full()
+</style>

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

@@ -14,11 +14,12 @@ 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 mode4 from './mode-4.vue'
 import modeBorder from './mode-border.vue'
 import modeBorder2 from './mode-border2.vue'
 import '../main.styl'
 
-type ModeType = '1' | '2' | '3' | 'border' | 'border2'
+type ModeType = '1' | '2' | '3' | '4' | 'border' | 'border2'
 
 export default defineComponent({
   name: 'MyCard',
@@ -56,6 +57,8 @@ export default defineComponent({
           return mode2
         case '3':
           return mode3
+        case '4':
+          return mode4
         case 'border':
           return modeBorder
         case 'border2':

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

@@ -41,29 +41,25 @@ export default defineComponent({
         top: '20%',
         containLabel: true,
       },
-      xAxis: [
-        {
-          type: 'category',
-          axisLabel: {
-            interval: 0,
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(47,134,238,0.3)',
-            },
+      xAxis: {
+        type: 'category',
+        axisLabel: {
+          interval: 0,
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(47,134,238,0.3)',
           },
         },
-      ],
-      yAxis: [
-        {
-          type: 'value',
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(47,134,238,0.3)',
-            },
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(47,134,238,0.3)',
           },
         },
-      ],
+      },
     }
     const defaultSeriesItem = {
       type: 'bar',

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

@@ -2,7 +2,7 @@
   <div class="my-progress">
     <div v-if="msg" class="msg">
       <p v-if="msg.name">{{ msg.name }}</p>
-      <p v-if="msg.value">
+      <p v-if="msg.value" :style="{ color: msg.color }">
         <MonitorCount :value="msg.value" />
         <span v-if="msg.unit">{{ msg.unit }}</span>
       </p>
@@ -22,6 +22,7 @@ export interface ProgressProps {
   name?: string
   value?: number
   unit?: string
+  color?: string
 }
 export default defineComponent({
   name: 'MyProgress',

src/components/MyComponent/MySub/my-sub2.vue

+<template>
+  <div class="my-sub">
+    <div class="title">
+      <span />
+      <p><slot /></p>
+      <div v-if="addition" class="addition">
+        <MyCount v-if="addition.value" class="count" :value="addition.value" />
+        <span v-if="addition.unit">{{ addition.unit }}</span>
+      </div>
+      <input
+        v-if="searchAble"
+        v-model="inputValue"
+        :class="{ open: isOpened }"
+        class="search-bar"
+        type="text"
+        @keypress.enter="handleSearch"
+      />
+      <img
+        v-if="searchAble"
+        class="search-btn"
+        src="@/assets/images/search.png"
+        draggable="false"
+        @click.prevent="handleOpenSearchBar"
+      />
+    </div>
+    <!-- <img src="@/assets/images/sub-dot.png" draggable="false" /> -->
+    <span class="dot" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue'
+import MyCount from '../MyCount/my-count.vue'
+
+export interface AdditionProp {
+  name?: string
+  value?: number
+  unit?: string
+}
+export default defineComponent({
+  name: 'MySub2',
+  displayName: 'm-sub2',
+  components: { MyCount },
+  props: {
+    addition: {
+      type: Object as PropType<AdditionProp>,
+      default: null,
+    },
+    searchAble: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  emits: ['search'],
+  setup(props, ctx) {
+    const isOpened = ref(false)
+    const inputValue = ref('')
+    const handleSearch = () => {
+      ctx.emit('search', inputValue.value.trim())
+    }
+    const handleOpenSearchBar = () => {
+      if (!isOpened.value) {
+        isOpened.value = true
+      } else {
+        if (inputValue.value) {
+          handleSearch()
+        } else {
+          isOpened.value = false
+        }
+      }
+    }
+    return {
+      isOpened,
+      inputValue,
+      handleSearch,
+      handleOpenSearchBar,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../main.styl'
+.my-sub
+  display flex
+  align-items center
+  border-bottom .01rem solid rgba(105,110,114,.5)
+  margin-bottom .03rem
+  >.title
+    display flex
+    align-items center
+    font-family $font-zcool
+    // color $secondary-color
+    flex 1
+    font-size .12rem
+    .addition
+      display flex
+      align-items center
+      margin-left .1rem
+      .count
+        color $yellow
+        font-size .15rem
+        font-family $font-pang
+        padding-bottom .03rem
+      span
+        color #aaa
+        font-size .08rem
+        margin-left .05rem
+    .search-bar
+      display block
+      width 0
+      height .16rem
+      background rgba(0,0,0,0.1)
+      border-radius .02rem
+      outline none
+      margin 0 .05rem
+      padding 0
+      box-sizing border-box
+      font-family $font-din
+      font-size .1rem
+      transition all .3s ease-in-out
+      opacity 0
+      &.open
+        width 1rem
+        padding .02rem .05rem
+        border .01rem solid $blue
+        opacity 1
+    .search-btn
+      width .14rem
+      height @width
+      cursor pointer
+      transition transform .3s ease-in-out
+      &:hover
+        transform scale(1.3) rotate(360deg)
+  // >img
+  //   width .6rem
+  >.dot
+    display inline-block
+    width 0
+    height @width
+    border .05rem solid transparent
+    border-right-color #FFB560
+</style>

src/components/MyComponent/MyTitle/my-title.vue

 <template>
-  <div class="my-title">
-    <img src="@/assets/images/title-bg.png" class="bg" />
+  <div class="my-title" :class="{ 'work-station': inWorkStation }">
     <div class="date">
       <span>{{ date }}</span>
       <span>{{ time }}</span>
@@ -47,6 +46,9 @@ export default defineComponent({
     ])
     const curBtn = computed(() => store.state.curTheme)
     const curView = computed(() => store.state.curView)
+    const inWorkStation = computed(
+      () => store.state.curView.type.indexOf('work') >= 0
+    )
     const handleThemeSelect = (type: string) => {
       if (curBtn.value === type) return
       store.commit('SET_CURRENT_THEME', type)
@@ -59,6 +61,7 @@ export default defineComponent({
       timer.value = null
     })
     return {
+      inWorkStation,
       date,
       time,
       timer,
@@ -78,10 +81,13 @@ export default defineComponent({
   $center()
   justify-content flex-start
   position relative
-  background-size cover
-  background-position center
+  background url('@/assets/images/title-bg.png') center / cover no-repeat
   font-weight bold
   z-index 1
+  &.work-station
+    background url('@/assets/images/title-bg2.png') center / cover no-repeat
+    h1
+      margin 0.4% 0 0 2%
   .date
     z-index 2
     position absolute
@@ -89,11 +95,6 @@ export default defineComponent({
     span
       display block
       text-align right
-  .bg
-    position absolute
-    $full()
-    top 0
-    left 0
   h1
     font-family $font-weibei
     margin 0 0 0 10%

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 MySub2 from './MySub/my-sub2.vue'
 import MyWave from './MyWave/my-wave.vue'
 import MyProgress from './MyProgress/my-progress.vue'
 import MyDrawer from './MyDrawer/my-drawer.vue'
@@ -46,6 +47,7 @@ const components = [
   MyRadar,
   MyScatter,
   MySub,
+  MySub2,
   MyWave,
   MyProgress,
   MyDrawer,
@@ -81,6 +83,7 @@ export {
   MyRadar,
   MyScatter,
   MySub,
+  MySub2,
   MyWave,
   MyProgress,
   MyDrawer,

src/components/MyComponent/main.styl

@@ -29,6 +29,7 @@ $blue = #2F86EE
 $yellow = #ffd400
 $green = #4F953B
 $edge = #00f2ff
+$orange = #F7933E
 
 $card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))
 $card-title-color = #fff

src/view/components/brief.vue

 <template>
-  <div class="brief-container">
+  <div class="brief-container" :class="{ vertical: align === 'vertical' }">
     <div v-for="item in list" :key="item.name">
       <img
         v-if="item.icon"
@@ -8,7 +8,11 @@
       />
       <div v-if="Array.isArray(item.value)">
         <div class="count-group">
-          <m-count class="count yellow" :value="item.value[0]" />
+          <m-count
+            class="count yellow"
+            :value="item.value[0]"
+            :style="{ color: color }"
+          />
           /
           <m-count class="count" :value="item.value[1]" />
         </div>
@@ -49,6 +53,10 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '0.22rem',
     },
+    align: {
+      type: String as PropType<'vertical' | 'horizontal'>,
+      default: 'horizontal',
+    },
   },
 })
 </script>
@@ -64,6 +72,8 @@ export default defineComponent({
     &.yellow
       font-size .13rem
       color $yellow
+  &.vertical
+    display inline-block
   >div
     display flex
     align-items center

src/view/components/circle.vue

 <template>
   <div ref="circleWrapperRef" class="circle-wrapper">
     <a-progress
+      class-name="circle-progress"
       :width="width"
       :stroke-color="strokeColor"
       :percent="value"
@@ -8,6 +9,7 @@
       :show-info="showInfo"
       :stroke-width="strokeWidth"
       :gap-degree="gapDegree"
+      trail-color="rgba(255,255,255,0.1)"
     />
     <slot>
       <p>{{ name }}</p>

src/view/left/manage-basic.vue

 <template>
   <m-card mode="border2">
-    <m-card class="card" mode="3" title="管理基数">
+    <m-card class="card" mode="4" title="管理基数">
       <div class="basic">
         <div v-for="item in basicList" :key="item.name">
           <p>{{ item.name }}</p>
@@ -16,7 +16,7 @@
         <img src="@/assets/images/manage-basic.png" />
       </div>
     </m-card>
-    <m-card class="card" mode="2" no-bg title="指挥体系">
+    <m-card class="card" mode="4" title="指挥体系">
       <div class="command">
         <div class="flag">
           <img src="@/assets/images/wangge.png" />
@@ -33,7 +33,7 @@
         </div>
       </div>
     </m-card>
-    <m-card class="card" mode="2" no-bg title="网格力量">
+    <m-card class="card" mode="4" title="网格力量">
       <div class="table">
         <div v-for="(item, i) in gridList" :key="i">
           <p>{{ item.department }}</p>

src/view/right/beauty-home-in-station.vue

+<template>
+  <m-card title="美丽家园" mode="4">
+    <m-sub2>项目实施情况</m-sub2>
+    <div class="summary">
+      <div v-for="item in summary" :key="item.name">
+        <m-count class="count" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <div class="detail">
+      <Brief :list="situation" align="vertical" color="#fff" />
+      <div v-if="curViewType !== 'street'" class="chart">
+        <m-bar :dataset="barData" :option="chartOption" />
+      </div>
+    </div>
+    <m-sub2 :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub2>
+    <div v-if="curViewType === 'street'" class="sum-card">
+      <div v-for="item in elevList" :key="item.name">
+        <m-count class="count" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <m-sub2>马桶改造</m-sub2>
+    <Brief :list="toiletSituation" color="#fff" />
+    <m-progress
+      :value="80"
+      :color="['rgba(253,211,116,.15)', '#F7933E']"
+      :msg="{ value: 80, unit: '%', name: '改造进度', color: '#fff' }"
+    />
+  </m-card>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import Brief, { BriefProp } from '../components/brief.vue'
+import store from '@/store'
+import icon31 from '@/assets/images/icon31.png'
+import icon32 from '@/assets/images/icon32.png'
+import icon33 from '@/assets/images/icon33.png'
+import icon34 from '@/assets/images/icon34.png'
+import icon35 from '@/assets/images/icon35.png'
+import icon36 from '@/assets/images/icon36.png'
+
+export default defineComponent({
+  name: 'BeautyHomeInStation',
+  components: { Brief },
+  setup() {
+    const curViewType = computed(() => store.state.curView.type)
+    const summary = ref([
+      { name: '2020年', value: 26 },
+      { name: '2019年', value: 24 },
+      { name: '2018年', value: 18 },
+    ])
+    const situation = ref<BriefProp[]>([
+      { name: '小区微更新', value: 26, icon: icon31 },
+      { name: '门岗规范化', value: 12, icon: icon32 },
+      { name: '充电桩', value: 64, icon: icon33 },
+      { name: '雨污混接', value: 18, icon: icon34 },
+    ])
+    const elevList = ref([
+      { name: '振兴', value: 9 },
+      { name: '福海', value: 5 },
+      { name: '江阴', value: 7 },
+      { name: '定兴', value: 1 },
+      { name: '新昌', value: 5 },
+      { name: '小花园', value: 5 },
+      { name: '顺天村', value: 1 },
+    ])
+    const toiletSituation = ref<BriefProp[]>([
+      { name: '已完成改造', value: 26, icon: icon35 },
+      { name: '应改造', value: 64, icon: icon36 },
+    ])
+    const workStationProjects = ref([
+      { name: '架空线梳理', value: 16 },
+      { name: '店招店牌美化', value: 26 },
+      { name: '绿化整治', value: 15 },
+      { name: '外立面整治', value: 8 },
+      { name: '公共设置', value: 8 },
+    ])
+    const barData = {
+      dimensions: [
+        { name: 'name', displayName: '类型' },
+        { name: 'value', displayName: '' },
+      ],
+      source: [
+        { name: '架空线梳理', value: 16 },
+        { name: '店招店牌美化', value: 26 },
+        { name: '绿化整治', value: 15 },
+        { name: '外立面整治', value: 8 },
+        { name: '公共设置', value: 8 },
+      ],
+    }
+    const chartOption = {
+      color: [['#F7943C', '#FF6C2E']],
+      legend: { show: false },
+      series: [
+        {
+          type: 'bar',
+          barWidth: '20%',
+        },
+      ],
+      xAxis: {
+        axisLabel: {
+          formatter: (value: string) => {
+            const i = Math.ceil(value.length / 2) || 0
+            return value.slice(0, i) + '\n' + value.slice(i)
+          },
+        },
+      },
+    }
+    return {
+      curViewType,
+      summary,
+      situation,
+      elevList,
+      toiletSituation,
+      workStationProjects,
+      barData,
+      chartOption,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.summary
+  width 100%
+  display flex
+  justify-content space-around
+  >div
+    display flex
+    justify-content space-around
+    align-items flex-end
+    width 20%
+    .count
+      font-size .14rem
+      font-weight bold
+      color #FF6C2E
+    p
+      font-size .09rem
+.sum-card
+  display flex
+  flex-wrap wrap
+  &.work-station
+    margin .05rem 0
+    >div
+      width 20%
+  >div
+    width 25%
+    text-align center
+    position relative
+    .count
+      font-size .12rem
+      font-weight bold
+    p
+      color #ccc
+      font-size .09rem
+    &:after
+      content '|'
+      color $secondary-color
+      position absolute
+      top 50%
+      right 0
+      transform translateY(-50%)
+.detail
+  display flex
+  .chart
+    flex 1
+</style>

src/view/right/business-entry.vue

 <template>
-  <!-- <m-card title="业务入口"> -->
-  <m-card title="业务入口">
+  <m-card title="业务入口" :mode="mode">
     <div class="content">
       <div
         v-for="entry in entrys"
@@ -14,11 +13,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, PropType } from 'vue'
 import { useRouter } from 'vue-router'
 import store from '@/store'
 export default defineComponent({
   name: 'BussinessEntry',
+  props: {
+    mode: {
+      type: String as PropType<string>,
+      default: 'mode2',
+    },
+  },
   setup() {
     const entrys = computed(() => store.state.communityOptions)
     const router = useRouter()

src/view/right/convenient.vue

 <template>
-  <m-card mode="3" title="便民设施">
+  <m-card mode="4" title="便民设施">
     <div>
-      <m-sub>为老服务</m-sub>
+      <m-sub2>为老服务</m-sub2>
       <div class="old">
-        <div>
-          <div v-for="item in forOld.slice(0, 4)" :key="item.name">
-            <m-count class="count" :value="item.value" />
-            <p>{{ item.name }}</p>
-          </div>
-        </div>
-        <div>
-          <div v-for="item in forOld.slice(4)" :key="item.name">
-            <m-count class="count" :value="item.value" />
-            <p>{{ item.name }}</p>
-          </div>
+        <div v-for="item in forOld" :key="item.name">
+          <p>{{ item.name }}</p>
+          <m-count class="count" :value="item.value" />
         </div>
       </div>
     </div>
     <div class="live">
-      <m-sub>生活便利</m-sub>
-      <Brief :list="forLive" />
+      <m-sub2>生活便利</m-sub2>
+      <Brief :list="forLive" color="#fff" />
     </div>
   </m-card>
 </template>
@@ -27,10 +19,10 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
-import icon23 from '@/assets/images/icon23.png'
-import icon24 from '@/assets/images/icon24.png'
-import icon25 from '@/assets/images/icon25.png'
-import icon26 from '@/assets/images/icon26.png'
+import icon27 from '@/assets/images/icon27.png'
+import icon28 from '@/assets/images/icon28.png'
+import icon29 from '@/assets/images/icon29.png'
+import icon30 from '@/assets/images/icon30.png'
 
 export default defineComponent({
   name: 'Convenient',
@@ -48,10 +40,10 @@ export default defineComponent({
       { name: '助浴点', value: 68 },
     ])
     const forLive = ref<BriefProp[]>([
-      { name: '菜场', value: 26, icon: icon23 },
-      { name: '街面废物箱', value: 64, icon: icon24 },
-      { name: '公厕', value: 18, icon: icon25 },
-      { name: '电话亭', value: 12, icon: icon26 },
+      { name: '菜场', value: 26, icon: icon27 },
+      { name: '街面废物箱', value: 64, icon: icon28 },
+      { name: '公厕', value: 18, icon: icon29 },
+      { name: '电话亭', value: 12, icon: icon30 },
     ])
     return {
       forOld,
@@ -65,26 +57,21 @@ export default defineComponent({
 @import '../../components/MyComponent/main.styl'
 
 .old
+  display flex
+  flex-wrap wrap
+  justify-content space-between
   >div
+    width 49%
     display flex
-    align-items center
     justify-content space-between
-    margin .1rem 0
-    &:first-child
-      >div
-        width 23%
-    &:last-child
-      >div
-        width 18%
-    >div
-      padding .1rem 0
-      $center()
-      flex-direction column
-      background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
-      .count
-        font-size .13rem
-      p
-        color #ccc
+    align-items center
+    padding 0 .1rem
+    background rgba(70,83,97,.4)
+    box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+    border-radius .03rem
+    margin-bottom .04rem
+    .count
+      font-size .13rem
 .live
   margin-bottom .1rem
 </style>

src/view/right/duty-analysis.vue

 <template>
-  <m-card title="勤务分析" mode="3">
+  <m-card title="勤务分析" mode="4">
+    <m-sub2>事件类型</m-sub2>
     <div class="nav">
-      <div>
-        <Tabs :list="tabs" horizontal @select="curTab = $event" />
-      </div>
       <div>
         <span
           v-for="option in options"
@@ -16,9 +14,20 @@
       </div>
     </div>
     <div>
-      <SubTitle>事件类型</SubTitle>
-      <div class="duty-type">
-        <div v-if="showChart && pieData.source.length > 0" class="chart">
+      <div v-if="showChart" class="duty-type">
+        <div v-for="item in mock" :key="item.name">
+          <div class="circle">
+            <Circle
+              class="circle-item"
+              :value="item.rate"
+              :stroke-width="8"
+              :color="['#F7933E', 'rgba(253,211,116,.9)']"
+              :rate="2.4"
+            />
+          </div>
+          <p>{{ item.name }}</p>
+        </div>
+        <!-- <div v-if="showChart && pieData.source.length > 0" class="chart">
           <m-pie :dataset="pieData" :option="pieOption" />
         </div>
         <m-empty v-else />
@@ -33,35 +42,40 @@
               <m-count :value="item.value" />件
             </p>
           </div>
-        </div>
-      </div>
-    </div>
-    <div class="bar-chart">
-      <SubTitle>居委事件数量</SubTitle>
-      <div v-if="showChart && barOption.series.length > 0" class="chart">
-        <m-bar :dataset="barData" :option="barOption" />
+        </div> -->
       </div>
-      <m-empty v-else />
     </div>
     <div class="rank">
-      <SubTitle>分类排行</SubTitle>
+      <m-sub2>分类排行</m-sub2>
       <div v-if="rankList.length > 0" class="content">
-        <m-scroll :length="rankList.length" :limit="4">
+        <m-scroll :length="rankList.length" :limit="3">
           <m-progress
             v-for="rank in rankList"
             :key="rank.name"
             :value="rank.rate"
             :msg="rank"
+            :color="['#FF692D', '#F7973D']"
           />
         </m-scroll>
       </div>
       <m-empty v-else />
     </div>
+    <div class="bar-chart">
+      <m-sub2>居委事件数量</m-sub2>
+      <div v-if="showChart && barOption.series.length > 0" class="chart">
+        <m-bar :dataset="barData" :option="barOption" />
+      </div>
+      <m-empty v-else />
+    </div>
     <div class="place">
-      <SubTitle>多发地点</SubTitle>
+      <m-sub2>多发地点</m-sub2>
       <div v-if="placeList.length > 0" class="content">
         <div v-for="item in placeList" :key="item.name">
-          <Place :data="item" />
+          <p>{{ item.name }}</p>
+          <div>
+            <span>{{ item.type }}</span>
+            <m-count class="count" :value="item.value" />
+          </div>
         </div>
       </div>
       <m-empty v-else />
@@ -71,23 +85,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import Tabs, { TabsProp } from '../components/tabs.vue'
-import SubTitle from '../components/sub-title.vue'
-import Place, { PlaceProp } from '../components/place.vue'
 import store from '@/store'
+import Circle from '../components/circle.vue'
 
 export default defineComponent({
   name: 'DutyAnalysis',
-  components: { Tabs, SubTitle, Place },
+  components: { Circle },
   setup() {
-    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
+    // const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curView.type !== 'street')
-    const curTab = ref('综合')
-    const tabs = ref<TabsProp[]>([
-      { name: '综合管理', key: '综合' },
-      { name: '街面管理', key: '街面' },
-      { name: '小区管理', key: '小区' },
-    ])
     const options = ref([
       { name: '日', key: 'day' },
       { name: '周', key: 'week' },
@@ -95,24 +101,24 @@ export default defineComponent({
     ])
     const curOption = ref('month')
     watch(
-      [() => curTab.value, () => store.state.curView.id],
-      ([type, id]) => {
+      () => store.state.curView.id,
+      (id) => {
         if (!id) return
         store.dispatch('getDutyRank', {
           gridId: id,
-          managementType: type,
+          managementType: '综合',
         })
         store.dispatch('getDutyEvents', {
           gridId: id,
-          managementType: type,
+          managementType: '综合',
         })
         store.dispatch('getDutyPlaces', {
           gridId: id,
-          managementType: type,
+          managementType: '综合',
         })
         store.dispatch('getDutyRanking', {
           gridId: id,
-          managementType: type,
+          managementType: '综合',
         })
       },
       { immediate: true }
@@ -126,6 +132,7 @@ export default defineComponent({
         rate: +Math.ceil((item.num / total) * 100).toFixed(0),
         value: item.num,
         unit: '件',
+        color: '#fff',
       }))
     })
     const placeList = computed(() => {
@@ -174,23 +181,22 @@ export default defineComponent({
       }
     })
     const barOption = computed(() => ({
-      color: ['#5BD5FF', '#6EB629', '#FFCE34', '#FF9D27', '#826AFA'],
+      // color: ['#5BD5FF', '#6EB629', '#FFCE34', '#FF9D27', '#826AFA'],
+      color: [['#FF692D', 'rgba(253,211,116,.5)']],
       legend: {
-        right: '2%',
-        left: '10%',
-        top: '-2%',
-        itemWidth: fontSize.value * 0.6,
-        itemHeight: fontSize.value * 0.6,
+        // right: '2%',
+        // left: '10%',
+        // top: '-2%',
+        // itemWidth: fontSize.value * 0.6,
+        // itemHeight: fontSize.value * 0.6,
+        show: false,
       },
-      grid: { top: '25%', right: '2%' },
+      grid: { top: '5%', right: '2%' },
       series: [
         ...new Array(barData.value.dimensions.length - 1 || 0).keys(),
       ].map(() => ({
-        type: 'bar',
-        barWidth: '10%',
-        itemStyle: { borderRadius: 8 },
-        barGap: 0,
-        stack: '总量',
+        type: 'pictorialBar',
+        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
       })),
     }))
 
@@ -226,10 +232,16 @@ export default defineComponent({
       ],
     })
     return {
+      mock: [
+        { name: '事件类型1', value: 3110, rate: 62 },
+        { name: '事件类型2', value: 3110, rate: 62 },
+        { name: '事件类型3', value: 3110, rate: 62 },
+        { name: '事件类型4', value: 3110, rate: 62 },
+        { name: '事件类型5', value: 3110, rate: 62 },
+        { name: '事件类型6', value: 3110, rate: 62 },
+      ],
       showChart,
       total,
-      curTab,
-      tabs,
       options,
       curOption,
       rankList,
@@ -249,8 +261,7 @@ export default defineComponent({
   width 100%
   display flex
   align-items center
-  justify-content space-between
-  margin .03rem 0
+  justify-content flex-end
   >div
     width 75%
     &:last-child
@@ -258,57 +269,65 @@ export default defineComponent({
       display flex
       >span
         $center()
-        width .22rem
-        height @width
+        width .4rem
+        height .12rem
+        margin-left .04rem
         color $primary-border
-        border .01rem solid @color
         cursor pointer
+        font-size .08rem
+        background rgba(50,197,255,.2)
         &:hover
         &.on
-          color $secondary-color
-          border-color @color
-          background rgba(50,197,255,.2)
+          color #fff
+          background $secondary-color
 .rank
-  min-height 1rem
+  margin-top .3rem
   .content
-    height 1rem
+    height .6rem
     overflow hidden
 .place
+  margin-top .1rem
   .content
     display flex
     justify-content space-between
     >div
       width 32%
       height .6rem
+      background url('@/assets/images/place-bg.png') center / cover no-repeat
+      padding .05rem
+      >div
+        display flex
+        justify-content space-between
+        align-items center
+        margin-top .05rem
+        span
+          color #77bff9
+          border .01rem solid @color
+          background rgba(119, 191, 249, 0.2)
+          font-size .08rem
+          padding 0 .05rem
+        .count
+          font-size .14rem
 .bar-chart
-  height 1.6rem
+  height 1rem
   .chart
     width 100%
     height 90%
 .duty-type
   width 100%
-  height .8rem
+  height 1.2rem
   display flex
-  .chart
-    width 25%
-    height 100%
-  .legend
-    display flex
-    flex-wrap wrap
-    align-items center
-    flex 1
-    font-size .09rem
-    >div
-      min-width 32%
-      margin-left .03rem
-      p
-        span
-          width .06rem
-          height @width
-          display inline-block
-          margin-right .04rem
-          border-radius 50%
-        &:last-child
-          font-size .08rem
-          margin-left .08rem
+  flex-wrap wrap
+  >div
+    width 33.3%
+    text-align center
+    .circle
+      width 100%
+      height 80%
+      background-image url('@/assets/images/circle-bg.png')
+      background-repeat no-repeat
+      background-size 50%
+      background-position 49% 0%
+      .circle-item
+        padding-top 0.04rem
 </style>

src/view/right/duty.vue

 <template>
-  <m-card title="勤务" mode="3">
-    <Brief class="brief" :list="summary" />
-    <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
+  <m-card title="勤务" mode="4">
+    <Brief class="brief" :list="summary" color="#F7933E" />
+    <m-sub2>综合管理</m-sub2>
     <div class="details">
       <m-scroll
         v-if="caseList.length > 0"
         :limit="4"
         :length="caseList.length"
-        :step="1.1"
+        :step="0.88"
         mode="2"
       >
         <div v-for="item in caseList" :key="item.id" class="detail">
@@ -35,15 +35,11 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
 import Brief from '../components/brief.vue'
-import Tabs, { TabsProp } from '../components/tabs.vue'
 import store from '@/store'
-import icon6 from '@/assets/images/icon6.png'
-import icon7 from '@/assets/images/icon7.png'
-import icon8 from '@/assets/images/icon8.png'
 
 export default defineComponent({
   name: 'Duty',
-  components: { Brief, Tabs },
+  components: { Brief },
   setup() {
     const summary = computed(() => {
       const {
@@ -58,35 +54,25 @@ export default defineComponent({
         {
           name: '综合管理',
           value: [comprehensiveEndNum, comprehensiveNum],
-          icon: icon6,
         },
         {
           name: '街面管理',
           value: [streetEndNum, streetNum],
-          icon: icon7,
         },
         {
           name: '小区管理',
           value: [communityEndNum, communityNum],
-          icon: icon8,
         },
       ]
     })
-    const curTab = ref('综合')
-    const tabs = ref<TabsProp[]>([
-      { name: '综合管理', key: '综合' },
-      { name: '街面管理', key: '街面' },
-      { name: '小区管理', key: '小区' },
-    ])
     const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
     const caseList = computed(() => store.state.dutyList)
     watch(
-      [() => curTab.value, () => store.state.curView.id],
-      ([type, id]) => {
+      () => store.state.curView.id,
+      (id) => {
         if (!id) return
         store.dispatch('getDutyList', {
           gridId: id,
-          managementType: type,
           pageSize: 100,
         })
       },
@@ -94,8 +80,6 @@ export default defineComponent({
     )
     return {
       summary,
-      curTab,
-      tabs,
       caseList,
       steps,
     }
@@ -107,34 +91,33 @@ export default defineComponent({
 @import '../../components/MyComponent/main.styl'
 
 .details
-  height 3.6rem
+  height 3.52rem
   overflow hidden
   .detail
     display flex
     flex-direction column
     justify-content space-between
-    padding .1rem
-    background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
-    height 1rem
-    margin-bottom .1rem
+    padding .05rem
+    height .84rem
+    margin-top .04rem
     box-sizing border-box
+    background rgba(70,83,97,.4)
+    box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+    border-radius .03rem
     .title
       display flex
       align-items center
       p
         font-size .12rem
         &:last-child
-          color $edge
           font-size .1rem
       span
-        display block
-        height .01rem
-        background $blue
         flex 1
+        display block
+        border-bottom .01rem dashed $blue
         margin 0 .1rem
     .msg
       $center()
       justify-content space-between
-      color $blue
       font-size .08rem
 </style>

src/view/right/key-task.vue

 <template>
-  <m-card title="重点工作" class="box">
-    <div v-if="showChart" id="cloud" class=""></div>
+  <m-card title="重点工作" class="box" :mode="mode">
+    <div v-if="show" ref="cloudRef" class="cloud" :style="`height:${height}`" />
   </m-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, onMounted, computed } from 'vue'
+import {
+  defineComponent,
+  watch,
+  computed,
+  ref,
+  onMounted,
+  PropType,
+  nextTick,
+  onBeforeUnmount,
+} from 'vue'
 import * as echarts from 'echarts'
-import store from '@/store'
 import 'echarts-wordcloud'
-// import echarts3 from './echart3'
-// import './echarts-wordcloud'
 
 export default defineComponent({
   name: 'KeyTask',
-  setup() {
-    const showChart = computed(() => store.state.curTheme === 'manage')
-
-    // onMounted(() => init())
-    const init = () => {
-      const getHeight = () => {
-        const height = document.documentElement.clientHeight
-        document.documentElement.style.fontsize = height * 0.16 + 'px'
-        // console.log((height * 0.16) / 10 + 'px')
-        return (height * 0.16) / 10
-      }
-      //首次加载是计算
-      const height = getHeight()
-      // console.log(height)
-
-      //添加监听，窗口发生变化时计算
+  props: {
+    mode: {
+      type: String as PropType<string>,
+      default: '2',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '2rem',
+    },
+    color: {
+      type: Array as PropType<string[]>,
+      default: () => {
+        return [
+          '#3a96f5',
+          '#5faaf7',
+          '#78bafe',
+          '#1563f2',
+          '#add2f8',
+          '#e24bf4',
+          '#1acaff',
+          '#ffde00',
+          '#89fda5',
+        ]
+      },
+    },
+    data: {
+      type: Array as PropType<{ name: string; value: number }[]>,
+      default: () => {
+        return [
+          { name: '明厨亮灶', value: 100 },
+          { name: '民宿群租', value: 100 },
+          { name: '垃圾分类', value: 100 },
+          { name: '小型工程纳管', value: 100 },
+          { name: '非机动车停放', value: 100 },
+          { name: '马桶改造', value: 100 },
+          { name: '电梯加装', value: 100 },
+          { name: '居改非', value: 100 },
+          { name: '无证无照整治', value: 100 },
+          { name: '楼道堆物', value: 100 },
+        ]
+      },
+    },
+    show: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    bg: {
+      type: String as PropType<string>,
+      default: '#000',
+    },
+  },
+  setup(props) {
+    const cloudRef = ref<HTMLElement | null>(null)
+    const sizeRate = computed(() => Math.floor((screen.height * 1.6) / 100))
+    onMounted(() => {
       window.addEventListener('resize', init)
       window.addEventListener('orientationchange', init)
-
-      const myChart = echarts.init(document.getElementById('cloud'))
-      const colorList = [
-        '#3a96f5',
-        '#5faaf7',
-        '#78bafe',
-        '#1563f2',
-        '#add2f8',
-        '#e24bf4',
-        '#1acaff',
-        '#ffde00',
-        '#89fda5',
-      ]
-      const keywords = [
-        { name: '明厨亮灶', value: 100 },
-        { name: '民宿群租', value: 100 },
-        { name: '垃圾分类', value: 100 },
-        { name: '小型工程纳管', value: 100 },
-        { name: '非机动车停放', value: 100 },
-        { name: '马桶改造', value: 100 },
-        { name: '电梯加装', value: 100 },
-        { name: '居改非', value: 100 },
-        { name: '无证无照整治', value: 100 },
-        { name: '楼道堆物', value: 100 },
-      ]
+    })
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', init)
+      window.removeEventListener('orientationchange', init)
+    })
+    const init = () => {
+      if (!cloudRef.value) return
+      const myChart = echarts.init(cloudRef.value)
       const option = {
         tooltip: {
-          show: true,
+          show: false,
         },
-        backgroundColor: '#000',
+        backgroundColor: props.bg,
         series: [
           {
             type: 'wordCloud',
-            sizeRange: [height, height * 2],
+            sizeRange: [sizeRate.value, sizeRate.value * 2],
             rotationRange: [0, 0],
             rotationStep: 45,
-            gridSize: height,
+            gridSize: sizeRate.value,
             shape: 'pentagon',
-            width: '90%',
-            height: '95%',
+            width: '100%',
+            height: '100%',
             textStyle: {
               color: function () {
-                const index = Math.floor(Math.random() * colorList.length)
-                return colorList[index]
+                const index = Math.floor(Math.random() * props.color.length)
+                return props.color[index]
               },
               fontWeight: 550,
             },
-            data: keywords,
+            data: props.data,
           },
         ],
       }
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option)
-      window.addEventListener('resize', function () {
-        myChart.resize()
-      })
+      myChart.resize()
     }
 
     watch(
-      [() => showChart.value],
-      ([type]) => {
+      () => props.show,
+      async (type) => {
         if (!type) return
-        setTimeout(() => {
-          init()
-        }, 1900)
+        await nextTick()
+        init()
       },
       { immediate: true }
     )
     return {
-      showChart,
+      cloudRef,
     }
   },
 })
 </script>
 
 <style lang="stylus" scoped>
-.box
-  height 2rem
+.cloud
   width 100%
   box-sizing border-box
   overflow hidden
-  #cloud
-    height 100%
-    width 100%
 </style>

src/view/right/public-manage.vue

@@ -8,23 +8,28 @@
     </m-card>
     <m-card mode="border">
       <div class="first-child"><CaseAnalysis /></div>
-      <div class="second-child"><KeyTask /></div>
+      <div class="second-child"><KeyTask :show="showKeyTask" /></div>
       <div class="third-child"><BussinessEntry /></div>
     </m-card>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 import Complain from './complain.vue'
 import Demand from './demand.vue'
 import CaseAnalysis from './case-analysis.vue'
 import KeyTask from './key-task.vue'
 import BussinessEntry from './business-entry.vue'
+import store from '@/store'
 
 export default defineComponent({
   name: 'PublicMange',
   components: { Complain, Demand, CaseAnalysis, KeyTask, BussinessEntry },
+  setup() {
+    const showKeyTask = computed(() => store.state.curTheme === 'manage')
+    return { showKeyTask }
+  },
 })
 </script>
 

src/view/right/public-work.vue

@@ -2,39 +2,63 @@
   <div class="public-work">
     <m-card mode="border2">
       <div class="convnient"><Convenient /></div>
-      <div class="beauty"><BeautyHome /></div>
+      <div class="beauty"><BeautyHomeInStation /></div>
     </m-card>
     <m-card mode="border2">
       <div class="duty"><Duty /></div>
-      <div class="neighbor"><BussinessEntry /></div>
+      <div class="task">
+        <KeyTask
+          mode="4"
+          :show="showTask"
+          :color="taskColor"
+          height="1rem"
+          :bg="null"
+        />
+      </div>
     </m-card>
     <m-card mode="border2">
       <div class="analysis"><DutyAnalysis /></div>
-      <!-- <div class="task"><KeyTask /></div> -->
+      <div class="entry"><BussinessEntry mode="4" /></div>
     </m-card>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import Convenient from './convenient.vue'
-import BeautyHome from './beauty-home.vue'
+import BeautyHomeInStation from './beauty-home-in-station.vue'
 import Duty from './duty.vue'
-// import NeighborEntry from './neighbor-entry.vue'
-import BussinessEntry from './business-entry.vue'
 import DutyAnalysis from './duty-analysis.vue'
-// import KeyTask from './key-task.vue'
+import KeyTask from './key-task.vue'
+import BussinessEntry from './business-entry.vue'
+import store from '@/store'
 
 export default defineComponent({
   name: 'PublicWork',
   components: {
     Convenient,
-    BeautyHome,
-    // NeighborEntry,
-    BussinessEntry,
+    BeautyHomeInStation,
     Duty,
     DutyAnalysis,
-    // KeyTask,
+    KeyTask,
+    BussinessEntry,
+  },
+  setup() {
+    const showTask = computed(() => store.state.curView.type !== 'street')
+    return {
+      showTask,
+      taskColor: [
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+      ],
+    }
   },
 })
 </script>
@@ -42,26 +66,22 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl';
 
-.public-work {
-  $full();
-  display: flex;
-  justify-content: space-between;
-
-  >div {
-    height: 100%;
-    width: 33%;
-  }
-}
-
-.convenient, .beauty, .duty, .analysis {
-  flex: 1;
-}
+.public-work
+  $full()
+  display flex
+  justify-content space-between
 
-.task {
-  height: 1rem;
-}
+  >div
+    height 100%
+    width 33%
 
-.neighbor {
-  height: 0.8rem;
-}
+// .convenient,
+// .beauty,
+// .duty,
+// .analysis
+//   flex: 1
+.entry
+.task
+  flex 1
+  // height 1.28rem
 </style>

vetur.config.js

@@ -96,6 +96,10 @@ module.exports = {
           name: 'm-sub',
           path: './src/components/MyComponent/MySub/my-sub.vue',
         },
+        {
+          name: 'm-sub2',
+          path: './src/components/MyComponent/MySub/my-sub2.vue',
+        },
         {
           name: 'm-drawer',
           path: './src/components/MyComponent/MyDrawer/my-drawer.vue',