党建引领

package.json

@@ -33,6 +33,7 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.14.0",
+    "naive-ui": "^2.19.5",
     "prettier": "^2.3.2",
     "stylus": "^0.54.8",
     "typescript": "^4.3.5",

src/components/MyComponent/main.styl

@@ -47,3 +47,9 @@ $card-bg2(opacity = 0.4, shadow = 0.2)
   background rgba(70,83,97,opacity)
   box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,shadow)
   border-radius .03rem
+
+$box()
+  background rgba(70,83,97,.4)
+  border-radius .04rem
+  box-shadow 0 0.01rem .01rem 0 rgba(255,255,255,.2) inset
+  box-sizing border-box
\ No newline at end of file

src/utils/component-list.ts

 import Property from '@/view/components/property.vue' // 物业
 import PropertyFeatures from '@/view/components/property-features.vue' // 物业体征
+import PartyLead from '@/view/components/party-lead.vue' // 党建引领
 
 export default {
   w1: Property,
   w2: PropertyFeatures,
+  w3: PartyLead,
 }

src/view/components/circle.vue

+<template>
+  <div class="circle">
+    <n-progress
+      class="circle-item"
+      type="circle"
+      :percentage="+value"
+      :color="color"
+      :border-radius="radius"
+      :fill-border-radius="radius"
+      :stroke-width="+strokeWidth"
+      indicator-text-color="#fff"
+      :show-indicator="showInfo"
+      :rail-color="railColor"
+    >
+      <slot />
+    </n-progress>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NProgress } from 'naive-ui'
+import { PropType } from 'vue'
+defineProps({
+  color: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '#F7933E',
+  },
+  railColor: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: 'rgba(255,255,255,0.1)',
+  },
+  value: {
+    type: Number as PropType<number>,
+    default: 0,
+  },
+  radius: {
+    type: Number as PropType<number>,
+    default: 0,
+  },
+  strokeWidth: {
+    type: Number as PropType<number>,
+    default: 8,
+  },
+  showInfo: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.circle
+  width 100%
+  height 100%
+  background-image url('@/assets/images/circle-bg.png')
+  background-repeat no-repeat
+  background-size 100% 100%
+  background-position center
+  padding 6%
+  box-sizing border-box
+  .circle-item
+    width 100%
+    height 100%
+</style>

src/view/components/component-modal.vue

@@ -61,7 +61,7 @@ watch(
 
 const curTab = ref('1')
 const tabs = [
-  { name: '物业', key: '1', list: ['w1', 'w2'] },
+  { name: '物业', key: '1', list: ['w1', 'w2', 'w3'] },
   { name: '市场', key: '2', list: [] },
   { name: '修缮', key: '3', list: [] },
   { name: '保障', key: '4', list: [] },

src/view/components/party-lead.vue

+<template>
+  <m-card title="党建引领">
+    <div class="sum">
+      <div v-for="item in summary" :key="item.name" class="rate">
+        <Circle :value="item.value">
+          <div class="content">
+            <m-count :value="item.value" />
+            <p>{{ item.name }}</p>
+          </div>
+        </Circle>
+      </div>
+      <div class="cross">
+        <p><m-count class="count" :value="5" /> 个</p>
+        <span>交叉任职数</span>
+      </div>
+    </div>
+    <div class="chart">
+      <m-bar
+        v-if="barData.source.length > 0"
+        :dataset="barData"
+        :option="barOption"
+      />
+      <m-empty v-else />
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Circle from './circle.vue'
+
+const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
+const summary = [
+  { name: '居委会', value: 10 },
+  { name: '业委会', value: 10 },
+  { name: '物业企业', value: 20 },
+]
+const barData = {
+  dimensions: [
+    { name: 'street', displayName: '街道' },
+    { name: 'partyNum', displayName: '党小组数量' },
+    { name: 'data1', displayName: '居委会' },
+    { name: 'data2', displayName: '业委会' },
+    { name: 'data3', displayName: '物业企业' },
+  ],
+  source: [
+    { street: '街道1', partyNum: 60, data1: 20, data2: 20, data3: 20 },
+    { street: '街道2', partyNum: 90, data1: 20, data2: 30, data3: 40 },
+    { street: '街道3', partyNum: 130, data1: 30, data2: 40, data3: 60 },
+    { street: '街道4', partyNum: 120, data1: 40, data2: 50, data3: 30 },
+    { street: '街道5', partyNum: 120, data1: 50, data2: 60, data3: 10 },
+    { street: '街道6', partyNum: 140, data1: 50, data2: 60, data3: 30 },
+    { street: '街道7', partyNum: 130, data1: 50, data2: 60, data3: 20 },
+    { street: '街道8', partyNum: 110, data1: 20, data2: 60, data3: 30 },
+  ],
+}
+const barOption = {
+  color: ['#785CDD', '#77BFF9', '#EDB872', '#64C29D'],
+  legend: {
+    right: '2%',
+    itemWidth: fontSize.value * 0.6,
+    itemHeight: fontSize.value * 0.8,
+  },
+  yAxis: {
+    minInterval: 1,
+  },
+  xAxis: [
+    {
+      type: 'category',
+      axisLabel: {
+        interval: 0,
+      },
+    },
+  ],
+  series: [
+    {
+      type: 'bar',
+      barWidth: '18%',
+      itemStyle: {
+        borderRadius: 8,
+      },
+      barGap: 0,
+    },
+    ...[1, 2, 3].map(() => ({
+      type: 'bar',
+      barWidth: '18%',
+      itemStyle: {
+        borderRadius: 8,
+      },
+      barGap: 0,
+      stack: '总量',
+    })),
+  ],
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+  .content
+    text-align center
+    white-space nowrap
+  .sum
+    display flex
+    >div
+      flex 1
+      &.rate
+        box-sizing border-box
+        padding .06rem
+      &.cross
+        flex 1.4
+        margin .08rem .05rem
+        $box()
+        $center()
+        flex-direction column
+        .count
+          color $orange
+          font-size .12rem
+  .chart
+    width 100%
+    height 1.1rem
+</style>

src/view/components/property.vue

@@ -62,12 +62,9 @@ const list = [
     flex 1.8
   .right
     flex 1
-    background rgba(70,83,97,.4)
-    border-radius .04rem
-    box-shadow 0 0.01rem .01rem 0 rgba(255,255,255,.2) inset
+    $box()
     margin .06rem .06rem 0 .1rem
     padding .06rem .1rem
-    box-sizing border-box
     >div
       display flex
       align-items center