Skip to content

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

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

parent 86a0996a
Show whitespace changes
Inline Side-by-side
Showing with 369 additions and 1 deletion
dev/serve.vue
View file @ e6a0b2c3
......@@ -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
View file @ e6a0b2c3
......@@ -85,7 +85,7 @@ export default defineComponent({
}
const { chartRef, initChart } = useChartGenerate(
defaultOption,
defaultSeriesItem
defaultSeriesItem,
)
onMounted(() => {
// eslint-disable-next-line
......
src/lib/A007/index.vue 0 → 100644
View file @ e6a0b2c3
<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 0 → 100644
View file @ e6a0b2c3
<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 0 → 100644
View file @ e6a0b2c3
<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
View file @ e6a0b2c3
......@@ -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'
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