CanadaMes.git - Gitblit

			@@ -20,8 +20,8 @@
			}}</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/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')
			@@ -29,17 +29,26 @@
			</el-breadcrumb>

			<el-row :gutter="20">
			<el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex">
			<el-card class="json-block">
			<el-col :span="6" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex">
			<el-card class="json-block" style="width:260px;">
			<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>

			<div class="button-row" style="display: flex; justify-content: space-between;">
			<div v-for="(item, itemIndex) in dataGroup" :key="itemIndex">
			<el-button v-if="item.button" :name="item.button.name" v-model="item.button.value" class="action-button"
			@click="updateButtonValue(dataGroup, itemIndex);submitDataToBackend(item.button.name)"
			:class="{ 'green-button': item.button.value === 0 && item.button.name !== '清除ID','red-button': item.button.value === 1 && item.button.name !== '清除ID' }">{{ item.button.name }}</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>

			<span class="name" style="width:150px;">{{ item.name }}</span>
			<el-input v-if="item.type === '0'" v-model="item.value" readonly="readonly" style="width:150px;" class="input-box"></el-input>
			</div>
			</div>

			@@ -53,35 +62,152 @@
			<script>
			import LanguageMixin from '../../lang/LanguageMixin'
			import data from '../../configuration/parameter2'

			let socket;
			export default {
			name: "Parameter2",
			mixins: [LanguageMixin],
			data() {
			return {
			jsonData: data // 加载整个data.json文件作为jsonData
			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 { 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;
			});
			});
			// 将当前按钮的值设为1

			this.$set(dataGroup[itemIndex].button, 'value', 1);

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


			// 将其他按钮的值全部设为0

			},
			submitDataToBackend(currentButtonName) {
			if (currentButtonName === '清除ID') {
			const inputData = this.jsonData.map(dataGroup => {
			return dataGroup.map(item => {
			if (item.type === '3') {
			return { value: item.button.value };
			}
			return null;
			});
			});

			const values = inputData.flat().filter(item => item !== null).map(item => item.value);

			const jsonObject = { data: values };

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

			let viewname = "Parameter2";

			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;

			// 如果鼠标不在输入框内，更新输入框的值
			// this.submitDataToBackend()
			const parms = obj.params;
			// console.log(parms);

			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') {
			obj.value = parms[1][i];
			}
			}


			}

			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 === '4') {
			obj.button.value = parms[2][i];
			}
			}


			}

			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 === '3') {
			obj.button.value = parms[0][i];
			}
			}


			}

			// console.log(jsonData2);


			};




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

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

			}
			},
			send () {


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

			}
			}
			</script>
			@@ -101,4 +227,13 @@
			.blue-button {
			background-color: skyblue;
			}

			.green-button {
			background-color: green;
			}

			.red-button{
			background-color: red;
			}

			</style>