张若晨
2 years ago
26 changed files with 4415 additions and 2167 deletions
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
File diff suppressed because it is too large
@ -1,16 +1,32 @@ |
|||
<template> |
|||
<div class="m-subbox m-jdwgy"></div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "jdwgy", |
|||
data() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
<div class="m-subbox m-jdwgy"> |
|||
<div class="table"> |
|||
<el-table :data="list"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column prop="address" width="120" label="所属社区" /> |
|||
<el-table-column prop="name" width="120" label="姓名" /> |
|||
<el-table-column prop="sex" width="120" label="性别" /> |
|||
<el-table-column prop="old" width="120" label="年龄" /> |
|||
<el-table-column prop="tel" label="电话" /> |
|||
<el-table-column prop="operate" width="120" label="操作" /> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "jdwgy", |
|||
data() { |
|||
return { |
|||
list: [{}, {}, {}], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/overview/index.scss" |
|||
scoped |
|||
></style> |
|||
<style lang="scss" src="@/assets/scss/dataBoard/table.scss" scoped></style> |
|||
|
|||
File diff suppressed because it is too large
@ -0,0 +1,256 @@ |
|||
<template> |
|||
<div> |
|||
<div class="visualizing laonianren"> |
|||
<div class="visualizing-left"> |
|||
<div> |
|||
<data-title title="党员年龄统计" /> |
|||
</div> |
|||
<div id="dyLeftChart" style="height: 400px"></div> |
|||
</div> |
|||
<div class="visualizing-right"> |
|||
<div> |
|||
<data-title title="党员文化程度统计" /> |
|||
</div> |
|||
<div id="dyRightChart" style="height: 400px"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
function dataFormatter(arr) { |
|||
return arr.map((item) => { |
|||
return { |
|||
name: item.classification, |
|||
value: Number(item.classificationNum), |
|||
}; |
|||
}); |
|||
} |
|||
export default { |
|||
name: "dangyuan", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
components: { |
|||
dataTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
dyLeft: [], |
|||
dyRight: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.getData(); |
|||
}, |
|||
activated() {}, |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/partyPie?type=0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.dyLeft = dataFormatter(res.data); |
|||
this.initLeftCharts(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/partyPie?type=1") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.dyRight = dataFormatter(res.data); |
|||
this.initRightCharts(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
initLeftCharts() { |
|||
let div = document.getElementById("dyLeftChart"); |
|||
this.myChart1 = echarts.init(div); |
|||
var option = { |
|||
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 90, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.dyLeft, |
|||
formatter: (name) => { |
|||
if (this.dyLeft.length) { |
|||
const item = this.dyLeft.filter((item) => item.name === name)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.dyLeft, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart1.setOption(option); |
|||
this.myChart1.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", |
|||
type_id: "aged", |
|||
type_name: "党员", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart1.resize()); |
|||
}, |
|||
initRightCharts() { |
|||
let div = document.getElementById("dyRightChart"); |
|||
this.myChart2 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.dyRight, |
|||
formatter: (name) => { |
|||
if (this.dyRight.length) { |
|||
const item = this.dyRight.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.dyRight, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart1.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", |
|||
type_id: "aged", |
|||
type_name: "党员", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
this.myChart2.setOption(option); |
|||
window.addEventListener("resize", () => this.myChart2.resize()); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
<style lang="scss" scoped> |
|||
.laonianren { |
|||
padding: 140px 240px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="m-title"> |
|||
<img class="title_img" src="@/assets/images/index/list-logo.png" alt /> |
|||
<div class="tip_title">{{ title }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
name: "dataTitle", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
components: { |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-title { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,465 @@ |
|||
<template> |
|||
<div class="dibaorenyuan"> |
|||
<div class="visualizing"> |
|||
<div class="visualizing-left"> |
|||
<div> |
|||
<data-title title="低保类别统计" /> |
|||
</div> |
|||
<div id="dbryChart1" style="height: 380px"></div> |
|||
</div> |
|||
<div class="visualizing-right"> |
|||
<div> |
|||
<data-title title="低保显示原因统计" /> |
|||
</div> |
|||
<div id="dbryChart2" style="height: 380px"></div> |
|||
</div> |
|||
</div> |
|||
<div class="visualizing"> |
|||
<div class="visualizing-left"> |
|||
<div> |
|||
<data-title title="温暖找人统计" /> |
|||
</div> |
|||
<div id="dbryChart3" style="height: 380px"></div> |
|||
</div> |
|||
<div class="visualizing-right"> |
|||
<div> |
|||
<data-title title="服务找人统计" /> |
|||
</div> |
|||
<div id="dbryChart4" style="height: 380px"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
function dataFormatter(arr) { |
|||
return arr.map((item) => { |
|||
let name = ""; |
|||
const arr = Array.from(item.classification); |
|||
arr.forEach((d, i) => { |
|||
if ((i + 1) % 5 == 0&&i!=arr.length-1) { |
|||
name = name + d + "\n"; |
|||
} else { |
|||
name = name + d; |
|||
} |
|||
}); |
|||
return { |
|||
name: name, |
|||
value: Number(item.classificationNum), |
|||
}; |
|||
}); |
|||
} |
|||
export default { |
|||
name: "dibaorenyuan", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
components: { |
|||
dataTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
dbryData1: [], |
|||
dbryData2: [], |
|||
dbryData3: [], |
|||
dbryData4: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.dbryData1 = dataFormatter(res.data); |
|||
this.dbryDataCharts1(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=1") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.dbryData2 = dataFormatter(res.data); |
|||
this.dbryDataCharts2(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=2") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.dbryData3 = dataFormatter(res.data); |
|||
this.dbryDataCharts3(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/lowIncomePie?type=3") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.dbryData4 = dataFormatter(res.data); |
|||
this.dbryDataCharts4(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
dbryDataCharts1() { |
|||
let div = document.getElementById("dbryChart1"); |
|||
this.myChart1 = echarts.init(div); |
|||
var option = { |
|||
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 90, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.dbryData1, |
|||
formatter: (name) => { |
|||
if (this.dbryData1.length) { |
|||
const item = this.dbryData1.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.dbryData1, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart1.setOption(option); |
|||
this.myChart1.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
type_id: "mlsp", |
|||
type_name: "低保人员", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart1.resize()); |
|||
}, |
|||
dbryDataCharts2() { |
|||
let div = document.getElementById("dbryChart2"); |
|||
this.myChart2 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.dbryData2, |
|||
formatter: (name) => { |
|||
if (this.dbryData2.length) { |
|||
const item = this.dbryData2.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.dbryData2, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart2.setOption(option); |
|||
this.myChart2.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
type_id: "mlsp", |
|||
type_name: "低保人员", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart2.resize()); |
|||
}, |
|||
dbryDataCharts3() { |
|||
let div = document.getElementById("dbryChart3"); |
|||
this.myChart3 = echarts.init(div); |
|||
var option = { |
|||
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
width: 120, |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 90, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.dbryData3, |
|||
formatter: (name) => { |
|||
if (this.dbryData3.length) { |
|||
const item = this.dbryData3.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.dbryData3, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart3.setOption(option); |
|||
this.myChart3.on("click", (a, b) => { |
|||
console.log(a, b); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart3.resize()); |
|||
}, |
|||
dbryDataCharts4() { |
|||
let div = document.getElementById("dbryChart4"); |
|||
this.myChart4 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.dbryData4, |
|||
formatter: (name) => { |
|||
if (this.dbryData4.length) { |
|||
const item = this.dbryData4.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.dbryData4, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart4.setOption(option); |
|||
window.addEventListener("resize", () => this.myChart4.resize()); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dibaorenyuan { |
|||
padding: 0px 240px; |
|||
} |
|||
#dbryChart3 { |
|||
.echarts-legend { |
|||
white-space: normal; |
|||
} |
|||
} |
|||
|
|||
:v-deep #dbryChart3 { |
|||
.echarts-legend span { |
|||
padding: 5px 0; |
|||
display: block; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,266 @@ |
|||
<template> |
|||
<div> |
|||
<div class="visualizing laonianren"> |
|||
<div class="visualizing-left"> |
|||
<div> |
|||
<data-title title="老年人年龄统计" /> |
|||
</div> |
|||
<div id="lnrLeftChart" style="height: 400px"></div> |
|||
</div> |
|||
<div class="visualizing-right"> |
|||
<div> |
|||
<data-title title="老年人居住情况统计" /> |
|||
</div> |
|||
<div id="lnrRightChart" style="height: 400px"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
function dataFormatter(arr) { |
|||
return arr.map((item) => { |
|||
return { |
|||
name: item.classification, |
|||
value: Number(item.classificationNum), |
|||
}; |
|||
}); |
|||
} |
|||
export default { |
|||
name: "laonianren", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
components: { |
|||
dataTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
lnrLeft: [ |
|||
{ value: 108, name: "60-69" }, |
|||
{ value: 38, name: "70-79" }, |
|||
{ value: 92, name: "80-89" }, |
|||
{ value: 22, name: "90岁及以上" }, |
|||
], |
|||
lnrRight: [ |
|||
{ value: 66, name: "与子女同住" }, |
|||
{ value: 70, name: "空巢" }, |
|||
{ value: 71, name: "独居" }, |
|||
{ value: 53, name: "其他" }, |
|||
], |
|||
}; |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.getData(); |
|||
}, |
|||
activated() {}, |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/oldPeopleAgePie") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.lnrLeft = dataFormatter(res.data); |
|||
this.initLeftCharts(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/oldPeopleResidePie") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.lnrRight = dataFormatter(res.data); |
|||
this.initRightCharts(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
initLeftCharts() { |
|||
let div = document.getElementById("lnrLeftChart"); |
|||
this.myChart1 = echarts.init(div); |
|||
var option = { |
|||
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 90, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.lnrLeft, |
|||
formatter: (name) => { |
|||
if (this.lnrLeft.length) { |
|||
const item = this.lnrLeft.filter((item) => item.name === name)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.lnrLeft, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart1.setOption(option); |
|||
this.myChart1.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", |
|||
type_id: "aged", |
|||
type_name: "老年人", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart1.resize()); |
|||
}, |
|||
initRightCharts() { |
|||
let div = document.getElementById("lnrRightChart"); |
|||
this.myChart2 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.lnrRight, |
|||
formatter: (name) => { |
|||
if (this.lnrRight.length) { |
|||
const item = this.lnrRight.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.lnrRight, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart2.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", |
|||
type_id: "aged", |
|||
type_name: "老年人", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
this.myChart2.setOption(option); |
|||
window.addEventListener("resize", () => this.myChart2.resize()); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
<style lang="scss" scoped> |
|||
.laonianren { |
|||
padding: 140px 240px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,573 @@ |
|||
<template> |
|||
<div> |
|||
<div class="visualizing"> |
|||
<div class="visualizing-item"> |
|||
<div> |
|||
<data-title title="失业人员失业原因统计" /> |
|||
</div> |
|||
<div id="syryChart1" style="height: 380px"></div> |
|||
</div> |
|||
<div class="visualizing-item"> |
|||
<div> |
|||
<data-title title="失业人员就业愿望统计" /> |
|||
</div> |
|||
<div id="syryChart2" style="height: 380px"></div> |
|||
</div> |
|||
<div class="visualizing-item"> |
|||
<div> |
|||
<data-title title="失业人员年龄统计" /> |
|||
</div> |
|||
<div id="syryChart3" style="height: 380px"></div> |
|||
</div> |
|||
</div> |
|||
<div class="visualizing dibaorenyuan"> |
|||
<div class="visualizing-left"> |
|||
<div> |
|||
<data-title title="技能找人统计" /> |
|||
</div> |
|||
<div id="syryChart4" style="height: 380px"></div> |
|||
</div> |
|||
<div class="visualizing-right"> |
|||
<div> |
|||
<data-title title="岗位找人统计" /> |
|||
</div> |
|||
<div id="syryChart5" style="height: 380px"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
function dataFormatter(arr) { |
|||
return arr.map((item) => { |
|||
let name = ""; |
|||
const arr = Array.from(item.classification); |
|||
arr.forEach((d, i) => { |
|||
name = name + d; |
|||
if ((i + 1) % 5 == 0&&i!=arr.length-1) { |
|||
name = name + d + "\n"; |
|||
} |
|||
}); |
|||
return { |
|||
name: name, |
|||
value: Number(item.classificationNum), |
|||
}; |
|||
}); |
|||
} |
|||
function dataFormatter1(arr) { |
|||
return arr.map((item) => { |
|||
return { |
|||
name: item.classification, |
|||
value: Number(item.classificationNum), |
|||
}; |
|||
}); |
|||
} |
|||
export default { |
|||
name: "shiyerenyuan", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
components: { |
|||
dataTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
syryData1: [], |
|||
syryData2: [], |
|||
syryData3: [], |
|||
syryData4: [], |
|||
syryData5: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/unemployedPie?type=0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.syryData1 = dataFormatter(res.data); |
|||
this.syryDataCharts1(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/unemployedPie?type=1") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.syryData2 = dataFormatter1(res.data); |
|||
this.syryDataCharts2(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/unemployedPie?type=2") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.syryData3 = dataFormatter1(res.data); |
|||
this.syryDataCharts3(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/unemployedPie?type=3") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.syryData4 = dataFormatter(res.data); |
|||
this.syryDataCharts4(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/unemployedPie?type=4") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.syryData5 = dataFormatter(res.data); |
|||
this.syryDataCharts5(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
syryDataCharts1() { |
|||
let div = document.getElementById("syryChart1"); |
|||
this.myChart1 = echarts.init(div); |
|||
var option = { |
|||
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 90, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.syryData1, |
|||
formatter: (name) => { |
|||
if (this.syryData1.length) { |
|||
const item = this.syryData1.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.syryData1, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart1.setOption(option); |
|||
this.myChart1.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", |
|||
type_id: "aged", |
|||
type_name: "失业人员失业原因", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart1.resize()); |
|||
}, |
|||
syryDataCharts2() { |
|||
let div = document.getElementById("syryChart2"); |
|||
this.myChart2 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.syryData2, |
|||
formatter: (name) => { |
|||
if (this.syryData2.length) { |
|||
const item = this.syryData2.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.syryData2, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart2.setOption(option); |
|||
this.myChart2.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", |
|||
type_id: "aged", |
|||
type_name: "失业人员就业愿望", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart2.resize()); |
|||
}, |
|||
syryDataCharts3() { |
|||
let div = document.getElementById("syryChart3"); |
|||
this.myChart3 = echarts.init(div); |
|||
var option = { |
|||
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
width: 120, |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 90, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.syryData3, |
|||
formatter: (name) => { |
|||
if (this.syryData3.length) { |
|||
const item = this.syryData3.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.syryData3, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart3.setOption(option); |
|||
this.myChart3.on("click", (a, b) => { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", |
|||
type_id: "aged", |
|||
type_name: "失业人员年龄", |
|||
pageType: "normal", |
|||
}, |
|||
}); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart3.resize()); |
|||
}, |
|||
syryDataCharts4() { |
|||
let div = document.getElementById("syryChart4"); |
|||
this.myChart4 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.syryData4, |
|||
formatter: (name) => { |
|||
if (this.syryData4.length) { |
|||
const item = this.syryData4.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.syryData4, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart4.setOption(option); |
|||
window.addEventListener("resize", () => this.myChart4.resize()); |
|||
}, |
|||
syryDataCharts5() { |
|||
let div = document.getElementById("syryChart5"); |
|||
this.myChart5 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
type: "scroll", |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.syryData5, |
|||
formatter: (name) => { |
|||
if (this.syryData5.length) { |
|||
const item = this.syryData5.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.syryData5, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart5.setOption(option); |
|||
window.addEventListener("resize", () => this.myChart5.resize()); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dibaorenyuan { |
|||
padding: 0px 240px; |
|||
} |
|||
#syryChart3 { |
|||
.echarts-legend { |
|||
white-space: normal; |
|||
} |
|||
} |
|||
|
|||
:v-deep #syryChart3 { |
|||
.echarts-legend span { |
|||
padding: 5px 0; |
|||
display: block; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,240 @@ |
|||
<template> |
|||
<div> |
|||
<div class="visualizing laonianren"> |
|||
<div class="visualizing-left"> |
|||
<div> |
|||
<data-title title="志愿者年龄统计" /> |
|||
</div> |
|||
<div id="zyzLeftChart" style="height: 400px"></div> |
|||
</div> |
|||
<div class="visualizing-right"> |
|||
<div> |
|||
<data-title title="志愿者类别统计" /> |
|||
</div> |
|||
<div id="zyzRightChart" style="height: 400px"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
function dataFormatter(arr) { |
|||
return arr.map((item) => { |
|||
return { |
|||
name: item.classification, |
|||
value: Number(item.classificationNum), |
|||
}; |
|||
}); |
|||
} |
|||
export default { |
|||
name: "zhiyuanzhe", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
components: { |
|||
dataTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
zyzLeft: [], |
|||
zyzRight: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.getData(); |
|||
}, |
|||
activated() {}, |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/volunteerPie?type=0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.zyzLeft = dataFormatter(res.data); |
|||
this.initLeftCharts(); |
|||
}) |
|||
.catch(() => {}); |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/volunteerPie?type=1") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} |
|||
this.zyzRight = dataFormatter(res.data); |
|||
this.initRightCharts(); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
initLeftCharts() { |
|||
let div = document.getElementById("zyzLeftChart"); |
|||
this.myChart1 = echarts.init(div); |
|||
var option = { |
|||
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 90, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.zyzLeft, |
|||
formatter: (name) => { |
|||
if (this.zyzLeft.length) { |
|||
const item = this.zyzLeft.filter((item) => item.name === name)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.zyzLeft, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart1.setOption(option); |
|||
this.myChart1.on("click", (a, b) => { |
|||
console.log(a, b); |
|||
}); |
|||
window.addEventListener("resize", () => this.myChart1.resize()); |
|||
}, |
|||
initRightCharts() { |
|||
let div = document.getElementById("zyzRightChart"); |
|||
this.myChart2 = echarts.init(div); |
|||
var option = { |
|||
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], |
|||
legend: { |
|||
orient: "vertical", |
|||
top: 20, |
|||
left: 10, |
|||
icon: "rect", |
|||
itemHeight: 14, |
|||
itemWidth: 14, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
rich: { |
|||
name: { |
|||
width: 80, |
|||
fontSize: 12, |
|||
color: "#dddee7", |
|||
}, |
|||
value: { |
|||
width: 30, |
|||
align: "right", |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
}, |
|||
data: this.zyzRight, |
|||
formatter: (name) => { |
|||
if (this.zyzRight.length) { |
|||
const item = this.zyzRight.filter( |
|||
(item) => item.name === name |
|||
)[0]; |
|||
return `{name|${name}}{value| ${item.value}}`; |
|||
} |
|||
}, |
|||
}, |
|||
toolbox: { |
|||
show: false, |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true }, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Nightingale Chart", |
|||
type: "pie", |
|||
radius: [30, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
}, |
|||
top: 20, |
|||
left: -40, |
|||
label: { |
|||
position: "inside", |
|||
formatter: "{d}%", |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
data: this.zyzRight, |
|||
}, |
|||
], |
|||
}; |
|||
this.myChart1.on("click", (a, b) => { |
|||
console.log(a, b); |
|||
}); |
|||
this.myChart2.setOption(option); |
|||
window.addEventListener("resize", () => this.myChart2.resize()); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
<style lang="scss" scoped> |
|||
.laonianren { |
|||
padding: 140px 240px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<div> |
|||
<cpt-bread |
|||
@tap="clickBreadItem" |
|||
v-if="breadList.length > 1" |
|||
:bread-list="breadList" |
|||
/> |
|||
<laonianren v-if="pageName == '老年人'" /> |
|||
<dibaorenyuan v-if="pageName == '低保人员'" /> |
|||
<zhiyuanzhe v-if="pageName == '志愿者'" /> |
|||
<dangyuan v-if="pageName == '党员'" /> |
|||
<shiyerenyuan v-if="pageName == '失业人员'" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import laonianren from "./components/laonianren.vue"; |
|||
import dibaorenyuan from "./components/dibaorenyuan.vue"; |
|||
import zhiyuanzhe from "./components/zhiyuanzhe.vue"; |
|||
import dangyuan from "./components/dangyuan.vue"; |
|||
import shiyerenyuan from "./components/shiyerenyuan.vue"; |
|||
export default { |
|||
name: "visualizing", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "详情", |
|||
}, |
|||
}, |
|||
components: { |
|||
cptBread, |
|||
laonianren, |
|||
dibaorenyuan, |
|||
zhiyuanzhe, |
|||
dangyuan, |
|||
shiyerenyuan, |
|||
}, |
|||
data() { |
|||
return { |
|||
pageName: "老年人", |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { title: "人房总览" }, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
activated() { |
|||
const query = this.$route.query; |
|||
this.breadList = [ |
|||
{ |
|||
type: "back", |
|||
meta: { title: "人房总览" }, |
|||
}, |
|||
]; |
|||
this.pageName = query.type_name; |
|||
this.toBread({ |
|||
orgId: query.org_id, |
|||
orgLevel: query.type_id, |
|||
meta: { title: query.type_name }, |
|||
}); |
|||
}, |
|||
mounted() {}, |
|||
methods: { |
|||
clickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
toBread(item) { |
|||
const { orgId } = item; |
|||
const { breadList } = this; |
|||
let index = breadList.findIndex((val) => val.orgId === orgId); |
|||
if (index >= 0) { |
|||
this.breadList = breadList.slice(0, index + 1); |
|||
} else { |
|||
breadList.push(item); |
|||
this.breadList = breadList; |
|||
} |
|||
console.log("breadList::", breadList); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/dataBoard/renfang/index.scss" |
|||
scoped |
|||
></style> |
|||
Loading…
Reference in new issue