CanadaMes.git - Gitblit

			@@ -2,81 +2,61 @@
			<div class="app">
			<!--面包屑导航区域-->
			<el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
			<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>
			<router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</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/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link>
			<router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link>
			<router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link>
			</el-breadcrumb>
			<div>Alarm</div>
			<!-- <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
			<div class="kuai_div" v-for="item in this.record.xyData" :key="item[1]">
			<el-input v-model="item[1]" style="width: 240px;" class="in_mc"></el-input>
			<el-switch v-model="item[0]" active-value="0" inactive-value="1"></el-switch>
			</div>
			</el-form> -->
			<div class="block">
			<span class="demonstration">时间：</span>
			<el-date-picker v-model="shijian1" type="datetime" placeholder="选择日期时间" align="right"
			:picker-options="pickerOptions">
			</el-date-picker>
			~
			<el-date-picker v-model="shijian2" type="datetime" placeholder="选择日期时间" align="right"
			:picker-options="pickerOptions">
			</el-date-picker>

			<el-button type="primary" @click="selectTime()">{{ $t('Search') }}</el-button>
			</div>

			<el-table :data="record.xyData" style="width: 100%">
			<el-table-column prop="xyData[1]" label="content" width="180">
			<el-table :data="localizedRoles" style="width: 100%;" height="550">
			<el-table-column prop="id" label="id" width="80">
			</el-table-column>
			<el-table-column prop="name" label="time-on" width="180">
			<el-table-column prop="content" label="content">
			</el-table-column>
			<el-table-column prop="address" label="End Time">
			<el-table-column prop="timeon" label="time-on">
			</el-table-column>
			<el-table-column prop="endTime" label="End Time">
			</el-table-column>
			</el-table>
			</div>
			</template>

			<script >
			import { setAll, setTime } from "../../api/alarm";

			import moment from 'moment';
			//setTime
			import LanguageMixin from '../../lang/LanguageMixin'
			let socket;
			export default {
			name: "alarm",
			mixins: [LanguageMixin],
			data () {
			return {
			activeButton: '',
			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],
			canshu: [
			'D01 VFD error',
			'D02 VFD error',
			'D03 VFD error',
			'D04 VFD conveyor',
			'D05 VFD conveyor',
			'D06 VFD conveyor',
			'A01 VFD conveyor',
			'A02 VFD conveyor',
			'B01 VFD conveyor',
			'B02 VFD conveyor',
			'A01 SERVE TURN JOG+',
			'A02 SERVE TURN JOG-',
			'A01 SERVE TRAVEL JOG+',
			'A02 SERVE TRAVEL JOG-',
			'B01 SERVE TRAVEL JOG+',
			'B02 SERVE TRAVEL JOG-',
			'A01 SERVE TURN POS',
			'A02 SERVE TURN POS',
			'A01 SERVE TRAVEL POS',
			'A02 SERVE TRAVEL POS',
			'B01 SERVE TRAVEL POS',
			'B02 SERVE TRAVEL POS',
			'B01 YV TURN',
			'B01 YV UP DOWN',
			'B02 YV TURN',
			'B02 YV UP DOWN',
			],
			// canshu: [
			// '1',
			// '1',
			// '0',
			// '0',
			// '0',
			// '0'
			// ],
			xyData: [],
			},
			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, 0, 0, 0, 0, 0, 0, 0, 0],

			// xyData: [],

			},
			roles: [],

			localizedRoles: [],

			messagepack: {
			data: { taskname: "" }
			@@ -85,15 +65,97 @@
			data: "1",
			pageSize: 10
			},
			pickerOptions: {
			shortcuts: [{
			text: '今天',
			onClick (picker) {
			picker.$emit('pick', new Date());
			}
			}, {
			text: '昨天',
			onClick (picker) {
			const date = new Date();
			date.setTime(date.getTime() - 3600 * 1000 * 24);
			picker.$emit('pick', date);
			}
			}, {
			text: '一周前',
			onClick (picker) {
			const date = new Date();
			date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
			picker.$emit('pick', date);
			}
			}],

			},
			shijian1: "",
			shijian2: "",
			}


			},
			created () {
			this.init();


			if (this.shijian1 == "" \|\| this.shijian2 == "") {
			//查询当天报警信息
			this.load();
			}
			else {
			//根据时间查询报警信息
			this.selectTime();
			}

			},
			methods: {
			onButtonClick() {
			this.isButtonClicked = true; // 将按钮颜色设置为蓝色
			setTimeout(() => {
			this.isButtonClicked = false; // 重置按钮颜色
			}, 500); // 这里的500毫秒是根据您希望按钮颜色持续多长时间来定的，可以根据需求进行调整
			},

			load () {
			setAll().then(res => {
			this.roles = res.data.list;
			const language = this.$i18n.locale;
			if (language === 'zh-CN') {
			this.replaceChineseWithEnglish();
			} else {
			this.localizedRoles = [...this.roles];
			}
			//console.log(this.localizedRoles);
			});

			},
			selectTime () {
			//moment需要单独安转依赖，npm install moment
			let sj1 = moment(this.shijian1).format('YYYY-MM-DD%20HH:mm');
			let sj2 = moment(this.shijian2).format('YYYY-MM-DD%20HH:mm')
			//调用setTime方法给roles赋值
			setTime(sj1, sj2).then(res => {
			this.roles = res.data.list;
			//table中的内容进行语言转换
			const language = this.$i18n.locale;
			if (language === 'zh-CN') {
			this.replaceChineseWithEnglish();
			} else {
			this.localizedRoles = [...this.roles];
			}
			});
			},
			//语言转换
			replaceChineseWithEnglish () {
			const translation = this.$t('translation');
			this.localizedRoles = this.roles.map(role => ({
			...role,
			content: translation[role.content] \|\| role.content
			}));
			},

			init () {
			let viewname = "Action";
			let viewname = "alarm";

			if (typeof (WebSocket) == "undefined") {
			console.log("您的浏览器不支持WebSocket");
			@@ -113,18 +175,16 @@
			};
			// 浏览器端收消息，获得从服务端发送过来的文本消息
			socket.onmessage = function (msg) {

			//console.log("收到数据====" + msg.data);
			let obj = JSON.parse(msg.data);

			this.record.params[0] = obj.acion[0].join(",");
			this.record.params[0] = this.record.params[0].split(",");

			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.params[0] = obj.arm;
			//每次请求更新数据
			if (this.shijian1 == "" \|\| this.shijian2 == "") {
			this.load();
			}
			//console.log(this.record.params[0]);
			//console.log(this.record.xyData);
			else {
			this.selectTime();
			}
			this.$forceUpdate();
			}.bind(this);
			//关闭事件
			@@ -138,10 +198,6 @@
			}

			},
			send () {
			this.messagepack.data = { taskname: "前端到后台" };
			socket?.send(JSON.stringify(this.messagepack)); // 将组装好的json发送给服务端，由服务端进行转发
			}

			}

			@@ -176,4 +232,12 @@
			border: none;
			}
			}

			td div,
			th div {
			text-align: center;
			}
			.blue-button {
			background-color: skyblue;
			}
			</style>