smart-web.git - Gitblit

			@@ -1,8 +1,8 @@
			<!--
			* @Date: 2024-04-09 22:11:21
			* @LastEditors: lzhe lzhe@example.com
			* @LastEditTime: 2024-09-09 11:23:54
			* @FilePath: /mdc/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
			* @LastEditors: gaoshp
			* @LastEditTime: 2024-10-09 20:40:22
			* @FilePath: /cps-web/src/views/mdc/realtime-status/index.vue
			实时看板
			-->
			<template>
			@@ -16,7 +16,7 @@
			<el-icon class="setIcon">
			<Setting />
			</el-icon>
			<span class="setBtn" @click="goSet">设置</span>
			<span class="setBtn" @click="goSet">分析设置</span>
			</span>
			</div>
			<ul class="status-view-box" v-if="station == '状态视图'">
			@@ -44,7 +44,8 @@
			<ArrowRight />
			</el-icon>
			</div>
			<div class="status-content-cardp" v-for="item in timestatus" :style="{ 'width': (100 / column) + '%' }">
			<div class="status-content-cardp" v-for="(item, index) in timestatus"
			:style="{ 'width': (100 / column) + '%' }">
			<div class="status-card-box" style="border-color: #ccc;">
			<div class="status-card-top">
			<div class="status-card-detail">
			@@ -59,22 +60,19 @@
			</div>
			<div class="status-card-machine" style="border-color: #ccc;">
			<div class="status-card-machine-img">
			<img src="./station.png" width="68" height="68">
			<img src="./station1.jpg" width="68" height="68">

			</div>
			<div class="status-card-machine-mesg">
			<div class="status-card-machine-mesg-form">
			<div class="status-card-machine-mesg-label">工位编号</div>
			<div class="status-card-machine-mesg-value">{{ item.code }}</div>
			</div>
			<div class="status-card-machine-mesg-form">
			<div class="status-card-machine-mesg-label">工单</div>
			<div class="status-card-machine-mesg-value">-</div>
			</div>
			</div>
			</div>
			</div>
			<div class="status-card-bottom">
			<div class="status-card-bottom-realtime" @click="showvisible(item)"><i
			<div class="status-card-bottom-realtime" @click="showvisible(item, index)"><i
			class="iconfont saber-xiangqing status-card-bottom-icon"></i> 实时数据</div>
			<div class="status-card-bottom-detail" @click="gostatus(item)"><i
			class="iconfont saber-shuju status-card-bottom-icon"></i> 工位详情</div>
			@@ -84,7 +82,7 @@
			</div>
			<el-dialog :title="titleMap" v-model="visible" :width="740">
			<div class="dialogstyle">
			<div class="realtime-analysis-card" v-for="item in visibleList">
			<div class="realtime-analysis-card" v-for="item in timestatus[clickIndex].properties">
			<div class="card-name" :style="{ 'background-color': item.color }">{{ item.name }}</div>
			<div class="card-value"
			:class="{ 'card-value': true, 'card-value-bg1': item.key != 'Alarm', 'card-value-bg2': item.key == 'Alarm' }">
			@@ -108,6 +106,7 @@
			},
			data() {
			return {
			clickIndex: 0,
			allwcs: [],
			statusStyle: "#ccc",
			titleMap: "",
			@@ -127,9 +126,8 @@
			}
			},
			mounted() {
			this.deviceStatus = this.$route.query.currentTag?[...this.$route.query.currentTag]:[];
			this.deviceStatus = this.$route.query.currentTag ? [...this.$route.query.currentTag] : [];
			this.getstationlabelList(); //获取标签视图下的list
			this.setIntervalTime(); //十秒增加时间
			this.getprocess(); //获取颜色==》获取顶部title==》设置几行几列==》ws
			},
			methods: {
			@@ -194,11 +192,18 @@
			this.$HTTP.get("/api/blade-cps/group/get-mdc-group").then(res => {
			if (res.code == 200) {
			this.stationlabelList = res.data;
			this.stationlabel = res.data[0].groupName;
			if (res.data.length != 0) {
			this.stationlabel = res.data[0].groupName;
			}
			}
			})
			},
			changestatus(name) {
			if (this.stationlabelList.length == 0) {
			this.station = "状态视图";
			this.$message.error('未选定实时看板查询组，请到"分析设置 -> 实时看板查询组设置"中选择工位组');
			return;
			}
			this.station = name;
			if (this.station == '状态视图') {
			this.workStationGroupIdList = [];
			@@ -208,17 +213,19 @@
			}
			this.gettimestatus(); //查询列表
			},
			showvisible(item) {
			if (item.properties == null \|\| item.properties.length == 0) {
			this.$message({
			message: '请配置采集项',
			type: 'warning'
			});
			return;
			}
			var visibleList = JSON.parse(JSON.stringify(item.properties));
			this.titleMap = "实时数据(" + item.code + ")";
			this.visibleList = visibleList;
			showvisible(item, index) {
			//clickIndex
			this.clickIndex = index;
			// if (item.properties == null \|\| item.properties.length == 0) {
			// this.$message({
			// message: '请配置采集项',
			// type: 'warning'
			// });
			// return;
			// }
			// var visibleList = JSON.parse(JSON.stringify(item.properties));
			// this.titleMap = "实时数据(" + item.code + ")";
			// this.visibleList = visibleList;
			this.visible = true;
			},
			searchstatus(item, index) {
			@@ -241,7 +248,8 @@
			}
			},
			goSet() {
			this.$router.push('/mdc/configuration');
			//console.log(this.$TOOL.data.get("MENU"));name == "配置中心"
			this.$router.push('/mdc/configuration'); //分析设置
			},
			gostatus(item) {
			this.$router.push('/mdc/station-live?code=' + item.id);
			@@ -281,7 +289,6 @@
			this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current \|\| 0}&size=${this.size \|\| 6}`, obj).then(res => {
			if (res.code == 200) {
			var ids = [];
			console.log(this.allwcs, res.data)
			res.data.records.forEach(item => {
			ids.push(item.id);
			if (item.properties != null && item.properties.length != 0) {
			@@ -315,11 +322,12 @@
			that.$TOOL.socket.sendDataToWebSocket(obj); //发送
			}
			}, 500);
			var num = 0;
			//var num = 0;
			var intervalId;
			this.$TOOL.socket.websocket.onmessage = function (event) {
			num++;
			//num++;
			var eventData = JSON.parse(event.data);
			if (Object.keys(eventData.data).length == 0) return;
			if (that.timestatus.length == 0) return; //没值不用循环
			that.timestatus.forEach((item, index) => { //第一步把v放到code里
			if (eventData.id == item.id) {
			@@ -330,6 +338,7 @@
			if (eventData.data.DeviceStatus) {
			var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
			var diffTime = that.changeTime(time); //转换成差值（时分秒）
			that.setIntervalTime(); //十秒增加时间
			item.time = diffTime;
			that.allwcs.forEach(item1 => {
			if (item1.code == eventData.data.DeviceStatus.v) {
			@@ -345,16 +354,13 @@
			}
			item.properties.forEach((item1, index1) => {
			if (item1.key == "DeviceStatus") { //机器状态
			if (item1.value == "2") {
			that.allwcs.forEach(item2 => {
			if (item2.code == item1.value) {
			item1.color = item2.color;
			item1.code = item2.name;
			}
			})
			} else {
			item1.color = "#75C0C0";
			}
			that.allwcs.forEach(item2 => {
			if (item2.code == eventData.data.DeviceStatus.v) {
			item1.value = item2.code;
			item1.color = item2.color;
			item1.code = item2.name;
			}
			})
			} else {
			if (item1.key == 'Alarm') { //报警
			if (eventData.data[item1.key]) {
			@@ -365,28 +371,22 @@
			} else {
			item1.name = v[0].code;
			item1.code = v[0].msg;
			that.allwcs.forEach(item2 => {
			if (item2.name == "报警") {
			item1.color = item2.color;
			}
			})
			}
			} else {
			item1.name = v.code;
			item1.code = v.msg;
			that.allwcs.forEach(item2 => {
			if (item2.name == "报警") {
			item1.color = item2.color;
			}
			})
			}
			}
			} else {
			if (eventData.data[item1.key]) {
			item1.code = eventData.data[item1.key].v;
			item1.color = "#75C0C0";
			}
			}
			that.allwcs.forEach(item2 => {
			if (item2.name == "报警") {
			item1.color = item2.color;
			}
			})
			}
			})
			}
			@@ -425,7 +425,7 @@
			}
			})
			}
			}
			},
			}
			</script>

			@@ -534,7 +534,7 @@
			font-weight: 700;
			font-size: 16px;
			color: #333;
			width: 33%;
			width: 26%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;