You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
793 lines
22 KiB
793 lines
22 KiB
<template>
|
|
<div class="dibaorenyuan">
|
|
<div class="visualizing">
|
|
<div class="visualizing-item">
|
|
<div>
|
|
<data-title title="低保类别统计" />
|
|
</div>
|
|
<div id="dbryChart1" style="height: 380px"></div>
|
|
</div>
|
|
<div class="visualizing-item">
|
|
<div>
|
|
<data-title title="低保显示原因统计" />
|
|
</div>
|
|
<div id="dbryChart2" style="height: 380px"></div>
|
|
</div>
|
|
<div class="visualizing-item">
|
|
<div>
|
|
<data-title title="低保享受服务情况统计" />
|
|
</div>
|
|
<div id="resiServiceChart" style="height: 400px"></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) => {
|
|
return {
|
|
name: item.classification,
|
|
value: Number(item.classificationNum),
|
|
};
|
|
});
|
|
}
|
|
export default {
|
|
name: "dibaorenyuan",
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
org_id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
components: {
|
|
dataTitle,
|
|
},
|
|
data() {
|
|
return {
|
|
dbryData1: [],
|
|
dbryData2: [],
|
|
dbryData3: [],
|
|
dbryData4: [],
|
|
resiService: [],
|
|
};
|
|
},
|
|
created() {
|
|
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(() => {});
|
|
this.$http
|
|
.get("/actual/base/peopleRoomOverview/findPeoplePie/SUBSISTENCE_ALLOWANCE_FLAG")
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg);
|
|
}
|
|
this.resiService = dataFormatter(res.data);
|
|
this.initResiServiceCharts();
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
dbryDataCharts1() {
|
|
let div = document.getElementById("dbryChart1");
|
|
this.myChart1 = echarts.init(div);
|
|
const option = {
|
|
color: [
|
|
"#15a7ed",
|
|
"#22b998",
|
|
"#5f6ff4",
|
|
"#a66eeb",
|
|
"#faa834",
|
|
"#fd6200",
|
|
"#fb3905",
|
|
],
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
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,
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
formatter: (name) => {
|
|
if (this.dbryData1.length) {
|
|
const item = this.dbryData1.filter(
|
|
(item) => item.name === name
|
|
)[0];
|
|
return `{name|${echarts.format.truncateText(
|
|
name,
|
|
100,
|
|
"14px Microsoft Yahei",
|
|
"…"
|
|
)}}{value| ${item.value}}`;
|
|
}
|
|
},
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
title: {
|
|
show: !this.dbryData1 || this.dbryData1.length == 0, // 是否要展示“暂无数据”矢量图
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容
|
|
x: "center",
|
|
y: "center",
|
|
subtext: "暂无数据", // 子标题
|
|
itemGap: -10, // 设置主副标题间隔
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
height: 126, // 设置图片高度
|
|
width: 268, // 设置图片宽度
|
|
backgroundColor: {
|
|
// 引入图片，作为背景图，填写相对路径
|
|
image: require("@/assets/images/overview/zanwu.png"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
subtextStyle: {
|
|
// 配置副标题的文字样式
|
|
fontSize: 12,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: this.dbryData1 && this.dbryData1.length > 0?[30, 130]:[0,0],
|
|
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", (e) => {
|
|
this.$router.push({
|
|
path: "/dataBoard/renfang/resi-class-new",
|
|
query: {
|
|
org_id: this.org_id,
|
|
type_id: "mlsp",
|
|
type_name: "低保人员",
|
|
pageType: "normal",
|
|
type: "dibao",
|
|
lowIncomeType: e.node.name,
|
|
},
|
|
});
|
|
});
|
|
window.addEventListener("resize", () => this.myChart1.resize());
|
|
},
|
|
dbryDataCharts2() {
|
|
let div = document.getElementById("dbryChart2");
|
|
this.myChart2 = echarts.init(div);
|
|
const option = {
|
|
color: [
|
|
"#15a7ed",
|
|
"#22b998",
|
|
"#5f6ff4",
|
|
"#a66eeb",
|
|
"#faa834",
|
|
"#fd6200",
|
|
"#fb3905",
|
|
],
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
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.dbryData2,
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
formatter: (name) => {
|
|
if (this.dbryData2.length) {
|
|
const item = this.dbryData2.filter(
|
|
(item) => item.name === name
|
|
)[0];
|
|
return `{name|${echarts.format.truncateText(
|
|
name,
|
|
100,
|
|
"14px Microsoft Yahei",
|
|
"…"
|
|
)}}{value| ${item.value}}`;
|
|
}
|
|
},
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
title: {
|
|
show: !this.dbryData2 || this.dbryData2.length == 0, // 是否要展示“暂无数据”矢量图
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容
|
|
x: "center",
|
|
y: "center",
|
|
subtext: "暂无数据", // 子标题
|
|
itemGap: -10, // 设置主副标题间隔
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
height: 126, // 设置图片高度
|
|
width: 268, // 设置图片宽度
|
|
backgroundColor: {
|
|
// 引入图片，作为背景图，填写相对路径
|
|
image: require("@/assets/images/overview/zanwu.png"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
subtextStyle: {
|
|
// 配置副标题的文字样式
|
|
fontSize: 12,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: this.dbryData2 && this.dbryData2.length > 0?[30, 130]:[0,0],
|
|
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-new",
|
|
query: {
|
|
org_id: this.org_id,
|
|
type_id: "mlsp",
|
|
type_name: "低保人员",
|
|
pageType: "normal",
|
|
type: "dibao",
|
|
lowIncomeReason: e.node.name,
|
|
},
|
|
});
|
|
});
|
|
window.addEventListener("resize", () => this.myChart2.resize());
|
|
},
|
|
dbryDataCharts3() {
|
|
let div = document.getElementById("dbryChart3");
|
|
this.myChart3 = echarts.init(div);
|
|
const option = {
|
|
color: [
|
|
"#15a7ed",
|
|
"#22b998",
|
|
"#5f6ff4",
|
|
"#a66eeb",
|
|
"#faa834",
|
|
"#fd6200",
|
|
"#fb3905",
|
|
],
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
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,
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
formatter: (name) => {
|
|
if (this.dbryData3.length) {
|
|
const item = this.dbryData3.filter(
|
|
(item) => item.name === name
|
|
)[0];
|
|
return `{name|${echarts.format.truncateText(
|
|
name,
|
|
100,
|
|
"14px Microsoft Yahei",
|
|
"…"
|
|
)}}{value| ${item.value}}`;
|
|
}
|
|
},
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
title: {
|
|
show: !this.dbryData3 || this.dbryData3.length == 0, // 是否要展示“暂无数据”矢量图
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容
|
|
x: "center",
|
|
y: "center",
|
|
subtext: "暂无数据", // 子标题
|
|
itemGap: -10, // 设置主副标题间隔
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
height: 126, // 设置图片高度
|
|
width: 268, // 设置图片宽度
|
|
backgroundColor: {
|
|
// 引入图片，作为背景图，填写相对路径
|
|
image: require("@/assets/images/overview/zanwu.png"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
subtextStyle: {
|
|
// 配置副标题的文字样式
|
|
fontSize: 12,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: this.dbryData3 && this.dbryData3.length > 0?[30, 130]:[0,0],
|
|
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) => {
|
|
this.$router.push({
|
|
path: "/dataBoard/renfang/resi-class-new",
|
|
query: {
|
|
org_id: this.org_id,
|
|
type_id: "mlsp",
|
|
type_name: "温暖找人",
|
|
pageType: "normal1",
|
|
type: "wennuan",
|
|
},
|
|
});
|
|
});
|
|
window.addEventListener("resize", () => this.myChart3.resize());
|
|
},
|
|
dbryDataCharts4() {
|
|
let div = document.getElementById("dbryChart4");
|
|
this.myChart4 = echarts.init(div);
|
|
const option = {
|
|
color: [
|
|
"#15a7ed",
|
|
"#22b998",
|
|
"#5f6ff4",
|
|
"#a66eeb",
|
|
"#faa834",
|
|
"#fd6200",
|
|
"#fb3905",
|
|
],
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
legend: {
|
|
type: "scroll",
|
|
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.dbryData4,
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
formatter: (name) => {
|
|
if (this.dbryData4.length) {
|
|
const item = this.dbryData4.filter(
|
|
(item) => item.name === name
|
|
)[0];
|
|
return `{name|${echarts.format.truncateText(
|
|
name,
|
|
100,
|
|
"14px Microsoft Yahei",
|
|
"…"
|
|
)}}{value| ${item.value}}`;
|
|
}
|
|
},
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
title: {
|
|
show: !this.dbryData4 || this.dbryData4.length == 0, // 是否要展示“暂无数据”矢量图
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容
|
|
x: "center",
|
|
y: "center",
|
|
subtext: "暂无数据", // 子标题
|
|
itemGap: -10, // 设置主副标题间隔
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
height: 126, // 设置图片高度
|
|
width: 268, // 设置图片宽度
|
|
backgroundColor: {
|
|
// 引入图片，作为背景图，填写相对路径
|
|
image: require("@/assets/images/overview/zanwu.png"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
subtextStyle: {
|
|
// 配置副标题的文字样式
|
|
fontSize: 12,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: this.dbryData4 && this.dbryData4.length > 0?[30, 130]:[0,0],
|
|
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);
|
|
this.myChart4.on("click", (a, b) => {
|
|
this.$router.push({
|
|
path: "/dataBoard/renfang/resi-class-new",
|
|
query: {
|
|
org_id: this.org_id,
|
|
type_id: "mlsp",
|
|
type_name: "服务找人",
|
|
pageType: "normal1",
|
|
type: "fuwu",
|
|
},
|
|
});
|
|
});
|
|
window.addEventListener("resize", () => this.myChart4.resize());
|
|
},
|
|
|
|
initResiServiceCharts() {
|
|
let div = document.getElementById("resiServiceChart");
|
|
this.resiChart = echarts.init(div);
|
|
const option = {
|
|
color: [
|
|
"#15a7ed",
|
|
"#22b998",
|
|
"#5f6ff4",
|
|
"#a66eeb",
|
|
"#faa834",
|
|
"#fd6200",
|
|
"#fb3905",
|
|
],
|
|
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.resiService,
|
|
formatter: (name) => {
|
|
if (this.resiService.length) {
|
|
const item = this.resiService.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 },
|
|
},
|
|
},
|
|
title: {
|
|
show: !this.resiService || this.resiService.length == 0, // 是否要展示“暂无数据”矢量图
|
|
text: " {a|}", // 写入占位符a，以便后续填充内容
|
|
x: "center",
|
|
y: "center",
|
|
subtext: "暂无数据", // 子标题
|
|
itemGap: -10, // 设置主副标题间隔
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
height: 128, // 设置图片高度
|
|
width: 268, // 设置图片宽度
|
|
backgroundColor: {
|
|
// 引入图片，作为背景图，填写相对路径
|
|
image: require("@/assets/images/overview/zanwu.png"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
subtextStyle: {
|
|
// 配置副标题的文字样式
|
|
fontSize: 12,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius:
|
|
this.resiService && this.resiService.length > 0 ? [30, 130] : [0, 0],
|
|
center: ["50%", "50%"],
|
|
roseType: "area",
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
},
|
|
top: 20,
|
|
left: -40,
|
|
label: {
|
|
position: "inside",
|
|
formatter: "{d}%",
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
data: this.resiService,
|
|
},
|
|
],
|
|
};
|
|
this.resiChart.setOption(option);
|
|
this.resiChart.on("click", (e) => {
|
|
this.$router.push({
|
|
path: "/dataBoard/renfang/resi-class-new",
|
|
query: {
|
|
org_id: this.org_id,
|
|
type_id: "mlsp",
|
|
type_name: "低保人员",
|
|
pageType: "normal",
|
|
type: "dibao",
|
|
serv_type: e.data.name,
|
|
},
|
|
});
|
|
});
|
|
window.addEventListener("resize", () => this.resiChart.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>
|
|
|