公共管理&公共服务&公共安全 改版

src/assets/style/reset.styl

@@ -10,18 +10,19 @@ $color-main = #5BD5FF
   .ant-select
     z-index 99
     font-size .08rem
-    color $color-main
+    color #fff
     min-width .6rem
     .ant-select-selector
-      border .01rem solid $color-main
-      border-radius 0
-      background rgba(0,0,0,0.3)
+      background rgba(70,83,97,.4)
+      box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+      border-radius .02rem
+      border none
       height .2rem
-      padding 0 .04rem
+      padding 0 .06rem
       .ant-select-selection-item
         line-height .2rem
     .ant-select-arrow
-      color $color-main
+      color #fff
       font-size .08rem
       right .05rem
       width auto

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

@@ -4,6 +4,16 @@
       <p>
         {{ title }}
       </p>
+      <div v-if="btns && btns.length > 0">
+        <span
+          v-for="btn in btns"
+          :key="btn.key"
+          :class="{ on: btn.key === curBtn }"
+          @click="handleSelect(btn)"
+        >
+          {{ btn.name }}
+        </span>
+      </div>
     </div>
     <div class="card-content">
       <span class="border" />
@@ -27,6 +37,21 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       default: true,
     },
+    btns: {
+      type: Array as PropType<{ key?: string; name?: string }[]>,
+      default: null,
+    },
+    curBtn: {
+      type: String as PropType<string>,
+      default: null,
+    },
+  },
+  emits: ['select'],
+  setup(_, ctx) {
+    const handleSelect = (btn: { key?: string; name?: string }) => {
+      ctx.emit('select', btn.key)
+    }
+    return { handleSelect }
   },
 })
 </script>
