修缮&保障

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

@@ -3,7 +3,8 @@
     <div v-if="msg" class="msg">
       <p v-if="msg.name">{{ msg.name }}</p>
       <p v-if="msg.value" :style="{ color: msg.color }">
-        <MonitorCount :value="msg.value" />
+        <MonitorCount v-if="typeof msg.value === 'number'" :value="msg.value" />
+        <span v-else>{{ msg.value }}</span>
         <span v-if="msg.unit">{{ msg.unit }}</span>
       </p>
     </div>
@@ -34,6 +35,10 @@ export default defineComponent({
       type: [String, Array] as PropType<string | string[]>,
       default: () => ['#0094FF', '#1EFBFF'],
     },
+    backgroundColor: {
+      type: String as PropType<string>,
+      default: null,
+    },
     /** 进度百分值 */
     value: {
       type: Number as PropType<number>,
@@ -60,6 +65,9 @@ export default defineComponent({
       return { background: props.color }
     })
     const bgColor = computed(() => {
+      if (props.backgroundColor) {
+        return { background: props.backgroundColor, opacity: 1 }
+      }
       if (Array.isArray(props.color)) {
         return {
           background: props.color[0],
@@ -108,6 +116,7 @@ export default defineComponent({
       top 0
       &.inner
         transition width .5s ease-in-out
+        z-index 2
       &.bg
         opacity .3
 </style>

src/lib/A001/index.vue

@@ -38,6 +38,7 @@
 export default {
   name: 'A001',
   title: '物业',
+  row: 1,
 }
 </script>
 <script lang="ts" setup>

src/lib/A002/index.vue

@@ -13,6 +13,7 @@
 export default {
   name: 'A002',
   title: '物业体征',
+  row: 2,
 }
 </script>
 <script lang="ts" setup>

src/lib/A003/index.vue

@@ -29,6 +29,7 @@
 export default {
   name: 'A003',
   title: '党建引领',
+  row: 1,
 }
 </script>
 <script lang="ts" setup>

src/lib/A004/index.vue

@@ -39,6 +39,7 @@
 export default {
   name: 'A004',
   title: '公共收益',
+  row: 1,
 }
 </script>
 <script lang="ts" setup></script>

src/lib/A005/index.vue

@@ -38,6 +38,7 @@
 export default {
   name: 'A005',
   title: '招投标',
+  row: 1,
 }
 </script>
 <script lang="ts" setup>

src/lib/A006/index.vue

@@ -69,6 +69,7 @@
 export default {
   name: 'A006',
   title: '行业监管',
+  row: 1,
 }
 </script>
 <script lang="ts" setup></script>

src/lib/A007/index.vue

@@ -47,6 +47,7 @@
 export default {
   name: 'A007',
   title: '物业报修',
+  row: 1,
 }
 </script>
 <script lang="ts" setup>

src/lib/A008/index.vue

@@ -10,6 +10,7 @@
 export default {
   name: 'A008',
   title: '小区健康度',
+  row: 1,
 }
 </script>
 <script lang="ts" setup>

src/lib/A009/index.vue

@@ -10,6 +10,7 @@
 export default {
   name: 'A009',
   title: '企业履职评分',
+  row: 1,
 }
 </script>
 <script lang="ts" setup>

src/lib/A010/index.vue

@@ -44,6 +44,7 @@
 export default {
   name: 'A010',
   title: '交易数据',
+  row: 1,
 }
 </script>
 <script lang="ts" setup>

src/lib/A011/index.vue

@@ -89,6 +89,7 @@
 export default {
   name: 'A010',
   title: '交易数据',
+  row: 2,
 }
 </script>
 <script lang="ts" setup>

src/lib/A012/index.vue

+<template>
+  <m-card title="加装电梯">
+    <div class="chart">
+      <m-bar :dataset="data" :option="option" />
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A012',
+  title: '加装电梯',
+  row: 1,
+}
+</script>
+<script lang="ts" setup>
+const data = {
+  dimensions: [
+    { name: 'year', displayName: '年' },
+    { name: 'value', displayName: '竣工项目' },
+  ],
+  source: [
+    { year: '2016', value: 2 },
+    { year: '2017', value: 4 },
+    { year: '2018', value: 7 },
+    { year: '2019', value: 10 },
+    { year: '2020', value: 18 },
+  ],
+}
+const option = {
+  color: [['#8CD5FF', '#1990BE']],
+  legend: {
+    right: '2%',
+  },
+  series: [
+    {
+      type: 'bar',
+      barWidth: '30%',
+    },
+  ],
+}
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.chart
+  width 100%
+  height 1.5rem
+</style>

src/lib/A013/index.vue

+<template>
+  <m-card title="加装电梯">
+    <div class="tabs">
+      <n-space>
+        <p
+          v-for="tab in tabs"
+          :key="tab.key"
+          class="tab"
+          :class="{ on: curTab === tab.key }"
+          @click="curTab = tab.key"
+        >
+          {{ tab.name }}
+        </p>
+      </n-space>
+      <n-space>
+        <n-select v-model:value="year" size="small" :options="yearOptions" />
+        <n-select v-model:value="area" size="small" :options="areaOptions" />
+      </n-space>
+    </div>
+    <div class="content">
+      <div v-for="(item, i) in list" :key="i">
+        <span>{{ i + 1 }}</span>
+        <span>{{ item.name }}</span>
+        <span>{{ item.address }}</span>
+        <span class="status">{{ item.status }}</span>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A013',
+  title: '加装电梯',
+  row: 2,
+}
+</script>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NSpace, NSelect } from 'naive-ui'
+const tabs = [
+  { name: '开工项目', key: 'start' },
+  { name: '竣工项目', key: 'done' },
+]
+const curTab = ref('start')
+const yearOptions = [
+  { label: '2021', value: '2021' },
+  { label: '2020', value: '2020' },
+  { label: '2019', value: '2019' },
+]
+const areaOptions = [
+  { label: '全区', value: '全区' },
+  { label: '1区', value: '1区' },
+  { label: '2区', value: '2区' },
+]
+const year = ref('2021')
+const area = ref('全区')
+const list = [
+  { name: '长安小区', address: '长安路288号', status: '不可加装' },
+  { name: '闻喜路1110弄小区', address: '曲沃路', status: '不可加装' },
+  { name: '象山小区', address: '临山路186号', status: '可加装' },
+  { name: '499弄小区', address: '宝山路519号', status: '不可加装' },
+  { name: '长安小区', address: '长安路288号', status: '不可加装' },
+  { name: '闻喜路1110弄小区', address: '曲沃路', status: '不可加装' },
+  { name: '象山小区', address: '临山路186号', status: '可加装' },
+  { name: '499弄小区', address: '宝山路519号', status: '不可加装' },
+  { name: '长安小区', address: '长安路288号', status: '不可加装' },
+  { name: '闻喜路1110弄小区', address: '曲沃路', status: '不可加装' },
+]
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+
+.tabs
+  display flex
+  justify-content space-between
+  align-items center
+  padding 0 .04rem
+  box-sizing border-box
+  .tab
+    cursor pointer
+    transition transform .2s ease-in-out
+    &:hover
+      color $yellow
+    &.on
+      font-weight bold
+      color $yellow
+      transform scale(1.1)
+.content
+  margin-top .1rem
+  flex 1
+  overflow-y auto
+  >div
+    $box()
+    display flex
+    justify-content space-between
+    align-items center
+    padding .04rem .06rem
+    &+div
+      margin-top .05rem
+    >span
+      &+span
+        margin-left .06rem
+      &:nth-of-type(2)
+      &:nth-of-type(3)
+        flex 1
+      &.status
+        color $yellow
+</style>
+<style lang="stylus">
+@import  '../../components/MyComponent/main.styl'
+
+.n-select
+  height .2rem
+  .n-base-selection
+    height inherit
+    .n-base-selection-label
+      height inherit
+      background rgba(70,83,97,.4) !important
+      box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+      .n-base-selection-input
+        color #fff
+        font-size .09rem
+      .n-base-icon.n-base-suffix__arrow
+        color $yellow
+        font-size .09rem
+    .n-base-selection__border
+    .n-base-selection__state-border
+      display none
+.n-base-select-menu.n-select-menu
+  background rgba(70,83,97,.8) !important
+  $blur()
+  .n-base-select-option
+    background transparent !important
+    font-size .09rem
+    color #fff
+    &.n-base-select-option--selected
+      color $yellow
+      font-weight bold
+    &.n-base-select-option--pending
+      color $yellow
+</style>

src/lib/A014/index.vue

+<template>
+  <m-card title="保障">
+    <div class="row">
+      <div>
+        <m-sub>公租房</m-sub>
+        <m-progress
+          :value="50"
+          :msg="{
+            name: '公共租赁',
+            value: '2253/38863',
+            color: '#fff',
+          }"
+          color="#EDB872"
+        />
+        <m-progress
+          :value="50"
+          :msg="{
+            name: '单位租赁',
+            value: '3554/468833',
+            color: '#fff',
+          }"
+          color="#EDB872"
+        />
+      </div>
+      <div>
+        <m-sub>廉租房</m-sub>
+        <div class="legend">
+          <p><i /><span>实物</span><m-count class="count" :value="33" /></p>
+          <p><i /><span>租金</span><m-count class="count" :value="798" /></p>
+        </div>
+        <m-progress
+          :value="10"
+          :msg="{
+            name: '补贴金额',
+            value: '426万元',
+            color: '#fff',
+          }"
+          color="#F7D600"
+          background-color="#0091FF"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div>
+        <m-sub>共有产权房</m-sub>
+        <m-progress
+          :value="50"
+          :msg="{
+            name: '已办入户/已分配',
+            value: '8763/19324',
+            color: '#fff',
+          }"
+          color="#EDB872"
+        />
+      </div>
+      <div>
+        <m-sub>动迁安置房</m-sub>
+        <m-progress
+          :value="50"
+          :msg="{
+            name: '剩余套数/总套数',
+            value: '4183/94028',
+            color: '#fff',
+          }"
+          color="#EDB872"
+        />
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A014',
+  title: '保障',
+  row: 1,
+}
+</script>
+<script lang="ts" setup></script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+
+.row
+  display flex
+  &+.row
+    margin-top .1rem
+  >div
+    flex 1
+    &+div
+      margin-left .04rem
+    .legend
+      display flex
+      width 100%
+      justify-content space-between
+      margin .08rem 0 .02rem
+      p
+        display flex
+        align-items center
+        i
+          width .06rem
+          height @width
+          border-radius 50%
+        span
+          margin 0 .05rem
+        .count
+          font-size .14rem
+          color $yellow
+        &:first-child
+          i
+            background #F7D600
+        &:last-child
+          i
+            background #0091FF
+</style>

src/lib/index.ts

@@ -9,3 +9,6 @@ export { default as A008 } from './A008/index.vue'
 export { default as A009 } from './A009/index.vue'
 export { default as A010 } from './A010/index.vue'
 export { default as A011 } from './A011/index.vue'
+export { default as A012 } from './A012/index.vue'
+export { default as A013 } from './A013/index.vue'
+export { default as A014 } from './A014/index.vue'