参数修改 路由合并

src/router/index.js

@@ -19,7 +19,8 @@ const routes = [{
 		name: 'main',
 		component: main,
 		redirect: '/main/equipment',
-		children: [{
+		children: [
+			{
 				path: 'equipment',
 				name: '设备列表',
 				component: () => import('../views/equipment/index.vue')
@@ -30,7 +31,7 @@ const routes = [{
 				component: () => import('../views/working/index.vue')
 			},
 			{
-				path: 'warpKnitting',
+				path: 'warpKnitting/:id',
 				name: '经编机',
 				component: () => import('../views/equipment/warpKnitting.vue')
 			},

src/views/equipment/index.vue

@@ -1,184 +1,176 @@
 <template>
-    <div class="equipment">
-        <ul>
-            <li @click="toDtl()">
-                <div class="title">经编机</div>
-                <div class="content">
-                    <div class="item">
-                        <div class="label">设备状态</div>
-                        <div class="value">正常</div>
-                    </div>
-                    <div class="item">
-                        <div class="label">设备状态</div>
-                        <div class="value">正常</div>
-                    </div>
-                </div>
-                <div class="foot-tag">
-                    <div class="tag">
-                        <div class="icon">
-                            <van-icon name="location-o" />
-                        </div>
-                        <div class="text">EBC</div>
-                    </div>
-                    <div class="tag">
-                        <div class="icon">
-                            <van-icon name="location-o" />
-                        </div>
-                        <div class="text">贾卡</div>
-                    </div>
-                    <div class="tag">
-                        <div class="icon">
-                            <van-icon name="location-o" />
-                        </div>
-                        <div class="text">横移</div>
-                    </div>
-                </div>
-                <div class="type stop">
-                    运行
-                </div>
-            </li>
-            <li>
-                <div class="title">经编机</div>
-                <div class="content">
-                    <div class="item">
-                        <div class="label">设备状态</div>
-                        <div class="value">正常</div>
-                    </div>
-                    <div class="item">
-                        <div class="label">设备状态</div>
-                        <div class="value">正常</div>
-                    </div>
-                </div>
-                <div class="foot-tag">
-                    <div class="tag">
-                        <div class="icon">
-                            <van-icon name="location-o" />
-                        </div>
-                        <div class="text">EBC</div>
-                    </div>
-                    <div class="tag">
-                        <div class="icon">
-                            <van-icon name="location-o" />
-                        </div>
-                        <div class="text">贾卡</div>
-                    </div>
-                    <div class="tag">
-                        <div class="icon">
-                            <van-icon name="location-o" />
-                        </div>
-                        <div class="text">横移</div>
-                    </div>
-                </div>
-                <div class="type success">
-                    运行
-                </div>
-            </li>
-        </ul>
-    </div>
+	<van-pull-refresh v-model="loading" @refresh="onRefresh">
+		<div class="equipment">
+			<van-list
+				v-model:loading="loading"
+				:finished="finished"
+				finished-text="没有更多了"
+				@load="onLoad"
+			>
+				<ul>
+					<li @click="toDtl(i)" v-for="i in listData" :key="i.id">
+						<div class="title">{{ i.deviceName }}</div>
+						<div class="content">
+							<div class="item">
+								<div class="label">型号</div>
+								<div class="value">{{ i.productName}}</div>
+							</div>
+							<div class="item">
+								<div class="label">今日产量</div>
+								<div class="value">0</div>
+							</div>
+						</div>
+						<div class="foot-tag">
+							<div class="tag" v-if="i.other.ebc">
+								<div class="icon">
+									<van-icon name="location-o" />
+								</div>
+								<div class="text">EBC</div>
+							</div>
+							<div class="tag" v-if="i.other.jiaka">
+								<div class="icon">
+									<van-icon name="location-o" />
+								</div>
+								<div class="text">贾卡</div>
+							</div> 
+							<div class="tag"  v-if="i.other.hengyi">
+								<div class="icon">
+									<van-icon name="location-o" />
+								</div>
+								<div class="text">横移</div>
+							</div>
+						</div>
+						<div class="type stop">运行</div>
+					</li>
+				</ul>
+			</van-list>
+		</div>
+	</van-pull-refresh>
 </template>
 <script setup>
-import { ref,getCurrentInstance } from 'vue'
-const proxy = getCurrentInstance().proxy;
-const toDtl = () => {
-    
-    proxy.$router.push('/main/warpKnitting')
+import { ref, getCurrentInstance, onMounted } from 'vue'
+const loading = ref(false)
+const finished = ref(false);
+const proxy = getCurrentInstance().proxy
+const listData = ref([])
+const onRefresh = () => {
+	setTimeout(() => {
+		loading.value = false
+	}, 500)
 }
+const onLoad = () => {
+    setTimeout(() => {
+        loading.value = false
+        finished.value = true
+    }, 500)
+}
+
+const toDtl = (row) => {
+	proxy.$router.push('/main/warpKnitting/' + row.deviceId)
+}
+const getList = () => {
+	proxy.post('/tdaDevice/page').then(res => {
+		listData.value = res.data.rows
+		console.log(res)
+	})
+}
+getList()
 </script>
 
 <style lang="scss" scoped>
 .equipment {
-    
-    background-color: #f1f1f1;
-    padding: 12px;
-    color: #333;
-    font-weight: 400;
-    ul {
-        li {
-            background: #fff;
-            border-radius: 8px;
-            margin-top: 12px;
-            padding: 0 12px;
-            position: relative;
-            .type{
-                position: absolute;
-                top: 0;
-                right: 0;
-                background: #FF8C33;
-                color: #fff;
-                font-size: 12px;
-                height: 24px;
-                line-height: 24px;
-                border-radius: 0 8px 0 8px;
-                width: 60px;
-                text-align: center;
-            }
-            //成功
-            .success {
-                background: #3FBF31;
-                color: #fff;
-            }
-            .error {
-                background: #F6514F;
-                color: #fff;
-            }
-            .stop{
-                background: #DDDDDD;
-                color: #999999;
-            }
-            .title {
-                font-size: 16px;
-                font-weight: bold;
-                height: 48px;
-                line-height: 48px;
-            }
-            .content {
-                display: flex;
-                .item {
-                    flex: 1;
-                    .label {
-                        font-size: 12px;
-                        color: #999;
-                        margin-bottom: 8px;
-                    }
-                    .value {
-                        font-size: 14px;
-                        color: #333;
-                    }
-                }
-            }
-            .foot-tag {
-                display: flex;
-                margin-top: 12px;
-                color: #333;
-                font-size: 12px;
-                font-weight: 400;
-                height: 44px;
-                border-top: 1px solid #ddd;
-                padding-top: 12px;
-                box-sizing: border-box;
-                .tag {
-                    margin-right: 24px;
-                    display: flex;
-                    align-items: left;
-                    .icon {
-                        margin-right: 8px;
-                        height: 20px;
-                        width: 20px;
-                        line-height: 20px;
-                        text-align: center;
-                        font-size: 12px;
-                        border-radius: 4px;
-                        background: #FF8C33;
-                        color: #fff;
-                    }
-                    .text {
-                        font-size: 12px;
-                        line-height: 20px;
-                        color: #999;
-                    }
-                }
-            }
-        }
-    }
+	background-color: #f1f1f1;
+	padding: 12px;
+	color: #333;
+	min-height: 80vh;
+	font-weight: 400;
+	ul {
+		li {
+			background: #fff;
+			border-radius: 8px;
+			margin-top: 12px;
+			padding: 0 12px;
+			position: relative;
+			.type {
+				position: absolute;
+				top: 0;
+				right: 0;
+				background: #ff8c33;
+				color: #fff;
+				font-size: 12px;
+				height: 24px;
+				line-height: 24px;
+				border-radius: 0 8px 0 8px;
+				width: 60px;
+				text-align: center;
+			}
+			//成功
+			.success {
+				background: #3fbf31;
+				color: #fff;
+			}
+			.error {
+				background: #f6514f;
+				color: #fff;
+			}
+			.stop {
+				background: #dddddd;
+				color: #999999;
+			}
+			.title {
+				font-size: 16px;
+				font-weight: bold;
+				height: 48px;
+				line-height: 48px;
+			}
+			.content {
+				display: flex;
+				.item {
+					flex: 1;
+					.label {
+						font-size: 12px;
+						color: #999;
+						margin-bottom: 8px;
+					}
+					.value {
+						font-size: 14px;
+						color: #333;
+					}
+				}
+			}
+			.foot-tag {
+				display: flex;
+				margin-top: 12px;
+				color: #333;
+				font-size: 12px;
+				font-weight: 400;
+				height: 44px;
+				border-top: 1px solid #ddd;
+				padding-top: 12px;
+				box-sizing: border-box;
+				.tag {
+					margin-right: 24px;
+					display: flex;
+					align-items: left;
+					.icon {
+						margin-right: 8px;
+						height: 20px;
+						width: 20px;
+						line-height: 20px;
+						text-align: center;
+						font-size: 12px;
+						border-radius: 4px;
+						background: #ff8c33;
+						color: #fff;
+					}
+					.text {
+						font-size: 12px;
+						line-height: 20px;
+						color: #999;
+					}
+				}
+			}
+		}
+	}
 }
 </style>

src/views/equipment/warpKnitting.vue

@@ -1,5 +1,5 @@
 <template>
-    <van-nav-bar title="标题" left-arrow />
+	<van-nav-bar title="标题" left-arrow />
 	<van-pull-refresh v-model="loading" @refresh="onRefresh">
 		<div class="warpKnitting">
 			<div class="stat">
@@ -40,9 +40,12 @@
 				</div>
 				<div class="num">400 RPM</div>
 			</div>
-            <div class="commons-title">产量数据</div>
-			<div class="chart-box" id="myCharts" ref="myCharts">
-
+			<div class="commons-title">产量数据</div>
+            <div class="chart-warp">
+                <div class="chart-box" id="myCharts" ref="myCharts"></div>
+                <div class="label-box">
+                    
+                </div>
             </div>
 			<div class="commons-title">EBC</div>
 			<ul class="buchang">
@@ -130,69 +133,107 @@
 	</van-pull-refresh>
 </template>
 <script setup>
-import * as echarts from 'echarts'  
-import { ref,onMounted } from "vue";
-const loading = ref(false);
+import * as echarts from 'echarts'
+import { ref, onMounted,getCurrentInstance } from 'vue'
+import { useRouter } from 'vue-router'
+const proxy = getCurrentInstance().proxy
+const loading = ref(false)
 const onRefresh = () => {
-    setTimeout(() => {
-        loading.value = false;
-    }, 500);
-};
-onMounted (() => {
-    const myChart = echarts.init(document.getElementById('myCharts'));
-    const option = {
-        grid: {
-            top: '8%',
-            left: '8%',
-            right: '8%',
-            bottom: '8%',
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['0', '1', '2', '3', '4', '5', '6']
-        },
-        yAxis: {
-            type: 'value'
-        },
-        series: [{
-            data: [135, 135, 122, 211, 345, 567, 654],
-            type: 'line',
-            areaStyle: {
-                opacity: 0,
-            },
-            stack: 'Total',
-			smooth: true,
-            lineStyle: {
-                normal: {
-                color: '#0084FF', // 折线线条颜色:红色
-                },
-            },
-        },{
-            data: [150, 150, 150, 150, 150, 150, 150],
-            type: 'line',
-            areaStyle: {
-                opacity: 0,
-            },
-            lineStyle: {
-                normal: {
-                color: '#FF8C33', // 折线线条颜色:红色
-                },
-            },
-        }]
-    };
-    myChart.setOption(option);
+	setTimeout(() => {
+		loading.value = false
+	}, 500)
+}
+const router = useRouter()
+
+const getDtl = () => {
+	proxy.post('/tdaDevice/data', { deviceId: router.currentRoute.value.params.id }).then(
+		(res) => {
+			console.log(res)
+		}
+	)
+	
+}
+getDtl()
+onMounted(() => {
+	const myChart = echarts.init(document.getElementById('myCharts'))
+	const option = {
+		grid: {
+			top: '8%',
+			left: '4%',
+			right: '8%',
+			bottom: '8%',
+			containLabel: true,
+		},
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross',
+				label: {
+					backgroundColor: '#6a7985',
+				},
+				
+			},
+		},
+
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,
+			data: ['0', '1', '2', '3', '4', '5', '6'],
+		},
+		yAxis: {
+			type: 'value',
+		},
+		series: [
+			{
+				data: [135, 135, 122, 211, 345, 567, 654],
+				type: 'line',
+                
+                symbolSize: 10,
+                showSymbol: false,
+				areaStyle: {
+					opacity: 0,
+				},
+				stack: 'Total',
+				smooth: true,
+				lineStyle: {
+					normal: {
+						color: '#0084FF',
+                        width: 4,
+					},
+				},
+			},
+			{
+				data: [150, 150, 150, 150, 150, 150, 150],
+				type: 'line',
+               
+                symbolSize: 10,
+                showSymbol: false,
+				areaStyle: {
+					opacity: 0,
+				},
+				lineStyle: {
+					normal: {
+						color: '#FF8C33',
+                        width: 4,
+					},
+				},
+			},
+		],
+	}
+	myChart.setOption(option)
 })
 </script>
 <style lang="scss" scoped>
 .warpKnitting {
 	padding: 0 12px 80px;
-    .chart-box{
-        height: 250px;
+    .chart-warp{
         background: #fff;
-        
-    }
+        .chart-box {
+            height: 250px;
+            
+	    }
+    }   
+	
 	.songjin {
 		li {
 			height: 74px;