hanJoker
2 years ago
parent
1bff21855e
commit
78e3156a10
@ -1,82 +1,245 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-layout>
|
<a-layout style="min-height: 100vh">
|
||||||
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
|
<a-layout-sider v-model:collapsed="collapsed" collapsible>
|
||||||
<div class="logo">老马代驾</div>
|
<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">
|
<a-menu-item key="1">
|
||||||
<user-outlined />
|
<pie-chart-outlined />
|
||||||
<span>nav 1</span>
|
<span>信息看板</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
<a-menu-item key="2">
|
<a-menu-item key="2">
|
||||||
<video-camera-outlined />
|
<desktop-outlined />
|
||||||
<span>nav 2</span>
|
<span>订单监控</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
<a-menu-item key="3">
|
<a-sub-menu key="sub1">
|
||||||
<upload-outlined />
|
<template #title>
|
||||||
<span>nav 3</span>
|
<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-item>
|
||||||
</a-menu>
|
</a-menu>
|
||||||
</a-layout-sider>
|
</a-layout-sider>
|
||||||
<a-layout>
|
<a-layout>
|
||||||
<a-layout-header style="background: #fff; padding: 0">
|
<a-layout-header>
|
||||||
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
|
<a-breadcrumb class="header-breadcrumb">
|
||||||
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
|
<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-header>
|
||||||
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
|
<a-layout-content>
|
||||||
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-content>
|
||||||
<a-layout-footer style="text-align: center">
|
<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-footer>
|
||||||
</a-layout>
|
</a-layout>
|
||||||
</a-layout>
|
</a-layout>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
PieChartOutlined,
|
||||||
|
DesktopOutlined,
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
VideoCameraOutlined,
|
TeamOutlined,
|
||||||
UploadOutlined,
|
FileOutlined,
|
||||||
MenuUnfoldOutlined,
|
HomeOutlined,
|
||||||
MenuFoldOutlined,
|
SwapOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
BellOutlined,
|
||||||
|
UpCircleOutlined,
|
||||||
|
SettingOutlined,
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
import { defineComponent, ref } from 'vue';
|
import { defineComponent, ref } from 'vue';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
|
PieChartOutlined,
|
||||||
|
DesktopOutlined,
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
VideoCameraOutlined,
|
TeamOutlined,
|
||||||
UploadOutlined,
|
FileOutlined,
|
||||||
MenuUnfoldOutlined,
|
HomeOutlined,
|
||||||
MenuFoldOutlined,
|
SwapOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
BellOutlined,
|
||||||
|
UpCircleOutlined,
|
||||||
|
SettingOutlined,
|
||||||
},
|
},
|
||||||
setup() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedKeys: ref<string[]>(['1']),
|
collapsed: ref(false),
|
||||||
collapsed: ref<boolean>(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>
|
</script>
|
||||||
<style>
|
<style scoped>
|
||||||
.trigger {
|
.logo {
|
||||||
font-size: 18px;
|
height: 64px;
|
||||||
|
margin: 0;
|
||||||
|
background: rgb(0 12 23);
|
||||||
|
color: white;
|
||||||
|
font-size: xx-large;
|
||||||
line-height: 64px;
|
line-height: 64px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-layout .site-layout-background {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-layout-header {
|
||||||
|
display: flex;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
cursor: pointer;
|
background: #fff;
|
||||||
transition: color 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger:hover {
|
.ant-layout-header>* {
|
||||||
color: #1890ff;
|
margin-right: 16px;
|
||||||
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.ant-layout-header .header-breadcrumb {
|
||||||
height: 32px;
|
margin: 18px 0;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
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;
|
margin: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-layout .site-layout-background {
|
.ant-card-body {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-layout-footer {
|
||||||
|
height: 48px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
padding: 14px 50px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in new issue