xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-05-14 10:00:40 +08:00
parent 716144f4e8
commit ef8b9f73cd
5 changed files with 503 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

354
src/view/echarts_education/eP1.vue
View File

@ -3,10 +3,33 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = reactive({
list: [],
list1: [],
option: {},
});
// const data = [150, 230, 224, 218, 135, 147]; // const data = [150, 230, 224, 218, 135, 147];
const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"]; const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"];
const data2 = [ const data2 = [
@ -18,176 +41,193 @@ const data2 = [
"10000人", "10000人",
]; ];
const newData2 = data2.map((item) => parseInt(item.replace("人", ""))); const setChart = () => {
const newMaxNumber = Math.max(...newData2) * 1.05; // Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option);
};
const setChart1 = () => {
data.list1 = data.list.map((item) => `${item}人`);
// const newData2 = data.list.map((item) => parseInt(item.replace("人", "")));
// data.list1 = Math.max(...newData2) * 1.05;
// const newMaxNumber = Math.max(...newData2) * 1.05;
};
const option = { const getOption = () => {
grid: { data.option = {
top: "6%", grid: {
left: "9%", top: "6%",
right: "10%", left: "9%",
bottom: "0%", right: "10%",
containLabel: false, //---grid 区域是否包含坐标轴的刻度标签 bottom: "0%",
}, containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
tooltip: { },
show: true, //---是否显示提示框,默认为true tooltip: {
trigger: "axis", show: true, //---是否显示提示框,默认为true
formatter: "{b0}:{c1}" + "人", trigger: "axis",
}, formatter: "{b0}:{c1}" + "人",
xAxis: [ },
{ xAxis: [
type: "value", {
scale: false, type: "value",
max: newMaxNumber, scale: false,
axisLabel: { max: data.list,
//坐标轴分割线 axisLabel: {
show: false, //坐标轴分割线
textStyle: { show: false,
color: "#ffffff", textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false, // 取消x轴线
},
splitLine: {
show: false, //---grid 区域中的分隔线
},
axisTick: {
show: false, // 设置轴刻度不显示
}, },
}, },
axisLine: { ],
//y轴线的颜色以及宽度 yAxis: [
show: false, // 取消x轴线 {
type: "category",
scale: true,
// name: "时长/小时",
// max: data.length,
splitLine: {
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
axisLabel: {
//y轴文字的配置
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//分割线配置
show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// type: "solid",
// },
},
data: data1,
}, },
splitLine: { {
show: false, //---grid 区域中的分隔线 type: "category",
show: true,
position: "right",
axisLine: {
//---坐标轴 轴线
show: false, // 取消轴线
},
axisLabel: {
//---坐标轴 标签
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: data.list1,
}, },
axisTick: { ],
show: false, // 设置轴刻度不显示 series: [
}, {
}, type: "bar",
], data: data.list.map(() => Math.max(...data.list) * 1.05), // 外阴影铺满整个柱状图
yAxis: [ // barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
{ yAxisIndex: 1,
type: "category", barWidth: 30, //外阴影背景宽
scale: true, silent: true, // 不响应事件
// name: "时长/小时", itemStyle: {
// max: data.length, color: "rgba(0, 230, 255, 0.1)", //外阴影背景
splitLine: {
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
}, },
}, },
axisTick: { {
show: false, // 设置轴刻度不显示 type: "bar",
}, data: data.list.map(() => Math.max(...data.list) * 1.02), // 外阴影铺满整个柱状图
axisLabel: { barWidth: 8, //外阴影背景宽
//y轴文字的配置 silent: true, // 不响应事件
textStyle: { itemStyle: {
color: "#ffffff", normal: {
}, // borderColor: "rgba(0, 183, 255, 1)",
}, borderRadius: [0, 50, 50, 0], //圆角边框
axisLine: { // color: "rgba(94, 178, 188, 0.3)", //外阴影背景
//分割线配置
show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// type: "solid",
// },
},
data: data1,
},
{
type: "category",
show: true,
position: "right",
axisLine: {
//---坐标轴 轴线
show: false, // 取消轴线
},
axisLabel: {
//---坐标轴 标签
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: data2,
},
],
series: [
{
type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.05), // 外阴影铺满整个柱状图
// barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
yAxisIndex: 1,
barWidth: 30, //外阴影背景宽
silent: true, // 不响应事件
itemStyle: {
color: "rgba(0, 230, 255, 0.1)", //外阴影背景
},
},
{
type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.02), // 外阴影铺满整个柱状图
barWidth: 8, //外阴影背景宽
silent: true, // 不响应事件
itemStyle: {
normal: {
// borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [0, 50, 50, 0], //圆角边框
// color: "rgba(94, 178, 188, 0.3)", //外阴影背景
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(94, 178, 188, 0)" }, { offset: 0, color: "rgba(94, 178, 188, 0)" },
{ offset: 1, color: "rgba(94, 178, 188, 0.3)" }, { offset: 1, color: "rgba(94, 178, 188, 0.3)" },
]), ]),
},
},
},
{
type: "bar",
data: newData2,
barWidth: 7, //柱宽
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
itemStyle: {
normal: {
color: function (params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 230, 255, 0)" },
{ offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
{ offset: 1, color: "rgba(0, 230, 255, 1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 255, 208,0)" },
{ offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
{ offset: 1, color: "rgba(0, 255, 208,1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(255, 234, 90, 0)" },
{ offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
{ offset: 1, color: "rgba(255, 234, 90, 1)" },
]),
];
return colorList[params.dataIndex % colorList.length];
}, },
}, },
}, },
label: { {
show: true, type: "bar",
width: 8, data: data.list,
height: 8, barWidth: 7, //柱宽
borderRadius: 1000, barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
color: "rgba(0,0,0,0)", itemStyle: {
shadowColor: "#00E6FF", normal: {
backgroundColor: "rgba(0, 230, 255, 1)", color: function (params) {
position: ["99%", -0.4], var colorList = [
shadowBlur: 6, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 230, 255, 0)" },
{ offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
{ offset: 1, color: "rgba(0, 230, 255, 1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 255, 208,0)" },
{ offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
{ offset: 1, color: "rgba(0, 255, 208,1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(255, 234, 90, 0)" },
{ offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
{ offset: 1, color: "rgba(255, 234, 90, 1)" },
]),
];
return colorList[params.dataIndex % colorList.length];
},
},
},
label: {
show: true,
width: 8,
height: 8,
borderRadius: 1000,
color: "rgba(0,0,0,0)",
shadowColor: "#00E6FF",
backgroundColor: "rgba(0, 230, 255, 1)",
position: ["99%", -0.4],
shadowBlur: 6,
},
}, },
}, ],
], };
}; };
onMounted(() => { // 使用生命钩子
var myChart = echarts.init(chart.value); onBeforeMount(() => {
myChart.setOption(option); setTimeout(() => {
data.list = props.list;
setChart1();
getOption();
setChart();
}, 600);
}); });
</script> </script>

