修改&调整

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

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

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

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

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,
       },

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

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

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

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

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>

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

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

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%

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>

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

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

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>

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

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

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>

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

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()

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

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

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

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

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>

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>

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>

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

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

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>

src/view/right/public-safety.vue

@@ -41,5 +41,5 @@ export default defineComponent({
     .house
       flex 2
     .company
-      flex 1.2
+      flex 1.4
 </style>

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>