hanJoker
2 years ago
parent
1bff21855e
commit
78e3156a10
@ -1,82 +1,245 @@
|
||||
<template>
|
||||
<a-layout>
|
||||
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
|
||||
<a-layout style="min-height: 100vh">
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible>
|
||||
<div class="logo">老马代驾</div>
|
||||
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
|
||||
<a-menu v-model:selectedKeys="selectedMenus" theme="dark" mode="inline">
|
||||
<a-menu-item key="1">
|
||||
<user-outlined />
|
||||
<span>nav 1</span>
|
||||
<pie-chart-outlined />
|
||||
<span>信息看板</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="2">
|
||||
<video-camera-outlined />
|
||||
<span>nav 2</span>
|
||||
<desktop-outlined />
|
||||
<span>订单监控</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="3">
|
||||
<upload-outlined />
|
||||
<span>nav 3</span>
|
||||
<a-sub-menu key="sub1">
|
||||
<template #title>
|
||||
<span>
|
||||
<up-circle-outlined />
|
||||
<span>司机管理</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="3">司机列表</a-menu-item>
|
||||
<a-menu-item key="4">已注销司机</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu key="sub2">
|
||||
<template #title>
|
||||
<span>
|
||||
<team-outlined />
|
||||
<span>订单管理</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="6">历史订单</a-menu-item>
|
||||
<a-menu-item key="8">未完成订单</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item key="9">
|
||||
<setting-outlined />
|
||||
<span>系统设置</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<a-layout>
|
||||
<a-layout-header style="background: #fff; padding: 0">
|
||||
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
|
||||
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
|
||||
<a-layout-header>
|
||||
<a-breadcrumb class="header-breadcrumb">
|
||||
<a-breadcrumb-item>
|
||||
<home-outlined />
|
||||
</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>信息看板</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
||||
<div class="search">
|
||||
<a-input-search v-model:value="value" placeholder="搜索任何你需要的" @search="onSearch" size="large">
|
||||
<template #enterButton>
|
||||
<a-button>搜索</a-button>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</div>
|
||||
|
||||
|
||||
<a-select v-model:value="value2" disabled :options="options2" class="city-select"></a-select>
|
||||
|
||||
<a-dropdown class="user-dropdown">
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
<a-avatar shape="square" size="large">
|
||||
Han
|
||||
</a-avatar>
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1">
|
||||
<UserOutlined />
|
||||
个人中心
|
||||
</a-menu-item>
|
||||
<a-menu-item key="3">
|
||||
<swap-outlined />
|
||||
切换账号
|
||||
</a-menu-item>
|
||||
<a-menu-item key="3">
|
||||
<logout-outlined />
|
||||
退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
</a-layout-header>
|
||||
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
|
||||
Content
|
||||
<a-layout-content>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-card title="司机监控" :bordered="false">
|
||||
<p>Map</p>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="近期订单统计" :bordered="false" class="statistic-card">
|
||||
<template #extra><a href="#">Refresh</a></template>
|
||||
<div id="order-statistic" style="height: 300px; width: 680px; padding:0px;"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-layout-content>
|
||||
<a-layout-footer style="text-align: center">
|
||||
Created ©2022 Powered by <a href="www.mashibing.com">马士兵教育</a>
|
||||
©2022 Powered by 马士兵教育
|
||||
</a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import {
|
||||
PieChartOutlined,
|
||||
DesktopOutlined,
|
||||
UserOutlined,
|
||||
VideoCameraOutlined,
|
||||
UploadOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
TeamOutlined,
|
||||
FileOutlined,
|
||||
HomeOutlined,
|
||||
SwapOutlined,
|
||||
LogoutOutlined,
|
||||
BellOutlined,
|
||||
UpCircleOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PieChartOutlined,
|
||||
DesktopOutlined,
|
||||
UserOutlined,
|
||||
VideoCameraOutlined,
|
||||
UploadOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
TeamOutlined,
|
||||
FileOutlined,
|
||||
HomeOutlined,
|
||||
SwapOutlined,
|
||||
LogoutOutlined,
|
||||
BellOutlined,
|
||||
UpCircleOutlined,
|
||||
SettingOutlined,
|
||||
},
|
||||
setup() {
|
||||
data() {
|
||||
return {
|
||||
selectedKeys: ref<string[]>(['1']),
|
||||
collapsed: ref<boolean>(false),
|
||||
collapsed: ref(false),
|
||||
selectedMenus: ref(['1']),
|
||||
selectedNavs: ref(['1']),
|
||||
options2: ref([{
|
||||
value: 'changsha',
|
||||
label: '长沙',
|
||||
}]),
|
||||
value2: ref('changsha')
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
var chartDom = document.getElementById('order-statistic');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6', '7',]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130,],
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 64px;
|
||||
margin: 0;
|
||||
background: rgb(0 12 23);
|
||||
color: white;
|
||||
font-size: xx-large;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
display: flex;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #1890ff;
|
||||
.ant-layout-header>* {
|
||||
margin-right: 16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
.ant-layout-header .header-breadcrumb {
|
||||
margin: 18px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ant-layout-header .search {
|
||||
/* width: 80%; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ant-layout-header .bell-badge {
|
||||
font-size: x-large;
|
||||
/* float: right; */
|
||||
}
|
||||
|
||||
.ant-layout-header .user-dropdown .ant-avatar {
|
||||
/* float: right; */
|
||||
background-color: rgb(0 12 23);
|
||||
}
|
||||
|
||||
.ant-layout-header .city-select {
|
||||
width: 100px;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.site-layout .site-layout-background {
|
||||
.ant-card-body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.ant-layout-footer {
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
padding: 14px 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue