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

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
+  background url('@/assets/images/title-bg2.png') center / cover no-repeat
   z-index 1
-  &.work-station
-    background url('@/assets/images/title-bg2.png') center / cover no-repeat
-    h1
-      margin 0.4% 0 0 2%
   .date
     z-index 2
     position absolute
@@ -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

@@ -44,4 +44,9 @@ $table-content-hover-bg = $primary-bg
 $font-color = #70A7E0
 
 $table-bg(opacity = 0.3)
-  rgba(0, 118, 255, opacity )
\ No newline at end of file
+  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 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.workTimeDay }}</p>
+            <p>{{ item.personnelDay }}</p>
+          </div>
+          <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
+    display flex
+    flex-direction column
+    justify-content space-around
     &.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="nav">
-      <div>
-        <Tabs :list="tabs" horizontal @select="curTab = $event" />
-      </div>
-      <div>
-        <span
-          v-for="option in options"
-          :key="option.key"
-          :class="{ on: curOption === option.key }"
-          @click="curOption = option.key"
-        >
-          {{ option.name }}
-        </span>
-      </div>
-    </div>
     <div class="rank">
-      <SubTitle>分类排行</SubTitle>
+      <m-sub2>分类排行</m-sub2>
+      <div class="nav">
+        <div>
+          <span
+            v-for="option in options"
+            :key="option.key"
+            :class="{ on: curOption === option.key }"
+            @click="curOption = option.key"
+          >
+            {{ option.name }}
+          </span>
+        </div>
+      </div>
       <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>
-      <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 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>
+        <m-count class="count" :value="item.value" />
       </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 [
+        {
+          name: '事业单位',
+          value: institution,
+          rate: (institution / total) * 100,
+        },
         {
-          type: 'pie',
-          radius: [0, '90%'],
-          center: ['50%', '50%'],
-          label: {
-            show: false,
-          },
+          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
-          .count
-            font-size 0.12rem
-          .unit
-            font-size 0.08rem
-            color #aaa
-            margin-left 0.03rem
+    align-items center
+    justify-content space-between
+    .progress
+      flex 1
+      margin 0 .05rem
+    span,
+    .count
+      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)
+    display flex
+    align-items center
+    // justify-content space-between
     >div
+      flex 1
+      text-align center
+      height .6rem
       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)
-      >div
-        background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
-        width 28%
-        padding 0.05rem 0
-        text-align center
+      flex-direction column
+      justify-content space-between
+      p
+        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
-        position relative
-        .count
-          font-size 0.12rem
-        p
-          color #ccc
   .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/emergency-store.vue

