|
|
|
@ -1,14 +1,38 @@ |
|
|
|
<template> |
|
|
|
<div class="rkyj-main"> |
|
|
|
<div class="title"> |
|
|
|
<div>预警居民类别</div> |
|
|
|
<div>黄色预警(5-10人)<img class="img" |
|
|
|
src="@/assets/images/shuju/renfang/remark.png" |
|
|
|
alt /></div> |
|
|
|
<div>红色预警(10人以上)<img class="img" |
|
|
|
src="@/assets/images/shuju/renfang/remark.png" |
|
|
|
alt /></div> |
|
|
|
<div class="list"> |
|
|
|
<div v-for="(dataitem,index) in listData" |
|
|
|
:key="index" |
|
|
|
:class="['item',{'item-sel':dataitem.sel}]" |
|
|
|
@click="selItem(dataitem,index)"> |
|
|
|
{{dataitem.name}} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="pie-main"> |
|
|
|
<div class="legend"> |
|
|
|
<div class="legend-row"> |
|
|
|
|
|
|
|
<div class="sexblue">男性</div> |
|
|
|
<div class="content"> |
|
|
|
<div class="num">15632</div> |
|
|
|
<div class="unit">人</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="legend-row"> |
|
|
|
|
|
|
|
<div class="sexyellow">女性</div> |
|
|
|
<div class="content"> |
|
|
|
<div class="num">142632</div> |
|
|
|
<div class="unit">人</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="pie"> |
|
|
|
<screen-echarts-frame @myChartMethod="pieInitOk" |
|
|
|
ref="pieChart"></screen-echarts-frame> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
@ -16,6 +40,8 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|
|
|
import { pieOption } from './rkfxPieOption.js' |
|
|
|
|
|
|
|
export default { |
|
|
|
props: { |
|
|
|
@ -26,100 +52,211 @@ export default { |
|
|
|
}, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
showNoData: false, |
|
|
|
timer: null, |
|
|
|
pieChart: '', |
|
|
|
pieOption: {}, |
|
|
|
pieInitState: false, |
|
|
|
pieData: [], |
|
|
|
listData: [ |
|
|
|
{ |
|
|
|
type: '低保人员', |
|
|
|
yellow: 200, |
|
|
|
red: 5, |
|
|
|
name: '性别', |
|
|
|
sel: true |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '户籍', |
|
|
|
sel: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: '失业人员', |
|
|
|
yellow: 2, |
|
|
|
red: 500, |
|
|
|
name: '入户状况', |
|
|
|
sel: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: '老年人', |
|
|
|
yellow: 2000, |
|
|
|
red: 5, |
|
|
|
name: '年龄', |
|
|
|
sel: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: '空巢老人', |
|
|
|
yellow: 2, |
|
|
|
red: 5, |
|
|
|
name: '志愿者类别', |
|
|
|
sel: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: '大病', |
|
|
|
yellow: 2, |
|
|
|
red: 5, |
|
|
|
name: '党员文化程度', |
|
|
|
sel: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: '慢病', |
|
|
|
yellow: 2, |
|
|
|
red: 5, |
|
|
|
name: '下级人口分布', |
|
|
|
sel: false |
|
|
|
}, |
|
|
|
|
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted () { }, |
|
|
|
methods: {}, |
|
|
|
components: { |
|
|
|
screenEchartsFrame |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
this.getPie() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selItem (selItem, selIndex) { |
|
|
|
this.listData.forEach((element, index) => { |
|
|
|
if (index === selIndex) { |
|
|
|
element.sel = true |
|
|
|
} else { |
|
|
|
element.sel = false |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
pieInitOk () { |
|
|
|
this.pieInitState = true |
|
|
|
}, |
|
|
|
getPie () { |
|
|
|
if (this.pieInitState) { |
|
|
|
this.getPieChart() |
|
|
|
} else { |
|
|
|
setTimeout(() => { |
|
|
|
this.getPie() |
|
|
|
}, 500) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取饼状图 |
|
|
|
async getPieChart () { |
|
|
|
|
|
|
|
this.$refs.pieChart.clear() |
|
|
|
// this.$refs.pieChart.showLoading() |
|
|
|
|
|
|
|
// 获取pieChart配置 |
|
|
|
this.pieOption = pieOption() |
|
|
|
|
|
|
|
// 设置三个配置值 |
|
|
|
|
|
|
|
this.pieData = [ |
|
|
|
{ value: 40, name: 'rose 1' }, |
|
|
|
{ value: 38, name: 'rose 2' }, |
|
|
|
] |
|
|
|
this.pieOption.series[0].data = this.pieData; |
|
|
|
// this.$refs.pieChart.hideLoading() |
|
|
|
this.$refs.pieChart.setOption(this.pieOption) |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.rkyj-main { |
|
|
|
.title { |
|
|
|
margin: 24px 0 24px 24px; |
|
|
|
.list { |
|
|
|
margin-top: 8px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
.item { |
|
|
|
margin-top: 8px; |
|
|
|
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png); |
|
|
|
background-size: cover; |
|
|
|
flex: 0 0 117px; |
|
|
|
|
|
|
|
.img { |
|
|
|
margin-left: 4px; |
|
|
|
width: 15px; |
|
|
|
height: 15px; |
|
|
|
height: 32px; |
|
|
|
margin-right: 2px; |
|
|
|
text-align: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 32px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list { |
|
|
|
/deep/ .el-scrollbar__wrap { |
|
|
|
// width: 100% !important; |
|
|
|
overflow-x: hidden !important; |
|
|
|
.item-sel { |
|
|
|
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png); |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.g-scrollar { |
|
|
|
// width: 100%; |
|
|
|
height: 168px; |
|
|
|
|
|
|
|
.item { |
|
|
|
padding: 12px 20px 12px 24px; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.pie-main { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-left: 25px; |
|
|
|
|
|
|
|
.legend { |
|
|
|
// flex: 0 0 140px; |
|
|
|
margin-top: 40px; |
|
|
|
|
|
|
|
.legend-row { |
|
|
|
margin-top: 15px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.item-title { |
|
|
|
flex: 0 0 60px; |
|
|
|
.sexblue { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
margin-left: 5px; |
|
|
|
font-size: 12px; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(255, 255, 255, 0.65); |
|
|
|
line-height: 17px; |
|
|
|
|
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 4px; |
|
|
|
left: -15px; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
background: #1a95ff; |
|
|
|
} |
|
|
|
} |
|
|
|
.sexyellow { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
margin-left: 5px; |
|
|
|
font-size: 12px; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(255, 255, 255, 0.65); |
|
|
|
line-height: 17px; |
|
|
|
|
|
|
|
.item-num { |
|
|
|
flex: 0 0 100px; |
|
|
|
// text-align: right; |
|
|
|
.img { |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
margin-right: 8px; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 4px; |
|
|
|
left: -15px; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
background: #ff6138; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
margin-left: 24px; |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
|
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.num { |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.unit { |
|
|
|
margin-left: 5px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.item:nth-child(1) { |
|
|
|
background: rgba(26, 149, 255, 0.15); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pie { |
|
|
|
margin-top: 32px; |
|
|
|
flex: 0 0 280px; |
|
|
|
height: 270px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
jiangyy
3 years ago