@@ -42,10 +67,12 @@ export default defineComponent({
   .card-title
     display flex
     align-items center
+    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)
     margin-bottom .05rem
+    padding 0 .1rem
     &:before
       content ''
       display block
@@ -59,7 +86,16 @@ export default defineComponent({
       font-size $card-title-size
       font-weight bold
       margin 0
-      margin-left .1rem
+    >div
+      span
+        cursor pointer
+        margin-left .05rem
+        color $primary-border
+        &:hover
+        &.on
+          color #fff
+          font-weight bold
+
   .card-content
     position relative
     box-sizing border-box

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

@@ -37,7 +37,7 @@ export default defineComponent({
     },
     mode: {
       type: String as PropType<ModeType>,
-      default: '2',
+      default: '4',
     },
     enter: {
       type: String as PropType<string>,

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

 <template>
-  <div class="my-title" :class="{ 'work-station': inWorkStation }">
+  <div class="my-title">
     <div class="date">
       <span>{{ date }}</span>
       <span>{{ time }}</span>
@@ -11,7 +11,7 @@
         :class="{ on: btn.type === curBtn }"
         @click="handleThemeSelect(btn.type)"
       >
-        {{ btn.name }}
+        <p>{{ btn.name }}</p>
       </div>
     </div>
     <h1><slot />{{ curView.name.includes('工作站') ? curView.name : '' }}</h1>
@@ -46,9 +46,6 @@ 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)
@@ -61,7 +58,6 @@ export default defineComponent({
       timer.value = null
     })
     return {
-      inWorkStation,
       date,
       time,
       timer,
@@ -81,13 +77,9 @@ export default defineComponent({
   $center()
   justify-content flex-start
   position relative
-  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%
+  z-index 1
   .date
     z-index 2
     position absolute
@@ -96,8 +88,9 @@ export default defineComponent({
       display block
       text-align right
   h1
-    font-family $font-weibei
-    margin 0 0 0 10%
+    font-family $font-pang
+    width 18%
+    text-align center
     z-index 2
     background-clip text
     -webkit-background-clip text
@@ -105,21 +98,29 @@ export default defineComponent({
     background-image linear-gradient(to bottom, #fff, #00C7FF)
     font-size .22rem
     letter-spacing .05rem
+    margin-top 0.5%
   .btn-container
     z-index 2
     display flex
     position absolute
-    right 30%
+    left 30%
     color #ccc
     >div
       $center()
-      padding .03rem .1rem
+      padding .02rem .18rem
       box-sizing border-box
       margin-left .1rem
-      background url('@/assets/images/btn-bg.png') 100% / 100% no-repeat
       cursor pointer
+      color $blue
+      border .01rem solid @color
+      transform skew(-45deg)
+      opacity .6
+      transition all .3s ease
       &:hover
       &.on
-        color #fff
-        background url('@/assets/images/btn-bg-on.png') 100% / 100% no-repeat
+        color $yellow
+        border-color @color
+        opacity 1
+      p
+        transform skew(45deg)
 </style>

src/components/MyComponent/main.styl

@@ -45,3 +45,8 @@ $font-color = #70A7E0
 
 $table-bg(opacity = 0.3)
   rgba(0, 118, 255, opacity )
+
+$card-bg2()
+  background rgba(70,83,97,.4)
+  box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+  border-radius .03rem
\ No newline at end of file

src/view/components/summary.vue

 <template>
-  <div class="summary-container" :class="{ 'two-child': twoChild }">
-    <div v-for="item in list" :key="item.name">
+  <div class="summary-container" :class="{ 'over-two': list.length > 3 }">
+    <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" />
         <span class="unit">{{ item.unit }}</span>
       </p>
@@ -25,9 +26,9 @@ export default defineComponent({
       type: Array as PropType<SummaryProp[]>,
       required: true,
     },
-    twoChild: {
-      type: Boolean as PropType<boolean>,
-      default: false,
+    avatar: {
+      type: String as PropType<string>,
+      default: null,
     },
   },
 })
@@ -35,29 +36,57 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
+$create-border()
+  content ''
+  display block
+  height 40%
+  width .01rem
+  background #aaa
+  position absolute
+  top 0
+  bottom 0
+  margin auto 0
+  left -50%
+
 .summary-container
   width 100%
   min-height .4rem
-  background url('@/assets/images/msg-wrapper.png') 100% / 100% 100% no-repeat
   display flex
   align-items center
   justify-content space-around
-  &.two-child
-    background url('@/assets/images/msg-wrapper2.png') 100% / 100% 100% no-repeat
+  $card-bg2()
+  box-sizing border-box
+  padding .06rem 0
+  &.over-two
+    >div
+      &:nth-last-child(2)
+        &:before
+          $create-border()
   >div
     text-align center
-    margin-left -0.1rem
+    position relative
     &:first-child
-      .count
-        color $yellow
+      padding-left .5rem
+    &:last-child
+      &:before
+        $create-border()
     p
       .count
-        font-weight bold
+        font-family $font-pang
+        font-size .12rem
         margin-right .01rem
+        color $orange
       .unit
         color #aaa
         font-size .09rem
       &:last-child
-        color $font-color
         font-weight bold
+        color #ccc
+      >img
+        position absolute
+        left 0
+        top 0
+        bottom 0
+        margin auto 0
+        width .26rem
 </style>

src/view/left/command.vue

 <template>
-  <m-card mode="border">
+  <m-card mode="border2">
     <m-card class="card" title="指挥体系">
       <div class="command">
         <div class="leader">
@@ -21,48 +21,45 @@
         </div>
       </div>
       <div class="disposal">
-        <m-sub>网格工作站</m-sub>
-        <div class="table">
-          <div>
-            <p>网格工作站</p>
-            <p class="thead3">网格长</p>
-            <p>工作时段</p>
-            <p>总人数</p>
+        <m-sub2>网格工作站</m-sub2>
+        <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>
+          </div>
+          <div class="content">
+            <p>日班：{{ item.workTimeDay }}</p>
+            <p>{{ item.personnelDay }}</p>
           </div>
-          <div v-for="(item, i) in dutyTableData" :key="i">
-            <p>{{ item.group }}</p>
-            <p class="doubleRow">
-              <span>
-                <span>日</span>
-                <span>{{ item.personnelDay }}</span>
-              </span>
-              <span>
-                <span>夜</span>
-                <span>{{ item.personnelNight }}</span>
-              </span>
-            </p>
-            <p class="doubleRow2">
-              <span>{{ item.workTimeDay }}</span>
-              <span>{{ item.workTimeNight }}</span>
-            </p>
-            <p>{{ item.number }}人</p>
+          <div class="content">
+            <p>夜班：{{ item.workTimeNight }}</p>
+            <p>{{ item.personnelNight }}</p>
           </div>
         </div>
       </div>
     </m-card>
-    <m-card class="card" title="党建和经济">
+    <m-card
+      class="card"
+      title="党建和经济"
+      :btns="tabList"
+      :cur-btn="curTab"
+      @select="setCurTab"
+    >
       <div class="party">
-        <Tabs :list="tabList" @select="setCurTab" />
         <div v-if="curTab === 'economic'" class="content economic">
           <div v-for="circle in economicList" :key="circle.name">
             <Cricle :value="circle.value" :name="circle.name" />
           </div>
         </div>
         <div v-else class="content party">
-          <SubTitle>街道党员人数</SubTitle>
-          <Summary :list="partySummary" />
-          <SubTitle>物业"三驾马车"</SubTitle>
-          <Brief :list="propertySummary" />
+          <m-sub2>街道党员人数</m-sub2>
+          <Summary :list="partySummary" :avatar="avatar6" />
+          <m-sub2>物业"三驾马车"</m-sub2>
+          <Brief :list="propertySummary.slice(0, 3)" color="#fff" />
+          <m-sub2 :addition="{ value: propertySummary[3].value }">
+            交叉任职
+          </m-sub2>
         </div>
       </div>
     </m-card>
@@ -71,33 +68,30 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
-import Tabs, { TabsProp } from '../components/tabs.vue'
-import SubTitle from '../components/sub-title.vue'
-import Summary, { SummaryProp } from '../components/summary.vue'
-import Brief, { BriefProp } from '../components/brief.vue'
+import Summary from '../components/summary.vue'
+import Brief from '../components/brief.vue'
 import Cricle from '../components/circle.vue'
-import avatar1 from '@/assets/images/avatar1.png'
-import avatar2 from '@/assets/images/avatar2.png'
-import icon1 from '@/assets/images/icon1.png'
-import icon2 from '@/assets/images/icon2.png'
-import icon3 from '@/assets/images/icon3.png'
-import icon4 from '@/assets/images/icon4.png'
-import icon5 from '@/assets/images/icon5.png'
+import avatar3 from '@/assets/images/avatar3.png'
+import avatar4 from '@/assets/images/avatar4.png'
+import avatar6 from '@/assets/images/avatar6.png'
+import icon31 from '@/assets/images/icon31.png'
+import icon37 from '@/assets/images/icon37.png'
+import icon38 from '@/assets/images/icon38.png'
 import store from '@/store'
 export default defineComponent({
   name: 'Command',
-  components: { Tabs, SubTitle, Summary, Brief, Cricle },
+  components: { Summary, Brief, Cricle },
   setup() {
     // 指挥体系-领导
     const leaders = computed(() => {
       return [
         {
-          img: avatar1,
+          img: avatar3,
           type: '指挥长',
           name: commandSystem.value.zhz,
         },
         {
-          img: avatar2,
+          img: avatar4,
           type: '副指挥长',
           name: commandSystem.value.fzhz,
         },
@@ -200,16 +194,6 @@ export default defineComponent({
       { immediate: true }
     )
 
-    const btns = ref([
-      {
-        icon: icon1,
-        name: '单兵专题',
-      },
-      {
-        icon: icon2,
-        name: '排班表',
-      },
-    ])
     const soldierList = ref([
       {
         id: '1',
@@ -229,7 +213,7 @@ export default defineComponent({
     ])
     const curTab = ref('party')
     const setCurTab = (tab: string) => (curTab.value = tab)
-    const tabList = ref<TabsProp[]>([
+    const tabList = ref([
       {
         key: 'party',
         name: '党建引领',
@@ -269,17 +253,17 @@ export default defineComponent({
         {
           name: '居委会',
           value: com || 0,
-          icon: icon3,
+          icon: icon31,
         },
         {
           name: '业委会',
           value: ywh || 0,
-          icon: icon4,
+          icon: icon37,
         },
         {
           name: '物业企业',
           value: wy || 0,
-          icon: icon5,
+          icon: icon38,
         },
         {
           name: '交叉任职',
@@ -300,10 +284,10 @@ export default defineComponent({
       ]
     })
     return {
+      avatar6,
       leaders,
       members,
       dutyTableData,
-      btns,
       soldierList,
       curTab,
       setCurTab,
@@ -327,12 +311,14 @@ export default defineComponent({
   display flex
   flex-direction column
   white-space nowrap
+  margin-bottom .1rem
   .leader
     display flex
     flex-wrap wrap
     flex 1
-    padding 0.1rem 0
-    border-bottom 1px solid rgba(91, 213, 255, 0.5)
+    padding 0.05rem 0
+    border-bottom .01rem solid rgba(105,110,114,.3)
+    margin-bottom .05rem
     >div
       width 50%
       display flex
@@ -366,73 +352,38 @@ export default defineComponent({
         color #ccc
 .disposal
   flex 1.3
+  .card
+    $card-bg2()
+    padding .05rem .1rem
+    &+.card
+      margin-top .05rem
+    .title
+      display flex
+      align-items center
+      font-size .11rem
+      font-weight bold
+      span
+        flex 1
+        margin 0 .1rem
+        height 0
+        border-bottom .01rem dashed $primary-border
+      i
+        font-size .09rem
+    .content
+      display flex
+      align-items center
+      justify-content space-between
 .party
   display flex
+  height 100%
   .content
     padding-left 0.1rem
     flex 1
-    &.party
     display flex
     flex-direction column
     justify-content space-around
-      padding-bottom 0.1rem
     &.economic
-      display flex
+      flex-direction row
       >div
         flex 1
-.table
-  border 0.01rem solid $blue
-  font-size 0.09rem
-  >div
-    display flex
-    background $table-bg(0.15)
-    &:first-child
-      background $table-bg()
-    &+div
-      border-top inherit
-    p
-      flex 1
-      line-height 4
-      text-align center
-      overflow hidden
-      text-overflow ellipsis
-      white-space nowrap
-      &+p
-        border-left 0.01rem solid $blue
-      &:nth-of-type(3)
-        flex 1.4
-      &:last-child
-        flex 0.7
-      &:first-child
-        flex 1.2
-    .thead3
-      flex 2.5
-    .doubleRow
-      flex 2.5
-      line-height 2
-      display flex
-      flex-direction column
-      flex-wrap wrap
-      >span
-        flex 1
-        padding 0
-        margin 0
-        display flex
-        &:first-child
-          flex 0.2
-          border-bottom 0.01rem solid $blue
-        >span
-          flex 1
-          &:first-child
-            width 30px
-            flex 0.2
-            border-right 0.01rem solid $blue
-    .doubleRow2
-      display flex
-      flex-direction column
-      line-height 2
-      >span
-        flex 1
-        &:first-child
-          border-bottom 0.01rem solid $blue
 </style>

src/view/right/beauty-home.vue

 <template>
   <m-card title="美丽家园">
-    <m-sub>项目实施情况</m-sub>
+    <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>
-    <Brief :list="situation" />
+    <Brief :list="situation" color="#fff" />
     <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" />
         <p>{{ item.name }}</p>
       </div>
     </div>
-    <m-sub :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub>
+    <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>
+        <m-count class="count" :value="item.value" />
       </div>
     </div>
-    <m-sub>马桶改造</m-sub>
-    <Brief :list="toiletSituation" />
-    <m-progress :value="80" :msg="{ value: 80, unit: '%', name: ' ' }" />
+    <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>
 
@@ -31,12 +35,12 @@
 import { computed, defineComponent, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import store from '@/store'
-import icon9 from '@/assets/images/icon9.png'
-import icon10 from '@/assets/images/icon10.png'
-import icon11 from '@/assets/images/icon11.png'
-import icon12 from '@/assets/images/icon12.png'
-import icon13 from '@/assets/images/icon13.png'
-import icon14 from '@/assets/images/icon14.png'
+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: 'BeautyHome',
@@ -49,10 +53,10 @@ export default defineComponent({
       { name: '2018年', value: 18 },
     ])
     const situation = ref<BriefProp[]>([
-      { name: '小区微更新', value: 26, icon: icon9 },
-      { name: '充电桩', value: 64, icon: icon10 },
-      { name: '雨污混接', value: 18, icon: icon11 },
-      { name: '门岗规范化', value: 12, icon: icon12 },
+      { 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 },
@@ -64,8 +68,8 @@ export default defineComponent({
       { name: '顺天村', value: 1 },
     ])
     const toiletSituation = ref<BriefProp[]>([
-      { name: '已完成改造', value: 26, icon: icon13 },
-      { name: '应改造', value: 64, icon: icon14 },
+      { name: '已完成改造', value: 26, icon: icon35 },
+      { name: '应改造', value: 64, icon: icon36 },
     ])
     const workStationProjects = ref([
       { name: '架空线梳理', value: 16 },
@@ -93,37 +97,35 @@ export default defineComponent({
   display flex
   justify-content space-between
   >div
-    width 30%
-    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
-    text-align center
+    display flex
+    align-items center
+    justify-content space-around
+    width 24%
     padding .05rem
     .count
-      font-size .12rem
+      font-size .14rem
+      color $orange
+      font-family $font-pang
+      margin-right .03rem
     p
       font-size .09rem
-      color $font-color
 .sum-card
   display flex
   flex-wrap wrap
+  justify-content space-between
   &.work-station
     margin .05rem 0
     >div
       width 20%
   >div
-    width 25%
-    text-align center
-    position relative
+    display flex
+    justify-content space-between
+    align-items center
+    width 49%
+    $card-bg2()
+    padding 0 .1rem
+    margin-bottom .05rem
     .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%)
 </style>

src/view/right/beauty-street.vue

 <template>
   <m-card title="美丽街区" class="beauty-street">
-    <m-sub>项目实施情况</m-sub>
+    <m-sub2>项目实施情况</m-sub2>
     <div class="summary">
       <div v-for="item in summary" :key="item.name">
         <m-count class="count" :value="item.value" />
@@ -51,7 +51,7 @@ export default defineComponent({
     })
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const barOption = ref({
-      color: [['#2DFDC7', 'rgba(42,253,195,.1)']],
+      color: [['#F7973D', 'rgba(234,173,0,.1)']],
       legend: { show: false },
       yAxis: { show: false },
       grid: {
@@ -74,8 +74,8 @@ export default defineComponent({
       ],
       series: [
         {
-          type: 'bar',
-          barWidth: '30%',
+          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',
           label: {
             show: true, //开启显示
             position: 'top', //在上方显示
@@ -103,15 +103,18 @@ export default defineComponent({
   display flex
   justify-content space-between
   >div
-    width 30%
-    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
-    text-align center
+    display flex
+    align-items center
+    justify-content space-around
+    width 24%
     padding .05rem
     .count
-      font-size .12rem
+      font-size .14rem
+      color $orange
+      font-family $font-pang
+      margin-right .03rem
     p
       font-size .09rem
-      color $font-color
 .chart
   width 100%
   height 1rem

src/view/right/business-entry.vue

@@ -21,7 +21,7 @@ export default defineComponent({
   props: {
     mode: {
       type: String as PropType<string>,
-      default: 'mode2',
+      default: '4',
     },
   },
   setup() {

src/view/right/case-analysis.vue

 <template>
   <m-card title="案件分析" class="box">
+    <div class="rank">
+      <m-sub2>分类排行</m-sub2>
       <div class="nav">
-      <div>
-        <Tabs :list="tabs" horizontal @select="curTab = $event" />
-      </div>
         <div>
           <span
             v-for="option in options"
@@ -15,8 +14,6 @@
           </span>
         </div>
       </div>
-    <div class="rank">
-      <SubTitle>分类排行</SubTitle>
       <div v-if="rankList.length > 0" class="content">
         <m-scroll :length="rankList.length" :limit="4">
           <m-progress
@@ -24,16 +21,21 @@
             :key="rank.name"
             :value="rank.rate"
             :msg="rank"
+            :color="['#FF692D', '#F7973D']"
           />
         </m-scroll>
       </div>
       <m-empty v-else />
     </div>
     <div class="place">
-      <SubTitle>多发地点</SubTitle>
-      <div class="content">
+      <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>
     </div>
@@ -42,20 +44,13 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, 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 Place from '../components/place.vue'
 import store from '@/store'
 export default defineComponent({
   name: 'CaseAnalysis',
-  components: { Tabs, SubTitle, Place },
+  components: { SubTitle, Place },
   setup() {
-    const curTab = ref('综合')
-    const tabs = ref<TabsProp[]>([
-      { name: '综合管理', key: '综合' },
-      { name: '街面管理', key: '街面' },
-      { name: '小区管理', key: '小区' },
-    ])
     const options = ref([
       { name: '日', key: 'day' },
       { name: '周', key: 'week' },
@@ -64,14 +59,14 @@ export default defineComponent({
     const curOption = ref('month')
 
     watch(
-      [() => curTab.value, () => curOption.value],
-      ([type, time]) => {
-        if (!time || !type) return
+      () => curOption.value,
+      (time) => {
+        if (!time) return
         store.dispatch('GET_CASE_CLASSIFICATION_RANK', {
-          managementType: type,
+          managementType: '综合',
         })
         store.dispatch('GET_MOREHAPPEN_ADDR', {
-          managementType: type,
+          managementType: '综合',
         })
       },
       { immediate: true }
@@ -98,9 +93,7 @@ export default defineComponent({
     })
 
     return {
-      tabs,
       options,
-      curTab,
       curOption,
       rankList,
       placeList,
@@ -115,11 +108,9 @@ export default defineComponent({
   overflow hidden
   .nav
     width 100%
-    overflow hidden
     display flex
     align-items center
-    justify-content space-between
-    margin-top 0.05rem
+    justify-content flex-end
     >div
       width 75%
       &:last-child
@@ -127,15 +118,17 @@ export default defineComponent({
         display flex
         >span
           $center()
-          width 0.22rem
-          height @width
+          width .4rem
+          height .12rem
+          margin-left .04rem
           color $primary-border
-          border 0.01rem solid @color
           cursor pointer
-          &:hover, &.on
-            color $secondary-color
-            border-color @color
-            background rgba(50, 197, 255, 0.2)
+          font-size .08rem
+          background rgba(50,197,255,.2)
+          &:hover
+          &.on
+            color #fff
+            background $secondary-color
   .rank
     overflow hidden
     // height 1rem
@@ -143,10 +136,25 @@ export default defineComponent({
       height 1.2rem
       overflow hidden
   .place
-    overflow hidden
     .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
 </style>

src/view/right/company.vue

 <template>
-  <m-card
-    title="实有单位"
-    :addition="{ value: trueCompany.companyNum, unit: '家' }"
-  >
+  <m-card title="实有单位">
+    <m-sub2 :addition="{ value: trueCompany.companyNum, unit: '家' }">
+      单位数量
+    </m-sub2>
     <div class="sum">
       <div v-for="item in sum" :key="item.name">
         <m-count class="count" :value="item.value" />
@@ -13,24 +13,12 @@
       </div>
     </div>
     <div class="content">
-      <div v-if="showChart" class="chart">
-        <m-pie
-          v-if="showChart && pieData.source[0].value > 0"
-          :dataset="pieData"
-          :option="pieOption"
-        />
+      <div v-for="item in pieData" :key="item.name">
+        <span>{{ item.name }}</span>
+        <div v-if="showChart" class="progress">
+          <m-progress color="#EDB872" :value="item.rate" />
         </div>
-      <div class="legend">
-        <div v-for="(item, i) in pieData.source" :key="item.name">
-          <p>
-            <span :style="{ background: pieOption.color[i][0] }" />
-            {{ item.name }}
-          </p>
-          <p>
         <m-count class="count" :value="item.value" />
-            <span class="unit">家</span>
-          </p>
-        </div>
       </div>
     </div>
   </m-card>
@@ -56,43 +44,36 @@ export default defineComponent({
       ]
     })
     const pieData = computed(() => {
-      return {
-        dimensions: [
-          { name: 'name', displayName: '类型' },
-          { name: 'value', displayName: '数量' },
-        ],
-        source: [
-          { name: '事业单位', value: trueCompany.value.institution },
-          { name: '企业单位', value: trueCompany.value.enterprise },
-          { name: '机关团体', value: trueCompany.value.organization },
-          { name: '其他', value: trueCompany.value.other },
-        ],
-      }
-    })
-    const pieOption = ref({
-      color: [
-        ['#F76B1C', '#FAD961'],
-        ['#429321', '#B4EC51'],
-        ['#3023AE', '#C86DD7'],
-        ['#51B7EC', '#212F93'],
-      ],
-      legend: { show: false },
-      series: [
+      const {
+        institution = 0,
+        enterprise = 0,
+        organization = 0,
+        other = 0,
+      } = trueCompany.value
+      const total = institution + enterprise + organization + other
+      return [
         {
-          type: 'pie',
-          radius: [0, '90%'],
-          center: ['50%', '50%'],
-          label: {
-            show: false,
+          name: '事业单位',
+          value: institution,
+          rate: (institution / total) * 100,
         },
+        {
+          name: '企业单位',
+          value: enterprise,
+          rate: (enterprise / total) * 100,
+        },
+        {
+          name: '机关团体',
+          value: organization,
+          rate: (organization / total) * 100,
         },
-      ],
+        { name: '其他', value: other, rate: (other / total) * 100 },
+      ]
     })
     return {
       showChart,
       sum,
       pieData,
-      pieOption,
       trueCompany,
     }
   },
@@ -104,59 +85,32 @@ export default defineComponent({
 .sum
   display flex
   align-items center
+  justify-content space-around
   margin 0.05rem 0
   >div
-    flex 1
-    text-align center
-    position relative
-    &+div
-      &:before
-        content '|'
-        position absolute
-        left 0
-        top 50%
-        color $blue
-        transform translateY(-50%)
+    display flex
+    align-items center
     .count
-      font-size 0.12rem
+      font-size 0.14rem
+      font-family $fong-pang
+      color $orange
+      margin-right .05rem
     p
       color #ccc
-      font-size 0.09rem
-      text-indent 0.1rem
     img
       width 0.1rem
       height @width
       margin-left 0.02rem
 .content
   flex 1
-  display flex
   >div
-    height 100%
-  .chart
-    width 40%
-  .legend
-    width 60%
     display flex
-    flex-direction column
-    justify-content space-around
-    padding 0 0.1rem
-    >div
-      display flex
-      justify-content space-between
     align-items center
-      >p
-        &:first-child
-          span
-            width 0.06rem
-            height @width
-            display inline-block
-            margin-right @width
-            border-radius 50%
-        &:last-child
+    justify-content space-between
+    .progress
+      flex 1
+      margin 0 .05rem
+    span,
     .count
-            font-size 0.12rem
-          .unit
-            font-size 0.08rem
-            color #aaa
-            margin-left 0.03rem
+      min-width .5rem
 </style>

src/view/right/complain.vue

@@ -3,7 +3,7 @@
     <div class="box">
       <div v-if="Object.keys(rank).length > 0" class="summary">
         <div v-for="item in summary" :key="item.name">
-          <m-wave :value="item.percent" size=".34rem" />
+          <m-wave :value="item.percent" size=".34rem" color="#DB8000" />
           <div>
             <m-count class="count" :value="item.value" />
             <p>{{ item.name }}</p>
@@ -11,13 +11,12 @@
         </div>
       </div>
       <div class="manage">
-        <Tabs :list="tabList" @select="getCurTabKey" />
         <div class="content">
-          <SubTitle>响应度</SubTitle>
+          <m-sub2>响应度</m-sub2>
           <div v-if="showChart" class="chart">
             <m-line :dataset="responseChartData" :option="chartOption" />
           </div>
-          <SubTitle>分类排行</SubTitle>
+          <m-sub2>分类排行</m-sub2>
           <div class="chart wrapper">
             <div v-if="showChart">
               <m-radar :dataset="classChartData" :option="chartOption2" />
@@ -35,8 +34,18 @@
         </div>
       </div>
       <div class="emergency">
-        <m-sub>紧急案件</m-sub>
-        <m-scroll :limit="1" :length="urgentCase.length" :step="1" mode="2">
+        <m-sub2 :addition="{ value: urgentCase.length }">紧急案件</m-sub2>
+        <m-empty
+          v-if="!urgentCase || urgentCase.length === 0"
+          style="height: 1.22rem"
+        />
+        <m-scroll
+          v-else
+          :limit="1"
+          :length="urgentCase.length"
+          :step="1"
+          mode="2"
+        >
           <div v-for="item in urgentCase" :key="item" class="detail">
             <div class="title">
               <p>
@@ -57,16 +66,12 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
-import Tabs, { TabsProp } from '../components/tabs.vue'
-import SubTitle from '../components/sub-title.vue'
-import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
 import moment from 'moment'
 import { ChartTypes } from '@/components/MyComponent'
 import store from '@/store'
 
 export default defineComponent({
   name: 'Complain',
-  components: { Tabs, SubTitle },
   setup() {
     store.dispatch('GET_YOUSUBIDA_RANK')
     store.dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', '综合')
@@ -116,7 +121,7 @@ export default defineComponent({
       ]
     })
 
-    const tabList = ref<TabsProp[]>([
+    const tabList = ref([
       {
         key: '综合',
         name: '综合管理',
@@ -218,7 +223,7 @@ export default defineComponent({
       ],
     })
     const chartOption = ref<ChartTypes.ECOption>({
-      color: ['#9B88F9', 'gold'],
+      color: ['#6BE1B2', '#FFCE34'],
       legend: {
         right: '1%',
         itemWidth: fontSize.value,
@@ -254,10 +259,11 @@ export default defineComponent({
 .box
   flex-direction column
   display flex
-  height 95%
+  height 100%
   overflow hidden
+  justify-content space-around
   .summary
-    height 5%
+    height 8%
     display flex
     justify-content space-between
     align-items center
@@ -275,8 +281,7 @@ export default defineComponent({
           color #ccc
   .manage
     display flex
-    height 70%
-    // margin-bottom .05rem
+    height 60%
     .content
       flex 1
       padding-left 0.1rem
@@ -315,21 +320,22 @@ export default defineComponent({
                   &:last-child
                     flex 1
   .emergency
-    height 1.2rem
+    height 1.22rem
     overflow hidden
-    // overflow hidden
     .detail
       display flex
       flex-direction column
       padding 0.1rem
-      background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
-      margin-bottom 0.05rem
+      margin-top .05rem
       height 0.95rem
       box-sizing border-box
+      $card-bg2()
+      .title
+        color $orange
       >div
         flex 1
         &:first-child
-          border-bottom 0.01rem solid $primary-border
+          border-bottom 0.01rem solid rgba(105,110,114,.5)
           padding-bottom 0.05rem
           margin-bottom @padding-bottom
         span

src/view/right/demand.vue

 <template>
   <m-card title="有求必应">
     <div class="today-case">
-      <m-sub :addition="{ value: todayCase.totalNum, unit: '件' }">
+      <m-sub2 :addition="{ value: todayCase.totalNum, unit: '件' }">
         今日案件数
-      </m-sub>
-      <Brief :list="summary" />
+      </m-sub2>
+      <Brief :list="summary" color="#F7933E" />
       <div class="process">
-        <img src="@/assets/images/arrow.png" />
-        <div>
-          <div v-for="item in process.slice(0, 3)" :key="item.name">
+        <div v-for="(item, i) in process" :key="item.name">
+          <template v-if="(i + 1) % 2 === 0">
             <m-count class="count" :value="item.value" />
             <p>{{ item.name }}</p>
-          </div>
-        </div>
-        <div>
-          <div v-for="item in process.slice(3)" :key="item.name">
-            <m-count class="count" :value="item.value" />
+          </template>
+          <template v-else>
             <p>{{ item.name }}</p>
-          </div>
+            <m-count class="count" :value="item.value" />
+          </template>
         </div>
       </div>
       <div v-if="showChart" class="chart">
         <m-bar :dataset="barData" :option="barOption" />
       </div>
       <div class="chart wrapper">
-        <div v-if="showChart">
+        <img src="@/assets/images/pyramid.png" />
+        <!-- <div v-if="showChart">
           <m-pie :option="pieOption" :dataset="pieData" />
-        </div>
+        </div> -->
         <div>
           <p v-for="item in pieData" :key="item.name">
             <span :style="{ background: item.color }" />
@@ -38,8 +36,18 @@
       </div>
     </div>
     <div class="case-follow">
-      <m-sub search-able @search="searchCase">事件跟踪</m-sub>
-      <m-scroll :limit="1" :length="trackEvent.length" :step="1.1" mode="2">
+      <m-sub2>事件跟踪</m-sub2>
+      <m-empty
+        v-if="!trackEvent || trackEvent.length === 0"
+        style="height: 1.8rem"
+      />
+      <m-scroll
+        v-else
+        :limit="2"
+        :length="trackEvent.length"
+        :step="1"
+        mode="2"
+      >
         <div v-for="(item, i) in trackEvent" :key="i" class="detail">
           <div class="title">
             <p>{{ item.communityName || '暂无' }}</p>
@@ -58,19 +66,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, watch, ref } from 'vue'
-import Brief, { BriefProp } from '../components/brief.vue'
+import { computed, defineComponent, ref } from 'vue'
+import Brief from '../components/brief.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'
 import moment from 'moment'
 
 export default defineComponent({
   name: 'Demand',
   components: { Brief },
   setup() {
-    // dispatch('GET_TODAYCASE')
     store.dispatch('GET_TODAYCASE')
     store.dispatch('GET_STAGECASE')
     store.dispatch('GET_WORKSTATION')
@@ -85,6 +89,7 @@ export default defineComponent({
     const workstationKind = computed(() => store.state.workstationKind)
     const pieDatamodel = computed(() => store.state.workstationKindPiEData)
     const trackEvent = computed(() => store.state.trackEvent)
+
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curTheme === 'manage')
     const summary = computed(() => {
@@ -95,7 +100,6 @@ export default defineComponent({
             todayCase.value.comprehensiveDisposalNum || 0,
             todayCase.value.comprehensiveNum || 0,
           ],
-          icon: icon6,
         },
         {
           name: '街面管理',
@@ -103,7 +107,6 @@ export default defineComponent({
             todayCase.value.streetDisposalNum || 0,
             todayCase.value.streetNum || 0,
           ],
-          icon: icon7,
         },
         {
           name: '小区管理',
@@ -111,7 +114,6 @@ export default defineComponent({
             todayCase.value.communityDisposalNum || 0,
             todayCase.value.communityNum || 0,
           ],
-          icon: icon8,
         },
       ]
     })
@@ -186,7 +188,7 @@ export default defineComponent({
       }
     })
     const barOption = ref({
-      color: ['#5BD5FF', '#FFCE34', '#826AFA'],
+      color: ['#77BFF9', '#EDB872', '#64C29D'],
       legend: {
         right: '2%',
         itemWidth: fontSize.value * 0.6,
@@ -212,7 +214,7 @@ export default defineComponent({
                 100
             ) || 0,
           num: pieDatamodel.value.oneNum,
-          color: '#47B3FF',
+          color: '#FE9B5F',
         },
         {
           name: '第二工作站',
@@ -222,7 +224,7 @@ export default defineComponent({
                 100
             ) || 0,
           num: pieDatamodel.value.twoNum,
-          color: '#FF9D27',
+          color: '#36CFE1',
         },
         {
           name: '第三工作站',
@@ -233,7 +235,7 @@ export default defineComponent({
                 100
             ) || 0,
           num: pieDatamodel.value.threeNum,
-          color: '#6EB629',
+          color: '#429BDF',
         },
       ]
     })
@@ -320,52 +322,47 @@ $arrow-style()
   transform translate(-90%, 0)
 .today-case
   .process
-    margin-top 0.1rem
+    width 100%
+    background-image url('@/assets/images/line.png')
+    background-repeat no-repeat
+    background-size 90%
+    background-position 50% 50%
+    margin .05rem auto .1rem
     position relative
-    >img
-      position absolute
-      width 0.2rem
-      height @width
-      right 13.3%
-      top 0
-      bottom 0
-      margin auto
-      transform rotate(90deg)
-    >div
     display flex
     align-items center
-      justify-content space-around
-      margin-bottom 0.15rem
-      &:nth-of-type(1)
-        div+div
-          &::before
-            $arrow-style()
-      &:nth-of-type(2)
-        div+div
-          &::before
-            $arrow-style()
-            transform translate(-90%, 0) rotate(180deg)
+    // justify-content space-between
     >div
-        background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
-        width 28%
-        padding 0.05rem 0
+      flex 1
       text-align center
-        font-weight bold
-        position relative
-        .count
-          font-size 0.12rem
+      height .6rem
+      display flex
+      flex-direction column
+      justify-content space-between
       p
-          color #ccc
+        border .01rem solid #466275
+        font-size .08rem
+        background rgba(71,179,255,.15)
+        width .3rem
+        margin 0 auto
+        border-radius .02rem
+      .count
+        font-size .12rem
+        font-weight bold
   .chart
     width 100%
     height 1.1rem
     &.wrapper
       display flex
+      margin .05rem 0
+      padding-left .2rem
+      >img
+        width 36%
+        margin-right .28rem
       >div
         width 50%
         height 100%
         font-weight bold
-        // border 1px solid red
         &:last-child
           $center()
           flex-direction column
@@ -373,25 +370,36 @@ $arrow-style()
             display flex
             width 100%
             align-items center
-            // border 1px solid red
             margin-bottom 0.05rem
+            position relative
             span
               display inline-block
               width 0.06rem
               height @width
               border-radius 50%
               margin-right 0.1rem
+              &:before
+                content ''
+                width .6rem
+                height .01rem
+                display block
+                position absolute
+                top 0
+                bottom 0
+                margin auto 0
+                background inherit
+                transform translateX(-120%)
 .case-follow
-  height 1.2rem
+  height 1.8rem
   overflow hidden
 .detail
   display flex
   flex-direction column
   justify-content space-between
   padding 0.1rem
-  background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
-  height 1rem
-  margin-bottom 0.1rem
+  $card-bg2()
+  height .95rem
+  margin-top .05rem
   box-sizing border-box
   .title
     display flex
@@ -399,17 +407,15 @@ $arrow-style()
     p
       font-size 0.12rem
       &:last-child
-        color $edge
         font-size 0.1rem
     span
       display block
-      height 0.01rem
-      background $blue
+      height 0
+      border-bottom .01rem dashed $primary-border
       flex 1
       margin 0 0.1rem
   .msg
     $center()
     justify-content space-between
-    color $blue
     font-size 0.08rem
 </style>

src/view/right/ecology.vue

 <template>
   <m-card title="生态">
     <div class="detail">
-      <img src="@/assets/images/ecology.png" />
       <div v-for="item in ecologyList" :key="item.name">
         <m-count class="count" :value="item.value" />
         <p>{{ item.name }}</p>
       </div>
     </div>
+    <m-sub2>便民设施</m-sub2>
     <div class="sum">
       <div v-for="item in sumList" :key="item.name">
         <img :src="item.icon" />
@@ -17,13 +17,19 @@
       </div>
     </div>
     <div>
-      <m-sub>商业综合体</m-sub>
+      <m-sub2>商业综合体</m-sub2>
       <div class="business photos">
         <img v-for="photo in businessPhotos" :key="photo" :src="photo" />
       </div>
     </div>
     <div>
-      <m-sub>历史文化场馆</m-sub>
+      <m-sub2>历保</m-sub2>
+      <div class="history photos">
+        <img v-for="photo in historyPhotos" :key="photo" :src="photo" />
+      </div>
+    </div>
+    <div>
+      <m-sub2>文保</m-sub2>
       <div class="history photos">
         <img v-for="photo in historyPhotos" :key="photo" :src="photo" />
       </div>
@@ -81,41 +87,18 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
 .detail
+  display flex
   width 100%
-  height 1.2rem
-  position relative
-  >img
-    width 36%
-    position absolute
-    top 0
-    right 0
-    bottom 0
-    left 0
-    margin auto
+  justify-content space-around
   >div
-    $center()
-    position absolute
-    width 32%
-    height 45%
-    background rgba(49,94,139, .4)
-    border .04rem solid rgba(0,0,0,.25)
-    text-align center
-    flex-direction column
-    &:nth-of-type(1)
-      top 0
-      left 0
-    &:nth-of-type(2)
-      top 0
-      right 0
-    &:nth-of-type(3)
-      bottom .05rem
-      left 0
-    &:nth-of-type(4)
-      bottom .05rem
-      right 0
+    display flex
+    justify-content space-around
+    align-items center
   .count
-    font-size .12rem
-    color $yellow
+    font-size .14rem
+    font-family $font-pang
+    color $orange
+    margin-right .08rem
 .sum
   display flex
   flex-wrap wrap

src/view/right/house.vue

 <template>
-  <m-card
-    title="实有房屋"
-    :addition="{
-      value: allTrueHouse,
-      unit: '幢',
-    }"
-  >
+  <m-card title="实有房屋">
     <div>
-      <m-sub :addition="{ value: pubulicSafeHouse.house, unit: '幢' }">
+      <m-sub2 :addition="{ value: pubulicSafeHouse.house, unit: '幢' }">
         居住房屋
-      </m-sub>
+      </m-sub2>
       <Brief :list="summary" color="#fff" />
       <div class="bar-txt">
         <p>
           <span>2000年前房屋</span>
+        </p>
+        <p>
           <m-count class="count" :value="pubulicSafeHouse.befor" />
           <span class="unit">幢</span>
         </p>
-        <!-- <img src="@/assets/images/location.png" /> -->
       </div>
       <m-progress
         v-if="allTrueHouse"
         :value="(pubulicSafeHouse.befor / allTrueHouse) * 100"
         :height="0.1"
+        :color="['rgba(253,211,116,.15)', '#F7933E']"
       />
       <div class="house-types">
         <div v-for="item in houseTypes" :key="item.name">
-          <m-wave v-if="item.percent" :value="item.percent" size=".34rem" />
+          <m-wave
+            v-if="item.percent"
+            :value="item.percent"
+            size=".34rem"
+            color="#DB8000"
+          />
           <div>
             <m-count class="count" :value="item.value" />
             <p>{{ item.name }}</p>
@@ -35,25 +36,25 @@
       </div>
     </div>
     <div>
-      <m-sub
+      <m-sub2
         :addition="{ value: pubulicSafeNonResident.nonResidentNum, unit: '幢' }"
       >
         非居房屋
-      </m-sub>
+      </m-sub2>
       <Brief :list="houseSum" color="#fff" />
     </div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
-import Brief, { BriefProp } from '../components/brief.vue'
-import icon18 from '@/assets/images/icon18.png'
-import icon19 from '@/assets/images/icon19.png'
-import icon20 from '@/assets/images/icon20.png'
-import icon7 from '@/assets/images/icon7.png'
-import icon21 from '@/assets/images/icon21.png'
-import icon22 from '@/assets/images/icon22.png'
+import { computed, defineComponent } from 'vue'
+import Brief from '../components/brief.vue'
+import icon31 from '@/assets/images/icon31.png'
+import icon38 from '@/assets/images/icon38.png'
+import icon37 from '@/assets/images/icon37.png'
+import img3 from '@/assets/images/img3.png'
+import img9 from '@/assets/images/img9.png'
+import img10 from '@/assets/images/img10.png'
 import store from '@/store'
 export default defineComponent({
   name: 'House',
@@ -86,14 +87,14 @@ export default defineComponent({
         {
           name: '小区数',
           value: pubulicSafeHouse.value.community,
-          icon: icon18,
+          icon: icon31,
         },
         {
           name: '物业公司',
           value: pubulicSafeHouse.value.company,
-          icon: icon19,
+          icon: icon38,
         },
-        { name: '业委会', value: pubulicSafeHouse.value.ic, icon: icon20 },
+        { name: '业委会', value: pubulicSafeHouse.value.ic, icon: icon37 },
       ]
     })
     const houseTypes = computed(() => {
@@ -129,17 +130,17 @@ export default defineComponent({
         {
           name: '门面房',
           value: pubulicSafeNonResident.value.others,
-          icon: icon7,
+          icon: img3,
         },
         {
           name: '商办',
           value: pubulicSafeNonResident.value.commercial,
-          icon: icon21,
+          icon: img9,
         },
         {
           name: '商业综合体',
           value: pubulicSafeNonResident.value.comprehensive,
-          icon: icon22,
+          icon: img10,
         },
       ]
     })
@@ -165,9 +166,8 @@ export default defineComponent({
   margin 0.05rem 0 0.02rem
   color #eee
   .count
-    color $secondary-color
     font-size 0.14rem
-    margin-left 0.15rem
+    font-family $font-pang
   .unit
     color #aaa
     font-size 0.08rem
@@ -179,7 +179,7 @@ export default defineComponent({
   display flex
   justify-content space-between
   align-items center
-  margin-top 0.1rem
+  margin 0.1rem 0
   >div
     display flex
     align-items center

src/view/right/key-task.vue

@@ -93,9 +93,9 @@ export default defineComponent({
         series: [
           {
             type: 'wordCloud',
-            sizeRange: [sizeRate.value, sizeRate.value * 2],
+            sizeRange: [sizeRate.value, sizeRate.value * 2.2],
             rotationRange: [0, 0],
-            rotationStep: 45,
+            rotationStep: 90,
             gridSize: sizeRate.value,
             shape: 'pentagon',
             width: '100%',

src/view/right/old.vue

 <template>
   <m-card title="智慧养老">
     <div>
-      <m-sub :addition="{ value: 14696 }">老人数量</m-sub>
+      <m-sub2 :addition="{ value: 14696 }">老人数量</m-sub2>
       <div class="sum">
         <div v-for="item in oldSum" :key="item.name">
-          <m-count class="count" :value="item.value" /><span>%</span>
-          <p>{{ item.name }}</p>
+          <p class="count"><m-count :value="item.value" />%</p>
+          <span>{{ item.name }}</span>
         </div>
       </div>
     </div>
     <div>
-      <m-sub>年龄分布</m-sub>
+      <m-sub2>年龄分布</m-sub2>
       <div class="distribute">
         <div v-if="showChart" class="chart">
           <m-pie :dataset="pieData" :option="pieOption" />
@@ -30,17 +30,31 @@
       </div>
     </div>
     <div>
-      <m-sub>老人分类</m-sub>
-      <div class="table">
+      <m-sub2>老人分类</m-sub2>
+      <div v-if="showChart" class="old-type">
+        <div v-for="item in oldType" :key="item.name">
+          <div class="circle">
+            <Circle
+              class="circle-item"
+              :value="item.percent"
+              :stroke-width="8"
+              :color="['#F7933E', 'rgba(253,211,116,.9)']"
+              :rate="2.4"
+            />
+          </div>
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
+      <!-- <div class="table">
         <div v-for="item in oldType" :key="item.name">
           <p>{{ item.name }}</p>
           <p><m-count :value="item.value" /></p>
           <p><m-count :value="item.percent" :decimal="2" />%</p>
         </div>
-      </div>
+      </div> -->
     </div>
     <div>
-      <m-sub>养老方式</m-sub>
+      <m-sub2>养老方式</m-sub2>
       <div class="bar">
         <div
           v-for="item in oldMethod"
@@ -61,13 +75,15 @@
       </div>
     </div>
     <div>
-      <m-sub>长护险</m-sub>
+      <m-sub2>长护险</m-sub2>
       <div class="insurance">
         <div>
-          申请人数 <m-count class="count" :value="1113" /><span>人</span>
+          <m-count class="count" :value="1113" />
+          <span>申请人数</span>
         </div>
         <div>
-          申请通过人数 <m-count class="count" :value="812" /><span>人</span>
+          <m-count class="count" :value="812" />
+          <span>申请通过人数</span>
         </div>
       </div>
       <div v-if="showChart" class="insurance-chart">
@@ -79,10 +95,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
+import Circle from '../components/circle.vue'
 import store from '@/store'
 
 export default defineComponent({
   name: 'Old',
+  components: { Circle },
   setup() {
     const oldSum = ref([
       { name: '女性占比', value: 65 },
@@ -105,7 +123,7 @@ export default defineComponent({
     })
     const total = pieData.value.source.reduce((acc, cur) => acc + cur.value, 0)
     const pieOption = ref({
-      color: ['#8D51C7', '#BEBEBE', '#CA3A40', '#F9B84C', '#34ACFF', '#429321'],
+      color: ['#FE9B5F', '#51EBA4', '#77BFF9', '#8E6FFC', '#E06377', '#B9C3D1'],
       legend: { show: false },
       series: [
         {
@@ -173,19 +191,20 @@ export default defineComponent({
   width 100%
   display flex
   justify-content space-between
-  padding 0 .1rem
   >div
+    display flex
+    align-items center
+    justify-content space-around
+    width 30%
+    padding .05rem
     .count
       font-size .14rem
-      font-weight bold
-    span
-      color #aaa
-      font-size .08rem
-    p
-      color #ccc
+      color $orange
+      font-family $font-pang
+      margin-right .03rem
 .distribute
   width 100%
-  height 1.2rem
+  height 1rem
   display flex
   .chart
     width 40%
@@ -207,32 +226,29 @@ export default defineComponent({
         &:last-child
           font-size .08rem
           margin-left .11rem
-.table
+.old-type
+  width 100%
+  height 1.2rem
   display flex
-  border .01rem solid $blue
+  flex-wrap wrap
+  margin-bottom .3rem
   >div
-    flex 1
+    width 33.3%
     text-align center
-    &+div
-      border-left inherit
-    p
-      font-size .11rem
-      background $table-bg(0.15)
-      line-height 2
-      &+p
-        border-top .01rem solid $font-color
-      &:nth-of-type(1)
-        font-size .1rem
-        background $table-bg()
-      &:nth-of-type(2)
-        color $yellow
-      &:nth-of-type(3)
-        color $edge
+    .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
 .bar
   display flex
   width 100%
-  height .1rem
-  margin .2rem 0 .1rem
+  height .06rem
+  margin .2rem 0 .14rem
   >div
     position relative
     .count
@@ -268,15 +284,13 @@ export default defineComponent({
 .insurance
   display flex
   justify-content space-around
+  align-items center
   .count
     font-size .14rem
-    color $yellow
-    font-weight bold
-    margin-left .1rem
-  span
-    color #aaa
-    font-size .08rem
+    color $orange
+    font-family $font-pang
+    margin-right .1rem
 .insurance-chart
   width 100%
-  height 1rem
+  height 0.9rem
 </style>

src/view/right/police.vue

 <template>
   <m-card title="110非警情">
     <div>
-      <m-sub :addition="{ value: String(newFind.newFind), unit: '近30mins' }">
+      <m-sub2 :addition="{ value: String(newFind.newFind), unit: '近30mins' }">
         最新发现
-      </m-sub>
-      <Brief :list="sumList" />
+      </m-sub2>
+      <Brief :list="sumList" color="#fff" />
       <div v-if="showChart" class="chart">
         <m-line :dataset="lineData" :option="lineOption" />
       </div>
     </div>
     <div>
-      <m-sub>门岗值守分布</m-sub>
+      <m-sub2>门岗值守分布</m-sub2>
       <div class="gate">
         <p>直管公房</p>
-        <Summary :list="zggfList" />
+        <Summary :list="zggfList" :avatar="avatar7" />
       </div>
       <div class="gate">
         <p>社会物业</p>
-        <Summary :list="shwyList" />
+        <Summary :list="shwyList" :avatar="avatar7" />
       </div>
     </div>
     <div>
-      <m-sub>平安地图</m-sub>
+      <m-sub2>平安地图</m-sub2>
       <div class="safe-map">
         <div>
           <p
@@ -67,12 +67,13 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
-import Brief, { BriefProp } from '../components/brief.vue'
-import Summary, { SummaryProp } from '../components/summary.vue'
+import Brief from '../components/brief.vue'
+import Summary from '../components/summary.vue'
 import store from '@/store'
-import icon15 from '@/assets/images/icon15.png'
-import icon16 from '@/assets/images/icon16.png'
-import icon17 from '@/assets/images/icon17.png'
+import icon39 from '@/assets/images/icon39.png'
+import icon40 from '@/assets/images/icon40.png'
+import icon41 from '@/assets/images/icon41.png'
+import avatar7 from '@/assets/images/avatar7.png'
 
 export default defineComponent({
   name: 'Police',
@@ -96,9 +97,9 @@ export default defineComponent({
 
     const sumList = computed(() => {
       return [
-        { name: '今日发现', value: newFind.value.find, icon: icon15 },
-        { name: '今日处置中', value: newFind.value.doing, icon: icon16 },
-        { name: '今日结案', value: newFind.value.done, icon: icon17 },
+        { name: '今日发现', value: newFind.value.find, icon: icon39 },
+        { name: '今日处置中', value: newFind.value.doing, icon: icon40 },
+        { name: '今日结案', value: newFind.value.done, icon: icon41 },
       ]
     })
     const lineData = ref({
@@ -126,7 +127,7 @@ export default defineComponent({
       ],
     })
     const lineOption = ref({
-      color: ['#9B88F9', '#4F953B', '#FFCE34'],
+      color: ['#0073CA', '#4F953B', '#FF9D27'],
       legend: {
         right: '1%',
         itemWidth: fontSize.value,
@@ -185,6 +186,7 @@ export default defineComponent({
     //   { name: '定兴', value: 92 },
     // ])
     return {
+      avatar7,
       sumList,
       lineData,
       lineOption,
@@ -214,6 +216,8 @@ export default defineComponent({
     margin-bottom 0.01rem
 .safe-map
   display flex
+  $card-bg2()
+  padding .05rem .1rem
   >div
     &:first-child
       cursor pointer
@@ -222,7 +226,6 @@ export default defineComponent({
       flex-wrap wrap
       >p
         width 33.3%
-        margin-bottom 0.04rem
         span
           color #ccc
         .count
@@ -236,7 +239,6 @@ export default defineComponent({
     &:last-child
       $center()
       flex 1
-      background url('@/assets/images/border3.png') 100% / 100% 100% no-repeat
       >img
         width 80%
 </style>

src/view/right/population.vue

 <template>
-  <m-card
-    title="实有人口"
-    :addition="{ value: truePeople.personnelNum, unit: '人' }"
-  >
-    <Brief :list="summary" />
+  <m-card title="实有人口">
+    <m-sub2 :addition="{ value: truePeople.personnelNum }"> 人口数量 </m-sub2>
+    <Brief :list="summary" color="#fff" />
     <div class="content">
       <div v-for="item in population" :key="item.name">
         <m-count class="count" :value="item.value" />
         <div>
           <span>{{ item.name }}</span>
-          <!-- <img src="@/assets/images/location.png" /> -->
+          <img src="@/assets/images/location.png" />
         </div>
       </div>
     </div>
@@ -18,7 +16,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
-import Brief, { BriefProp } from '../components/brief.vue'
+import Brief from '../components/brief.vue'
 import inImg from '@/assets/images/in.png'
 import out from '@/assets/images/out.png'
 import store from '@/store'
@@ -54,24 +52,24 @@ export default defineComponent({
 </script>
 
 <style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
 .content
   display flex
   justify-content space-between
   >div
     width 32%
-    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
     padding 0.05rem 0.15rem
     .count
-      font-size 0.12rem
+      font-size 0.14rem
+      font-family $font-pang
+      color $orange
     >div
       display flex
       align-items center
-      justify-content space-between
       width 100%
-      span
-        font-size 0.09rem
-        color #ccc
       img
         width 0.1rem
         height @width
+        margin-left .05rem
 </style>

src/view/right/public-manage.vue

 <template>
   <div class="public-manage">
-    <m-card mode="border">
+    <m-card mode="border2">
       <Complain />
     </m-card>
-    <m-card mode="border">
+    <m-card mode="border2">
       <Demand />
     </m-card>
-    <m-card mode="border">
+    <m-card mode="border2">
       <div class="first-child"><CaseAnalysis /></div>
-      <div class="second-child"><KeyTask :show="showKeyTask" /></div>
+      <div class="second-child">
+        <KeyTask
+          mode="4"
+          :show="showKeyTask"
+          :color="taskColor"
+          height="1rem"
+          :bg="null"
+        />
+      </div>
       <div class="third-child"><BussinessEntry /></div>
     </m-card>
   </div>
@@ -28,7 +36,20 @@ export default defineComponent({
   components: { Complain, Demand, CaseAnalysis, KeyTask, BussinessEntry },
   setup() {
     const showKeyTask = computed(() => store.state.curTheme === 'manage')
-    return { showKeyTask }
+    return {
+      showKeyTask,
+      taskColor: [
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+        '#fff',
+      ],
+    }
   },
 })
 </script>
@@ -47,7 +68,6 @@ export default defineComponent({
       // height 50%
     .second-child
       height 2rem
-      // height 32%
     .third-child
-      height 0.8rem
+      height 1rem
 </style>

src/view/right/public-service.vue

 <template>
   <div class="public-service">
-    <m-card mode="border">
+    <m-card mode="border2">
       <div class="beauty1"><BeautyStreet /></div>
       <div class="beauty2"><BeautyHome /></div>
     </m-card>
-    <m-card mode="border">
+    <m-card mode="border2">
       <Old />
     </m-card>
-    <m-card mode="border">
+    <m-card mode="border2">
       <Ecology />
     </m-card>
   </div>

src/view/right/public-work.vue

@@ -49,14 +49,14 @@ export default defineComponent({
       showTask,
       taskColor: [
         '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
-        '#fff',
+        '#eee',
+        '#ddd',
+        '#ccc',
+        '#bbb',
+        '#aaa',
+        '#999',
+        '#888',
+        '#777',
       ],
     }
   },