增加静安默认组件,015:体征指标/016物业监管/017安全排查/018电梯加装/019市场预售

package.json

@@ -13,6 +13,7 @@
   ],
   "sideEffects": false,
   "scripts": {
+    "start": "npm run serve",
     "serve": "vue-cli-service serve dev/serve.ts",
     "prebuild": "rimraf ./dist",
     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js && node ./html.js && node ./repair.js",

src/components/brief.vue

@@ -66,7 +66,7 @@ export default defineComponent({
   flex-wrap wrap
   .count
     font-family $font-barlow
-    font-size .14rem
+    font-size .12rem
   &.vertical
     display inline-block
   >div

src/lib/A001/index.vue

 <template>
-  <m-card title="物业">
+  <m-card :title="title">
     <Brief :list="summary" />
     <div class="wrapper">
       <div class="left">
@@ -36,18 +36,32 @@
 </template>
 
 <script lang="ts">
-export default {
+const _config = {
   name: 'A001',
   title: '物业',
   row: 1,
+  baseUrl: window._base_url,
+  apis: [
+    { key: 'summary', value: '/api1' },
+    { key: 'list', value: '/api2' },
+  ],
 }
+export default _config
 </script>
 <script lang="ts" setup>
 import icon1 from '@/assets/images/icon1.png'
 import icon2 from '@/assets/images/icon2.png'
 import icon3 from '@/assets/images/icon3.png'
 import Brief from '@/components/brief.vue'
-import eventBus from '@/util/event-bus'
+import bus from '@/util/event-bus'
+import { PropType } from '@vue/runtime-core'
+
+const props = defineProps({
+  title: {
+    type: String as PropType<string>,
+    default: _config.title,
+  },
+})
 
 const summary = [
   { icon: icon1, name: '小区', value: 904 },
@@ -59,9 +73,17 @@ const list = [
   { name: '物企双周查', value: 83 },
   { name: '物业日查', value: 100 },
 ]
+
+/**
+ * 'addPoints'
+ * 'removePoints'
+ * 'focus'
+ *
+ */
 const test = () => {
-  eventBus.emit('map', 'A001')
+  bus.emit('map', 'A001')
 }
+bus.on('config-A001', (config) => {})
 </script>
 
 <style lang="stylus" scoped>

src/lib/A015/index.vue

+<template>
+  <m-card title="体征指标">
+    <m-sub :addition="{ value: 1674, unit: '个小区' }"> 住宅房屋 </m-sub>
+    <Brief :list="summary" />
+    <m-sub :addition="{ value: 351, unit: '幢' }"> 非居建筑 </m-sub>
+    <m-sub> 服务主体 </m-sub>
+    <Brief :list="list" />
+    <p />
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A015',
+  title: '体征指标',
+  row: 1,
+}
+</script>
+<script lang="ts" setup>
+import icon4 from '@/assets/images/icon4.png'
+import icon5 from '@/assets/images/icon5.png'
+import icon1 from '@/assets/images/icon1.png'
+import icon6 from '@/assets/images/icon6.png'
+import icon7 from '@/assets/images/icon7.png'
+import icon8 from '@/assets/images/icon8.png'
+import icon9 from '@/assets/images/icon9.png'
+import Brief from '@/components/brief.vue'
+import { ref } from 'vue'
+
+const summary = [
+  { icon: icon4, name: '商品房', value: 904 },
+  { icon: icon5, name: '公房', value: 400 },
+  { icon: icon1, name: '私房/农房', value: 130 },
+  { icon: icon6, name: '商住混合', value: 82 },
+  { icon: icon7, name: '军产', value: 12 },
+  { icon: icon8, name: '保障房', value: 46 },
+]
+const list = ref([
+  { icon: icon9, name: '业委会', value: 47520 },
+  { icon: icon9, name: '居委会', value: 3960 },
+  { icon: icon9, name: '物业汽油桶', value: 45 },
+])
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+</style>

src/lib/A016/index.vue

+<template>
+  <m-card title="物业监管">
+    <div class="wrapper">
+      <div class="left">
+        <m-progress
+          v-for="item in summary"
+          :key="item.name"
+          :value="item.value"
+          :msg="{
+            name: item.name,
+            value: item.value,
+            unit: '%',
+            color: '#fff',
+          }"
+          :color="['rgb(36,59,86)', '#F4923E']"
+        />
+      </div>
+      <div class="right">
+        <p>整改执行</p>
+        <div>
+          <div>
+            <p class="count"><m-count :value="63" /></p>
+            <p>已开</p>
+          </div>
+          |
+          <div>
+            <p class="count"><m-count :value="76" />%</p>
+            <p>完成率</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <m-sub :addition="{ value: 1684, unit: '万元' }"> 维修资金 </m-sub>
+    <Summary title="续筹分布" :list="list" :avatar="avatar1" />
+    <div class="chart">
+      <m-bar
+        v-if="barData.source.length > 0"
+        :dataset="barData"
+        :option="barOption"
+      />
+      <m-empty v-else />
+    </div>
+    <m-sub>物业党建</m-sub>
+    <div class="party">
+      <div v-for="item in partys" :key="item.name">
+        <m-count class="orange-count" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A016',
+  title: '物业监管',
+  row: 2,
+}
+</script>
+<script lang="ts" setup>
+import avatar1 from '@/assets/images/avatar1.png'
+import Summary from '@/components/summary.vue'
+import { ref } from 'vue'
+
+const summary = [
+  { name: '房办月查', value: 79 },
+  { name: '物企双周查', value: 83 },
+  { name: '物业日查', value: 100 },
+]
+const list = ref([
+  { name: '分户', value: 47520 },
+  { name: '门牌', value: 3960 },
+  { name: '小区', value: 45 },
+])
+
+const partys = [
+  { name: '业委会党小组', value: 29 },
+  { name: '居委交叉任职', value: 51 },
+  { name: '物业公司党小组', value: 167 },
+]
+
+const barData = {
+  dimensions: [
+    { name: 'street', displayName: '街道' },
+    { name: 'value', displayName: '数量' },
+  ],
+  source: [
+    { street: '街道1', value: 20 },
+    { street: '街道2', value: 20 },
+    { street: '街道3', value: 30 },
+    { street: '街道4', value: 40 },
+    { street: '街道5', value: 50 },
+    { street: '街道6', value: 50 },
+    { street: '街道7', value: 50 },
+    { street: '街道8', value: 20 },
+  ],
+}
+const barOption = {
+  legend: false,
+  yAxis: {
+    minInterval: 1,
+  },
+  xAxis: [
+    {
+      type: 'category',
+      axisLabel: {
+        interval: 0,
+      },
+    },
+  ],
+  series: [
+    {
+      type: 'bar',
+      barWidth: '30%',
+    },
+  ],
+}
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.wrapper
+  display flex
+  padding-bottom .04rem
+  .left
+    flex 1.8
+  .right
+    flex 1
+    $box()
+    margin .06rem .06rem 0 .1rem
+    padding .06rem .1rem
+    >div
+      display flex
+      align-items center
+      margin-top .1rem
+      >div
+        flex 1
+        text-align center
+        .count
+          font-size .12rem
+          color $yellow
+          font-family $font-din
+          font-weight bold
+        >p
+          color #ccc
+.chart
+  width 100%
+  height .8rem
+  margin-bottom .03rem
+.party
+  display flex
+  justify-content space-between
+  text-align center
+  margin-bottom .04rem
+  p
+    font-size .09rem
+    color #ccc
+</style>

src/lib/A017/index.vue

+<template>
+  <m-card title="安全排查">
+    <div class="chart-wrapper">
+      <div class="chart">
+        <m-pie
+          v-if="pieData.source.length > 0"
+          :dataset="pieData"
+          :option="pieOption"
+        />
+        <m-empty v-else />
+      </div>
+      <div class="legend">
+        <div v-for="(item, i) in pieData.source" :key="item.type">
+          <i class="dot" :style="`background:${pieOption.color[i]}`" />
+          <p>{{ item.type }}</p>
+          <span><m-count :value="item.value" />%</span>
+        </div>
+      </div>
+    </div>
+    <m-progress
+      v-for="item in list"
+      :key="item.name"
+      :value="item.value"
+      :msg="{
+        name: item.name,
+        value: item.value,
+        unit: '%',
+        color: '#fff',
+      }"
+      :color="['rgb(36,59,86)', '#F4923E']"
+      @click="test(item)"
+    />
+    <p />
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A017',
+  title: '安全排查',
+  row: 1,
+}
+</script>
+<script lang="ts" setup>
+const pieData = {
+  dimensions: [
+    { name: 'type', displayName: '类型' },
+    { name: 'value', displayName: '占比' },
+  ],
+  source: [
+    { type: '墙体裂开', value: 35 },
+    { type: '阳台开裂', value: 21 },
+    { type: '钢构件锈蚀', value: 19 },
+    { type: '房屋整体沉降倾斜', value: 14 },
+    { type: '场地地质', value: 9 },
+    { type: '周边环境风险', value: 11 },
+    { type: '其他', value: 5 },
+  ],
+}
+const pieOption = {
+  color: [
+    '#0076FF',
+    '#00BFFF',
+    '#9FC444',
+    '#FFCE34',
+    '#FF9D27',
+    '#FF6161',
+    '#BABABA',
+  ],
+  legend: false,
+  series: [
+    {
+      type: 'pie',
+      radius: ['60%', '90%'],
+      label: {
+        show: false,
+        position: 'center',
+      },
+    },
+  ],
+}
+const list = [
+  { name: '需专业排查', value: 31 },
+  { name: '需应急排险', value: 29 },
+  { name: '小梁薄板', value: 49 },
+]
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.chart-wrapper
+  display flex
+  .chart
+    width 30%
+    height .8rem
+  .legend
+    flex 1
+    display flex
+    flex-wrap wrap
+    >div
+      display flex
+      align-items center
+      width 50%
+      font-size .08rem
+      .dot
+        display inline-block
+        width .06rem
+        height @width
+        border-radius 50%
+      p
+        margin 0 .04rem
+        color #ccc
+</style>

