This commit is contained in:
duanxiaohai
parent
4c0e350c14
commit
607957ce81
|
|
@ -21,15 +21,33 @@
|
|||
<div class="yd_title left_2"></div>
|
||||
<div class="selectLint">
|
||||
<div class="selectBox">
|
||||
<el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1">
|
||||
<el-option v-for="item in selectData.options1" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
<el-select
|
||||
v-model="selectData.value1"
|
||||
placeholder="请选择"
|
||||
size="large"
|
||||
@change="selectChange1"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData.options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1">
|
||||
<el-option v-for="item in selectData.options2" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
<el-select
|
||||
v-model="selectData.value2"
|
||||
placeholder="请选择"
|
||||
size="large"
|
||||
@change="selectChange1"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData.options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,18 +111,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="funding">
|
||||
<!-- <div class="fundings"> -->
|
||||
<span>资助项目</span>
|
||||
<span>资助数量</span>
|
||||
<span>资助金额</span>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="rolling">
|
||||
<div v-for="(item, index) in 20" :key="index" class="fundingContent">
|
||||
<span class="spot">幼儿资助</span>
|
||||
<span class="spot">379人次</span>
|
||||
<span class="spot">70.88</span>
|
||||
<div class="fundingBox">
|
||||
<div class="funding">
|
||||
<span>资助项目</span>
|
||||
<span>资助数量</span>
|
||||
<span>资助金额</span>
|
||||
</div>
|
||||
<div class="rolling">
|
||||
<div
|
||||
v-for="(item, index) in 20"
|
||||
:key="index"
|
||||
class="fundingContent"
|
||||
>
|
||||
<span class="spot">幼儿资助</span>
|
||||
<span class="spot">379人次</span>
|
||||
<span class="spot">70.88</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,7 +202,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeMount } from 'vue'
|
||||
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
||||
import edCSR from "./echarts_education/edCSR.vue";
|
||||
import edXX from "./echarts_education/edXX.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";
|
||||
|
||||
const selectData = reactive({
|
||||
value1: '111',
|
||||
value2: 'tes1',
|
||||
options1: [{
|
||||
value: '111',
|
||||
label: '2023秋季检查',
|
||||
},
|
||||
{
|
||||
value: '222',
|
||||
label: '2024春季检查',
|
||||
},],
|
||||
options2: [{
|
||||
value: 'tes1',
|
||||
label: '中小学心理健康诊断测验(MHT）',
|
||||
},
|
||||
{
|
||||
value: 'tes2',
|
||||
label: '小学心理健康诊断测验',
|
||||
},
|
||||
{
|
||||
value: 'tes3',
|
||||
label: '中学心理健康诊断',
|
||||
},],
|
||||
value1: "111",
|
||||
value2: "tes1",
|
||||
options1: [
|
||||
{
|
||||
value: "111",
|
||||
label: "2023秋季检查",
|
||||
},
|
||||
{
|
||||
value: "222",
|
||||
label: "2024春季检查",
|
||||
},
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
value: "tes1",
|
||||
label: "中小学心理健康诊断测验(MHT）",
|
||||
},
|
||||
{
|
||||
value: "tes2",
|
||||
label: "小学心理健康诊断测验",
|
||||
},
|
||||
{
|
||||
value: "tes3",
|
||||
label: "中学心理健康诊断",
|
||||
},
|
||||
],
|
||||
list: [],
|
||||
})
|
||||
});
|
||||
var roseData1 = ref([
|
||||
{
|
||||
name: '正常',
|
||||
value: 17
|
||||
name: "正常",
|
||||
value: 17,
|
||||
},
|
||||
{
|
||||
name: '关注',
|
||||
value: 16
|
||||
name: "关注",
|
||||
value: 16,
|
||||
},
|
||||
{
|
||||
name: '追踪',
|
||||
value: 14
|
||||
name: "追踪",
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
value: 8
|
||||
name: "异常",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
name: '警戒',
|
||||
value: 8
|
||||
}
|
||||
name: "警戒",
|
||||
value: 8,
|
||||
},
|
||||
]);
|
||||
var roseData2 = ref([
|
||||
{
|
||||
name: '正常',
|
||||
value: 37
|
||||
name: "正常",
|
||||
value: 37,
|
||||
},
|
||||
{
|
||||
name: '关注',
|
||||
value: 26
|
||||
name: "关注",
|
||||
value: 26,
|
||||
},
|
||||
{
|
||||
name: '追踪',
|
||||
value: 24
|
||||
name: "追踪",
|
||||
value: 24,
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
value: 18
|
||||
name: "异常",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
name: '警戒',
|
||||
value: 18
|
||||
}
|
||||
name: "警戒",
|
||||
value: 18,
|
||||
},
|
||||
]);
|
||||
var roseData3 = ref([
|
||||
{
|
||||
name: '正常',
|
||||
value: 227
|
||||
name: "正常",
|
||||
value: 227,
|
||||
},
|
||||
{
|
||||
name: '关注',
|
||||
value: 169
|
||||
name: "关注",
|
||||
value: 169,
|
||||
},
|
||||
{
|
||||
name: '追踪',
|
||||
value: 114
|
||||
name: "追踪",
|
||||
value: 114,
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
value: 98
|
||||
name: "异常",
|
||||
value: 98,
|
||||
},
|
||||
{
|
||||
name: '警戒',
|
||||
value: 78
|
||||
}
|
||||
name: "警戒",
|
||||
value: 78,
|
||||
},
|
||||
]);
|
||||
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
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
onBeforeMount(() => {
|
||||
selectData.list = roseData1.value
|
||||
selectData.list = roseData1.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -338,6 +364,7 @@ onBeforeMount(() => {
|
|||
width: 582px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-image: url(@/assets/images/center_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -918,59 +945,65 @@ onBeforeMount(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
.funding {
|
||||
width: 520px;
|
||||
height: 34px;
|
||||
margin-top: 20px;
|
||||
// padding: 10px 0 14px 0;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/eduImg/jyImg17.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.fundingBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
span {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
// .fundings{
|
||||
// display: flex;
|
||||
// }
|
||||
}
|
||||
.rolling {
|
||||
height: 16vh;
|
||||
// height: calc(100% - 26px);
|
||||
overflow-y: auto;
|
||||
.fundingContent {
|
||||
.funding {
|
||||
width: 520px;
|
||||
height: 34px;
|
||||
margin-top: 20px;
|
||||
// padding: 10px 0 14px 0;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/eduImg/jyImg17.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 10px;
|
||||
width: 94%;
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/eduImg/jyImg16.png);
|
||||
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
span {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
};
|
||||
.rolling {
|
||||
width: 100%;
|
||||
height: 14vh;
|
||||
// height: calc(100% - 26px);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.fundingContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 10px;
|
||||
width: 92%;
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/eduImg/jyImg16.png);
|
||||
|
||||
span {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectLint {
|
||||
width: 94%;
|
||||
|
|
@ -980,7 +1013,7 @@ onBeforeMount(() => {
|
|||
|
||||
.selectBox {
|
||||
width: 48%;
|
||||
background-image: url(@/assets/eduImg/title3.png);
|
||||
background-image: url(@/assets/eduImg/jyImg7.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue