byte-sailing-mobile/src/views/equipment/warpKnitting.vue

<template>
	<van-nav-bar :title="$t('warpKnitting.name')" left-arrow @click-left="onClickLeft" />
	<van-pull-refresh v-model="loading" @refresh="onRefresh">
		<div class="warpKnitting">
			<div class="stat">
				<div class="title">
					<span>{{$t('common.equipmentStatus')}}</span>
					<div class="type">{{swichType ? $t('common.running') : $t('common.offline')}}</div>
				</div>
				<ul>
					<li>
						<div class="icon">
							<img src="@/assets/images/icon_ebc1.png" alt="">
						</div>
						<div class="text">EBC</div>
						<div class="btn">{{swichType ? $t('common.running') : $t('common.offline')}}</div>
					</li>
					<li>
						<div class="icon">
							<img src="@/assets/images/icon_jk1.png" alt="">
						</div>
						<div class="text">{{$t('equipment.jaka')}}</div>
						<div class="btn">{{swichType ? $t('common.running') : $t('common.offline')}}</div>
					</li>
					<li>
						<div class="icon">
							<img src="@/assets/images/icon_hy1.png" alt="">
						</div>
						<div class="text">{{$t('equipment.horizontalShift')}}</div>
						<div class="btn">{{swichType ? $t('common.running') : $t('common.offline')}}</div>
					</li>
				</ul>
			</div>
			<div class="speed">
				<div style="display: flex">
					<div class="icon">
						<img src="@/assets/images/icon_zzzs.png" alt="">
					</div>
					<div class="text">{{$t('warpKnitting.spindleSpeed')}}</div>
				</div>
				<div class="num">{{deviceData.status.main_speed / 2}} RPM</div>
			</div>
			<!-- <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">
				<li>
					<div class="icon">
						<i class="iconfont icon-icon_dqbc"></i>
					</div>
					<div class="text">{{$t('warpKnitting.currentClothLength')}}</div>
					<div class="btn">{{deviceData.status.bu_len / 100}} M</div>
				</li>
				<li>
					<div class="icon">
						<i class="iconfont icon-icon_sdbc"></i>
					</div>
					<div class="text">{{$t('warpKnitting.setClothLength')}}</div>
					<div class="btn">{{deviceData.parameter.max_bulen}} M</div>
				</li>
				<li>
					<div class="icon">
						<i class="iconfont icon-icon_midu"></i>
					</div>
					<div class="text">{{$t('warpKnitting.density')}}</div>
					<div class="btn">{{deviceData.parameter.bumi}} Row/cm</div>
				</li>
			</ul>
			<ul class="qianla">
				<li>
					<div class="icon">
						<i class="iconfont icon-icon_qianla"></i>
					</div>
					<div class="text">{{$t('warpKnitting.traction')}}</div>
				</li>
				<li>
					<div class="icon">
						<i class="iconfont icon-icon_juanzhou"></i>
					</div>
					<div class="text">{{$t('warpKnitting.crimp')}}</div>
				</li>
			</ul>
			<ul class="songjin">
				<li  v-for="i in axisData" :key="i.index">
					<div style="display: flex">
						<div class="icon">
							<i class="iconfont icon-icon_songjingz"></i>
						</div>
						<div class="text" style="margin-left: 8px">
							{{$t('warpKnitting.warpLetOffAxis')}}
						</div>
					</div>
					<div class="num">
						<p>{{$t('warpKnitting.remainingTurns')}}: <span>{{i.curr}} N</span></p>
						<p>{{$t('warpKnitting.timeRemaining')}}: <span>{{i.time}} H</span></p>
					</div>
				</li>
			</ul>
		</div>
	</van-pull-refresh>
