CanadaMes.git - Gitblit

			@@ -2,38 +2,131 @@
			<div class="app">
			<!--面包屑导航区域-->
			<el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
			<el-breadcrumb-item :to="{ path: '/home' }">{{ $t('langHome') }}</el-breadcrumb-item>
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Electrical/Parameter' }">参数</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Electrical/Action' }">开关控制</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Electrical/Sign' }">IO状态</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Electrical/State' }">报警信息</el-breadcrumb-item>
			<router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>
			<el-button type="text">设备管理</el-button>
			<router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>
			<router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
			<router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
			<router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
			</el-breadcrumb>
			<div>开关控制</div>
			<div>Action</div>
			<el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ records }">
			<div class="kuai_sb" v-for="item in records" :key="item.id">
			<el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>
			<!-- <el-input v-model="item.zhuangtai" style="width: 80px;"></el-input> -->
			<el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch>
			</div>


			<div class="kuai_div">
			<el-input style="width: 280px;" class="in_mc" value="conveyor Velocity(Auto SLOW)"></el-input>
			<el-input v-for="(param, index) in record.params[0]" :key="index" v-model="record.params[0][index]" style="width: 80px;"></el-input>
			</div>
			<button @click="send()">测试发送</button>
			</el-form>


			</div>
			</template>

			<script>


			<script >
			let socket;
			export default {
			name: "Action",
			data () {
			return {
			records: [
			{ id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },
			{ id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },
			{ id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },
			{ id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "1" }
			],
			messagepack: {
			data: { taskname: "" }
			},

			record: {
			params: [0,0,0,0,0,0]
			},

			}
			},
			created () {
			this.init();
			//console.log(this.records);
			},
			methods: {
			init () {
			let viewname = "talkvue";

			if (typeof (WebSocket) == "undefined") {
			console.log("您的浏览器不支持WebSocket");
			} else {
			//console.log("您的浏览器支持WebSocket");

			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 = function (msg) {
			console.log("收到数据====" + msg.data);
			let obj = JSON.parse(msg.data);
			this.$set(this.record.params, 0, obj.params[0]);
			console.log( this.record.params[0])
			}.bind(this);
			//关闭事件
			socket.onclose = function () {
			console.log("websocket已关闭");
			};
			//发生了错误事件
			socket.onerror = function () {
			console.log("websocket发生了错误");
			}
			}
			},
			send () {
			this.messagepack.data = { taskname: "前端到后台" };
			socket?.send(JSON.stringify(this.messagepack)); // 将组装好的json发送给服务端，由服务端进行转发
			}

			}

			}





			</script>

			<style lang="less" scoped>
			.el-table {
			margin-top: 15px;
			font-size: 12px;
			<style>
			.kuai_sb {
			width: 30%;
			margin-bottom: 15px;
			}

			.el-pagination {
			margin-top: 15px;
			.el-input {
			border: none;


			.el-input__inner {
			border: 1 solid black;
			}


			}

			.app .el-card {
			width: 99%;
			.in_mc {
			.el-input__inner {
			border: none;
			}
			}
			</style>
			</style>