CanadaMes.git - Gitblit

			@@ -8,15 +8,16 @@
			<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>
			<router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>
			</el-breadcrumb>
			<div>Sign</div>
			<div style="padding-right: 30px;display: flex;flex-wrap: wrap;">
			<div class="kuai_sb" v-for="item in records" :key="item.id">
			<el-col class="deng" :class="getStatusClass(item.zhuangtai)">
			<div style="padding-right: 30px;display: flex;flex-wrap: wrap;" class="neir">
			<div class="kuai_sb" v-for="item in record.xyData" :key="item.name">
			<el-col class="deng" :class="getStatusClass(item.value, item.name)">
			<!-- <el-input v-model="item.zhuangtai" style="width: 280px;display: none;"
			class="in_mc"></el-input>-->
			</el-col>
			<el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>
			<el-input v-model="item.name" style="width: 280px;" class="in_mc"></el-input>

			<!-- <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch> -->
			</div>
			@@ -27,29 +28,143 @@
			</template>

			<script >

			let socket;
			export default {
			name: "Sign",
			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: "2" }
			]
			record: {
			params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
			xyData: [
			{ name: 'D01.SR dec', value: 0 },
			{ name: "D01.SR in pos", value: 0 },
			{ name: "D02.SR dec", value: 0 },
			{ name: "D02.SR in pos", value: 0 },
			{ name: "D03.SR dec", value: 0 },
			{ name: "D03.SR in pos", value: 0 },
			],
			canshu: [
			'D01.SR dec',
			'D01.SR in pos',
			'D02.SR dec',
			'D02.SR in pos',
			'D03.SR into',
			'D03.SR dec',
			'D03.SR in pos',
			'D04.SR dec',
			'D04.SR in pos',
			'D05.SR dec',
			'D05.SR in pos',
			'D06.SR dec',
			'D06.SR in pos',
			'B01.SR out dec',
			'B01.SR out in pos',
			'B01.SR in dec',
			'B01.SR in in pos',
			'B01.SR turn on',
			'B01.SR turn off',
			'B01.SR up',
			'B01.SR down',
			'B02.SR out dec',
			'B02.SR out in pos',
			'B02.SR in dec',
			'B02.SR in in pos',
			'B02.SR turn on',
			'B02.SR turn off',
			'B02.SR up',
			'B02.SR down',
			'LED.red',
			'LED.green',
			'LED.yellow',
			],

			},


			messagepack: {
			data: { taskname: "" }
			},
			queryInfo: {
			data: "1",
			pageSize: 10
			},

			}
			},
			created () {
			this.init();
			},
			methods: {
			getStatusClass (zhuangtai) {
			if (zhuangtai === "2") {
			return "dow";
			} else {
			getStatusClass (zhuangtai, mc) {

			if (mc === "LED.red" && zhuangtai === 0) {
			return "red";
			}
			if (mc === "LED.green" && zhuangtai === 0) {
			return "green";
			}
			if (mc === "LED.yellow" && zhuangtai === 0) {
			return "yellow"
			}
			if (zhuangtai === 0) {
			return "op";
			}
			else {
			return "dow";
			}





			},
			init () {
			let viewname = "Sign";

			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]);
			this.record.params[0] = obj.sig[0];
			for (let a = 0; a <= this.record.params.length - 1; a++) {
			//this.record.xyData[a] = [this.record.params[0][a], this.record.canshu[a]];
			this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };

			}
			this.$forceUpdate();

			}.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发送给服务端，由服务端进行转发
			}
			}

			@@ -67,6 +182,11 @@
			padding: 0;
			}

			/* .neir {
			height: 100%;
			overflow-y: auto;
			} */

			.el-input__inner {
			text-align: center;
			width: 100%;
			@@ -74,7 +194,7 @@

			.kuai_sb {
			text-align: center;
			width: 30%;
			width: 25%;
			margin-bottom: 15px;
			}

			@@ -111,4 +231,16 @@
			.dow {
			background-color: #A0A0A0;
			}

			.red {
			background-color: red;
			}

			.geeen {
			background-color: #00ff22;
			}

			.yellow {
			background-color: yellow;
			}
			</style>