取消自动滚动，加上缴费人数选择变化
This commit is contained in:
张宁
parent
d45f9a9d18
commit
c8055a3402
|
|
@ -762,17 +762,17 @@ onMounted(() => {
|
|||
<div class="title-item">专科</div>
|
||||
<div class="title-item">专升本</div>
|
||||
</div>
|
||||
<div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
|
||||
<component :is="comName" :list="state.list" v-model="state.scroll"
|
||||
<div class="right_bottom_wrap" :class="{ 'overflow-y-auto': true }">
|
||||
<!-- <component :is="comName" :list="state.list" v-model="state.scroll"
|
||||
:singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
|
||||
:limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
|
||||
:singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel">
|
||||
:singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
|
||||
<div class="table-row" v-for="(item, i) in state.list">
|
||||
<div class="row-item">{{ i + 1 }}</div>
|
||||
<div class="row-item">{{ item.provinceName }}</div>
|
||||
<div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
|
||||
</div>
|
||||
</component>
|
||||
<!-- </component> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -827,4 +827,7 @@ onMounted(() => {
|
|||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
const activeTab = ref(0);
|
||||
const tabs = [
|
||||
{ title: '本科', value: 3900 ,dateList : ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"],numList: [1, 5, 2, 4, 9, 6]},
|
||||
{ title: '专科', value: 4500 ,dateList : ['1-6', '1-7', '1-8', '1-9', '1-10', "1-11"],numList: [4, 9, 6,1, 5, 2]},
|
||||
{ title: '专升本', value: 6000 ,dateList : ['2-6', '2-7', '2-8', '2-9', '2-10', "2-11"],numList: [1, 6,5, 2, 4, 9,]},
|
||||
];
|
||||
|
||||
const changeTab = (index: number) => {
|
||||
activeTab.value = index;
|
||||
setOption(tabs[index].dateList,tabs[index].numList)
|
||||
};
|
||||
|
||||
const option = ref({});
|
||||
const getData = () => {
|
||||
let dateList = ['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', "2022-04"]
|
||||
let dateList = ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"]
|
||||
let numList = [1, 5, 2, 4, 9, 6]
|
||||
let numList2 = [6, 5, 4, 3, 2, 1]
|
||||
setOption(dateList, numList, numList2)
|
||||
setOption(dateList, numList)
|
||||
};
|
||||
const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
|
||||
const setOption = async (xData: any[], yData: any[]) => {
|
||||
option.value = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
|
|
@ -64,7 +74,7 @@ const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
|
|||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "0px",
|
||||
top: "100px",
|
||||
top: "30px",
|
||||
containLabel: true,
|
||||
// borderColor: "#1F63A3",
|
||||
},
|
||||
|
|
@ -74,10 +84,10 @@ const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
|
|||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle", // 拐点样式 -- 这里是个圆
|
||||
symbolSize:7, // 拐点大小
|
||||
symbolSize: 7, // 拐点大小
|
||||
name: "当日缴费人数",
|
||||
// color: "rgba(9,202,243,.7)",
|
||||
color:'#fff',
|
||||
color: '#fff',
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
|
|
@ -97,7 +107,7 @@ const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
|
|||
borderRadius: 6,
|
||||
borderColor: "rgba(9,202,243,.5)",
|
||||
padding: [7, 14],
|
||||
formatter: "报警2：{c}",
|
||||
// formatter: "报警2：{c}",
|
||||
borderWidth: 0.5,
|
||||
},
|
||||
},
|
||||
|
|
@ -145,7 +155,50 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tabs">
|
||||
<div class="no-tab">
|
||||
<p>当日缴费总人数</p>
|
||||
<p> 12,000 </p>
|
||||
</div>
|
||||
<div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
|
||||
<p>{{ tab.title }}</p>
|
||||
<p>{{ tab.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tab-content"> -->
|
||||
<!-- <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index"> -->
|
||||
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: 80px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(145, 175, 207, 0.4) 100%);
|
||||
border-top: 2px solid rgb(152, 194, 221);
|
||||
}
|
||||
|
||||
div.active {
|
||||
// background-color: #ccc;
|
||||
background: linear-gradient(0deg, rgba(145, 175, 207, 0.1) 10%, rgba(0, 155, 228, 0.6) 100%);
|
||||
border-top: 2px solid #00A2FF;
|
||||
}
|
||||
|
||||
.no-tab {
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -188,20 +188,21 @@ onMounted(() => {
|
|||
<div class="title-item">总人数</div>
|
||||
<div class="title-item">报到率</div>
|
||||
</div>
|
||||
<div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
|
||||
<component :is="comName" :list="state.list" v-model="state.scroll"
|
||||
<!-- <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }"> -->
|
||||
<div class="right_bottom_wrap" :class="{ 'overflow-y-auto': true }">
|
||||
<!-- <component :is="comName" :list="state.list" v-model="state.scroll"
|
||||
:singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
|
||||
:limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
|
||||
:singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel">
|
||||
:singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
|
||||
<div class="table-row" v-for="(item, i) in state.list">
|
||||
<div class="row-item">{{ i + 1 }}</div>
|
||||
<div class="row-item">{{ item.collegeName }}</div>
|
||||
<div class="row-item" :title=item.collegeName >{{ item.collegeName }}</div>
|
||||
<div class="row-item">{{ item.reportNumber }}</div>
|
||||
<div class="row-item">{{ item.totalNumber }}</div>
|
||||
<div class="row-item">{{ '0%' }}</div>
|
||||
<!-- <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div> -->
|
||||
</div>
|
||||
</component>
|
||||
<!-- </component> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -257,4 +258,7 @@ onMounted(() => {
|
|||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue