添加菜单
This commit is contained in:
闵宪瑞
parent
4b3c5e6f48
commit
170690b9ef
5
.idea/.gitignore
generated
vendored
5
.idea/.gitignore
generated
vendored
@ -1,5 +0,0 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
@ -6,12 +6,12 @@
|
||||
<el-container>
|
||||
<el-aside width="200px" >
|
||||
<el-menu
|
||||
:default-active="navStore().adminPath"
|
||||
:default-active="state.activeIndex"
|
||||
router
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="r in getFrontList()"
|
||||
v-for="r in getAdminList()"
|
||||
:key="r.name"
|
||||
:index="r.path"
|
||||
>
|
||||
@ -27,20 +27,31 @@
|
||||
</el-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getFrontList } from '~/utils/utils'
|
||||
import navStore from '~/stores/navStore'
|
||||
import { getAdminList} from '~/utils/utils'
|
||||
import { useRoute } from 'vue-router'
|
||||
// 获取当前路由信息
|
||||
const route = useRoute()
|
||||
const state = reactive({
|
||||
activeIndex:'/admin'
|
||||
})
|
||||
|
||||
const handleSelect = (key: string, keyPath: string[]) => {
|
||||
navStore().adminPath = key
|
||||
console.log(key, keyPath)
|
||||
state.activeIndex = key
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
// 初始化activeIndex为当前路由的path路径，方便在菜单栏高<EFBFBD><EFBFBD>显示选中项
|
||||
state.activeIndex = route.path
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main{
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
background-color: #f6f4f4;
|
||||
background-color: #f2f4f8;
|
||||
}
|
||||
.icons{
|
||||
width: 18px;
|
||||
|
||||
@ -1,123 +1,191 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<!--增、查交易记录的按钮-->
|
||||
<el-button type="primary" round @click="openAddDialog" size="small">添加</el-button>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<v-chart class="chart" :option="salesOption" autoresize />
|
||||
<el-form :inline="true" :model="state.query" class="demo-form-inline">
|
||||
<el-form-item label="序号：">
|
||||
<el-input v-model="state.query.itemId" placeholder="请输入序号" clearable @input="init" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!--表格-->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<v-chart class="chart" :option="salesPeakOption" autoresize />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-row>-->
|
||||
<!-- <el-col :span="24">-->
|
||||
<!-- <v-chart class="chart" :option="seasonEffectOption" autoresize />-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
|
||||
<el-table :data="state.getList">
|
||||
<!-- 列表结开始-->
|
||||
<el-table-column prop="id" label="标号"/>
|
||||
<el-table-column prop="itemId" label="序号"/>
|
||||
<el-table-column prop="orderId" label="订单唯一标识"/>
|
||||
<el-table-column prop="orderDistance" label="订单距离"/>
|
||||
<el-table-column prop="orderStartTime" label="订单开始时间"/>
|
||||
<el-table-column prop="orderEndTime" label="订单结束时间"/>
|
||||
<el-table-column prop="longitude" label="经度"/>
|
||||
<el-table-column prop="dimension" label="维度"/>
|
||||
<el-table-column prop="insertTime" label="插入时间"/>
|
||||
<el-table-column prop="carId" label="车辆编号"/>
|
||||
<!--列表结束-->
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button @click="edit(scope.row)" size="small">编辑</el-button>
|
||||
<el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-slot:empty>
|
||||
<el-empty description="数据去外太空了~" />
|
||||
</template>
|
||||
</el-table>
|
||||
<!-- 分页控件 -->
|
||||
<el-pagination
|
||||
v-if="state.query.total > 0"
|
||||
:current-page="state.query.page"
|
||||
:page-size="state.query.size"
|
||||
:total="state.query.total"
|
||||
background layout="prev, pager, next"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="state.dialogVisible" title="新增交易记录" width="50%">
|
||||
<el-form :model="formData" ref="form" label-width="100px">
|
||||
|
||||
<!-- 表单开始===============================================================================================================================-->
|
||||
|
||||
<el-form-item label="标号" prop="id" :rules="[{ required: true, message: '请输入标号', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.id" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="序号" prop="itemId" :rules="[{ required: true, message: '请输入序号', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.itemId" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="订单唯一标识" prop="orderId" :rules="[{ required: true, message: '请输入订单唯一标识', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.orderId" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="订单距离" prop="orderDistance" :rules="[{ required: true, message: '请输入订单距离', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.orderDistance" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="订单开始时间" prop="orderStartTime" :rules="[{ required: true, message: '请输入订单开始时间', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.orderStartTime" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="订单结束时间" prop="orderEndTime" :rules="[{ required: true, message: '请输入订单结束时间', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.orderEndTime" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="经度" prop="longitude" :rules="[{ required: true, message: '请输入经度', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.longitude" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="维度" prop="dimension" :rules="[{ required: true, message: '请输入维度', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.dimension" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="插入时间" prop="insertTime" :rules="[{ required: true, message: '请输入插入时间', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.insertTime" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="车辆编号" prop="carId" :rules="[{ required: true, message: '请输入车辆编号', trigger: 'blur' }]">
|
||||
<el-input v-model="formData.carId" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<!--表单结束===============================================================================================================================-->
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="state.dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveTransaction">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { LineChart, BarChart, PieChart } from 'echarts/charts'
|
||||
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { use } from 'echarts/core'
|
||||
|
||||
// 引入并使用图表组件
|
||||
use([CanvasRenderer, LineChart, BarChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
|
||||
const salesData = ref([
|
||||
{ date: '2024-01-01', sales: 200, inventory: 150, demand: 180, season: 'Winter' },
|
||||
{ date: '2024-01-02', sales: 250, inventory: 130, demand: 220, season: 'Winter' },
|
||||
{ date: '2024-01-03', sales: 180, inventory: 140, demand: 200, season: 'Winter' },
|
||||
{ date: '2024-01-04', sales: 300, inventory: 120, demand: 280, season: 'Winter' },
|
||||
{ date: '2024-01-05', sales: 220, inventory: 110, demand: 210, season: 'Winter' },
|
||||
{ date: '2024-01-06', sales: 270, inventory: 130, demand: 250, season: 'Winter' },
|
||||
{ date: '2024-01-07', sales: 320, inventory: 100, demand: 300, season: 'Winter' },
|
||||
{ date: '2024-04-01', sales: 400, inventory: 100, demand: 350, season: 'Spring' },
|
||||
{ date: '2024-04-02', sales: 420, inventory: 90, demand: 380, season: 'Spring' },
|
||||
{ date: '2024-04-03', sales: 500, inventory: 80, demand: 460, season: 'Spring' },
|
||||
{ date: '2024-04-04', sales: 550, inventory: 70, demand: 500, season: 'Spring' },
|
||||
{ date: '2024-04-05', sales: 480, inventory: 60, demand: 450, season: 'Spring' },
|
||||
{ date: '2024-04-06', sales: 510, inventory: 50, demand: 470, season: 'Spring' },
|
||||
{ date: '2024-04-07', sales: 530, inventory: 40, demand: 500, season: 'Spring' },
|
||||
{ date: '2024-07-01', sales: 600, inventory: 200, demand: 550, season: 'Summer' },
|
||||
{ date: '2024-07-02', sales: 620, inventory: 190, demand: 580, season: 'Summer' },
|
||||
{ date: '2024-07-03', sales: 650, inventory: 180, demand: 600, season: 'Summer' },
|
||||
{ date: '2024-07-04', sales: 700, inventory: 170, demand: 650, season: 'Summer' },
|
||||
{ date: '2024-07-05', sales: 750, inventory: 160, demand: 700, season: 'Summer' },
|
||||
{ date: '2024-07-06', sales: 800, inventory: 150, demand: 750, season: 'Summer' },
|
||||
{ date: '2024-07-07', sales: 850, inventory: 140, demand: 800, season: 'Summer' },
|
||||
{ date: '2024-10-01', sales: 300, inventory: 120, demand: 280, season: 'Autumn' },
|
||||
{ date: '2024-10-02', sales: 320, inventory: 110, demand: 300, season: 'Autumn' },
|
||||
{ date: '2024-10-03', sales: 350, inventory: 100, demand: 320, season: 'Autumn' }
|
||||
])
|
||||
// 销售分析（按天）
|
||||
const salesOption = ref({
|
||||
title: { text: '每日销售分析' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['销售量', '库存量', '客户需求'] },
|
||||
xAxis: { type: 'category', data: salesData.value.map(item => item.date) },
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{ name: '销售量', type: 'line', data: salesData.value.map(item => item.sales) },
|
||||
{ name: '库存量', type: 'line', data: salesData.value.map(item => item.inventory) },
|
||||
{ name: '客户需求', type: 'line', data: salesData.value.map(item => item.demand) },
|
||||
]
|
||||
})
|
||||
|
||||
// 销售高峰与低谷分析
|
||||
const salesPeakOption = ref({
|
||||
title: { text: '销售高峰与低谷' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00',
|
||||
'14:00', '16:00', '18:00', '20:00', '22:00', '23:00'
|
||||
]
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '销售量',
|
||||
type: 'bar',
|
||||
data: [
|
||||
50, 30, 20, 30, 150, 180, 200, 250, 220, 210, 100, 60, 40
|
||||
]
|
||||
// 交易记录数据
|
||||
const state = reactive({
|
||||
route:"/api/transactions",
|
||||
dialogVisible:false,
|
||||
getList: [],//获取数据
|
||||
query:{
|
||||
total: 0, // 总记录数
|
||||
page: 1, // 当前页码
|
||||
size: 10, // 每页显示的记录数
|
||||
itemId:"",
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
// 季节性影响分析
|
||||
const seasonEffectOption = ref({
|
||||
title: { text: '季节性影响' },
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { orient: 'vertical', left: 'left' },
|
||||
series: [
|
||||
{
|
||||
name: '销售占比',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
data: [
|
||||
{ value: 400, name: '冬季' },
|
||||
{ value: 300, name: '春季' },
|
||||
{ value: 250, name: '夏季' },
|
||||
{ value: 350, name: '秋季' }
|
||||
]
|
||||
// 表单数据
|
||||
let formData = reactive(<any>{})
|
||||
// 获取交易记录
|
||||
const init = () => {
|
||||
adminRequest.get(`${state.route}`, {
|
||||
params: state.query
|
||||
}).then((res:any) => {
|
||||
state.getList = res.data.data
|
||||
state.query.total = res.data.page.total
|
||||
})
|
||||
}
|
||||
]
|
||||
// 新增交易记录
|
||||
const openAddDialog = () => {
|
||||
formData = {}
|
||||
state.dialogVisible = true
|
||||
}
|
||||
// 编辑交易记录
|
||||
const edit = (row: any) => {
|
||||
formData = row
|
||||
state.dialogVisible = true
|
||||
}
|
||||
|
||||
// 保存交易记录
|
||||
const saveTransaction = async () => {
|
||||
if (formData.id) {
|
||||
// 更新交易记录
|
||||
await adminRequest.put(`${state.route}/${formData.id}`, formData)
|
||||
} else {
|
||||
// 新增交易记录
|
||||
await adminRequest.post(`${state.route}`, formData)
|
||||
}
|
||||
init()
|
||||
state.dialogVisible = false
|
||||
ElMessage.success("提交成功~")
|
||||
}
|
||||
|
||||
// 删除交易记录
|
||||
const del = async (id: number) => {
|
||||
try {
|
||||
await adminRequest.delete(`${state.route}/${id}`)
|
||||
init()
|
||||
ElMessage.success("删除成功~")
|
||||
} catch (error) {
|
||||
ElMessage.error("删除失败~")
|
||||
}
|
||||
}
|
||||
|
||||
// 页码改变时的处理函数
|
||||
const handlePageChange = (page: number) => {
|
||||
state.query.page = page
|
||||
init()
|
||||
}
|
||||
// 页面加载时获取交易记录
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
|
||||
height: 400px;
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user