组装机

src/router/index.js

@@ -214,6 +214,11 @@ const routes = [{
 				component: () => import('../views/equipment/dryer.vue')
 			},
 			{
+				path: 'injectionMolding/:id',
+				name: '注塑机',
+				component: () => import('../views/equipment/injectionMolding.vue')
+			},
+			{
 				path: 'process',
 				name: '采购单',
 				component: () => import('../views/process/index.vue')

src/views/equipment/components/commonCharts.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="commonCharts">
+        <div class="title">
+            <img src="@/assets/images/icon_clsj@2x.png" alt="">
+            产量数据
+        </div>
+        <div class="chart-box" id="myCharts" ref="myCharts"></div>
+    </div>
+</template>
+<script setup>
+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)
+}
+const router = useRouter()
+
+const getDtl = () => {
+	proxy.post('/tdaDevice/data', { deviceId: router.currentRoute.value.params.id }).then(
+		(res) => {
+			console.log(res)
+		}
+	)
+	
+}
+const onClickLeft = () => history.back();
+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">
+.commonCharts{
+    background: #fff;
+    box-sizing: border-box;
+    margin: 12px 12px 0;
+    border-radius: 5px;
+    .title{
+        display: flex;
+        font-size: 14px;
+        color: #333;
+        line-height: 50px;
+        img{
+            width: 20px;
+            height: 20px;
+            margin: 15px 8px 15px 15px;
+        }
+    }
+}
+#myCharts{
+    height:250px;
+}
+</style>

src/views/equipment/injectionMolding.vue

@@ -0,0 +1,356 @@
+<template>
+	<van-nav-bar
+		:title="$t('threadHead.title')"
+		left-text=""
+		left-arrow
+		@click-left="onClickLeft"
+	>
+	</van-nav-bar>
+	<equipmentTop></equipmentTop>
+	
+	<div class="injectionMolding">
+        <div class="fermentator-header">
+            <div class="status">
+                <div class="img">
+                    <img src="../../assets/images/icon_sbzt1.png" alt="" />
+                </div>
+                <div class="text">
+                    <div class="label">设备状态</div>
+                    <div class="value" style="color: #3fbf31">正常</div>
+                </div>
+            </div>
+            <div class="mode">
+                <div class="img">
+                    <img src="../../assets/images/icon_gzms1.png" alt="" />
+                </div>
+                <div class="text">
+                    <div class="label">工作模式</div>
+                    <div class="value">自动</div>
+                </div>
+            </div>
+        </div>
+        <commonCharts></commonCharts>
+		<ul>
+			<li>
+				<div class="li-icon">
+					<img src="@/assets/images/icon_mjzt.png" alt="" />
+				</div>
+				<div class="li-text">模具状态</div>
+				<div class="li-stat li-stat-bg"></div>
+			</li>
+			<li style="margin-left: 2%">
+				<div class="li-icon">
+					<img src="@/assets/images/icon_yyj.png" alt="" />
+				</div>
+				<div class="li-text">液压机</div>
+				<div class="li-stat li-stat-bg"></div>
+			</li>
+			<li>
+				<div class="li-text">液压油温度</div>
+				<div class="li-stat li-stat-img">
+					<img src="@/assets/images/icon_wdj.png" alt="" />
+				</div>
+				<div class="li-num">80℃</div>
+			</li>
+			<li style="margin-left: 2%">
+				<div class="li-text">简体温度</div>
+				<div class="li-stat li-stat-img">
+					<img src="@/assets/images/icon_wdj.png" alt="" />
+				</div>
+				<div class="li-num">80℃</div>
+			</li>
+		</ul>
+		<div class="channel">
+			<div class="list-box">
+				<div class="title">通道1</div>
+				<div class="pressure-chart">
+					<div
+						class="pressure-zhen"
+						:style="'transform: rotate(60deg);'"
+					>
+						<img src="@/assets/images/zhen.png" alt="" />
+					</div>
+					<div class="pressure-line"></div>
+				</div>
+				<div class="num">15 Bar</div>
+				<div class="text">压力1</div>
+				<div class="line"></div>
+				<div class="text">速度1</div>
+				<div class="speed">60%</div>
+				<div class="speed-line">
+					<div></div>
+				</div>
+			</div>
+			<div class="list-box">
+				<div class="title">通道1</div>
+				<div class="pressure-chart">
+					<div
+						class="pressure-zhen"
+						:style="'transform: rotate(60deg);'"
+					>
+						<img src="@/assets/images/zhen.png" alt="" />
+					</div>
+					<div class="pressure-line"></div>
+				</div>
+				<div class="num">15 Bar</div>
+				<div class="text">压力1</div>
+				<div class="line"></div>
+				<div class="text">速度1</div>
+				<div class="speed">60%</div>
+				<div class="speed-line">
+					<div></div>
+				</div>
+			</div>
+			<div class="list-box">
+				<div class="title">通道1</div>
+				<div class="pressure-chart">
+					<div
+						class="pressure-zhen"
+						:style="'transform: rotate(60deg);'"
+					>
+						<img src="@/assets/images/zhen.png" alt="" />
+					</div>
+					<div class="pressure-line"></div>
+				</div>
+				<div class="num">15 Bar</div>
+				<div class="text">压力1</div>
+				<div class="line"></div>
+				<div class="text">速度1</div>
+				<div class="speed">60%</div>
+				<div class="speed-line">
+					<div></div>
+				</div>
+			</div>
+			<div class="list-box">
+				<div class="title">通道1</div>
+				<div class="pressure-chart">
+					<div
+						class="pressure-zhen"
+						:style="'transform: rotate(60deg);'"
+					>
+						<img src="@/assets/images/zhen.png" alt="" />
+					</div>
+					<div class="pressure-line"></div>
+				</div>
+				<div class="num">15 Bar</div>
+				<div class="text">压力1</div>
+				<div class="line"></div>
+				<div class="text">速度1</div>
+				<div class="speed">60%</div>
+				<div class="speed-line">
+					<div></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import equipmentTop from '@/components/equipment-top.vue'
+import commonCharts from './components/commonCharts.vue'
+import * as echarts from 'echarts'
+import { ref, reactive, onMounted } from 'vue'
+const onClickLeft = () => proxy.$router.push('/main/working')
+
+</script>
+<style lang="scss">
+.fermentator-header {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 12px;
+    padding: 0 12px;
+	.status,
+	.mode {
+		width: 49%;
+		background: #fff;
+		padding: 12px;
+		box-sizing: border-box;
+		display: flex;
+		.label {
+			font-size: 14px;
+			color: #666;
+		}
+		.value {
+			font-weight: bold;
+			font-size: 16px;
+			color: #ff8800;
+			margin-top: 6px;
+		}
+		.img {
+			width: 50px;
+			height: 50px;
+			margin-right: 12px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+.injectionMolding {
+	.channel {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 12px;
+		margin-top: 12px;
+		.speed-line {
+			background: #eee;
+			width: 50px;
+			height: 10px;
+			margin: 0 auto;
+			border-radius: 5px;
+			div {
+				width: 50%;
+				height: 100%;
+				background: linear-gradient(270deg, #3370ff 0%, #a0bbfb 100%);
+				border-radius: 5px;
+			}
+		}
+		.list-box {
+			width: 23%;
+			background: #fff;
+			border-radius: 5px;
+			padding: 15px 0 20px;
+			text-align: center;
+			.speed {
+				color: #333;
+				margin: 8px auto;
+				font-size: 16px;
+				font-weight: 400;
+			}
+			.line {
+				height: 1px;
+				background: #ddd;
+
+				margin: 15px 20px;
+			}
+			.num {
+				font-size: 16px;
+				color: #333;
+				font-weight: 400;
+			}
+			.text {
+				font-size: 14px;
+				color: #666666;
+			}
+			.pressure-chart {
+				height: 50px;
+				width: 50px;
+				// background-image: conic-gradient(from 135deg ,#fff 90deg, #EEEEEE 26%);
+				background: url('@/assets/images/ybp.png') no-repeat;
+				background-size: 100% 100%;
+				border-radius: 50%;
+				margin: 10px auto;
+				position: relative;
+				.pressure-zhen {
+					position: absolute;
+					z-index: 2;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					transform: rotate(70deg);
+					transition: all ease 0.5s;
+					img {
+						width: 18px;
+						height: 18px;
+						margin-top: 11px;
+					}
+				}
+				.pressure-line {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					z-index: 1;
+					// background-image: conic-gradient(from 135deg ,#fff 90deg,#FFAF53 90deg,#FF8800 0%, #EEEEEE 0%);
+					border-radius: 50%;
+					transition: all ease 0.5s;
+				}
+				.pressure-line::before {
+					position: absolute;
+					display: block;
+					top: 10px;
+					left: 10px;
+					right: 10px;
+					bottom: 10px;
+					content: ' ';
+					background-color: #fff;
+					border-radius: 50%;
+				}
+			}
+			.pressure-chart::before {
+				position: absolute;
+				display: block;
+				inset: 10px 10px 10px 10px;
+				content: ' ';
+				background-color: #fff;
+				border-radius: 50%;
+			}
+			.title {
+				color: #333;
+				font-size: 14px;
+				font-weight: 400;
+				margin-bottom: 12px;
+			}
+		}
+	}
+	ul {
+		padding: 0 12px;
+		overflow: hidden;
+		li {
+			width: 49%;
+			float: left;
+			position: relative;
+			display: flex;
+			background: #fff;
+			padding: 12px;
+			box-sizing: border-box;
+			margin-top: 8px;
+			border-radius: 5px;
+			.li-num {
+				color: #333;
+				font-size: 20px;
+				line-height: 50px;
+				margin-left: 12px;
+				font-weight: bold;
+			}
+			.li-icon {
+				height: 50px;
+				width: 50px;
+				border-radius: 5px;
+				overflow: hidden;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.li-text {
+				line-height: 50px;
+				margin-left: 12px;
+				font-size: 14px;
+				color: #666666;
+			}
+			.li-stat {
+				position: absolute;
+				height: 16px;
+				width: 16px;
+				right: 8px;
+				top: 8px;
+			}
+			.li-stat-bg {
+				background: #3fbf31;
+				border-radius: 50%;
+				border: 3px solid #d8f2d5;
+				box-sizing: border-box;
+			}
+			.li-stat-img {
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+}
+</style>