CanadaMes.git - Gitblit

			@@ -5,56 +5,61 @@
			}}</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/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('ServoManual')
			$t('Parameter')
			}}</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>
			<router-link to="/Electrical/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{
			$t('ManualonePosition')
			}}</router-link>
			<router-link to="/Electrical/ManualonePosition2" tag="el-button" type="text" active-class="blue-button">{{
			$t('ManualonePosition2')
			}}</router-link>
			<router-link to="/Electrical/AutomaticParameterSetting" tag="el-button" type="text" active-class="blue-button">{{
			$t('AutomaticParameterSetting')
			<router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Automatic State')
			}}</router-link>
			<router-link to="/Electrical/ManualJog" tag="el-button" type="text" active-class="blue-button">{{
			$t('ManualJog')
			}}</router-link>

			<router-link to="/Electrical/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{
			$t('ManualonePosition')
			}}</router-link>

			<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/Positioning1" tag="el-button" type="text" active-class="blue-button">{{
			$t('Address parameter settings')
			}}</router-link>
			<!-- <router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{
			$t('Positioning2')
			}}</router-link> -->

			<!-- <router-link to="/Electrical/ManualonePosition2" tag="el-button" type="text" active-class="blue-button">{{
			$t('ManualonePosition2')
			}}</router-link> -->
			<router-link to="/Electrical/AutomaticParameterSetting" tag="el-button" type="text" active-class="blue-button">{{
			$t('Speed parameter settings')
			}}</router-link>

			</el-breadcrumb>

			<el-row :gutter="20">
			<el-col :span="18" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex">
			<el-row :gutter="40" >
			<el-col :span="26" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex">
			<el-card class="json-block" style="width:100%;">

			<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" :class="getStatusClass(item.button.value)"
			class="action-button" @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend();">{{
			item.button.name
			}}</el-button>
			<div class="button-row" style="display: flex; justify-content: flex-start;flex-wrap:wrap;">
			<div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" style="margin: 10px;">
			<el-button v-if="item.button" v-model="item.button.value" :name="item.button.name" style='width:200px;'
			:class="{ 'dow': item.button.value === 0, 'op': item.button.value === 1 }" class="action-button"
			@click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{
			item.button.name
			}}</el-button>
			</div>
			</div>
			</el-card>
			@@ -67,47 +72,247 @@
			<script>
			import LanguageMixin from '../../lang/LanguageMixin'
			import data from '../../configuration/ManualJog'

			import {SelectPassword} from "../../api/home";
			let socket;
			export default {
			name: "ManualJog",
			mixins: [LanguageMixin],
			data () {
			return {
			jsonData: data // 加载整个data.json文件作为jsonData
			jsonData: data, // 加载整个data.json文件作为jsonData
			password: 1,
			}
			},
			activated () {


			this.initWebSocket();
			const language = this.$i18n.locale;
			console.log(language);
			if (language === 'en-US') {
			this.replaceChineseWithEnglish();
			}


			this.load();

			},
			methods: {
			updateButtonValue (dataGroup, itemIndex) {
			this.$set(dataGroup[itemIndex].button, 'value', 1); // 点击按钮后将值改为1
			closeSocket () {
			// 关闭 WebSocket 连接
			socket.close();
			},
			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.button.name, value: item.button.value, address: item.button.address };
			updateButtonValue (dataGroup, itemIndex) {
			if (dataGroup[itemIndex].button.value2 === 0) {
			// 如果当前按钮的值是 0，将其设为 1
			this.$set(dataGroup[itemIndex].button, 'value2', 1);
			} else {
			// 否则将其设为 0
			this.$set(dataGroup[itemIndex].button, 'value2', 0);
			}
			},
			load(){

			SelectPassword().then(res => {
			this.password = res.data.password;
			console.log(this.password)
			});





			console.log(this.jsonData)



			},
			submitDataToBackend (currentButtonName) {

			if (currentButtonName === 'A01 SERVE TRAVEL Home' \|\| currentButtonName === 'A02 SERVE TRAVEL Home' \|\| currentButtonName === 'A01行走伺服回零' \|\| currentButtonName === 'A02行走伺服回零') {
			this.$prompt(
			this.$t('Are you sure to perform this operation?'),
			this.$t('prompt'),
			{
			inputType: 'password',
			inputPlaceholder: this.$t('Please enter the password'),
			confirmButtonText: this.$t('Yes'),
			cancelButtonText: this.$t('No'),
			type: 'warning',
			}
			return null;
			).then(({ value }) => {
			// 验证密码是否正确
			if (value !== this.password) {
			this.$message.error(this.$t('Incorrect password'));
			return;
			}

			// 密码正确，继续提交数据到后端
			const inputData = this.jsonData.map(dataGroup => {
			return dataGroup.map(item => {
			if (item.type === '3') {
			return { value: item.button.value2 };
			}
			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);

			}).catch(() => {
			// 取消操作
			console.log('取消');
			});
			} else {
			// 如果不是 A01 SERVE TRAVEL Home 按钮，继续提交数据到后端
			const inputData = this.jsonData.map(dataGroup => {
			return dataGroup.map(item => {
			if (item.type === '3') {
			return { value: item.button.value2 };
			}
			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 = "ManualJog";

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

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

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

			// 打开事件
			socket.onopen = function () {
			console.log("websocket已打开");
			};
			let isUpdated = false; // 定义标志变量
			// 收到消息
			socket.onmessage = (msg) => {
			if (!msg.data) {
			return; // 如果收到空数据，则直接返回，不执行后续逻辑
			}

			let obj = JSON.parse(msg.data);

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



			for (let i = 0; i < jsonData2.length; i++) {
			let arr = jsonData2[i];
			for (let j = 0; j < arr.length; j++) {
			let obj = arr[j];
			obj.button.value = parms[0][j];
			// obj.button.value2 = parms[0][j];
			// obj.button.value2 =obj.button.value;


			}

			}

			jsonData2[1][0].button.value = obj.params[0][26];
			jsonData2[1][1].button.value = obj.params[0][27];


			if (!isUpdated) {
			for (let i = 0; i < this.jsonData.length; i++) {
			for (let j = 0; j < this.jsonData[i].length; j++) {
			this.jsonData[i][j].button.value2 = this.jsonData[i][j].button.value;
			}
			}
			isUpdated = true; // 更新标志变量的值
			}



			}



			};






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

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

			}
			},
			send () {

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


			const nameMap = this.$t('ManualJoglang')
			this.jsonData = this.jsonData.map((item) => {
			return item.map((obj) => {
			if (obj.name) {
			const newName = nameMap[obj.name] \|\| obj.name;
			return { ...obj, name: newName };
			} else if (obj.button && obj.button.name) {
			const newName = nameMap[obj.button.name] \|\| obj.button.name;
			return { ...obj, button: { ...obj.button, name: newName } };
			} else {
			return obj;
			}
			});
			});

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

			},
			//根据读取PLC的值，根据名称改变颜色1打开，0关闭
			getStatusClass (zhuangtai) {

			if (zhuangtai === 1) {
			return "op";
			}
			else {
			return "dow";
			}
			// console.log(this.jsonData)

			}
			}
			},

			}
			</script>

			@@ -121,7 +326,7 @@

			.action-button {
			margin-right: 10px;
			background: #66b1ff;
			background: #A0A0A0;
			color: #FFF;
			}