src/lib/A018/index.vue

+<template>
+  <m-card title="电梯加装">
+    <div class="sum">
+      <div v-for="item in list" :key="item.name">
+        <span>{{ item.name }}</span>
+        <m-count class="orange-count" :value="item.value" />
+        <span>{{ item.unit }}</span>
+      </div>
+    </div>
+    <div class="chart">
+      <m-bar
+        v-if="charData.source.length > 0"
+        :dataset="charData"
+        :option="option"
+      />
+      <m-empty v-else />
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A018',
+  title: '电梯加装',
+  row: 1,
+}
+</script>
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
+const charData = {
+  dimensions: [
+    { name: 'name', displayName: '街道' },
+    { name: 'data1', displayName: '已完成加梯征询' },
+    { name: 'data2', displayName: '应完成加梯征询' },
+    { name: 'data3', displayName: '加梯已完工' },
+    { name: 'data4', displayName: '加梯应完工' },
+  ],
+  source: [
+    { name: '江宁路街道', data1: 100, data2: 100, data3: 50, data4: 50 },
+    { name: '静安寺街道', data1: 110, data2: 110, data3: 20, data4: 20 },
+    { name: '南京西路街道', data1: 120, data2: 130, data3: 40, data4: 40 },
+    { name: '曹家渡街道', data1: 130, data2: 140, data3: 60, data4: 60 },
+    { name: '石门二路街道', data1: 140, data2: 150, data3: 80, data4: 80 },
+    { name: '天目西路街道', data1: 150, data2: 160, data3: 90, data4: 90 },
+    { name: '北站街道', data1: 150, data2: 160, data3: 90, data4: 90 },
+    { name: '宝山路街道', data1: 100, data2: 100, data3: 50, data4: 50 },
+    { name: '芷江西路街道', data1: 110, data2: 110, data3: 20, data4: 20 },
+    { name: '共和新路街道', data1: 120, data2: 130, data3: 40, data4: 40 },
+    { name: '大宁路街道', data1: 130, data2: 140, data3: 60, data4: 60 },
+    { name: '彭浦新村街道', data1: 140, data2: 150, data3: 80, data4: 80 },
+    { name: '临汾路街道', data1: 150, data2: 160, data3: 90, data4: 90 },
+    { name: '彭浦镇', data1: 150, data2: 160, data3: 90, data4: 90 },
+  ],
+}
+const option = {
+  grid: {
+    left: '2%',
+    right: '1%',
+    bottom: '1%',
+    top: '20%',
+    containLabel: true,
+  },
+  legend: {
+    itemWidth: fontSize.value * 0.6,
+    itemHeight: fontSize.value * 0.8,
+    textStyle: {
+      fontSize: fontSize.value * 0.8,
+    },
+  },
+  xAxis: [
+    {
+      type: 'category',
+      axisLabel: {
+        interval: 0,
+        rotate: 45,
+        fontSize: fontSize.value * 0.8,
+      },
+    },
+  ],
+  series: [
+    {
+      type: 'bar',
+      barWidth: '30%',
+    },
+    {
+      type: 'line',
+    },
+    {
+      type: 'bar',
+      barWidth: '30%',
+    },
+    {
+      type: 'line',
+    },
+  ],
+}
+const list = [
+  { name: '多层住宅房屋', value: 2456, unit: '幢' },
+  { name: '可加梯门牌数', value: 953, unit: '幢' },
+  { name: '完成加梯征询', value: 20, unit: '幢' },
+  { name: '加梯完工', value: 16, unit: '幢' },
+]
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.sum
+  display flex
+  justify-content space-between
+  >div
+    display flex
+    align-items center
+    font-size .09rem
+    color #ccc
+    .orange-count
+      margin 0 .04rem
+    span
+      &:first-child
+        display inline-block
+        min-width .22rem
+        max-width .33rem
+.chart
+  width 100%
+  height 1.5rem
+</style>

