修改&调整

546731f5 · 郭铭瑶 · c5e14095 · 546731f5 · 546731f5 · 546731f5
Commit 546731f5 authored May 13, 2021 by 郭铭瑶 🤘
37 changed files
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,6 +31,9 @@ export default defineComponent({
 @font-face
  font-family ZCool
  src url(./assets/font/zcool.ttf)
+@font-face
+  font-family Barlow
+  src url(./assets/font/Barlow-ExtraBoldItalic.ttf)

 html, body
  background #001220

--- a/src/assets/font/Barlow-ExtraBoldItalic.ttf
+++ b/src/assets/font/Barlow-ExtraBoldItalic.ttf
--- a/src/assets/images/entry-card.png
+++ b/src/assets/images/entry-card.png
--- a/src/assets/images/title-dec.png
+++ b/src/assets/images/title-dec.png
--- a/src/assets/style/reset.styl
+++ b/src/assets/style/reset.styl
@@ -2,11 +2,18 @@
 $color-main = #5BD5FF

 #app
+  .orange-count
+    font-size .16rem
+    background-clip text
+    -webkit-background-clip text
+    -webkit-text-fill-color transparent
+    background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
  .ant-progress-circle
    .ant-progress-text
      color #fff
-      font-size 0.12rem
+      font-size 0.14rem
      font-weight bold
+      font-family $font-barlow
  .ant-select
    z-index 99
    font-size .08rem

--- a/src/components/MyComponent/MyCard/mode-2.vue
+++ b/src/components/MyComponent/MyCard/mode-2.vue
@@ -77,7 +77,7 @@ export default defineComponent({
      .count
        color $yellow
        font-size .15rem
-        font-family $font-pang
+        font-family $font-barlow
        padding-bottom .03rem
      span
        color #aaa

--- a/src/components/MyComponent/MyCard/mode-4.vue
+++ b/src/components/MyComponent/MyCard/mode-4.vue
@@ -70,7 +70,7 @@ export default defineComponent({
    justify-content space-between
    background linear-gradient(to right, rgba(59,85,102,.8), transparent)
    position relative
-    border-bottom .01rem solid rgba(105,110,114,.15)
+    border-bottom .01rem solid rgba(105,110,114,.3)
    margin-bottom .05rem
    padding 0 .1rem
    &:before
@@ -90,7 +90,7 @@ export default defineComponent({
      span
        cursor pointer
        margin-left .05rem
-        color $primary-border
+        color $edge
        &:hover
        &.on
          color #fff

--- a/src/components/MyComponent/MyChart/my-radar.vue
+++ b/src/components/MyComponent/MyChart/my-radar.vue
@@ -38,12 +38,13 @@ export default defineComponent({
        containLabel: true,
      },
      radar: {
+        splitNumber: 2,
        axisName: {
          // show: false,
-          color: 'transparent',
+          // color: 'transparent',
          textStyle: {
            color: '#fff',
-            backgroundColor: 'rgba(255,255,255,.3)',
+            backgroundColor: 'rgba(255,255,255,.5)',
            borderRadius: 3,
            padding: [3, 5],
          },
@@ -53,9 +54,9 @@ export default defineComponent({
          show: true,
          areaStyle: {
            color: [
-              'rgba(1,124,143,.9)',
-              'rgba(1,124,143,.7)',
-              'rgba(1,124,143,.5)',
+              // 'rgba(1,124,143,.9)',
+              // 'rgba(1,124,143,.7)',
+              // 'rgba(1,124,143,.5)',
              'rgba(1,124,143,.3)',
              'rgba(1,124,143,.1)',
            ],
@@ -68,15 +69,20 @@ export default defineComponent({
          },
        },
        axisLine: {
-          show: false,
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(255,255,255,.3)',
+          },
        },
-        center: ['50%', '55%'],
+        center: ['50%', '60%'],
        radius: '55%',
      },
    }
    const defaultSeriesItem = {
      type: 'radar',
      symbol: 'none',
+      smooth: true,
      areaStyle: {
        opacity: 0.5,
      },

--- a/src/components/MyComponent/MySub/my-sub.vue
+++ b/src/components/MyComponent/MySub/my-sub.vue
@@ -103,7 +103,7 @@ export default defineComponent({
      .count
        color $yellow
        font-size .15rem
-        font-family $font-pang
+        font-family $font-barlow
        padding-bottom .03rem
      span
        color #aaa

--- a/src/components/MyComponent/MySub/my-sub2.vue
+++ b/src/components/MyComponent/MySub/my-sub2.vue
@@ -6,6 +6,7 @@
      <div v-if="addition" class="addition">
        <MyCount v-if="addition.value" class="count" :value="addition.value" />
        <span v-if="addition.unit">{{ addition.unit }}</span>
+        <img src="@/assets/images/title-dec.png" />
      </div>
      <input
        v-if="searchAble"
@@ -98,14 +99,17 @@ export default defineComponent({
      align-items center
      margin-left .1rem
      .count
-        color $yellow
+        // color $yellow
        font-size .15rem
-        font-family $font-pang
+        font-family $font-barlow
        padding-bottom .03rem
      span
        color #aaa
        font-size .08rem
        margin-left .05rem
+      img
+        width .3rem
+        margin-left .1rem
    .search-bar
      display block
      width 0

--- a/src/components/MyComponent/main.styl
+++ b/src/components/MyComponent/main.styl
@@ -2,6 +2,7 @@ $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
 $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
 $font-weibei = WeiBei, 'Avenir', Helvetica, Arial, sans-serif
 $font-zcool = ZCool, 'Avenir', Helvetica, Arial, sans-serif
+$font-barlow = Barlow, 'Avenir', Helvetica, Arial, sans-serif

 $full(w = 100%, h = 100%)
  width w

--- a/src/view/community/left-section.vue
+++ b/src/view/community/left-section.vue
@@ -271,7 +271,7 @@ export default defineComponent({
          .count
            color #fff
            font-size .2rem
-            font-family $font-pang
+            font-family $font-barlow

 .buildings
  display flex

--- a/src/view/community/manage-issue.vue
+++ b/src/view/community/manage-issue.vue
@@ -15,7 +15,7 @@
    <div class="counts">
      <div v-for="item in counts" :key="item.name">
        <Circle
-          :value="item.value"
+          :value="+item.value"
          type="dashboard"
          :show-info="false"
          :color="[getColor(item.value), '#F76B1C']"
@@ -174,7 +174,7 @@ export default defineComponent({
    .count
      color #fff
      font-size .16rem
-      font-family $font-pang
+      font-family $font-barlow
 .counts
  display flex
  margin-top .1rem
@@ -190,7 +190,7 @@ export default defineComponent({
    color #ccc
    .count
      font-size .18rem
-      font-family $font-pang
+      font-family $font-barlow
      font-weight 500
 .chart
  height 1.5rem
@@ -217,7 +217,7 @@ export default defineComponent({
      font-size .08rem
      color $blue
      .count
-        font-family $font-pang
+        font-family $font-barlow
        font-size .16rem
        color #fff
 </style>
--- a/src/view/components/brief.vue
+++ b/src/view/components/brief.vue
@@ -9,7 +9,7 @@
      <div v-if="Array.isArray(item.value)">
        <div class="count-group">
          <m-count
-            class="count yellow"
+            class="count orange-count"
            :value="item.value[0]"
            :style="{ color: color }"
          />
@@ -19,11 +19,7 @@
        <p>{{ item.name }}</p>
      </div>
      <div v-else :class="{ center: !item.icon }">
-        <m-count
-          class="count yellow"
-          :style="{ color: color }"
-          :value="item.value"
-        />
+        <m-count class="count" :style="{ color: color }" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
@@ -68,10 +64,8 @@ export default defineComponent({
  align-items center
  white-space nowrap
  .count
-    font-size .11rem
-    &.yellow
-      font-size .13rem
-      color $yellow
+    font-family $font-barlow
+    font-size .14rem
  &.vertical
    display inline-block
  >div

--- a/src/view/components/summary.vue
+++ b/src/view/components/summary.vue
@@ -3,7 +3,7 @@
    <div v-for="(item, i) in list" :key="item.name">
      <p>
        <img v-if="avatar && i === 0" :src="avatar" />
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <span class="unit">{{ item.unit }}</span>
      </p>
      <p>{{ item.name }}</p>
@@ -72,7 +72,7 @@ $create-border()
        $create-border()
    p
      .count
-        font-family $font-pang
+        font-family $font-barlow
        font-size .12rem
        margin-right .01rem
        color $orange

--- a/src/view/left/command.vue
+++ b/src/view/left/command.vue
@@ -25,8 +25,8 @@
        <div v-for="item in dutyTableData" :key="item.group" class="card">
          <div class="title">
            {{ item.group }}
-            <span />
-            <p><m-count :value="item.number" /><b>人</b></p>
+            <i />
+            <p><m-count class="count" :value="item.number" /><span>人</span></p>
          </div>
          <div class="content">
            <p>日班：{{ item.workTimeDay }}</p>
@@ -362,17 +362,24 @@ export default defineComponent({
      align-items center
      font-size .11rem
      font-weight bold
-      span
+      .count
+        font-family $font-barlow
+        font-size .12rem
+      i
        flex 1
        margin 0 .1rem
        height 0
        border-bottom .01rem dashed $primary-border
-      i
-        font-size .09rem
+      span
+        font-size .08rem
+        color #999
    .content
      display flex
      align-items center
      justify-content space-between
+      p
+        &:first-child
+          color #ccc
 .party
  display flex
  height 100%

--- a/src/view/left/manage-basic.vue
+++ b/src/view/left/manage-basic.vue
@@ -162,6 +162,16 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'

+$dot()
+  content ''
+  display inline-block
+  width .02rem
+  height @width
+  background #5BD5FF
+  box-shadow 0 0 .03rem .02rem #5BD5FF
+  border-radius 50%
+  margin 0 .05rem
+  transform translateY(-100%)
 .card
  flex 1.8
  &:nth-of-type(2)
@@ -178,24 +188,39 @@ export default defineComponent({
      top .1rem
      left .3rem
      text-align right
+      p
+        &:first-child
+          &:after
+            $dot()
    &:nth-of-type(2)
      top .1rem
      right .3rem
+      p
+        &:first-child
+          &:before
+            $dot()
    &:nth-of-type(3)
      bottom .1rem
      left .3rem
      text-align right
+      p
+        &:first-child
+          &:after
+            $dot()
    &:nth-of-type(4)
      bottom .1rem
      right .3rem
+      p
+        &:first-child
+          &:before
+            $dot()
    img
      width .26rem
      height @width
      margin-right .1rem
    .count
-      color $yellow
      font-size .14rem
-      font-family $font-pang
+      font-family $font-barlow
      margin-right .05rem
    span
      color #aaa
@@ -241,4 +266,7 @@ export default defineComponent({
    background rgba(70,83,97,.4)
    box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
    border-radius .03rem
+    p
+      &:first-child
+        color #ccc
 </style>
--- a/src/view/right/beauty-home-in-station.vue
+++ b/src/view/right/beauty-home-in-station.vue
@@ -3,7 +3,7 @@
    <m-sub2>项目实施情况</m-sub2>
    <div class="summary">
      <div v-for="item in summary" :key="item.name">
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
@@ -14,12 +14,12 @@
      </div>
    </div>
    <m-sub2 :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub2>
-    <div v-if="curViewType === 'street'" class="sum-card">
+    <!-- <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>
+    </div> -->
    <m-sub2>马桶改造</m-sub2>
    <Brief :list="toiletSituation" color="#fff" />
    <m-progress
@@ -152,7 +152,7 @@ export default defineComponent({
    position relative
    .count
      font-size .12rem
-      font-weight bold
+      font-family $font-barlow
    p
      color #ccc
      font-size .09rem

--- a/src/view/right/beauty-home.vue
+++ b/src/view/right/beauty-home.vue
@@ -3,17 +3,17 @@
    <m-sub2>项目实施情况</m-sub2>
    <div class="summary">
      <div v-for="item in summary" :key="item.name">
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <Brief :list="situation" color="#fff" />
-    <div v-if="curViewType !== 'street'" class="sum-card work-station">
+    <!-- <div v-if="curViewType !== 'street'" class="sum-card work-station">
      <div v-for="item in workStationProjects" :key="item.name">
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
-    </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">
@@ -104,8 +104,7 @@ export default defineComponent({
    padding .05rem
    .count
      font-size .14rem
-      color $orange
-      font-family $font-pang
+      font-family $font-barlow
      margin-right .03rem
    p
      font-size .09rem

--- a/src/view/right/beauty-street.vue
+++ b/src/view/right/beauty-street.vue
@@ -3,7 +3,7 @@
    <m-sub2>项目实施情况</m-sub2>
    <div class="summary">
      <div v-for="item in summary" :key="item.name">
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
@@ -110,14 +110,13 @@ export default defineComponent({
    padding .05rem
    .count
      font-size .14rem
-      color $orange
-      font-family $font-pang
+      font-family $font-barlow
      margin-right .03rem
    p
      font-size .09rem
 .chart
  width 100%
-  height 1rem
+  height 1.2rem
  margin-bottom .1rem
  position relative
 </style>

--- a/src/view/right/business-entry.vue
+++ b/src/view/right/business-entry.vue
@@ -48,12 +48,13 @@ export default defineComponent({
  width 100%
  height 100%
  display flex
+  flex-direction column
  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
+    height 40%
+    width 80%
+    background url('@/assets/images/entry-card.png') 100% / 100% 100% no-repeat
    display flex
    align-items center
    justify-content center

--- a/src/view/right/case-analysis.vue
+++ b/src/view/right/case-analysis.vue
@@ -15,15 +15,13 @@
        </div>
      </div>
      <div v-if="rankList.length > 0" class="content">
-        <m-scroll :length="rankList.length" :limit="4">
-          <m-progress
-            v-for="rank in rankList"
-            :key="rank.name"
-            :value="rank.rate"
-            :msg="rank"
-            :color="['#FF692D', '#F7973D']"
-          />
-        </m-scroll>
+        <div v-for="item in rankList" :key="item.name">
+          <span>{{ item.name }}</span>
+          <div v-if="showChart" class="progress">
+            <m-progress :color="['#FF692D', '#F7973D']" :value="item.rate" />
+          </div>
+          <m-count class="count" :value="item.value" />
+        </div>
      </div>
      <m-empty v-else />
    </div>
@@ -44,13 +42,11 @@

 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
-import SubTitle from '../components/sub-title.vue'
-import Place from '../components/place.vue'
 import store from '@/store'
 export default defineComponent({
  name: 'CaseAnalysis',
-  components: { SubTitle, Place },
  setup() {
+    const showChart = computed(() => store.state.curTheme === 'manage')
    const options = ref([
      { name: '日', key: 'day' },
      { name: '周', key: 'week' },
@@ -76,10 +72,9 @@ export default defineComponent({
      const data = store.state.analysisRank[curOption.value] || []
      const total = data.reduce((acc, cur) => acc + cur.num, 0)
      return data.map((item: any) => ({
-        name: item.businsessType || item.businessType,
+        name: item.managementType,
        rate: +Math.ceil((item.num / total) * 100).toFixed(0),
        value: item.num,
-        unit: '件',
      }))
    })

@@ -93,6 +88,7 @@ export default defineComponent({
    })

    return {
+      showChart,
      options,
      curOption,
      rankList,
@@ -131,10 +127,23 @@ export default defineComponent({
            background $secondary-color
  .rank
    overflow hidden
-    // height 1rem
    .content
-      height 1.2rem
-      overflow hidden
+      height .8rem
+      display flex
+      flex-direction column
+      justify-content space-around
+      >div
+        display flex
+        align-items center
+        justify-content space-between
+        .progress
+          flex 1
+          margin 0 .1rem
+        span
+          color #ccc
+        .count
+          font-family $font-barlow
+          font-size .12rem
  .place
    .content
      display flex

--- a/src/view/right/company.vue
+++ b/src/view/right/company.vue
@@ -5,7 +5,7 @@
    </m-sub2>
    <div class="sum">
      <div v-for="item in sum" :key="item.name">
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <p>
          {{ item.name }}
          <!-- <img v-if="item.icon" :src="item.icon" /> -->
@@ -92,8 +92,7 @@ export default defineComponent({
    align-items center
    .count
      font-size 0.14rem
-      font-family $fong-pang
-      color $orange
+      font-family $font-barlow
      margin-right .05rem
    p
      color #ccc
@@ -110,7 +109,10 @@ export default defineComponent({
    .progress
      flex 1
      margin 0 .05rem
-    span,
+    span
+      min-width .5rem
    .count
      min-width .5rem
+      font-family $font-barlow
+      font-size .12rem
 </style>
--- a/src/view/right/complain.vue
+++ b/src/view/right/complain.vue
@@ -18,18 +18,18 @@
          </div>
          <m-sub2>分类排行</m-sub2>
          <div class="chart wrapper">
-            <div v-if="showChart">
-              <m-radar :dataset="classChartData" :option="chartOption2" />
-            </div>
            <div>
              <p v-for="item in classChartData.dimensions" :key="item.name">
-                <i />
-                <span>{{ item.displayName }}：</span>
-                <span> {{ classChartData.source[0][item.name] }}</span>
-                <!-- <span /> {{ item.displayName }}：
-                {{ classChartData.source[0][item.name] }} -->
+                {{ item.displayName }}
+                <m-count
+                  class="count"
+                  :value="classChartData.source[0][item.name]"
+                />
              </p>
            </div>
+            <div v-if="showChart">
+              <m-radar :dataset="classChartData" :option="chartOption2" />
+            </div>
          </div>
        </div>
      </div>
@@ -85,119 +85,80 @@ export default defineComponent({
    const rank = computed(() => store.state.yousubidaRank)
    const classificationRank = computed(() => store.state.classificationRank)
    const urgentCase = computed(() => store.state.urgentCase)
-
-    // console.log(urgentCase)
-
    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
    const showChart = computed(() => store.state.curTheme === 'manage')
-
    const summary = computed(() => {
-      // console.log(rank.value.streetDispatchNum)
-      // console.log(rank.value.streetNum)
-      // console.log(rank.value.streetDispatchNum / rank.value.streetNum)
+      const {
+        streetDispatchNum = 0,
+        streetNum = 0,
+        comprehensiveDispatchNum = 0,
+        comprehensiveNum = 0,
+        communityDispatchNum = 0,
+        communityNum = 0,
+      } = rank.value
      return [
        {
          name: '街面管理',
-          value: rank.value.streetDispatchNum,
-          percent: parseInt(
-            (rank.value.streetDispatchNum / rank.value.streetNum) * 100
-          ),
+          value: streetDispatchNum,
+          percent: streetNum
+            ? Math.floor((streetDispatchNum / streetNum) * 100)
+            : 0,
        },
        {
          name: '综合管理',
-          value: rank.value.communityNum,
-          percent:
-            (rank.value.comprehensiveDispatchNum /
-              rank.value.comprehensiveNum) *
-            100,
+          value: communityNum,
+          percent: comprehensiveNum
+            ? Math.floor(comprehensiveDispatchNum / comprehensiveNum) * 100
+            : 0,
        },
        {
          name: '小区管理',
-          value: rank.value.communityDispatchNum,
-          percent: parseInt(
-            (rank.value.communityDispatchNum / rank.value.communityNum) * 100
-          ),
+          value: communityDispatchNum,
+          percent: communityNum
+            ? Math.floor((communityDispatchNum / communityNum) * 100)
+            : 0,
        },
      ]
    })

-    const tabList = ref([
-      {
-        key: '综合',
-        name: '综合管理',
-      },
-      {
-        key: '街面',
-        name: '街面管理',
-      },
-      {
-        key: '小区',
-        name: '小区管理',
-      },
-    ])
-    const tabKey = ref('综合')
-
-    const getCurTabKey = (item: string) => {
-      tabKey.value = item
-      store.dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', item)
-    }
    const classChartData = ref({
      dimensions: [
-        { name: 'class1', displayName: '分类1', max: 500 },
-        { name: 'class2', displayName: '分类2', max: 500 },
-        { name: 'class3', displayName: '分类3', max: 500 },
-        { name: 'class4', displayName: '分类4', max: 500 },
-        { name: 'class5', displayName: '分类5', max: 500 },
+        { name: 'class1', displayName: '分类1', max: 100 },
+        { name: 'class2', displayName: '分类2', max: 100 },
+        { name: 'class3', displayName: '分类3', max: 100 },
      ],
      source: [
        {
          seriesName: '分类排行',
-          class1: 250,
-          class2: 200,
-          class3: 200,
-          class4: 300,
-          class5: 230,
+          class1: 0,
+          class2: 0,
+          class3: 0,
        },
      ],
    })

    // 监听年份切花更改检查楼数  隐患点数 危险点数
    watch(
-      [() => classificationRank.value, () => tabKey.value],
-      ([data, key]) => {
-        // console.log(data, key)
-        if (data.length === 0) return
-
-        const dimensions = [
-          { name: 'class1', displayName: '分类1', max: 100 },
-          { name: 'class2', displayName: '其他', max: 100 },
-          { name: 'class3', displayName: '其他', max: 100 },
-          { name: 'class4', displayName: '其他', max: 100 },
-          { name: 'class5', displayName: '其他', max: 100 },
-        ]
-
-        const source = [
+      () => classificationRank.value,
+      (data) => {
+        if (!data || data.length === 0) return
+        const source: any = [
          {
            seriesName: '分类排行',
            class1: 0,
            class2: 0,
            class3: 0,
-            class4: 0,
-            class5: 0,
          },
        ]
-
-        let max = data[0].num
-        for (let i = 0; i < data.length - 1; i++) {
-          max = max < data[i + 1].num ? data[i + 1].num : max
+        const dimensions = data.map((item, index) => {
+          const name = `class${index + 1}`
+          source[0][name] = item.num
+          return {
+            name,
+            displayName: item.managementType,
+            max: 150,
          }
-
-        data.forEach((item, index) => {
-          dimensions[index].displayName = item.businsessType
-          dimensions[index].max = max
-          source[0]['class' + ++index] = item.num
        })
-
        classChartData.value = {
          dimensions,
          source,
@@ -232,7 +193,7 @@ export default defineComponent({
    })

    const chartOption2 = ref({
-      color: ['#FF9D27'],
+      color: [['#FBFF00', '#FFB100']],
      legend: { show: false },
      radar: {
        radius: '80%',
@@ -241,14 +202,12 @@ export default defineComponent({
    return {
      summary,
      showChart,
-      tabList,
      responseChartData,
      chartOption,
      classChartData,
      chartOption2,
      rank,
      urgentCase,
-      getCurTabKey,
    }
  },
 })
@@ -275,8 +234,8 @@ export default defineComponent({
      >div
        margin-left 0.05rem
        .count
-          font-size 0.12rem
-          font-weight bold
+          font-family $font-barlow
+          font-size 0.14rem
        p
          color #ccc
  .manage
@@ -293,32 +252,16 @@ export default defineComponent({
          >div
            width 50%
            height 100%
-            &:last-child
+            &:first-child
              $center()
              flex-direction column
              p
-                display flex
-                align-items center
-                width 100%
-                i
-                  display inline-block
-                  width 0.06rem
-                  height @width
-                  border-radius 50%
-                  margin-right 0.1rem
-                  background #826AFA
-                &:nth-of-type(2) > i
-                  background #E02020
-                &:nth-of-type(3) > i
-                  background #F7B500
-                &:nth-of-type(4) > i
-                  background #6DD400
-                &:nth-of-type(5) > i
-                  background #32C5FF
-                span
-                  flex 4
-                  &:last-child
-                    flex 1
+                width 60%
+                margin 0 auto
+                .count
+                  font-family $font-barlow
+                  font-size .12rem
+                  margin-left .1rem
  .emergency
    height 1.22rem
    overflow hidden

--- a/src/view/right/demand.vue
+++ b/src/view/right/demand.vue
@@ -22,9 +22,6 @@
      </div>
      <div class="chart wrapper">
        <img src="@/assets/images/pyramid.png" />
-        <!-- <div v-if="showChart">
-          <m-pie :option="pieOption" :dataset="pieData" />
-        </div> -->
        <div>
          <p v-for="item in pieData" :key="item.name">
            <span :style="{ background: item.color }" />
@@ -194,6 +191,14 @@ export default defineComponent({
        itemWidth: fontSize.value * 0.6,
        itemHeight: fontSize.value * 0.8,
      },
+      xAxis: {
+        axisLabel: {
+          formatter: (value: string) => {
+            const arr = value.split('-')
+            return `${arr[1]}.${arr[2]}`
+          },
+        },
+      },
      series: [1, 2, 3].map(() => ({
        type: 'bar',
        barWidth: '18%',
@@ -205,84 +210,36 @@ export default defineComponent({
      })),
    })
    const pieData = computed(() => {
+      const {
+        oneDisposalNum = 0,
+        oneNum = 0,
+        twoDisposalNum = 0,
+        twoNum = 0,
+        threeDisposalNum = 0,
+        threeNum = 0,
+      } = pieDatamodel.value
      return [
        {
          name: '第一工作站',
-          value:
-            parseInt(
-              (pieDatamodel.value.oneDisposalNum / pieDatamodel.value.oneNum) *
-                100
-            ) || 0,
-          num: pieDatamodel.value.oneNum,
+          value: oneNum ? Math.floor((oneDisposalNum / oneNum) * 100) : 0,
+          num: oneNum,
          color: '#FE9B5F',
        },
        {
          name: '第二工作站',
-          value:
-            parseInt(
-              (pieDatamodel.value.twoDisposalNum / pieDatamodel.value.twoNum) *
-                100
-            ) || 0,
-          num: pieDatamodel.value.twoNum,
+          value: twoNum ? Math.floor((twoDisposalNum / twoNum) * 100) : 0,
+          num: twoNum,
          color: '#36CFE1',
        },
        {
          name: '第三工作站',
-          value:
-            parseInt(
-              (pieDatamodel.value.threeDisposalNum /
-                pieDatamodel.value.threeNum) *
-                100
-            ) || 0,
-          num: pieDatamodel.value.threeNum,
+          value: threeNum ? Math.floor((threeDisposalNum / threeNum) * 100) : 0,
+          num: threeNum,
          color: '#429BDF',
        },
      ]
    })
-    const pieSeries = computed(() => {
-      return pieData.value.map((item, i) => {
-        const rate =
-          Math.round((pieData.value.length - i) * fontSize.value) + 10
-        const borderWidth = fontSize.value * 0.6
-        return {
-          type: 'pie',
-          name: item.name,
-          clockwise: false, //顺时加载
-          radius: [rate, rate],
-          label: {
-            show: false,
-          },
-          itemStyle: {
-            borderWidth,
-            borderColor: item.color,
-          },
-          data: [
-            item,
-            {
-              value: 100 - item.value,
-              name: '',
-              tooltip: { show: false },
-              label: {
-                show: false,
-              },
-              itemStyle: {
-                color: 'transparent',
-                borderColor: item.color,
-                opacity: 0.1,
-              },
-            },
-          ],
-        }
-      })
-    })
-    const pieOption = computed(() => ({
-      legend: {
-        show: false,
-      },
-      series: pieSeries.value,
-    }))
    const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
-
    const searchCase = (key: string) => {
      console.log('searck key: ', key)
    }
@@ -294,7 +251,6 @@ export default defineComponent({
      barData,
      barOption,
      pieData,
-      pieOption,
      steps,
      // caseList,
      searchCase,
@@ -360,8 +316,7 @@ $arrow-style()
        width 36%
        margin-right .28rem
      >div
-        width 50%
-        height 100%
+        flex 1
        font-weight bold
        &:last-child
          $center()

--- a/src/view/right/duty-analysis.vue
+++ b/src/view/right/duty-analysis.vue
@@ -19,7 +19,7 @@
          <div class="circle">
            <Circle
              class="circle-item"
-              :value="item.rate"
+              :value="+item.rate"
              :stroke-width="8"
              :color="['#F7933E', 'rgba(253,211,116,.9)']"
              :rate="2.4"
@@ -48,15 +48,13 @@
    <div class="rank">
      <m-sub2>分类排行</m-sub2>
      <div v-if="rankList.length > 0" class="content">
-        <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 v-for="item in rankList" :key="item.name">
+          <span>{{ item.name }}</span>
+          <div v-if="showChart" class="progress">
+            <m-progress :color="['#FF692D', '#F7973D']" :value="item.rate" />
+          </div>
+          <m-count class="count" :value="item.value" />
+        </div>
      </div>
      <m-empty v-else />
    </div>
@@ -128,7 +126,7 @@ export default defineComponent({
      const data = store.state.dutyRanking[curOption.value] || []
      const total = data.reduce((acc, cur) => acc + cur.num, 0)
      return data.map((item: any) => ({
-        name: item.businsessType || item.businessType,
+        name: item.managementType,
        rate: +Math.ceil((item.num / total) * 100).toFixed(0),
        value: item.num,
        unit: '件',
@@ -236,9 +234,6 @@ export default defineComponent({
        { 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,
@@ -281,10 +276,24 @@ export default defineComponent({
          color #fff
          background $secondary-color
 .rank
-  margin-top .3rem
+  margin-top .2rem
  .content
-    height .6rem
-    overflow hidden
+    height .8rem
+    display flex
+    flex-direction column
+    justify-content space-around
+    >div
+      display flex
+      align-items center
+      justify-content space-between
+      .progress
+        flex 1
+        margin 0 .1rem
+      span
+        color #ccc
+      .count
+        font-family $font-barlow
+        font-size .12rem
 .place
  margin-top .1rem
  .content
@@ -315,7 +324,7 @@ export default defineComponent({
    height 90%
 .duty-type
  width 100%
-  height 1.2rem
+  height .6rem
  display flex
  flex-wrap wrap
  >div

--- a/src/view/right/duty.vue
+++ b/src/view/right/duty.vue
@@ -5,7 +5,7 @@
    <div class="details">
      <m-scroll
        v-if="caseList.length > 0"
-        :limit="4"
+        :limit="3"
        :length="caseList.length"
        :step="0.88"
        mode="2"
@@ -91,7 +91,7 @@ export default defineComponent({
 @import '../../components/MyComponent/main.styl'

 .details
-  height 3.52rem
+  height 2.64rem
  overflow hidden
  .detail
    display flex

--- a/src/view/right/ecology.vue
+++ b/src/view/right/ecology.vue
@@ -2,7 +2,7 @@
  <m-card title="生态">
    <div class="detail">
      <div v-for="item in ecologyList" :key="item.name">
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
@@ -96,8 +96,7 @@ export default defineComponent({
    align-items center
  .count
    font-size .14rem
-    font-family $font-pang
-    color $orange
+    font-family $font-barlow
    margin-right .08rem
 .sum
  display flex
@@ -106,13 +105,14 @@ export default defineComponent({
    display flex
    align-items center
    width 33.3%
-    margin .05rem 0
+    margin .02rem 0
    img
      width .26rem
      height @width
      margin 0 .1rem 0 .05rem
    .count
-      font-size .12rem
+      font-size .14rem
+      font-family $font-barlow
    p
      color #ccc
 .photos

--- a/src/view/right/emergency-store.vue
+++ b/src/view/right/emergency-store.vue
@@ -2,7 +2,7 @@
  <m-card title="应急物资储备" style="height: 1rem">
    <div class="emergency">
      <div v-for="(item, index) in list" :key="index">
-        <m-count class="count" :value="item.value" />
+        <m-count class="count orange-count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
@@ -41,7 +41,7 @@
      </div>
      <div class="bottom-box">
        <m-sub2>重点关注楼宇</m-sub2>
-        <a class="check-btn" @click="listModal = true">查看清单</a>
+        <a class="check-btn" @click="listModal = true">查看清单>></a>
        <div class="content">
          <div v-for="item in buildings.slice(0, 9)" :key="item.id">
            <div>
@@ -94,7 +94,6 @@
 import { defineComponent, watch, computed, ref } from 'vue'
 import store from '@/store'
 import Summary from '../components/summary.vue'
-import SubTitle from '../components/sub-title.vue'
 import avatar8 from '@/assets/images/avatar8.png'
 import one from '@/assets/images/1.png'
 import two from '@/assets/images/2.png'
@@ -102,7 +101,7 @@ import three from '@/assets/images/3.png'

 export default defineComponent({
  name: 'EmergencyStore',
-  components: { Summary, SubTitle },
+  components: { Summary },
  setup() {
    const showChart = computed(() => store.state.curTheme === 'safety')
    store.dispatch('GET_PUBLICSAFE_SOS_MATERIAL')
@@ -300,9 +299,8 @@ export default defineComponent({
    justify-content space-around
    width 20%
    .count
-      font-family $font-pang
+      font-family $font-barlow
      font-size .14rem
-      color $orange
 .out-house
  flex 1
  .chart-container
@@ -321,7 +319,7 @@ export default defineComponent({
          margin-right .05rem
        .count
          font-size .12rem
-          font-weight bold
+          font-family $font-barlow
    .chart
      width 75%
      height 100%
@@ -339,11 +337,14 @@ export default defineComponent({
      flex-wrap wrap
      >div
        width 31%
-        $card-bg2()
        padding .05rem .08rem
        margin-top .08rem
+        border-radius .03rem
+        background linear-gradient(to right bottom, rgba(124,139,154,.3), rgba(70,83,97,.3))
+        box-shadow 0 0 .4rem 0 rgba(45,51,66,.5)
        .count
          font-size 0.12rem
+          font-family $font-barlow
        >div
          display flex
          align-items center
@@ -358,7 +359,7 @@ export default defineComponent({
            color #ccc
            &:last-child
              .count
-                color $red
+                color #FF5C5C
            .count
              color #fff
              margin-left .05rem

--- a/src/view/right/house.vue
+++ b/src/view/right/house.vue
@@ -167,7 +167,7 @@ export default defineComponent({
  color #eee
  .count
    font-size 0.14rem
-    font-family $font-pang
+    font-family $font-barlow
  .unit
    color #aaa
    font-size 0.08rem
@@ -186,8 +186,8 @@ export default defineComponent({
    >div
      margin-left 0.05rem
      .count
-        font-size 0.12rem
-        font-weight bold
+        font-size 0.14rem
+        font-family $font-barlow
      p
        color #ccc
 </style>
--- a/src/view/right/key-task.vue
+++ b/src/view/right/key-task.vue
 <template>
-  <m-card title="重点工作" class="box" :mode="mode">
-    <div v-if="show" ref="cloudRef" class="cloud" :style="`height:${height}`" />
+  <m-card title="重点工作" class="box" :mode="mode" :no-bg="false">
+    <div v-if="show" ref="cloudRef" class="cloud" />
  </m-card>
 </template>

@@ -49,16 +49,27 @@ export default defineComponent({
      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 },
+          { name: '明厨亮灶', value: 100 * Math.random() },
+          { name: '民宿群租', value: 100 * Math.random() },
+          { name: '垃圾分类', value: 100 * Math.random() },
+          { name: '小型工程纳管', value: 100 * Math.random() },
+          { name: '非机动车停放', value: 100 * Math.random() },
+          { name: '马桶改造', value: 100 * Math.random() },
+          { name: '电梯加装', value: 100 * Math.random() },
+          { name: '居改非', value: 100 * Math.random() },
+          { name: '无证无照整治', value: 100 * Math.random() },
+          { name: '楼道堆物', value: 100 * Math.random() },
+          { name: '党建联建', value: 100 * Math.random() },
+          { name: '动迁改造', value: 100 * Math.random() },
+          { name: '文明城区创建', value: 100 * Math.random() },
+          { name: '重塑老城厢', value: 100 * Math.random() },
+          { name: '推动商旅文联动', value: 100 * Math.random() },
+          { name: '水环境治理', value: 100 * Math.random() },
+          { name: '供水防涝', value: 100 * Math.random() },
+          { name: '美丽街区', value: 100 * Math.random() },
+          { name: '美丽家园', value: 100 * Math.random() },
+          { name: '非机动车安全管理', value: 100 * Math.random() },
+          { name: '房屋隐患排查', value: 100 * Math.random() },
        ]
      },
    },
@@ -94,16 +105,17 @@ export default defineComponent({
          {
            type: 'wordCloud',
            sizeRange: [sizeRate.value, sizeRate.value * 2.2],
-            rotationRange: [0, 0],
-            rotationStep: 90,
+            rotationRange: [0, 90],
+            rotationStep: 45,
            gridSize: sizeRate.value,
            shape: 'pentagon',
            width: '100%',
            height: '100%',
            textStyle: {
              color: function () {
-                const index = Math.floor(Math.random() * props.color.length)
-                return props.color[index]
+                // const index = Math.floor(Math.random() * props.color.length)
+                // return props.color[index]
+                return `rgba(255,255,255,${Math.random() * 1.1})`
              },
              fontWeight: 550,
            },
@@ -135,6 +147,7 @@ export default defineComponent({
 <style lang="stylus" scoped>
 .cloud
  width 100%
+  height 96%
  box-sizing border-box
  overflow hidden
 </style>
--- a/src/view/right/old.vue
+++ b/src/view/right/old.vue
@@ -4,7 +4,7 @@
      <m-sub2 :addition="{ value: 14696 }">老人数量</m-sub2>
      <div class="sum">
        <div v-for="item in oldSum" :key="item.name">
-          <p class="count"><m-count :value="item.value" />%</p>
+          <p class="count orange-count"><m-count :value="item.value" />%</p>
          <span>{{ item.name }}</span>
        </div>
      </div>
@@ -36,7 +36,7 @@
          <div class="circle">
            <Circle
              class="circle-item"
-              :value="item.percent"
+              :value="+item.percent"
              :stroke-width="8"
              :color="['#F7933E', 'rgba(253,211,116,.9)']"
              :rate="2.4"
@@ -78,11 +78,11 @@
      <m-sub2>长护险</m-sub2>
      <div class="insurance">
        <div>
-          <m-count class="count" :value="1113" />
+          <m-count class="count orange-count" :value="1113" />
          <span>申请人数</span>
        </div>
        <div>
-          <m-count class="count" :value="812" />
+          <m-count class="count orange-count" :value="812" />
          <span>申请通过人数</span>
        </div>
      </div>
@@ -166,7 +166,7 @@ export default defineComponent({
      ],
    })
    const insuranceOption = ref({
-      color: ['#E690D1'],
+      color: ['#01bffe'],
      legend: { show: false },
    })
    const showChart = computed(() => store.state.curTheme === 'service')
@@ -199,8 +199,7 @@ export default defineComponent({
    padding .05rem
    .count
      font-size .14rem
-      color $orange
-      font-family $font-pang
+      font-family $font-barlow
      margin-right .03rem
 .distribute
  width 100%
@@ -287,10 +286,9 @@ export default defineComponent({
  align-items center
  .count
    font-size .14rem
-    color $orange
-    font-family $font-pang
+    font-family $font-barlow
    margin-right .1rem
 .insurance-chart
  width 100%
-  height 0.9rem
+  height 0.8rem
 </style>
--- a/src/view/right/police.vue
+++ b/src/view/right/police.vue
@@ -231,6 +231,7 @@ export default defineComponent({
        .count
          margin-left 0.08rem
          font-size 0.12rem
+          font-family $font-barlow
      .show
        span
          color #FFD400

--- a/src/view/right/population.vue
+++ b/src/view/right/population.vue
@@ -62,7 +62,7 @@ export default defineComponent({
    padding 0.05rem 0.15rem
    .count
      font-size 0.14rem
-      font-family $font-pang
+      font-family $font-barlow
      color $orange
    >div
      display flex

--- a/src/view/right/public-manage.vue
+++ b/src/view/right/public-manage.vue
@@ -9,13 +9,7 @@
    <m-card mode="border2">
      <div class="first-child"><CaseAnalysis /></div>
      <div class="second-child">
-        <KeyTask
-          mode="4"
-          :show="showKeyTask"
-          :color="taskColor"
-          height="1rem"
-          :bg="null"
-        />
+        <KeyTask mode="4" :show="showKeyTask" :bg="null" />
      </div>
      <div class="third-child"><BussinessEntry /></div>
    </m-card>
@@ -38,17 +32,6 @@ export default defineComponent({
    const showKeyTask = computed(() => store.state.curTheme === 'manage')
    return {
      showKeyTask,
-      taskColor: [
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-      ],
    }
  },
 })
@@ -65,9 +48,8 @@ export default defineComponent({
    width 33%
    .first-child
      flex 1
-      // height 50%
    .second-child
-      height 2rem
+      flex 1
    .third-child
-      height 1rem
+      height 1.4rem
 </style>
--- a/src/view/right/public-safety.vue
+++ b/src/view/right/public-safety.vue
@@ -41,5 +41,5 @@ export default defineComponent({
    .house
      flex 2
    .company
-      flex 1.2
+      flex 1.4
 </style>
--- a/src/view/right/public-work.vue
+++ b/src/view/right/public-work.vue
@@ -7,13 +7,7 @@
    <m-card mode="border2">
      <div class="duty"><Duty /></div>
      <div class="task">
-        <KeyTask
-          mode="4"
-          :show="showTask"
-          :color="taskColor"
-          height="1rem"
-          :bg="null"
-        />
+        <KeyTask mode="4" :show="showTask" :bg="null" />
      </div>
    </m-card>
    <m-card mode="border2">
@@ -47,17 +41,6 @@ export default defineComponent({
    const showTask = computed(() => store.state.curView.type !== 'street')
    return {
      showTask,
-      taskColor: [
-        '#fff',
-        '#eee',
-        '#ddd',
-        '#ccc',
-        '#bbb',
-        '#aaa',
-        '#999',
-        '#888',
-        '#777',
-      ],
    }
  },
 })
@@ -80,8 +63,7 @@ export default defineComponent({
 // .duty,
 // .analysis
 //   flex: 1
-.entry
+.entry,
 .task
  flex 1
-  // height 1.28rem
 </style>