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

gx

This commit is contained in:
duanxiaohai 2024-07-17 16:45:47 +08:00
parent 5d79396e81
commit a31bb0eb32
3 changed files with 190 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/utils/request.js
View File

@ -30,9 +30,9 @@ axios.interceptors.response.use(
if (error.response.status == 401) { if (error.response.status == 401) {
ElMessage.error("请重新登录!"); ElMessage.error("请重新登录!");
// window.location.href = '/#/login?returnURL=' + window.location.href // window.location.href = '/#/login?returnURL=' + window.location.href
// window.location.href = window.location.href =
// 'http://220.191.238.50:996/api/login?returnURL=' + 'http://220.191.238.50:996/api/login?returnURL=' +
// window.location.href window.location.href
} else if (error.response.status == 404) { } else if (error.response.status == 404) {
ElMessage.error("Status:404，正在请求不存在的服务器记录！"); ElMessage.error("Status:404，正在请求不存在的服务器记录！");
} else if (error.response.status == 500) { } else if (error.response.status == 500) {

78
src/view/echarts_education/pieRose.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<div ref="chart" style="width: 100%; height:300px;"></div> <div ref="chart" style="width: 100%; height: 300px"></div>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue"; import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
} from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
@ -19,30 +26,24 @@ const props = defineProps({
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = reactive({ const data = reactive({
list: [], list: [],
option: {} option: {},
}) });
var colors = [ var colors = ["#4EC2FF", "#FF805C", "#12F7D5", "#268FFF", "#FFE986"];
'#4EC2FF',
'#FF805C',
'#12F7D5',
'#268FFF',
'#FFE986'
]
const getOption = () => { const getOption = () => {
data.option = { data.option = {
color: colors, color: colors,
legend: { legend: {
orient: 'vertical', orient: "vertical",
top: 'center', top: "center",
right: '6%', right: "6%",
icon: "circle", icon: "circle",
itemGap: 20, itemGap: 20,
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: 18 fontSize: 18,
}, },
formatter: function (name) { formatter: function (name) {
var target; var target;
@ -55,22 +56,22 @@ const getOption = () => {
}, },
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
series: [ series: [
/*内心原型图，展示整体数据概览*/ /*内心原型图，展示整体数据概览*/
{ {
name: '测评分析', name: "测评分析",
type: 'pie', type: "pie",
radius: ['20%', '70%'], radius: ["20%", "70%"],
center: ['30%', '50%'], center: ["30%", "50%"],
roseType: 'radius', roseType: "radius",
minShowLabelAngle: 30, minShowLabelAngle: 30,
label: { label: {
show: false, show: false,
}, },
data: data.list data: data.list,
}, },
// 内圈背景 // 内圈背景
{ {
@ -83,7 +84,7 @@ const getOption = () => {
normal: { normal: {
borderWidth: 1, borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)", borderColor: "rgba(193, 229, 255, .1)",
color: 'rgba(14, 59, 123, 0.60)' color: "rgba(14, 59, 123, 0.60)",
}, },
}, },
tooltip: { tooltip: {
@ -94,28 +95,31 @@ const getOption = () => {
}, },
data: [100], data: [100],
}, },
] ],
};
}; };
}
const setChart = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option); myChart.setOption(data.option);
};
watch(
() => props.list,
(newVal, oldVal) => {
data.list = newVal;
getOption();
setChart();
// console.log("333", newVal, oldVal);
} }
watch(() => props.list, (newVal, oldVal) => { );
data.list = newVal
getOption()
setChart()
console.log('333', newVal, oldVal)
})
// 使用生命钩子 // 使用生命钩子
onMounted(() => { onMounted(() => {
data.list = props.list data.list = props.list;
getOption() // console.log("11", props.list);
setChart() getOption();
setChart();
}); });
</script> </script>

119
src/view/education.vue
View File

@ -48,7 +48,7 @@
v-model="selectData.value2" v-model="selectData.value2"
placeholder="请选择" placeholder="请选择"
size="large" size="large"
@change="selectChange1" @change="selectChange2"
> >
<el-option <el-option
v-for="item in selectData.options2" v-for="item in selectData.options2"
@ -59,7 +59,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<ePieRose :list="selectData.list" v-if="showEchart"></ePieRose> <ePieRose :list="selectData.list" v-if="showEchart && showR"></ePieRose>
</div> </div>
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
@ -94,14 +94,14 @@
<div class="grade"> <div class="grade">
<div <div
class="schoolbs" class="schoolbs"
@click="showDialog('学校', '/api/ggfwyth/schoolList')" @click="showDialog('学校', '/api/ggfwyth/schoolList', '初中')"
> >
<span class="spot font">初中</span> <span class="spot font">初中</span>
<span class="font">{{ data.xxgk.czxxsl }}</span> <span class="font">{{ data.xxgk.czxxsl }}</span>
</div> </div>
<div <div
class="schoolbs" class="schoolbs"
@click="showDialog('学校', '/api/ggfwyth/schoolList')" @click="showDialog('学校', '/api/ggfwyth/schoolList', '高中')"
> >
<span class="spot font">高中</span> <span class="spot font">高中</span>
<span class="font">{{ data.xxgk.gzxxsl }}</span> <span class="font">{{ data.xxgk.gzxxsl }}</span>
@ -110,14 +110,14 @@
<div class="grade"> <div class="grade">
<div <div
class="schoolbs" class="schoolbs"
@click="showDialog('学校', '/api/ggfwyth/schoolList')" @click="showDialog('学校', '/api/ggfwyth/schoolList', '小学')"
> >
<span class="spot font">小学</span> <span class="spot font">小学</span>
<span class="font">{{ data.xxgk.xxxxsl }}</span> <span class="font">{{ data.xxgk.xxxxsl }}</span>
</div> </div>
<div <div
class="schoolbs" class="schoolbs"
@click="showDialog('学校', '/api/ggfwyth/schoolList')" @click="showDialog('学校', '/api/ggfwyth/schoolList', '中职')"
> >
<span class="spot font">中职</span> <span class="spot font">中职</span>
<span class="font">{{ data.xxgk.zzxxsl }}</span> <span class="font">{{ data.xxgk.zzxxsl }}</span>
@ -126,7 +126,7 @@
<div class="grade grade1"> <div class="grade grade1">
<div <div
class="schoolbs" class="schoolbs"
@click="showDialog('学校', '/api/ggfwyth/schoolList')" @click="showDialog('学校', '/api/ggfwyth/schoolList', '幼儿园')"
> >
<span class="spot font">幼儿园</span> <span class="spot font">幼儿园</span>
<span class="font">{{ data.xxgk.yeyxxsl }}</span> <span class="font">{{ data.xxgk.yeyxxsl }}</span>
@ -134,7 +134,7 @@
<div class="schoolbs"> <div class="schoolbs">
<span <span
class="spot font" class="spot font"
@click="showDialog('学校', '/api/ggfwyth/schoolList')" @click="showDialog('学校', '/api/ggfwyth/schoolList', '特教')"
>特殊教育</span >特殊教育</span
> >
<span class="font">{{ data.xxgk.tsjyxxsl }}</span> <span class="font">{{ data.xxgk.tsjyxxsl }}</span>
@ -226,7 +226,7 @@
<img src="@/assets/eduImg/jyImg10.png" alt="" /> <img src="@/assets/eduImg/jyImg10.png" alt="" />
<img src="@/assets/eduImg/pp3.gif" alt="" class="ppImg" /> <img src="@/assets/eduImg/pp3.gif" alt="" class="ppImg" />
<div class="historyimg historyimg1"> <div class="historyimg historyimg1">
<span style="font-size: 18px;">绿色预警</span> <span style="font-size: 18px">绿色预警</span>
</div> </div>
</div> </div>
<div class="earlyWarning1"> <div class="earlyWarning1">
@ -236,7 +236,7 @@
<img src="@/assets/eduImg/jyImg9.png" alt="" /> <img src="@/assets/eduImg/jyImg9.png" alt="" />
<img src="@/assets/eduImg/pp2.gif" alt="" class="ppImg" /> <img src="@/assets/eduImg/pp2.gif" alt="" class="ppImg" />
<div class="historyimg historyimg2"> <div class="historyimg historyimg2">
<span style="font-size: 18px;">黄色预警</span> <span style="font-size: 18px">黄色预警</span>
</div> </div>
</div> </div>
<div class="earlyWarning1"> <div class="earlyWarning1">
@ -246,7 +246,7 @@
<img src="@/assets/eduImg/jyImg8.png" alt="" /> <img src="@/assets/eduImg/jyImg8.png" alt="" />
<img src="@/assets/eduImg/pp1.gif" alt="" class="ppImg" /> <img src="@/assets/eduImg/pp1.gif" alt="" class="ppImg" />
<div class="historyimg historyimg3"> <div class="historyimg historyimg3">
<span style="font-size: 18px;">红色预警</span> <span style="font-size: 18px">红色预警</span>
</div> </div>
</div> </div>
</div> </div>
@ -341,20 +341,26 @@ import ePieRose from "./echarts_education/pieRose.vue";
import eP1 from "./echarts_education/eP1.vue"; import eP1 from "./echarts_education/eP1.vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import Dialog from "./dialog/dialog.vue"; import Dialog from "./dialog/dialog.vue";
const showR = ref(true); //下拉
const selectData = reactive({ const selectData = reactive({
value1: "111", value1: "0",
value2: "tes1", value2: "0",
list: [], list: [],
list1: [], list1: [],
active: "县镇", active: "县镇",
evaluationAnalysis: {},
options1: [ options1: [
{ {
value: "111", value: "1",
label: "2023秋季检查", label: "2023年秋季小学生心理健康普查",
}, },
{ {
value: "222", value: "2",
label: "2024春季检查", label: "2023年秋季初中生心理健康普查",
},
{
value: "3",
label: "2023年秋季高中生心理健康普查",
}, },
], ],
options2: [ options2: [
@ -366,10 +372,10 @@ const selectData = reactive({
value: "tes2", value: "tes2",
label: "小学心理健康诊断测验", label: "小学心理健康诊断测验",
}, },
{ // {
value: "tes3", // value: "tes3",
label: "中学心理健康诊断", // label: "中学心理健康诊断",
}, // },
], ],
}); });
var roseData1 = ref([ var roseData1 = ref([
@ -468,7 +474,6 @@ const tableType = reactive({
label: "学生数", label: "学生数",
property: "xss", property: "xss",
}, },
{ {
label: "性质", label: "性质",
property: "xz", property: "xz",
@ -481,13 +486,15 @@ const pagination = reactive({
total: 100, total: 100,
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
school: "",
}); });
const handlePagination = (current) => { const handlePagination = (current) => {
pagination.currentPage = current; pagination.currentPage = current;
getTable(tableType.url, pagination.currentPage); getTable(tableType.url, pagination.currentPage);
}; };
const showDialog = (title, url) => { const showDialog = (title, url, school) => {
tableType.title = title; tableType.title = title;
pagination.school = school;
tableType.url = url; tableType.url = url;
pagination.currentPage = 1; pagination.currentPage = 1;
dialogShow.value = true; dialogShow.value = true;
@ -497,7 +504,9 @@ const showDialog = (title, url) => {
const getTable = (url, currentPage) => { const getTable = (url, currentPage) => {
dialogShow.value = true; dialogShow.value = true;
http http
.get(`${url}?page=${currentPage}&size=${pagination.pageSize}`) .get(
`${url}?page=${currentPage}&size=${pagination.pageSize}&xd=${pagination.school}`
)
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
tableType.data = res.data; tableType.data = res.data;
@ -510,18 +519,51 @@ const close = () => {
dialogShow.value = false; dialogShow.value = false;
}; };
//---- //----选择
const selectChange1 = () => { const selectChange1 = () => {
if (selectData.value1 == "111") { selectData.options1 = [];
selectData.list = roseData1.value; selectData.options2 = [];
} else if (selectData.value2 == "tes1") { selectData.evaluationAnalysis.forEach((item, index) => {
selectData.list = roseData2.value; const newOption = {
} else if (selectData.value2 == "tes2") { value: `${index}`,
selectData.list = roseData3.value; label: item.planTitle,
} else {
selectData.list = roseData1.value;
}
}; };
selectData.options1.push(newOption);
});
if (
selectData.evaluationAnalysis[selectData.value1] &&
selectData.evaluationAnalysis[selectData.value1].child
) {
selectData.evaluationAnalysis[selectData.value1].child.forEach(
(item, index) => {
const newOption = {
value: `${index}`,
label: item.title,
};
selectData.options2.push(newOption);
}
);
}
selectData.value2 = "0";
selectChange2();
};
const selectChange2 = () => {
showR.value = false;
roseData1.value.forEach((item, index) => {
item.value =
selectData.evaluationAnalysis[selectData.value1].child[
selectData.value2
].statistics[index + 1];
});
selectData.list = roseData1.value;
console.log(selectData.list);
setTimeout(() => {
showR.value = true;
}, 300);
};
// const ratingBtn = (item) => { // const ratingBtn = (item) => {
// selectData.active = item; // 设置当前选中的项目 // selectData.active = item; // 设置当前选中的项目
// switch (selectData.active) { // switch (selectData.active) {
@ -629,6 +671,8 @@ const getData = async () => {
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;
// 测评分析 // 测评分析
selectData.evaluationAnalysis = res.data.cpfx;
selectChange1();
// 学校概况 // 学校概况
data.xxgk = res.data.xxgk; data.xxgk = res.data.xxgk;
// 县镇农村学校数量 初始化数据 // 县镇农村学校数量 初始化数据
@ -1558,7 +1602,7 @@ onMounted(() => {
} }
.grade1 { .grade1 {
padding: 12px 110px 0 138px; padding: 12px 110px 0 116px;
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -1854,7 +1898,9 @@ onMounted(() => {
.selectBox { .selectBox {
.el-select--large .el-select__wrapper { .el-select--large .el-select__wrapper {
// font-size: 18px !important; // font-size: 18px !important;
span, p, a { span,
p,
a {
font-size: 16px; font-size: 16px;
} }
} }
@ -1872,5 +1918,4 @@ onMounted(() => {
font-size: 18px !important; font-size: 18px !important;
} }
} }
</style> </style>