zhc077
/
hnjd_comp
forked from wangjiadong/comp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工作台

Browse Source
main
significative 5 months ago
parent 9f34bab874
commit b91cded52d
6 changed files with 1378 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 320
      jeecgboot-vue3-master/src/views/depart/workbench/components/chDepartment/index.vue
  2. 220
      jeecgboot-vue3-master/src/views/depart/workbench/components/chDepartment/options.js
  3. 296
      jeecgboot-vue3-master/src/views/depart/workbench/components/chExpert/index.vue
  4. 455
      jeecgboot-vue3-master/src/views/depart/workbench/components/chSchool/index.vue
  5. 2
      jeecgboot-vue3-master/src/views/depart/workbench/components/index.ts
  6. 4
      jeecgboot-vue3-master/src/views/depart/workbench/index.vue

320
jeecgboot-vue3-master/src/views/depart/workbench/components/chDepartment/index.vue
Unescape View File

@ -1,6 +1,8 @@
<template> <template>
<div class="department"> <div class="department">
<div class="header"> <div class="header">
<a-row :gutter="[16, 16]" type="flex" justify="space-between" style="width: 100%;">
<a-col :xs="12" :xl="6">
<div class="card"> <div class="card">
<div class="top"> <div class="top">
<div class="text"> <div class="text">
@ -19,6 +21,9 @@
<div class="bot_card">校赛：24</div> <div class="bot_card">校赛：24</div>
</div> </div>
</div> </div>
</a-col>
<a-col :xs="12" :xl="6">
<div class="card"> <div class="card">
<div class="top"> <div class="top">
<div class="text"> <div class="text">
@ -37,6 +42,8 @@
<div class="bot_card">校赛：24</div> <div class="bot_card">校赛：24</div>
</div> </div>
</div> </div>
</a-col>
<a-col :xs="12" :xl="6">
<div class="card"> <div class="card">
<div class="top"> <div class="top">
<div class="text"> <div class="text">
@ -55,8 +62,8 @@
<div class="bot_card">校赛：26</div> <div class="bot_card">校赛：26</div>
</div> </div>
</div> </div>
</a-col>
<a-col :xs="12" :xl="6">
<div class="card2"> <div class="card2">
<div class="top"> <div class="top">
<div class="text"> <div class="text">
@ -81,9 +88,13 @@
</div> </div>
</div> </div>
</div> </div>
</a-col>
</a-row>
</div> </div>
<div class="content"> <div class="content">
<a-row :gutter="[17, 16]" type="flex" justify="space-between" style="width: 100%;">
<a-col :xs="24" :xl="7">
<div class="con_left"> <div class="con_left">
<div class="title-box"> <div class="title-box">
<div class="title">部门比赛情况分布</div> <div class="title">部门比赛情况分布</div>
@ -92,17 +103,83 @@
<div id="ec" ref="ec"></div> <div id="ec" ref="ec"></div>
</div> </div>
</div> </div>
</a-col>
<a-col :xs="24" :xl="17">
<div class="con_right"> <div class="con_right">
<div class="title-box"> <div class="title-box">
<div class="tit">部门近两年维度积分</div> <div class="tit">部门近两年维度积分</div>
<div class="bas"></div> <div class="bas"></div>
</div> </div>
<div class="ec-box">
<!-- 柱状图 -->
<div id="ec_bar" ref="ec_bar"></div>
<div class="infor">
<ul class="card-box">
<li v-for="i in 12" :key="i">
<div class="ol">{{ i }}</div>
<div class="text">奠定基础</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</a-col>
</a-row>
</div>
<div class="footer"> <div class="footer">
<div class="foo_card"></div> <a-row :gutter="[25, 16]" type="flex" justify="space-between" style="width: 100%;">
<div class="foo_card"></div> <a-col :xs="24" :xl="12">
<div class="foo_card">
<div class="title">
部门比赛积分排名
</div>
<div class="table">
<div class="t_item t_head">
<div class="ranking">排名</div>
<div class="name">比赛名称</div>
<div class="total">比赛积分</div>
<div class="operate">操作</div>
</div>
<div class="t_item t_con" v-for="i in 6" :key="i">
<div class="ranking">
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div>
</div>
<div class="name">国家电网竞赛</div>
<div class="total">7059</div>
<div class="operate">详情</div>
</div>
</div>
</div>
</a-col>
<a-col :xs="24" :xl="12">
<div class="foo_card">
<div class="title">
部门学生积分排名
</div>
<div class="table">
<div class="t_item t_head">
<div class="ranking">排名</div>
<div class="name">参赛选手名</div>
<div class="total">比赛积分</div>
<div class="operate">操作</div>
</div>
<div class="t_item t_con" v-for="i in 6" :key="i">
<div class="ranking">
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div>
</div>
<div class="name">王晨</div>
<div class="total">4221</div>
<div class="operate">详情</div>
</div>
</div>
</div>
</a-col>
</a-row>
</div> </div>
</div> </div>
</template> </template>
@ -110,17 +187,72 @@
import { Progress as AProgress } from 'ant-design-vue'; import { Progress as AProgress } from 'ant-design-vue';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { optionRing } from './options' import { optionRing, optionBar } from './options'
const ec = ref() const ec = ref()
const ec_bar = ref()
onMounted(() => { onMounted(() => {
const myChart = echarts.init(ec.value); const myChart = echarts.init(ec.value);
myChart.setOption(optionRing); myChart.setOption(optionRing);
const bar = echarts.init(ec_bar.value);
bar.setOption(optionBar);
window.addEventListener('resize', function () {
myChart.resize()
bar.resize()
})
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
::v-deep #ec_bar .bar_card {
width: 120px;
height: 116px;
background: #FFFFFF;
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
border-radius: 3px 3px 3px 3px;
border: 1px solid #DCDCDC;
opacity: 0.98;
padding-top: 16px;
padding-left: 16px;
.title {
height: 20px;
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
line-height: 20px;
margin-bottom: 16px;
}
.item {
padding-left: 24px;
position: relative;
height: 20px;
font-size: 12px;
color: rgba(0, 0, 0, 0.9);
line-height: 20px;
&::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #0052D9;
border-radius: 50%;
}
}
}
::v-deep #ec_bar>div[style*="z-index: 9999999;"] {
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
.department { .department {
padding: 16px 16px 0; padding: 16px 16px 0;
@ -134,6 +266,8 @@ onMounted(() => {
.card, .card,
.card2 { .card2 {
width: 405px; width: 405px;
// width: 24.251%;
width: 100%;
height: 182px; height: 182px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
@ -244,7 +378,8 @@ onMounted(() => {
margin-top: 16px; margin-top: 16px;
.con_left { .con_left {
width: 489px; // width: 489px;
width: 100%;
height: 459px; height: 459px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
@ -281,18 +416,22 @@ onMounted(() => {
} }
.con_right { .con_right {
width: 1160px; // width: 1160px;
width: 100%;
height: 458px; height: 458px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
padding-left: 16px; // padding-left: 16px;
display: flex;
flex-direction: column;
.title-box { .title-box {
height: 57px; height: 57px;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
padding-left: 16px;
.tit { .tit {
height: 26px; height: 26px;
@ -304,7 +443,7 @@ onMounted(() => {
.bas { .bas {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 16px;
width: 100%; width: 100%;
height: 1px; height: 1px;
border: 1px solid rgba(5, 5, 5, 0.06); border: 1px solid rgba(5, 5, 5, 0.06);
@ -321,6 +460,71 @@ onMounted(() => {
} }
} }
} }
.ec-box {
display: flex;
justify-content: space-between;
flex-grow: 1;
column-gap: 22px;
padding-left: 39px;
#ec_bar {
flex-grow: 1;
}
.infor {
width: 241px;
display: flex;
.card-box {
margin: auto;
width: 100%;
height: 177px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
row-gap: 9px;
li {
width: 110px;
height: 22px;
font-size: 14px;
color: rgba(51, 51, 51, 0.88);
line-height: 22px;
display: flex;
justify-content: space-between;
align-items: center;
&:nth-child(1)>.ol,
&:nth-child(2)>.ol,
&:nth-child(3)>.ol {
background-color: #314659;
color: #fff;
}
.ol {
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
text-align: center;
background: #F5F5F5;
color: #000000;
font-size: 12px;
}
.text {
width: 67px;
font-size: 14px;
color: rgba(51, 51, 51, 0.88);
}
}
}
}
}
} }
} }
@ -328,11 +532,107 @@ onMounted(() => {
margin-top: 21px; margin-top: 21px;
.foo_card { .foo_card {
width: 820px; // width: 820px;
width: 100%;
height: 502px; height: 502px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
padding: 0 32px;
.title {
padding-left: 23px;
height: 57px;
line-height: 57px;
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
position: relative;
&::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(5, 5, 5, 0.06);
}
}
.table {
width: 100%;
padding-left: 32px;
.t_item {
width: 100%;
height: 54px;
border-bottom: 1px solid #E7E7E7;
display: flex;
align-items: center;
.ranking {
// width: 80px;
width: calc((80 / 756) * 100%);
}
.name {
// width: 542px;
width: calc((542 / 756) * 100%);
}
.total {
// width: 74px;
width: calc((74 / 756) * 100%);
}
.operate {
// width: 60px;
width: calc((60 / 756) * 100%);
}
}
.t_head {
font-size: 14px;
color: rgba(0, 0, 0, 0.4);
}
.t_con {
.ranking {
.ol {
width: 24px;
height: 24px;
background: #E7E7E7;
color: rgba(0, 0, 0, 0.9);
font-size: 14px;
line-height: 24px;
text-align: center;
border-radius: 50%;
&.ac {
background: #0052D9;
color: rgba(255, 255, 255, 0.9);
}
}
}
.name {
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
}
.total {
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
}
.operate {
font-size: 14px;
color: #0052D9;
cursor: pointer;
}
}
}
} }
} }

220
jeecgboot-vue3-master/src/views/depart/workbench/components/chDepartment/options.js
Unescape View File

@ -14,7 +14,7 @@ export const optionRing = {
series: [ series: [
{ {
type: 'pie', type: 'pie',
center:['50%', '41%'], center: ['50%', '41%'],
radius: ['35%', '45%'], radius: ['35%', '45%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
@ -39,3 +39,221 @@ export const optionRing = {
} }
] ]
}; };
export const optionBar = {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴触发
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985' // 自定义交叉线标签的背景色
}
},
formatter: function (params) {
let result = '<div class="bar_card">';
result += `<div class="title">维度名称</div>`
params.forEach(param => {
result += `<div class="item" style="color: ${param.color};">
${param.seriesName}年 ${param.value}
</div>`;
});
result += '</div>';
return result;
}
},
grid: {
left: '0%',
right: '0%',
top: '5%',
bottom: '86px',
// 如果需要，还可以设置containLabel来控制坐标轴标签是否完全包含在grid区域内
containLabel: true
},
legend: {
data: ['2023', '2024'],
bottom: '39px',
},
xAxis: {
data: ['维度一', '维度一', '维度一', '维度一', '维度一', '维度一', '维度一']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
},
series: [
{
name: '2023',
type: 'bar',
data: [33, 44, 58, 85, 47, 38, 45],
barWidth: '20px',
itemStyle: {
color: '#0052D9',
}
},
{
name: '2024',
type: 'bar',
data: [36, 34, 48, 62, 43, 30, 37],
barWidth: '20px',
itemStyle: {
color: '#699EF5',
}
},
]
};
var colorArr = ['#fff', '#fff']; //颜色
var dataArr = [
{
value: [4000, 700, 3600, 3900, 1800, 4200, 700, 3600, 4200, 700, 3600, 4200, 700, 3600],
name: '1',
itemStyle: {
normal: {
lineStyle: {
color: '#55d7f2',
},
shadowColor: '#4A99FF',
shadowBlur: 10,
},
},
areaStyle: {
normal: {
// 单项区域填充样式
color: {
type: 'linear',
x: 1, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [
{
offset: 0,
color: '#f0a223',
},
{
offset: 1,
color: '#093138',
},
],
globalCoord: false,
},
opacity: 1, // 区域透明度
},
},
},
];
var indicator = [
{
text: '前言探索',
max: 6000,
},
{
text: '奠定基础',
max: 5000,
},
{
text: '知识分析',
max: 5000,
},
{
text: '社会责任',
max: 5000,
},
{
text: '独立思考',
max: 5500,
},
{
text: '拓宽视野',
max: 5000,
},
{
text: '激发兴趣',
max: 5000,
},
{
text: '沟通协调',
max: 5000,
},
{
text: '设计开发',
max: 5000,
},
{
text: '研判分析',
max: 5000,
},
{
text: '创新能力',
max: 5000,
},
{
text: '团队协作',
max: 5000,
},
];
export const optionRadar = {
backgroundColor: "transparent",
color: colorArr,
// legend: {
// orient: "vertical",
// // icon: 'circle', //图例形状
// // data: legendData,
// top: 0,
// left: 20,
// itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
// itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
// itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
// textStyle: {
// fontSize: 12,
// fontWeight: "bold",
// color: "#00E4FF",
// },
// },
tooltip: {
trigger: 'item'
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: "#9ca4a6",
fontSize: 12,
},
},
indicator: indicator,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
},
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: "#2a5f61",
},
},
splitLine: {
lineStyle: {
color: "#2a5f61", // 分隔线颜色
width: 1, // 分隔线线宽
},
},
},
series: [
{
type: "radar",
symbolSize: 6,
symbol: "circle",
data: dataArr,
},
],
};

296
jeecgboot-vue3-master/src/views/depart/workbench/components/chExpert/index.vue
Unescape View File

@ -0,0 +1,296 @@
<template>
<div class="expert">
<a-row :gutter="[16, 16]" type="flex" justify="space-between">
<a-col :md="24" :xl="12">
<a-row :gutter="[16, 16]" type="flex" justify="space-between">
<a-col :span="12">
<div class="card">
<div class="top">
<div class="text">
本年度已开展比赛数
</div>
<Icon icon="mainHome-time|svg" :size="20" />
</div>
<div class="center">
<div class="text">
67
</div>
</div>
<div class="bottom">
<div class="bot_card">国赛：12</div>
<div class="bot_card">省赛：12</div>
<div class="bot_card">校赛：24</div>
</div>
</div>
</a-col>
<a-col :span="12">
<div class="card">
<div class="top">
<div class="text">
本年度已开展比赛数
</div>
<Icon icon="mainHome-time|svg" :size="20" />
</div>
<div class="center">
<div class="text">
67
</div>
</div>
<div class="bottom">
<div class="bot_card">国赛：12</div>
<div class="bot_card">省赛：12</div>
<div class="bot_card">校赛：24</div>
</div>
</div>
</a-col>
<a-row style="margin-top: 8px;width: 100%;">
<a-col :span="24">
<div class="foo_card">
<div class="title">
参与评分的比赛
</div>
<div class="table">
<div class="t_item t_head">
<div class="ranking">排名</div>
<div class="name">比赛名称</div>
<div class="total">比赛状态</div>
<div class="operate">操作</div>
</div>
<div class="t_item t_con" v-for="i in 6" :key="i">
<div class="ranking">
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div>
</div>
<div class="name">国家电网竞赛</div>
<div class="total">已完赛</div>
<div class="operate">详情</div>
</div>
</div>
</div>
</a-col>
</a-row>
</a-row>
</a-col>
<a-col :md="24" :xl="12">
<!-- 带评分 -->
<div class="tape-score foo_card">
<div class="title">
参与评分的比赛
</div>
<div class="table">
<div class="t_item t_con" v-for="i in 6" :key="i">
<div class="name">金话筒主持人大赛</div>
<div class="total">已完赛</div>
<div class="operate">详情</div>
</div>
</div>
</div>
</a-col>
</a-row>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="less" scoped>
.expert {
padding-top: 16px;
padding-left: 16px;
.card {
width: 100%;
width: 100%;
height: 182px;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
border-radius: 4px 4px 4px 4px;
padding: 20px 24px 0;
.top {
display: flex;
justify-content: space-between;
.text {
height: 22px;
font-family: Inter, Inter;
font-weight: 400;
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.center {
margin-top: 4px;
width: 357px;
height: 78px;
border-radius: 0px 0px 0px 0px;
display: flex;
align-items: center;
.text {
height: 38px;
font-family: Inter, Inter;
font-weight: 400;
font-size: 48px;
color: rgba(51, 51, 51, 0.88);
line-height: 38px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.bottom {
margin-top: 18px;
display: flex;
justify-content: space-between;
.bot_card {
width: 91px;
height: 22px;
font-family: Inter, Inter;
font-weight: 400;
font-size: 14px;
color: rgba(51, 51, 51, 0.88);
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
}
.foo_card {
width: 100%;
height: 502px;
background: #FFFFFF;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px 6px 6px 6px;
.title {
padding-left: 23px;
height: 57px;
line-height: 57px;
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
position: relative;
&::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(5, 5, 5, 0.06);
}
}
.table {
width: 100%;
padding-left: 32px;
.t_item {
width: 100%;
height: 54px;
border-bottom: 1px solid #E7E7E7;
display: flex;
align-items: center;
.ranking {
width: calc((80 / 756) * 100%);
}
.name {
width: calc((542 / 756) * 100%);
}
.total {
width: calc((74 / 756) * 100%);
}
.operate {
width: calc((60 / 756) * 100%);
}
}
.t_head {
font-size: 14px;
color: rgba(0, 0, 0, 0.4);
}
.t_con {
.ranking {
.ol {
width: 24px;
height: 24px;
background: #E7E7E7;
color: rgba(0, 0, 0, 0.9);
font-size: 14px;
line-height: 24px;
text-align: center;
border-radius: 50%;
&.ac {
background: #0052D9;
color: rgba(255, 255, 255, 0.9);
}
}
}
.name {
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
}
.total {
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
}
.operate {
font-size: 14px;
color: #0052D9;
cursor: pointer;
}
}
}
}
.tape-score {
height: 708px;
.table {
.t_item {
width: 100%;
height: 54px;
border-bottom: 1px solid #E7E7E7;
display: flex;
align-items: center;
.name {
width: calc((542 / 676) * 100%);
}
.total {
width: calc((74 / 676) * 100%);
}
.operate {
width: calc((60 / 676) * 100%);
}
}
}
}
}
</style>

455
jeecgboot-vue3-master/src/views/depart/workbench/components/chSchool/index.vue
Unescape View File

@ -0,0 +1,455 @@
<template>
<div class="school">
<a-row :gutter="[16, 16]" type="flex" justify="space-between">
<a-col :lg="12" :xl="6" v-for="i in 4" :key="i">
<div class="card">
<div class="top">
<div class="text">
本年度已开展比赛数
</div>
<Icon icon="mainHome-time|svg" :size="20" />
</div>
<div class="center">
<div class="text">
67
</div>
</div>
<div class="bottom">
<div class="bot_card">国赛：12</div>
<div class="bot_card">省赛：12</div>
<div class="bot_card">校赛：24</div>
</div>
</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]" type="flex" justify="space-between">
<a-col :xs="24" :xl="8">
<div class="ec_radar-box">
<div class="title-box">
<div class="tit">年度维度分析</div>
<div class="p">前沿探索</div>
<div class="p">奠定基础</div>
</div>
<div class="ec_radar" ref="ec_radar"></div>
</div>
</a-col>
<a-col :xs="24" :xl="16">
<div class="con_right">
<div class="title-box">
<div class="tit">部门近两年维度积分</div>
<div class="bas"></div>
</div>
<div class="ec-box">
<!-- 柱状图 -->
<div id="ec_bar" ref="ec_bar"></div>
<div class="infor">
<ul class="card-box">
<li v-for="i in 12" :key="i">
<div class="ol">{{ i }}</div>
<div class="text">奠定基础</div>
</li>
</ul>
</div>
</div>
</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]" type="flex">
<a-col :xs="24" :xl="12">
<div class="foo_card">
<div class="title">
部门比赛积分排名
</div>
<div class="table">
<div class="t_item t_head">
<div class="ranking">排名</div>
<div class="name">比赛名称</div>
<div class="total">比赛积分</div>
<div class="operate">操作</div>
</div>
<div class="t_item t_con" v-for="i in 6" :key="i">
<div class="ranking">
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div>
</div>
<div class="name">国家电网竞赛</div>
<div class="total">7059</div>
<div class="operate">详情</div>
</div>
</div>
</div>
</a-col>
<a-col :xs="24" :xl="12">
<div class="foo_card">
<div class="title">
部门学生积分排名
</div>
<div class="table">
<div class="t_item t_head">
<div class="ranking">排名</div>
<div class="name">参赛选手名</div>
<div class="total">比赛积分</div>
<div class="operate">操作</div>
</div>
<div class="t_item t_con" v-for="i in 6" :key="i">
<div class="ranking">
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div>
</div>
<div class="name">王晨</div>
<div class="total">4221</div>
<div class="operate">详情</div>
</div>
</div>
</div>
</a-col>
</a-row>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { optionRadar, optionBar } from '../chDepartment/options'
const ec_radar = ref()
const ec_bar = ref()
onMounted(() => {
const myChart = echarts.init(ec_radar.value);
myChart.setOption(optionRadar);
const bar = echarts.init(ec_bar.value);
bar.setOption(optionBar);
window.addEventListener('resize', function () {
myChart.resize()
bar.resize()
})
})
</script>
<style lang="less" scoped>
.school {
padding: 16px 16px 0;
.card {
width: 100%;
width: 100%;
height: 182px;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
border-radius: 4px 4px 4px 4px;
padding: 20px 24px 0;
.top {
display: flex;
justify-content: space-between;
.text {
height: 22px;
font-family: Inter, Inter;
font-weight: 400;
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.center {
margin-top: 4px;
width: 357px;
height: 78px;
border-radius: 0px 0px 0px 0px;
display: flex;
align-items: center;
.text {
height: 38px;
font-family: Inter, Inter;
font-weight: 400;
font-size: 48px;
color: rgba(51, 51, 51, 0.88);
line-height: 38px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.bottom {
margin-top: 18px;
display: flex;
justify-content: space-between;
.bot_card {
width: 91px;
height: 22px;
font-family: Inter, Inter;
font-weight: 400;
font-size: 14px;
color: rgba(51, 51, 51, 0.88);
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
}
.ec_radar-box {
margin-top: 17px;
width: 100%;
height: 459px;
background: #FFFFFF;
border-radius: 2px 2px 2px 2px;
display: flex;
flex-direction: column;
.title-box {
height: 58px;
border-radius: 2px 2px 0px 0px;
border-bottom: 1px solid #F0F0F0;
display: flex;
.tit {
margin-left: 4%;
height: 58px;
line-height: 58px;
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
}
.p {
margin-left: 7%;
font-size: 12px;
color: #333333;
height: 27px;
align-self: flex-end;
}
}
.ec_radar {
width: 100%;
flex-grow: 1;
}
}
.con_right {
margin-top: 17px;
// width: 1160px;
width: 100%;
height: 458px;
background: #FFFFFF;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
// padding-left: 16px;
display: flex;
flex-direction: column;
.title-box {
height: 57px;
display: flex;
align-items: center;
position: relative;
padding-left: 16px;
.tit {
height: 26px;
font-size: 16px;
color: #1890FF;
text-shadow: 0px 0px 0px #1890FF;
}
.bas {
position: absolute;
bottom: 0;
left: 16px;
width: 100%;
height: 1px;
border: 1px solid rgba(5, 5, 5, 0.06);
&::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 2px;
background: #1890FF;
}
}
}
.ec-box {
display: flex;
justify-content: space-between;
flex-grow: 1;
column-gap: 22px;
padding-left: 39px;
#ec_bar {
flex-grow: 1;
}
.infor {
width: 241px;
display: flex;
.card-box {
margin: auto;
width: 100%;
height: 177px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
row-gap: 9px;
li {
width: 110px;
height: 22px;
font-size: 14px;
color: rgba(51, 51, 51, 0.88);
line-height: 22px;
display: flex;
justify-content: space-between;
align-items: center;
&:nth-child(1)>.ol,
&:nth-child(2)>.ol,
&:nth-child(3)>.ol {
background-color: #314659;
color: #fff;
}
.ol {
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
text-align: center;
background: #F5F5F5;
color: #000000;
font-size: 12px;
}
.text {
width: 67px;
font-size: 14px;
color: rgba(51, 51, 51, 0.88);
}
}
}
}
}
}
.foo_card {
margin-top: 20px;
width: 100%;
height: 502px;
background: #FFFFFF;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px 6px 6px 6px;
.title {
padding-left: 23px;
height: 57px;
line-height: 57px;
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
position: relative;
&::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(5, 5, 5, 0.06);
}
}
.table {
width: 100%;
padding-left: 32px;
.t_item {
width: 100%;
height: 54px;
border-bottom: 1px solid #E7E7E7;
display: flex;
align-items: center;
.ranking {
width: calc((80 / 756) * 100%);
}
.name {
width: calc((542 / 756) * 100%);
}
.total {
width: calc((74 / 756) * 100%);
}
.operate {
width: calc((60 / 756) * 100%);
}
}
.t_head {
font-size: 14px;
color: rgba(0, 0, 0, 0.4);
}
.t_con {
.ranking {
.ol {
width: 24px;
height: 24px;
background: #E7E7E7;
color: rgba(0, 0, 0, 0.9);
font-size: 14px;
line-height: 24px;
text-align: center;
border-radius: 50%;
&.ac {
background: #0052D9;
color: rgba(255, 255, 255, 0.9);
}
}
}
.name {
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
}
.total {
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
}
.operate {
font-size: 14px;
color: #0052D9;
cursor: pointer;
}
}
}
}
}
</style>

2
jeecgboot-vue3-master/src/views/depart/workbench/components/index.ts
Unescape View File

@ -1 +1,3 @@
export {default as ChDepartment } from './chDepartment/index.vue' export {default as ChDepartment } from './chDepartment/index.vue'
export {default as ChExpert } from './chExpert/index.vue'
export {default as ChSchool } from './chSchool/index.vue'

4
jeecgboot-vue3-master/src/views/depart/workbench/index.vue
Unescape View File

@ -4,9 +4,9 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ChDepartment } from './components/index' import { ChSchool } from './components/index'
function com(){ function com(){
return ChDepartment return ChSchool
} }
</script> </script>

Write Preview
Loading…
Cancel
Save