Commit 33faa0cc authored by 程卓's avatar 程卓

公共管理接口与样式调整完成

parent fca1b8fd
...@@ -24,8 +24,11 @@ ...@@ -24,8 +24,11 @@
</div> </div>
<div> <div>
<p v-for="item in classChartData.dimensions" :key="item.name"> <p v-for="item in classChartData.dimensions" :key="item.name">
<span /> {{ item.displayName }} <i />
{{ classChartData.source[0][item.name] }} <span>{{ item.displayName }}</span>
<span> {{ classChartData.source[0][item.name] }}</span>
<!-- <span /> {{ item.displayName }}
{{ classChartData.source[0][item.name] }} -->
</p> </p>
</div> </div>
</div> </div>
...@@ -291,21 +294,26 @@ export default defineComponent({ ...@@ -291,21 +294,26 @@ export default defineComponent({
p p
display flex display flex
align-items center align-items center
span width 100%
i
display inline-block display inline-block
width 0.06rem width 0.06rem
height @width height @width
border-radius 50% border-radius 50%
margin-right 0.1rem margin-right 0.1rem
background #826AFA background #826AFA
&:nth-of-type(2) > span &:nth-of-type(2) > i
background #E02020 background #E02020
&:nth-of-type(3) > span &:nth-of-type(3) > i
background #F7B500 background #F7B500
&:nth-of-type(4) > span &:nth-of-type(4) > i
background #6DD400 background #6DD400
&:nth-of-type(5) > span &:nth-of-type(5) > i
background #32C5FF background #32C5FF
span
flex 4
&:last-child
flex 1
.emergency .emergency
height 1.2rem height 1.2rem
overflow hidden overflow hidden
......
...@@ -143,23 +143,47 @@ export default defineComponent({ ...@@ -143,23 +143,47 @@ export default defineComponent({
}, },
] ]
}) })
const barData = ref({ const barData = computed(() => {
dimensions: [ if (workstationKind.value[0]) {
{ name: 'date', displayName: '日期' }, const source: { date: any; data1: any; data2: any; data3: any }[] = []
{ name: 'data1', displayName: '发现数' }, workstationKind.value.forEach((element: any, index: number) => {
{ name: 'data2', displayName: '处置数' }, source.unshift({
{ name: 'data3', displayName: '结案数' }, date: workstationKind.value[index].date,
], data1: workstationKind.value[index].statistical.oneDisposalNum,
source: [ data2: workstationKind.value[index].statistical.twoDisposalNum,
{ date: '11-11', data1: 100, data2: 100, data3: 100 }, data3: workstationKind.value[index].statistical.threeDisposalNum,
{ date: '11-12', data1: 110, data2: 110, data3: 120 }, })
{ date: '11-13', data1: 120, data2: 130, data3: 140 }, })
{ date: '11-14', data1: 130, data2: 140, data3: 160 },
{ date: '11-15', data1: 140, data2: 150, data3: 180 }, return {
{ date: '11-16', data1: 150, data2: 160, data3: 190 }, dimensions: [
{ date: '11-17', data1: 150, data2: 160, data3: 190 }, { name: 'date', displayName: '日期' },
{ date: '11-18', data1: 150, data2: 160, data3: 190 }, { name: 'data1', displayName: '发现数' },
], { name: 'data2', displayName: '处置数' },
{ name: 'data3', displayName: '结案数' },
],
source: source,
}
} else {
return {
dimensions: [
{ name: 'date', displayName: '日期' },
{ name: 'data1', displayName: '发现数' },
{ name: 'data2', displayName: '处置数' },
{ name: 'data3', displayName: '结案数' },
],
source: [
{ date: '11-11', data1: 100, data2: 100, data3: 100 },
{ date: '11-12', data1: 110, data2: 110, data3: 120 },
{ date: '11-13', data1: 120, data2: 130, data3: 140 },
{ date: '11-14', data1: 130, data2: 140, data3: 160 },
{ date: '11-15', data1: 140, data2: 150, data3: 180 },
{ date: '11-16', data1: 150, data2: 160, data3: 190 },
{ date: '11-17', data1: 150, data2: 160, data3: 190 },
{ date: '11-18', data1: 150, data2: 160, data3: 190 },
],
}
}
}) })
const barOption = ref({ const barOption = ref({
color: ['#5BD5FF', '#FFCE34', '#826AFA'], color: ['#5BD5FF', '#FFCE34', '#826AFA'],
...@@ -179,32 +203,64 @@ export default defineComponent({ ...@@ -179,32 +203,64 @@ export default defineComponent({
})), })),
}) })
const pieData = computed(() => { const pieData = computed(() => {
return [ if (workstationKind.value[0]) {
{ return [
name: '第一工作站', {
value: name: '第一工作站',
workstationKind.value.oneDisposalNum / value:
workstationKind.value.oneNum || 0, (
num: workstationKind.value.oneDisposalNum || 0, (workstationKind.value[0].statistical.oneDisposalNum /
color: '#47B3FF', workstationKind.value[0].statistical.oneNum) *
}, 100
{ ).toFixed(0) || 0,
name: '第二工作站', num: workstationKind.value[0].statistical.oneDisposalNum || 0,
value: color: '#47B3FF',
workstationKind.value.twoDisposalNum / },
workstationKind.value.twoNum || 0, {
num: workstationKind.value.twoDisposalNum || 0, name: '第二工作站',
color: '#FF9D27', value:
}, (
{ (workstationKind.value[0].statistical.twoDisposalNum /
name: '第三工作站', workstationKind.value[0].statistical.twoNum) *
value: 100
workstationKind.value.threeDisposalNum / ).toFixed(0) || 0,
workstationKind.value.threeNum || 0, num: workstationKind.value[0].statistical.twoDisposalNum || 0,
num: workstationKind.value.threeDisposalNum || 0, color: '#FF9D27',
color: '#6EB629', },
}, {
] name: '第三工作站',
value:
(
(workstationKind.value[0].statistical.threeDisposalNum /
workstationKind.value[0].statistical.threeNum) *
100
).toFixed(0) || 0,
num: workstationKind.value[0].statistical.threeDisposalNum || 0,
color: '#6EB629',
},
]
} else {
return [
{
name: '第一工作站',
value: 0,
num: 0,
color: '#47B3FF',
},
{
name: '第二工作站',
value: 0,
num: 0,
color: '#FF9D27',
},
{
name: '第三工作站',
value: 0,
num: 0,
color: '#6EB629',
},
]
}
}) })
const pieSeries = pieData.value.map((item, i) => { const pieSeries = pieData.value.map((item, i) => {
const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10 const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
...@@ -246,36 +302,7 @@ export default defineComponent({ ...@@ -246,36 +302,7 @@ export default defineComponent({
series: pieSeries, series: pieSeries,
}) })
const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案']) const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
// const caseList = ref([
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 5,
// },
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 4,
// },
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 3,
// },
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 2,
// },
// ])
const searchCase = (key: string) => { const searchCase = (key: string) => {
console.log('searck key: ', key) console.log('searck key: ', key)
} }
......
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
enter="fadeInUp" enter="fadeInUp"
leave="fadeOutDown" leave="fadeOutDown"
translate-y="84%" translate-y="84%"
:mask-closable="false"
:title="`${streetData.cmtName}2021年1季度得分`" :title="`${streetData.cmtName}2021年1季度得分`"
> >
<div> <div>
......
...@@ -120,6 +120,7 @@ ...@@ -120,6 +120,7 @@
offset="65%" offset="65%"
width="40%" width="40%"
title="重点关注楼宇清单" title="重点关注楼宇清单"
:mask-closable="false"
> >
<div> <div>
<m-table <m-table
...@@ -457,7 +458,7 @@ export default defineComponent({ ...@@ -457,7 +458,7 @@ export default defineComponent({
display flex display flex
flex-direction column flex-direction column
.drawCharts .drawCharts
height 60% height 67%
display flex display flex
>div >div
display flex display flex
...@@ -501,17 +502,17 @@ export default defineComponent({ ...@@ -501,17 +502,17 @@ export default defineComponent({
flex-direction row flex-direction row
justify-content space-around justify-content space-around
text-align left text-align left
height 40% height 30%
>div >div
width 25% width 25%
display flex display flex
flex-direction column flex-direction column
justify-content space-between justify-content space-between
align-items center // align-items center
>span >span
width 70% width 70%
>p >p
flex 1 // flex 1
white-space nowrap white-space nowrap
width 100% width 100%
padding-left 0.06rem padding-left 0.06rem
...@@ -562,6 +563,9 @@ export default defineComponent({ ...@@ -562,6 +563,9 @@ export default defineComponent({
justify-content space-around justify-content space-around
flex-direction row flex-direction row
font-size 0.06rem font-size 0.06rem
.count
color #fff
padding-left 0.03rem
>span >span
display flex display flex
flex-direction row flex-direction row
......
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