初始化
This commit is contained in:
JiXinHui
parent
7be2f50d9a
commit
536ee3d7e6
|
|
@ -3,9 +3,9 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/screen.ico" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>迎新系统数据大屏</title>
|
||||
<title>AI校园助手数据统计平台</title>
|
||||
<script type="module" src="/public/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
|
|
@ -9,6 +9,7 @@ const indexUrl= {
|
|||
'rightTop':"/bigscreen/alarmNum", //报警次数
|
||||
'rightBottom':'/bigscreen/rightBottom',//右下
|
||||
'rightCenter':'/bigscreen/ranking',// 报警排名
|
||||
'consultationTrend':'/bigscreen/consultationTrend',// 咨询人数趋势图
|
||||
}
|
||||
|
||||
export default indexUrl
|
||||
|
|
@ -52,3 +53,7 @@ export const ranking=(param:any={})=>{
|
|||
export const rightBottom=(param:any={})=>{
|
||||
return GET(indexUrl.rightBottom,param)
|
||||
}
|
||||
|
||||
export const consultationTrend=(param:any={})=>{
|
||||
return GET(indexUrl.consultationTrend,param)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 413 B |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import BorderBox13 from "@/components/datav/border-box-13";
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 标题
|
||||
|
|
@ -12,59 +11,62 @@ const props = withDefaults(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<BorderBox13>
|
||||
<div class="item_wrap">
|
||||
<div class="item_title" v-if="title !== ''">
|
||||
<div class="zuo"></div>
|
||||
<span class="title-inner"> {{ title }} </span>
|
||||
<div class="you"></div>
|
||||
<img class="title-bg" src="@/assets/img/zheke/title-bg.png" alt="">
|
||||
<img class="title-line" src="@/assets/img/zheke/title-line.png" alt="">
|
||||
<div class="title-inner">{{ title }}</div>
|
||||
</div>
|
||||
<div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
|
||||
>
|
||||
<slot></slot></div
|
||||
></BorderBox13>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$item-title-height: 38px;
|
||||
$item_title_content-height: calc(100% - 38px);
|
||||
$item-title-height: 33px;
|
||||
$item_title_content-height: calc(100% - 33px);
|
||||
|
||||
.item_wrap {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.item_title {
|
||||
height: $item-title-height;
|
||||
line-height: $item-title-height;
|
||||
width: 100%;
|
||||
color: #31abe3;
|
||||
text-align: center;
|
||||
// background: linear-gradient(to right, transparent, #0f0756, transparent);
|
||||
color: #333;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 41px;
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
.zuo,
|
||||
.you {
|
||||
width: 58px;
|
||||
height: 14px;
|
||||
background-image: url("@/assets/img/titles/zuo.png");
|
||||
}
|
||||
|
||||
.you {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.title-inner {
|
||||
font-weight: 900;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(
|
||||
92deg,
|
||||
#0072ff 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 600;
|
||||
color: #393D44;
|
||||
}
|
||||
}
|
||||
|
||||
.title-bg {
|
||||
height: 33px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
:deep(.dv-border-box-content) {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 16px 0px;
|
||||
|
|
@ -72,10 +74,12 @@ $item_title_content-height: calc(100% - 38px);
|
|||
|
||||
.item_title_content {
|
||||
height: $item_title_content-height;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.item_title_content_def {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
import zkItem from "./zk-item.vue"
|
||||
export default zkItem
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 标题
|
||||
title: number | string;
|
||||
}>(),
|
||||
{
|
||||
title: "",
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="item_wrap">
|
||||
<div class="item_title" v-if="title !== ''">
|
||||
<q-svg width="35" height="35" name="titleIcon" />
|
||||
<span class="title-inner"> {{ title }} </span>
|
||||
</div>
|
||||
<div class="title-hr" v-if="title !== ''"></div>
|
||||
|
||||
<div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$item-title-height: 38px;
|
||||
$item_title_content-height: calc(100% - 38px);
|
||||
|
||||
.item_wrap {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item_title {
|
||||
height: $item-title-height;
|
||||
line-height: $item-title-height;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-inner {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 26px;
|
||||
color: #F7F9FE;
|
||||
text-shadow: 2px 3px 0px rgba(28, 28, 26, 0.27);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.title-hr {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: repeating-linear-gradient(90deg, #2C3E50 2%, #68C6DE 10%, #2C3E50 40%, #11181f 80%, #11181f 100%);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:deep(.dv-border-box-content) {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 16px 0px;
|
||||
}
|
||||
|
||||
.item_title_content {
|
||||
height: $item_title_content-height;
|
||||
}
|
||||
|
||||
.item_title_content_def {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,9 +8,9 @@ import '@/assets/css/main.scss'
|
|||
import '@/assets/css/tailwind.css'
|
||||
|
||||
import {registerEcharts} from "@/plugins/echarts"
|
||||
//不使用mock 请注释掉
|
||||
// import { mockXHR } from "@/mock/index";
|
||||
// mockXHR()
|
||||
|
||||
import { mockXHR } from "@/mock/index";
|
||||
mockXHR()
|
||||
|
||||
const app = createApp(App)
|
||||
registerEcharts(app)
|
||||
|
|
|
|||
|
|
@ -218,6 +218,24 @@ export default [
|
|||
return a
|
||||
}
|
||||
}
|
||||
},
|
||||
// 添加咨询人数趋势图接口
|
||||
{
|
||||
url: "/bigscreen/consultationTrend",
|
||||
type: "get",
|
||||
response: () => {
|
||||
const dateList = ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'];
|
||||
// 生成趋势数据，符合图中的走势
|
||||
const valueList = [150, 300, 580, 680, 900, 800, 300];
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
dateList,
|
||||
valueList
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ const wrapperStyle = {};
|
|||
<RouterView />
|
||||
<MessageContent />
|
||||
</div>
|
||||
<div class="title_bg"></div>
|
||||
</scale-screen>
|
||||
<Setting />
|
||||
</template>
|
||||
|
|
@ -33,19 +32,9 @@ const wrapperStyle = {};
|
|||
.content_wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px 16px 16px 16px;
|
||||
box-sizing: border-box;
|
||||
background-image: url("@/assets/img/zheke/bg.png");
|
||||
background-image: url("@/assets/img/zheke/pagebg.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
.title_bg{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
top:0;
|
||||
background-image: url("@/assets/img/zheke/top_title_bg.png");
|
||||
background-size: cover;
|
||||
background-position: center left;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,233 +1,90 @@
|
|||
<script setup lang="ts">
|
||||
import { AdminPCIndex, WeekPay } from "@/api";
|
||||
import { useTimeStore } from "@/stores/index";
|
||||
const timeStore = useTimeStore();
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
import { reactive } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import type { DateDataType } from "./index.d";
|
||||
|
||||
// 获取整体数据
|
||||
const getAdminPCIndex = (params: any) => {
|
||||
AdminPCIndex(params).then((res: any) => {
|
||||
dataStore.setData(res.data);
|
||||
})
|
||||
const dateData = reactive<DateDataType>({
|
||||
dateDay: "",
|
||||
dateYear: "",
|
||||
dateWeek: "",
|
||||
timing:null
|
||||
});
|
||||
|
||||
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||||
const timeFn = () => {
|
||||
dateData.timing = setInterval(() => {
|
||||
dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm ");
|
||||
dateData.dateWeek = weekday[dayjs().day()];
|
||||
}, 1000);
|
||||
};
|
||||
// 获取缴费人数
|
||||
// 缴费人数-- 本科 专科 专升本
|
||||
/*
|
||||
缴费人数---根据学历层次EducationalLevel 获取
|
||||
*/
|
||||
/* const payData = () => {
|
||||
let params: any = [{
|
||||
"EducationalLevel": 3,
|
||||
"Year": myDate.value.year || void 0,
|
||||
"Month": myDate.value.month || void 0,
|
||||
"Day": myDate.value.day || void 0,
|
||||
}, {
|
||||
"EducationalLevel": 4,
|
||||
"Year": myDate.value.year || void 0,
|
||||
"Month": myDate.value.month || void 0,
|
||||
"Day": myDate.value.day || void 0,
|
||||
}, {
|
||||
"EducationalLevel": 6,
|
||||
"Year": myDate.value.year || void 0,
|
||||
"Month": myDate.value.month || void 0,
|
||||
"Day": myDate.value.day || void 0,
|
||||
}]
|
||||
for (let item of params) {
|
||||
WeekPay(item).then((res: any) => {
|
||||
switch (item.EducationalLevel) {
|
||||
case 3:
|
||||
dataStore.setBkPay(res.data);
|
||||
case 4:
|
||||
dataStore.setZkPay(res.data);
|
||||
case 6:
|
||||
dataStore.setZsbPay(res.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
} */
|
||||
/*
|
||||
缴费人数---根据批次去区分
|
||||
*/
|
||||
const payData = () => {
|
||||
let params: any = {
|
||||
"CandidateCategory":0,
|
||||
// "EducationalLevel": 3,
|
||||
"Year": myDate.value.year || void 0,
|
||||
"Month": myDate.value.month || void 0,
|
||||
"Day": myDate.value.day || void 0,
|
||||
}
|
||||
WeekPay(params).then((res: any) => {
|
||||
const bk = res.data.batchTodayPays?.find((item:any) => item.name === "统招本科");
|
||||
const zk = res.data.batchTodayPays?.find((item:any) => item.name === "统招专科");
|
||||
const zsb = res.data.batchTodayPays?.find((item:any) => item.name === "统招专升本");
|
||||
dataStore.setBkPay(bk)
|
||||
dataStore.setZkPay(zk)
|
||||
dataStore.setZsbPay(zsb)
|
||||
dataStore.setTotalPay(res.data?.payNum)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// const returnHome = () => {
|
||||
// history.go(-1)
|
||||
// };
|
||||
const currentDate = new Date()
|
||||
// 当前选择的日期
|
||||
const myDate = ref({
|
||||
year: currentDate.getFullYear(),
|
||||
month: currentDate.getMonth() + 1,
|
||||
day: currentDate.getDate(),
|
||||
})
|
||||
// 获取选择的日期（年 || 月 ||日）
|
||||
const getDate = (val: any) => {
|
||||
myDate.value = val
|
||||
// 根据年、月、日的切换，展示不同的标题 --- 具体问问产品怎么展示 -----待修改
|
||||
timeStore.setYears(val.year)
|
||||
timeStore.setMounths(val.month)
|
||||
timeStore.setDays(val.day)
|
||||
let params = {
|
||||
"CandidateCategory":0,
|
||||
"Year": val.year || void 0,
|
||||
"Month": val.month || void 0,
|
||||
"Day": val.day || void 0,
|
||||
}
|
||||
getAdminPCIndex(params)
|
||||
payData()
|
||||
}
|
||||
const dateTitle = computed(() => {
|
||||
let { year, month, day } = myDate.value
|
||||
return formatDate(year, month, day)
|
||||
})
|
||||
/**
|
||||
* @description: 将日期返回成中文格式
|
||||
* @param {*} year
|
||||
* @param {*} month
|
||||
* @param {*} day
|
||||
* @return {*}
|
||||
*/
|
||||
function formatDate(year: number, month: number, day: number) {
|
||||
let dateStr = `${year}年`;
|
||||
if (month !== 0) {
|
||||
dateStr += `${month}月`;
|
||||
}
|
||||
if (day !== 0) {
|
||||
dateStr += `${day}日`;
|
||||
}
|
||||
return dateStr;
|
||||
}
|
||||
timeFn();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex">
|
||||
<div class="top-left">
|
||||
<div class="title_wrap">
|
||||
<div class="mr-5 logo">
|
||||
<img src="@/assets/img/zheke/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="title-text">新生报到情况</span>
|
||||
<!-- <span style="color: yellow;" @click="returnHome()">返回</span> -->
|
||||
</div>
|
||||
<div class="en-title">
|
||||
<div class="en-line"></div>
|
||||
<span>New student registration status</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="change-time">
|
||||
<div class="change-year">
|
||||
<DatePicker @getOption="getDate" :myDate="myDate"></DatePicker>
|
||||
</div>
|
||||
<div class="time-title">选择日期：{{ dateTitle }}</div>
|
||||
|
||||
<!-- <div class="change-year">
|
||||
<Dropdown :options="yearOptions" title="切换年份" @getOption="getYear" ref="selectYear"></Dropdown>
|
||||
</div>
|
||||
<div class="change-year">
|
||||
<Dropdown :options="monthOptions" title="切换月份" @getOption="getMonth" ref="selectMonth"></Dropdown>
|
||||
</div>
|
||||
<div class="change-year" @click="selectNowdays">选择今日</div> -->
|
||||
<span class="title-text">AI校园助手数据统计平台</span>
|
||||
</div>
|
||||
<div class="ml-auto now-date">当前日期: {{ dateData.dateDay }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.d-flex {
|
||||
.title_wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 999;
|
||||
height: 60px;
|
||||
height: 80px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
}
|
||||
align-items: center;
|
||||
padding:0 20px 0 40px;
|
||||
|
||||
.timers {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.setting_icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
// position: relative;
|
||||
width: 300px;
|
||||
text-align: left;
|
||||
// color: transparent;
|
||||
height: 60px;
|
||||
line-height: 46px;
|
||||
position: relative;
|
||||
// width: 500px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
color: transparent;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
|
||||
.title-text {
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-size: 38px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 6px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4px;
|
||||
width: 100%;
|
||||
color: #ECEDEE;
|
||||
background: linear-gradient(92deg, #3e6aff 0%, #4d50dd 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.en-title {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ADC0DE;
|
||||
opacity: 0.2;
|
||||
// line-height: 40px;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
.en-line {
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background-color: #ADC0DE;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.change-time {
|
||||
// position: relative;
|
||||
// float: right;
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
.now-date {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
|
||||
.time-title {
|
||||
margin-right: 20px;
|
||||
height: 35px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.change-year {
|
||||
width: 125px;
|
||||
height: 35px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-image: url("@/assets/img/zheke/top_change.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,156 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, nextTick } from "vue";
|
||||
import { installationPlan } from "@/api";
|
||||
import { graphic } from "echarts/core";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const option = ref({});
|
||||
const getData = () => {
|
||||
return
|
||||
installationPlan()
|
||||
.then((res) => {
|
||||
console.log("中下--安装计划", res);
|
||||
if (res.success) {
|
||||
setOption(res.data);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err);
|
||||
});
|
||||
};
|
||||
const setOption = async (newData: any) => {
|
||||
option.value = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
// 添加单位
|
||||
var result = params[0].name + "<br>";
|
||||
params.forEach(function (item: any) {
|
||||
if (item.value) {
|
||||
if (item.seriesName == "安装率") {
|
||||
result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>";
|
||||
} else {
|
||||
result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
|
||||
}
|
||||
} else {
|
||||
result += item.marker + " " + item.seriesName + " : - </br>";
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["已安装", "计划安装", "安装率"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4",
|
||||
},
|
||||
top: "0",
|
||||
},
|
||||
grid: {
|
||||
left: "50px",
|
||||
right: "40px",
|
||||
bottom: "30px",
|
||||
top: "20px",
|
||||
},
|
||||
xAxis: {
|
||||
data: newData.category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4",
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
},
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value}% ",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "已安装",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#956FD4" },
|
||||
{ offset: 1, color: "#3EACE5" },
|
||||
]),
|
||||
},
|
||||
data: newData.barData,
|
||||
},
|
||||
{
|
||||
name: "计划安装",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
||||
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
||||
{ offset: 1, color: "rgba(156,107,211,0.2)" },
|
||||
]),
|
||||
},
|
||||
z: -12,
|
||||
data: newData.lineData,
|
||||
},
|
||||
{
|
||||
name: "安装率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "#F02FC2",
|
||||
},
|
||||
data: newData.rateData,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, nextTick } from "vue";
|
||||
import { centerMap, GETNOBASE } from "@/api";
|
||||
import { registerMap, getMap } from "echarts/core";
|
||||
import { optionHandle, regionCodes } from "./center.map";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import type { MapdataType } from "./center.map";
|
||||
|
||||
const option = ref({});
|
||||
const code = ref("china"); //china 代表中国 其他地市是行政编码
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
// 结束数值
|
||||
title: number | string;
|
||||
}>(),
|
||||
{
|
||||
title: "地图",
|
||||
}
|
||||
);
|
||||
|
||||
const dataSetHandle = async (regionCode: string, list: object[]) => {
|
||||
const geojson: any = await getGeojson(regionCode);
|
||||
let cityCenter: any = {};
|
||||
let mapData: MapdataType[] = [];
|
||||
//获取当前地图每块行政区中心点
|
||||
geojson.features.forEach((element: any) => {
|
||||
cityCenter[element.properties.name] = element.properties.centroid || element.properties.center;
|
||||
});
|
||||
//当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
|
||||
list.forEach((item: any) => {
|
||||
if (cityCenter[item.name]) {
|
||||
mapData.push({
|
||||
name: item.name,
|
||||
value: cityCenter[item.name].concat(item.value),
|
||||
});
|
||||
}
|
||||
});
|
||||
await nextTick();
|
||||
|
||||
option.value = optionHandle(regionCode, list, mapData);
|
||||
};
|
||||
|
||||
const getData = async (regionCode: string) => {
|
||||
return
|
||||
centerMap({ regionCode: regionCode })
|
||||
.then((res) => {
|
||||
console.log("中上--设备分布", res);
|
||||
if (res.success) {
|
||||
dataSetHandle(res.data.regionCode, res.data.dataList);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err);
|
||||
});
|
||||
};
|
||||
const getGeojson = (regionCode: string) => {
|
||||
return new Promise<boolean>(async (resolve) => {
|
||||
let mapjson = getMap(regionCode);
|
||||
if (mapjson) {
|
||||
mapjson = mapjson.geoJSON;
|
||||
resolve(mapjson);
|
||||
} else {
|
||||
mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data);
|
||||
code.value = regionCode;
|
||||
registerMap(regionCode, {
|
||||
geoJSON: mapjson as any,
|
||||
specialAreas: {},
|
||||
});
|
||||
resolve(mapjson);
|
||||
}
|
||||
});
|
||||
};
|
||||
getData(code.value);
|
||||
|
||||
const mapClick = (params: any) => {
|
||||
// console.log(params);
|
||||
let xzqData = regionCodes[params.name];
|
||||
if (xzqData) {
|
||||
getData(xzqData.adcode);
|
||||
} else {
|
||||
window["$message"].warning("暂无下级地市");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mapwrap">
|
||||
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
|
||||
<v-chart class="chart" :option="option" ref="centerMapRef" @click="mapClick"
|
||||
v-if="JSON.stringify(option) != '{}'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mapwrap {
|
||||
height: 780px;
|
||||
width: 100%;
|
||||
// padding: 0 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border: 1px solid #f00;
|
||||
|
||||
.quanguo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: -46px;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
border: 1px solid #00eded;
|
||||
border-radius: 10px;
|
||||
color: #00f7f6;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,399 +0,0 @@
|
|||
|
||||
|
||||
//mapData数据结构
|
||||
export interface MapdataType {
|
||||
name: string;
|
||||
value: [number, number, number]; //x,y,value 第一个x 第二个y 第三个value
|
||||
}
|
||||
export const optionHandle = (regionCode: string,
|
||||
list: object[],
|
||||
mapData: MapdataType[]) => {
|
||||
let top = 45;
|
||||
let zoom = ["china"].includes(regionCode) ? 1.05 : 1;
|
||||
return {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
seriesIndex:0,
|
||||
left: 20,
|
||||
bottom: 20,
|
||||
pieces: [
|
||||
{ gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 600, lte: 999, label: "600-999个" },
|
||||
{ gte: 200, lte: 599, label: "200-599个" },
|
||||
{ gte: 50, lte: 199, label: "49-199个" },
|
||||
{ gte: 10, lte: 49, label: "10-49个" },
|
||||
{ lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
// FFFFFF,EDF7FD,DBF0FA,C9E8F8,B7E1F6,A5D9F3,93D2F1,81CAEF,6FC2EC,5DBBEA,4AB3E8,38ACE5,26A4E3,1C9AD9,1A8DC7,
|
||||
// 1781B5,
|
||||
// 1573A2,136790,105A7E,0E4D6C,0C405A,093348,072636,051A24,020D12
|
||||
color: [
|
||||
// "#EDF7FD",
|
||||
"rgba(237,247,253,.8)",
|
||||
// "#B7E1F6",
|
||||
"rgba(183,225,246,.9)",
|
||||
// "#81CAEF",
|
||||
"rgba(129,202,239,.9)",
|
||||
// "#38ACE5",
|
||||
"rgba(56,172,229,.9)",
|
||||
// "#1781B5",
|
||||
"rgba(23,129,181,.9)",
|
||||
// "#105A7E",
|
||||
"rgba(16,90,126,0.9)"
|
||||
],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: regionCode,
|
||||
roam: false,
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
top: top,
|
||||
// aspectScale: 0.78,
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "MAP",
|
||||
type: "map",
|
||||
map: regionCode,
|
||||
// aspectScale: 0.78,
|
||||
data: list,
|
||||
// data: [1,100],
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
geoIndex: 1,
|
||||
top: top,
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params: any) {
|
||||
if (params.data) {
|
||||
return params.name + "：" + params.data["value"];
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: "#000",
|
||||
// position: [-10, 0],
|
||||
formatter: function (val: any) {
|
||||
// console.log(val)
|
||||
if (val.data !== undefined) {
|
||||
return val.name.slice(0, 2);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
rich: {},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
// areaColor: "rgba(56,155,183,.7)",
|
||||
areaColor:{
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(56,155,183, .8)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺为 false
|
||||
},
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, .3)",
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
data: mapData,
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
symbolSize: function (val: any) {
|
||||
return 4;
|
||||
// return val[2] / 50;
|
||||
},
|
||||
legendHoverLink: true,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
// period: 4,
|
||||
scale: 6,
|
||||
color: "rgba(255,255,255, 1)",
|
||||
brushType: "fill",
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params: any) {
|
||||
if (params.data) {
|
||||
return params.name + "：" + params.data["value"][2];
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: (param: any) => {
|
||||
return param.name.slice(0, 2);
|
||||
},
|
||||
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#fff",
|
||||
textShadowColor: "#000",
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#FFF",
|
||||
show: true,
|
||||
},
|
||||
// colorBy: "data",
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
borderColor: "rgba(2255,255,255,2)",
|
||||
borderWidth: 4,
|
||||
shadowColor: "#000",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
//动画效果
|
||||
// animationDuration: 1000,
|
||||
// animationEasing: 'linear',
|
||||
// animationDurationUpdate: 1000
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
export const regionCodes: any = {
|
||||
"中国": {
|
||||
"adcode": "100000",
|
||||
"level": "country",
|
||||
"name": "中华人民共和国"
|
||||
},
|
||||
"新疆维吾尔自治区": {
|
||||
"adcode": "650000",
|
||||
"level": "province",
|
||||
"name": "新疆维吾尔自治区"
|
||||
},
|
||||
"湖北省": {
|
||||
"adcode": "420000",
|
||||
"level": "province",
|
||||
"name": "湖北省"
|
||||
},
|
||||
"辽宁省": {
|
||||
"adcode": "210000",
|
||||
"level": "province",
|
||||
"name": "辽宁省"
|
||||
},
|
||||
"广东省": {
|
||||
"adcode": "440000",
|
||||
"level": "province",
|
||||
"name": "广东省"
|
||||
},
|
||||
"内蒙古自治区": {
|
||||
"adcode": "150000",
|
||||
"level": "province",
|
||||
"name": "内蒙古自治区"
|
||||
},
|
||||
"黑龙江省": {
|
||||
"adcode": "230000",
|
||||
"level": "province",
|
||||
"name": "黑龙江省"
|
||||
},
|
||||
"河南省": {
|
||||
"adcode": "410000",
|
||||
"level": "province",
|
||||
"name": "河南省"
|
||||
},
|
||||
"山东省": {
|
||||
"adcode": "370000",
|
||||
"level": "province",
|
||||
"name": "山东省"
|
||||
},
|
||||
"陕西省": {
|
||||
"adcode": "610000",
|
||||
"level": "province",
|
||||
"name": "陕西省"
|
||||
},
|
||||
"贵州省": {
|
||||
"adcode": "520000",
|
||||
"level": "province",
|
||||
"name": "贵州省"
|
||||
},
|
||||
"上海市": {
|
||||
"adcode": "310000",
|
||||
"level": "province",
|
||||
"name": "上海市"
|
||||
},
|
||||
"重庆市": {
|
||||
"adcode": "500000",
|
||||
"level": "province",
|
||||
"name": "重庆市"
|
||||
},
|
||||
"西藏自治区": {
|
||||
"adcode": "540000",
|
||||
"level": "province",
|
||||
"name": "西藏自治区"
|
||||
},
|
||||
"安徽省": {
|
||||
"adcode": "340000",
|
||||
"level": "province",
|
||||
"name": "安徽省"
|
||||
},
|
||||
"福建省": {
|
||||
"adcode": "350000",
|
||||
"level": "province",
|
||||
"name": "福建省"
|
||||
},
|
||||
"湖南省": {
|
||||
"adcode": "430000",
|
||||
"level": "province",
|
||||
"name": "湖南省"
|
||||
},
|
||||
"海南省": {
|
||||
"adcode": "460000",
|
||||
"level": "province",
|
||||
"name": "海南省"
|
||||
},
|
||||
"江苏省": {
|
||||
"adcode": "320000",
|
||||
"level": "province",
|
||||
"name": "江苏省"
|
||||
},
|
||||
"青海省": {
|
||||
"adcode": "630000",
|
||||
"level": "province",
|
||||
"name": "青海省"
|
||||
},
|
||||
"广西壮族自治区": {
|
||||
"adcode": "450000",
|
||||
"level": "province",
|
||||
"name": "广西壮族自治区"
|
||||
},
|
||||
"宁夏回族自治区": {
|
||||
"adcode": "640000",
|
||||
"level": "province",
|
||||
"name": "宁夏回族自治区"
|
||||
},
|
||||
"浙江省": {
|
||||
"adcode": "330000",
|
||||
"level": "province",
|
||||
"name": "浙江省"
|
||||
},
|
||||
"河北省": {
|
||||
"adcode": "130000",
|
||||
"level": "province",
|
||||
"name": "河北省"
|
||||
},
|
||||
"香港特别行政区": {
|
||||
"adcode": "810000",
|
||||
"level": "province",
|
||||
"name": "香港特别行政区"
|
||||
},
|
||||
"台湾省": {
|
||||
"adcode": "710000",
|
||||
"level": "province",
|
||||
"name": "台湾省"
|
||||
},
|
||||
"澳门特别行政区": {
|
||||
"adcode": "820000",
|
||||
"level": "province",
|
||||
"name": "澳门特别行政区"
|
||||
},
|
||||
"甘肃省": {
|
||||
"adcode": "620000",
|
||||
"level": "province",
|
||||
"name": "甘肃省"
|
||||
},
|
||||
"四川省": {
|
||||
"adcode": "510000",
|
||||
"level": "province",
|
||||
"name": "四川省"
|
||||
},
|
||||
"天津市": {
|
||||
"adcode": "120000",
|
||||
"level": "province",
|
||||
"name": "天津市"
|
||||
},
|
||||
"江西省": {
|
||||
"adcode": "360000",
|
||||
"level": "province",
|
||||
"name": "江西省"
|
||||
},
|
||||
"云南省": {
|
||||
"adcode": "530000",
|
||||
"level": "province",
|
||||
"name": "云南省"
|
||||
},
|
||||
"山西省": {
|
||||
"adcode": "140000",
|
||||
"level": "province",
|
||||
"name": "山西省"
|
||||
},
|
||||
"北京市": {
|
||||
"adcode": "110000",
|
||||
"level": "province",
|
||||
"name": "北京市"
|
||||
},
|
||||
"吉林省": {
|
||||
"adcode": "220000",
|
||||
"level": "province",
|
||||
"name": "吉林省"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import ItemWrap from "@/components/item-wrap";
|
||||
import zkItem from "@/components/zk-item";
|
||||
import LeftTop from "./left-top.vue";
|
||||
import LeftCenter from "./left-center.vue";
|
||||
import LeftBottom from "./left-bottom.vue";
|
||||
import CenterMap from "./center-map.vue";
|
||||
import CenterBottom from "./center-bottom.vue";
|
||||
import RightTop from "./right-top.vue";
|
||||
import RightCenter from "./right-center.vue";
|
||||
import RightBottom from "./right-bottom.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="index-box">
|
||||
<div class="contetn_left">
|
||||
<zkItem class="contetn_left-top contetn_lr-item" title="设备总览">
|
||||
<LeftTop />
|
||||
</zkItem>
|
||||
<ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
|
||||
<LeftCenter />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="设备提醒"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<LeftBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_center">
|
||||
<CenterMap class="contetn_center_top" title="全国地图" />
|
||||
</div>
|
||||
<div class="contetn_right">
|
||||
<zkItem class="contetn_left-bottom contetn_lr-item" title="报警次数">
|
||||
<RightTop />
|
||||
</zkItem>
|
||||
<zkItem
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="报警排名(TOP8)"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<RightCenter />
|
||||
</zkItem>
|
||||
<zkItem class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
|
||||
<RightBottom />
|
||||
</zkItem>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.index-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: calc(100% - 64px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
//左边 右边 结构一样
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
width: 540px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 16px;
|
||||
background-clip: padding-box, border-box;
|
||||
background-origin: padding-box, border-box;
|
||||
background-image: linear-gradient(to bottom, #003, #000), linear-gradient(0deg,rgba(43,74,158,0.18),#5999FC);
|
||||
}
|
||||
.contetn_center {
|
||||
flex: 1;
|
||||
// margin: 0 54px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
|
||||
.contetn_lr-item {
|
||||
height: 310px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { leftBottom } from "@/api";
|
||||
import SeamlessScroll from "@/components/seamless-scroll";
|
||||
import { computed, onMounted, reactive } from "vue";
|
||||
import { useSettingStore } from "@/stores";
|
||||
import { storeToRefs } from "pinia";
|
||||
import EmptyCom from "@/components/empty-com";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { defaultOption, indexConfig } = storeToRefs(settingStore);
|
||||
const state = reactive<any>({
|
||||
list: [],
|
||||
defaultOption: {
|
||||
...defaultOption.value,
|
||||
singleHeight: 256,
|
||||
limitScrollNum: 4,
|
||||
},
|
||||
scroll: true,
|
||||
});
|
||||
|
||||
const getData = () => {
|
||||
return
|
||||
leftBottom( { limitNum: 20 })
|
||||
.then((res) => {
|
||||
console.log("左下--设备提醒", res);
|
||||
if (res.success) {
|
||||
state.list = res.data.list;
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err);
|
||||
});
|
||||
};
|
||||
const addressHandle = (item: any) => {
|
||||
let name = item.provinceName;
|
||||
if (item.cityName) {
|
||||
name += "/" + item.cityName;
|
||||
if (item.countyName) {
|
||||
name += "/" + item.countyName;
|
||||
}
|
||||
}
|
||||
return name;
|
||||
};
|
||||
const comName = computed(() => {
|
||||
if (indexConfig.value.leftBottomSwiper) {
|
||||
return SeamlessScroll;
|
||||
} else {
|
||||
return EmptyCom;
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
|
||||
<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"
|
||||
>
|
||||
<ul class="left_boottom">
|
||||
<li class="left_boottom_item" v-for="(item, i) in state.list" :key="i">
|
||||
<span class="orderNum doudong">{{ i + 1 }}</span>
|
||||
<div class="inner_right">
|
||||
<div class="dibu"></div>
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels">设备ID：</span>
|
||||
<span class="text-content zhuyao doudong wangguan"> {{ item.gatewayno }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">时间：</span>
|
||||
<span class="text-content" style="font-size: 12px"> {{ item.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="types doudong"
|
||||
:class="{
|
||||
typeRed: item.onlineState == 0,
|
||||
typeGreen: item.onlineState == 1,
|
||||
}"
|
||||
>{{ item.onlineState == 1 ? "上线" : "下线" }}</span
|
||||
>
|
||||
|
||||
<div class="info addresswrap">
|
||||
<span class="labels">地址：</span>
|
||||
<span class="text-content ciyao" style="font-size: 12px"> {{ addressHandle(item) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.left_boottom_wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.doudong {
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.left_boottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left_boottom_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
.orderNum {
|
||||
margin: 0 16px 0 -20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.labels {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.zhuyao {
|
||||
color: $primary-color;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ciyao {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #e6a23c;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.inner_right {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 380px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.dibu {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 104%;
|
||||
background-image: url("@/assets/img/zuo_xuxian.png");
|
||||
bottom: -10px;
|
||||
left: -2%;
|
||||
background-size: cover;
|
||||
}
|
||||
.addresswrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.wangguan {
|
||||
color: #1890ff;
|
||||
font-weight: 900;
|
||||
font-size: 15px;
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
// color: rgba(211, 210, 210,.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
// @include text-overflow(1);
|
||||
}
|
||||
|
||||
.types {
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.typeRed {
|
||||
color: #fc1a1a;
|
||||
}
|
||||
|
||||
.typeGreen {
|
||||
color: #29fc29;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { graphic } from "echarts/core";
|
||||
import { countUserNum } from "@/api";
|
||||
import {ElMessage} from "element-plus"
|
||||
|
||||
let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
|
||||
const option = ref({});
|
||||
const state = reactive({
|
||||
lockNum: 0,
|
||||
offlineNum: 0,
|
||||
onlineNum: 0,
|
||||
alarmNum: 0,
|
||||
totalNum: 0,
|
||||
});
|
||||
const echartsGraphic = (colors: string[]) => {
|
||||
return new graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: colors[0] },
|
||||
{ offset: 1, color: colors[1] },
|
||||
]);
|
||||
};
|
||||
const getData = () => {
|
||||
return
|
||||
countUserNum().then((res) => {
|
||||
console.log("左中--用户总览",res);
|
||||
if (res.success) {
|
||||
state.lockNum = res.data.lockNum;
|
||||
state.offlineNum = res.data.offlineNum;
|
||||
state.onlineNum = res.data.onlineNum;
|
||||
state.totalNum = res.data.totalNum;
|
||||
state.alarmNum = res.data.alarmNum;
|
||||
setOption();
|
||||
}else{
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}).catch(err=>{
|
||||
ElMessage.error(err)
|
||||
});
|
||||
};
|
||||
getData();
|
||||
const setOption = () => {
|
||||
option.value = {
|
||||
title: {
|
||||
top: "center",
|
||||
left: "center",
|
||||
text: [`{value|${state.totalNum}}`, "{name|总数}"].join("\n"),
|
||||
textStyle: {
|
||||
rich: {
|
||||
value: {
|
||||
color: "#ffffff",
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
lineHeight: 20,
|
||||
padding:[4,0,4,0]
|
||||
},
|
||||
name: {
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "用户总览",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
// avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: "rgba(255,255,255,0)",
|
||||
borderWidth: 2,
|
||||
},
|
||||
color: colors,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
c: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
per: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: { show: true },
|
||||
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20, // 第一段线 长度
|
||||
length2: 36, // 第二段线 长度
|
||||
smooth: 0.2,
|
||||
lineStyle: {},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: state.onlineNum,
|
||||
name: "在线",
|
||||
itemStyle: {
|
||||
color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
|
||||
},
|
||||
},
|
||||
{
|
||||
value: state.offlineNum,
|
||||
name: "离线",
|
||||
itemStyle: {
|
||||
color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
|
||||
},
|
||||
},
|
||||
{
|
||||
value: state.lockNum,
|
||||
name: "锁定",
|
||||
itemStyle: {
|
||||
color: echartsGraphic(["#F48C02", "#FDDB7D"]),
|
||||
},
|
||||
},
|
||||
{
|
||||
value: state.alarmNum,
|
||||
name: "异常",
|
||||
itemStyle: {
|
||||
color: echartsGraphic(["#F4023C", "#FB6CB7"]),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-chart class="chart" :option="option" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { countDeviceNum } from "@/api";
|
||||
import CountUp from "@/components/count-up";
|
||||
import {ElMessage} from "element-plus"
|
||||
|
||||
const duration = ref(2);
|
||||
const state = reactive({
|
||||
alarmNum: 0,
|
||||
offlineNum: 0,
|
||||
onlineNum: 0,
|
||||
totalNum: 0,
|
||||
});
|
||||
|
||||
|
||||
const getData = () => {
|
||||
return
|
||||
countDeviceNum().then((res) => {
|
||||
console.log("左上--设备总览",res);
|
||||
if (res.success) {
|
||||
state.alarmNum = res.data.alarmNum;
|
||||
state.offlineNum = res.data.offlineNum;
|
||||
state.onlineNum = res.data.onlineNum;
|
||||
state.totalNum = res.data.totalNum;
|
||||
}else{
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}).catch(err=>{
|
||||
ElMessage.error(err)
|
||||
});;
|
||||
};
|
||||
getData();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="user_Overview flex">
|
||||
<li class="user_Overview-item" style="color: #00fdfa">
|
||||
<div class="user_Overview_nums allnum">
|
||||
<CountUp :endVal="state.totalNum" :duration="duration" />
|
||||
</div>
|
||||
<p>总设备数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #07f7a8">
|
||||
<div class="user_Overview_nums online">
|
||||
<CountUp :endVal="state.onlineNum" :duration="duration" />
|
||||
</div>
|
||||
<p>在线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #e3b337">
|
||||
<div class="user_Overview_nums offline">
|
||||
<CountUp :endVal="state.offlineNum" :duration="duration" />
|
||||
</div>
|
||||
<p>掉线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #f5023d">
|
||||
<div class="user_Overview_nums laramnum">
|
||||
<CountUp :endVal="state.alarmNum" :duration="duration" />
|
||||
</div>
|
||||
<p>告警次数</p>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.left-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.user_Overview {
|
||||
li {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user_Overview_nums {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 22px;
|
||||
margin: 50px auto 30px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.bgdonghua::before {
|
||||
animation: rotating 14s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.allnum {
|
||||
&::before {
|
||||
background-image: url("@/assets/img/left_top_lan.png");
|
||||
}
|
||||
}
|
||||
|
||||
.online {
|
||||
&::before {
|
||||
background-image: url("@/assets/img/left_top_lv.png");
|
||||
}
|
||||
}
|
||||
|
||||
.offline {
|
||||
&::before {
|
||||
background-image: url("@/assets/img/left_top_huang.png");
|
||||
}
|
||||
}
|
||||
|
||||
.laramnum {
|
||||
&::before {
|
||||
background-image: url("@/assets/img/left_top_hong.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,194 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { rightBottom } from "@/api";
|
||||
import SeamlessScroll from "@/components/seamless-scroll";
|
||||
import { computed, onMounted, reactive } from "vue";
|
||||
import { useSettingStore } from "@/stores";
|
||||
import { storeToRefs } from "pinia";
|
||||
import EmptyCom from "@/components/empty-com";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { defaultOption, indexConfig } = storeToRefs(settingStore);
|
||||
const state = reactive<any>({
|
||||
list: [],
|
||||
defaultOption: {
|
||||
...defaultOption.value,
|
||||
singleHeight: 252,
|
||||
limitScrollNum: 3,
|
||||
// step:3
|
||||
},
|
||||
scroll: true,
|
||||
});
|
||||
|
||||
const getData = () => {
|
||||
return
|
||||
rightBottom({ limitNum: 20 })
|
||||
.then((res) => {
|
||||
console.log("右下", res);
|
||||
if (res.success) {
|
||||
state.list = res.data.list;
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
const comName = computed(() => {
|
||||
if (indexConfig.value.rightBottomSwiper) {
|
||||
return SeamlessScroll;
|
||||
} else {
|
||||
return EmptyCom;
|
||||
}
|
||||
});
|
||||
function montionFilter(val: any) {
|
||||
// console.log(val);
|
||||
return val ? Number(val).toFixed(2) : "--";
|
||||
}
|
||||
const handleAddress = (item: any) => {
|
||||
return `${item.provinceName}/${item.cityName}/${item.countyName}`;
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
|
||||
<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"
|
||||
>
|
||||
<ul class="right_bottom">
|
||||
<li class="right_center_item" v-for="(item, i) in state.list" :key="i">
|
||||
<span class="orderNum">{{ i + 1 }}</span>
|
||||
<div class="inner_right">
|
||||
<div class="dibu"></div>
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels">设备ID：</span>
|
||||
<span class="text-content zhuyao"> {{ item.gatewayno }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">型号：</span>
|
||||
<span class="text-content"> {{ item.terminalno }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">告警值：</span>
|
||||
<span class="text-content warning"> {{ montionFilter(item.alertvalue) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels shrink-0"> 地址：</span>
|
||||
<span class="ciyao truncate" style="font-size: 12px; width: 220px" :title="handleAddress(item)">
|
||||
{{ handleAddress(item) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info time shrink-0">
|
||||
<span class="labels">时间：</span>
|
||||
<span class="text-content" style="font-size: 12px"> {{ item.createtime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels">报警内容：</span>
|
||||
<span class="text-content ciyao" :class="{ warning: item.alertdetail }">
|
||||
{{ item.alertdetail || "无" }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.right_center_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
.orderNum {
|
||||
margin: 0 20px 0 -20px;
|
||||
}
|
||||
|
||||
.inner_right {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 400px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
.dibu {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 104%;
|
||||
background-image: url("@/assets/img/zuo_xuxian.png");
|
||||
bottom: -12px;
|
||||
left: -2%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.labels {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.zhuyao {
|
||||
color: $primary-color;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ciyao {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #e6a23c;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_bottom_wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 252px;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import CapsuleChart from "@/components/datav/capsule-chart";
|
||||
import { ranking } from "@/api";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const config = ref({
|
||||
showValue: true,
|
||||
unit: "次",
|
||||
});
|
||||
const data = ref([]);
|
||||
const getData = () => {
|
||||
return
|
||||
ranking()
|
||||
.then((res) => {
|
||||
console.log("右中--报警排名", res);
|
||||
if (res.success) {
|
||||
data.value = res.data;
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err);
|
||||
});
|
||||
};
|
||||
getData();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="right_bottom">
|
||||
<CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right_bottom {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { alarmNum } from "@/api";
|
||||
import { graphic } from "echarts/core";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const option = ref({});
|
||||
const getData = () => {
|
||||
return
|
||||
alarmNum()
|
||||
.then((res) => {
|
||||
console.log("右上--报警次数 ", res);
|
||||
if (res.success) {
|
||||
setOption(res.data.dateList, res.data.numList, res.data.numList2);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err);
|
||||
});
|
||||
};
|
||||
const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
|
||||
option.value = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: false, // 不留白，从原点开始
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
// show:false,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: true,
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "32px",
|
||||
containLabel: true,
|
||||
borderColor: "#1F63A3",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警1次数",
|
||||
color: "rgba(252,144,16,.7)",
|
||||
areaStyle: {
|
||||
//右，下，左，上
|
||||
color: new graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(252,144,16,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(252,144,16,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#FC9010",
|
||||
backgroundColor: "rgba(252,144,16,0.1)",
|
||||
borderRadius: 6,
|
||||
padding: [7, 14],
|
||||
borderWidth: 0.5,
|
||||
borderColor: "rgba(252,144,16,.5)",
|
||||
formatter: "报警1：{c}",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: "#FC9010",
|
||||
shadowColor: "#FC9010",
|
||||
shadowBlur: 8,
|
||||
},
|
||||
label: {
|
||||
formatter: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
data: yData2,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警2次数",
|
||||
color: "rgba(9,202,243,.7)",
|
||||
areaStyle: {
|
||||
//右，下，左，上
|
||||
color: new graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(9,202,243,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(9,202,243,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#09CAF3",
|
||||
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: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="mapChart" style="width: 100%; height: 100%;display: flex;justify-content: center;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import chinaJson from "@/utils/china.json";
|
||||
import * as echarts from 'echarts';
|
||||
const myChart = ref()
|
||||
const getMapChart = (data) => {
|
||||
data.forEach((item) => {
|
||||
item.value = item?.num1 + item?.num2 + item?.num3
|
||||
})
|
||||
myChart.value = echarts.init(document.getElementById("mapChart"));
|
||||
// 注册默认全国地图的json，小写的china
|
||||
echarts.registerMap("china", chinaJson);
|
||||
let option = {
|
||||
myChart: null,
|
||||
mapName: "china",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
borderWidth: 0, //去掉白色边框
|
||||
backgroundColor: 'rgba(0, 0, 0, .5)', //tooltip背景色
|
||||
borderColor: '#2BEDF6', //tooltip边框颜色
|
||||
borderWidth: 0, //去掉白色边框
|
||||
formatter: function (params) { // 格式化函数，用于自定义 tooltip 的内容
|
||||
var html = '<div style="width:180px;background:rgba(0, 0, 0, .5); font-size: 20px;">';
|
||||
html += '<span style="display:block;width:100%;text-align:left;padding:10px 10px 5px 14px; color: #ffffff;border-bottom:1px solid #fff;">' + (params.name) + '</span>'; // 显示名称
|
||||
html += '<span style="margin:3px 0 0 0;padding:20px 0 5px 14px ;display:block;width:100%;color: rgba(255, 255, 255, 0.68);font-size: 16px;">' + '统招本科：' + (params.data?.num3 || 0) + '</span>'; // 显示人数
|
||||
html += '<span style="margin:0;padding:5px 0 5px 14px ;display:block;width:100%;padding-left:14px;color: rgba(255, 255, 255, 0.68);font-size: 16px;">' + '统招专科：' + (params.data?.num1 || 0) + '</span>'; // 显示人数
|
||||
// html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">'+'统招专升本：' + (params.data.num2 || 0) + '</span>'; // 显示人数
|
||||
// if (params.num2) {
|
||||
html += '<span style="margin:0;padding:5px 0 20px 14px;display:block;width:100%;color: rgba(255, 255, 255, 0.68);font-size: 16px;">' + '统招专升本：' + (params.data?.num2 || 0) + '</span>';
|
||||
// }
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 100000,
|
||||
left: 26,
|
||||
bottom: 0,
|
||||
showLabel: true,
|
||||
selectedMode: false,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
pieces: [{
|
||||
gte: 200,
|
||||
lte: 10000,
|
||||
label: ">200人",
|
||||
color: "#0145b3",
|
||||
|
||||
},
|
||||
{
|
||||
gte: 100,
|
||||
lte: 200,
|
||||
label: "100 - 200人",
|
||||
color: "#024fcc"
|
||||
},
|
||||
{
|
||||
gte: 80,
|
||||
lte: 100,
|
||||
label: "80 - 100人",
|
||||
color: "#0263ff"
|
||||
},
|
||||
{
|
||||
gte: 60,
|
||||
lte: 80,
|
||||
label: "60 - 80人",
|
||||
color: "#1b73ff"
|
||||
}, {
|
||||
gte: 40,
|
||||
lt: 60,
|
||||
label: "40 - 60人",
|
||||
color: "#4e92ff"
|
||||
}, {
|
||||
gte: 20,
|
||||
lt: 40,
|
||||
label: "20 - 40人",
|
||||
color: "#81b1ff"
|
||||
},{
|
||||
gte: 0,
|
||||
lt: 20,
|
||||
label: "0 - 20人",
|
||||
color: "#b3d0ff"
|
||||
}
|
||||
],
|
||||
show: true
|
||||
},
|
||||
geo: {
|
||||
map: "china",
|
||||
zoom: 1.25,
|
||||
roam: false, //放大缩小地图、可拖拽
|
||||
label: {
|
||||
normal: {
|
||||
show: true, //省份名展示
|
||||
fontSize: "12", //省份字体大小
|
||||
color: "#FFFFFF", //省份字体颜色
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "white", //鼠标移入省份字体颜色变化
|
||||
fontSize: "14px", //鼠标移入省份字体大小变化
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#aaaaaa", //地图边框颜色
|
||||
// areaColor: "#b4d9f7", //地图背景颜色
|
||||
areaColor: {
|
||||
type: 'linear-gradient',
|
||||
x: 0,
|
||||
y: 1000,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#b3d0ff', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#b3d0ff', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: true, // 缺省为 false
|
||||
},
|
||||
borderWidth: 1,
|
||||
emphasis: {
|
||||
show: true,
|
||||
areaColor: "#0063ff", //鼠标放到地图上显示的颜色
|
||||
borderColor: "#6beaf3",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 10,
|
||||
borderWidth: 2,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
//点击省份后背景颜色改变
|
||||
select: {
|
||||
itemStyle: {
|
||||
// color: "yellow",
|
||||
areaColor: "rgba(0, 0, 0, 0.5)", //点击省份后背景颜色改变
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
map: "中国",
|
||||
mapType: "china",
|
||||
geoIndex: 0, // 解决设置geo后地图重影问题
|
||||
zoom: 1.25,
|
||||
silent: false,
|
||||
selectedMode: false,
|
||||
itemStyle: {
|
||||
areaColor: 'white' // 这里使用了两个颜色值来表示渐变色
|
||||
},
|
||||
data: data,
|
||||
|
||||
// data:[
|
||||
// {name: '北京', value1: 10,value:5,value:6},
|
||||
// {name: '上海', value: 20},
|
||||
// {name: '广东', value: 30},
|
||||
// {name: '浙江', value: 40},
|
||||
// {name: '江苏', value: 50}
|
||||
// ]
|
||||
},
|
||||
{
|
||||
//绘制一个新地图
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zoom: 1.25,
|
||||
// center: [105.194115019531, 35.582111640625],
|
||||
z: -1,
|
||||
aspectScale: 0.75, //
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#0079bb',
|
||||
borderColor: '#0061f4',
|
||||
borderWidth: '2',
|
||||
shadowColor: '#33434f',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 20,
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
};
|
||||
option && myChart.value.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
// const resize = () => {
|
||||
// myChart.value.resize();
|
||||
// }
|
||||
onMounted(() => {
|
||||
// getMapChart();
|
||||
// window.addEventListener('resize', () => { resize(); getRem(1700, 100) })
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// window.removeEventListener('resize', () => { resize() })
|
||||
})
|
||||
defineExpose({
|
||||
getMapChart
|
||||
})
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useTimeStore } from "@/stores/index";
|
||||
const timeStore = useTimeStore();
|
||||
const { computDate } = storeToRefs(timeStore)
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const { today, forecastRate, totalRate,forecast } = storeToRefs(dataStore)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center-top">
|
||||
<div class="top-item-img">
|
||||
<div class="top-item-icon">
|
||||
<img src="@/assets/img/zheke/center_top0.png">
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title">{{ computDate }}迎新人数</div>
|
||||
<div class="top-item-content">{{ today.nowStuden ?? '0' }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="top-item-img">
|
||||
<div class="top-item-icon">
|
||||
<img src="@/assets/img/zheke/center_top1.png">
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title">{{ computDate }}预报到人数</div>
|
||||
<div class="top-item-content">{{ today.forecastStuden ?? '0' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="top-item-img">
|
||||
<div class="top-item-icon">
|
||||
<img src="@/assets/img/zheke/center_top2.png">
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title">{{ computDate }}预报到报到率</div>
|
||||
<div class="top-item-content"> {{ forecastRate ?? '0' }}% </div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- <div class="top-item-img">
|
||||
<div class="top-item-icon">
|
||||
<img src="@/assets/img/zheke/center_top2.png">
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title">预报到总人数报到率</div>
|
||||
<div class="top-item-content"> {{ totalRate ?? '0' }}% </div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
justify-content: center;
|
||||
|
||||
.top-item-img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.top-item-img:first-child{
|
||||
margin-right: 120px;
|
||||
|
||||
}
|
||||
|
||||
.top-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
|
||||
.top-item-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 32px;
|
||||
text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
|
||||
font-style: italic;
|
||||
// background: #3652AB;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, rgba(76, 127, 220, 0.64) 30%, rgba(0, 0, 0, 0.14) 100%);
|
||||
|
||||
}
|
||||
|
||||
.top-item-content {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(255, 255, 255, 0.94) 50%, rgba(182, 198, 229, 0.64) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,506 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { consultationTrend } from "@/api";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
// 初始值
|
||||
const value = ref(21452);
|
||||
|
||||
// 格式化数字，每三位添加一个逗号
|
||||
const formatNumber = (num: number): string => {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
};
|
||||
|
||||
// 格式化后的数字字符串
|
||||
const formattedValue = computed(() => formatNumber(value.value));
|
||||
|
||||
console.log(formattedValue, "SevenSegmentDisplay");
|
||||
|
||||
// 其他统计数据
|
||||
const studentCount = ref(61263);
|
||||
const consultCount = ref(21452);
|
||||
const formattedStudentCount = computed(() => formatNumber(studentCount.value));
|
||||
const formattedConsultCount = computed(() => formatNumber(consultCount.value));
|
||||
|
||||
// 筛选选项
|
||||
const consultTypeOptions = [
|
||||
{ value: 'all', label: '全部类型' },
|
||||
{ value: 'academic', label: '学业咨询' },
|
||||
{ value: 'career', label: '就业咨询' },
|
||||
{ value: 'personal', label: '个人发展' },
|
||||
{ value: 'other', label: '其他咨询' }
|
||||
];
|
||||
const selectedConsultType = ref(consultTypeOptions[0].value);
|
||||
|
||||
const timeRangeOptions = [
|
||||
{ value: '1week', label: '近一周' },
|
||||
{ value: '1month', label: '近一月' },
|
||||
{ value: '3months', label: '近三月' },
|
||||
{ value: 'halfyear', label: '近半年' },
|
||||
{ value: '1year', label: '近一年' }
|
||||
];
|
||||
const selectedTimeRange = ref(timeRangeOptions[0].value);
|
||||
|
||||
// 设置默认日期范围为最近一周
|
||||
const getDefaultDateRange = () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setDate(start.getDate() - 7); // 一周前
|
||||
return [start, end];
|
||||
};
|
||||
const dateRange = ref<[Date, Date]>(getDefaultDateRange() as [Date, Date]);
|
||||
|
||||
// 咨询人数趋势图
|
||||
const option = ref({});
|
||||
const getData = () => {
|
||||
// 可以添加筛选参数
|
||||
const params = {
|
||||
consultType: selectedConsultType.value,
|
||||
timeRange: selectedTimeRange.value,
|
||||
dateRange: dateRange.value
|
||||
};
|
||||
|
||||
consultationTrend().then((res)=> {
|
||||
if(res.success) {
|
||||
setOptions(res.data)
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 监听筛选条件变化
|
||||
const handleFilterChange = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
// 监听筛选条件变化
|
||||
watch(selectedConsultType, handleFilterChange);
|
||||
watch(selectedTimeRange, handleFilterChange);
|
||||
watch(dateRange, handleFilterChange);
|
||||
|
||||
const setOptions = async (newData:any) => {
|
||||
option.value = {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
backgroundColor: '#ffffff',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#4B96FF',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: '#F1F1F1',
|
||||
borderWidth: 1,
|
||||
padding: [8, 10],
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
},
|
||||
formatter: function(params: any) {
|
||||
const data = params[0];
|
||||
return `${data.name}<br/><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#4B96FF;margin-right:5px;"></span>${data.value}`;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: newData.dateList,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E0E0E0'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',
|
||||
formatter: function(value: string) {
|
||||
return value.replace('2023-', '');
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 900,
|
||||
min: 0,
|
||||
interval: 300,
|
||||
splitNumber: 3,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E0E0E0'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: newData.valueList,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
showSymbol: function(idx: number) {
|
||||
// 只在特定位置显示圆点，例如第三个点
|
||||
return idx === 2;
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
borderColor: '#4B96FF',
|
||||
borderWidth: 2
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#4B96FF',
|
||||
width: 3
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(75, 150, 255, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(75, 150, 255, 0.1)'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contetn_header">
|
||||
<!-- 今日咨询人数 -->
|
||||
<div class="header-item today-count">
|
||||
<div class="item-title">今日咨询人数</div>
|
||||
<!-- 使用格式化后的值 -->
|
||||
<div class="seven-segment-container">
|
||||
<div class="seven-segment-display">{{ formattedValue }}</div>
|
||||
</div>
|
||||
<div class="count-details">
|
||||
<div class="detail-item">
|
||||
<div class="icon-wrap student-icon">
|
||||
<img src="@/assets/img/zheke/zixun1.png" alt="学生人数" />
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<div class="detail-number">{{ formattedStudentCount }}</div>
|
||||
<div class="detail-label">学生用户总人数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="icon-wrap visitor-icon">
|
||||
<img src="@/assets/img/zheke/zixun2.png" alt="咨询人数" />
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<div class="detail-number">{{ formattedConsultCount }}</div>
|
||||
<div class="detail-label">咨询人数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI咨询数据统计 -->
|
||||
<div class="header-item ai-stats">
|
||||
<div class="item-title">AI咨询数据统计</div>
|
||||
<div class="stats-cards">
|
||||
<div class="stat-card blue-card">
|
||||
<div class="card-icon">
|
||||
<img src="@/assets/img/zheke/ai-stats1.png" alt="咨询次数">
|
||||
</div>
|
||||
<div class="card-label">咨询次数</div>
|
||||
<div class="card-value">12,452<span class="unit">次</span></div>
|
||||
</div>
|
||||
<div class="stat-card orange-card">
|
||||
<div class="card-icon">
|
||||
<img src="@/assets/img/zheke/ai-stats2.png" alt=" 平均对话次数">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">平均对话次数</div>
|
||||
<div class="card-value">12,452<span class="unit">次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card green-card">
|
||||
<div class="card-icon">
|
||||
<img src="@/assets/img/zheke/ai-stats3.png" alt="智能回复率">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-label">智能回复率</div>
|
||||
<div class="card-value">23.11<span class="unit">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 咨询人数趋势图 -->
|
||||
<div class="header-item trend-chart">
|
||||
<div class="chart-header">
|
||||
<div class="item-title">咨询人数趋势图</div>
|
||||
<div class="chart-filters">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="selectedConsultType" placeholder="咨询类型" size="small">
|
||||
<el-option
|
||||
v-for="item in consultTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="selectedTimeRange" placeholder="时间范围" size="small">
|
||||
<el-option
|
||||
v-for="item in timeRangeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'"></v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contetn_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
// padding: 15px;
|
||||
// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header-item {
|
||||
height: 100%;
|
||||
.item-title {
|
||||
font-family: DouyinSans;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #393d44;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日咨询人数
|
||||
.today-count {
|
||||
width: 25%;
|
||||
// border: 1px solid black;
|
||||
padding: 30px 40px;
|
||||
|
||||
.seven-segment-container {
|
||||
margin: 15px 0;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
.seven-segment-display {
|
||||
font-size: 100px;
|
||||
font-family: DS-Digital;
|
||||
font-weight: bold;
|
||||
color: #4d50dd;
|
||||
}
|
||||
}
|
||||
|
||||
.count-details {
|
||||
display: flex;
|
||||
// gap: 40px;
|
||||
|
||||
.detail-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-wrap {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14px;
|
||||
box-shadow: 0px 2px 6px 0px rgba(11, 13, 95, 0.24);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
.detail-number {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// AI咨询数据统计
|
||||
.ai-stats {
|
||||
width: 29%;
|
||||
padding: 30px 35px;
|
||||
|
||||
.stats-cards {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
|
||||
&.blue-card {
|
||||
background-image: url("@/assets/img/zheke/蓝色.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&.orange-card {
|
||||
background-image: url("@/assets/img/zheke/橙色.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&.green-card {
|
||||
background-image: url("@/assets/img/zheke/绿色.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom:14px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 咨询人数趋势图
|
||||
.trend-chart {
|
||||
flex: 1;
|
||||
padding: 30px 33px 0 35px;
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// margin-bottom: 15px;
|
||||
|
||||
.chart-filters {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
min-width: 120px;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: #f5f7fa;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.el-select .el-input) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor--daterange) {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 30px);
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,304 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import zkItem from "@/components/zk-item";
|
||||
import LeftTop from "./left-top.vue";
|
||||
import LeftCenter from "./left-center.vue";
|
||||
import LeftBottom from "./left-bottom.vue";
|
||||
import CenterMap from "./center-map.vue";
|
||||
import CenterTop from "./center-top.vue";
|
||||
import RightTop from "./right-top.vue";
|
||||
import RightCenter from "./right-center.vue";
|
||||
import RightBottom from "./right-bottom.vue";
|
||||
import RightTopTwo from "./right-top-two.vue";
|
||||
import RightBottomTwo from "./right-bottom-two.vue";
|
||||
import { useTimeStore } from "@/stores/index";
|
||||
import { storeToRefs } from "pinia";
|
||||
const timeStore = useTimeStore();
|
||||
|
||||
const { nowTitle, years, months, days,allDates } = storeToRefs(timeStore);
|
||||
|
||||
import { AdminPCIndex, WeekPay, StatisticsReportedRanking, GetBatch } from "@/api";
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const { allData, rankingDto, collageId, professionRank, batchData } = storeToRefs(dataStore)
|
||||
|
||||
const rightCenterRef: any = ref(null)
|
||||
|
||||
const mapRef: any = ref(null)
|
||||
const rbRef: any = ref(null)
|
||||
|
||||
const tableData = ref()
|
||||
const showRight = ref(true)
|
||||
const changeRight = () => {
|
||||
showRight.value = !showRight.value
|
||||
if (!showRight.value && rbtwoRef) {
|
||||
setTimeout(() => {
|
||||
rbtwoRef.value.getData(professionRank.value)
|
||||
|
||||
})
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @description: 处理map中的数据
|
||||
* @param {*} data
|
||||
* @return {*}
|
||||
*/
|
||||
const dealMapData = (data: any) => {
|
||||
tableData.value = data.provinceDto?.map((item: any) => {
|
||||
return {
|
||||
name: item.provinceName,
|
||||
// zk: item.degreesDto[0].paymentCompleted + item.degreesDto[0].nonPayment,
|
||||
// zsb:item.degreesDto[1].paymentCompleted+ '/'+(item.degreesDto[1].paymentCompleted+item.degreesDto[1].nonPayment),
|
||||
// bk: item.degreesDto[2].paymentCompleted + item.degreesDto[2].nonPayment,
|
||||
zk: findDegree(item.degreesDto, '统招专科').paymentCompleted + findDegree(item.degreesDto, '统招专科').nonPayment,
|
||||
zsb: findDegree(item.degreesDto, '统招专升本').paymentCompleted + findDegree(item.degreesDto, '统招专升本').nonPayment,
|
||||
bk: findDegree(item.degreesDto, '统招本科').paymentCompleted + findDegree(item.degreesDto, '统招本科').nonPayment,
|
||||
zkrate: divideAndFormat(findDegree(item.degreesDto, '统招专科').paymentCompleted, findDegree(item.degreesDto, '统招专科').paymentCompleted + findDegree(item.degreesDto, '统招专科').nonPayment),
|
||||
bkrate: divideAndFormat(findDegree(item.degreesDto, '统招本科').paymentCompleted, findDegree(item.degreesDto, '统招本科').paymentCompleted + findDegree(item.degreesDto, '统招本科').nonPayment),
|
||||
zbdrate: divideAndFormat(findDegree(item.degreesDto, '统招专科').paymentCompleted + findDegree(item.degreesDto, '统招本科').paymentCompleted, findDegree(item.degreesDto, '统招专科').paymentCompleted + findDegree(item.degreesDto, '统招专科').nonPayment + findDegree(item.degreesDto, '统招本科').paymentCompleted + findDegree(item.degreesDto, '统招本科').nonPayment),
|
||||
num1: findDegree(item.degreesDto, '统招专科')?.paymentCompleted,
|
||||
num2: findDegree(item.degreesDto, '统招专升本')?.paymentCompleted,
|
||||
num3: findDegree(item.degreesDto, '统招本科')?.paymentCompleted,
|
||||
reported: findDegree(item.degreesDto, '统招专科')?.paymentCompleted + findDegree(item.degreesDto, '统招专升本')?.paymentCompleted + findDegree(item.degreesDto, '统招本科')?.paymentCompleted,
|
||||
AdmissionNum: findDegree(item.degreesDto, '统招专科').paymentCompleted + findDegree(item.degreesDto, '统招专科').nonPayment + findDegree(item.degreesDto, '统招本科').paymentCompleted + findDegree(item.degreesDto, '统招本科').nonPayment
|
||||
}
|
||||
})
|
||||
tableData.value?.sort((a: any, b: any) => {
|
||||
return b.reported - a.reported
|
||||
})
|
||||
tableData.value?.forEach((item: any, index: any) => {
|
||||
item.sort = index + 1
|
||||
item.sort = item.sort < 10 ? "0" + item.sort : item.sort;
|
||||
if (item.zbdrate == '0.0%') {
|
||||
item.zbdrate = '0%'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const divideAndFormat = (divisor: any, dividend: any) => {
|
||||
if (dividend === 0) {
|
||||
return "0.0%";
|
||||
}
|
||||
|
||||
let result = (divisor / dividend) * 100;
|
||||
return result.toFixed(1) + "%";
|
||||
}
|
||||
const findDegree = (degreesDto: any, degree: string) => {
|
||||
return degreesDto.find(d => d.degreesName === degree)
|
||||
|
||||
}
|
||||
|
||||
|
||||
const rbtwoRef: any = ref(null)
|
||||
const getProfession = () => {
|
||||
let params = {
|
||||
"Id": collageId.value,
|
||||
"Year": years.value,
|
||||
"Month": months.value || null,
|
||||
"Day": days.value || null
|
||||
}
|
||||
StatisticsReportedRanking(params).then(res => {
|
||||
dataStore.setProfessionRank(res.data)
|
||||
setTimeout(() => {
|
||||
if (!showRight.value && rbtwoRef) {
|
||||
rbtwoRef.value.getData(professionRank.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
watch(collageId, () => {
|
||||
getProfession()
|
||||
|
||||
})
|
||||
|
||||
/**
|
||||
* @description: 获取页面数据
|
||||
* @return {*}
|
||||
*/
|
||||
const getAdminPCIndex = () => {
|
||||
let params = {
|
||||
"CandidateCategory": 0,
|
||||
"Year": years.value,
|
||||
"Month": months.value || null,
|
||||
"Day": days.value || null
|
||||
}
|
||||
AdminPCIndex(params).then((res: any) => {
|
||||
dataStore.setData(res.data);
|
||||
dataStore.setCollageId(res.data.rankingDto[0].collegeId)
|
||||
dealMapData(res.data)
|
||||
setTimeout(() => {
|
||||
if (mapRef) {
|
||||
mapRef.value.getMapChart(tableData.value)
|
||||
}
|
||||
if (rbRef) {
|
||||
rbRef.value.rankProvince(tableData.value)
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
watch(allDates,()=>{
|
||||
console.log('allDates',allDates.value);
|
||||
payData()
|
||||
getAdminPCIndex()
|
||||
},{
|
||||
deep: true
|
||||
})
|
||||
|
||||
/* watch(years,()=>{
|
||||
// console.log('years.value',years.value);
|
||||
payData()
|
||||
getAdminPCIndex()
|
||||
})
|
||||
watch(months,()=>{
|
||||
// console.log('months.value',months.value);
|
||||
payData()
|
||||
getAdminPCIndex()
|
||||
|
||||
})
|
||||
watch(days,()=>{
|
||||
// console.log('days.value',days.value);
|
||||
payData()
|
||||
getAdminPCIndex()
|
||||
}) */
|
||||
|
||||
const batchs = ref()
|
||||
// 获取学历层次
|
||||
/* const getBatch = () => {
|
||||
GetBatch().then((res: any) => {
|
||||
if (res.succeed) {
|
||||
batchs.value = res.data.item1
|
||||
dataStore.setBatchData(res.data.item1)
|
||||
}
|
||||
|
||||
})
|
||||
} */
|
||||
|
||||
// 缴费人数-- 本科 专科 专升本
|
||||
/* const payData = () => {
|
||||
let params: any = [{
|
||||
"EducationalLevel": 3,
|
||||
"Year": years.value,
|
||||
"Month": months.value || null,
|
||||
"Day": days.value || null
|
||||
}, {
|
||||
"EducationalLevel": 4,
|
||||
"Year": years.value,
|
||||
"Month": months.value || null,
|
||||
"Day": days.value || null
|
||||
}, {
|
||||
"EducationalLevel": 6,
|
||||
"Year": years.value,
|
||||
"Month": months.value || null,
|
||||
"Day": days.value || null
|
||||
}]
|
||||
for (let item of params) {
|
||||
WeekPay(item).then((res: any) => {
|
||||
switch (item.EducationalLevel) {
|
||||
case 3:
|
||||
dataStore.setBkPay(res.data);
|
||||
case 4:
|
||||
dataStore.setZkPay(res.data);
|
||||
case 6:
|
||||
dataStore.setZsbPay(res.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (rightCenterRef) {
|
||||
rightCenterRef.value.getData()
|
||||
}
|
||||
});
|
||||
|
||||
} */
|
||||
/*
|
||||
缴费人数---根据批次去区分
|
||||
*/
|
||||
const payData = () => {
|
||||
let payParams: any = {
|
||||
"CandidateCategory": 0,
|
||||
"Id": null,
|
||||
"Year": years.value,
|
||||
"Month": months.value || null,
|
||||
"Day": days.value || null,
|
||||
}
|
||||
WeekPay(payParams).then((res: any) => {
|
||||
const bk = res.data.batchTodayPays?.find((item: any) => item.name === "统招本科");
|
||||
const zk = res.data.batchTodayPays?.find((item: any) => item.name === "统招专科");
|
||||
const zsb = res.data.batchTodayPays?.find((item: any) => item.name === "统招专升本");
|
||||
dataStore.setBkPay(bk)
|
||||
dataStore.setZkPay(zk)
|
||||
dataStore.setZsbPay(zsb)
|
||||
dataStore.setTotalPay(res.data?.payNum)
|
||||
setTimeout(() => {
|
||||
if (rightCenterRef) {
|
||||
rightCenterRef.value.getData()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
const timer: any = ref(null)
|
||||
const startTimer = () => {
|
||||
timer.value = setInterval(() => {
|
||||
getAdminPCIndex();
|
||||
payData();
|
||||
}, 60000)
|
||||
}
|
||||
const clearTimer = () => {
|
||||
clearInterval(timer.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getBatch();
|
||||
getAdminPCIndex();
|
||||
setTimeout(() => {
|
||||
payData();
|
||||
startTimer()
|
||||
}, 100)
|
||||
|
||||
});
|
||||
|
||||
import ContentHeader from "./content-header.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="index-box">
|
||||
<div class="contetn_left">
|
||||
<zkItem class="contetn_left-top contetn_lt-item" title="迎新进度">
|
||||
<LeftTop />
|
||||
</zkItem>
|
||||
<zkItem class="contetn_left-center contetn_lr-item" title="">
|
||||
<LeftCenter />
|
||||
</zkItem>
|
||||
<zkItem class="contetn_left-bottom contetn_lb-item" title="">
|
||||
<LeftBottom />
|
||||
</zkItem>
|
||||
</div>
|
||||
<div class="contetn_center">
|
||||
<CenterTop class="contetn_center_top" />
|
||||
<CenterMap class="contetn_center_map" ref="mapRef" />
|
||||
</div>
|
||||
<div class="contetn_right" v-show="showRight">
|
||||
<div class="change-btn" @click="changeRight"></div>
|
||||
<zkItem class="contetn_left-bottom contetn_rt-one" title="缴费人数">
|
||||
<RightTop />
|
||||
</zkItem>
|
||||
<zkItem class="contetn_left-bottom contetn_rc-item" :title="nowTitle + '缴费人数'" style="padding: 0 10px 16px 10px">
|
||||
<RightCenter ref="rightCenterRef" />
|
||||
</zkItem>
|
||||
<zkItem class="contetn_left-bottom contetn_rb-item" title="报到人数区域排名 ">
|
||||
<RightBottom ref="rbRef" />
|
||||
</zkItem>
|
||||
</div>
|
||||
<div class="contetn_right" v-if="!showRight">
|
||||
<div class="change-btn" @click="changeRight"></div>
|
||||
<zkItem class="contetn_left-bottom contetn_rt_two" title="学院报到人数">
|
||||
<RightTopTwo />
|
||||
</zkItem>
|
||||
<zkItem class="contetn_left-bottom contetn_rb-item" title="专业报到人数 ">
|
||||
<RightBottomTwo ref="rbtwoRef" />
|
||||
</zkItem>
|
||||
</div>
|
||||
<ContentHeader />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -306,88 +13,8 @@ onMounted(() => {
|
|||
.index-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: calc(100% - 64px);
|
||||
min-height: calc(100% - 80px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
//左边 右边 结构一样
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: space-around;
|
||||
position: relative;
|
||||
width: 470px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid rgba(107, 163, 247, 0.2);
|
||||
border-radius: 16px;
|
||||
background-clip: padding-box, border-box;
|
||||
background-origin: padding-box, border-box;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 51, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(0deg, rgba(43, 74, 158, 0.1), rgba(89, 153, 252, 0.1));
|
||||
|
||||
.change-btn {
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: calc(50% - 200px);
|
||||
width: 55px;
|
||||
height: 400px;
|
||||
background: url('@/assets/img/zheke/right_change.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.contetn_center {
|
||||
flex: 1;
|
||||
// margin: 0 54px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 50px;
|
||||
// justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.contetn_center_top {
|
||||
width: 100%;
|
||||
padding: 0 36px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.contetn_center_map {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.contetn_lt-item {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.contetn_lr-item {
|
||||
height: 310px;
|
||||
}
|
||||
|
||||
.contetn_lb-item {
|
||||
height: 310px;
|
||||
margin-top: 130px;
|
||||
}
|
||||
|
||||
.contetn_rt-one {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.contetn_rt_two {
|
||||
height: 640px;
|
||||
}
|
||||
|
||||
.contetn_rc-item {
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.contetn_rb-item {
|
||||
height: 310px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const {forecast,forecastFill} = storeToRefs(dataStore)
|
||||
|
||||
const chartRef = ref(null)
|
||||
const pieChartRef = ref(null)
|
||||
watch(forecast,()=>{
|
||||
if (chartRef) {
|
||||
chartRef.value.init(forecast.value.total,forecast.value.reported)
|
||||
}
|
||||
},{
|
||||
deep:true,
|
||||
})
|
||||
watch(forecastFill,()=>{
|
||||
if (pieChartRef) {
|
||||
pieChartRef.value.init(forecastFill.value.total,forecastFill.value.reported)
|
||||
}
|
||||
})
|
||||
onMounted(()=>{
|
||||
// if (chartRef) {
|
||||
// chartRef.value.init(forecast.value.total,forecast.value.reported)
|
||||
// }
|
||||
// if (pieChartRef) {
|
||||
// pieChartRef.value.init(forecastFill.value.total,forecastFill.value.reported)
|
||||
// }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="left-bottom">
|
||||
<div class="content">
|
||||
<div class="title">预报到报到率</div>
|
||||
<div class="left-content">
|
||||
<chart ref="chartRef"></chart>
|
||||
</div>
|
||||
<div class="bottom-title">
|
||||
<div class="icons"></div>
|
||||
<div class="tips">预报到填写总数</div>
|
||||
</div>
|
||||
<div class="bottom-title">
|
||||
<img src="@/assets/img/zheke/fillOut.png" alt="">
|
||||
<div class="tips">预报到填写报到人数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title">预报到填写率</div>
|
||||
<div class="right-content">
|
||||
<PieChart ref="pieChartRef"></PieChart>
|
||||
</div>
|
||||
<div class="bottom-title">
|
||||
<div class="icons"></div>
|
||||
<div class="tips">新生总人数</div>
|
||||
</div>
|
||||
<div class="bottom-title">
|
||||
<img src="@/assets/img/zheke/fillOut.png" alt="">
|
||||
<div class="tips">预报到填写人数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.left-bottom {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.title {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.left-content,.right-content {
|
||||
width: 105px;
|
||||
height: 105px;
|
||||
// background: url("@/assets/img/zheke/lb_left.png");
|
||||
// background-size: cover;
|
||||
// background-position: center center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bottom-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icons {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #00214d;
|
||||
}
|
||||
.tips{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useDataStore,useTimeStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const { degreeDto } = storeToRefs(dataStore)
|
||||
const timeStore = useTimeStore()
|
||||
const { nowTitle } = storeToRefs(timeStore)
|
||||
const rate = (total: any, registers: any) => {
|
||||
return ((registers / total) * 100).toFixed(1)
|
||||
}
|
||||
const bkRate = computed(() => {
|
||||
if (degreeDto.value?.length ) {
|
||||
const datas = degreeDto.value.filter((item:any) => item.degree === "统招本科")[0];
|
||||
return rate(datas.studentNumber, datas.reportNumber)
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
const zkRate = computed(() => {
|
||||
if (degreeDto.value?.length) {
|
||||
const datas = degreeDto.value.filter((item:any) => item.degree === "统招专科")[0];
|
||||
return rate(datas.studentNumber, datas.reportNumber)
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
|
||||
const zsbRate = computed(() => {
|
||||
if (degreeDto.value?.length) {
|
||||
const datas = degreeDto.value.filter((item:any) => item.degree === "统招专升本")[0];
|
||||
return rate(datas.studentNumber, datas.reportNumber)
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="left-center">
|
||||
<div class="items">
|
||||
<div class="title-bg">
|
||||
<img class="line" src="@/assets/img/zheke/title_line1.png">
|
||||
<img class="icons" src="@/assets/img/zheke/left_center1.png">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-left">
|
||||
<div class="content-title title-top">统招本科</div>
|
||||
<p class="item-title">统招本科总人数</p>
|
||||
<p class="item-content">{{ degreeDto[2]?degreeDto[2].studentNumber:'0' }}</p>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="right-title title-top item-title">报到率
|
||||
<span class="title-num numBlue">{{ isNaN(bkRate) ? '0' : bkRate }}%</span>
|
||||
</div>
|
||||
<p class="item-title">{{nowTitle}}报到人数</p>
|
||||
<p class="item-content numBlue">{{ degreeDto[2]?degreeDto[2].reportNumber:'0' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="title-bg">
|
||||
<img class="line" src="@/assets/img/zheke/title_line2.png">
|
||||
<img class="icons" src="@/assets/img/zheke/left_center2.png">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-left">
|
||||
<div class="content-title title-top tGreen">统招专科</div>
|
||||
<p class="item-title">统招专科总人数</p>
|
||||
<p class="item-content">{{ degreeDto[0]?degreeDto[0].studentNumber:'0' }}</p>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="right-title title-top item-title">报到率
|
||||
<span class="title-num numGreen">{{ isNaN(zkRate) ? '0' : zkRate }}%</span>
|
||||
</div>
|
||||
<p class="item-title">{{nowTitle}}报到人数</p>
|
||||
<p class="item-content numGreen">{{ degreeDto[0]?degreeDto[0].reportNumber:'0' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="title-bg">
|
||||
<img class="line" src="@/assets/img/zheke/title_line3.png">
|
||||
<img class="icons" src="@/assets/img/zheke/left_center3.png">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-left">
|
||||
<div class="content-title title-top tGray">统招专升本</div>
|
||||
<p class="item-title">统招专升本总人数</p>
|
||||
<p class="item-content">{{ degreeDto[1]?degreeDto[1].studentNumber:'0' }}</p>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="right-title title-top item-title">报到率
|
||||
<span class="title-num numGrey">{{ isNaN(zsbRate) ? '0' : zsbRate }}%</span>
|
||||
</div>
|
||||
<p class="item-title">{{nowTitle}}报到人数</p>
|
||||
<p class="item-content numGrey">{{ degreeDto[1]?degreeDto[1].reportNumber:'0' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.items {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 80px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px 0 0 15px;
|
||||
display: flex;
|
||||
|
||||
.content-left {
|
||||
width: 140px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #AFCAE1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.title-top {
|
||||
height: 40px;
|
||||
|
||||
.title-num {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #BCD3DF;
|
||||
line-height: 25px;
|
||||
font-style: italic;
|
||||
opacity: 0.89;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #F1F6FB;
|
||||
}
|
||||
|
||||
.numBlue {
|
||||
color: #69cbff;
|
||||
}
|
||||
|
||||
.numGreen {
|
||||
color: #73eba8;
|
||||
}
|
||||
|
||||
.numGrey {
|
||||
color: #84baef;
|
||||
}
|
||||
|
||||
.tGreen {
|
||||
color: #a9d9c7;
|
||||
}
|
||||
|
||||
.tGray {
|
||||
color: #9499b9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const { totalDto,forecast } = storeToRefs(dataStore)
|
||||
// 预报到总人数 forecast.total
|
||||
|
||||
// 迎新总进度 已预报到总人数/预报到总人数
|
||||
const progress = computed(() => {
|
||||
return ((totalDto.value.reportNumber / totalDto.value.totalNumber) * 100).toFixed(1)
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="left-top">
|
||||
<div class="top-item-img">
|
||||
<div class="top-item-icon">
|
||||
<img src="@/assets/img/zheke/left_top1.png">
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title">已报到人数</div>
|
||||
<div class="top-item-content">{{ totalDto.reportNumber ?? '0' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item-img">
|
||||
<div class="top-item-icon">
|
||||
<img src="@/assets/img/zheke/left_top2.png">
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title title-red">未报到人数</div>
|
||||
<div class="top-item-content content-red"> {{ totalDto.notReportNumber ?? '0' }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-bottom">
|
||||
<div class="bottom-item">
|
||||
<div class="bottom-item-title">预报到总人数</div>
|
||||
<div class="bottom-item-content"> {{ forecast.total ?? '0' }} </div>
|
||||
</div>
|
||||
<div class="bottom-item">
|
||||
<div class="bottom-item-title">录取总人数</div>
|
||||
<div class="bottom-item-content"> {{ totalDto.totalNumber ?? '0' }} </div>
|
||||
</div>
|
||||
<div class="bottom-item">
|
||||
<div class="bottom-item-title">迎新总进度</div>
|
||||
<div class="bottom-item-content"> {{ isNaN(progress) ? '0' : progress}}% </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.left-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.top-item-img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10px;
|
||||
|
||||
.top-item-title {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #FFFFFF;
|
||||
line-height: 28px;
|
||||
text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
|
||||
// background: #3652AB;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(126, 219, 254, 0.14) 0%, rgba(126, 219, 254, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);
|
||||
|
||||
}
|
||||
|
||||
.top-item-content {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(182, 198, 229, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%, );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.title-red {
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(228, 140, 140, 0.14) 0%, rgba(247, 118, 93, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);
|
||||
|
||||
}
|
||||
|
||||
.content-red {
|
||||
background: linear-gradient(80deg, rgba(255, 131, 106, 0.8) 0%, rgba(230, 152, 152, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30px;
|
||||
padding: 0 20px;
|
||||
|
||||
.bottom-item {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #fbeedb;
|
||||
text-shadow: 0px 2px 6px rgba(27, 24, 19, 0.31);
|
||||
font-style: italic;
|
||||
|
||||
// background: linear-gradient(0deg, rgba(152,115,58,1) 0%, rgba(205,169,114,1) 41.89453125%, rgba(232,215,190,1) 84.1796875%, rgba(255,236,221,0.27) 100%);
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: transparent;
|
||||
.bottom-item-content {
|
||||
margin-top: 10px;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
const xData: Ref<any> = ref([])
|
||||
const yData: Ref<any> = ref([])
|
||||
const zoomIndex = computed(() => {
|
||||
return (7 / xData.value.length)?.toFixed(1) as any * 100 || 0
|
||||
})
|
||||
const showZoom = computed(() => {
|
||||
return xData.value.length > 7
|
||||
})
|
||||
const option = reactive({
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: true, // 是否留白，从原点开始
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontWeight: "500",
|
||||
formatter: function (value: any) {
|
||||
return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
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: "0px",
|
||||
top: "20px",
|
||||
containLabel: true,
|
||||
// borderColor: "#1F63A3",
|
||||
},
|
||||
// 添加 dataZoom 组件来启用滚动条
|
||||
/* dataZoom: [
|
||||
{
|
||||
type: 'slider', // 这里是滑块型数据区域缩放组件
|
||||
show: true, // 是否显示滑块
|
||||
start: 0, // 数据窗口范围的起始百分比
|
||||
end: 50, // 数据窗口范围的结束百分比
|
||||
handleSize: 10, // 滑块的大小
|
||||
height: 10, // 滑块组件的高度
|
||||
xAxisIndex: [0], // 控制哪个x轴
|
||||
filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
|
||||
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
], */
|
||||
// 只有当数据超过七条时才添加 dataZoom 配置
|
||||
dataZoom: [{
|
||||
show: showZoom,
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: zoomIndex
|
||||
}], // 如果不需要 dataZoom，则设置为 null
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "bar",
|
||||
smooth: false,
|
||||
name: "已报到人数",
|
||||
color: "#2265ff",
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'top', // 在上方显示
|
||||
color: '#999',
|
||||
fontSize: 12,
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
});
|
||||
const getData = (params: any) => {
|
||||
let dateList = params.map((el: any) => el.professionalName)
|
||||
let numList = params.map((el: any) => el.reportNumber)
|
||||
setOption(dateList, numList)
|
||||
|
||||
};
|
||||
const setOption = (x: any[], y: any[]) => {
|
||||
// console.log(x, y);
|
||||
xData.value = x
|
||||
yData.value = y
|
||||
};
|
||||
|
||||
defineExpose({ getData })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- v-if="JSON.stringify(option) != '{}'" -->
|
||||
<v-chart class="chart" :option="option" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { rightBottom } from "@/api";
|
||||
import SeamlessScroll from "@/components/seamless-scroll";
|
||||
import { useSettingStore } from "@/stores";
|
||||
import { storeToRefs } from "pinia";
|
||||
import EmptyCom from "@/components/empty-com";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { defaultOption, indexConfig } = storeToRefs(settingStore);
|
||||
// 处理数据
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const { provinceDto } = storeToRefs(dataStore)
|
||||
|
||||
const rankProvinceData:any = ref([])
|
||||
const rankProvince = (data: any) => {
|
||||
rankProvinceData.value = data
|
||||
}
|
||||
const findDegree = (degree: any, name: string) => {
|
||||
return degree.find((i: any) => i.degreesName == name)
|
||||
}
|
||||
|
||||
const state = reactive<any>({
|
||||
list: [],
|
||||
defaultOption: {
|
||||
...defaultOption.value,
|
||||
singleHeight: 205, //单步运动停止的高度，与滚动盒子的高度进行适配
|
||||
limitScrollNum: 3,
|
||||
// singleWaitTime:3000, // 停顿间隔
|
||||
step: 1 //滚动速度，数字越大，滚动越快
|
||||
},
|
||||
scroll: true,
|
||||
});
|
||||
|
||||
|
||||
const comName = computed(() => {
|
||||
if (indexConfig.value.rightBottomSwiper) {
|
||||
return SeamlessScroll;
|
||||
} else {
|
||||
return EmptyCom;
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({ rankProvince })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="right_bottom">
|
||||
<div class="table-title">
|
||||
<div class="title-item">排名</div>
|
||||
<div class="title-item">省份/地市 </div>
|
||||
<div class="title-item">统招本科</div>
|
||||
<div class="title-item">统招专科</div>
|
||||
<div class="title-item">统招专升本</div>
|
||||
</div>
|
||||
<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"> -->
|
||||
<div class="table-row" v-for="(item, i) in rankProvinceData">
|
||||
<div class="row-item">{{ item.sort }}</div>
|
||||
<div class="row-item">{{ item.name }}</div>
|
||||
<div class="row-item">{{ item.num3 }}</div>
|
||||
<div class="row-item">{{ item.num1 }}</div>
|
||||
<div class="row-item">{{ item.num2 }}</div>
|
||||
|
||||
</div>
|
||||
<!-- </component> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.table-title {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
color: #545e70;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid #33343F;
|
||||
|
||||
.title-item {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_bottom_wrap {
|
||||
overflow: hidden;
|
||||
height: 210px;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #33343F;
|
||||
border-top: 1px solid #33343F;
|
||||
line-height: 50px;
|
||||
margin-bottom: 2px;
|
||||
color: #E6E6FB;
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
|
||||
}
|
||||
|
||||
.row-item {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,276 +0,0 @@
|
|||
<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, totalPay } = storeToRefs(dataStore)
|
||||
const activeTab = ref(0);
|
||||
const tabs = ref([
|
||||
{ title: '本科', value: 0, dateList: ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"], numList: [0, 0, 0, 0, 0, 0] },
|
||||
{ title: '专科', value: 0, dateList: ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"], numList: [0, 0, 0, 0, 0, 0] },
|
||||
{ title: '专升本', value: 0, dateList: ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"], numList: [0, 0, 0, 0, 0, 0] },
|
||||
]);
|
||||
|
||||
const changeTab = (index: number) => {
|
||||
activeTab.value = index;
|
||||
setOption(tabs.value[index].dateList, tabs.value[index].numList)
|
||||
};
|
||||
|
||||
const option = ref({});
|
||||
|
||||
// 这里拿不到pinia的值 因为子组件比父组件先渲染
|
||||
// 暴露出去 让父组件调用 来赋值------待修改
|
||||
const getData = () => {
|
||||
// let dateList = ['05-30', '05-31', '06-01', '06-02', '06-03', "06-04"]
|
||||
// let numList = [0, 0, 0, 0, 0, 0]
|
||||
tabs.value[0].dateList = Object.keys(bkPay.value?.statistics).sort()
|
||||
tabs.value[1].dateList = Object.keys(zkPay.value?.statistics).sort()
|
||||
tabs.value[2].dateList = Object.keys(zsbPay.value?.statistics).sort()
|
||||
tabs.value[0].numList = tabs.value[0].dateList.map(date => bkPay.value?.statistics[date])
|
||||
tabs.value[1].numList = tabs.value[0].dateList.map(date => zkPay.value?.statistics[date])
|
||||
tabs.value[2].numList = tabs.value[0].dateList.map(date => zsbPay.value?.statistics[date])
|
||||
|
||||
setOption(tabs.value[0].dateList, tabs.value[0].numList)
|
||||
};
|
||||
const setOption = async (xData: any[], yData: any[]) => {
|
||||
const zoomIndex = computed(() => {
|
||||
return (12 / xData.length)?.toFixed(1) as any * 100 || 0
|
||||
})
|
||||
const showZoom = computed(() => {
|
||||
return xData.length > 12
|
||||
})
|
||||
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",
|
||||
formatter: function (value: any) {
|
||||
// 去除前五位 只显示具体的日期
|
||||
return value.slice(5);
|
||||
}
|
||||
},
|
||||
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",
|
||||
formatter: function (value: any) {
|
||||
// 如果value是整数，则直接返回，否则返回四舍五入后的整数
|
||||
return value % 1 === 0 ? value : '';
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: false,
|
||||
left: "15px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "30px",
|
||||
containLabel: true,
|
||||
// borderColor: "#1F63A3",
|
||||
},
|
||||
// 添加 dataZoom 组件来启用滚动条
|
||||
/* dataZoom: [
|
||||
{
|
||||
type: 'slider', // 这里是滑块型数据区域缩放组件
|
||||
show: true, // 是否显示滑块
|
||||
start: 0, // 数据窗口范围的起始百分比
|
||||
end: 100, // 数据窗口范围的结束百分比
|
||||
handleSize: 10, // 滑块的大小
|
||||
height: 15, // 滑块组件的高度
|
||||
xAxisIndex: [0], // 控制哪个x轴
|
||||
filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
], */
|
||||
// 只有当数据超过七条时才添加 dataZoom 配置
|
||||
dataZoom: [{
|
||||
show: showZoom,
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: zoomIndex
|
||||
}], // 如果不需要 dataZoom，则设置为 null
|
||||
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>缴费总人数</p>
|
||||
<!-- <p> {{ bkPay?.todayPayDto?.payNum }} </p> -->
|
||||
<p> {{ totalPay ?? '0' }} </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> -->
|
||||
<p v-if="index == 0">{{ bkPay?.num }}</p>
|
||||
<p v-if="index == 1">{{ zkPay?.num }}</p>
|
||||
<p v-if="index == 2">{{ zsbPay?.num }}</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>
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { rightBottom } from "@/api";
|
||||
import SeamlessScroll from "@/components/seamless-scroll";
|
||||
import { useSettingStore } from "@/stores";
|
||||
import { storeToRefs } from "pinia";
|
||||
import EmptyCom from "@/components/empty-com";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const { rankingDto,collageId } = storeToRefs(dataStore)
|
||||
|
||||
/**
|
||||
* @description: 计算报到率
|
||||
* @return {*}
|
||||
*/
|
||||
const getRate = (report: any, total: any) => {
|
||||
if (report && total) {
|
||||
return ((report / total) * 100).toFixed(1);
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
const { defaultOption, indexConfig } = storeToRefs(settingStore);
|
||||
const state = reactive<any>({
|
||||
list: [],
|
||||
defaultOption: {
|
||||
...defaultOption.value,
|
||||
singleHeight: 535, //单步运动停止的高度，与滚动盒子的高度进行适配
|
||||
limitScrollNum: 3,
|
||||
// singleWaitTime:3000, // 停顿间隔
|
||||
step: 1 //滚动速度，数字越大，滚动越快
|
||||
},
|
||||
scroll: true,
|
||||
});
|
||||
|
||||
const comName = computed(() => {
|
||||
if (indexConfig.value.rightBottomSwiper) {
|
||||
return SeamlessScroll;
|
||||
} else {
|
||||
return EmptyCom;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const onSelectData = (id: any) => {
|
||||
dataStore.setCollageId(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="right_bottom">
|
||||
<div class="table-title">
|
||||
<div class="title-item">序号</div>
|
||||
<div class="title-item">学院名称 </div>
|
||||
<div class="title-item">已报到人数</div>
|
||||
<div class="title-item">总人数</div>
|
||||
<div class="title-item">报到率</div>
|
||||
</div>
|
||||
<!-- <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"> -->
|
||||
<template v-for="(item, i) in rankingDto">
|
||||
<div class="table-row" :class="{ 'table-row-active': item.collegeId === collageId }"
|
||||
@click="onSelectData(item.collegeId)">
|
||||
<div class="row-item">{{ i + 1 }}</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">{{ getRate(item.reportNumber, item.totalNumber) }}%</div>
|
||||
<!-- <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- </component> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.table-title {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
color: #545e70;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid #33343F;
|
||||
|
||||
.title-item {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_bottom_wrap {
|
||||
overflow: hidden;
|
||||
height: 530px;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #33343F;
|
||||
border-top: 1px solid #33343F;
|
||||
line-height: 50px;
|
||||
margin-bottom: 2px;
|
||||
color: #E6E6FB;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
|
||||
}
|
||||
|
||||
.row-item {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-active {
|
||||
background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
<!--
|
||||
* @Author: 张宁 18339727226@163.com
|
||||
* @Date: 2024-05-22 08:40:56
|
||||
* @LastEditors: 张宁 18339727226@163.com
|
||||
* @LastEditTime: 2024-05-30 14:58:06
|
||||
* @FilePath: \welcome-system-screen\src\views\index\right-top.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { useDataStore } from "@/stores/index";
|
||||
const dataStore = useDataStore();
|
||||
const { payDto } = storeToRefs(dataStore)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="right-top">
|
||||
<div class="items">
|
||||
<div class="item-title">已缴费人数</div>
|
||||
<div class="item-content">{{ payDto.payNum }}</div>
|
||||
</div>
|
||||
<div class="items item-two">
|
||||
<div class="item-title">已报到未缴费人数</div>
|
||||
<div class="item-content">{{ payDto.reportNotPay }}</div>
|
||||
</div>
|
||||
<div class="items item-three">
|
||||
<div class="item-title">生活用品缴费人数</div>
|
||||
<div class="item-content">{{ payDto.consumerGoods }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right-top {
|
||||
display: flex;
|
||||
|
||||
.items {
|
||||
width: 150px;
|
||||
height: 140px;
|
||||
background: url("@/assets/img/zheke/right_top1.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
transform: scale(0.9);
|
||||
|
||||
.item-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #79BFED;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
color: #F1FBFF;
|
||||
background: linear-gradient(179deg, rgba(126, 216, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.item-two {
|
||||
background: url("@/assets/img/zheke/right_top2.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
.item-title {
|
||||
color: #fd89ac;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
color: #F1FBFF;
|
||||
background: linear-gradient(179deg, rgba(253, 137, 172, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.item-three {
|
||||
background: url("@/assets/img/zheke/right_top3.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
.item-title {
|
||||
color: #4bf1d8;
|
||||
}
|
||||
.item-content {
|
||||
color: #F1FBFF;
|
||||
background: linear-gradient(179deg, rgba(75, 241, 216, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
349
yarn.lock
349
yarn.lock
|
|
@ -12,7 +12,7 @@
|
|||
resolved "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.8.tgz"
|
||||
integrity sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==
|
||||
|
||||
"@babel/parser@^7.15.8", "@babel/parser@^7.23.9":
|
||||
"@babel/parser@^7.23.9":
|
||||
version "7.24.1"
|
||||
resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz"
|
||||
integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
|
||||
|
|
@ -27,6 +27,116 @@
|
|||
resolved "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz"
|
||||
integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
|
||||
|
||||
"@esbuild/aix-ppc64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz#a70f4ac11c6a1dfc18b8bbb13284155d933b9537"
|
||||
integrity sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==
|
||||
|
||||
"@esbuild/android-arm64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz#db1c9202a5bc92ea04c7b6840f1bbe09ebf9e6b9"
|
||||
integrity sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==
|
||||
|
||||
"@esbuild/android-arm@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.20.2.tgz#3b488c49aee9d491c2c8f98a909b785870d6e995"
|
||||
integrity sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==
|
||||
|
||||
"@esbuild/android-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.20.2.tgz#3b1628029e5576249d2b2d766696e50768449f98"
|
||||
integrity sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==
|
||||
|
||||
"@esbuild/darwin-arm64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz#6e8517a045ddd86ae30c6608c8475ebc0c4000bb"
|
||||
integrity sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==
|
||||
|
||||
"@esbuild/darwin-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz#90ed098e1f9dd8a9381695b207e1cff45540a0d0"
|
||||
integrity sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==
|
||||
|
||||
"@esbuild/freebsd-arm64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz#d71502d1ee89a1130327e890364666c760a2a911"
|
||||
integrity sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==
|
||||
|
||||
"@esbuild/freebsd-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz#aa5ea58d9c1dd9af688b8b6f63ef0d3d60cea53c"
|
||||
integrity sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==
|
||||
|
||||
"@esbuild/linux-arm64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz#055b63725df678379b0f6db9d0fa85463755b2e5"
|
||||
integrity sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==
|
||||
|
||||
"@esbuild/linux-arm@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz#76b3b98cb1f87936fbc37f073efabad49dcd889c"
|
||||
integrity sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==
|
||||
|
||||
"@esbuild/linux-ia32@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz#c0e5e787c285264e5dfc7a79f04b8b4eefdad7fa"
|
||||
integrity sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==
|
||||
|
||||
"@esbuild/linux-loong64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz#a6184e62bd7cdc63e0c0448b83801001653219c5"
|
||||
integrity sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==
|
||||
|
||||
"@esbuild/linux-mips64el@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz#d08e39ce86f45ef8fc88549d29c62b8acf5649aa"
|
||||
integrity sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==
|
||||
|
||||
"@esbuild/linux-ppc64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz#8d252f0b7756ffd6d1cbde5ea67ff8fd20437f20"
|
||||
integrity sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==
|
||||
|
||||
"@esbuild/linux-riscv64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz#19f6dcdb14409dae607f66ca1181dd4e9db81300"
|
||||
integrity sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==
|
||||
|
||||
"@esbuild/linux-s390x@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz#3c830c90f1a5d7dd1473d5595ea4ebb920988685"
|
||||
integrity sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==
|
||||
|
||||
"@esbuild/linux-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz#86eca35203afc0d9de0694c64ec0ab0a378f6fff"
|
||||
integrity sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==
|
||||
|
||||
"@esbuild/netbsd-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz#e771c8eb0e0f6e1877ffd4220036b98aed5915e6"
|
||||
integrity sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==
|
||||
|
||||
"@esbuild/openbsd-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz#9a795ae4b4e37e674f0f4d716f3e226dd7c39baf"
|
||||
integrity sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==
|
||||
|
||||
"@esbuild/sunos-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz#7df23b61a497b8ac189def6e25a95673caedb03f"
|
||||
integrity sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==
|
||||
|
||||
"@esbuild/win32-arm64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz#f1ae5abf9ca052ae11c1bc806fb4c0f519bacf90"
|
||||
integrity sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==
|
||||
|
||||
"@esbuild/win32-ia32@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz#241fe62c34d8e8461cd708277813e1d0ba55ce23"
|
||||
integrity sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==
|
||||
|
||||
"@esbuild/win32-x64@0.20.2":
|
||||
version "0.20.2"
|
||||
resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz"
|
||||
|
|
@ -63,16 +173,16 @@
|
|||
resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
|
||||
integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
|
||||
|
||||
"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.15":
|
||||
version "1.4.15"
|
||||
resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
|
||||
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
|
||||
|
||||
"@jridgewell/sourcemap-codec@1.4.14":
|
||||
version "1.4.14"
|
||||
resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
|
||||
integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
|
||||
|
||||
"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.15":
|
||||
version "1.4.15"
|
||||
resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
|
||||
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
|
||||
|
||||
"@jridgewell/trace-mapping@^0.3.9":
|
||||
version "0.3.18"
|
||||
resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz"
|
||||
|
|
@ -89,7 +199,7 @@
|
|||
"@nodelib/fs.stat" "2.0.5"
|
||||
run-parallel "^1.1.9"
|
||||
|
||||
"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
|
||||
"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
|
||||
version "2.0.5"
|
||||
resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
|
||||
integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
|
||||
|
|
@ -116,6 +226,71 @@
|
|||
estree-walker "^2.0.2"
|
||||
picomatch "^2.3.1"
|
||||
|
||||
"@rollup/rollup-android-arm-eabi@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.1.tgz#88ba199f996e0000689130ed69e47df8b0dfbc70"
|
||||
integrity sha512-4C4UERETjXpC4WpBXDbkgNVgHyWfG3B/NKY46e7w5H134UDOFqUJKpsLm0UYmuupW+aJmRgeScrDNfvZ5WV80A==
|
||||
|
||||
"@rollup/rollup-android-arm64@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.1.tgz#c89a55670e1179ed7ba3db06cee0d7da7b3d35ce"
|
||||
integrity sha512-TrTaFJ9pXgfXEiJKQ3yQRelpQFqgRzVR9it8DbeRzG0RX7mKUy0bqhCFsgevwXLJepQKTnLl95TnPGf9T9AMOA==
|
||||
|
||||
"@rollup/rollup-darwin-arm64@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.1.tgz#52e3496fa66d761833df23a9b4860e517efc7d1d"
|
||||
integrity sha512-fz7jN6ahTI3cKzDO2otQuybts5cyu0feymg0bjvYCBrZQ8tSgE8pc0sSNEuGvifrQJWiwx9F05BowihmLxeQKw==
|
||||
|
||||
"@rollup/rollup-darwin-x64@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.1.tgz#7678922773a8b53d8b4b3c3cc3e77b65fc71b489"
|
||||
integrity sha512-WTvdz7SLMlJpektdrnWRUN9C0N2qNHwNbWpNo0a3Tod3gb9leX+yrYdCeB7VV36OtoyiPAivl7/xZ3G1z5h20g==
|
||||
|
||||
"@rollup/rollup-linux-arm-gnueabihf@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.1.tgz#69c3b896e3ee1c3487492323a02c2a3ae0d4b2e7"
|
||||
integrity sha512-dBHQl+7wZzBYcIF6o4k2XkAfwP2ks1mYW2q/Gzv9n39uDcDiAGDqEyml08OdY0BIct0yLSPkDTqn4i6czpBLLw==
|
||||
|
||||
"@rollup/rollup-linux-arm64-gnu@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.1.tgz#13353f0ab65f4add0241f97f7ccc640b3a2b5cf2"
|
||||
integrity sha512-bur4JOxvYxfrAmocRJIW0SADs3QdEYK6TQ7dTNz6Z4/lySeu3Z1H/+tl0a4qDYv0bCdBpUYM0sYa/X+9ZqgfSQ==
|
||||
|
||||
"@rollup/rollup-linux-arm64-musl@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.1.tgz#bf64eaa29b2b1e6bc9195f04bb30b2a4ffdc25ae"
|
||||
integrity sha512-ssp77SjcDIUSoUyj7DU7/5iwM4ZEluY+N8umtCT9nBRs3u045t0KkW02LTyHouHDomnMXaXSZcCSr2bdMK63kA==
|
||||
|
||||
"@rollup/rollup-linux-riscv64-gnu@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.1.tgz#ec05966a4ed1b3338c8842108353ac6d3443dc6a"
|
||||
integrity sha512-Jv1DkIvwEPAb+v25/Unrnnq9BO3F5cbFPT821n3S5litkz+O5NuXuNhqtPx5KtcwOTtaqkTsO+IVzJOsxd11aQ==
|
||||
|
||||
"@rollup/rollup-linux-s390x-gnu@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.13.1.tgz#c10a1f1522f0c9191ee45f677bd08763ddfdc039"
|
||||
integrity sha512-U564BrhEfaNChdATQaEODtquCC7Ez+8Hxz1h5MAdMYj0AqD0GA9rHCpElajb/sQcaFL6NXmHc5O+7FXpWMa73Q==
|
||||
|
||||
"@rollup/rollup-linux-x64-gnu@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.1.tgz#836f948b6efc53f05f57d1d9ba92e90d629b3f22"
|
||||
integrity sha512-zGRDulLTeDemR8DFYyFIQ8kMP02xpUsX4IBikc7lwL9PrwR3gWmX2NopqiGlI2ZVWMl15qZeUjumTwpv18N7sQ==
|
||||
|
||||
"@rollup/rollup-linux-x64-musl@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.1.tgz#07e0351cc18eeef026f903189d8312833cb6bd1f"
|
||||
integrity sha512-VTk/MveyPdMFkYJJPCkYBw07KcTkGU2hLEyqYMsU4NjiOfzoaDTW9PWGRsNwiOA3qI0k/JQPjkl/4FCK1smskQ==
|
||||
|
||||
"@rollup/rollup-win32-arm64-msvc@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.1.tgz#6f9359bbec6cb4a2c002642c63e3704b0b5e68b7"
|
||||
integrity sha512-L+hX8Dtibb02r/OYCsp4sQQIi3ldZkFI0EUkMTDwRfFykXBPptoz/tuuGqEd3bThBSLRWPR6wsixDSgOx/U3Zw==
|
||||
|
||||
"@rollup/rollup-win32-ia32-msvc@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.1.tgz#d6545a29ac9dd8b39a9161b87924f13471eb992e"
|
||||
integrity sha512-+dI2jVPfM5A8zme8riEoNC7UKk0Lzc7jCj/U89cQIrOjrZTCWZl/+IXUeRT2rEZ5j25lnSA9G9H1Ob9azaF/KQ==
|
||||
|
||||
"@rollup/rollup-win32-x64-msvc@4.13.1":
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.1.tgz"
|
||||
|
|
@ -126,7 +301,7 @@
|
|||
resolved "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz"
|
||||
integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
|
||||
|
||||
"@types/estree@^1.0.0", "@types/estree@1.0.5":
|
||||
"@types/estree@1.0.5", "@types/estree@^1.0.0":
|
||||
version "1.0.5"
|
||||
resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
|
||||
integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
|
||||
|
|
@ -136,7 +311,7 @@
|
|||
resolved "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.6.tgz"
|
||||
integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
|
||||
|
||||
"@types/lodash-es@*", "@types/lodash-es@^4.17.6":
|
||||
"@types/lodash-es@^4.17.6":
|
||||
version "4.17.6"
|
||||
resolved "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz"
|
||||
integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
|
||||
|
|
@ -153,7 +328,7 @@
|
|||
resolved "https://registry.npmjs.org/@types/mockjs/-/mockjs-1.0.10.tgz"
|
||||
integrity sha512-SXgrhajHG7boLv6oU93CcmdDm0HYRiceuz6b+7z+/2lCJPTWDv0V5YiwFHT2ejE4bQqgSXQiVPQYPWv7LGsK1g==
|
||||
|
||||
"@types/node@*", "@types/node@^18.0.0 || >=20.0.0", "@types/node@^20.11.30":
|
||||
"@types/node@*", "@types/node@^20.11.30":
|
||||
version "20.11.30"
|
||||
resolved "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz"
|
||||
integrity sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==
|
||||
|
|
@ -182,7 +357,7 @@
|
|||
resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz"
|
||||
integrity sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==
|
||||
|
||||
"@volar/language-core@~2.1.3", "@volar/language-core@2.1.6":
|
||||
"@volar/language-core@2.1.6", "@volar/language-core@~2.1.3":
|
||||
version "2.1.6"
|
||||
resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-2.1.6.tgz"
|
||||
integrity sha512-pAlMCGX/HatBSiDFMdMyqUshkbwWbLxpN/RL7HCQDOo2gYBE+uS+nanosLc1qR6pTQ/U8q00xt8bdrrAFPSC0A==
|
||||
|
|
@ -215,7 +390,7 @@
|
|||
estree-walker "^2.0.2"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
"@vue/compiler-dom@^3.4.0", "@vue/compiler-dom@3.4.21":
|
||||
"@vue/compiler-dom@3.4.21", "@vue/compiler-dom@^3.4.0":
|
||||
version "3.4.21"
|
||||
resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz"
|
||||
integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
|
||||
|
|
@ -271,7 +446,7 @@
|
|||
dependencies:
|
||||
"@vue/shared" "3.4.21"
|
||||
|
||||
"@vue/runtime-core@^3.0.0", "@vue/runtime-core@3.4.21":
|
||||
"@vue/runtime-core@3.4.21":
|
||||
version "3.4.21"
|
||||
resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz"
|
||||
integrity sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==
|
||||
|
|
@ -296,7 +471,7 @@
|
|||
"@vue/compiler-ssr" "3.4.21"
|
||||
"@vue/shared" "3.4.21"
|
||||
|
||||
"@vue/shared@^3.4.0", "@vue/shared@3.4.21":
|
||||
"@vue/shared@3.4.21", "@vue/shared@^3.4.0":
|
||||
version "3.4.21"
|
||||
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz"
|
||||
integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
|
||||
|
|
@ -306,7 +481,7 @@
|
|||
resolved "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.5.1.tgz"
|
||||
integrity sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==
|
||||
|
||||
"@vueuse/core@*", "@vueuse/core@^10.9.0":
|
||||
"@vueuse/core@^10.9.0":
|
||||
version "10.9.0"
|
||||
resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz"
|
||||
integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
|
||||
|
|
@ -556,7 +731,7 @@ braces@^3.0.2, braces@~3.0.2:
|
|||
dependencies:
|
||||
fill-range "^7.0.1"
|
||||
|
||||
browserslist@^4.23.0, "browserslist@>= 4.21.0":
|
||||
browserslist@^4.23.0:
|
||||
version "4.23.0"
|
||||
resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz"
|
||||
integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
|
||||
|
|
@ -622,7 +797,7 @@ chalk@^2.4.1:
|
|||
escape-string-regexp "^1.0.5"
|
||||
supports-color "^5.3.0"
|
||||
|
||||
chokidar@^3.5.3, chokidar@^3.6.0, "chokidar@>=3.0.0 <4.0.0":
|
||||
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3, chokidar@^3.6.0:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
|
||||
integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
|
||||
|
|
@ -816,14 +991,7 @@ de-indent@^1.0.2:
|
|||
resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
|
||||
integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
|
||||
|
||||
debug@^2.2.0:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz"
|
||||
integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
|
||||
dependencies:
|
||||
ms "2.0.0"
|
||||
|
||||
debug@^2.3.3:
|
||||
debug@^2.2.0, debug@^2.3.3:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz"
|
||||
integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
|
||||
|
|
@ -897,6 +1065,14 @@ dlv@^1.1.3:
|
|||
resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
|
||||
integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-0.2.2.tgz"
|
||||
integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
|
||||
dependencies:
|
||||
domelementtype "^2.0.1"
|
||||
entities "^2.0.0"
|
||||
|
||||
dom-serializer@^1.0.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz"
|
||||
|
|
@ -906,15 +1082,7 @@ dom-serializer@^1.0.1:
|
|||
domhandler "^4.2.0"
|
||||
entities "^2.0.0"
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-0.2.2.tgz"
|
||||
integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
|
||||
dependencies:
|
||||
domelementtype "^2.0.1"
|
||||
entities "^2.0.0"
|
||||
|
||||
domelementtype@^1.3.1, domelementtype@1:
|
||||
domelementtype@1, domelementtype@^1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.npmmirror.com/domelementtype/-/domelementtype-1.3.1.tgz"
|
||||
integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
|
||||
|
|
@ -955,7 +1123,7 @@ domutils@^2.8.0:
|
|||
domelementtype "^2.2.0"
|
||||
domhandler "^4.2.0"
|
||||
|
||||
echarts@^5.4.1, echarts@^5.5.0:
|
||||
echarts@^5.5.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz"
|
||||
integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
|
||||
|
|
@ -1149,7 +1317,7 @@ escape-html@^1.0.3:
|
|||
resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
|
||||
integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
|
||||
|
||||
escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5, escape-string-regexp@1.0.5:
|
||||
escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
|
||||
integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
|
||||
|
|
@ -1196,15 +1364,7 @@ extend-shallow@^2.0.1:
|
|||
dependencies:
|
||||
is-extendable "^0.1.0"
|
||||
|
||||
extend-shallow@^3.0.0:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-3.0.2.tgz"
|
||||
integrity sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==
|
||||
dependencies:
|
||||
assign-symbols "^1.0.0"
|
||||
is-extendable "^1.0.1"
|
||||
|
||||
extend-shallow@^3.0.2:
|
||||
extend-shallow@^3.0.0, extend-shallow@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-3.0.2.tgz"
|
||||
integrity sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==
|
||||
|
|
@ -1313,6 +1473,11 @@ fs.realpath@^1.0.0:
|
|||
resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
|
||||
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
|
||||
|
||||
fsevents@~2.3.2, fsevents@~2.3.3:
|
||||
version "2.3.3"
|
||||
resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
|
||||
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
|
||||
|
||||
function-bind@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
|
||||
|
|
@ -1528,7 +1693,7 @@ inflight@^1.0.4:
|
|||
once "^1.3.0"
|
||||
wrappy "1"
|
||||
|
||||
inherits@^2.0.1, inherits@^2.0.3, inherits@2:
|
||||
inherits@2, inherits@^2.0.1, inherits@^2.0.3:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
|
||||
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
|
||||
|
|
@ -1746,41 +1911,29 @@ is-windows@^1.0.2:
|
|||
resolved "https://registry.npmmirror.com/is-windows/-/is-windows-1.0.2.tgz"
|
||||
integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
|
||||
|
||||
isarray@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz"
|
||||
integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
|
||||
|
||||
isarray@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz"
|
||||
integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
|
||||
|
||||
isarray@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz"
|
||||
integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
|
||||
|
||||
isexe@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
|
||||
integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
|
||||
|
||||
isobject@^2.0.0:
|
||||
isobject@^2.0.0, isobject@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.npmmirror.com/isobject/-/isobject-2.1.0.tgz"
|
||||
integrity sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==
|
||||
dependencies:
|
||||
isarray "1.0.0"
|
||||
|
||||
isobject@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.npmmirror.com/isobject/-/isobject-2.1.0.tgz"
|
||||
integrity sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==
|
||||
dependencies:
|
||||
isarray "1.0.0"
|
||||
|
||||
isobject@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz"
|
||||
integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
|
||||
|
||||
isobject@^3.0.1:
|
||||
isobject@^3.0.0, isobject@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz"
|
||||
integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
|
||||
|
|
@ -1826,21 +1979,7 @@ jsonfile@^6.0.1:
|
|||
optionalDependencies:
|
||||
graceful-fs "^4.1.6"
|
||||
|
||||
kind-of@^3.0.2:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz"
|
||||
integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
|
||||
dependencies:
|
||||
is-buffer "^1.1.5"
|
||||
|
||||
kind-of@^3.0.3:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz"
|
||||
integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
|
||||
dependencies:
|
||||
is-buffer "^1.1.5"
|
||||
|
||||
kind-of@^3.2.0:
|
||||
kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.npmmirror.com/kind-of/-/kind-of-3.2.2.tgz"
|
||||
integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
|
||||
|
|
@ -1906,7 +2045,7 @@ local-pkg@^0.5.0:
|
|||
mlly "^1.4.2"
|
||||
pkg-types "^1.0.3"
|
||||
|
||||
lodash-es@*, lodash-es@^4.17.21:
|
||||
lodash-es@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
|
||||
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
|
||||
|
|
@ -1916,7 +2055,7 @@ lodash-unified@^1.0.2:
|
|||
resolved "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz"
|
||||
integrity sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==
|
||||
|
||||
lodash@*, lodash@^4.17.21:
|
||||
lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
|
@ -1974,14 +2113,6 @@ merge2@^1.3.0:
|
|||
resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
|
||||
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
|
||||
|
||||
micromatch@^4.0.4, micromatch@^4.0.5:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
|
||||
integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
|
||||
dependencies:
|
||||
braces "^3.0.2"
|
||||
picomatch "^2.3.1"
|
||||
|
||||
micromatch@3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.npmmirror.com/micromatch/-/micromatch-3.1.0.tgz"
|
||||
|
|
@ -2001,6 +2132,14 @@ micromatch@3.1.0:
|
|||
snapdragon "^0.8.1"
|
||||
to-regex "^3.0.1"
|
||||
|
||||
micromatch@^4.0.4, micromatch@^4.0.5:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
|
||||
integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
|
||||
dependencies:
|
||||
braces "^3.0.2"
|
||||
picomatch "^2.3.1"
|
||||
|
||||
mime-db@1.52.0:
|
||||
version "1.52.0"
|
||||
resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
|
||||
|
|
@ -2393,7 +2532,7 @@ postcss@^5.2.17:
|
|||
source-map "^0.5.6"
|
||||
supports-color "^3.2.3"
|
||||
|
||||
postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.35, postcss@^8.4.36, postcss@^8.4.38, postcss@>=8.0.9, "postcss@>4 <9":
|
||||
postcss@^8.4.23, postcss@^8.4.35, postcss@^8.4.36, postcss@^8.4.38:
|
||||
version "8.4.38"
|
||||
resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz"
|
||||
integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
|
||||
|
|
@ -2547,7 +2686,7 @@ reusify@^1.0.4:
|
|||
resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
|
||||
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
|
||||
|
||||
rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, rollup@^4.13.0:
|
||||
rollup@^4.13.0:
|
||||
version "4.13.1"
|
||||
resolved "https://registry.npmjs.org/rollup/-/rollup-4.13.1.tgz"
|
||||
integrity sha512-hFi+fU132IvJ2ZuihN56dwgpltpmLZHZWsx27rMCTZ2sYwrqlgL5sECGy1eeV2lAihD8EzChBVVhsXci0wD4Tg==
|
||||
|
|
@ -2608,7 +2747,7 @@ safe-regex@^1.1.0:
|
|||
dependencies:
|
||||
ret "~0.1.10"
|
||||
|
||||
sass@*, sass@^1.72.0:
|
||||
sass@^1.72.0:
|
||||
version "1.72.0"
|
||||
resolved "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz"
|
||||
integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==
|
||||
|
|
@ -2622,7 +2761,7 @@ scule@^1.1.1:
|
|||
resolved "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz"
|
||||
integrity sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
|
||||
|
||||
semver@^5.5.0, "semver@2 || 3 || 4 || 5":
|
||||
"semver@2 || 3 || 4 || 5", semver@^5.5.0:
|
||||
version "5.7.1"
|
||||
resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
|
||||
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
|
||||
|
|
@ -2723,7 +2862,7 @@ snapdragon@^0.8.1:
|
|||
source-map-resolve "^0.5.0"
|
||||
use "^3.1.0"
|
||||
|
||||
source-map-js@^1.0.2, source-map-js@^1.2.0, "source-map-js@>=0.6.2 <2.0.0":
|
||||
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz"
|
||||
integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
|
||||
|
|
@ -2805,13 +2944,6 @@ strict-uri-encode@^1.0.0:
|
|||
resolved "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz"
|
||||
integrity sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==
|
||||
|
||||
string_decoder@^1.1.1:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz"
|
||||
integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
|
||||
dependencies:
|
||||
safe-buffer "~5.2.0"
|
||||
|
||||
string.prototype.padend@^3.0.0:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.3.tgz"
|
||||
|
|
@ -2849,6 +2981,13 @@ string.prototype.trimstart@^1.0.8:
|
|||
define-properties "^1.2.1"
|
||||
es-object-atoms "^1.0.0"
|
||||
|
||||
string_decoder@^1.1.1:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz"
|
||||
integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
|
||||
dependencies:
|
||||
safe-buffer "~5.2.0"
|
||||
|
||||
strip-ansi@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-3.0.1.tgz"
|
||||
|
|
@ -3086,7 +3225,7 @@ typedarray.prototype.slice@^1.0.3:
|
|||
typed-array-buffer "^1.0.2"
|
||||
typed-array-byte-offset "^1.0.2"
|
||||
|
||||
typescript@*, typescript@>=4.4.4, typescript@~5.4.3:
|
||||
typescript@~5.4.3:
|
||||
version "5.4.3"
|
||||
resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz"
|
||||
integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
|
||||
|
|
@ -3253,7 +3392,7 @@ vite-plugin-svg-icons@^2.0.1:
|
|||
svg-baker "1.7.0"
|
||||
svgo "^2.8.0"
|
||||
|
||||
vite@^5.0.0, vite@^5.2.6, vite@>=2.0.0:
|
||||
vite@^5.2.6:
|
||||
version "5.2.6"
|
||||
resolved "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz"
|
||||
integrity sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==
|
||||
|
|
@ -3311,7 +3450,7 @@ vue-tsc@^2.0.7:
|
|||
"@vue/language-core" "2.0.7"
|
||||
semver "^7.5.4"
|
||||
|
||||
"vue@^2.6.12 || ^3.1.1", "vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.4.21, "vue@2 || 3", vue@3.4.21:
|
||||
vue@^3.4.21:
|
||||
version "3.4.21"
|
||||
resolved "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz"
|
||||
integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==
|
||||
|
|
|
|||
Loading…
Reference in New Issue