Skip to content

C
component-lib
Commit 3bfb9a02 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

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

parent cb7b6483
Show whitespace changes
Inline Side-by-side
Showing with 602 additions and 5 deletions
package.json
View file @ 3bfb9a02
......@@ -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
View file @ 3bfb9a02
......@@ -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
View file @ 3bfb9a02
<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 0 → 100644
View file @ 3bfb9a02
<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 0 → 100644
View file @ 3bfb9a02
<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 0 → 100644
View file @ 3bfb9a02
<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 0 → 100644
View file @ 3bfb9a02
<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 0 → 100644
View file @ 3bfb9a02
<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
View file @ 3bfb9a02
......@@ -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'
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment