物业报修&小区健康度&企业履职评分

dev/serve.vue

@@ -2,6 +2,9 @@
   <div id="main">
     <div v-for="(component, key) in components" :key="key" class="box">
       <component :is="component" />
+      <!-- <p class="name" title="点击复制" @click="copyName(component.name)">
+        {{ component.name }}
+      </p> -->
     </div>
   </div>
 </template>
@@ -14,6 +17,14 @@ export default defineComponent({
 </script>
 <script lang="ts" setup>
 import * as components from '@/lib/index'
+function copyName(name) {
+  const input = document.createElement('input')
+  input.value = name
+  document.body.appendChild(input)
+  input.select()
+  document.execCommand('Copy')
+  document.body.removeChild(input)
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -31,6 +42,33 @@ import * as components from '@/lib/index'
     -webkit-column-break-inside avoid
     break-inside avoid
     margin-bottom .05rem
+    position relative
+    // .name
+    //   display none
+    //   position absolute
+    //   top 50%
+    //   left 50%
+    //   transform translate(-50%, -50%)
+    //   font-size .2rem
+    //   font-weight bold
+    //   color #fff
+    //   z-index 9
+    //   cursor pointer
+    // &:hover
+    //   &:after
+    //     content ''
+    //     position absolute
+    //     top 0
+    //     left 0
+    //     bottom 0
+    //     right 0
+    //     background rgba(0,0,0,.5)
+    //     z-index 8
+    //   .name
+    //     display block
+    //     transition color .2s ease-in-out
+    //     &:hover
+    //       color #47B3FF
 </style>
 <style lang="stylus">
 @font-face

src/components/MyComponent/MyChart/my-radar.vue

@@ -85,7 +85,7 @@ export default defineComponent({
     }
     const { chartRef, initChart } = useChartGenerate(
       defaultOption,
-      defaultSeriesItem
+      defaultSeriesItem,
     )
     onMounted(() => {
       // eslint-disable-next-line

src/lib/A007/index.vue

+<template>
+  <m-card title="物业报修">
+    <div class="sum">
+      <div>
+        全区物业保修数
+        <span><m-count class="orange-count" :value="100" /></span>
+        个
+      </div>
+      <div>
+        应急维修数
+        <span class="orange-count">
+          <m-count :value="2" />/<m-count :value="4" />/<m-count :value="18" />
+        </span>
+        个
+      </div>
+    </div>
+    <div class="bar">
+      <div
+        v-for="item in list"
+        :key="item.name"
+        :style="{ flex: item.rate, background: item.color }"
+      >
+        <div :style="{ borderColor: item.color }">
+          <p>
+            <span :style="{ color: item.color }">
+              {{ item.value }} / {{ item.rate }}% / {{ item.count }}
+            </span>
+            {{ item.name }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div v-for="item in companyData" :key="item.name">
+        <span>{{ item.name }}</span>
+        <div class="progress">
+          <m-progress :color="['#FF692D', '#F7973D']" :value="+item.rate" />
+        </div>
+        <!-- <m-count class="count" :value="item.value" /> -->
+        <p>{{ item.value }} / {{ item.rate }}% / {{ item.count }}</p>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A007',
+  title: '物业报修',
+}
+</script>
+<script lang="ts" setup>
+const list = [
+  { name: '商品房', value: 60, rate: 20, count: 0.1, color: '#72c011' },
+  { name: '老旧小区', value: 135, rate: 45, count: 0.5, color: '#ff9d26' },
+  { name: '保障房', value: 105, rate: 35, count: 0.3, color: '#01bffe' },
+]
+
+const total = 255
+const companyData = [
+  {
+    name: '物业企业1',
+    value: 21,
+    rate: ((21 / total) * 100).toFixed(0),
+    count: 0.5,
+  },
+  {
+    name: '物业企业2',
+    value: 12,
+    rate: ((12 / total) * 100).toFixed(0),
+    count: 0.4,
+  },
+  {
+    name: '物业企业3',
+    value: 12,
+    rate: ((12 / total) * 100).toFixed(0),
+    count: 0.4,
+  },
+  {
+    name: '其他',
+    value: 210,
+    rate: ((210 / total) * 100).toFixed(0),
+    count: 0.9,
+  },
+]
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+
+.sum
+  $box()
+  display flex
+  align-items center
+  justify-content space-between
+  padding .03rem .05rem
+  span
+    margin-left .1rem
+.bar
+  display flex
+  width 100%
+  height .06rem
+  margin .35rem 0 .05rem
+  >div
+    position relative
+    .count
+      font-size .12rem
+    p
+      position absolute
+      min-width 1rem
+      span
+        display block
+    >div
+      height .25rem
+    &:nth-of-type(1)
+      >div
+        transform translateY(-90%)
+        border-left .01rem solid
+      p
+        top -0.09rem
+        left .05rem
+    &:nth-of-type(2)
+    &:nth-of-type(3)
+      >div
+        transform translateY(-90%)
+        border-right .01rem solid
+      p
+        top -0.09rem
+        right .05rem
+        text-align right
+.content
+  >div
+    display flex
+    align-items center
+    justify-content space-between
+    .progress
+      flex 1
+      margin 0 .05rem
+    span
+      min-width .5rem
+    p
+      min-width .5rem
+      text-align right
+</style>

src/lib/A008/index.vue

+<template>
+  <m-card title="小区健康度">
+    <div class="chart">
+      <m-radar :dataset="data" :option="option" />
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A008',
+  title: '小区健康度',
+}
+</script>
+<script lang="ts" setup>
+const data = {
+  dimensions: [
+    { name: 'class1', displayName: '行政检查', max: 100 },
+    { name: 'class2', displayName: '履行行业管理', max: 100 },
+    { name: 'class3', displayName: '履行物业服务规范', max: 100 },
+    { name: 'class4', displayName: '投诉及处置情况', max: 100 },
+    { name: 'class5', displayName: '诚信积分', max: 100 },
+  ],
+  source: [
+    {
+      seriesName: '健康度',
+      class1: 85.6,
+      class2: 87.6,
+      class3: 54.6,
+      class4: 96,
+      class5: 72.7,
+    },
+  ],
+}
+const option = {
+  color: [['#0078D0', '#61FAFA']],
+  legend: { show: false },
+  radar: {
+    radius: '60%',
+    axisName: {
+      formatter: function (value, { name }) {
+        const key = data.dimensions.find((e) => e.displayName === name)?.name
+        if (!key) return value
+        const val = data.source[0][key] || 0
+        let displayNum = ''
+        if (val <= 60) {
+          displayNum = `{b|${val}}`
+        } else if (val > 60 && val <= 80) {
+          displayNum = `{c|${val}}`
+        } else if (val > 80) {
+          displayNum = `{d|${val}}`
+        }
+        return [`{a|${value}}`, displayNum].join('\n')
+      },
+      rich: {
+        a: {
+          color: '#ccc',
+          fontSize: '.09rem',
+          lineHeight: 14,
+        },
+        b: {
+          fontSize: '.12rem',
+          fontWeight: 'bold',
+          color: '#F7B500',
+          align: 'center',
+        },
+        c: {
+          fontSize: '.12rem',
+          fontWeight: 'bold',
+          color: '#32C5FF',
+          align: 'center',
+        },
+        d: {
+          fontSize: '.12rem',
+          fontWeight: 'bold',
+          color: '#42FC5A',
+          align: 'center',
+        },
+      },
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.chart
+  width 100%
+  height 1.5rem
+</style>

src/lib/A009/index.vue

+<template>
+  <m-card title="企业履职评分">
+    <div class="chart">
+      <m-radar :dataset="data" :option="option" />
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A009',
+  title: '企业履职评分',
+}
+</script>
+<script lang="ts" setup>
+const data = {
+  dimensions: [
+    { name: 'class1', displayName: '物业服务履约质量', max: 100 },
+    { name: 'class2', displayName: '综合能力等级', max: 100 },
+    { name: 'class3', displayName: '诉求处置及信息报送', max: 100 },
+    { name: 'class4', displayName: '社会责任履行社区满意度', max: 100 },
+    { name: 'class5', displayName: '社会公众满意度', max: 100 },
+    { name: 'class6', displayName: '企业信用计分情况', max: 100 },
+  ],
+  source: [
+    {
+      seriesName: '健康度',
+      class1: 85.6,
+      class2: 72.7,
+      class3: 69.2,
+      class4: 96.0,
+      class5: 54.6,
+      class6: 87.6,
+    },
+  ],
+}
+const option = {
+  color: [['#F76B1C', '#FAD961']],
+  legend: { show: false },
+  radar: {
+    center: ['50%', '50%'],
+    radius: '52%',
+    axisName: {
+      formatter: function (value, { name }) {
+        const key = data.dimensions.find((e) => e.displayName === name)?.name
+        if (!key) return value
+        const val = data.source[0][key] || 0
+        let displayNum = ''
+        if (val <= 60) {
+          displayNum = `{b|${val}}`
+        } else if (val > 60 && val <= 80) {
+          displayNum = `{c|${val}}`
+        } else if (val > 80) {
+          displayNum = `{d|${val}}`
+        }
+        return [`{a|${value}}`, displayNum].join('\n')
+      },
+      rich: {
+        a: {
+          color: '#ccc',
+          fontSize: '.09rem',
+          lineHeight: 14,
+        },
+        b: {
+          fontSize: '.12rem',
+          fontWeight: 'bold',
+          color: '#F7B500',
+          align: 'center',
+        },
+        c: {
+          fontSize: '.12rem',
+          fontWeight: 'bold',
+          color: '#32C5FF',
+          align: 'center',
+        },
+        d: {
+          fontSize: '.12rem',
+          fontWeight: 'bold',
+          color: '#42FC5A',
+          align: 'center',
+        },
+      },
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.chart
+  width 100%
+  height 1.5rem
+</style>

src/lib/index.ts

@@ -4,3 +4,6 @@ export { default as A003 } from './A003/index.vue'
 export { default as A004 } from './A004/index.vue'
 export { default as A005 } from './A005/index.vue'
 export { default as A006 } from './A006/index.vue'
+export { default as A007 } from './A007/index.vue'
+export { default as A008 } from './A008/index.vue'
+export { default as A009 } from './A009/index.vue'