This commit is contained in:
duanxiaohai
parent
da7c16f8db
commit
0cdd91817d
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 110 KiB |
|
|
@ -2,7 +2,7 @@ import axios from "axios";
|
|||
import { ElMessage } from "element-plus";
|
||||
import tools from "@/utils/tools";
|
||||
import router from "../router";
|
||||
// axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
|
||||
axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
|
||||
axios.defaults.timeout = 120000;
|
||||
|
||||
// HTTP request 拦截器
|
||||
|
|
|
|||
|
|
@ -66,7 +66,10 @@
|
|||
:data="data.tableData"
|
||||
height="390px"
|
||||
max-height="390"
|
||||
:header-cell-style="{ background: 'rgba(0, 143, 205, 0.63)', fontSize:' 22px' }"
|
||||
:header-cell-style="{
|
||||
background: 'rgba(0, 143, 205, 0.63)',
|
||||
fontSize: ' 22px',
|
||||
}"
|
||||
:row-style="rowState"
|
||||
@row-click="handleRowClick"
|
||||
stripe
|
||||
|
|
@ -298,6 +301,17 @@ watch(
|
|||
(match, name) => `：${maskName(name.trim())}`
|
||||
);
|
||||
}
|
||||
// 手机号脱敏
|
||||
function maskPhoneNumber(phone) {
|
||||
return phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
|
||||
}
|
||||
|
||||
function maskYwfzrsj(ywfzrsj) {
|
||||
return ywfzrsj
|
||||
.split(",")
|
||||
.map((phone) => maskPhoneNumber(phone.trim()))
|
||||
.join(",");
|
||||
}
|
||||
if (props.tableData.data.wxs.length > 0) {
|
||||
props.tableData.data.wxs.forEach((item, index) => {
|
||||
let obj = {
|
||||
|
|
@ -308,7 +322,8 @@ watch(
|
|||
qtbm: item.qtbm,
|
||||
zrks: item.zrks,
|
||||
ywfzr: maskName(item.ywfzr),
|
||||
fgldsj: item.fgldsj.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2"),
|
||||
ywfzrsj: maskYwfzrsj(item.ywfzrsj),
|
||||
// ywfzrsj: item.ywfzrsj.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2"),
|
||||
};
|
||||
data.tableData.push(obj);
|
||||
});
|
||||
|
|
@ -324,8 +339,8 @@ watch(
|
|||
qtbm: item.qtbm,
|
||||
zrks: item.zrks,
|
||||
ywfzr: maskName(item.ywfzr),
|
||||
// fgldsj: item.fgldsj,
|
||||
fgldsj: item.fgldsj.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2"),
|
||||
// ywfzrsj: item.ywfzrsj,
|
||||
ywfzrsj: maskYwfzrsj(item.ywfzrsj),
|
||||
};
|
||||
data.tableData.push(obj);
|
||||
});
|
||||
|
|
@ -410,7 +425,7 @@ const closeDialog = () => {
|
|||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 46px;
|
||||
span{
|
||||
span {
|
||||
font-size: 22px;
|
||||
}
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@ const props = defineProps({
|
|||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const colors = [
|
||||
// {
|
||||
// left: "rgba(234, 162, 57, .16)",
|
||||
// right: "rgba(234, 162, 57, .6)",
|
||||
// top: "rgba(234, 162, 57, 1)",
|
||||
// bottom: "rgba(234, 162, 57, .46)",
|
||||
// front: "rgba(234, 162, 57, .66)",
|
||||
// },
|
||||
{
|
||||
left: "rgba(234, 162, 57, .16)",
|
||||
right: "rgba(234, 162, 57, .6)",
|
||||
top: "rgba(234, 162, 57, 1)",
|
||||
bottom: "rgba(234, 162, 57, .46)",
|
||||
front: "rgba(234, 162, 57, .66)",
|
||||
},
|
||||
{
|
||||
left: "rgba(14, 252, 255, .16)",
|
||||
right: "rgba(14, 252, 255, .6)",
|
||||
|
|
@ -38,7 +38,7 @@ const colors = [
|
|||
const data = reactive({
|
||||
list: [],
|
||||
option: {},
|
||||
Max: 20000,
|
||||
Max: 100000,
|
||||
valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
|
||||
valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
||||
xxname: ["2020", "2021", "2022", "2023"],
|
||||
|
|
@ -267,7 +267,7 @@ const getOption = () => {
|
|||
"育龄妇女",
|
||||
],
|
||||
top: "0%",
|
||||
right: "30%",
|
||||
// right: "0%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
|
|
@ -279,10 +279,10 @@ const getOption = () => {
|
|||
formatter: "{b0}:</br>{a0}:{c0}",
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
left: 20,
|
||||
right: 40,
|
||||
bottom: 10,
|
||||
top: 40,
|
||||
top: 60,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
|
|
@ -326,7 +326,6 @@ const getOption = () => {
|
|||
],
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: data.Max,
|
||||
// interval: 100,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
|
|
@ -538,45 +537,6 @@ const getOption = () => {
|
|||
},
|
||||
data: data.valueList2,
|
||||
},
|
||||
//顶部字体
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 18,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value - 5;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0)",
|
||||
},
|
||||
|
||||
data: data.valueList.map((item) => parseInt(item) + 5),
|
||||
barWidth: 30,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 18,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value - 5;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0)",
|
||||
},
|
||||
|
||||
data: data.valueList2.map((item) => parseInt(item) + 5),
|
||||
barWidth: 20,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
@ -603,9 +563,9 @@ const setChart1 = () => {
|
|||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
data.xxname = props.list.year;
|
||||
data.valueList2 = props.list.data;
|
||||
setTimeout(() => {
|
||||
data.xxname = props.list.year;
|
||||
data.valueList2 = props.list.data;
|
||||
// data.valueList2.forEach((item, index) => {
|
||||
// props.list.forEach((itemm, indexx) => {
|
||||
// if (item == itemm.xzjd) {
|
||||
|
|
@ -614,8 +574,8 @@ onBeforeMount(() => {
|
|||
// }
|
||||
// });
|
||||
// });
|
||||
console.log(6666,props.list);
|
||||
|
||||
// console.log(6666, props.list);
|
||||
|
||||
getOption();
|
||||
setChart();
|
||||
}, 800);
|
||||
|
|
|
|||
|
|
@ -1,245 +1,225 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 350px"></div>
|
||||
<div ref="chart" style="width: 100%; height:410px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
defineProps,
|
||||
watch,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref();
|
||||
const clear = ref(false);
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
list2: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list2: [],
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
list: Array,
|
||||
month: Array,
|
||||
});
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const data = reactive({
|
||||
list: [],
|
||||
month: [],
|
||||
option: {},
|
||||
name: [],
|
||||
formatter: "{b0}<br />",
|
||||
series: [
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
data: [],
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
data: [],
|
||||
top: "3%",
|
||||
right: "10%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
bgColor: [
|
||||
"#2468FF",
|
||||
"#E8FF00",
|
||||
"#FF5733",
|
||||
"#33FF57",
|
||||
"#3357FF",
|
||||
"#FF33A1",
|
||||
"#57FF33",
|
||||
"#33FFA1",
|
||||
"#A133FF",
|
||||
"#FF5733",
|
||||
],
|
||||
});
|
||||
|
||||
const updateSeries = () => {
|
||||
// data.series = [
|
||||
// {
|
||||
// name: "背景",
|
||||
// type: "bar",
|
||||
// data: data.month.map(() => 0),
|
||||
// showBackground: true,
|
||||
// backgroundStyle: {
|
||||
// color: "rgba(180, 180, 180, 0.2)",
|
||||
// },
|
||||
// },
|
||||
// ];
|
||||
|
||||
if (data.list.length > 0) {
|
||||
// if (!data.list) {
|
||||
data.list.forEach((item, index) => {
|
||||
const color = data.bgColor[index % data.bgColor.length];
|
||||
data.series.push({
|
||||
yAxisIndex: 0,
|
||||
name: item.name,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
borderColor: color,
|
||||
borderWidth: 1,
|
||||
color: color,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: color,
|
||||
formatter: (data) => data.value,
|
||||
},
|
||||
data: item.data,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
data.legend.data = data.list.map((item) => item.name);
|
||||
data.formatter =
|
||||
"{b0}月<br />" +
|
||||
data.list.map((_, index) => `{a${index}}:{c${index}}<br />`).join("");
|
||||
};
|
||||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
padding: [20, 10, 20, 10],
|
||||
formatter: "{b0}<br />{a1}:{c1}<br /> ",
|
||||
},
|
||||
legend: {
|
||||
data: ["出生人数", "高血压人数"],
|
||||
top: "6%",
|
||||
right: "11%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
formatter: data.formatter,
|
||||
},
|
||||
legend: data.legend,
|
||||
grid: {
|
||||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
top: "20%",
|
||||
left: "6%",
|
||||
right: "6%",
|
||||
bottom: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: "category",
|
||||
// boundaryGap: false,
|
||||
data: data.year,
|
||||
// splitArea: {
|
||||
// show: true,
|
||||
// interval: '10',
|
||||
// areaStyle: {
|
||||
// color: ["rgba(255, 255, 255, 0.10)"],
|
||||
// width:10,
|
||||
// },
|
||||
// },
|
||||
data: data.month,
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
yAxis: [
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
data: data.bg,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "出生人数",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
symbol: "emptyCircle",
|
||||
smooth: true,
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
borderColor: "#E8FF00",
|
||||
borderWidth: 1,
|
||||
color: "#E8FF00",
|
||||
},
|
||||
label: {
|
||||
type: "value",
|
||||
// name: "人数/人",
|
||||
splitLine: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#F4F65B",
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
// color: 'RGBA(184, 204, 241, 1)'
|
||||
color: "rgba(255, 234, 90, 0.50)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 234, 90, 0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
min: 0,
|
||||
max: (value) =>
|
||||
Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50,
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
data: data.list,
|
||||
},
|
||||
{
|
||||
name: "高血压人数",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
symbol: "emptyCircle",
|
||||
smooth: true,
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
color: "#00FCFF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#F4F65B",
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
// color: 'RGBA(184, 204, 241, 1)'
|
||||
color: "rgba(0, 252, 255, 0.50)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 252, 255, 0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
min: 0,
|
||||
max: (value) =>
|
||||
Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50,
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
data: data.list,
|
||||
},
|
||||
],
|
||||
series: data.series,
|
||||
};
|
||||
};
|
||||
watch(
|
||||
() => props.list,
|
||||
(newValue, oldValue) => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
data.bg = [];
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
}
|
||||
);
|
||||
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
// const myChart = echarts.init(chart.value);
|
||||
let myChart = echarts.getInstanceByDom(chart.value);
|
||||
if (!myChart) {
|
||||
myChart = echarts.init(chart.value);
|
||||
}
|
||||
if (clear.value) {
|
||||
myChart.clear();
|
||||
}
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
// watch(
|
||||
// () => props.list,
|
||||
// (newVal, oldVal) => {
|
||||
// if (newVal.length < oldVal.length) {
|
||||
// clear.value = true;
|
||||
// } else {
|
||||
// clear.value = false;
|
||||
// }
|
||||
// data.list = newVal;
|
||||
// updateSeries();
|
||||
// getOption();
|
||||
// setChart();
|
||||
// }
|
||||
// );
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
console.log(data.bg);
|
||||
data.month = props.month;
|
||||
// console.log(666, data.list, data.month);
|
||||
// data.month.forEach((item) => {
|
||||
// item = item + "月";
|
||||
// });
|
||||
|
||||
updateSeries();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||
<div ref="chart" style="width: 100%; height:430px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -38,10 +38,10 @@ const colors = [
|
|||
const data = reactive({
|
||||
list: [],
|
||||
option: {},
|
||||
Max: 20000,
|
||||
Max: 5000,
|
||||
valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
|
||||
valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
||||
xxname: ["2020", "2021", "2022", "2023"],
|
||||
xxname: ["失业登记", "离校未就业", "低保低边", "低收入农户"],
|
||||
});
|
||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||
|
|
@ -262,12 +262,9 @@ echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
|
|||
const getOption = () => {
|
||||
data.option = {
|
||||
legend: {
|
||||
data: [
|
||||
"适龄生育妇女",
|
||||
"育龄妇女",
|
||||
],
|
||||
data: ["重点群体结构类型", "帮扶就业人数"],
|
||||
top: "0%",
|
||||
right: "30%",
|
||||
// right: "30%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
|
|
@ -280,8 +277,8 @@ const getOption = () => {
|
|||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 10,
|
||||
top: 40,
|
||||
bottom: 40,
|
||||
top: 60,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
|
|
@ -300,9 +297,9 @@ const getOption = () => {
|
|||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
formatter: function (value) {
|
||||
return value.length > 4 ? value.slice(0, 6) + "..." : value;
|
||||
},
|
||||
// formatter: function (value) {
|
||||
// return value.length > 4 ? value.slice(0, 6) + "..." : value;
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -353,7 +350,7 @@ const getOption = () => {
|
|||
series: [
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
name: "适龄生育妇女",
|
||||
name: "重点群体结构类型",
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
|
@ -446,7 +443,7 @@ const getOption = () => {
|
|||
},
|
||||
{
|
||||
xAxisIndex: 0,
|
||||
name: "育龄妇女",
|
||||
name: "帮扶就业人数",
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
|
|
@ -592,27 +589,38 @@ const getMaxCeilingValue = (arr) => {
|
|||
};
|
||||
const setChart1 = () => {
|
||||
data.valueList = [];
|
||||
data.xxname = [];
|
||||
data.valueList2 = [];
|
||||
if (data.list.length !== 0) {
|
||||
data.list.forEach((item) => {
|
||||
data.xxname.push(item.name); //信息名
|
||||
data.valueList.push(item.num); //信息数
|
||||
});
|
||||
// data.valueList.push(data.list.bf.bfdjsy); //重点 登记失业
|
||||
// data.valueList.push(data.list.bf.bflxwjy); //重点 离校未就业
|
||||
// data.valueList.push(data.list.bf.bfdbdb); //重点 低保低边
|
||||
// data.valueList.push(data.list.bf.bfdsrnh); //重点 低收入农户
|
||||
// data.valueList2.push(data.list.zd.zddjsy); //帮扶 登记失业
|
||||
// data.valueList2.push(data.list.zd.zdlxwjy); //帮扶 离校未就业
|
||||
// data.valueList2.push(data.list.zd.zddbdb); //帮扶 低保低边
|
||||
// data.valueList2.push(data.list.zd.zddsrnh); //帮扶 低收入农户
|
||||
const keyPoints = ['bfdjsy', 'bflxwjy', 'bfdbdb', 'bfdsrnh'];
|
||||
const supportPoints = ['zddjsy', 'zdlxwjy', 'zddbdb', 'zddsrnh'];
|
||||
data.valueList = keyPoints.map(key => data.list.bf[key]);
|
||||
data.valueList2 = supportPoints.map(key => data.list.zd[key]);
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
// data.xxname = props.list.year;
|
||||
// data.valueList = props.list.data;
|
||||
setTimeout(() => {
|
||||
data.xxname.forEach((item, index) => {
|
||||
props.list.forEach((itemm, indexx) => {
|
||||
if (item == itemm.xzjd) {
|
||||
data.valueList[index] = itemm.qrrs;
|
||||
data.valueList2[index] = itemm.qcrs;
|
||||
}
|
||||
});
|
||||
});
|
||||
// data.xxname.forEach((item, index) => {
|
||||
// props.list.forEach((itemm, indexx) => {
|
||||
// if (item == itemm.xzjd) {
|
||||
// data.valueList[index] = itemm.qrrs;
|
||||
// data.valueList2[index] = itemm.qcrs;
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// data.xxname = props.list.year;
|
||||
data.list = props.list;
|
||||
setChart1()
|
||||
// console.log(666,data.valueList,data.valueList2);
|
||||
|
||||
getOption();
|
||||
setChart();
|
||||
}, 800);
|
||||
|
|
|
|||
|
|
@ -509,7 +509,8 @@ const tableType = reactive({
|
|||
},
|
||||
{
|
||||
label: "联系电话",
|
||||
property: "fgldsj",
|
||||
// property: "fgldsj",
|
||||
property: "ywfzrsj",
|
||||
},
|
||||
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<eP1 :list="data.csrs.data" :year="data.csrs.year"></eP1>
|
||||
<eP1 :list="data.ViewData" :month="data.jnrcs.month"></eP1>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_3">
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<eP2 :list="data.ylfnzb"></eP2>
|
||||
<eP2 :list="data.syl"></eP2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<eP3></eP3>
|
||||
<!-- <eP3></eP3> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -105,67 +105,101 @@ const data = reactive({
|
|||
employmentList: [
|
||||
{
|
||||
name: "发布人力资源供求信息",
|
||||
value: "38",
|
||||
value: "0",
|
||||
img: jy1,
|
||||
dw: "次",
|
||||
},
|
||||
{
|
||||
name: "见习岗位信息3次",
|
||||
value: "385",
|
||||
value: "0",
|
||||
img: jy2,
|
||||
dw: "个",
|
||||
},
|
||||
{
|
||||
name: "开展就业创业政策宣传",
|
||||
value: "3",
|
||||
value: "0",
|
||||
img: jy3,
|
||||
dw: "次",
|
||||
},
|
||||
{
|
||||
name: "劳动用工政策法规咨询",
|
||||
value: "2300",
|
||||
value: "0",
|
||||
img: jy4,
|
||||
dw: "余人次",
|
||||
},
|
||||
{
|
||||
name: "组织招聘会",
|
||||
value: "52",
|
||||
value: "0",
|
||||
dw: "场",
|
||||
img: jy5,
|
||||
},
|
||||
{
|
||||
name: "提供岗位",
|
||||
value: "40342",
|
||||
value: "0",
|
||||
dw: "个",
|
||||
img: jy6,
|
||||
},
|
||||
{
|
||||
name: "求职意向登记",
|
||||
value: "7609",
|
||||
value: "0",
|
||||
dw: "人次",
|
||||
img: jy7,
|
||||
},
|
||||
{
|
||||
name: "流动人员人事档案",
|
||||
value: "23530",
|
||||
value: "0",
|
||||
dw: "份",
|
||||
img: jy8,
|
||||
},
|
||||
],
|
||||
|
||||
ViewData: [
|
||||
{
|
||||
name: "一级/高级技师",
|
||||
value: "0",
|
||||
show: true,
|
||||
data: ["0", "0", "0", "0", "0", "0"], //一级/高级技师
|
||||
},
|
||||
{
|
||||
name: "二级/技师",
|
||||
value: "0",
|
||||
show: true,
|
||||
data: ["0", "0", "0", "0", "0", "0"], //二级/技师
|
||||
},
|
||||
{
|
||||
name: "三级/高级工",
|
||||
value: "0",
|
||||
show: true,
|
||||
data: ["0", "0", "0", "0", "0", "0"], //三级/高级工
|
||||
},
|
||||
{
|
||||
name: "四级/中级工",
|
||||
value: "0",
|
||||
show: true,
|
||||
data: ["0", "0", "0", "0", "0", "0"], //四级/中级工
|
||||
},
|
||||
{
|
||||
name: "五级/初级工",
|
||||
value: "0",
|
||||
show: true,
|
||||
data: ["0", "0", "0", "0", "0", "0"], //五级/初级工
|
||||
},
|
||||
],
|
||||
jnrcs: {
|
||||
month: [],
|
||||
one: [], //一级/高级技师
|
||||
two: [], // 二级/技师
|
||||
three: [], //三级/高级工
|
||||
four: [], //四级/中级工
|
||||
five: [], //五级/初级工
|
||||
// one: [], //一级/高级技师
|
||||
// two: [], // 二级/技师
|
||||
// three: [], //三级/高级工
|
||||
// four: [], //四级/中级工
|
||||
// five: [], //五级/初级工
|
||||
}, //新增技能人才数
|
||||
syl: {}, // 失业率
|
||||
syl: {
|
||||
bf: [], //帮扶
|
||||
zd: [], //重点
|
||||
}, // 失业率
|
||||
jyfws: {}, // 就业服务
|
||||
rczy: {}, // 人才资源统计
|
||||
sybx: {}, // 失业保险概况
|
||||
|
||||
gsbx: {}, //工伤保险
|
||||
});
|
||||
const showEchart = ref(false);
|
||||
// tap切换 失业&工伤
|
||||
|
|
@ -191,11 +225,28 @@ const jzChange = (index, value) => {
|
|||
const getData = async () => {
|
||||
await http.get("/api/ggfwyth/lysdOverview").then((res) => {
|
||||
if (res.code == 200) {
|
||||
// data.csrs = res.data.csrs;
|
||||
// data.yynbl = res.data.yynbl;
|
||||
// data.jbgk = res.data.jbgk;
|
||||
// data.ylfnzb = res.data.ylfnzb.data;
|
||||
// data.ylfnyyefb = res.data.ylfnyyefb;
|
||||
data.jnrcs.month = res.data.jnrcs.month; //新增技能人才数
|
||||
// data.jnrcs.one = res.data.jnrcs.one; //新增技能人才数
|
||||
// data.jnrcs.two = res.data.jnrcs.two; //新增技能人才数
|
||||
// data.jnrcs.three = res.data.jnrcs.three; //新增技能人才数
|
||||
// data.jnrcs.four = res.data.jnrcs.four; //新增技能人才数
|
||||
// data.jnrcs.five = res.data.jnrcs.five; //新增技能人才数
|
||||
|
||||
data.ViewData[0].data = res.data.jnrcs.one; //一级/高级技师
|
||||
data.ViewData[1].data = res.data.jnrcs.two; //二级/技师
|
||||
data.ViewData[2].data = res.data.jnrcs.three; //三级/高级工
|
||||
data.ViewData[3].data = res.data.jnrcs.four; //四级/中级工
|
||||
data.ViewData[4].data = res.data.jnrcs.five; //五级/初级工
|
||||
|
||||
data.syl.bf = res.data.syl.bf; // 失业率 帮扶
|
||||
data.syl.zd = res.data.syl.zd; // 失业率 重点
|
||||
|
||||
data.jyfws = res.data.jyfws; // 就业服务
|
||||
data.employmentList[0].value = res.data.jyfws; //一级/高级技师
|
||||
|
||||
data.rczy = res.data.rczy; // 人才资源统计
|
||||
data.sybx = res.data.sybx; // 失业保险概况
|
||||
data.gsbx = res.data.gsbx; //工伤保险
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue