CanadaMes.git - Gitblit

			@@ -1,105 +1,201 @@
			<template>
			<div class="app">
			<el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
			<router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm')
			}}</router-link>
			<router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State')
			}}</router-link>
			<router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action')
			}}</router-link>
			<router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter')
			}}</router-link>
			<router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign')
			}}</router-link>
			<router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{ $t('Servo Manual')
			}}</router-link>
			</el-breadcrumb>

			<el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
			<router-link to="/Electrical/Servomanualone" tag="el-button" type="text" active-class="blue-button">{{ $t('Servomanualone')
			}}</router-link>
			<router-link to="/Electrical/Parameter1" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter1')
			}}</router-link>
			<router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter2')
			}}</router-link>
			<router-link to="/Electrical/Positioning1" tag="el-button" type="text" active-class="blue-button">{{ $t('Positioning1')
			}}</router-link>
			<router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{ $t('Positioning2')
			}}</router-link>
			<div class="app">
			<el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
			<router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm')
			}}</router-link>
			<router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State')
			}}</router-link>
			<router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action')
			}}</router-link>
			<router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter')
			}}</router-link>
			<router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign')
			}}</router-link>
			<router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{ $t('Servo Manual')
			}}</router-link>
			</el-breadcrumb>

			<el-row :gutter="18">
			<el-col :span="7" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex">
			<el-card class="json-block">
			<div class="button-row" style="display: flex; justify-content: space-between;">
			<div v-for="(item, itemIndex) in dataGroup" :key="itemIndex">
			<span v-if="item.title" :name="item.title.name" class="action-button" >{{ item.title.name }}</span>
			</div>

			<el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
			<router-link to="/Electrical/Servomanualone" tag="el-button" type="text" active-class="blue-button">{{ $t('Servomanualone')
			}}</router-link>
			<router-link to="/Electrical/Parameter1" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter1')
			}}</router-link>
			<router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter2')
			}}</router-link>
			<router-link to="/Electrical/Positioning1" tag="el-button" type="text" active-class="blue-button">{{ $t('Positioning1')
			}}</router-link>
			<router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{ $t('Positioning2')
			}}</router-link>
			</el-breadcrumb>

			<el-row :gutter="18" class='card'>
			<el-col :span="7" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex" >
			<el-card class="json-block">
			<div class="button-row" style="display: flex; justify-content: space-between;">
			<div v-for="(item, itemIndex) in dataGroup" :key="itemIndex">
			<span v-if="item.title" :name="item.title.name" class="action-button" >{{ item.title.name }}</span>
			</div>
			<div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" class="item-container">
			<div class="item-row">
			<span class="name" style="width:250px;">{{ item.name }}</span>
			<el-input v-if="item.type === '0'" v-model="item.value" class="input-box"></el-input>
			<el-button v-if="item.type === '0'" v-model="item.value" class="input-box" @click="submitDataToBackend();">取地址</el-button>
			</div>
			</div>
			<div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" class="item-container">
			<div class="item-row">
			<span class="name" style="width:250px;">{{ item.name }}</span>
			<el-input v-if="item.type === '0'" v-model="item.value" class="input-box"></el-input>
			<el-button v-if="item.type === '0'" class="input-box" @click="submitDataToBackend();">取地址</el-button>
			</div>

			</el-card>
			</el-col>
			</el-row>
			<!-- <el-button @click="submitDataToBackend">提交数据到后端</el-button> -->
			</div>
			</template>

			<script>
			import LanguageMixin from '../../lang/LanguageMixin'
			import data from '../../configuration/Positioning2'

			export default {
			name: "Positioning2",
			mixins: [LanguageMixin],
			data() {
			return {
			jsonData: data // 加载整个data.json文件作为jsonData
			</div>

			</el-card>
			</el-col>
			</el-row>
			<!-- <el-button @click="submitDataToBackend">提交数据到后端</el-button> -->
			</div>
			</template>

			<script>
			let socket;
			import LanguageMixin from '../../lang/LanguageMixin'
			import data from '../../configuration/Positioning2'

			export default {
			name: "Positioning2",
			mixins: [LanguageMixin],
			data() {
			return {
			jsonData: data // 加载整个data.json文件作为jsonData
			}
			},
			created () {
			this.initWebSocket();
			// console.log('jsonData:', this.jsonData);

			},
			methods: {
			updateButtonValue(dataGroup, itemIndex) {
			this.$set(dataGroup[itemIndex].button, 'value', 1); // 点击按钮后将值改为1
			},
			submitDataToBackend() {
			const inputData = this.jsonData.map(dataGroup => {
			return dataGroup.map(item => {
			if (item.type === '0') {
			return { value: parseInt(item.value) };
			} else if (item.button) {
			return { value: parseInt(item.title.value) };
			}
			return null;
			});
			});

			// 将inputData转换为整数数组
			const integerArray = inputData.map(dataGroup => {
			return dataGroup.map(item => {
			if (item !== null) {
			return item.value;
			}
			return null;
			});
			});
			// 构建JSON对象
			const jsonObject = { data: integerArray };

			// 提交数据到后端
			const jsonString = JSON.stringify(jsonObject);
			// console.log('提交以下数据到后端:', jsonString);
			socket?.send(jsonString);
			},
			initWebSocket () {

			let viewname = "Positioning2";

			if (typeof WebSocket === "undefined") {
			console.log("您的浏览器不支持WebSocket");
			} else {
			let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;

			if (socket != null) {
			socket.close();
			socket = null;
			}

			// 开启一个websocket服务
			socket = new WebSocket(socketUrl);

			// 打开事件
			socket.onopen = function () {
			console.log("websocket已打开");
			};

			// 收到消息
			socket.onmessage = (msg) => {
			if (!msg.data) {
			return; // 如果收到空数据，则直接返回，不执行后续逻辑
			}

			let obj = JSON.parse(msg.data);
			const jsonData2 = this.jsonData;
			document.addEventListener('mouseover', function(event) {
			const inputBox = document.querySelectorAll('.el-card__body');
			const target = event.target;
			if (inputBox && Array.from(inputBox).every(box => !box.contains(target))) {
			// 如果鼠标不在输入框内，更新输入框的值
			// this.submitDataToBackend()
			const parms = obj.params;


			let index = 0;
			for (let i = 0; i < jsonData2.length; i++) {
			let arr = jsonData2[i];
			for (let j = 0; j < arr.length; j++) {
			let obj = arr[j];
			if (obj.type === '0' && Object.prototype.hasOwnProperty.call(obj, 'value')) {
			obj.value = parms[0][index];
			index++;
			}
			}
			}
			// console.log(jsonData2);

			}
			});
			};




			// 关闭事件
			socket.onclose = function () {
			console.log("websocket已关闭");
			};

			// 发生错误事件
			socket.onerror = function () {
			console.log("websocket发生了错误");
			};

			}
			},
			methods: {
			updateButtonValue(dataGroup, itemIndex) {
			this.$set(dataGroup[itemIndex].button, 'value', 1); // 点击按钮后将值改为1
			},
			submitDataToBackend() {
			const inputData = this.jsonData.map(dataGroup => {
			return dataGroup.map(item => {
			if (item.type === '0') {
			return { name: item.name, value: item.value ,address:item.address};
			} else if (item.button) {
			return { name: item.title.name, value: item.title.value ,address:item.title.address};
			}
			return null;
			});
			});

			// 模拟提交数据到后端的操作，实际情况下需要根据你的后端API进行修改
			console.log('提交以下数据到后端:', inputData);
			send () {

			}
			}
			}
			</script>

			<style scoped>
			.item-row {
			display: flex;
			align-items: center;
			margin-bottom: 5px; /* 调整每个项目之间的间距 */
			}

			.action-button {
			margin-right: 30px;
			background: #66b1ff;
			color: #FFF;
			}
			.blue-button {
			background-color: skyblue;

			socket?.send(JSON.stringify(this.messagepack));
			},

			}
			</style>
			}
			</script>

			<style scoped>
			.item-row {
			display: flex;
			align-items: center;
			margin-bottom: 5px; /* 调整每个项目之间的间距 */
			}

			.action-button {
			margin-right: 30px;
			background: #66b1ff;
			color: #FFF;
			}
			.blue-button {
			background-color: skyblue;
			}
			</style>