Skip to content

E
east-nanjing-new
Commit fca1b8fd authored by 程卓's avatar 程卓
Browse files
Options

饼图点击切换第二饼图数据, 修复小区屏返回公共屏饼图不展示bug

parent 85a4712c
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 100 deletions
src/view/right/case-analysis.vue
View file @ fca1b8fd
...@@ -134,7 +134,6 @@ export default defineComponent({ ...@@ -134,7 +134,6 @@ export default defineComponent({
border-color @color border-color @color
background rgba(50, 197, 255, 0.2) background rgba(50, 197, 255, 0.2)
.rank .rank
min-height 1rem
overflow hidden overflow hidden
.content .content
height 1rem height 1rem
......
src/view/right/public-safety.vue
View file @ fca1b8fd
...@@ -41,7 +41,12 @@ ...@@ -41,7 +41,12 @@
<div class="chartBox"> <div class="chartBox">
<div v-if="showChart" class="drawCharts"> <div v-if="showChart" class="drawCharts">
<div> <div>
<m-pie class="chart1" :dataset="pieData1" :option="pieOption" /> <m-pie
class="chart1"
:dataset="pieData1"
:option="pieOption"
@init="handleInit"
/>
<span class="line"></span> <span class="line"></span>
<m-pie class="chart2" :dataset="pieData2" :option="pieOption" /> <m-pie class="chart2" :dataset="pieData2" :option="pieOption" />
</div> </div>
...@@ -65,7 +70,7 @@ ...@@ -65,7 +70,7 @@
<div <div
v-for="(item, i) in pieData1.source" v-for="(item, i) in pieData1.source"
:key="item.name" :key="item.name"
@click="changePie2(item)" @click="changePie2(item, i)"
> >
<p> <p>
<span :style="{ background: pieOption.color[i][0] }" /> <span :style="{ background: pieOption.color[i][0] }" />
...@@ -168,6 +173,111 @@ export default defineComponent({ ...@@ -168,6 +173,111 @@ export default defineComponent({
]) ])
const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型 const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型
const pieData1 = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{
name: '外立面附加设施危险点',
value: 1,
},
{
name: '外立面附加设施隐患点',
value: 1,
},
{
name: '外墙面层隐患点',
value: 1,
},
{
name: '外墙面层危险点',
value: 1,
},
],
})
//切换年份
const changeYear = (value: string) => {
year.value = value
}
//切换第二饼图展示的类别
const changePie2 = (item: any, i: number) => {
secPieKey.value = item.name
}
const list = computed(() => {
return [
{
img: Circle,
value: SOSMaterail.value.floodPreventionUnits || 0,
name: '防汛防台',
},
{
img: Circle,
value: SOSMaterail.value.warmAntifreeze || 0,
name: '防寒抗冻',
},
{
img: Circle,
value: SOSMaterail.value.emergencySupplies || 0,
name: '疫情控制',
},
{
img: Circle,
value: SOSMaterail.value.emergencyRescue || 0,
name: '应急抢险',
},
]
})
const population = ref([
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
])
const pieData2 = ref({
dimensions: [
{ name: 'name', displayName: secPieKey.value },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '第一工作站', value: 1 },
{ name: '第二工作站', value: 1 },
{ name: '第三工作站', value: 1 },
],
})
const pieOption = ref({
color: [
['#F76B1C', '#FAD961'],
['#429321', '#B4EC51'],
['#3023AE', '#C86DD7'],
['#51B7EC', '#212F93'],
],
legend: { show: false },
series: [
{
type: 'pie',
radius: [0, '90%'],
center: ['50%', '50%'],
label: {
show: false,
},
},
],
})
const handleInit = (instance: any) => {
instance.on('click', (e: any) => {
console.log('click~~~~~', e)
secPieKey.value = e.name
})
}
watch( watch(
// 监听年份切花更改检查楼数 隐患点数 危险点数 // 监听年份切花更改检查楼数 隐患点数 危险点数
[() => outHouseWall.value, () => year.value], [() => outHouseWall.value, () => year.value],
...@@ -269,103 +379,6 @@ export default defineComponent({ ...@@ -269,103 +379,6 @@ export default defineComponent({
}, },
{ immediate: true } { immediate: true }
) )
//切换年份
const changeYear = (value: string) => {
year.value = value
}
//切换第二饼图展示的类别
const changePie2 = (item: any) => {
secPieKey.value = item.name
// console.log(secPieKey.value)
}
const list = computed(() => {
return [
{
img: Circle,
value: SOSMaterail.value.floodPreventionUnits || 0,
name: '防汛防台',
},
{
img: Circle,
value: SOSMaterail.value.warmAntifreeze || 0,
name: '防寒抗冻',
},
{
img: Circle,
value: SOSMaterail.value.emergencySupplies || 0,
name: '疫情控制',
},
{
img: Circle,
value: SOSMaterail.value.emergencyRescue || 0,
name: '应急抢险',
},
]
})
const population = ref([
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
{ name: '楼宇名称', value: 4, danger: 1 },
])
const pieData1 = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{
name: '外立面附加设施危险点',
value: 1,
},
{
name: '外立面附加设施隐患点',
value: 1,
},
{
name: '外墙面层隐患点',
value: 1,
},
{
name: '外墙面层危险点',
value: 1,
},
],
})
const pieData2 = ref({
dimensions: [
{ name: 'name', displayName: secPieKey.value },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '第一工作站', value: 1 },
{ name: '第二工作站', value: 1 },
{ name: '第三工作站', value: 1 },
],
})
const pieOption = ref({
color: [
['#F76B1C', '#FAD961'],
['#429321', '#B4EC51'],
['#3023AE', '#C86DD7'],
['#51B7EC', '#212F93'],
],
legend: { show: false },
series: [
{
type: 'pie',
radius: [0, '90%'],
center: ['50%', '50%'],
label: {
show: false,
},
},
],
})
return { return {
list, list,
...@@ -384,6 +397,7 @@ export default defineComponent({ ...@@ -384,6 +397,7 @@ export default defineComponent({
outHouseWall, outHouseWall,
pieData, pieData,
changePie2, changePie2,
handleInit,
} }
}, },
}) })
......
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