This commit is contained in:
duanxiaohai
parent
5d79396e81
commit
a31bb0eb32
|
|
@ -30,9 +30,9 @@ axios.interceptors.response.use(
|
|||
if (error.response.status == 401) {
|
||||
ElMessage.error("请重新登录!");
|
||||
// window.location.href = '/#/login?returnURL=' + window.location.href
|
||||
// window.location.href =
|
||||
// 'http://220.191.238.50:996/api/login?returnURL=' +
|
||||
// window.location.href
|
||||
window.location.href =
|
||||
'http://220.191.238.50:996/api/login?returnURL=' +
|
||||
window.location.href
|
||||
} else if (error.response.status == 404) {
|
||||
ElMessage.error("Status:404，正在请求不存在的服务器记录！");
|
||||
} else if (error.response.status == 500) {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height:300px;"></div>
|
||||
<div ref="chart" style="width: 100%; height: 300px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue";
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
defineProps,
|
||||
watch,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
|
|
@ -19,30 +26,24 @@ const props = defineProps({
|
|||
const chart = ref(); // 创建DOM引用
|
||||
const data = reactive({
|
||||
list: [],
|
||||
option: {}
|
||||
})
|
||||
option: {},
|
||||
});
|
||||
|
||||
var colors = [
|
||||
'#4EC2FF',
|
||||
'#FF805C',
|
||||
'#12F7D5',
|
||||
'#268FFF',
|
||||
'#FFE986'
|
||||
]
|
||||
var colors = ["#4EC2FF", "#FF805C", "#12F7D5", "#268FFF", "#FFE986"];
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
color: colors,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '6%',
|
||||
orient: "vertical",
|
||||
top: "center",
|
||||
right: "6%",
|
||||
icon: "circle",
|
||||
itemGap: 20,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 18
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
},
|
||||
formatter: function (name) {
|
||||
var target;
|
||||
|
|
@ -55,22 +56,22 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
series: [
|
||||
/*内心原型图，展示整体数据概览*/
|
||||
{
|
||||
name: '测评分析',
|
||||
type: 'pie',
|
||||
radius: ['20%', '70%'],
|
||||
center: ['30%', '50%'],
|
||||
roseType: 'radius',
|
||||
name: "测评分析",
|
||||
type: "pie",
|
||||
radius: ["20%", "70%"],
|
||||
center: ["30%", "50%"],
|
||||
roseType: "radius",
|
||||
minShowLabelAngle: 30,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data.list
|
||||
data: data.list,
|
||||
},
|
||||
// 内圈背景
|
||||
{
|
||||
|
|
@ -83,7 +84,7 @@ const getOption = () => {
|
|||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(193, 229, 255, .1)",
|
||||
color: 'rgba(14, 59, 123, 0.60)'
|
||||
color: "rgba(14, 59, 123, 0.60)",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -94,28 +95,31 @@ const getOption = () => {
|
|||
},
|
||||
data: [100],
|
||||
},
|
||||
]
|
||||
],
|
||||
};
|
||||
};
|
||||
}
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
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(() => {
|
||||
data.list = props.list
|
||||
getOption()
|
||||
setChart()
|
||||
|
||||
data.list = props.list;
|
||||
// console.log("11", props.list);
|
||||
getOption();
|
||||
setChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
v-model="selectData.value2"
|
||||
placeholder="请选择"
|
||||
size="large"
|
||||
@change="selectChange1"
|
||||
@change="selectChange2"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData.options2"
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<ePieRose :list="selectData.list" v-if="showEchart"></ePieRose>
|
||||
<ePieRose :list="selectData.list" v-if="showEchart && showR"></ePieRose>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
|
|
@ -94,14 +94,14 @@
|
|||
<div class="grade">
|
||||
<div
|
||||
class="schoolbs"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList')"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList', '初中')"
|
||||
>
|
||||
<span class="spot font">初中</span>
|
||||
<span class="font">{{ data.xxgk.czxxsl }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="schoolbs"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList')"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList', '高中')"
|
||||
>
|
||||
<span class="spot font">高中</span>
|
||||
<span class="font">{{ data.xxgk.gzxxsl }}</span>
|
||||
|
|
@ -110,14 +110,14 @@
|
|||
<div class="grade">
|
||||
<div
|
||||
class="schoolbs"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList')"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList', '小学')"
|
||||
>
|
||||
<span class="spot font">小学</span>
|
||||
<span class="font">{{ data.xxgk.xxxxsl }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="schoolbs"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList')"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList', '中职')"
|
||||
>
|
||||
<span class="spot font">中职</span>
|
||||
<span class="font">{{ data.xxgk.zzxxsl }}</span>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<div class="grade grade1">
|
||||
<div
|
||||
class="schoolbs"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList')"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList', '幼儿园')"
|
||||
>
|
||||
<span class="spot font">幼儿园</span>
|
||||
<span class="font">{{ data.xxgk.yeyxxsl }}</span>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
<div class="schoolbs">
|
||||
<span
|
||||
class="spot font"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList')"
|
||||
@click="showDialog('学校', '/api/ggfwyth/schoolList', '特教')"
|
||||
>特殊教育</span
|
||||
>
|
||||
<span class="font">{{ data.xxgk.tsjyxxsl }}</span>
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
<img src="@/assets/eduImg/jyImg10.png" alt="" />
|
||||
<img src="@/assets/eduImg/pp3.gif" alt="" class="ppImg" />
|
||||
<div class="historyimg historyimg1">
|
||||
<span style="font-size: 18px;">绿色预警</span>
|
||||
<span style="font-size: 18px">绿色预警</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="earlyWarning1">
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
<img src="@/assets/eduImg/jyImg9.png" alt="" />
|
||||
<img src="@/assets/eduImg/pp2.gif" alt="" class="ppImg" />
|
||||
<div class="historyimg historyimg2">
|
||||
<span style="font-size: 18px;">黄色预警</span>
|
||||
<span style="font-size: 18px">黄色预警</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="earlyWarning1">
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
<img src="@/assets/eduImg/jyImg8.png" alt="" />
|
||||
<img src="@/assets/eduImg/pp1.gif" alt="" class="ppImg" />
|
||||
<div class="historyimg historyimg3">
|
||||
<span style="font-size: 18px;">红色预警</span>
|
||||
<span style="font-size: 18px">红色预警</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -341,20 +341,26 @@ import ePieRose from "./echarts_education/pieRose.vue";
|
|||
import eP1 from "./echarts_education/eP1.vue";
|
||||
import http from "@/utils/request.js";
|
||||
import Dialog from "./dialog/dialog.vue";
|
||||
const showR = ref(true); //下拉
|
||||
const selectData = reactive({
|
||||
value1: "111",
|
||||
value2: "tes1",
|
||||
value1: "0",
|
||||
value2: "0",
|
||||
list: [],
|
||||
list1: [],
|
||||
active: "县镇",
|
||||
evaluationAnalysis: {},
|
||||
options1: [
|
||||
{
|
||||
value: "111",
|
||||
label: "2023秋季检查",
|
||||
value: "1",
|
||||
label: "2023年秋季小学生心理健康普查",
|
||||
},
|
||||
{
|
||||
value: "222",
|
||||
label: "2024春季检查",
|
||||
value: "2",
|
||||
label: "2023年秋季初中生心理健康普查",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "2023年秋季高中生心理健康普查",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
|
|
@ -366,10 +372,10 @@ const selectData = reactive({
|
|||
value: "tes2",
|
||||
label: "小学心理健康诊断测验",
|
||||
},
|
||||
{
|
||||
value: "tes3",
|
||||
label: "中学心理健康诊断",
|
||||
},
|
||||
// {
|
||||
// value: "tes3",
|
||||
// label: "中学心理健康诊断",
|
||||
// },
|
||||
],
|
||||
});
|
||||
var roseData1 = ref([
|
||||
|
|
@ -468,7 +474,6 @@ const tableType = reactive({
|
|||
label: "学生数",
|
||||
property: "xss",
|
||||
},
|
||||
|
||||
{
|
||||
label: "性质",
|
||||
property: "xz",
|
||||
|
|
@ -481,13 +486,15 @@ const pagination = reactive({
|
|||
total: 100,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
school: "",
|
||||
});
|
||||
const handlePagination = (current) => {
|
||||
pagination.currentPage = current;
|
||||
getTable(tableType.url, pagination.currentPage);
|
||||
};
|
||||
const showDialog = (title, url) => {
|
||||
const showDialog = (title, url, school) => {
|
||||
tableType.title = title;
|
||||
pagination.school = school;
|
||||
tableType.url = url;
|
||||
pagination.currentPage = 1;
|
||||
dialogShow.value = true;
|
||||
|
|
@ -497,7 +504,9 @@ const showDialog = (title, url) => {
|
|||
const getTable = (url, currentPage) => {
|
||||
dialogShow.value = true;
|
||||
http
|
||||
.get(`${url}?page=${currentPage}&size=${pagination.pageSize}`)
|
||||
.get(
|
||||
`${url}?page=${currentPage}&size=${pagination.pageSize}&xd=${pagination.school}`
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
tableType.data = res.data;
|
||||
|
|
@ -510,18 +519,51 @@ const close = () => {
|
|||
dialogShow.value = false;
|
||||
};
|
||||
|
||||
//----
|
||||
//----选择
|
||||
const selectChange1 = () => {
|
||||
if (selectData.value1 == "111") {
|
||||
selectData.list = roseData1.value;
|
||||
} else if (selectData.value2 == "tes1") {
|
||||
selectData.list = roseData2.value;
|
||||
} else if (selectData.value2 == "tes2") {
|
||||
selectData.list = roseData3.value;
|
||||
} else {
|
||||
selectData.list = roseData1.value;
|
||||
}
|
||||
selectData.options1 = [];
|
||||
selectData.options2 = [];
|
||||
selectData.evaluationAnalysis.forEach((item, index) => {
|
||||
const newOption = {
|
||||
value: `${index}`,
|
||||
label: item.planTitle,
|
||||
};
|
||||
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) => {
|
||||
// selectData.active = item; // 设置当前选中的项目
|
||||
// switch (selectData.active) {
|
||||
|
|
@ -629,6 +671,8 @@ const getData = async () => {
|
|||
data.zdgz[2].value = res.data.zdgz.dqjt;
|
||||
data.zdgz[3].value = res.data.zdgz.xsdb;
|
||||
// 测评分析
|
||||
selectData.evaluationAnalysis = res.data.cpfx;
|
||||
selectChange1();
|
||||
// 学校概况
|
||||
data.xxgk = res.data.xxgk;
|
||||
// 县镇农村学校数量 初始化数据
|
||||
|
|
@ -1558,7 +1602,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.grade1 {
|
||||
padding: 12px 110px 0 138px;
|
||||
padding: 12px 110px 0 116px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
|
@ -1854,7 +1898,9 @@ onMounted(() => {
|
|||
.selectBox {
|
||||
.el-select--large .el-select__wrapper {
|
||||
// font-size: 18px !important;
|
||||
span, p, a {
|
||||
span,
|
||||
p,
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1872,5 +1918,4 @@ onMounted(() => {
|
|||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue