neic-hefeng/src/components/warning/warningCard.vue

/* 告警区 */
<template>
	<div style="padding-left: 5px; padding-right: 5px">
		<el-table :data="values" class="table" height="29vh" :header-cell-style="{
          background: '#000000',
          color: 'rgb(220,220,220)',
          padding: '4px',
          fontSize: '14px',
          'border-bottom': 'solid 1px black',
        }" :cell-style="{
          background: 'rgb(30,30,30)',
          color: 'rgb(220,220,220)',
          padding: '3px',
          fontSize: '12px',
        }" @row-dblclick="itemDblclick">
			<el-table-column prop="lastUpdateTime" align="center" label="时间" width="150">
			</el-table-column>
			<el-table-column prop="alertText" align="center" label="描述" width="280">
			</el-table-column>
			<el-table-column prop="isSelected" align="center" label="确认">
				<template v-slot="scope">
					<!-- <el-checkbox v-model="scope.row.isSelected" @click="itemChecked(scope.row)"></el-checkbox> -->
					<input type="checkbox" v-model="scope.row.isSelected" @click="itemChecked(scope.row)" />
				</template>
				<!-- <el-checkbox v-model="isSelected"></el-checkbox> -->
				<!-- <input type="checkbox"/> -->
			</el-table-column>
		</el-table>
	</div>
	<WindturbineDetailPages v-model="dialogVisible" :windturbine="currentWindturbine" :showSvg="showSvg"
		:stationName="stationName" :svgWeb="svgWeb" @close="close"></WindturbineDetailPages>
</template>

<script>
	import MessageBridge from "utils/MessageBridge";
	import WindturbineDetailPages from "../WindturbineDetailPages.vue";
	import BackgroundData from "utils/BackgroundData";
	import api from "api/index";
	// import Sbdl from "../BoosterStation/sbdl.vue";

	export default {
		name: "AlarmArea",
		components: {
			WindturbineDetailPages,
			// Sbdl,
		},
		created: function () {
			this.initData()
			this.faultMessage();
		},
		props: {},
		data() {
			return {
				values: new Array(),
				dialogVisible: false,
				showSvg: false,
				svgWeb: '',
				stationName: '',
				currentWindturbine: {},
			};
		},
		methods: {
			initData() {
				var mb = MessageBridge.getInstance();
				var vs = [{
					key: "/topic/fault-popup",
					action: this.faultMessage
				}];
				mb.register(vs);
			},
			faultMessage(json) {
				let val = json?JSON.parse(json):this.$store.state.warning
				if (Object.keys(val).length>0) {
					var sleected = {};
					this.values.forEach((it) => {
						if (it.isSelected) {
							sleected[it.id] = 0;
						}
					});
					this.values = new Array();
					for (var v in val) {
						var vl = val[v];
						if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
							vl.alertText = vl.windturbineName + "-" + vl.alertText;
						}
						if (sleected[vl.id] == 0 && BackgroundData.getInstance().LoginUser) {
							vl.isSelected = true;
						}
						this.values.push(vl);
					}
				}
			},
			/* 行双击 */
			itemDblclick(row) {
				this.dialogVisible = true;
				if (row.category1 === "FJ") {
					this.showSvg = false;
					this.currentWindturbine = row;
				} else {
					this.svgWeb = row.stationId;
					this.showSvg = true;
					this.stationName = row.stationName
				}
			},
			close() {
				this.dialogVisible = false;
			},
			/* 报警确认 */
			itemChecked(row) {
				if (row.isSelected == true) {
					row.isSelected = false;
					return;
				}
				var bd = BackgroundData.getInstance();
				if (!bd.LoginUser) {
					this.$notify({
						title: "请登录",
						message: "确认报警需要先登录！",
						type: "warning",
						position: "bottom-right",
						offset: 60,
						duration: 3000,
					});
					row.isSelected = false;
					return;
				}
				row.isSelected = true;
				this.confirm(row);
			},
			confirm(item) {
				api.sendWarning({
					snapID: item.snapIDString,
					faultID: item.idString,
					userName: BackgroundData.getInstance().LoginUser.name,
				}).then(msg => {
					var mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
					var tp = msg.data > 0 ? "success" : "error";
					msg.data === 0 ? (item.isSelected = false) : '';
					this.$notify({
						title: "报警",
						message: mms,
						type: tp,
						position: "bottom-right",
						offset: 60,
						duration: 3000,
					});
				})
			},
		},
	};
</script>
<style scoped>
	.el-table::before {
		width: 0;
	}

	.table {
		background-color: #000000;
	}

	:deep(.el-table__body-wrapper::-webkit-scrollbar) {
		width: 8px;
		height: 0px;
		background-color: black;
	}

	:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
		background-color: #292929;
		border-radius: 6px;
	}

	:deep(.el-table td, .el-table th) {
		border-bottom: 2px solid black;
	}

	tr {
		line-height: 1.5;
		background: #1e1e1e;
		margin-bottom: 2px;
		border-radius: 5px;
	}

	/* .ToolBar {
  position: absolute;
  right: 12px;
  width: 586px;
  text-align: center;
  z-index: 2;
  font-size: 14px;
  height: 28px;
  margin: 5px;
  background: #1e1e1e;
} */
	.table-main {
		font-size: 14px;
		width: 600px;
		text-align: center;
		background: #000000;
		margin: 5px;
		border-collapse: separate;
		border-spacing: 0px 5px;
	}
</style>