添加菜单
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-container>
|
||||||
<el-aside width="200px" >
|
<el-aside width="200px" >
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="navStore().adminPath"
|
:default-active="state.activeIndex"
|
||||||
router
|
router
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
>
|
>
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
v-for="r in getFrontList()"
|
v-for="r in getAdminList()"
|
||||||
:key="r.name"
|
:key="r.name"
|
||||||
:index="r.path"
|
:index="r.path"
|
||||||
>
|
>
|
||||||
@ -27,20 +27,31 @@
|
|||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getFrontList } from '~/utils/utils'
|
import { getAdminList} from '~/utils/utils'
|
||||||
import navStore from '~/stores/navStore'
|
import { useRoute } from 'vue-router'
|
||||||
|
// 获取当前路由信息
|
||||||
|
const route = useRoute()
|
||||||
|
const state = reactive({
|
||||||
|
activeIndex:'/admin'
|
||||||
|
})
|
||||||
|
|
||||||
const handleSelect = (key: string, keyPath: string[]) => {
|
const handleSelect = (key: string, keyPath: string[]) => {
|
||||||
navStore().adminPath = key
|
state.activeIndex = key
|
||||||
console.log(key, keyPath)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
// 初始化activeIndex为当前路由的path路径,方便在菜单栏高<EFBFBD><EFBFBD>显示选中项
|
||||||
|
state.activeIndex = route.path
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.main{
|
.main{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 80px);
|
||||||
background-color: #f6f4f4;
|
background-color: #f2f4f8;
|
||||||
}
|
}
|
||||||
.icons{
|
.icons{
|
||||||
width: 18px;
|
width: 18px;
|
||||||
|
@ -1,123 +1,191 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<!--增、查交易记录的按钮-->
|
||||||
|
<el-button type="primary" round @click="openAddDialog" size="small">添加</el-button>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<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">
|
||||||
|
<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-row>
|
<!-- 表单开始===============================================================================================================================-->
|
||||||
<el-col :span="24">
|
|
||||||
<v-chart class="chart" :option="salesOption" autoresize />
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row>
|
<el-form-item label="标号" prop="id" :rules="[{ required: true, message: '请输入标号', trigger: 'blur' }]">
|
||||||
<el-col :span="24">
|
<el-input v-model="formData.id" />
|
||||||
<v-chart class="chart" :option="salesPeakOption" autoresize />
|
</el-form-item>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- <el-row>-->
|
|
||||||
<!-- <el-col :span="24">-->
|
|
||||||
<!-- <v-chart class="chart" :option="seasonEffectOption" autoresize />-->
|
|
||||||
<!-- </el-col>-->
|
|
||||||
<!-- </el-row>-->
|
|
||||||
|
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
// 交易记录数据
|
||||||
import VChart from 'vue-echarts'
|
const state = reactive({
|
||||||
import { LineChart, BarChart, PieChart } from 'echarts/charts'
|
route:"/api/transactions",
|
||||||
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
|
dialogVisible:false,
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
getList: [],//获取数据
|
||||||
import { use } from 'echarts/core'
|
query:{
|
||||||
|
total: 0, // 总记录数
|
||||||
// 引入并使用图表组件
|
page: 1, // 当前页码
|
||||||
use([CanvasRenderer, LineChart, BarChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
|
size: 10, // 每页显示的记录数
|
||||||
const salesData = ref([
|
itemId:"",
|
||||||
{ 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) },
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
|
// 表单数据
|
||||||
|
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 salesPeakOption = ref({
|
const saveTransaction = async () => {
|
||||||
title: { text: '销售高峰与低谷' },
|
if (formData.id) {
|
||||||
tooltip: { trigger: 'axis' },
|
// 更新交易记录
|
||||||
xAxis: {
|
await adminRequest.put(`${state.route}/${formData.id}`, formData)
|
||||||
type: 'category',
|
} else {
|
||||||
data: [
|
// 新增交易记录
|
||||||
'00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00',
|
await adminRequest.post(`${state.route}`, formData)
|
||||||
'14:00', '16:00', '18:00', '20:00', '22:00', '23:00'
|
}
|
||||||
]
|
init()
|
||||||
},
|
state.dialogVisible = false
|
||||||
yAxis: { type: 'value' },
|
ElMessage.success("提交成功~")
|
||||||
series: [
|
}
|
||||||
{
|
|
||||||
name: '销售量',
|
|
||||||
type: 'bar',
|
|
||||||
data: [
|
|
||||||
50, 30, 20, 30, 150, 180, 200, 250, 220, 210, 100, 60, 40
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
|
// 删除交易记录
|
||||||
|
const del = async (id: number) => {
|
||||||
|
try {
|
||||||
|
await adminRequest.delete(`${state.route}/${id}`)
|
||||||
|
init()
|
||||||
|
ElMessage.success("删除成功~")
|
||||||
|
} catch (error) {
|
||||||
|
ElMessage.error("删除失败~")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 季节性影响分析
|
// 页码改变时的处理函数
|
||||||
const seasonEffectOption = ref({
|
const handlePageChange = (page: number) => {
|
||||||
title: { text: '季节性影响' },
|
state.query.page = page
|
||||||
tooltip: { trigger: 'item' },
|
init()
|
||||||
legend: { orient: 'vertical', left: 'left' },
|
}
|
||||||
series: [
|
// 页面加载时获取交易记录
|
||||||
{
|
onMounted(() => {
|
||||||
name: '销售占比',
|
init()
|
||||||
type: 'pie',
|
|
||||||
radius: '55%',
|
|
||||||
data: [
|
|
||||||
{ value: 400, name: '冬季' },
|
|
||||||
{ value: 300, name: '春季' },
|
|
||||||
{ value: 250, name: '夏季' },
|
|
||||||
{ value: 350, name: '秋季' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart {
|
.dialog-footer {
|
||||||
|
text-align: right;
|
||||||
height: 400px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user