Browse Source

人房图表

V1.0
张若晨 2 years ago
parent
commit
c1f53d62df
  1. 2
      src/assets/scss/dataBoard/renfang/index.scss
  2. 711
      src/views/dataBoard/renfang/resi/class.vue
  3. 40
      src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
  4. 153
      src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
  5. 36
      src/views/dataBoard/renfang/visualizing/components/laonianren.vue
  6. 273
      src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
  7. 54
      src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
  8. 44
      src/views/dataBoard/renfang/visualizing/index.vue

2
src/assets/scss/dataBoard/renfang/index.scss

@ -789,7 +789,7 @@
}
&-item {
width: 450px;
width: 33.3%;
height: 400px;
}
}

711
src/views/dataBoard/renfang/resi/class.vue

@ -12,21 +12,178 @@
<div class="tip_title">{{ tableTitle }}</div>
<div class="title_line"></div>
<div class="second-select" v-if="type_id == 'special_popu'">
<div class="second-select" v-if="type == 'old'">
<el-select
v-model="subclassId"
v-model="oldVal"
:popper-append-to-body="false"
placeholder="请选择"
placeholder="请选择年龄"
>
<el-option
v-for="item in subclassList"
v-for="item in oldList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.resideSituation"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择居住情况"
>
<el-option
v-for="item in resideArr"
:key="item.value"
:label="item.label"
:value="item.value"
@click.native="handleChangeDate(item.value)"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'dibao'">
<el-select
v-model="searchParams.lowIncomeType"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择低保类型"
>
<el-option
v-for="item in lowIncomeTypeArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.lowIncomeReason"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择低保原因"
>
<el-option
v-for="item in lowIncomeReasonArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'zhiyuanzhe'">
<el-select
v-model="oldVal"
:popper-append-to-body="false"
placeholder="请选择年龄"
>
<el-option
v-for="item in oldAllList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.gategoryCode"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择志愿者类型"
>
<el-option
v-for="item in volunteerArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'dangyuan'">
<el-select
v-model="oldVal"
:popper-append-to-body="false"
placeholder="请选择年龄"
>
<el-option
v-for="item in oldAllList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.cultureLevel"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择学历"
>
<el-option
v-for="item in PostDictonArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="second-select" v-if="type == 'shiye'">
<el-select
v-model="oldVal"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择年龄"
>
<el-option
v-for="item in oldAllList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.employmentWish"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择就业愿望"
>
<el-option
v-for="item in careerArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
&nbsp;
<el-select
v-model="searchParams.unemploymentReason"
:popper-append-to-body="false"
@change="changeSearch"
placeholder="请选择失业原因"
>
<el-option
v-for="item in unemploymentArr"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div
class="second-select"
v-if="
type == 'fuwu' ||
type == 'wennuan' ||
type == 'jineng' ||
type == 'gangwei'
"
>
<el-input
type="text"
v-model="searchParams.serviceOrgName"
placeholder="请输入服务方名称"
@blur="changeFwfmc"
/>
</div>
</div>
<div class="g-listbox">
@ -38,23 +195,15 @@
:total="total"
@handleSizeChange="handleSizeChange"
@handlePageNoChange="handlePageNoChange"
@operate="showInfo"
@operate="jumpPage"
></cpt-tb>
</div>
<resi-details
@close="displayedResiId = ''"
:resi-id="displayedResiId"
v-if="displayedResiId"
/>
</div>
</template>
<script>
import cptTb from "@/views/dataBoard/cpts/tb";
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
import resiDetails from "@/views/dataBoard/cpts/resi-details";
import { requestPostBi } from "@/js/dai/request-bipass";
import getQueryPara from "dai-js/modules/getQueryPara";
export default {
@ -63,31 +212,28 @@ export default {
components: {
cptTb,
cptBread,
resiDetails,
},
data() {
return {
breadList: [
{
type: "back",
path: "/dataBoard/renfang/index",
meta: {
title: "人房总览",
},
},
{
meta: {
title: "居民类别",
title: "居民列表",
},
},
],
tableTitle: "居民类别",
searchName: "",
tableTitle: "居民列表",
pageType: "",
orgLevel: "",
org_id: "",
type_id: "", //
type_id: "", //
type_name: "",
loading: true,
pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
@ -95,7 +241,73 @@ export default {
total: 0,
srcTableData: [],
list: [],
listData: [],
oldList: [
{
label: "60-69岁",
value: ["60", "69"],
},
{
label: "70-79岁",
value: ["70", "79"],
},
{
label: "80-89岁",
value: ["80", "89"],
},
{
label: "90岁以上",
value: ["90", "139"],
},
],
oldAllList: [
{
label: "0-9岁",
value: ["0", "9"],
},
{
label: "10-19岁",
value: ["10", "19"],
},
{
label: "20-29岁",
value: ["20", "29"],
},
{
label: "30-39岁",
value: ["30", "39"],
},
{
label: "40-49岁",
value: ["40", "49"],
},
{
label: "50-59岁",
value: ["50", "59"],
},
{
label: "60-69岁",
value: ["60", "69"],
},
{
label: "70-79岁",
value: ["70", "79"],
},
{
label: "80-89岁",
value: ["80", "89"],
},
{
label: "90岁以上",
value: ["90", "139"],
},
],
jzList: [
{
label: "不知奥",
value: "90,120",
},
],
colList: [
{
align: "left",
@ -134,7 +346,6 @@ export default {
width: "10%",
},
],
header: [
"序号",
"姓名",
@ -146,16 +357,69 @@ export default {
"出生日期",
"操作",
],
displayedResiId: "",
subclassList: [],
subclassId: "",
type: null,
typeList: [
{
type: "old",
name: "老年人",
url: "/actual/base/peopleRoomOverview/oldPeoplePageList",
},
{
type: "dibao",
name: "低保人员",
url: "/actual/base/peopleRoomOverview/lowIncomePageList",
},
{
type: "zhiyuanzhe",
name: "志愿者",
url: "/actual/base/peopleRoomOverview/volunteerPageList",
},
{
type: "dangyuan",
name: "党员",
url: "/actual/base/peopleRoomOverview/partyPageList",
},
{
type: "shiye",
name: "失业人员",
url: "/actual/base/peopleRoomOverview/unemployedPageList",
},
{
type: "fuwu",
name: "服务找人分页查询",
url: "/actual/base/peopleRoomOverview/servicePageList",
},
{
type: "wennuan",
name: "温暖找人查询",
url: "/actual/base/peopleRoomOverview/warmthPageList",
},
{
type: "jineng",
name: "技能找人查询",
url: "/actual/base/peopleRoomOverview/skillPageList",
},
{
type: "gangwei",
name: "岗位找人分页查询",
url: "/actual/base/peopleRoomOverview/postPageList",
},
],
oldVal: ["60", "69"],
jzVal: "",
searchParams: {},
unemploymentArr: [],
PostDictonArr: [],
resideArr: [],
careerArr: [],
lowIncomeReasonArr: [],
lowIncomeTypeArr: [],
};
},
activated() {
this.org_id = getQueryPara("org_id");
this.type = getQueryPara("type");
this.type_id = getQueryPara("type_id");
this.pageType = getQueryPara("pageType");
this.type_name = getQueryPara("type_name");
@ -163,11 +427,102 @@ export default {
this.breadList[1].meta.title = type_name + "居民列表";
this.tableTitle = type_name + "居民列表";
this.pageNo = 1;
const type = this.type;
if (type == "dibao") {
this.searchParams = {
lowIncomeType: null, //
lowIncomeReason: null, //
};
}
if (type == "shiye") {
this.searchParams = {
employmentWish: null, //
unemploymentReason: null, //
startAge: null,
endAge: null,
};
}
if (type == "dangyuan") {
this.searchParams = {
cultureLevel: null, //
startAge: null,
endAge: null,
};
}
if (type == "zhiyuan") {
this.searchParams = {
gategoryCode: null, //
startAge: null,
endAge: null,
};
}
if (
type == "fuwu" ||
type == "wennuan" ||
type == "jineng" ||
type == "gangwei"
) {
this.searchParams = {
serviceOrgName: null, //
};
}
this.getList();
this.getCount();
if (this.type_id == "special_popu") {
this.getSubclass();
// this.getCount();
if (this.pageType != "normal") {
this.colList = [
{
align: "left",
width: "5%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "20%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "15%",
},
{
align: "left",
width: "10%",
},
{
align: "left",
width: "10%",
},
];
this.header = [
"序号",
"服务类型",
"服务事项",
"来源",
"服务时间",
"服务方",
"服务人数",
"操作",
];
}
//
this.getResideNation();
this.getPostNation();
this.getUnemployment();
this.getCareer();
this.getVolunteer();
this.getLowIncomeReason();
this.getLowIncomeType();
},
created() {
this.pageNo = 1;
@ -176,170 +531,192 @@ export default {
$route(to, from) {
this.$router.go(0);
},
subclassId: {
oldVal: {
handler(newVal, oldVal) {
this.pageNo = 1;
this.getList();
this.getCount();
const searchParams = {
startAge: newVal[0],
endAge: newVal[1],
};
this.getList(searchParams);
},
},
searchParams(newVal, oldVal) {
this.getList();
},
},
methods: {
handleClickBreadItem({ item }) {
if (item.type == "back") {
this.$router.back();
}
this.$router.push({
path: item.path,
query: {
org_id: this.org_id,
type_id: this.type_id,
type_name: item.meta.title,
pageType: this.pageType,
},
});
},
handleSearch() {},
showInfo(index) {
let item = this.srcTableData[index];
this.displayedResiId = item.user_id;
changeFwfmc(e) {
this.searchParams = {
serviceOrgName: e.target.value || null,
};
this.getList();
},
changeSearch() {
this.getList();
},
jumpPage(index) {
let item = this.listData[index];
console.log("item::", item);
this.$router.push({
path: "/organizational/orgPersonnel",
query: {
org_id: this.org_id,
type_id: this.type_id,
user_id: item.id,
},
});
},
handlePageNoChange(pageNo) {
this.pageNo = pageNo;
this.getList();
},
handleSizeChange(pageSize) {
localStorage.setItem("dataBoard_PageSize", pageSize);
this.pageSize = pageSize;
this.getList();
},
async getSubclass() {
const { org_id, type_id } = this;
async getList(item) {
const { url } = this.typeList.filter((item) => item.type == this.type)[0];
const sourceType = ["公共服务", "共性需求", "政策找人", "服务找人"];
this.loading = true;
const url = "special_type_list";
const { data, code, msg } = await requestPostBi(
url,
{
queryParam: {
org_id,
type_id,
},
},
{
// mockId: 62648939,
let queryParam = {
pageNo: this.pageNo,
pageSize: this.pageSize,
...this.searchParams,
...item,
};
this.$http.post(url, queryParam).then(({ data: res }) => {
this.loading = false;
const { data, code, msg } = res;
const { list, total } = data;
const gender = ["未知", "男", "女"];
if (code === 0) {
this.listData = list;
if (this.pageType == "normal") {
this.list = list.map((item, index) => {
return [
index + 1,
item.name ? item.name : "--",
item.gridName ? item.gridName : "--",
item.fullName ? item.fullName : "--",
item.mobile ? item.mobile : "--",
item.idNum ? item.idNum : "--",
item.gender ? gender[item.gender] : "--",
item.birthday ? item.birthday : "--",
{ type: "operate", list: ["查看"] },
];
});
} else {
this.list = list.map((item, index) => {
return [
index + 1,
item.serviceCategoryKey ? item.serviceCategoryKey : "--",
item.serviceName ? item.serviceName : "--",
item.awardPoint ? sourceType[item.awardPoint] : "--",
item.serviceTimeStart ? item.serviceTimeStart : "--",
item.serviceOrgName ? item.serviceOrgName : "--",
item.servedPersonQty ? item.servedPersonQty : "--",
{ type: "operate", list: ["查看"] },
];
});
}
this.total = total;
} else {
this.$message.error(msg);
}
);
this.loading = false;
if (code === 0) {
this.subclassList = data.map((item, index) => {
return {
label: item.type_name,
value: item.type_id,
};
});
},
async getResideNation() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "reside_situation",
});
} else {
this.$message.error(msg);
this.resideArr = data.data;
} catch (error) {
console.log(error, "获取居住情况字典");
}
},
async getList() {
const { org_id, type_id, subclassId, pageNo, pageSize } = this;
this.loading = true;
let url = "";
let queryParam = {};
if (this.pageType == "normal") {
url = "resident_class_list";
queryParam = {
org_id,
type_id: subclassId || type_id,
pageNo,
pageSize,
};
} else {
url = "resident_class_predict_list";
queryParam = {
org_id,
resi_class_name: this.type_name,
page_num: pageNo,
page_size: pageSize,
};
// async getPostNation() {
// try {
// let { data } = await this.$http.post("sys/dict/data/dictlist", {
// dictType: "welfare_post",
// });
// this.PostDictonArr = data.data;
// } catch (error) {
// console.log(error, "");
// }
// },
async getUnemployment() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "unemployment_cause",
});
this.unemploymentArr = data.data;
} catch (error) {
console.log(error, "获取失业原因字典");
}
const { data, code, msg } = await requestPostBi(
url,
{
queryParam,
},
{
// mockId: 60069169,
}
);
this.loading = false;
if (code === 0) {
this.srcTableData = data;
// this.total = data.total;
if (this.pageType == "normal") {
this.list = data.map((item, index) => {
return [
index + 1,
item.user_name ? item.user_name : "--",
item.grid ? item.grid : "--",
item.house ? item.house : "--",
item.telephone ? item.telephone : "--",
item.idcard ? item.idcard : "--",
item.gender ? item.gender : "--",
item.birthday ? item.birthday : "--",
{ type: "operate", list: ["查看"] },
];
});
} else {
this.list = data.map((item, index) => {
return [
index + 1,
item.name ? item.name : "--",
item.grid ? item.grid : "--",
item.room ? item.room : "--",
item.telephone ? item.telephone : "--",
item.idcard ? item.idcard : "--",
item.gender ? item.gender : "--",
item.birthday ? item.birthday : "--",
{ type: "operate", list: ["查看"] },
];
});
}
} else {
this.$message.error(msg);
},
async getCareer() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "career_goals",
});
this.careerArr = data.data;
} catch (error) {
console.log(error, "获取就业愿望字典");
}
},
async getCount() {
const { org_id, type_id, subclassId, pageNo, pageSize } = this;
let url = "";
let queryParam = {};
if (this.pageType == "normal") {
url = "resident_class_list_total";
queryParam = {
org_id,
type_id: subclassId || type_id,
pageNo,
pageSize,
};
} else {
url = "resident_class_predict_total";
queryParam = {
org_id,
resi_class_name: this.type_name,
page_num: pageNo,
page_size: pageSize,
};
async getVolunteer() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "VOLUNTEER_CATEGORY",
});
this.volunteerArr = data.data;
} catch (error) {
console.log(error, "获取志愿者类别字典");
}
const { data, code, msg } = await requestPostBi(
url,
{
queryParam,
},
{
// mockId: 63070913,
}
);
if (code === 0) {
this.total = parseInt(data[0].count);
} else {
this.$message.error(msg);
},
async getLowIncomeReason() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "low_income_reason",
});
this.lowIncomeReasonArr = data.data;
} catch (error) {
console.log(error, "获取低保原因字典");
}
},
async getLowIncomeType() {
try {
const { data } = await this.$http.post("sys/dict/data/dictlist", {
dictType: "low_income_type",
});
this.lowIncomeTypeArr = data.data;
} catch (error) {
console.log(error, "获取低保类型字典");
}
},
async getPostNation() {
try {
let { data } = await this.$http.post("sys/dict/data/education", {
formCode: "resi_base_info",
});
this.PostDictonArr = data.data;
} catch (error) {
console.log(error, "获取学历字典");
}
},
},

40
src/views/dataBoard/renfang/visualizing/components/dangyuan.vue

@ -34,7 +34,11 @@ export default {
props: {
title: {
type: String,
default: "详情",
default: "",
},
org_id: {
type: String,
default: "",
},
},
components: {
@ -77,8 +81,16 @@ export default {
initLeftCharts() {
let div = document.getElementById("dyLeftChart");
this.myChart1 = echarts.init(div);
var option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: {
orient: "vertical",
top: 20,
@ -147,10 +159,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
org_id: this.org_id,
type_id: "aged",
type_name: "党员",
pageType: "normal",
type: "dangyuan",
},
});
});
@ -159,8 +172,16 @@ export default {
initRightCharts() {
let div = document.getElementById("dyRightChart");
this.myChart2 = echarts.init(div);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: {
orient: "vertical",
top: 20,
@ -186,9 +207,7 @@ export default {
data: this.dyRight,
formatter: (name) => {
if (this.dyRight.length) {
const item = this.dyRight.filter(
(item) => item.name === name
)[0];
const item = this.dyRight.filter((item) => item.name === name)[0];
return `{name|${name}}{value| ${item.value}}`;
}
},
@ -230,10 +249,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
org_id: this.org_id,
type_id: "aged",
type_name: "党员",
pageType: "normal",
type: "dangyuan",
},
});
});

153
src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue

@ -37,17 +37,8 @@ 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,
name: item.classification,
value: Number(item.classificationNum),
};
});
@ -57,7 +48,11 @@ export default {
props: {
title: {
type: String,
default: "详情",
default: "",
},
org_id: {
type: String,
default: "",
},
},
components: {
@ -72,7 +67,6 @@ export default {
};
},
created() {
const query = this.$route.query;
this.getData();
},
methods: {
@ -121,8 +115,19 @@ export default {
dbryDataCharts1() {
let div = document.getElementById("dbryChart1");
this.myChart1 = echarts.init(div);
var option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
orient: "vertical",
top: 20,
@ -146,12 +151,20 @@ export default {
},
},
data: this.dbryData1,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.dbryData1.length) {
const item = this.dbryData1.filter(
(item) => item.name === name
)[0];
return `{name|${name}}{value| ${item.value}}`;
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
},
@ -166,7 +179,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -193,9 +205,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: this.org_id,
type_id: "mlsp",
type_name: "低保人员",
pageType: "normal",
type: "dibao",
},
});
});
@ -204,8 +218,19 @@ export default {
dbryDataCharts2() {
let div = document.getElementById("dbryChart2");
this.myChart2 = echarts.init(div);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
orient: "vertical",
top: 20,
@ -217,7 +242,7 @@ export default {
color: "#ffffff",
rich: {
name: {
width: 80,
width: 90,
fontSize: 12,
color: "#dddee7",
},
@ -229,12 +254,20 @@ export default {
},
},
data: this.dbryData2,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.dbryData2.length) {
const item = this.dbryData2.filter(
(item) => item.name === name
)[0];
return `{name|${name}}{value| ${item.value}}`;
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
},
@ -249,7 +282,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -276,9 +308,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: this.org_id,
type_id: "mlsp",
type_name: "低保人员",
pageType: "normal",
type: "dibao",
},
});
});
@ -287,8 +321,19 @@ export default {
dbryDataCharts3() {
let div = document.getElementById("dbryChart3");
this.myChart3 = echarts.init(div);
var option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
type: "scroll",
orient: "vertical",
@ -314,12 +359,20 @@ export default {
},
},
data: this.dbryData3,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.dbryData3.length) {
const item = this.dbryData3.filter(
(item) => item.name === name
)[0];
return `{name|${name}}{value| ${item.value}}`;
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
},
@ -334,7 +387,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -358,15 +410,35 @@ export default {
};
this.myChart3.setOption(option);
this.myChart3.on("click", (a, b) => {
console.log(a, b);
this.$router.push({
path: "/dataBoard/renfang/resi-class",
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);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
type: "scroll",
orient: "vertical",
@ -379,7 +451,7 @@ export default {
color: "#ffffff",
rich: {
name: {
width: 80,
width: 90,
fontSize: 12,
color: "#dddee7",
},
@ -391,12 +463,20 @@ export default {
},
},
data: this.dbryData4,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.dbryData4.length) {
const item = this.dbryData4.filter(
(item) => item.name === name
)[0];
return `{name|${name}}{value| ${item.value}}`;
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
},
@ -411,7 +491,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -434,6 +513,18 @@ export default {
],
};
this.myChart4.setOption(option);
this.myChart4.on("click", (a, b) => {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: this.org_id,
type_id: "mlsp",
type_name: "服务找人",
pageType: "normal1",
type: "fuwu",
},
});
});
window.addEventListener("resize", () => this.myChart4.resize());
},
},

36
src/views/dataBoard/renfang/visualizing/components/laonianren.vue

@ -34,7 +34,11 @@ export default {
props: {
title: {
type: String,
default: "详情",
default: "",
},
org_id: {
type: String,
default: "",
},
},
components: {
@ -87,8 +91,16 @@ export default {
initLeftCharts() {
let div = document.getElementById("lnrLeftChart");
this.myChart1 = echarts.init(div);
var option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: {
orient: "vertical",
top: 20,
@ -157,10 +169,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
org_id: this.org_id,
type_id: "aged",
type_name: "老年人",
pageType: "normal",
type: "old"
},
});
});
@ -169,8 +182,16 @@ export default {
initRightCharts() {
let div = document.getElementById("lnrRightChart");
this.myChart2 = echarts.init(div);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: {
orient: "vertical",
top: 20,
@ -240,10 +261,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
org_id: this.org_id,
type_id: "aged",
type_name: "老年人",
pageType: "normal",
type: "old"
},
});
});

273
src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue

@ -42,22 +42,6 @@ import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitl
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,
@ -70,7 +54,11 @@ export default {
props: {
title: {
type: String,
default: "详情",
default: "",
},
org_id: {
type: String,
default: "",
},
},
components: {
@ -107,7 +95,7 @@ export default {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.syryData2 = dataFormatter1(res.data);
this.syryData2 = dataFormatter(res.data);
this.syryDataCharts2();
})
.catch(() => {});
@ -117,7 +105,7 @@ export default {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.syryData3 = dataFormatter1(res.data);
this.syryData3 = dataFormatter(res.data);
this.syryDataCharts3();
})
.catch(() => {});
@ -145,8 +133,19 @@ export default {
syryDataCharts1() {
let div = document.getElementById("syryChart1");
this.myChart1 = echarts.init(div);
var option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
orient: "vertical",
top: 20,
@ -154,6 +153,22 @@ export default {
icon: "rect",
itemHeight: 14,
itemWidth: 14,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.syryData1.length) {
const item = this.syryData1.filter(
(item) => item.name === name
)[0];
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
textStyle: {
color: "#ffffff",
rich: {
@ -163,21 +178,13 @@ export default {
color: "#dddee7",
},
value: {
width: 30,
width: 60,
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,
@ -190,7 +197,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -198,8 +204,8 @@ export default {
itemStyle: {
borderRadius: 0,
},
top: 20,
left: -40,
top: -20,
left: 10,
label: {
position: "inside",
formatter: "{d}%",
@ -217,10 +223,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
org_id: this.org_id,
type_id: "aged",
type_name: "失业人员失业原因",
type_name: "失业人员",
pageType: "normal",
type: "shiye",
},
});
});
@ -229,8 +236,19 @@ export default {
syryDataCharts2() {
let div = document.getElementById("syryChart2");
this.myChart2 = echarts.init(div);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
orient: "vertical",
top: 20,
@ -242,24 +260,32 @@ export default {
color: "#ffffff",
rich: {
name: {
width: 80,
width: 90,
fontSize: 12,
color: "#dddee7",
},
value: {
width: 30,
width: 60,
align: "right",
fontSize: 18,
},
},
},
data: this.syryData2,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.syryData2.length) {
const item = this.syryData2.filter(
(item) => item.name === name
)[0];
return `{name|${name}}{value| ${item.value}}`;
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
},
@ -274,7 +300,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -282,8 +307,8 @@ export default {
itemStyle: {
borderRadius: 0,
},
top: 20,
left: -40,
top: -20,
left: 10,
label: {
position: "inside",
formatter: "{d}%",
@ -301,10 +326,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
org_id: this.org_id,
type_id: "aged",
type_name: "失业人员就业愿望",
type_name: "失业人员",
pageType: "normal",
type: "shiye",
},
});
});
@ -313,8 +339,19 @@ export default {
syryDataCharts3() {
let div = document.getElementById("syryChart3");
this.myChart3 = echarts.init(div);
var option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
type: "scroll",
orient: "vertical",
@ -323,6 +360,22 @@ export default {
icon: "rect",
itemHeight: 14,
itemWidth: 14,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.syryData3.length) {
const item = this.syryData3.filter(
(item) => item.name === name
)[0];
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
textStyle: {
width: 120,
color: "#ffffff",
@ -333,21 +386,13 @@ export default {
color: "#dddee7",
},
value: {
width: 30,
width: 60,
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,
@ -360,7 +405,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -368,8 +412,8 @@ export default {
itemStyle: {
borderRadius: 0,
},
top: 20,
left: -40,
top: -20,
left: 10,
label: {
position: "inside",
formatter: "{d}%",
@ -387,10 +431,11 @@ export default {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
org_id: this.org_id,
type_id: "aged",
type_name: "失业人员年龄",
type_name: "失业人员",
pageType: "normal",
type: "shiye",
},
});
});
@ -399,8 +444,19 @@ export default {
syryDataCharts4() {
let div = document.getElementById("syryChart4");
this.myChart4 = echarts.init(div);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
type: "scroll",
orient: "vertical",
@ -413,24 +469,32 @@ export default {
color: "#ffffff",
rich: {
name: {
width: 80,
width: 90,
fontSize: 12,
color: "#dddee7",
},
value: {
width: 30,
width: 60,
align: "right",
fontSize: 18,
},
},
},
data: this.syryData4,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.syryData4.length) {
const item = this.syryData4.filter(
(item) => item.name === name
)[0];
return `{name|${name}}{value| ${item.value}}`;
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
},
@ -445,7 +509,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -453,8 +516,8 @@ export default {
itemStyle: {
borderRadius: 0,
},
top: 20,
left: -40,
top: -20,
left: 10,
label: {
position: "inside",
formatter: "{d}%",
@ -468,13 +531,36 @@ export default {
],
};
this.myChart4.setOption(option);
this.myChart4.on("click", (a, b) => {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: this.org_id,
type_id: "aged",
type_name: "技能找人",
pageType: "normal1",
type: "jineng",
},
});
});
window.addEventListener("resize", () => this.myChart4.resize());
},
syryDataCharts5() {
let div = document.getElementById("syryChart5");
this.myChart5 = echarts.init(div);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: {
type: "scroll",
orient: "vertical",
@ -483,30 +569,38 @@ export default {
icon: "rect",
itemHeight: 14,
itemWidth: 14,
tooltip: {
show: true,
},
formatter: (name) => {
if (this.syryData5.length) {
const item = this.syryData5.filter(
(item) => item.name === name
)[0];
return `{name|${echarts.format.truncateText(
name,
100,
"14px Microsoft Yahei",
"…"
)}}{value| ${item.value}}`;
}
},
textStyle: {
color: "#ffffff",
rich: {
name: {
width: 80,
width: 90,
fontSize: 12,
color: "#dddee7",
},
value: {
width: 30,
width: 60,
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,
@ -519,7 +613,6 @@ export default {
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [30, 130],
center: ["50%", "50%"],
@ -527,8 +620,8 @@ export default {
itemStyle: {
borderRadius: 0,
},
top: 20,
left: -40,
top: -20,
left: 10,
label: {
position: "inside",
formatter: "{d}%",
@ -542,6 +635,18 @@ export default {
],
};
this.myChart5.setOption(option);
this.myChart5.on("click", (a, b) => {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: this.org_id,
type_id: "aged",
type_name: "岗位找人",
pageType: "normal1",
type: "gangwei",
},
});
});
window.addEventListener("resize", () => this.myChart5.resize());
},
},

54
src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue

@ -34,7 +34,11 @@ export default {
props: {
title: {
type: String,
default: "详情",
default: "",
},
org_id: {
type: String,
default: "",
},
},
components: {
@ -77,8 +81,16 @@ export default {
initLeftCharts() {
let div = document.getElementById("zyzLeftChart");
this.myChart1 = echarts.init(div);
var option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: {
orient: "vertical",
top: 20,
@ -144,15 +156,32 @@ export default {
};
this.myChart1.setOption(option);
this.myChart1.on("click", (a, b) => {
console.log(a, b);
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: this.org_id,
type_id: "aged",
type_name: "志愿者年龄",
pageType: "normal",
type: "zhiyuanzhe",
},
});
});
window.addEventListener("resize", () => this.myChart1.resize());
},
initRightCharts() {
let div = document.getElementById("zyzRightChart");
this.myChart2 = echarts.init(div);
var option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
const option = {
color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: {
orient: "vertical",
top: 20,
@ -218,8 +247,17 @@ export default {
},
],
};
this.myChart1.on("click", (a, b) => {
console.log(a, b);
this.myChart2.on("click", (a, b) => {
this.$router.push({
path: "/dataBoard/renfang/resi-class",
query: {
org_id: this.org_id,
type_id: "aged",
type_name: "志愿者类别统计",
pageType: "normal",
type: "zhiyuanzhe",
},
});
});
this.myChart2.setOption(option);
window.addEventListener("resize", () => this.myChart2.resize());

44
src/views/dataBoard/renfang/visualizing/index.vue

@ -5,11 +5,11 @@
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 == '失业人员'" />
<laonianren :org_id="org_id" v-if="pageName == '老年人'" />
<dibaorenyuan :org_id="org_id" v-if="pageName == '低保人员'" />
<zhiyuanzhe :org_id="org_id" v-if="pageName == '志愿者'" />
<dangyuan :org_id="org_id" v-if="pageName == '党员'" />
<shiyerenyuan :org_id="org_id" v-if="pageName == '失业人员'" />
</div>
</template>
@ -41,36 +41,47 @@ export default {
pageName: "老年人",
breadList: [
{
type: "back",
path: "/dataBoard/renfang/index",
meta: { title: "人房总览" },
},
],
org_id: "",
};
},
created() {},
activated() {
const query = this.$route.query;
this.org_id = query.org_id;
this.type_id = query.type_id;
this.type_name = query.type_name;
this.breadList = [
{
type: "back",
path: "/dataBoard/renfang/index",
meta: { title: "人房总览" },
},
{
meta: { title: "人房总览" },
},
];
this.pageName = query.type_name;
this.toBread({
orgId: query.org_id,
orgLevel: query.type_id,
meta: { title: query.type_name },
});
this.breadList[1].meta.title = 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();
}
this.$router.push({
path: item.path,
query: {
org_id: this.org_id,
type_id: this.type_id,
},
});
},
toBread(item) {
const { orgId } = item;
const { breadList } = this;
@ -81,7 +92,6 @@ export default {
breadList.push(item);
this.breadList = breadList;
}
console.log("breadList::", breadList);
},
},
};

Loading…
Cancel
Save