+<template>
+  <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" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+  </m-card>
+  <m-card title="房屋外立面">
+    <div class="out-house">
+      <div class="view-selector">
+        <a-select
+          :value="year"
+          dropdown-class-name="view-selector-drop-down"
+          @select="changeYear"
+        >
+          <a-select-option
+            v-for="option in yearOptions"
+            :key="option"
+            :value="option"
+          >
+            {{ option }}
+          </a-select-option>
+        </a-select>
+      </div>
+      <Summary :list="houseSum" :avatar="avatar8" />
+      <div class="chart-container">
+        <div class="info">
+          <div v-for="item in info" :key="item.name">
+            <img :src="item.icon" />
+            <div>
+              <m-count class="count" :value="item.value" />
+              <p>{{ item.name }}</p>
+            </div>
+          </div>
+        </div>
+        <div v-if="showChart" class="chart">
+          <m-bar :option="barOption" />
+        </div>
+      </div>
+      <div class="bottom-box">
+        <m-sub2>重点关注楼宇</m-sub2>
+        <a class="check-btn" @click="listModal = true">查看清单</a>
+        <div class="content">
+          <div v-for="item in buildings.slice(0, 9)" :key="item.id">
+            <div>
+              <span>{{ item.projectName }}</span>
+              <img src="@/assets/images/location.png" />
+            </div>
+            <div class="secRow">
+              <span>
+                <span>隐患 </span>
+                <m-count
+                  class="count"
+                  :value="item.outerWallFacilityHiddenPoint"
+                />
+              </span>
+              <span>
+                <span>危险 </span>
+                <m-count
+                  class="count"
+                  :value="item.outerWallFacilityDangerPoint"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </m-card>
+  <m-modal
+    v-model="listModal"
+    enter="fadeInRight"
+    leave="fadeOutRight"
+    offset="65%"
+    width="40%"
+    title="重点关注楼宇清单"
+    :mask-closable="false"
+  >
+    <div>
+      <m-table
+        :template="[
+          '楼宇名称|房屋地址*2|检测日期|房屋用途|建造年份|平面形式|建筑面积|结构类别|层数|隐患点|危险点',
+          'projectName|houseAddr|inspectionDate|useType|buildYear|planeSituation|constructArea|structureType|floor|outerWallFacilityHiddenPoint|outerWallFacilityDangerPoint',
+        ]"
+        :data="buildings"
+      ></m-table>
+    </div>
+  </m-modal>
+</template>
+
+<script lang="ts">
+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'
+import three from '@/assets/images/3.png'
+
+export default defineComponent({
+  name: 'EmergencyStore',
+  components: { Summary, SubTitle },
+  setup() {
+    const showChart = computed(() => store.state.curTheme === 'safety')
+    store.dispatch('GET_PUBLICSAFE_SOS_MATERIAL')
+    store.dispatch('GET_PUBLICSAFE_OUTHOUSEWALL')
+    store.dispatch('GET_PUBLICSAFE_BUILDINGS')
+    store.dispatch('GET_PUBLICSAFE_PIEDATA')
+
+    const listModal = ref(false)
+    const SOSMaterail = computed(() => store.state.pubulicSafeSOSMaterail)
+    const pieData = computed(() => store.state.pubulicSafePieData)
+    const buildings = computed(() => store.state.pubulicSafeBuildings)
+    const outHouseWall = computed(() => store.state.pubulicSafeOutHouseWall)
+
+    const year = ref('2020') //年份
+    const yearOptions = ref(['2020', '2019']) //年份option
+    const houseSum = ref([
+      { name: '检查楼数', value: 0 },
+      { name: '隐患点数', value: 0 },
+      { name: '危险点数', value: 0 },
+    ])
+
+    //切换年份
+    const changeYear = (value: string) => {
+      year.value = value
+    }
+
+    const list = computed(() => {
+      return [
+        {
+          value: SOSMaterail.value.floodPreventionUnits || 0,
+          name: '防汛防台',
+        },
+        {
+          value: SOSMaterail.value.warmAntifreeze || 0,
+          name: '防寒抗冻',
+        },
+        {
+          value: SOSMaterail.value.emergencySupplies || 0,
+          name: '疫情控制',
+        },
+        {
+          value: SOSMaterail.value.emergencyRescue || 0,
+          name: '应急抢险',
+        },
+      ]
+    })
+
+    const population = ref([
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+      { name: '楼宇名称', value: 4, danger: 1 },
+    ])
+
+    const info = ref([
+      { name: '第一工作站', value: 0, icon: one },
+      { name: '第二工作站', value: 0, icon: two },
+      { name: '第三工作站', value: 0, icon: three },
+    ])
+
+    watch(
+      // 监听年份切花更改检查楼数  隐患点数 危险点数
+      [() => outHouseWall.value, () => year.value],
+      ([data, year]) => {
+        if (data.length === 0) return
+        const { checkNum = 0, hiddenPoint = 0, dangerPoint = 0 } = data.find(
+          (e: any) => e.year === year
+        )
+        houseSum.value = [
+          { name: '检查楼数', value: checkNum },
+          { name: '隐患点数', value: hiddenPoint },
+          { name: '危险点数', value: dangerPoint },
+        ]
+      },
+      { immediate: true }
+    )
+
+    const keys = [
+      'outerWallHiddenPoint',
+      'outerWallDangerPoint',
+      'outerWallFacilityHiddenPoint',
+      'outerWallFacilityDangerPoint',
+    ]
+    const barData = ref<any[]>([])
+    const barOption = computed(() => ({
+      color: ['#5BD5FF', '#6BE1B2', '#FF9500'],
+      legend: { show: false },
+      xAxis: [
+        {
+          type: 'category',
+          axisTick: { show: false },
+          data: keys.map((key) => getTypeName(key)),
+          axisLabel: {
+            interval: 0,
+            formatter: (value: string) => {
+              const i = Math.ceil(value.length / 2) || 0
+              return value.slice(0, i) + '\n' + value.slice(i)
+            },
+          },
+        },
+      ],
+      series: barData.value.map((item) => ({
+        name: item.workstationName,
+        type: 'bar',
+        barWidth: '14%',
+        barGap: '50%',
+        data: keys.map((key: string) => item[key] || 0),
+      })),
+    }))
+    function getTypeName(type: string) {
+      switch (type) {
+        case 'outerWallHiddenPoint':
+          return '外墙面层隐患点'
+        case 'outerWallDangerPoint':
+          return '外墙面层危险点'
+        case 'outerWallFacilityHiddenPoint':
+          return '外立面附加设施隐患点'
+        case 'outerWallFacilityDangerPoint':
+          return '外立面附加设施危险点'
+        default:
+          return ''
+      }
+    }
+    watch(
+      [() => pieData.value, () => year.value],
+      ([data, year]) => {
+        if (data.length === 0) return
+        const curData = data.filter((item: any) => item.year === year)
+        const first: any = curData.find((item: any) =>
+          item.workstationName.includes('第一')
+        )
+        const second: any = curData.find((item: any) =>
+          item.workstationName.includes('第二')
+        )
+        const third: any = curData.find((item: any) =>
+          item.workstationName.includes('第三')
+        )
+        barData.value = [first, second, third]
+        // // 将第二张饼图的数据更新
+        info.value = [
+          {
+            name: '第一工作站',
+            value: keys.reduce((acc, cur) => acc + first[cur], 0) || 0,
+            icon: one,
+          },
+          {
+            name: '第二工作站',
+            value: keys.reduce((acc, cur) => acc + second[cur], 0) || 0,
+            icon: two,
+          },
+          {
+            name: '第三工作站',
+            value: keys.reduce((acc, cur) => acc + third[cur], 0) || 0,
+            icon: three,
+          },
+        ]
+      },
+      { immediate: true }
+    )
+
+    return {
+      avatar8,
+      list,
+      houseSum,
+      listModal,
+      population,
+      info,
+      showChart,
+      changeYear,
+      year,
+      yearOptions,
+      SOSMaterail,
+      buildings,
+      outHouseWall,
+      pieData,
+      barOption,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.emergency
+  display flex
+  align-items center
+  justify-content space-between
+  height 80%
+  >div
+    display flex
+    align-items center
+    justify-content space-around
+    width 20%
+    .count
+      font-family $font-pang
+      font-size .14rem
+      color $orange
+.out-house
+  flex 1
+  .chart-container
+    height 1.8rem
+    display flex
+    .info
+      flex 1
+      display flex
+      flex-direction column
+      justify-content space-around
+      >div
+        display flex
+        align-items center
+        img
+          width .3rem
+          margin-right .05rem
+        .count
+          font-size .12rem
+          font-weight bold
+    .chart
+      width 75%
+      height 100%
+  .bottom-box
+    position relative
+    margin-top .1rem
+    .check-btn
+      position absolute
+      right .1rem
+      top 0
+      transform translateY(14%)
+    .content
+      display flex
+      justify-content space-around
+      flex-wrap wrap
+      >div
+        width 31%
+        $card-bg2()
+        padding .05rem .08rem
+        margin-top .08rem
+        .count
+          font-size 0.12rem
+        >div
+          display flex
+          align-items center
+          justify-content space-between
+          img
+            width 0.1rem
+            height @width
+        .secRow
+          >span
+            display flex
+            align-items center
+            color #ccc
+            &:last-child
+              .count
+                color $red
+            .count
+              color #fff
+              margin-left .05rem
+  .view-selector
+    float right
+    height 8%
+    padding 0.03rem 0
+</style>

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-safety.vue

 <template>
   <div class="public-service">
-    <m-card mode="border">
+    <m-card mode="border2">
       <Police />
     </m-card>
-    <m-card mode="border">
+    <m-card mode="border2">
       <div class="population"><Population /></div>
       <div class="house"><House /></div>
       <div class="company"><Company /></div>
     </m-card>
-    <m-card id="flex-start" mode="border">
-      <m-card title="应急物资储备">
-        <div class="emergency">
-          <div v-for="(item, index) in list" :key="index">
-            <div>
-              <p>{{ item.name }}</p>
-              <p class="num">{{ item.value }}</p>
-            </div>
-            <img :src="item.img" />
-          </div>
-        </div>
-      </m-card>
-      <m-card title="房屋外立面">
-        <div class="outHouse">
-          <div class="view-selector">
-            <a-select
-              :value="year"
-              dropdown-class-name="view-selector-drop-down"
-              @select="changeYear"
-            >
-              <a-select-option
-                v-for="option in yearOptions"
-                :key="option"
-                :value="option"
-              >
-                {{ option }}
-              </a-select-option>
-            </a-select>
-          </div>
-          <Summary class="summary" :two-child="true" :list="houseSum" />
-          <div class="chartBox">
-            <div v-if="showChart" class="drawCharts">
-              <div>
-                <m-pie
-                  class="chart1"
-                  :dataset="pieData1"
-                  :option="pieOption"
-                  @init="handleInit"
-                />
-                <span class="line"></span>
-                <m-pie class="chart2" :dataset="pieData2" :option="pieOption" />
-              </div>
-              <div class="legend">
-                <div
-                  v-for="(item, i) in pieData2.source"
-                  :key="item.name"
-                  style="width: 70%"
-                >
-                  <p>
-                    <span :style="{ background: pieOption.color[i][0] }" />
-                    {{ item.name }}
-                  </p>
-                  <p>
-                    <m-count class="count" :value="item.value" />
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div class="legendBottom">
-              <div
-                v-for="(item, i) in pieData1.source"
-                :key="item.name"
-                @click="changePie2(item, i)"
-              >
-                <p>
-                  <span :style="{ background: pieOption.color[i][0] }" />
-                  <m-count class="count" :value="item.value" />
-                </p>
-                <span style="">{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="bottomBox">
-            <SubTitle @clicktit="searchModal = true">
-              重点关注楼宇
-              <template #secTitle> 查看清单 </template>
-            </SubTitle>
-            <div class="content">
-              <div v-for="item in buildings.slice(0, 6)" :key="item.id">
-                <div>
-                  <span>{{ item.projectName }}</span>
-                  <!-- <img src="@/assets/images/location.png" /> -->
-                </div>
-                <div class="secRow">
-                  <span>
-                    <span>隐患 </span>
-                    <m-count
-                      class="count"
-                      :value="item.outerWallFacilityHiddenPoint"
-                    />
-                  </span>
-                  <span>
-                    <span>危险 </span>
-                    <m-count
-                      class="count"
-                      :value="item.outerWallFacilityDangerPoint"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </m-card>
+    <m-card mode="border2">
+      <EmergencyStore />
     </m-card>
-    <m-modal
-      v-model="searchModal"
-      enter="fadeInRight"
-      leave="fadeOutRight"
-      offset="65%"
-      width="40%"
-      title="重点关注楼宇清单"
-      :mask-closable="false"
-    >
-      <div>
-        <m-table
-          :template="[
-            '楼宇名称|房屋地址*2|检测日期|房屋用途|建造年份|平面形式|建筑面积|结构类别|层数|隐患点|危险点',
-            'projectName|houseAddr|inspectionDate|useType|buildYear|planeSituation|constructArea|structureType|floor|outerWallFacilityHiddenPoint|outerWallFacilityDangerPoint',
-          ]"
-          :data="buildings"
-        ></m-table>
-      </div>
-    </m-modal>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
+import { defineComponent } from 'vue'
 import Police from './police.vue'
 import Population from './population.vue'
 import House from './house.vue'
 import Company from './company.vue'
-import Brief from '../components/brief.vue'
-import Summary from '../components/summary.vue'
-import SubTitle from '../components/sub-title.vue'
-import store from '@/store'
-import Circle from '@/assets/images/Circle.png'
-import { log } from 'util'
+import EmergencyStore from './emergency-store.vue'
 export default defineComponent({
   name: 'PublicSafety',
-  components: { Police, Population, House, Company, SubTitle, Brief, Summary },
-
-  setup() {
-    const showChart = computed(() => store.state.curTheme === 'safety')
-
-    store.dispatch('GET_PUBLICSAFE_SOS_MATERIAL')
-    store.dispatch('GET_PUBLICSAFE_OUTHOUSEWALL')
-    store.dispatch('GET_PUBLICSAFE_BUILDINGS')
-    store.dispatch('GET_PUBLICSAFE_PIEDATA')
-
-    const searchModal = ref(false)
-    const SOSMaterail = computed(() => store.state.pubulicSafeSOSMaterail)
-    const pieData = computed(() => store.state.pubulicSafePieData)
-    const buildings = computed(() => store.state.pubulicSafeBuildings)
-    const outHouseWall = computed(() => store.state.pubulicSafeOutHouseWall)
-
-    const year = ref('2020') //年份
-    const yearOptions = ref(['2020', '2019']) //年份option
-    const houseSum = ref([
-      { name: '检查楼数', value: 0 },
-      { name: '隐患点数', value: 0 },
-      { name: '危险点数', value: 0 },
-    ])
-
-    const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型
-    const pieData1 = ref({
-      dimensions: [
-        { name: 'name', displayName: '类型' },
-        { name: 'value', displayName: '数量' },
-      ],
-      source: [
-        {
-          name: '外立面附加设施危险点',
-          value: 1,
-        },
-        {
-          name: '外立面附加设施隐患点',
-          value: 1,
-        },
-        {
-          name: '外墙面层隐患点',
-          value: 1,
-        },
-        {
-          name: '外墙面层危险点',
-          value: 1,
-        },
-      ],
-    })
-
-    //切换年份
-    const changeYear = (value: string) => {
-      year.value = value
-    }
-    //切换第二饼图展示的类别
-    const changePie2 = (item: any, i: number) => {
-      secPieKey.value = item.name
-    }
-
-    const list = computed(() => {
-      return [
-        {
-          img: Circle,
-          value: SOSMaterail.value.floodPreventionUnits || 0,
-          name: '防汛防台',
-        },
-        {
-          img: Circle,
-          value: SOSMaterail.value.warmAntifreeze || 0,
-          name: '防寒抗冻',
-        },
-        {
-          img: Circle,
-          value: SOSMaterail.value.emergencySupplies || 0,
-          name: '疫情控制',
-        },
-        {
-          img: Circle,
-          value: SOSMaterail.value.emergencyRescue || 0,
-          name: '应急抢险',
-        },
-      ]
-    })
-
-    const population = ref([
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-      { name: '楼宇名称', value: 4, danger: 1 },
-    ])
-
-    const pieData2 = ref({
-      dimensions: [
-        { name: 'name', displayName: secPieKey.value },
-        { name: 'value', displayName: '数量' },
-      ],
-      source: [
-        { name: '第一工作站', value: 1 },
-        { name: '第二工作站', value: 1 },
-        { name: '第三工作站', value: 1 },
-      ],
-    })
-    const pieOption = ref({
-      color: [
-        ['#F76B1C', '#FAD961'],
-        ['#429321', '#B4EC51'],
-        ['#3023AE', '#C86DD7'],
-        ['#51B7EC', '#212F93'],
-      ],
-      legend: { show: false },
-      series: [
-        {
-          type: 'pie',
-          radius: [0, '90%'],
-          center: ['50%', '50%'],
-          label: {
-            show: false,
-          },
-        },
-      ],
-    })
-    const handleInit = (instance: any) => {
-      instance.on('click', (e: any) => {
-        console.log('click~~~~~', e)
-        secPieKey.value = e.name
-      })
-    }
-
-    watch(
-      // 监听年份切花更改检查楼数  隐患点数 危险点数
-      [() => outHouseWall.value, () => year.value],
-      ([data, year]) => {
-        if (data.length === 0) return
-        const {
-          checkNum = 0,
-          hiddenPoint = 0,
-          dangerPoint = 0,
-          outerWallDangerPoint = 0,
-          outerWallFacilityDangerPoint = 0,
-          outerWallFacilityHiddenPoint = 0,
-          outerWallHiddenPoint = 0,
-        } = data.find((e: any) => e.year === year)
-        houseSum.value = [
-          { name: '检查楼数', value: checkNum },
-          { name: '隐患点数', value: hiddenPoint },
-          { name: '危险点数', value: dangerPoint },
-        ]
-        pieData1.value = {
-          dimensions: [
-            { name: 'name', displayName: '类型' },
-            { name: 'value', displayName: '数量' },
-          ],
-          source: [
-            {
-              name: '外墙面层隐患点',
-              value: outerWallHiddenPoint,
-            },
-            {
-              name: '外墙面层危险点',
-              value: outerWallDangerPoint,
-            },
-            {
-              name: '外立面附加设施隐患点',
-              value: outerWallFacilityHiddenPoint,
-            },
-            {
-              name: '外立面附加设施危险点',
-              value: outerWallFacilityDangerPoint,
-            },
-          ],
-        }
-      },
-      { immediate: true }
-    )
-    watch(
-      [() => pieData.value, () => year.value, () => secPieKey.value],
-      ([data, year, secPieKey]) => {
-        if (data.length === 0) return
-        // console.log(data, year)
-        const arr: any = []
-        data.forEach((item: any) => {
-          if (item.year == year) {
-            arr.push(item)
-          }
-        })
-        let secPieKeyName = ''
-        switch (secPieKey) {
-          case '外墙面层隐患点':
-            secPieKeyName = 'outerWallHiddenPoint'
-            break
-          case '外墙面层危险点':
-            secPieKeyName = 'outerWallDangerPoint'
-            break
-          case '外立面附加设施隐患点':
-            secPieKeyName = 'outerWallFacilityHiddenPoint'
-            break
-          case '外立面附加设施危险点':
-            secPieKeyName = 'outerWallFacilityDangerPoint'
-            break
-
-          default:
-            break
-        }
-
-        const first = arr.find(
-          (e: any) => e.workstationName == '第一综合网格工作站（武胜路）'
-        )[secPieKeyName]
-        const second = arr.find(
-          (e: any) => e.workstationName == '第二综合网格工作站（厦门路）'
-        )[secPieKeyName]
-        const third = arr.find(
-          (e: any) => e.workstationName == '第三综合网格工作站（牯林路）'
-        )[secPieKeyName]
-
-        // // 将第二张饼图的数据更新
-        pieData2.value = {
-          dimensions: [
-            { name: 'name', displayName: secPieKey },
-            { name: 'value', displayName: '数量' },
-          ],
-          source: [
-            { name: '第一工作站', value: first || 0 },
-            { name: '第二工作站', value: second || 0 },
-            { name: '第三工作站', value: third || 0 },
-          ],
-        }
-      },
-      { immediate: true }
-    )
-
-    return {
-      list,
-      houseSum,
-      searchModal,
-      population,
-      pieOption,
-      pieData2,
-      pieData1,
-      showChart,
-      changeYear,
-      year,
-      yearOptions,
-      SOSMaterail,
-      buildings,
-      outHouseWall,
-      pieData,
-      changePie2,
-      handleInit,
-    }
-  },
+  components: { Police, Population, House, Company, EmergencyStore },
 })
 </script>
 
@@ -419,162 +42,4 @@ export default defineComponent({
       flex 2
     .company
       flex 1.2
-#flex-start
-  display flex
-  :deep(.card-content)
-    justify-content flex-start
-  >div
-    flex 1
-    &:last-child
-      flex 2
-  .emergency
-    flex 1
-    display flex
-    flex-wrap wrap
-    align-items center
-    >div
-      display flex
-      height 50%
-      flex-wrap wrap
-      align-items center
-      width 50%
-      position relative
-      img
-        width 100%
-      >div
-        position absolute
-        text-align center
-        top 40%
-        left 50%
-        transform translate(-50%, -50%)
-        .num
-          font-size 0.2rem
-          font-family $font-pang
-  .outHouse
-    // white-space nowrap
-    flex 2
-    .chartBox
-      height 40%
-      display flex
-      flex-direction column
-      .drawCharts
-        height 67%
-        display flex
-        >div
-          display flex
-          justify-content space-around
-          width 100%
-          align-items center
-          .chart1
-            width 50%
-          .chart2
-            width 35%
-          .line
-            height 3px
-            width 15%
-            background lime
-        .legend
-          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
-                .count
-                  font-size 0.12rem
-                .unit
-                  font-size 0.08rem
-                  color #aaa
-                  margin-left 0.03rem
-      .legendBottom
-        display flex
-        flex-direction row
-        justify-content space-around
-        text-align left
-        height 30%
-        >div
-          width 25%
-          display flex
-          flex-direction column
-          justify-content space-between
-          // align-items center
-          >span
-            width 70%
-          >p
-            // flex 1
-            white-space nowrap
-            width 100%
-            padding-left 0.06rem
-            &:first-child
-              padding-left 0
-              span
-                width 0.06rem
-                height @width
-                display inline-block
-                margin-right @width
-                border-radius 50%
-            &:last-child
-              .count
-                font-size 0.12rem
-              .unit
-                font-size 0.08rem
-                color #aaa
-                margin-left 0.03rem
-    .bottomBox
-      height 40%
-      display flex
-      flex-direction column
-      .content
-        flex 1
-        display flex
-        justify-content space-around
-        align-items center
-        flex-wrap wrap
-        >div
-          width 32%
-          background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
-          padding 0.08rem
-          .count
-            font-size 0.12rem
-          >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
-          .secRow
-            display flex
-            justify-content space-around
-            flex-direction row
-            font-size 0.06rem
-            .count
-              color #fff
-              padding-left 0.03rem
-            >span
-              display flex
-              flex-direction row
-              align-items center
-              justify-content space-around
-    .view-selector
-      float right
-      height 8%
-      padding 0.03rem 0
-    .summary
-      height 10%
 </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',
       ],
     }
   },