mental-health-web/src/views/index.vue

237 lines
5.3 KiB
Vue
Raw Normal View History

2024-03-15 03:07:18 +00:00
<template>
2024-04-28 02:34:21 +00:00
<div class="app-container">
2024-04-30 07:51:19 +00:00
<div class="item header">
<el-card>
<div class="card-header">
<div class="user-info">
<div> <img :src="userStore.avatar" /></div>
<div>上午好{{ userStore.nickname }}</div>
2024-05-06 07:06:48 +00:00
<el-button round style="margin-left: 20px;">
<router-link target="_blank" to="/bigScreen">
<el-icon>
<FullScreen />
</el-icon><span></span>
</router-link>
</el-button>
2024-04-30 07:51:19 +00:00
</div>
<div class="user-list">
<ul>
<li>
<el-icon color="#50DCB6" size="25px">
<Message />
</el-icon>
<span>消息</span>
<div>200</div>
</li>
<li>
<el-icon color="#50DCB6" size="25px">
<Message />
</el-icon>
<span>待办</span>
<div>200</div>
</li>
<li>
<el-icon color="#50DCB6" size="25px">
<Message />
</el-icon>
<span>项目</span>
<div>200</div>
</li>
</ul>
</div>
</div>
</el-card>
</div>
<div class="item" v-for="(item, index) in 4">
<el-card style="height: 200px;">
<template #header>
<div class="card-header">
<span>访客数</span>
<el-tag type="success"></el-tag>
</div>
</template>
<div class="card-content">
<ul>
<li>
<div class="card-item-1">
<span>2000</span>
<el-icon color="#FA6B6D" size="40px">
<Avatar />
</el-icon>
</div>
</li>
<li>
<div class="card-item-2">
<span>总访客数</span>
<span>2000</span>
</div>
</li>
</ul>
</div>
</el-card>
</div>
<div class="item item-chart" v-for="(item, index) in 4">
<v-chart :option="option" autoresize />
</div>
2024-03-15 03:07:18 +00:00
</div>
</template>
<script setup name="Index" lang="ts">
2024-04-30 07:51:19 +00:00
import * as echarts from 'echarts';
import { use } from 'echarts/core'
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent } from "echarts/components";
import VChart from 'vue-echarts'
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
use([
CanvasRenderer,
PieChart,
BarChart,
LineChart,
TitleComponent,
TooltipComponent,
LegendComponent,
ToolboxComponent,
GridComponent
]);
2024-04-26 09:10:09 +00:00
// import { initWebSocket } from '@/utils/websocket';
2024-03-15 03:07:18 +00:00
2024-04-26 09:10:09 +00:00
// onMounted(() => {
// let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
// initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
// });
2024-04-30 07:51:19 +00:00
const option = ref({
title: {
text: '图表统计',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
2024-03-15 03:07:18 +00:00
</script>
<style scoped lang="scss">
2024-04-28 02:34:21 +00:00
.app-container {
2024-04-30 07:51:19 +00:00
// position: relative;
// background: url('@/assets/images/welcome.png') no-repeat top center;
// background-size: cover;
// text-align: right;
width: 100%;
2024-04-28 02:34:21 +00:00
height: calc(100vh - 85px);
2024-04-30 07:51:19 +00:00
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 150px 200px 1fr;
gap: 10px;
background-color: #F3F3F3;
ul {
list-style-type: none;
}
.header {
grid-column: 1 / 5;
.card-header {
padding: 15px 0;
display: flex;
justify-content: space-between;
.user-info {
display: flex;
align-items: center;
img {
height: 80px;
border-radius: 50%;
margin-right: 20px;
}
}
.user-list ul {
width: 500px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 16px;
li {
flex: 0 1 100px;
span {
margin-left: 7px;
}
div {
color: #000;
}
}
}
}
}
.item-chart {
background-color: #fff;
padding: 20px 5px;
}
.item {
.card-header {
display: flex;
justify-content: space-between;
color: #95989D;
font-size: 16px;
}
.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;
}
}
2024-03-15 03:07:18 +00:00
}
</style>