235 lines
6.6 KiB
Vue
235 lines
6.6 KiB
Vue
<script setup lang="ts">
|
||
import { ElMessage } from "element-plus";
|
||
import { useTimeStore, useDataStore } from "@/stores/index";
|
||
import { storeToRefs } from "pinia";
|
||
const timeStore = useTimeStore()
|
||
const { nowTitle } = storeToRefs(timeStore)
|
||
|
||
const dataStore = useDataStore()
|
||
const { bkPay, zkPay, zsbPay } = storeToRefs(dataStore)
|
||
const activeTab = ref(0);
|
||
const tabs = ref([
|
||
{ title: '本科', value: 0, dateList: ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"], numList: [1, 5, 2, 4, 9, 6] },
|
||
{ title: '专科', value: 0, dateList: ['1-6', '1-7', '1-8', '1-9', '1-10', "1-11"], numList: [4, 9, 6, 1, 5, 2] },
|
||
{ title: '专升本', value: 0, 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.value[index].dateList, tabs.value[index].numList)
|
||
};
|
||
|
||
const option = ref({});
|
||
|
||
// 这里拿不到pinia的值 因为子组件比父组件先渲染
|
||
// 暴露出去 让父组件调用 来赋值------待修改
|
||
const getData = () => {
|
||
// console.log('bkPay.value',bkPay.value);
|
||
let dateList = ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"]
|
||
let numList = [1, 5, 2, 4, 9, 6]
|
||
// tabs.value[0].dateList = bkPay.value?.statistics
|
||
// tabs.value[1].dateList = zkPay.value?.statistics
|
||
// tabs.value[2].dateList = zsbPay.value?.statistics
|
||
|
||
// tabs.value[0].numList = bkPay.value?.statistics
|
||
// tabs.value[1].numList = zkPay.value?.statistics
|
||
// tabs.value[2].numList = zsbPay.value?.statistics
|
||
|
||
setOption(dateList, numList)
|
||
};
|
||
const setOption = async (xData: any[], yData: any[]) => {
|
||
option.value = {
|
||
xAxis: {
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: false, // 不留白，从原点开始
|
||
splitLine: {
|
||
// show: false,
|
||
// lineStyle: {
|
||
// color: "rgba(31,99,163,.2)",
|
||
// },
|
||
},
|
||
axisLine: {
|
||
show: false, // 去除轴线
|
||
// lineStyle: {
|
||
// color: "rgba(31,99,163,.1)",
|
||
// },
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontWeight: "500",
|
||
},
|
||
axisPointer: {
|
||
type: 'line',
|
||
lineStyle: {
|
||
color: 'rgb(0, 148, 168)',
|
||
type: 'solid',
|
||
extraCssText: 'height:0;',
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
splitLine: {
|
||
show: false, // 去除网格线
|
||
lineStyle: {
|
||
color: "rgba(31,99,163,.2)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "rgba(31,99,163,.1)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#fff", // 轴标文字颜色
|
||
fontWeight: "500",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(0,0,0,.6)",
|
||
borderColor: "rgba(147, 235, 248, .8)",
|
||
textStyle: {
|
||
color: "#FFF",
|
||
},
|
||
},
|
||
grid: {
|
||
//布局
|
||
show: false,
|
||
left: "10px",
|
||
right: "30px",
|
||
bottom: "10px",
|
||
top: "30px",
|
||
containLabel: true,
|
||
// borderColor: "#1F63A3",
|
||
},
|
||
series: [
|
||
{
|
||
data: yData,
|
||
type: "line",
|
||
smooth: false,
|
||
symbol: "circle", // 拐点样式 -- 这里是个圆
|
||
symbolSize: 7, // 拐点大小
|
||
name: "当日缴费人数",
|
||
// color: "rgba(9,202,243,.7)",
|
||
color: '#fff',
|
||
markPoint: {
|
||
data: [
|
||
{
|
||
name: "最大值",
|
||
type: "max",
|
||
valueDim: "y",
|
||
symbol: "circle",
|
||
symbolSize: [60, 26],
|
||
symbolOffset: [0, -20],
|
||
itemStyle: {
|
||
color: "rgba(0,0,0,0)",
|
||
},
|
||
label: {
|
||
color: "#09CAF3",
|
||
fontSize: '16',
|
||
// backgroundColor: "rgba(9,202,243,0.1)",
|
||
// borderRadius: 6,
|
||
// borderColor: "rgba(9,202,243,.5)",
|
||
// padding: [7, 14],
|
||
// formatter: "报警2：{c}",
|
||
// borderWidth: 0.5,
|
||
},
|
||
},
|
||
{
|
||
name: "最大值",
|
||
type: "max",
|
||
valueDim: "y",
|
||
symbol: "circle",
|
||
symbolSize: 6,
|
||
itemStyle: {
|
||
color: "#09CAF3",
|
||
shadowColor: "#09CAF3",
|
||
shadowBlur: 8,
|
||
},
|
||
label: {
|
||
formatter: "",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
lineStyle: {
|
||
width: 4, // 线条宽度
|
||
color: {
|
||
type: 'linear', // 线性渐变
|
||
x: 0, // 渐变方向为从左到右
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1, // 渐变方向也可以设置为从下到上，调整 x2 和 y2 的值
|
||
colorStops: [
|
||
// { offset: 0, color: 'rgba(0, 254, 157, 1)' }, // 0% 处的颜色
|
||
{ offset: 0, color: 'rgba(2, 221, 241, 1)' }, // 50% 处的颜色
|
||
{ offset: 1, color: 'rgba(0, 254, 157, 1)' } // 100% 处的颜色 -- 顶点处颜色
|
||
],
|
||
global: false // 缺省为 false
|
||
},
|
||
},
|
||
}
|
||
],
|
||
};
|
||
};
|
||
|
||
defineExpose({getData})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="tabs">
|
||
<div class="no-tab">
|
||
<p>{{ nowTitle }}缴费总人数</p>
|
||
<p> {{ bkPay?.todayPayDto?.payNum }} </p>
|
||
</div>
|
||
<div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
|
||
<p>{{ tab.title }}</p>
|
||
<p v-if="index == 0">{{ bkPay?.todayPayDto?.bkPayNum }}</p>
|
||
<p v-if="index == 1">{{ bkPay?.todayPayDto?.zkPayNum }}</p>
|
||
<p v-if="index == 2">{{ bkPay?.todayPayDto?.zsbPayNum }}</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">
|
||
.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);
|
||
box-shadow: 0px -10px 5px rgba(145, 175, 207, 0.2);
|
||
}
|
||
|
||
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;
|
||
box-shadow: 0px -10px 5px rgba(0, 162, 255, 0.2);
|
||
|
||
}
|
||
|
||
.no-tab {
|
||
width: 160px;
|
||
height: 80px;
|
||
cursor: default;
|
||
}
|
||
}
|
||
|
||
.chart {
|
||
height: 250px;
|
||
}
|
||
</style>
|