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