15
src/view/echarts_education/edXX.vue
View File

@ -269,7 +269,7 @@ watch(
data.list = newVal; data.list = newVal;
getOption(); getOption();
setChart(); setChart();
// console.log("学校", newVal, oldVal); console.log("学校", newVal, oldVal);
} }
); );
watch( watch(
@ -282,12 +282,13 @@ watch(
); );
// 使用生命钩子 // 使用生命钩子
onMounted(() => { onBeforeMount(() => {
data.list = props.list; setTimeout(() => {
data.namea = props.active; data.list = props.list;
data.namea = props.active;
getOption(); getOption();
setChart(); setChart();
}, 600);
// var myChart = echarts.init(chart.value); // var myChart = echarts.init(chart.value);
// myChart.setOption(option); // myChart.setOption(option);

331
src/view/echarts_education/pie.vue
View File

@ -1,187 +1,202 @@
<template> <template>
<div <div ref="chart" style="width: 50%; height: 280px"></div>
ref="chart"
style="width: 50%;height: 280px"
></div>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import { onBeforeMount, onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
let option = { const data = reactive({
tooltip: { list: [[], []],
trigger: "axis", option: {},
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}<br />{a2}:{c2} ", });
}, const getOption = () => {
legend: { data.option = {
top: "8%", tooltip: {
right: "11%", trigger: "axis",
textStyle: { formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
fontSize: 12,
color: "#ccc",
}, },
}, legend: {
grid: { top: "8%",
left: "1%", right: "11%",
right: "10%", textStyle: {
bottom: "0%", fontSize: 12,
containLabel: true, color: "#ccc",
}, },
calculable: true, },
xAxis: [ grid: {
{ left: "1%",
type: "category", right: "10%",
axisLabel: { bottom: "0%",
//坐标轴刻度标签的相关设置 containLabel: true,
textStyle: { },
color: "#ccc", calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ccc",
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: ["小学", "初中", "高中"],
},
{
axisTick: false,
type: "category",
data: ["小学", "初中", "高中"],
axisLabel: {
show: false,
}, },
}, },
axisTick: { ],
show: false, // 设置轴刻度不显示
},
data: ["小学", "初中", "高中"],
},
{
axisTick: false,
type: "category",
data: ["小学", "初中", "高中"],
axisLabel: {
show: false,
},
},
],
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(226, 226, 226, 0.3)", color: "rgba(226, 226, 226, 0.3)",
width: 1, width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ccc",
},
}, },
}, },
axisLabel: { {
//坐标轴刻度标签的相关设置 type: "value",
textStyle: { min: 0,
color: "#ccc", max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
}, },
}, },
}, ],
{ series: [
type: "value", // {
min: 0, // name: "城市",
max: 100, // type: "bar",
splitLine: { // data: [2.0, 4.9, 7.0],
show: false, // barWidth: "18%",
lineStyle: { // itemStyle: {
type: "solid", // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: "rgb(221, 242, 255,0.1)", // {
// offset: 0,
// color: "rgba(142, 187, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(142, 187, 255, 0.20)",
// },
// ]),
// },
// },
{
name: "县镇",
type: "bar",
data: data.list[1],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 136, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 136, 255, 0.20)",
},
]),
}, },
}, },
axisLine: { {
show: false, name: "农村",
lineStyle: { type: "bar",
type: "dotted", data: data.list[0],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
}, },
}, },
axisLabel: { {
show: false, type: "bar",
fontSize: 14, xAxisIndex: 1,
fontFamily: "MicrosoftYaHei", yAxisIndex: 1,
color: "#DEF1FF", itemStyle: {
lineHeight: 19, color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021"].map(() => 100),
barWidth: 70,
}, },
}, ],
], };
series: [
{
name: "城市",
type: "bar",
data: [2.0, 4.9, 7.0],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
{
name: "县镇",
type: "bar",
data: [2.6, 5.9, 9.0],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 136, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 136, 255, 0.20)",
},
]),
},
},
{
name: "农村",
type: "bar",
data: [2.6, 5.9, 9.0],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021"].map(() => 100),
barWidth: 70,
},
],
}; };
const setChart = () => {
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
};
// 单图表响应式: 跟随浏览器大小改变 // 使用生命钩子
// window.addEventListener("resize", () => { onBeforeMount(() => {
// myChart.resize(); setTimeout(() => {
// }); data.list = props.list;
// data.list[0].push(data.list.ncxx.nccz);
// data.list[0].push(data.list.ncxx.ncgz);
// data.list[0].push(data.list.ncxx.ncxx);
// data.list[1].push(data.list.xzxx.xzcz);
// data.list[1].push(data.list.xzxx.xzgz);
// data.list[1].push(data.list.xzxx.xzxx);
getOption();
setChart();
}, 600);
}); });
</script> </script>

175
src/view/education.vue
View File

@ -3,7 +3,7 @@
<div class="displayFlex left_bg"> <div class="displayFlex left_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title left_1"></div> <div class="yd_title left_1"></div>
<eP1></eP1> <eP1 :list="data.xsql"></eP1>
<div class="t_1"></div> <div class="t_1"></div>
<div class="t_2"> <div class="t_2">
<div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index"> <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
@ -19,15 +19,33 @@
<div class="yd_title left_2"></div> <div class="yd_title left_2"></div>
<div class="selectLint"> <div class="selectLint">
<div class="selectBox"> <div class="selectBox">
<el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1"> <el-select
<el-option v-for="item in selectData.options1" :key="item.value" :label="item.label" v-model="selectData.value1"
:value="item.value" /> placeholder="请选择"
size="large"
@change="selectChange1"
>
<el-option
v-for="item in selectData.options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
<div class="selectBox"> <div class="selectBox">
<el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1"> <el-select
<el-option v-for="item in selectData.options2" :key="item.value" :label="item.label" v-model="selectData.value2"
:value="item.value" /> placeholder="请选择"
size="large"
@change="selectChange1"
>
<el-option
v-for="item in selectData.options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
@ -44,38 +62,47 @@
<span class="schoola1">学校总数</span> <span class="schoola1">学校总数</span>
</div> </div>
<div class="schoola"> <div class="schoola">
<span>{{ data.xxgk.xszs }}</span> <span class="schoola1">学生总数</span> <span>{{ data.xxgk.xszs }}</span>
<span class="schoola1">学生总数</span>
</div> </div>
<div class="schoola"> <div class="schoola">
<span>{{ data.xxgk.bjzs }}</span> <span class="schoola1">班级总数</span> <span>{{ data.xxgk.bjzs }}</span>
<span class="schoola1">班级总数</span>
</div> </div>
<div class="schoola"> <div class="schoola">
<span>{{ data.xxgk.jzgzs }}</span> <span class="schoola1">教职工总数</span> <span>{{ data.xxgk.jzgzs }}</span>
<span class="schoola1">教职工总数</span>
</div> </div>
</div> </div>
<div class="schoolb"> <div class="schoolb">
<div class="grade"> <div class="grade">
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">初中</span> <span>{{ data.xxgk.czxxsl }}</span> <span class="spot">初中</span>
<span>{{ data.xxgk.czxxsl }}</span>
</div> </div>
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">高中</span> <span>{{ data.xxgk.gzxxsl }}</span> <span class="spot">高中</span>
<span>{{ data.xxgk.gzxxsl }}</span>
</div> </div>
</div> </div>
<div class="grade"> <div class="grade">
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">小学</span> <span>{{ data.xxgk.xxxxsl }}</span> <span class="spot">小学</span>
<span>{{ data.xxgk.xxxxsl }}</span>
</div> </div>
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">中职</span> <span>{{ data.xxgk.zzxxsl }}</span> <span class="spot">中职</span>
<span>{{ data.xxgk.zzxxsl }}</span>
</div> </div>
</div> </div>
<div class="grade grade1"> <div class="grade grade1">
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">幼儿园</span> <span>{{ data.xxgk.yeyxxsl }}</span> <span class="spot">幼儿园</span>
<span>{{ data.xxgk.yeyxxsl }}</span>
</div> </div>
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">特殊教育</span> <span>{{ data.xxgk.tsjyxxsl }}</span> <span class="spot">特殊教育</span>
<span>{{ data.xxgk.tsjyxxsl }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -83,17 +110,23 @@
</div> </div>
<div class="flex1"> <div class="flex1">
<div style="width: 100%; display: flex; flex-wrap: wrap"> <div style="width: 100%; display: flex; flex-wrap: wrap">
<edie></edie> <edie :list="data.xzncxxsl"></edie>
<div class="rating"> <div class="rating">
<edXX :list="selectData.list1" :active="selectData.active"></edXX> <edXX :list="data.schoolData" :active="selectData.active"></edXX>
<div class="ratingBtn"> <div class="ratingBtn">
<div class="onImg" :class="{ ratingImg: selectData.active === '城市' }"> <!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
<span @click="ratingBtn('城市')">城市</span> <span @click="ratingBtn('城市')">城市</span>
</div> </div> -->
<div class="onImg" :class="{ ratingImg: selectData.active === '县镇' }"> <div
class="onImg"
:class="{ ratingImg: selectData.active === '县镇' }"
>
<span @click="ratingBtn('县镇')">县镇</span> <span @click="ratingBtn('县镇')">县镇</span>
</div> </div>
<div class="onImg" :class="{ ratingImg: selectData.active === '农村' }"> <div
class="onImg"
:class="{ ratingImg: selectData.active === '农村' }"
>
<span @click="ratingBtn('农村')">农村</span> <span @click="ratingBtn('农村')">农村</span>
</div> </div>
</div> </div>
@ -108,10 +141,14 @@
<span>资助金额</span> <span>资助金额</span>
</div> </div>
<div class="rolling"> <div class="rolling">
<div v-for="(item, index) in 20" :key="index" class="fundingContent"> <div
<span class="spot">幼儿资助</span> v-for="(item, index) in data.zzxm"
<span class="spot">379人次</span> :key="index"
<span class="spot">70.88</span> class="fundingContent"
>
<span class="spot">{{ item.zzxm }}</span>
<span class="spot">{{ item.zzsl }}</span>
<span class="spot">{{ item.zzje }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -230,7 +267,7 @@ const selectData = reactive({
}, },
], ],
list: [], list: [],
active: "城市", active: "县镇",
list1: [], list1: [],
}); });
var roseData1 = ref([ var roseData1 = ref([
@ -338,14 +375,24 @@ const selectChange1 = () => {
const ratingBtn = (item) => { const ratingBtn = (item) => {
selectData.active = item; // 设置当前选中的项目 selectData.active = item; // 设置当前选中的项目
switch (selectData.active) { switch (selectData.active) {
case "城市": // case "城市":
selectData.list1 = schoolData.value; // selectData.list1 = schoolData.value;
break; // break;
case "县镇": case "县镇":
selectData.list1 = schoolData1.value; data.schoolData[0].value = data.xzncjszcsl.xzjszcsl.xzfgj; //县镇复高级数量
data.schoolData[1].value = data.xzncjszcsl.xzjszcsl.xzzgj; //县镇正高级数量
data.schoolData[2].value = data.xzncjszcsl.xzjszcsl.xzwdj; //县镇未定级数量
data.schoolData[3].value = data.xzncjszcsl.xzjszcsl.xzyj; //县镇员级数量
data.schoolData[4].value = data.xzncjszcsl.xzjszcsl.xzzj; //县镇中级数量
data.schoolData[5].value = data.xzncjszcsl.xzjszcsl.xzzlj; //县镇助理级数量
break; break;
case "农村": case "农村":
selectData.list1 = schoolData2.value; data.schoolData[0].value = data.xzncjszcsl.ncjszcsl.ncfgj; //县镇正高级数量
data.schoolData[1].value = data.xzncjszcsl.ncjszcsl.nczgj; //县镇正高级数量
data.schoolData[2].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇中级数量
data.schoolData[3].value = data.xzncjszcsl.ncjszcsl.nczlj; //县镇助理级数量
data.schoolData[4].value = data.xzncjszcsl.ncjszcsl.ncyj; //县镇员级数量
data.schoolData[5].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇未定级数量
break; break;
default: default:
break; break;
@ -375,26 +422,50 @@ const data = reactive({
cls: "left4", cls: "left4",
}, },
], ],
xxgk: {} xxgk: {},
}) xzncjszcsl: [],
onBeforeMount(() => { xzncxxsl: [[], []],
selectData.list = roseData1.value; zzxm: [],
selectData.list1 = schoolData.value; schoolData: [
http.get("/api/ggfwyth/education").then((res) => { { name: "副高级", value: "" },
{ name: "正高级", value: "" },
{ name: "未定级", value: "" },
{ name: "员级", value: "" },
{ name: "中级", value: "" },
{ name: "助理级", value: "" },
],
});
const getData = async () => {
await http.get("/api/ggfwyth/education").then((res) => {
if (res.code == 200) { if (res.code == 200) {
data.xsql.push(res.data.xssl.zz) data.xsql.push(res.data.xssl.zz);
data.xsql.push(res.data.xssl.gz) data.xsql.push(res.data.xssl.gz);
data.xsql.push(res.data.xssl.cz) data.xsql.push(res.data.xssl.cz);
data.xsql.push(res.data.xssl.xx) data.xsql.push(res.data.xssl.xx);
data.xsql.push(res.data.xssl.yey) data.xsql.push(res.data.xssl.yey);
data.xsql.push(res.data.xssl.tsjy) data.xsql.push(res.data.xssl.tsjy);
data.zdgz[0].value = res.data.zdgz.lset data.zdgz[0].value = res.data.zdgz.lset;
data.zdgz[1].value = res.data.zdgz.dszn data.zdgz[1].value = res.data.zdgz.dszn;
data.zdgz[2].value = res.data.zdgz.dqjt data.zdgz[2].value = res.data.zdgz.dqjt;
data.zdgz[3].value = res.data.zdgz.xsdb data.zdgz[3].value = res.data.zdgz.xsdb;
data.xxgk = res.data.xxgk data.xxgk = res.data.xxgk;
data.xzncjszcsl = res.data.xzncjszcsl;
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncxx);
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.nccz);
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncgz);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzxx);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzcz);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz);
data.zzxm = res.data.zzxm;
ratingBtn("县镇");
} }
}); });
};
onBeforeMount(async () => {
selectData.list = roseData1.value;
getData();
}); });
</script> </script>
@ -1103,8 +1174,8 @@ onBeforeMount(() => {
justify-content: space-around; justify-content: space-around;
margin-top: 10px; margin-top: 10px;
width: 93.2%; width: 93.2%;
height: 34px; min-height: 34px;
padding: 6px 0; padding: 8px 0;
box-sizing: border-box; box-sizing: border-box;
background-image: url(@/assets/eduImg/jyImg16.png); background-image: url(@/assets/eduImg/jyImg16.png);
@ -1116,6 +1187,8 @@ onBeforeMount(() => {
letter-spacing: 3px; letter-spacing: 3px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
width: 33%;
padding-left: 50px;
} }
} }
} }

1
src/view/yl.vue
View File

@ -258,6 +258,7 @@ const data = reactive({
onBeforeMount(() => { onBeforeMount(() => {
getData(); getData();
}); });
const getData = () => { const getData = () => {
http.get("/api/ggfwyth/yl").then((res) => { http.get("/api/ggfwyth/yl").then((res) => {
if (res.code == 200) { if (res.code == 200) {