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

gx

This commit is contained in:
duanxiaohai 2024-04-17 16:20:53 +08:00
parent 4c0e350c14
commit 607957ce81
1 changed files with 160 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/view/education.vue
View File

@ -21,15 +21,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>
@ -93,15 +111,18 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="fundingBox">
<div class="funding"> <div class="funding">
<!-- <div class="fundings"> -->
<span>资助项目</span> <span>资助项目</span>
<span>资助数量</span> <span>资助数量</span>
<span>资助金额</span> <span>资助金额</span>
<!-- </div> -->
</div> </div>
<div class="rolling"> <div class="rolling">
<div v-for="(item, index) in 20" :key="index" class="fundingContent"> <div
v-for="(item, index) in 20"
:key="index"
class="fundingContent"
>
<span class="spot">幼儿资助</span> <span class="spot">幼儿资助</span>
<span class="spot">379人次</span> <span class="spot">379人次</span>
<span class="spot">70.88</span> <span class="spot">70.88</span>
@ -109,6 +130,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title right_1"></div> <div class="yd_title right_1"></div>
@ -180,7 +202,7 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, onBeforeMount } from 'vue' import { ref, reactive, onMounted, onBeforeMount } from "vue";
import edCSR from "./echarts_education/edCSR.vue"; import edCSR from "./echarts_education/edCSR.vue";
import edXX from "./echarts_education/edXX.vue"; import edXX from "./echarts_education/edXX.vue";
import edie from "./echarts_education/pie.vue"; import edie from "./echarts_education/pie.vue";
@ -191,109 +213,113 @@ import ePie4 from "./echarts_education/pie4.vue";
import ePieRose from "./echarts_education/pieRose.vue"; import ePieRose from "./echarts_education/pieRose.vue";
const selectData = reactive({ const selectData = reactive({
value1: '111', value1: "111",
value2: 'tes1', value2: "tes1",
options1: [{ options1: [
value: '111', {
label: '2023秋季检查', value: "111",
label: "2023秋季检查",
}, },
{ {
value: '222', value: "222",
label: '2024春季检查', label: "2024春季检查",
},], },
options2: [{ ],
value: 'tes1', options2: [
label: '中小学心理健康诊断测验(MHT）', {
value: "tes1",
label: "中小学心理健康诊断测验(MHT）",
}, },
{ {
value: 'tes2', value: "tes2",
label: '小学心理健康诊断测验', label: "小学心理健康诊断测验",
}, },
{ {
value: 'tes3', value: "tes3",
label: '中学心理健康诊断', label: "中学心理健康诊断",
},], },
],
list: [], list: [],
}) });
var roseData1 = ref([ var roseData1 = ref([
{ {
name: '正常', name: "正常",
value: 17 value: 17,
}, },
{ {
name: '关注', name: "关注",
value: 16 value: 16,
}, },
{ {
name: '追踪', name: "追踪",
value: 14 value: 14,
}, },
{ {
name: '异常', name: "异常",
value: 8 value: 8,
}, },
{ {
name: '警戒', name: "警戒",
value: 8 value: 8,
} },
]); ]);
var roseData2 = ref([ var roseData2 = ref([
{ {
name: '正常', name: "正常",
value: 37 value: 37,
}, },
{ {
name: '关注', name: "关注",
value: 26 value: 26,
}, },
{ {
name: '追踪', name: "追踪",
value: 24 value: 24,
}, },
{ {
name: '异常', name: "异常",
value: 18 value: 18,
}, },
{ {
name: '警戒', name: "警戒",
value: 18 value: 18,
} },
]); ]);
var roseData3 = ref([ var roseData3 = ref([
{ {
name: '正常', name: "正常",
value: 227 value: 227,
}, },
{ {
name: '关注', name: "关注",
value: 169 value: 169,
}, },
{ {
name: '追踪', name: "追踪",
value: 114 value: 114,
}, },
{ {
name: '异常', name: "异常",
value: 98 value: 98,
}, },
{ {
name: '警戒', name: "警戒",
value: 78 value: 78,
} },
]); ]);
const selectChange1 = () => { const selectChange1 = () => {
if(selectData.value1 == '111'){ if (selectData.value1 == "111") {
selectData.list = roseData1.value selectData.list = roseData1.value;
}else if(selectData.value2 == 'tes1'){ } else if (selectData.value2 == "tes1") {
selectData.list = roseData2.value selectData.list = roseData2.value;
}else if(selectData.value2 == 'tes2'){ } else if (selectData.value2 == "tes2") {
selectData.list = roseData3.value selectData.list = roseData3.value;
} else { } else {
selectData.list = roseData1.value selectData.list = roseData1.value;
}
} }
};
onBeforeMount(() => { onBeforeMount(() => {
selectData.list = roseData1.value selectData.list = roseData1.value;
}); });
</script> </script>
@ -338,6 +364,7 @@ onBeforeMount(() => {
width: 582px; width: 582px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
padding-right: 10px;
background-image: url(@/assets/images/center_bg.png); background-image: url(@/assets/images/center_bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -918,6 +945,10 @@ onBeforeMount(() => {
} }
} }
} }
.fundingBox {
display: flex;
flex-direction: column;
align-items: center;
.funding { .funding {
width: 520px; width: 520px;
height: 34px; height: 34px;
@ -942,20 +973,21 @@ onBeforeMount(() => {
line-height: 20px; line-height: 20px;
letter-spacing: 3px; letter-spacing: 3px;
} }
// .fundings{
// display: flex;
// }
} }
.rolling { .rolling {
height: 16vh; width: 100%;
height: 14vh;
// height: calc(100% - 26px); // height: calc(100% - 26px);
overflow-y: auto; overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
.fundingContent { .fundingContent {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
margin-top: 10px; margin-top: 10px;
width: 94%; width: 92%;
height: 34px; height: 34px;
box-sizing: border-box; box-sizing: border-box;
background-image: url(@/assets/eduImg/jyImg16.png); background-image: url(@/assets/eduImg/jyImg16.png);
@ -970,7 +1002,8 @@ onBeforeMount(() => {
font-style: normal; font-style: normal;
} }
} }
}; }
}
.selectLint { .selectLint {
width: 94%; width: 94%;
@ -980,7 +1013,7 @@ onBeforeMount(() => {
.selectBox { .selectBox {
width: 48%; width: 48%;
background-image: url(@/assets/eduImg/title3.png); background-image: url(@/assets/eduImg/jyImg7.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }