添加菜单

.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

src/layouts/default.vue

@@ -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 { 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[]) => {
-	navStore().adminPath = key
+	state.activeIndex = key
-	console.log(key, keyPath)
 }
 
+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;

src/pages/admin/item.vue

@@ -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-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="seasonEffectOption" autoresize />-->
-<!--		</el-col>-->
-<!--	</el-row>-->
 
+				<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'
+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) },
-	]
-})
-
-// 销售高峰与低谷分析
-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
-			]
 	}
-	]
 })
+// 表单数据
+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 () => {
-const seasonEffectOption = ref({
+	if (formData.id) {
-	title: { text: '季节性影响' },
+		// 更新交易记录
-	tooltip: { trigger: 'item' },
+		await adminRequest.put(`${state.route}/${formData.id}`, formData)
-	legend: { orient: 'vertical', left: 'left' },
+	} else {
-	series: [
+		// 新增交易记录
-		{
+		await adminRequest.post(`${state.route}`, formData)
-			name: '销售占比',
-			type: 'pie',
-			radius: '55%',
-			data: [
-				{ value: 400, name: '冬季' },
-				{ value: 300, name: '春季' },
-				{ value: 250, name: '夏季' },
-				{ value: 350, name: '秋季' }
-			]
 	}
-	]
+	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 {
+.dialog-footer {
-
+	text-align: right;
-	height: 400px;
 }
 </style>