静态页面
This commit is contained in:
张宁
parent
234673de5f
commit
d45f9a9d18
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<div ref="dropdownRef" class="dropdown">
|
||||
<!-- Dropdown button -->
|
||||
<button @click="toggleDropdown" style="width: 100%;">
|
||||
{{ selectedOption }}
|
||||
<!-- <svg
|
||||
:class="isOpen ? 'down' : ''"
|
||||
aria-hidden="true"
|
||||
class="icon icon-caret"
|
||||
role="presentation"
|
||||
viewBox="0 0 10 6"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</svg> -->
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<ul v-if="isOpen" class="dropdown-menu">
|
||||
<li v-for="(option, index) in options" :key="index" @click="selectOption(option)">
|
||||
{{ option.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
|
||||
export default {
|
||||
name: "DropdownMenu",
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
title:{
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
// Reactive variables
|
||||
const isOpen = ref(false); // Dropdown open/close state
|
||||
const selectedOption = ref(props.title); // Currently selected option 默认是标题
|
||||
const dropdownRef = ref(null); // Reference to dropdown element
|
||||
const { proxy } = getCurrentInstance();
|
||||
// Toggle dropdown open/close state
|
||||
const toggleDropdown = () => {
|
||||
isOpen.value = !isOpen.value;
|
||||
};
|
||||
|
||||
// Select an option from the dropdown
|
||||
const selectOption = (option) => {
|
||||
selectedOption.value = option.label; // Update selected option
|
||||
if (!option.value) {
|
||||
selectedOption.value = props.title
|
||||
}
|
||||
isOpen.value = false; // Close the dropdown
|
||||
// 将选择的值传递给父组件
|
||||
proxy.$emit("getOption", option.value);
|
||||
};
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
const closeDropdown = (event) => {
|
||||
if (!dropdownRef.value.contains(event.target)) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
// 清除选择数据
|
||||
const clearOption = () => {
|
||||
selectedOption.value = props.title;
|
||||
}
|
||||
|
||||
// Lifecycle hook: mounted
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
document.addEventListener("click", closeDropdown); // Listen for click events outside dropdown
|
||||
});
|
||||
});
|
||||
|
||||
// Lifecycle hook: unmounted
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("click", closeDropdown); // Remove event listener when component is unmounted
|
||||
});
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
selectedOption,
|
||||
toggleDropdown,
|
||||
selectOption,
|
||||
dropdownRef,
|
||||
clearOption
|
||||
};
|
||||
defineExpose({
|
||||
clearOption
|
||||
})
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown button {
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 10px);
|
||||
// background-color: #f9f9f9;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
min-width: 180px;
|
||||
max-height: 300px;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu li {
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-menu li:hover {
|
||||
background-color: rgb(35, 83, 147);
|
||||
}
|
||||
|
||||
.icon-caret {
|
||||
color: #666;
|
||||
stroke: #666;
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
margin-left: 0.3rem;
|
||||
stroke-width: 0.02rem;
|
||||
pointer-events: auto;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
&.down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置滚动条的宽度 */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -54,6 +54,7 @@ $item_title_content-height: calc(100% - 38px);
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
|
|||
// import { storeToRefs } from 'pinia';
|
||||
export const useSettingStore = defineStore('setting', () => {
|
||||
const settingShow = ref(false);//设置弹窗显隐
|
||||
const isScale = ref(true);//是否进行全局适配 --- 默认是适配的
|
||||
const isScale = ref(false);//是否进行全局适配 --- 默认是适配的
|
||||
const indexConfig = ref({
|
||||
leftBottomSwiper: true,//左轮播
|
||||
rightBottomSwiper: true,//右下轮播
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -14,9 +14,10 @@ const wrapperStyle = {};
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<scale-screen width="1920" height="1080" :delay="500" :fullScreen="false" :boxStyle="{
|
||||
<scale-screen width="1920" height="1080" :delay="500" :fullScreen="true" :boxStyle="{
|
||||
background: '#03050C',
|
||||
overflow: isScale ? 'hidden' : 'auto',
|
||||
// overflow: isScale ? 'hidden' : 'auto',
|
||||
overflow:'hidden'
|
||||
|
||||
}" :wrapperStyle="wrapperStyle" :autoScale="isScale">
|
||||
<div class="content_wrap">
|
||||
|
|
|
|||
|
|
@ -5,10 +5,44 @@ const test = () => {
|
|||
console.log("test", res);
|
||||
})
|
||||
};
|
||||
const returnHome = () => {
|
||||
history.go(-1)
|
||||
// window.location.href = 'http://nclg.yx.zheke.com/#/login';
|
||||
};
|
||||
// const returnHome = () => {
|
||||
// history.go(-1)
|
||||
// };
|
||||
const yearOptions = ref([{ label: '2024年', value: 2024 }, { label: '2023年', value: 2023 }, { label: '2022年', value: 2022 }, { label: '2021年', value: 2021 }, { label: '2020年', value: 2020 }])
|
||||
const monthOptions = ref([
|
||||
{ label: '/', value: null },
|
||||
{ label: '1月', value: 1 },
|
||||
{ label: '2月', value: 2 },
|
||||
{ label: '3月', value: 3 },
|
||||
{ label: '4月', value: 4 },
|
||||
{ label: '5月', value: 5 },
|
||||
{ label: '6月', value: 6 },
|
||||
{ label: '7月', value: 7 },
|
||||
{ label: '8月', value: 8 },
|
||||
{ label: '9月', value: 9 },
|
||||
{ label: '10月', value: 10 },
|
||||
{ label: '11月', value: 11 },
|
||||
{ label: '12月', value: 12 },
|
||||
])
|
||||
// 获取选择的年
|
||||
const getYear = (val: any) => {
|
||||
console.log(val)
|
||||
}
|
||||
// 获取选择的月
|
||||
const getMonth = (val: any) => {
|
||||
console.log(val)
|
||||
}
|
||||
const selectYear = ref(null)
|
||||
const selectMonth = ref(null)
|
||||
const clearSelect = () => {
|
||||
if (selectYear.value) {
|
||||
selectYear.value.clearOption()
|
||||
}
|
||||
if (selectMonth.value) {
|
||||
selectMonth.value.clearOption()
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -16,7 +50,7 @@ const returnHome = () => {
|
|||
<div class="top-left">
|
||||
<div class="title">
|
||||
<span class="title-text" @click="test()">新生报道情况</span>
|
||||
<span style="color: yellow;" @click="returnHome()">返回</span>
|
||||
<!-- <span style="color: yellow;" @click="returnHome()">返回</span> -->
|
||||
</div>
|
||||
<div class="en-title">
|
||||
<div class="en-line"></div>
|
||||
|
|
@ -25,8 +59,14 @@ const returnHome = () => {
|
|||
</div>
|
||||
|
||||
<div class="change-time">
|
||||
<div class="change-year">切换年份</div>
|
||||
<div class="change-year">切换月份</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="clearSelect">选择今日</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -42,9 +82,10 @@ const returnHome = () => {
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.top-left{
|
||||
.top-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
// position: relative;
|
||||
width: 300px;
|
||||
|
|
@ -52,6 +93,7 @@ const returnHome = () => {
|
|||
// color: transparent;
|
||||
height: 60px;
|
||||
line-height: 46px;
|
||||
|
||||
.title-text {
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-size: 38px;
|
||||
|
|
@ -73,7 +115,8 @@ const returnHome = () => {
|
|||
// line-height: 40px;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
.en-line{
|
||||
|
||||
.en-line {
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background-color: #ADC0DE;
|
||||
|
|
@ -84,12 +127,12 @@ const returnHome = () => {
|
|||
.change-time {
|
||||
// position: relative;
|
||||
// float: right;
|
||||
width: 300px;
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
|
||||
|
||||
.change-year {
|
||||
|
|
|
|||
|
|
@ -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 +1,210 @@
|
|||
<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>
|
||||
<div id="mapChart" style="width: 100%; height: 100%;display: flex;justify-content: center;"></div>
|
||||
</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;
|
||||
<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:120px;background:rgba(0, 0, 0, .5); font-size: 14px; padding-bottom: 3px;">';
|
||||
// html += '<span style="display:block;width:100%;text-align:center;padding:5px 0; color: #ffffff;border-bottom:1px solid #fff;font-weight:bold">' + (params.name) + '</span>'; // 显示名称
|
||||
// html += '<span style="margin:3px 0 0 0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招本科：' + (params.data.num3 || 0) + '</span>'; // 显示人数
|
||||
// html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专科：' + (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.data.num2) {
|
||||
// html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专升本：' + (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: '#0D59C1', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#b4d9c7', // 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,
|
||||
|
||||
.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;
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
const resize = () => {
|
||||
myChart.value.resize();
|
||||
}
|
||||
onMounted(() => {
|
||||
getMapChart();
|
||||
window.addEventListener('resize', () => { resize(); getRem(1700, 100) })
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', () => { resize() })
|
||||
})
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center-top">
|
||||
<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">今日迎新人数</div>
|
||||
<div class="top-item-content">{{ 12404 }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title">今日预报到人数</div>
|
||||
<div class="top-item-content">{{ 12404 }}</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item-title">今日预报到报到率</div>
|
||||
<div class="top-item-content"> 95% </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"> 95% </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.top-item-img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -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,51 +1,59 @@
|
|||
<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 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";
|
||||
const showRight = ref(true)
|
||||
const changeRight = () => {
|
||||
showRight.value = !showRight.value
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="index-box">
|
||||
<div class="contetn_left">
|
||||
<zkItem class="contetn_left-top contetn_lr-item" title="迎新进度">
|
||||
<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_lr-item"
|
||||
title=""
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<zkItem class="contetn_left-bottom contetn_lb-item" title="" >
|
||||
<LeftBottom />
|
||||
</zkItem>
|
||||
</div>
|
||||
<div class="contetn_center">
|
||||
<CenterMap class="contetn_center_top" title="全国地图" />
|
||||
<CenterTop class="contetn_center_top" />
|
||||
<CenterMap class="contetn_center_map" title="全国地图" />
|
||||
</div>
|
||||
<div class="contetn_right">
|
||||
<zkItem class="contetn_left-bottom contetn_lr-item" title="缴费人数">
|
||||
<div class="contetn_right" v-if="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_lr-item"
|
||||
title="当日缴费人数"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<zkItem class="contetn_left-bottom contetn_rc-item" title="当日缴费人数" style="padding: 0 10px 16px 10px">
|
||||
<RightCenter />
|
||||
</zkItem>
|
||||
<zkItem class="contetn_left-bottom contetn_lr-item" title="报道人数区域排名 ">
|
||||
<zkItem class="contetn_left-bottom contetn_rb-item" title="报道人数区域排名 ">
|
||||
<RightBottom />
|
||||
</zkItem>
|
||||
</div>
|
||||
<div class="contetn_right" v-else>
|
||||
<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 />
|
||||
</zkItem>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,32 +64,75 @@ import RightBottom from "./right-bottom.vue";
|
|||
min-height: calc(100% - 64px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
//左边 右边 结构一样
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
// justify-content: space-around;
|
||||
position: relative;
|
||||
width: 540px;
|
||||
width: 470px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 16px;
|
||||
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, #003, #000), linear-gradient(0deg,rgba(43,74,158,0.18),#5999FC);
|
||||
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;
|
||||
justify-content: space-around;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
<script setup lang="ts">
|
||||
import { color } from "echarts";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const option = ref({});
|
||||
const getData = () => {
|
||||
var dataValArray = 0.63;
|
||||
var datatext = ['17.25', '20', '12', '32', '19'];
|
||||
var datasubtext = ['体育意识', '体育技能', '体育行为', '体育知识', '体质健康'];
|
||||
setOption(datatext, datasubtext, dataValArray)
|
||||
};
|
||||
const Green = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#99da69' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#01babc' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
};
|
||||
const setOption = async (datatext: any[], datasubtext: any[], dataValArray: any) => {
|
||||
option.value = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: datatext[0] + '%',
|
||||
subtext: datasubtext[0],
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 26,
|
||||
fontWeight: 'normal',
|
||||
color: ['#67828c']
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#67828c',
|
||||
fontSize: 16,
|
||||
align: 'center',
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
//渐变圆环
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["35%", "50%"],
|
||||
startAngle: 180,
|
||||
hoverAnimation: false,
|
||||
avoidLabelOverlap: true,
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
label: {
|
||||
show: false,
|
||||
normal: { show: false }
|
||||
},
|
||||
data: [{
|
||||
value: 0,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: Green
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
//仪表盘样式
|
||||
name: "",
|
||||
type: "gauge",
|
||||
radius: "50%",
|
||||
startAngle: 180,
|
||||
clockwise: true,
|
||||
splitNumber: 50,
|
||||
hoverAnimation: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
length: 20,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: Math.round((dataValArray * 100)),
|
||||
name: ""
|
||||
}]
|
||||
},
|
||||
{
|
||||
//进度圆环
|
||||
name: 'Line 1',
|
||||
type: 'pie',
|
||||
startAngle: 180,
|
||||
clockWise: true,
|
||||
radius: ['55%', '56%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
},
|
||||
hoverAnimation: false,
|
||||
|
||||
data: [{
|
||||
value: Math.round((dataValArray * 100)),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#20da97'
|
||||
}
|
||||
}
|
||||
}, {//画中间的图标
|
||||
name: "",
|
||||
value: 0,
|
||||
label: {
|
||||
position: 'inside',
|
||||
// backgroundColor: {
|
||||
// image: uploadedDataURL
|
||||
// },
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 20,
|
||||
padding: 11
|
||||
}
|
||||
}, {
|
||||
value: 100 - Math.round((dataValArray * 100)),
|
||||
name: 'invisible',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent', //未完成的圆环的颜色
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -1,229 +1,81 @@
|
|||
<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="left-bottom">
|
||||
<div class="content">
|
||||
<div class="title">预报到报到率</div>
|
||||
<div class="left-content"></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"></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="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%;
|
||||
}
|
||||
.left-bottom {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.doudong {
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.title {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.left-content {
|
||||
width: 105px;
|
||||
height: 105px;
|
||||
background: url("@/assets/img/zheke/lb_left.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.left_boottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.right-content {
|
||||
width: 105px;
|
||||
height: 105px;
|
||||
background: url("@/assets/img/zheke/lb_right.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.left_boottom_item {
|
||||
.bottom-title {
|
||||
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;
|
||||
}
|
||||
.icons {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #00214d;
|
||||
}
|
||||
.tips{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,158 +1,141 @@
|
|||
<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" />
|
||||
<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">12,000</p>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="right-title title-top item-title">报到率
|
||||
<span class="title-num numBlue">84.5%</span>
|
||||
</div>
|
||||
<p class="item-title">今日报到人数</p>
|
||||
<p class="item-content numBlue">3,000</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">12,000</p>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="right-title title-top item-title">报到率
|
||||
<span class="title-num numGreen">84.5%</span>
|
||||
</div>
|
||||
<p class="item-title">今日报到人数</p>
|
||||
<p class="item-content numGreen">3,000</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">12,000</p>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="right-title title-top item-title">报到率
|
||||
<span class="title-num numGrey">84.5%</span>
|
||||
</div>
|
||||
<p class="item-title">今日报到人数</p>
|
||||
<p class="item-content numGrey">3,000</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,115 @@
|
|||
</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">{{ 11024 }}</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"> {{ 11024 }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-bottom">
|
||||
<div class="bottom-item">
|
||||
<div class="bottom-item-title">预报到总人数</div>
|
||||
<div class="bottom-item-content"> {{ 11024 }} </div>
|
||||
</div>
|
||||
<div class="bottom-item">
|
||||
<div class="bottom-item-title">录取总人数</div>
|
||||
<div class="bottom-item-content"> {{ 11024 }} </div>
|
||||
</div>
|
||||
<div class="bottom-item">
|
||||
<div class="bottom-item-title">迎新总进度</div>
|
||||
<div class="bottom-item-content"> 95% </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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<script setup lang="ts">
|
||||
import { color } from "echarts";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const option = ref({});
|
||||
const getData = () => {
|
||||
let dateList = ['飞行棋制造工程', '航空服务艺术与管理', '空中乘务', '飞行技术', '航空航天工程', "飞行器数字化制造技术"]
|
||||
let numList = [1, 5, 2, 4, 9, 6]
|
||||
setOption(dateList, numList)
|
||||
};
|
||||
const setOption = async (xData: any[], yData: any[]) => {
|
||||
option.value = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: true, // 是否留白，从原点开始
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
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",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "bar",
|
||||
smooth: false,
|
||||
name: "当日缴费人数",
|
||||
color: "#2265ff",
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'top', // 在上方显示
|
||||
color: '#999',
|
||||
fontSize: 12,
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<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";
|
||||
|
|
@ -13,30 +12,731 @@ const state = reactive<any>({
|
|||
list: [],
|
||||
defaultOption: {
|
||||
...defaultOption.value,
|
||||
singleHeight: 252,
|
||||
singleHeight: 205, //单步运动停止的高度，与滚动盒子的高度进行适配
|
||||
limitScrollNum: 3,
|
||||
// step:3
|
||||
// singleWaitTime:3000, // 停顿间隔
|
||||
step:1 //滚动速度，数字越大，滚动越快
|
||||
},
|
||||
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);
|
||||
});
|
||||
state.list = [
|
||||
{
|
||||
"provinceName": "北京",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "上海",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "天津",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "重庆",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "河北",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 1
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "山西",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "内蒙古",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "辽宁",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "吉林",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "黑龙江",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "江苏",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "浙江",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "安徽",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "福建",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "江西",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "山东",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 1
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "河南",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 1
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "湖北",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "湖南",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "广东",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "广西",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "海南",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "四川",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "贵州",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "云南",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "西藏",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "陕西",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "甘肃",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "青海",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "宁夏",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "香港",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "澳门",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "台湾",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"provinceName": "新疆",
|
||||
"progress": 0,
|
||||
"degreesDto": [
|
||||
{
|
||||
"degreesName": "统招专科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招专升本",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
},
|
||||
{
|
||||
"degreesName": "统招本科",
|
||||
"paymentCompleted": 0,
|
||||
"nonPayment": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const comName = computed(() => {
|
||||
|
|
@ -46,75 +746,34 @@ const comName = computed(() => {
|
|||
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 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 }">
|
||||
<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 state.list">
|
||||
<div class="row-item">{{ i + 1 }}</div>
|
||||
<div class="row-item">{{ item.provinceName }}</div>
|
||||
<div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
|
||||
</div>
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -123,69 +782,46 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.right_center_item {
|
||||
.table-title {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: #545e70;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid #33343F;
|
||||
|
||||
.orderNum {
|
||||
margin: 0 20px 0 -20px;
|
||||
}
|
||||
.title-item {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
|
||||
.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;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1,44 +1,151 @@
|
|||
<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 option = 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);
|
||||
});
|
||||
let dateList = ['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', "2022-04"]
|
||||
let numList = [1, 5, 2, 4, 9, 6]
|
||||
let numList2 = [6, 5, 4, 3, 2, 1]
|
||||
setOption(dateList, numList, numList2)
|
||||
};
|
||||
getData();
|
||||
const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
|
||||
option.value = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: false, // 不留白，从原点开始
|
||||
splitLine: {
|
||||
// show: false,
|
||||
// lineStyle: {
|
||||
// color: "rgba(31,99,163,.2)",
|
||||
// },
|
||||
},
|
||||
axisLine: {
|
||||
show: false, // 去除轴线
|
||||
// lineStyle: {
|
||||
// color: "rgba(31,99,163,.1)",
|
||||
// },
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false, // 去除网格线
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff", // 轴标文字颜色
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: false,
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "0px",
|
||||
top: "100px",
|
||||
containLabel: true,
|
||||
// borderColor: "#1F63A3",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle", // 拐点样式 -- 这里是个圆
|
||||
symbolSize:7, // 拐点大小
|
||||
name: "当日缴费人数",
|
||||
// color: "rgba(9,202,243,.7)",
|
||||
color:'#fff',
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#09CAF3",
|
||||
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
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="right_bottom">
|
||||
<CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
|
||||
</div>
|
||||
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right_bottom {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,260 @@
|
|||
<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);
|
||||
const state = reactive<any>({
|
||||
list: [],
|
||||
defaultOption: {
|
||||
...defaultOption.value,
|
||||
singleHeight: 535, //单步运动停止的高度，与滚动盒子的高度进行适配
|
||||
limitScrollNum: 3,
|
||||
// singleWaitTime:3000, // 停顿间隔
|
||||
step: 1 //滚动速度，数字越大，滚动越快
|
||||
},
|
||||
scroll: true,
|
||||
});
|
||||
|
||||
const getData = () => {
|
||||
state.list = [
|
||||
{
|
||||
"collegeName": "机电工程学院",
|
||||
"collegeId": "08db7155-bdf1-4633-884e-95735ef931f2",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "美术与设计学院",
|
||||
"collegeId": "08db81af-0a80-4dd8-8bd6-06e7020530b9",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "人文教育学院",
|
||||
"collegeId": "08db81af-168b-402d-87d1-bdd7ee3c4c47",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "体育学院",
|
||||
"collegeId": "08db81af-2af2-491e-8a45-a15a4fd43431",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "医学院",
|
||||
"collegeId": "08db81af-5df9-4b57-834e-3ee6bbf307d4",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "音乐学院",
|
||||
"collegeId": "08db81af-73b7-40e0-8103-2c38a19d03cc",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "冰冰艺术学院",
|
||||
"collegeId": "08dc6f26-c565-49d7-8dc8-2bc8926d8516",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "社会科学研究院",
|
||||
"collegeId": "08dc70b7-825a-4298-83cc-e3eaf08abf52",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 3
|
||||
},
|
||||
{
|
||||
"collegeName": "绿色生态学院",
|
||||
"collegeId": "08dc70b7-a640-49af-8ab7-9f520aac02d9",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 2
|
||||
},
|
||||
{
|
||||
"collegeName": "建筑工程学院",
|
||||
"collegeId": "08db81ae-fc5f-424e-868b-503bd234e8f2",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "计算机信息工程学院",
|
||||
"collegeId": "08db81ae-e39d-4155-8d7a-c118d629e422",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "航天航空学院",
|
||||
"collegeId": "08db7156-2004-4be4-8dfe-1ac36ebdb422",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "外国语学院",
|
||||
"collegeId": "08db716b-7370-4ef3-812e-7edd113ff017",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "电子与信息学院",
|
||||
"collegeId": "08db721b-e050-4480-8087-60a179e75d16",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "工商管理学院",
|
||||
"collegeId": "08db751e-3c7a-406a-814e-f81580e3e1c3",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "财经学院",
|
||||
"collegeId": "08db7882-089f-4105-8d01-920fa1e7327a",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "传媒学院",
|
||||
"collegeId": "08db81ae-3f52-4765-8c8b-459f4b947a2c",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "法学院",
|
||||
"collegeId": "08db81ae-721b-4e41-8fd7-4ecdb0b00508",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 2
|
||||
},
|
||||
{
|
||||
"collegeName": "国际交流学院",
|
||||
"collegeId": "08db81ae-9d43-4ae0-8d0f-541ba77af10d",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
},
|
||||
{
|
||||
"collegeName": "xie学院",
|
||||
"collegeId": "08dc79fe-336b-49db-8c74-7e1a3184f2d7",
|
||||
"isTeacher": false,
|
||||
"reportNumber": 0,
|
||||
"totalNumber": 0
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const comName = computed(() => {
|
||||
if (indexConfig.value.rightBottomSwiper) {
|
||||
return SeamlessScroll;
|
||||
} else {
|
||||
return EmptyCom;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</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 }">
|
||||
<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 state.list">
|
||||
<div class="row-item">{{ i + 1 }}</div>
|
||||
<div class="row-item">{{ item.collegeName }}</div>
|
||||
<div class="row-item">{{ item.reportNumber }}</div>
|
||||
<div class="row-item">{{ item.totalNumber }}</div>
|
||||
<div class="row-item">{{ '0%' }}</div>
|
||||
<!-- <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div> -->
|
||||
</div>
|
||||
</component>
|
||||
</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;
|
||||
|
||||
&: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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,233 +1,88 @@
|
|||
<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) != '{}'" />
|
||||
<div class="right-top">
|
||||
<div class="items">
|
||||
<div class="item-title">已缴费人数</div>
|
||||
<div class="item-content">12,120</div>
|
||||
</div>
|
||||
<div class="items item-two">
|
||||
<div class="item-title">已报到未缴费人数</div>
|
||||
<div class="item-content">4,049</div>
|
||||
</div>
|
||||
<div class="items item-three">
|
||||
<div class="item-title">生活用品缴费人数</div>
|
||||
<div class="item-content">4,049</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue