mozhe
/
mental-health-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化首页和大屏样式

This commit is contained in:
jiangzhe 2024-05-20 08:57:45 +08:00
parent 008cccd60e
commit 2d0fd6f920
3 changed files with 256 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/bigScreen/index.vue
View File

@ -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;

9
src/views/evaluate/evaluateList/index.vue
View File

@ -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>

331
src/views/index.vue
View File

@ -1,111 +1,129 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="item header"> <el-card>
<el-card> <el-row justify="space-around" align="center">
<div class="card-header"> <el-col :span="12">
<ul> <img class="avater" :src="userStore.avatar" />{{ getGreeting() }}
<li><img :src="userStore.avatar" />{{ getGreeting() }}</li> </el-col>
<li> <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>
<FullScreen /> <FullScreen />
</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">
<Avatar /> <el-icon :size="60" color="#40C9C6">
</el-icon> <Avatar />
</div> </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>
</template>
</el-statistic>
</el-col>
</el-row>
</el-card>
</el-col>
<div> <el-col :span="6">
<ul> <el-card>
<li class="font-txt">总用户数</li> <el-row justify="space-between">
<li class="font-num">{{ userNum }}</li> <el-col :span="12">
</ul> <el-icon :size="60" color="#36A3F7">
</div> <Operation />
</div> </el-icon>
</el-card> </el-col>
</div> <el-col :span="12" class="right">
<el-statistic :value="evaluationNum" :value-style="{ color: '#000', fontSize: '30px' }">
<template #title>
<div class="stats-title">
总测评数
</div>
</template>
</el-statistic>
</el-col>
</el-row>
</el-card>
</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="#F4516C">
<EditPen /> <Histogram />
</el-icon> </el-icon>
</div> </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>
</template>
</el-statistic>
</el-col>
</el-row>
</el-card>
</el-col>
<div> <el-col :span="6">
<ul> <el-card>
<li class="font-txt">总测评数</li> <el-row justify="space-between">
<li class="font-num">{{ evaluationNum }}</li> <el-col :span="12">
</ul> <el-icon :size="60" color="#34BFA3">
</div> <HelpFilled />
</div> </el-icon>
</el-card> </el-col>
</div> <el-col :span="12" class="right">
<el-statistic :value="interveneNum" :value-style="{ color: '#000', fontSize: '30px' }">
<template #title>
<div class="stats-title">
总干预数
</div>
</template>
</el-statistic>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<div class="item"> <el-row :gutter="20">
<el-card style="height: 180px;"> <el-col :span="10">
<div class="card-content"> <el-card>
<div> <v-chart style="height: 300px;" :option="leftPieOption" autoresize />
<el-icon color="#F96868" :size="70"> </el-card>
<WarnTriangleFilled />
</el-icon>
</div>
<div> </el-col>
<ul> <el-col :span="14">
<li class="font-txt">总预警数</li> <el-card>
<li class="font-num">{{ warnNum }}</li> <v-chart style="height: 300px;" :option="centerBarOption" autoresize />
</ul> </el-card>
</div> </el-col>
</div> </el-row>
</el-card>
</div>
<div class="item"> <el-row>
<el-card style="height: 180px;"> <el-col :span="24">
<div class="card-content"> <el-card>
<div> <v-chart style="height: 350px;" :option="rightBarOption" autoresize />
<el-icon color="#926DDE" :size="70"> </el-card>
<Collection /> </el-col>
</el-icon> </el-row>
</div>
<div>
<ul>
<li class="font-txt">总干预数</li>
<li class="font-num">{{ interveneNum }}</li>
</ul>
</div>
</div>
</el-card>
</div>
<div class="item item-chart">
<div>
<v-chart :option="leftPieOption" autoresize />
</div>
<div>
<v-chart :option="centerBarOption" autoresize />
</div>
<div>
<v-chart :option="rightBarOption" autoresize />
</div>
</div>
</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; height: 80px;
border-radius: 50%;
.card-header { margin-right: 20px;
ul { vertical-align: middle;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
img {
height: 80px;
border-radius: 50%;
margin-right: 20px;
vertical-align: middle;
}
}
}
} }
.item-chart { .screen {
margin-top: 6px; line-height: 80px;
grid-column: 1 / 5; text-align: right;
display: flex;
justify-content: space-between;
div {
flex: 0 1 33%;
background-color: #fff;
padding: 20px 0;
}
} }
.item { .stats-title {
.card-header { font-size: 18px;
display: flex; padding-bottom: 10px;
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;
color: #95989D;
padding: 10px 0;
margin-left: -10px;
}
.right {
text-align: right;
} }
} }
</style> </style>