Browse Source

人房图表

V1.0
张若晨 3 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 { &-item {
width: 450px; width: 33.3%;
height: 400px; height: 400px;
} }
} }

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

@ -12,21 +12,178 @@
<div class="tip_title">{{ tableTitle }}</div> <div class="tip_title">{{ tableTitle }}</div>
<div class="title_line"></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 <el-select
v-model="subclassId" v-model="oldVal"
:popper-append-to-body="false" :popper-append-to-body="false"
placeholder="请选择" placeholder="请选择年龄"
> >
<el-option <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" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
@click.native="handleChangeDate(item.value)"
></el-option> ></el-option>
</el-select> </el-select>
</div> </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>
<div class="g-listbox"> <div class="g-listbox">
@ -38,23 +195,15 @@
:total="total" :total="total"
@handleSizeChange="handleSizeChange" @handleSizeChange="handleSizeChange"
@handlePageNoChange="handlePageNoChange" @handlePageNoChange="handlePageNoChange"
@operate="showInfo" @operate="jumpPage"
></cpt-tb> ></cpt-tb>
</div> </div>
<resi-details
@close="displayedResiId = ''"
:resi-id="displayedResiId"
v-if="displayedResiId"
/>
</div> </div>
</template> </template>
<script> <script>
import cptTb from "@/views/dataBoard/cpts/tb"; import cptTb from "@/views/dataBoard/cpts/tb";
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; 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"; import getQueryPara from "dai-js/modules/getQueryPara";
export default { export default {
@ -63,31 +212,28 @@ export default {
components: { components: {
cptTb, cptTb,
cptBread, cptBread,
resiDetails,
}, },
data() { data() {
return { return {
breadList: [ breadList: [
{ {
type: "back", path: "/dataBoard/renfang/index",
meta: { meta: {
title: "人房总览", title: "人房总览",
}, },
}, },
{ {
meta: { meta: {
title: "居民类别", title: "居民列表",
}, },
}, },
], ],
tableTitle: "居民列表",
tableTitle: "居民类别",
searchName: "",
pageType: "", pageType: "",
orgLevel: "", orgLevel: "",
org_id: "", org_id: "",
type_id: "", // type_id: "", //
type_name: "", type_name: "",
loading: true, loading: true,
pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
@ -95,7 +241,73 @@ export default {
total: 0, total: 0,
srcTableData: [], srcTableData: [],
list: [], 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: [ colList: [
{ {
align: "left", align: "left",
@ -134,7 +346,6 @@ export default {
width: "10%", width: "10%",
}, },
], ],
header: [ header: [
"序号", "序号",
"姓名", "姓名",
@ -146,16 +357,69 @@ export default {
"出生日期", "出生日期",
"操作", "操作",
], ],
type: null,
displayedResiId: "", typeList: [
{
subclassList: [], type: "old",
subclassId: "", 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() { activated() {
this.org_id = getQueryPara("org_id"); this.org_id = getQueryPara("org_id");
this.type = getQueryPara("type");
this.type_id = getQueryPara("type_id"); this.type_id = getQueryPara("type_id");
this.pageType = getQueryPara("pageType"); this.pageType = getQueryPara("pageType");
this.type_name = getQueryPara("type_name"); this.type_name = getQueryPara("type_name");
@ -163,11 +427,102 @@ export default {
this.breadList[1].meta.title = type_name + "居民列表"; this.breadList[1].meta.title = type_name + "居民列表";
this.tableTitle = type_name + "居民列表"; this.tableTitle = type_name + "居民列表";
this.pageNo = 1; 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.getList();
this.getCount(); // this.getCount();
if (this.type_id == "special_popu") { if (this.pageType != "normal") {
this.getSubclass(); 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() { created() {
this.pageNo = 1; this.pageNo = 1;
@ -176,170 +531,192 @@ export default {
$route(to, from) { $route(to, from) {
this.$router.go(0); this.$router.go(0);
}, },
subclassId: { oldVal: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.pageNo = 1; this.pageNo = 1;
this.getList(); const searchParams = {
this.getCount(); startAge: newVal[0],
endAge: newVal[1],
};
this.getList(searchParams);
}, },
}, },
searchParams(newVal, oldVal) {
this.getList();
},
}, },
methods: { methods: {
handleClickBreadItem({ item }) { handleClickBreadItem({ item }) {
if (item.type == "back") { this.$router.push({
this.$router.back(); path: item.path,
} query: {
org_id: this.org_id,
type_id: this.type_id,
type_name: item.meta.title,
pageType: this.pageType,
},
});
}, },
changeFwfmc(e) {
handleSearch() {}, this.searchParams = {
serviceOrgName: e.target.value || null,
showInfo(index) { };
let item = this.srcTableData[index]; this.getList();
this.displayedResiId = item.user_id; },
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) { handlePageNoChange(pageNo) {
this.pageNo = pageNo; this.pageNo = pageNo;
this.getList(); this.getList();
}, },
handleSizeChange(pageSize) { handleSizeChange(pageSize) {
localStorage.setItem("dataBoard_PageSize", pageSize); localStorage.setItem("dataBoard_PageSize", pageSize);
this.pageSize = pageSize; this.pageSize = pageSize;
this.getList(); this.getList();
}, },
async getList(item) {
async getSubclass() { const { url } = this.typeList.filter((item) => item.type == this.type)[0];
const { org_id, type_id } = this; const sourceType = ["公共服务", "共性需求", "政策找人", "服务找人"];
this.loading = true; this.loading = true;
const url = "special_type_list"; let queryParam = {
const { data, code, msg } = await requestPostBi( pageNo: this.pageNo,
url, pageSize: this.pageSize,
{ ...this.searchParams,
queryParam: { ...item,
org_id, };
type_id, this.$http.post(url, queryParam).then(({ data: res }) => {
}, this.loading = false;
}, const { data, code, msg } = res;
{ const { list, total } = data;
// mockId: 62648939, 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) { async getResideNation() {
this.subclassList = data.map((item, index) => { try {
return { const { data } = await this.$http.post("sys/dict/data/dictlist", {
label: item.type_name, dictType: "reside_situation",
value: item.type_id,
};
}); });
} else { this.resideArr = data.data;
this.$message.error(msg); } catch (error) {
console.log(error, "获取居住情况字典");
} }
}, },
async getList() { // async getPostNation() {
const { org_id, type_id, subclassId, pageNo, pageSize } = this; // try {
this.loading = true; // let { data } = await this.$http.post("sys/dict/data/dictlist", {
let url = ""; // dictType: "welfare_post",
let queryParam = {}; // });
if (this.pageType == "normal") { // this.PostDictonArr = data.data;
url = "resident_class_list"; // } catch (error) {
queryParam = { // console.log(error, "");
org_id, // }
type_id: subclassId || type_id, // },
pageNo, async getUnemployment() {
pageSize, try {
}; const { data } = await this.$http.post("sys/dict/data/dictlist", {
} else { dictType: "unemployment_cause",
url = "resident_class_predict_list"; });
queryParam = { this.unemploymentArr = data.data;
org_id, } catch (error) {
resi_class_name: this.type_name, console.log(error, "获取失业原因字典");
page_num: pageNo,
page_size: pageSize,
};
} }
const { data, code, msg } = await requestPostBi( },
url, async getCareer() {
{ try {
queryParam, const { data } = await this.$http.post("sys/dict/data/dictlist", {
}, dictType: "career_goals",
{ });
// mockId: 60069169, this.careerArr = data.data;
} } catch (error) {
); console.log(error, "获取就业愿望字典");
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 getCount() { async getVolunteer() {
const { org_id, type_id, subclassId, pageNo, pageSize } = this; try {
let url = ""; const { data } = await this.$http.post("sys/dict/data/dictlist", {
let queryParam = {}; dictType: "VOLUNTEER_CATEGORY",
if (this.pageType == "normal") { });
url = "resident_class_list_total"; this.volunteerArr = data.data;
queryParam = { } catch (error) {
org_id, console.log(error, "获取志愿者类别字典");
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,
};
} }
const { data, code, msg } = await requestPostBi( },
url, async getLowIncomeReason() {
{ try {
queryParam, const { data } = await this.$http.post("sys/dict/data/dictlist", {
}, dictType: "low_income_reason",
{ });
// mockId: 63070913, this.lowIncomeReasonArr = data.data;
} } catch (error) {
); console.log(error, "获取低保原因字典");
if (code === 0) { }
this.total = parseInt(data[0].count); },
} else { async getLowIncomeType() {
this.$message.error(msg); 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: { props: {
title: { title: {
type: String, type: String,
default: "详情", default: "",
},
org_id: {
type: String,
default: "",
}, },
}, },
components: { components: {
@ -77,8 +81,16 @@ export default {
initLeftCharts() { initLeftCharts() {
let div = document.getElementById("dyLeftChart"); let div = document.getElementById("dyLeftChart");
this.myChart1 = echarts.init(div); this.myChart1 = echarts.init(div);
var option = { const option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: { legend: {
orient: "vertical", orient: "vertical",
top: 20, top: 20,
@ -147,10 +159,11 @@ export default {
this.$router.push({ this.$router.push({
path: "/dataBoard/renfang/resi-class", path: "/dataBoard/renfang/resi-class",
query: { query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", org_id: this.org_id,
type_id: "aged", type_id: "aged",
type_name: "党员", type_name: "党员",
pageType: "normal", pageType: "normal",
type: "dangyuan",
}, },
}); });
}); });
@ -159,8 +172,16 @@ export default {
initRightCharts() { initRightCharts() {
let div = document.getElementById("dyRightChart"); let div = document.getElementById("dyRightChart");
this.myChart2 = echarts.init(div); this.myChart2 = echarts.init(div);
var option = { const option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: { legend: {
orient: "vertical", orient: "vertical",
top: 20, top: 20,
@ -186,9 +207,7 @@ export default {
data: this.dyRight, data: this.dyRight,
formatter: (name) => { formatter: (name) => {
if (this.dyRight.length) { if (this.dyRight.length) {
const item = this.dyRight.filter( const item = this.dyRight.filter((item) => item.name === name)[0];
(item) => item.name === name
)[0];
return `{name|${name}}{value| ${item.value}}`; return `{name|${name}}{value| ${item.value}}`;
} }
}, },
@ -230,10 +249,11 @@ export default {
this.$router.push({ this.$router.push({
path: "/dataBoard/renfang/resi-class", path: "/dataBoard/renfang/resi-class",
query: { query: {
org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28", org_id: this.org_id,
type_id: "aged", type_id: "aged",
type_name: "党员", type_name: "党员",
pageType: "normal", 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) { function dataFormatter(arr) {
return arr.map((item) => { 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 { return {
name: name, name: item.classification,
value: Number(item.classificationNum), value: Number(item.classificationNum),
}; };
}); });
@ -57,7 +48,11 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "详情", default: "",
},
org_id: {
type: String,
default: "",
}, },
}, },
components: { components: {
@ -72,7 +67,6 @@ export default {
}; };
}, },
created() { created() {
const query = this.$route.query;
this.getData(); this.getData();
}, },
methods: { methods: {
@ -121,8 +115,19 @@ export default {
dbryDataCharts1() { dbryDataCharts1() {
let div = document.getElementById("dbryChart1"); let div = document.getElementById("dbryChart1");
this.myChart1 = echarts.init(div); this.myChart1 = echarts.init(div);
var option = { const option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: { legend: {
orient: "vertical", orient: "vertical",
top: 20, top: 20,
@ -146,12 +151,20 @@ export default {
}, },
}, },
data: this.dbryData1, data: this.dbryData1,
tooltip: {
show: true,
},
formatter: (name) => { formatter: (name) => {
if (this.dbryData1.length) { if (this.dbryData1.length) {
const item = this.dbryData1.filter( const item = this.dbryData1.filter(
(item) => item.name === name (item) => item.name === name
)[0]; )[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: [ series: [
{ {
name: "Nightingale Chart",
type: "pie", type: "pie",
radius: [30, 130], radius: [30, 130],
center: ["50%", "50%"], center: ["50%", "50%"],
@ -193,9 +205,11 @@ export default {
this.$router.push({ this.$router.push({
path: "/dataBoard/renfang/resi-class", path: "/dataBoard/renfang/resi-class",
query: { query: {
org_id: this.org_id,
type_id: "mlsp", type_id: "mlsp",
type_name: "低保人员", type_name: "低保人员",
pageType: "normal", pageType: "normal",
type: "dibao",
}, },
}); });
}); });
@ -204,8 +218,19 @@ export default {
dbryDataCharts2() { dbryDataCharts2() {
let div = document.getElementById("dbryChart2"); let div = document.getElementById("dbryChart2");
this.myChart2 = echarts.init(div); this.myChart2 = echarts.init(div);
var option = { const option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: { legend: {
orient: "vertical", orient: "vertical",
top: 20, top: 20,
@ -217,7 +242,7 @@ export default {
color: "#ffffff", color: "#ffffff",
rich: { rich: {
name: { name: {
width: 80, width: 90,
fontSize: 12, fontSize: 12,
color: "#dddee7", color: "#dddee7",
}, },
@ -229,12 +254,20 @@ export default {
}, },
}, },
data: this.dbryData2, data: this.dbryData2,
tooltip: {
show: true,
},
formatter: (name) => { formatter: (name) => {
if (this.dbryData2.length) { if (this.dbryData2.length) {
const item = this.dbryData2.filter( const item = this.dbryData2.filter(
(item) => item.name === name (item) => item.name === name
)[0]; )[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: [ series: [
{ {
name: "Nightingale Chart",
type: "pie", type: "pie",
radius: [30, 130], radius: [30, 130],
center: ["50%", "50%"], center: ["50%", "50%"],
@ -276,9 +308,11 @@ export default {
this.$router.push({ this.$router.push({
path: "/dataBoard/renfang/resi-class", path: "/dataBoard/renfang/resi-class",
query: { query: {
org_id: this.org_id,
type_id: "mlsp", type_id: "mlsp",
type_name: "低保人员", type_name: "低保人员",
pageType: "normal", pageType: "normal",
type: "dibao",
}, },
}); });
}); });
@ -287,8 +321,19 @@ export default {
dbryDataCharts3() { dbryDataCharts3() {
let div = document.getElementById("dbryChart3"); let div = document.getElementById("dbryChart3");
this.myChart3 = echarts.init(div); this.myChart3 = echarts.init(div);
var option = { const option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: { legend: {
type: "scroll", type: "scroll",
orient: "vertical", orient: "vertical",
@ -314,12 +359,20 @@ export default {
}, },
}, },
data: this.dbryData3, data: this.dbryData3,
tooltip: {
show: true,
},
formatter: (name) => { formatter: (name) => {
if (this.dbryData3.length) { if (this.dbryData3.length) {
const item = this.dbryData3.filter( const item = this.dbryData3.filter(
(item) => item.name === name (item) => item.name === name
)[0]; )[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: [ series: [
{ {
name: "Nightingale Chart",
type: "pie", type: "pie",
radius: [30, 130], radius: [30, 130],
center: ["50%", "50%"], center: ["50%", "50%"],
@ -358,15 +410,35 @@ export default {
}; };
this.myChart3.setOption(option); this.myChart3.setOption(option);
this.myChart3.on("click", (a, b) => { 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()); window.addEventListener("resize", () => this.myChart3.resize());
}, },
dbryDataCharts4() { dbryDataCharts4() {
let div = document.getElementById("dbryChart4"); let div = document.getElementById("dbryChart4");
this.myChart4 = echarts.init(div); this.myChart4 = echarts.init(div);
var option = { const option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
tooltip: {
show: true,
},
legend: { legend: {
type: "scroll", type: "scroll",
orient: "vertical", orient: "vertical",
@ -379,7 +451,7 @@ export default {
color: "#ffffff", color: "#ffffff",
rich: { rich: {
name: { name: {
width: 80, width: 90,
fontSize: 12, fontSize: 12,
color: "#dddee7", color: "#dddee7",
}, },
@ -391,12 +463,20 @@ export default {
}, },
}, },
data: this.dbryData4, data: this.dbryData4,
tooltip: {
show: true,
},
formatter: (name) => { formatter: (name) => {
if (this.dbryData4.length) { if (this.dbryData4.length) {
const item = this.dbryData4.filter( const item = this.dbryData4.filter(
(item) => item.name === name (item) => item.name === name
)[0]; )[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: [ series: [
{ {
name: "Nightingale Chart",
type: "pie", type: "pie",
radius: [30, 130], radius: [30, 130],
center: ["50%", "50%"], center: ["50%", "50%"],
@ -434,6 +513,18 @@ export default {
], ],
}; };
this.myChart4.setOption(option); 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()); window.addEventListener("resize", () => this.myChart4.resize());
}, },
}, },

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

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

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

@ -34,7 +34,11 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
default: "详情", default: "",
},
org_id: {
type: String,
default: "",
}, },
}, },
components: { components: {
@ -77,8 +81,16 @@ export default {
initLeftCharts() { initLeftCharts() {
let div = document.getElementById("zyzLeftChart"); let div = document.getElementById("zyzLeftChart");
this.myChart1 = echarts.init(div); this.myChart1 = echarts.init(div);
var option = { const option = {
color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: { legend: {
orient: "vertical", orient: "vertical",
top: 20, top: 20,
@ -144,15 +156,32 @@ export default {
}; };
this.myChart1.setOption(option); this.myChart1.setOption(option);
this.myChart1.on("click", (a, b) => { 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()); window.addEventListener("resize", () => this.myChart1.resize());
}, },
initRightCharts() { initRightCharts() {
let div = document.getElementById("zyzRightChart"); let div = document.getElementById("zyzRightChart");
this.myChart2 = echarts.init(div); this.myChart2 = echarts.init(div);
var option = { const option = {
color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"], color: [
"#15a7ed",
"#22b998",
"#5f6ff4",
"#a66eeb",
"#faa834",
"#fd6200",
"#fb3905",
],
legend: { legend: {
orient: "vertical", orient: "vertical",
top: 20, top: 20,
@ -218,8 +247,17 @@ export default {
}, },
], ],
}; };
this.myChart1.on("click", (a, b) => { this.myChart2.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",
},
});
}); });
this.myChart2.setOption(option); this.myChart2.setOption(option);
window.addEventListener("resize", () => this.myChart2.resize()); window.addEventListener("resize", () => this.myChart2.resize());

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

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

Loading…
Cancel
Save