</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 = () => {
	getDtl()
	setTimeout(() => {
		loading.value = false
	}, 500)
}
const swichType = ref(false)
const router = useRouter()
let deviceData = ref({
	status:{},
	parameter:{},
})
let axisData = ref([])
const getDtl = () => {
	axisData.value = []
	proxy.post('/tdaDevice/data', { deviceId: router.currentRoute.value.params.id }).then(
		(res) => {
			for (let key in res.data.parameter) {
				if(key.substring(0,11) === 'axis_allnum'){
					axisData.value.push({
						axis:res.data.parameter[key],
						index:key.substring(12,13),
						curr:res.data.status['curr_num_' + key.substring(12,13)] || 0,
						time:res.data.status['left_time_' + key.substring(12,13)] || 0,
					})
				}
			}
			function up(x,y){
				return x.index -y.index;
			} 
			axisData.value.sort(up)
			const time1 = new Date(res.data.eventTime).getTime()
			const time2 = new Date().getTime()
			if(time1 + 600000 -  new Date().getTimezoneOffset() * 60 * 1000> time2){
				swichType.value = true
			}else{
				swichType.value = false
			}
			console.log(swichType.value)
			deviceData.value = res.data
		}
	)
	
}
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" scoped>
.warpKnitting {
	padding: 0 12px 80px;
    .chart-warp{
        background: #fff;
        .chart-box {
            height: 250px;
            
	    }
    }   
	
	.songjin {
		li {
			height: 74px;
			background: #ffffff;
			border-radius: 5px 5px 5px 5px;
			line-height: 50px;
			display: flex;
			justify-content: space-between;
			margin-top: 12px;
			padding: 12px;
			box-sizing: border-box;
			font-size: 14px;
			.icon {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #eeeeee;
				text-align: center;
				i{
					color: #0084FF;
					font-size: 24px;
				}
			}
			.num {
				margin-left: 8px;
				font-size: 14px;
				font-weight: 500;
				color: #333;
				p {
					margin: 0;
					line-height: 25px;
					color: #999999;
				}
				span {
					color: #333333;
				}
			}
		}
	}

	.qianla {
		display: flex;
		justify-content: space-between;

		margin-top: 12px;
		li {
			display: flex;
			width: 49%;
			line-height: 50px;
			padding: 12px;
			box-sizing: border-box;
			font-size: 14px;
			background: #ffffff;
			border-radius: 5px 5px 5px 5px;
			.icon {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #eeeeee;
				text-align: center;
				i{
					font-size: 24px;
					color: #0084ff;	
				}
			}

			.text {
				margin-left: 8px;
				font-size: 14px;
				font-weight: 500;
				color: #333;
			}
		}
	}
	.buchang {
		display: flex;
		justify-content: space-between;
		text-align: center;
		li {
			width: 32%;

			background: #ffffff;
			border-radius: 5px 5px 5px 5px;
			line-height: 50px;
			padding: 12px;
			box-sizing: border-box;
			font-size: 14px;
			.icon {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #eeeeee;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				i{
					color: #0084FF;
					font-size: 24px;
				}
			}
			.btn {
				font-size: 16px;
				font-weight: bold;
				line-height: 20px;
			}
			.text {
				line-height: 20px;
				margin: 12px 0 8px;
			}
		}
	}
	.speed {
		height: 74px;
		background: #ffffff;
		border-radius: 5px 5px 5px 5px;
		line-height: 50px;
		display: flex;
		justify-content: space-between;
		margin-top: 12px;
		padding: 12px;
		box-sizing: border-box;
		font-size: 14px;
		.icon {
			width: 50px;
			height: 50px;
			border-radius: 15px;
			
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 12px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.num {
			font-size: 16px;
			font-weight: bold;
		}
	}
	.stat {
		background: #ffffff;
		border-radius: 5px 5px 5px 5px;
		margin-top: 12px;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 48px;
			line-height: 48px;
			padding: 0 12px;
			border-bottom: 1px solid #dddddd;
			.type {
				color: #00b0ff;
				font-size: 14px;
				width: 60px;
				height: 24px;
				background: #f1f1f1;
				color: #3fbf31;
				line-height: 24px;
				position: relative;
				border-radius: 12px 12px 12px 12px;
				padding-left: 20px;
				box-sizing: border-box;
			}

			.type:before {
				content: '';
				position: absolute;
				left: 6px;
				top: 6px;
				width: 12px;
				height: 12px;
				background: #3fbf31;
				border-radius: 50%;
			}
		}
		ul {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 30px 22px;
			box-sizing: border-box;
			li {
				display: flex;
				flex-direction: column;
				align-items: center;
				.icon {
					width: 50px;
					height: 50px;
					border-radius: 15px;
					background: #eee;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 12px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.text {
					color: #333;
					font-size: 14px;
				}
				.btn {
					padding: 0 12px;
					height: 24px;
					background: #f1f1f1;
					border-radius: 12px 12px 12px 12px;
					margin-top: 8px;
					text-align: center;
					line-height: 24px;
					font-weight: 500;
					font-size: 14px;
					color: #3fbf31;
				}
			}
		}
	}
}
</style>