优化首页和大屏样式
This commit is contained in:
parent
008cccd60e
commit
2d0fd6f920
|
@ -251,8 +251,8 @@ const leftBar1Option = ref({
|
||||||
offset: '7',
|
offset: '7',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'rgba(255,255,255,.6)',
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: '14',
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: []
|
data: []
|
||||||
|
@ -267,8 +267,8 @@ const leftBar1Option = ref({
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'rgba(255,255,255,.8)',
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: '12',
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -316,7 +316,8 @@ const leftBar2Option = ref({
|
||||||
right: 'center',
|
right: 'center',
|
||||||
top: 0,
|
top: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
|
@ -335,18 +336,18 @@ const leftBar2Option = ref({
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'white'
|
color: 'white'
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
//rotate:-90,
|
//rotate:-90,
|
||||||
formatter: function (value: any) { return value.split("").join("\n"); },
|
formatter: function (value: any) { return value.split("").join("\n"); },
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "rgba(255,255,255,.6)",
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: 14,
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,0.3)'
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -356,15 +357,16 @@ const leftBar2Option = ref({
|
||||||
splitNumber: 4,
|
splitNumber: 4,
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,0.1)'
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "rgba(255,255,255,.6)",
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: 14,
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLine: { show: false },
|
axisLine: { show: false },
|
||||||
|
@ -398,7 +400,7 @@ const centerBar1Option = ref({
|
||||||
grid: {
|
grid: {
|
||||||
top: "20%",
|
top: "20%",
|
||||||
right: "50",
|
right: "50",
|
||||||
bottom: "20",
|
bottom: "30",
|
||||||
left: "30",
|
left: "30",
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
|
@ -406,7 +408,8 @@ const centerBar1Option = ref({
|
||||||
right: 'center',
|
right: 'center',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
|
@ -415,9 +418,17 @@ const centerBar1Option = ref({
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
data: [],
|
data: [],
|
||||||
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
textStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -428,17 +439,19 @@ const centerBar1Option = ref({
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false,
|
show: false,
|
||||||
|
|
||||||
},
|
},
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
fontSize: 14,
|
color: 'rgba(255,255,255,.7)',
|
||||||
color: "rgba(255,255,255,.6)"
|
fontSize: '0.2rem',
|
||||||
|
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
min: 0,
|
min: 0,
|
||||||
lineStyle: { color: 'rgba(255,255,255,.1)' }
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
},//左线色
|
},//左线色
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -448,12 +461,23 @@ const centerBar1Option = ref({
|
||||||
"show": true,
|
"show": true,
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
fontSize: 14,
|
color: 'rgba(255,255,255,.7)',
|
||||||
color: "rgba(255,255,255,.6)"
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
|
axisLine: {
|
||||||
splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
|
},//右线色
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
|
},//x轴线
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
"series": [
|
"series": [
|
||||||
|
@ -595,7 +619,7 @@ const centerLine2Option = ref({
|
||||||
grid: {
|
grid: {
|
||||||
left: '0',
|
left: '0',
|
||||||
top: '30',
|
top: '30',
|
||||||
right: '10',
|
right: '20',
|
||||||
bottom: '20',
|
bottom: '20',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
|
@ -617,14 +641,14 @@ const centerLine2Option = ref({
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
rotate: -90,
|
rotate: -90,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "rgba(255,255,255,.6)",
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: 14,
|
fontSize: '0.2rem',
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,.1)'
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -644,20 +668,22 @@ const centerLine2Option = ref({
|
||||||
// splitNumber: 6,
|
// splitNumber: 6,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,.1)'
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: "{value}",
|
formatter: "{value}",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "rgba(255,255,255,.6)",
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: 14,
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgba(255,255,255,.1)'
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
|
@ -721,7 +747,7 @@ const rightBar1Option = ref({
|
||||||
}, "grid": {
|
}, "grid": {
|
||||||
"top": "15%",
|
"top": "15%",
|
||||||
"right": "10%",
|
"right": "10%",
|
||||||
"bottom": "20",
|
"bottom": "30",
|
||||||
"left": "10%",
|
"left": "10%",
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
|
@ -729,7 +755,8 @@ const rightBar1Option = ref({
|
||||||
right: 'center',
|
right: 'center',
|
||||||
top: 0,
|
top: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
|
@ -739,9 +766,17 @@ const rightBar1Option = ref({
|
||||||
"type": "category",
|
"type": "category",
|
||||||
|
|
||||||
data: [],
|
data: [],
|
||||||
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
textStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -754,10 +789,16 @@ const rightBar1Option = ref({
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
color: "rgba(255,255,255,.6)"
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
|
||||||
},
|
},
|
||||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
|
},//左线色
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -768,10 +809,22 @@ const rightBar1Option = ref({
|
||||||
"axisLabel": {
|
"axisLabel": {
|
||||||
"show": true,
|
"show": true,
|
||||||
formatter: "{value}",
|
formatter: "{value}",
|
||||||
color: "rgba(255,255,255,.6)"
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
|
axisLine: {
|
||||||
splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
|
},//右线色
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.7)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
|
}
|
||||||
|
},//x轴线
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
"series": [
|
"series": [
|
||||||
|
@ -842,13 +895,13 @@ const rightPie2Option = ref({
|
||||||
x: 'center',
|
x: 'center',
|
||||||
y: '50%',
|
y: '50%',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: 22,
|
fontSize: '0.2rem',
|
||||||
lineHeight: 10,
|
lineHeight: 10,
|
||||||
},
|
},
|
||||||
subtextStyle: {
|
subtextStyle: {
|
||||||
color: '#90979c',
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: 16,
|
fontSize: '0.2rem',
|
||||||
lineHeight: 10,
|
lineHeight: 10,
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -880,13 +933,12 @@ const rightPie2Option = ref({
|
||||||
rich: {
|
rich: {
|
||||||
c: {
|
c: {
|
||||||
color: 'rgb(241,246,104)',
|
color: 'rgb(241,246,104)',
|
||||||
fontSize: 20,
|
fontSize: '0.2rem',
|
||||||
fontWeight: 'bold',
|
|
||||||
lineHeight: 5
|
lineHeight: 5
|
||||||
},
|
},
|
||||||
b: {
|
b: {
|
||||||
color: 'rgb(98,137,169)',
|
color: 'rgba(255,255,255,.7)',
|
||||||
fontSize: 14,
|
fontSize: '0.2rem',
|
||||||
height: 44
|
height: 44
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -896,6 +948,7 @@ const rightPie2Option = ref({
|
||||||
normal: {
|
normal: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(98,137,169)',
|
color: 'rgb(98,137,169)',
|
||||||
|
fontSize: '0.2rem',
|
||||||
},
|
},
|
||||||
smooth: 0.2,
|
smooth: 0.2,
|
||||||
length: 10,
|
length: 10,
|
||||||
|
@ -1034,7 +1087,7 @@ li {
|
||||||
}
|
}
|
||||||
|
|
||||||
.alltitle {
|
.alltitle {
|
||||||
font-size: .25rem;
|
font-size: .225rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: .5rem;
|
line-height: .5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -31,7 +31,14 @@
|
||||||
<el-table-column label="场次名称" align="center" prop="sessionName" />
|
<el-table-column label="场次名称" align="center" prop="sessionName" />
|
||||||
<el-table-column label="量表名称 以逗号隔开" align="center" prop="scaleNames" />
|
<el-table-column label="量表名称 以逗号隔开" align="center" prop="scaleNames" />
|
||||||
|
|
||||||
<el-table-column label="班级名称/用户名称" align="center" prop="deptNames" />
|
<el-table-column label="班级名称/用户名称" align="center" prop="deptNames">
|
||||||
|
<template #default="scope">
|
||||||
|
<span>
|
||||||
|
{{ scope.row.deptNames.length > 0 ? scope.row.deptNames.join(',') : scope.row.userNames.join(',') }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column label="截止日期" align="center" prop="expireTime" width="180">
|
<el-table-column label="截止日期" align="center" prop="expireTime" width="180">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
|
<span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<div class="item header">
|
|
||||||
<el-card>
|
<el-card>
|
||||||
<div class="card-header">
|
<el-row justify="space-around" align="center">
|
||||||
<ul>
|
<el-col :span="12">
|
||||||
<li><img :src="userStore.avatar" />{{ getGreeting() }}</li>
|
<img class="avater" :src="userStore.avatar" />{{ getGreeting() }}
|
||||||
<li>
|
</el-col>
|
||||||
|
<el-col :span="12" class="screen">
|
||||||
<el-button round>
|
<el-button round>
|
||||||
<router-link target="_blank" to="/bigScreen">
|
<router-link target="_blank" to="/bigScreen">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
|
@ -13,99 +13,117 @@
|
||||||
</el-icon><span>可视大屏</span>
|
</el-icon><span>可视大屏</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</el-button>
|
</el-button>
|
||||||
</li>
|
</el-col>
|
||||||
</ul>
|
</el-row>
|
||||||
</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="item">
|
<el-row :gutter="20">
|
||||||
<el-card style="height: 180px;">
|
<el-col :span="6">
|
||||||
<div class="card-content">
|
<el-card>
|
||||||
<div>
|
<el-row justify="space-between">
|
||||||
<el-icon color="#33CABB" :size="70">
|
<el-col :span="12">
|
||||||
|
<el-icon :size="60" color="#40C9C6">
|
||||||
<Avatar />
|
<Avatar />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="right">
|
||||||
|
<el-statistic title="总用户数" :value="userNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||||
|
<template #title>
|
||||||
|
<div class="stats-title">
|
||||||
|
总用户数
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div>
|
</el-statistic>
|
||||||
<ul>
|
</el-col>
|
||||||
<li class="font-txt">总用户数</li>
|
</el-row>
|
||||||
<li class="font-num">{{ userNum }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</el-col>
|
||||||
|
|
||||||
<div class="item">
|
<el-col :span="6">
|
||||||
<el-card style="height: 180px;">
|
<el-card>
|
||||||
<div class="card-content">
|
<el-row justify="space-between">
|
||||||
<div>
|
<el-col :span="12">
|
||||||
<el-icon color="#15C377" :size="70">
|
<el-icon :size="60" color="#36A3F7">
|
||||||
<EditPen />
|
<Operation />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="right">
|
||||||
|
<el-statistic :value="evaluationNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||||
|
<template #title>
|
||||||
|
<div class="stats-title">
|
||||||
|
总测评数
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div>
|
</el-statistic>
|
||||||
<ul>
|
</el-col>
|
||||||
<li class="font-txt">总测评数</li>
|
</el-row>
|
||||||
<li class="font-num">{{ evaluationNum }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</el-col>
|
||||||
|
|
||||||
<div class="item">
|
<el-col :span="6">
|
||||||
<el-card style="height: 180px;">
|
<el-card>
|
||||||
<div class="card-content">
|
<el-row justify="space-between">
|
||||||
<div>
|
<el-col :span="12">
|
||||||
<el-icon color="#F96868" :size="70">
|
<el-icon :size="60" color="#F4516C">
|
||||||
<WarnTriangleFilled />
|
<Histogram />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="right">
|
||||||
|
<el-statistic :value="warnNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||||
|
<template #title>
|
||||||
|
<div class="stats-title">
|
||||||
|
总预警数
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div>
|
</el-statistic>
|
||||||
<ul>
|
</el-col>
|
||||||
<li class="font-txt">总预警数</li>
|
</el-row>
|
||||||
<li class="font-num">{{ warnNum }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</el-col>
|
||||||
|
|
||||||
<div class="item">
|
<el-col :span="6">
|
||||||
<el-card style="height: 180px;">
|
<el-card>
|
||||||
<div class="card-content">
|
<el-row justify="space-between">
|
||||||
<div>
|
<el-col :span="12">
|
||||||
<el-icon color="#926DDE" :size="70">
|
<el-icon :size="60" color="#34BFA3">
|
||||||
<Collection />
|
<HelpFilled />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="right">
|
||||||
|
<el-statistic :value="interveneNum" :value-style="{ color: '#000', fontSize: '30px' }">
|
||||||
|
<template #title>
|
||||||
|
<div class="stats-title">
|
||||||
|
总干预数
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div>
|
</el-statistic>
|
||||||
<ul>
|
</el-col>
|
||||||
<li class="font-txt">总干预数</li>
|
</el-row>
|
||||||
<li class="font-num">{{ interveneNum }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<div class="item item-chart">
|
<el-row :gutter="20">
|
||||||
<div>
|
<el-col :span="10">
|
||||||
<v-chart :option="leftPieOption" autoresize />
|
<el-card>
|
||||||
</div>
|
<v-chart style="height: 300px;" :option="leftPieOption" autoresize />
|
||||||
<div>
|
</el-card>
|
||||||
<v-chart :option="centerBarOption" autoresize />
|
|
||||||
</div>
|
</el-col>
|
||||||
<div>
|
<el-col :span="14">
|
||||||
<v-chart :option="rightBarOption" autoresize />
|
<el-card>
|
||||||
</div>
|
<v-chart style="height: 300px;" :option="centerBarOption" autoresize />
|
||||||
</div>
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card>
|
||||||
|
<v-chart style="height: 350px;" :option="rightBarOption" autoresize />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -300,7 +318,7 @@ const centerBarOption = ref({
|
||||||
splitNumber: 4,
|
splitNumber: 4,
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#95989D'
|
color: '#95989D'
|
||||||
}
|
}
|
||||||
|
@ -365,7 +383,13 @@ const rightBarOption = ref({
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: []
|
data: [],
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#95989D'
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
|
||||||
|
@ -431,103 +455,32 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 声明字体*/
|
|
||||||
@font-face {
|
|
||||||
font-family: electronicFont;
|
|
||||||
src: url('@/assets/font/DS-DIGIT.TTF');
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-txt {
|
|
||||||
color: #95989D;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-num {
|
|
||||||
font-size: 70px;
|
|
||||||
color: #FF9C57;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'electronicFont';
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-container {
|
.app-container {
|
||||||
width: 100%;
|
padding: 10px;
|
||||||
height: calc(100vh - 85px);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
grid-template-rows: 150px 180px 400px;
|
|
||||||
gap: 5px;
|
|
||||||
background-color: #F3F3F3;
|
|
||||||
|
|
||||||
ul {
|
.el-card {
|
||||||
list-style-type: none;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.avater {
|
||||||
grid-column: 1 / 5;
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
ul {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
.screen {
|
||||||
|
line-height: 80px;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-chart {
|
.stats-title {
|
||||||
margin-top: 6px;
|
|
||||||
grid-column: 1 / 5;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
div {
|
|
||||||
flex: 0 1 33%;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
color: #95989D;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item-1 {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item-2 {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #95989D;
|
padding-bottom: 10px;
|
||||||
padding: 10px 0;
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue