Skip to content

Y
yangpu-property
Commit 6cf7700f authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

添加内容

parent 1d7bcbdd
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 28 deletions
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 6cf7700f
......@@ -94,6 +94,7 @@ export default {
boundaryGap: !shape.every(item => item.type === 'line')
}
options.xAxis = Object.assign({}, this.defaultOptions.xAxis, config, this.options.xAxis)
options.xAxis.axisLabel = Object.assign({}, this.defaultOptions.xAxis.axisLabel, this.options.xAxis.axisLabel)
//如果是折线图则用线型的tooltip
if (shape.some(item => item.type === 'line')) {
options.tooltip.axisPointer.type = 'line'
......
src/main.js
View file @ 6cf7700f
......@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import {Row, Col, Select, Option, DatePicker, Divider} from 'view-design'
import {Row, Col, Select, Option, DatePicker, Divider, Circle} from 'view-design'
import ajax from '@/server/ajax'
import api from '@/server/api'
import common from '@/util/common'
......@@ -27,6 +27,7 @@ Vue.component('Select', Select)
Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker)
Vue.component('Divider', Divider)
Vue.component('i-circle', Circle)
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/views/components/left-component.vue
View file @ 6cf7700f
......@@ -10,10 +10,13 @@
<!-- <m-card title="民防指标"><Defense /></m-card> -->
</div>
<div class="right">
<m-card title="网格管理"><GridManagement /></m-card>
<m-card title="党建引领"><PartyLead /></m-card>
<m-card title="物业健康度"><PropertyHealth /></m-card>
<m-card title="示范小区"></m-card>
<!-- <m-card title="网格管理"><GridManagement /></m-card>
<m-card title="房屋物业"><House /></m-card>
<m-card title="小区检查清单"><CommunityCheck /></m-card>
<m-card title="工作提示"><WorkTips /></m-card>
<m-card title="工作提示"><WorkTips /></m-card> -->
</div>
</div>
</div>
......@@ -21,26 +24,30 @@
<script>
import Command from './command'
import LandPopulation from './land-population'
import Green from './green'
import Defense from './defense'
import House from './house'
import CommunityCheck from './community-check'
import WorkTips from './work-tips'
import GridManagement from './grid-management'
// import LandPopulation from './land-population'
// import Green from './green'
// import Defense from './defense'
// import House from './house'
// import CommunityCheck from './community-check'
// import WorkTips from './work-tips'
// import GridManagement from './grid-management'
import OperationSign from './operation-sign'
import PartyLead from './party-lead'
import PropertyHealth from './property-health'
export default {
name: 'LeftComponent',
components: {
Command,
LandPopulation,
Green,
Defense,
House,
CommunityCheck,
WorkTips,
GridManagement,
// LandPopulation,
// Green,
// Defense,
// House,
// CommunityCheck,
// WorkTips,
// GridManagement,
OperationSign,
PartyLead,
PropertyHealth,
},
data() {
return {}
......@@ -81,11 +88,7 @@ export default {
height 15%
&.right
>div
height 28%
&:nth-child(1)
&:nth-child(4)
height 15%
&:nth-child(2)
height 40%
&:nth-child(3)
height 30%
height 44%
</style>
src/views/components/operation-sign.vue
View file @ 6cf7700f
......@@ -79,7 +79,7 @@ export default {
// },
legend: {hide: true},
shape: [
{type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
{type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']}
]
},
chartData: [
......@@ -199,18 +199,19 @@ export default {
flex-direction column
flex-wrap wrap
padding-left .1rem
margin-top .1rem
margin-left -0.3rem
margin-top 5%
// margin-left -0.3rem
transform translateX(-0.3rem)
>div
height 16%
.dot
display inline-block
width .1rem
width .08rem
height @width
border .02rem solid
border-radius 50%
p
margin 0 .05rem
margin 0 .03rem
display inline-block
</style>
src/views/components/party-lead.vue 0 → 100644
View file @ 6cf7700f
<template>
<div class="party-lead">
<div class="sum">
<i-circle
v-for="item in list"
:key="item.name"
:percent="item.percent"
:size="size * 6"
:stroke-width="size / 2"
:stroke-color="item.color"
:trail-width="size / 10"
:trail-color="item.color"
>
<div :style="`color:${item.color};font-size:.1rem`">
<m-count style="font-size:.12rem" :value="item.value" :decimal="0" />
<p>{{item.name}}</p>
</div>
</i-circle>
<div class="sum-item">
<p><m-count class="count" :value="5" :decimal="0" /><span class="unit">个</span></p>
<p>交叉任职数</p>
</div>
</div>
<div class="chart">
<m-chart v-if="mockData.length > 0" :config="config" :data="mockData" :options="options" />
<div v-else class="no-data">— 暂无数据 —</div>
</div>
</div>
</template>
<script>
export default {
name: 'PartyLead',
data() {
return {
list: [
{name: '居委会', value: 10, percent: 25, color: '#5BD5FF'},
{name: '业委会', value: 10, percent: 25, color: '#FF9D27'},
{name: '物业企业', value: 20, percent: 50, color: '#23D5C0'},
],
config: {
colors: [['#3023AE', '#C86DD7'], '#5BD5FF', '#FF9D27', '#23D5C0'],
legend: {
align: 'right',
},
shape: [
{key: 'total', name: '党小组数量', type: 'bar', barWidth: '30%', barGap: '20%'},
{key: 'num1', name: '居委会', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
{key: 'num2', name: '业委会', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
{key: 'num3', name: '物业企业', type: 'bar', stack: '党小组', barWidth: '10%', barGap: '20%'},
],
xAxis: {
key: 'name',
},
},
options: {
xAxis: {
splitLine: {show: false},
axisLabel: {
formatter: value => {
const arr = [...value]
return (arr.slice(0, 3)).join('') + '\n' + (arr.slice(3)).join('')
}
},
}
},
mockData: [
{name: '定海路街道', total: 13, num1: 3, num2: 3, num3: 7},
{name: '平凉路街道', total: 20, num1: 5, num2: 5, num3: 10},
{name: '江浦路街道', total: 13, num1: 3, num2: 3, num3: 7},
{name: '四平路街道', total: 25, num1: 7, num2: 7, num3: 11},
{name: '控江路街道', total: 20, num1: 5, num2: 5, num3: 10},
{name: '长白新村街道', total: 13, num1: 3, num2: 3, num3: 7},
{name: '延吉新村街道', total: 25, num1: 7, num2: 7, num3: 1},
{name: '新江湾城街道', total: 13, num1: 3, num2: 3, num3: 7},
{name: '长海路街道', total: 30, num1: 10, num2: 10, num3: 10},
{name: '大桥街道', total: 20, num1: 5, num2: 5, num3: 10},
{name: '五角场街道', total: 13, num1: 3, num2: 3, num3: 7},
],
}
},
computed: {
size() {
return Math.floor(screen.height * 1.48 / 100)
},
}
}
</script>
<style lang="stylus" scoped>
.party-lead
.no-data
width 100%
height 100%
$flex-center()
.sum
display flex
justify-content space-around
align-items center
>.sum-item
min-width .9rem
min-height .5rem
background $cardBg
$flex-center()
flex-direction column
p
font-size .09rem
color #fff
.count
color $color-yellow
font-size .12rem
.unit
font-size .08rem
color #aaa
.chart
margin-top .1rem
width 100%
height 65%
background-image url('../../assets/images/chart-bg.png')
background-size 100% 100%
background-repeat no-repeat
padding .1rem .03rem .03rem .05rem
</style>
src/views/components/property-health.vue 0 → 100644
View file @ 6cf7700f
<template>
<div class="property-health">
<div class="chart" ref="chart"></div>
<div class="total">
<p>综合得分</p>
<m-count style="font-size:0.12rem;color:#75e1b0;" :value="91" :decimal="0" />
<p class="unit">（分）</p>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
const mockValue = [22.1, 20.9, 24.5, 20.2, 21.1]
export default {
name: 'PropertyHealth',
data() {
return {
chart: null,
option: {
tooltip: {
trigger: 'axis',
confine: true,
},
radar: [{
name: {
rich: {
a: {
color: '#aaa',
lineHeight: 20,
fontSize: 12 * this.sizeRate,
},
b: {
color: '#ffd400',
align: 'center',
fontSize: 12 * this.sizeRate,
},
c: {
color: '#fff',
fontSize: 12 * this.sizeRate,
},
},
formatter: (text, {index}) => {
const max = [25, 25, 25, 25, 25]
return `{a|${text}}\n{b|${mockValue[index]}}{c|/${max[index]}}`
},
},
splitArea: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
axisLine: {
show: false,
},
indicator: [
{text: '全市物业诚信计分', index: 0, max: 25},
{text: '投诉报修情况', index: 1, max: 25},
{text: '小区管理情况', index: 2, max: 25},
{text: '业主满意度', index: 3, max: 25},
{text: '行业落实情况', index: 4, max: 25},
],
center: ['50%', '60%'],
radius: '60%',
}],
series: [{
type: 'radar',
symbol: 'none',
lineStyle: {
color: '#ff0000'
},
areaStyle: {
color: 'rgba(255,106,37,.6)',
},
data: [{
value: mockValue,
}]
}]
}
}
},
mounted() {
setTimeout(this.init, 0)
},
beforeDestroy() {
this.chart && window.removeEventListener('resize', () => this.chart.resize())
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
init() {
this.chart = echarts.init(this.$refs.chart)
window.addEventListener('resize', () => this.chart.resize())
this.chart.setOption(this.option)
}
}
}
</script>
<style lang="stylus" scoped>
.property-health
display flex
justify-content space-around
align-items center
.chart
width 70%
height 100%
.total
padding 0 .1rem
width .8rem
height @width
background-image url(../../assets/images/edge-bg.png)
background-size 100% 100%
background-repeat no-repeat
$flex-center()
flex-direction column
color #aaa
.unit
font-size .08rem
</style>
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