smart-web.git - Gitblit

			@@ -1,7 +1,7 @@
			<!--
			* @Date: 2024-04-09 22:11:21
			* @LastEditors: lzhe lzhe@example.com
			* @LastEditTime: 2024-10-22 20:01:19
			* @LastEditors: 李喆(开发组) lzhe@yxqiche.com
			* @LastEditTime: 2025-05-28 13:45:33
			* @FilePath: /cps-web/src/views/mdc/realtime-status/index.vue
			实时看板
			-->
			@@ -53,14 +53,13 @@
			<div class="status-card-detail-status">
			<div class="status-card-detail-point" :style="{ 'background-color': item.statusStyle }">
			</div>{{ item.statusName }}
			<div class="status-card-detail-time" :style="{ 'color': item.statusStyle }">{{ item.time
			}}
			<div class="status-card-detail-time" :style="{ 'color': item.statusStyle }">{{ item.time }}
			</div>
			</div>
			</div>
			<div class="status-card-machine" style="border-color: #ccc;">
			<div class="status-card-machine-img">
			<img src="./station1.jpg" width="68" height="68">
			<img :src="item.avatar" width="68" height="68">

			</div>
			<div class="status-card-machine-mesg">
			@@ -80,20 +79,20 @@
			</div>
			</div>
			</div>
			<el-dialog :title="titleMap" v-model="visible" :width="740">
			<el-dialog :title="titleMap" v-model="visible" :width="740" v-if="visible">
			<div class="dialogstyle">
			<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' }">
			{{ item.code }}</div>
			</div>
			<el-table :data="timestatus[clickIndex].properties" style="width: 100%" border>
			<el-table-column prop="name" label="数据点"></el-table-column>
			<el-table-column prop="code" label="值"></el-table-column>
			<el-table-column prop="moment" label="采集时间"></el-table-column>
			</el-table>
			</div>
			</el-dialog>
			</div>
			</template>

			<script>
			import station from "./station1.jpg";
			import moment from 'moment';
			import * as ElementPlusIconsVue from '@element-plus/icons-vue'
			let icons = []
			@@ -106,6 +105,7 @@
			},
			data() {
			return {
			station: station,
			clickIndex: 0,
			allwcs: [],
			statusStyle: "#ccc",
			@@ -129,6 +129,10 @@
			this.deviceStatus = this.$route.query.currentTag ? [...this.$route.query.currentTag] : [];
			this.getstationlabelList(); //获取标签视图下的list
			this.getprocess(); //获取颜色==》获取顶部title==》设置几行几列==》ws
			//每一分钟执行一次
			var intervalId = setInterval(() => {
			this.getdevicestatus();
			}, 60000);
			},
			methods: {
			getSetting() {
			@@ -143,49 +147,6 @@
			}
			})
			},
			setIntervalTime() {
			function addTime(timeStr) {
			var increaseByMilliseconds = 10 * 1000; // 10秒转换为毫秒
			// 解析时间字符串为天数、小时、分钟和秒
			if (timeStr != undefined && timeStr != "--") {
			var parts = timeStr.match(/(\d+)天(\d+)时(\d+)分(\d+)秒/);
			if(parts == null) {
			var days = 0; // 天数转换为毫秒
			var hours = 0; // 小时转换为毫秒
			var minutes = 0; // 分钟转换为毫秒
			var seconds = 0; // 秒转换为毫秒
			}else {
			var days = parseInt(parts[1], 10) * 24 * 60 * 60 * 1000; // 天数转换为毫秒
			var hours = parseInt(parts[2], 10) * 60 * 60 * 1000; // 小时转换为毫秒
			var minutes = parseInt(parts[3], 10) * 60 * 1000; // 分钟转换为毫秒
			var seconds = parseInt(parts[4], 10) * 1000; // 秒转换为毫秒
			}
			// 创建一个Moment.js的持续时间对象
			var duration = moment.duration(days + hours + minutes + seconds);
			// 增加时间
			duration.add(increaseByMilliseconds); // 增加10秒
			// 将持续时间转换回天数、小时、分钟和秒（注意这里可能不完全精确，因为天数可能不是整数）
			var totalMilliseconds = duration.asMilliseconds();
			var totalDays = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
			var remainingMilliseconds = totalMilliseconds % (1000 * 60 * 60 * 24);
			var totalHours = Math.floor(remainingMilliseconds / (1000 * 60 * 60));
			remainingMilliseconds %= (1000 * 60 * 60);
			var totalMinutes = Math.floor(remainingMilliseconds / (1000 * 60));
			remainingMilliseconds %= (1000 * 60);
			var totalSeconds = Math.floor(remainingMilliseconds / 1000);
			return `${totalDays}天${totalHours}时${totalMinutes}分${totalSeconds}秒`;
			} else {
			return timeStr;
			}
			}
			setInterval(() => {
			if (this.timestatus.length != 0) {
			this.timestatus.forEach(item => {
			item.time = addTime(item.time);
			})
			}
			}, 1000 * 10)
			},
			changestationlabel(name) {
			this.stationlabel = name;
			this.stationlabelList.forEach(item => {
			@@ -196,7 +157,7 @@
			this.gettimestatus(); //查询列表
			},
			getstationlabelList() {
			this.$HTTP.get("/api/blade-cps/group/get-mdc-group").then(res => {
			this.$HTTP.get("/api/smis/group/get-mdc-group").then(res => {
			if (res.code == 200) {
			this.stationlabelList = res.data;
			if (res.data.length != 0) {
			@@ -218,6 +179,7 @@
			this.stationlabel = this.stationlabelList[0].groupName;
			this.workStationGroupIdList = [this.stationlabelList[0].groupId];
			}
			this.clickIndex = 0;
			this.gettimestatus(); //查询列表
			},
			showvisible(item, index) {
			@@ -236,7 +198,12 @@
			item.active = false;
			})
			this.devicestatus[index].active = true;
			this.deviceStatus = [item.status];
			if(item.status == 10) { //全部
			this.deviceStatus = [];
			}else {
			this.deviceStatus = [item.status];
			}
			this.current = "1";
			this.gettimestatus();
			},
			prev() {
			@@ -245,19 +212,20 @@
			this.gettimestatus();
			},
			next() {

			if ((this.current * this.line) < this.total / this.column) {
			this.current = Number(this.current) + 1;
			this.gettimestatus();
			}
			},
			goSet() {
			this.$router.push('/mdc/configuration'); //分析设置
			this.$router.push('/mdc/configuration?isShowSearch=1'); //分析设置(isShowSearch表示即时信息来)
			},
			gostatus(item) {
			this.$router.push('/mdc/station-live?code=' + item.id);
			},
			getprocess() { //颜色状态
			this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res => {
			this.$HTTP.get(`/api/smis/global_wcs/list?code=&name=`).then(res => {
			if (res.code == 200) {
			this.allwcs = res.data;
			this.getdevicestatus(); //获取顶部title/具体数据
			@@ -288,25 +256,14 @@
			workStationGroupIdList: this.workStationGroupIdList
			}
			this.timestatus = [];
			this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current \|\| 0}&size=${this.size \|\| 6}`, obj).then(res => {
			this.$HTTP.post(`/api/smis/workstation/real-time-status?current=${this.current \|\| 0}&size=${this.size \|\| 6}`, obj).then(res => {
			if (res.code == 200) {
			var ids = [];
			res.data.records.forEach(item => {
			ids.push(item.id);
			if (item.properties != null && item.properties.length != 0) {
			item.properties.forEach(item1 => {
			if (item1.key == "DeviceStatus") {
			this.allwcs.forEach(item2 => {
			if (item2.code == item1.value) {
			item1.color = item2.color;
			}
			})
			}
			})
			} else {
			item.statusName = "未知";
			item.statusStyle = '#ccc';
			if(item.avatar == "") {
			item.avatar = station;
			}
			ids.push(item.id);
			})
			this.timestatus = res.data.records;
			this.total = res.data.total;
			@@ -324,10 +281,7 @@
			that.$TOOL.socket.sendDataToWebSocket(obj); //发送
			}
			}, 500);
			//var num = 0;
			var intervalId;
			this.$TOOL.socket.websocket.onmessage = function (event) {
			//num++;
			var eventData = JSON.parse(event.data);
			if (that.timestatus.length == 0) return; //没值不用循环
			that.timestatus.forEach((item, index) => { //第一步把v放到code里
			@@ -339,8 +293,8 @@
			if (eventData.data.DeviceStatus) {
			var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
			var preT = moment(eventData.data.DeviceStatus.preT).format('YYYY-MM-DD HH:mm:ss');
			//console.log('time='+time+",preT="+preT);
			var diffTime = that.changeTime(time,preT); //转换成差值（时分秒）
			//that.setIntervalTime(); //十秒增加时间
			var diffTime = diffTime;
			item.time = diffTime;
			that.allwcs.forEach(item1 => {
			@@ -351,8 +305,9 @@
			})
			} else {
			if (item.time == undefined \|\| item.time == "--") {
			var diffTime = "--";
			item.time = diffTime;
			item.time = "--";
			item.statusName = "未知";
			item.statusStyle = '#ccc';
			}
			}
			item.properties.forEach((item1, index1) => {
			@@ -360,58 +315,58 @@
			that.allwcs.forEach(item2 => {
			if(eventData.data.DeviceStatus && item2.code == eventData.data.DeviceStatus.v) {
			item1.value = item2.code;
			item1.color = item2.color;
			item1.code = item2.name;
			item1.moment = that.timestampChangeTime(eventData.data[item1.key].t); //时间戳转化成日期
			}
			})
			if (Object.keys(eventData.data).length == 0) { //ws没有data数据，给默认值
			item1.code = "";
			item1.color = "#E4A512";
			item1.moment = "";
			};
			} else {
			if (item1.key == 'Alarm') { //报警
			if (eventData.data[item1.key]) {
			if(eventData.data[item1.key].v == "") return;
			var v = JSON.parse(eventData.data[item1.key].v);
			if (Array.isArray(v)) { //如果是数组，不赋值
			if (v.length == 0) {
			res.data.records[index].properties.splice(index1, 1);
			} else {
			item1.code = v[0].alarmNo;
			}
			} else {
			item1.name = v.code;
			item1.code = v.msg;
			if(eventData.data[item1.key]) {
			if(item1.key == "Alarm") {
			try {
			var vJson = JSON.parse(eventData.data[item1.key].v);
			item1.code = JSON.stringify(vJson[0]);
			} catch (e) {
			item1.code = eventData.data[item1.key].v;
			}
			}
			} else {
			if (eventData.data[item1.key]) {
			}else {
			item1.code = eventData.data[item1.key].v;
			}
			item1.moment = that.timestampChangeTime(eventData.data[item1.key].t); //时间戳转化成日期
			}else {
			item1.code = "";
			item1.moment = "";
			}
			that.allwcs.forEach(item2 => {
			if (item2.name == "报警") {
			item1.color = item2.color;
			}
			})
			}

			})
			}
			});
			};
			// var len = res.data.records.length;
			// intervalId = setInterval(function() {
			// if (num === len) {
			// clearInterval(intervalId);
			// that.timestatus = res.data.records; //等所有socket回来以后赋值
			// }
			// }, 500);
			}
			})
			},
			timestampChangeTime(timestamp) { //时间戳转换成时间
			var date = new Date(timestamp);
			//提取年月日小时分钟秒
			var year = date.getFullYear();
			var month = date.getMonth() + 1; // 月份从0开始，所以要加1
			var day = date.getDate();
			var hours = date.getHours();
			var minutes = date.getMinutes();
			var seconds = date.getSeconds();
			// 格式化日期字符串
			var formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
			return formattedDate;
			},
			getdevicestatus() {
			this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res => {
			this.$HTTP.get(`/api/mdc/work-station-analysis/device-status-statistics`).then(res => {
			if (res.code == 200) {
			var deviceNumAll = 0;
			var newResData = [];
			res.data.forEach(item => {
			item.active = false;
			this.allwcs.forEach(item1 => {
			@@ -422,13 +377,32 @@
			if (this.$route.query.currentTag == item.status) {
			item.active = true;
			}
			deviceNumAll += item.deviceNum;
			/*
			//调试后端数据已经取消
			if(item.statusName != '调试') {

			}*/
			newResData.push(item);
			if(item.statusName == '报警') {
			item.icon = "Position";
			}else if(item.statusName == '待机') {
			item.icon = "Loading";
			}else if(item.statusName == '离线') {
			item.icon = "Clock";
			}else {
			item.icon = "Odometer";
			}
			})
			res.data[0].icon = "Position";
			res.data[1].icon = "Loading";
			res.data[2].icon = "Clock";
			res.data[3].icon = "Warning";
			res.data[4].icon = "Odometer";
			this.devicestatus = res.data;
			newResData.push({
			active: false,
			color: "#08f1f4",
			deviceNum: deviceNumAll,
			icon: "price-tag",
			status: "10",
			statusName: "全部",
			})
			this.devicestatus = newResData;
			}
			})
			}
			@@ -626,6 +600,7 @@
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			}

			.status-card-bottom-detail,
			@@ -634,6 +609,7 @@
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			}

			.status-card-bottom-icon {