src/lib/A019/index.vue

+<template>
+  <m-card title="市场预售">
+    <n-space justify="space-between">
+      <p>
+        住宅预销售金额
+        <span style="margin-left: 0.1rem">
+          <m-count class="orange-count" :value="1684" />
+          万元
+        </span>
+      </p>
+      <n-select v-model:value="year" size="small" :options="yearOptions" />
+    </n-space>
+    <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 }}
+            </span>
+            张
+            <span :style="{ color: item.color }">
+              {{ item.rate }}
+            </span>
+            %
+          </p>
+          <p class="name">{{ item.name }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="areas">
+      <div v-for="item in areas" :key="item.name">
+        <p>{{ item.name }}</p>
+        <span>
+          <m-count
+            class="orange-count"
+            :value="item.value"
+            :decimal="item.decimal"
+          />
+          {{ item.unit }}
+        </span>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'A019',
+  title: '市场预售',
+  row: 1,
+}
+</script>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NSpace, NSelect } from 'naive-ui'
+
+const year = ref('2021')
+const yearOptions = [
+  { label: '2021', value: '2021' },
+  { label: '2020', value: '2020' },
+  { label: '2019', value: '2019' },
+]
+const list = [
+  { name: '住房', value: 10, rate: 65, color: '#ff9d26' },
+  { name: '商办', value: 2, rate: 35, color: '#01bffe' },
+]
+const areas = [
+  { name: '预销售面积', value: 32.99, unit: '㎡', decimal: 2 },
+  { name: '预销售套数', value: 561, unit: '套', decimal: 0 },
+]
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.bar
+  display flex
+  width 100%
+  height .06rem
+  margin .1rem 0
+  >div
+    position relative
+    .count
+      font-size .12rem
+    >div
+      height .15rem
+      transform translateY(-100%)
+      .name
+        margin-top .05rem
+    &:nth-of-type(1)
+      >div
+        border-left .01rem solid
+      p
+        margin-left .05rem
+    &:nth-of-type(2)
+      >div
+        border-right .01rem solid
+        padding-right .1rem
+      p
+        width 100%
+        text-align right
+        margin-right .1rem
+.areas
+  display flex
+  justify-content space-between
+  >div
+    display flex
+    align-items center
+    justify-content space-between
+    width 49%
+    $box()
+    color #ccc
+    padding .05rem .08rem
+    .orange-count
+      margin 0 .04rem .02rem 0
+    span
+      display flex
+      align-items center
+      font-size .09rem
+      color #aaa
+</style>

src/lib/index.ts

@@ -12,3 +12,8 @@ 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'
+export { default as A015 } from './A015/index.vue'
+export { default as A016 } from './A016/index.vue'
+export { default as A017 } from './A017/index.vue'
+export { default as A018 } from './A018/index.vue'
+export { default as A019 } from './A019/index.vue'