test #47
							
								
								
									
										41
									
								
								src/components/SequenceGraph/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										41
									
								
								src/components/SequenceGraph/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,41 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: index.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2023-08-29 14:39:40
 | 
			
		||||
    description: 状态时序图 
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="sequence-graph">
 | 
			
		||||
		<SequenceGraphItem />
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import SequenceGraphItem from './sequenceGraphItem.vue';
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'SequenceGraph',
 | 
			
		||||
	components: { SequenceGraphItem },
 | 
			
		||||
	props: {
 | 
			
		||||
		colors: {
 | 
			
		||||
			type: Array,
 | 
			
		||||
			default: () => ['', '', '', '', '', ''], // 默认颜色
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.sequence-graph {
 | 
			
		||||
	padding: 24px;
 | 
			
		||||
	background: #fff;
 | 
			
		||||
	border-radius: 6px;
 | 
			
		||||
	margin: 12px;
 | 
			
		||||
	box-shadow: 0 0 32px 8px rgba($color: #000000, $alpha: 0.2);
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										49
									
								
								src/components/SequenceGraph/sequenceGraphItem.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										49
									
								
								src/components/SequenceGraph/sequenceGraphItem.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,49 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: sequenceGraphItem.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2023-08-29 14:40:51
 | 
			
		||||
    description: 时序图最小单元
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="sequence-graph-item" :style="styles">
 | 
			
		||||
        <span v-if="time != null">{{ time }}</span>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'SequenceGraphItem',
 | 
			
		||||
	components: {},
 | 
			
		||||
	props: {
 | 
			
		||||
		color: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: 'black',
 | 
			
		||||
		},
 | 
			
		||||
        time: {
 | 
			
		||||
            type: String,
 | 
			
		||||
            default: null
 | 
			
		||||
        }
 | 
			
		||||
	},
 | 
			
		||||
    computed: {
 | 
			
		||||
        styles() {
 | 
			
		||||
            return {
 | 
			
		||||
                color: this.color
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.sequence-graph-item {
 | 
			
		||||
    width: 40px;
 | 
			
		||||
    height: 32px;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,14 +1,28 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="app-container">
 | 
			
		||||
 | 
			
		||||
		<!-- 搜索工作栏 -->
 | 
			
		||||
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 | 
			
		||||
		<el-form
 | 
			
		||||
			:model="queryParams"
 | 
			
		||||
			ref="queryForm"
 | 
			
		||||
			size="small"
 | 
			
		||||
			:inline="true"
 | 
			
		||||
			v-show="showSearch"
 | 
			
		||||
			label-width="68px">
 | 
			
		||||
			<el-form-item label="创建时间" prop="createTime">
 | 
			
		||||
        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
 | 
			
		||||
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
 | 
			
		||||
				<el-date-picker
 | 
			
		||||
					v-model="queryParams.createTime"
 | 
			
		||||
					style="width: 240px"
 | 
			
		||||
					value-format="yyyy-MM-dd HH:mm:ss"
 | 
			
		||||
					type="daterange"
 | 
			
		||||
					range-separator="-"
 | 
			
		||||
					start-placeholder="开始日期"
 | 
			
		||||
					end-placeholder="结束日期"
 | 
			
		||||
					:default-time="['00:00:00', '23:59:59']" />
 | 
			
		||||
			</el-form-item>
 | 
			
		||||
			<el-form-item>
 | 
			
		||||
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
 | 
			
		||||
				<el-button type="primary" icon="el-icon-search" @click="handleQuery">
 | 
			
		||||
					搜索
 | 
			
		||||
				</el-button>
 | 
			
		||||
				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
 | 
			
		||||
			</el-form-item>
 | 
			
		||||
		</el-form>
 | 
			
		||||
@@ -16,48 +30,109 @@
 | 
			
		||||
		<!-- 操作工具栏 -->
 | 
			
		||||
		<el-row :gutter="10" class="mb8">
 | 
			
		||||
			<el-col :span="1.5">
 | 
			
		||||
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
 | 
			
		||||
                   v-hasPermi="['monitoring:equipment-alarm-realtime:create']">新增</el-button>
 | 
			
		||||
				<el-button
 | 
			
		||||
					type="primary"
 | 
			
		||||
					plain
 | 
			
		||||
					icon="el-icon-plus"
 | 
			
		||||
					size="mini"
 | 
			
		||||
					@click="handleAdd"
 | 
			
		||||
					v-hasPermi="['monitoring:equipment-alarm-realtime:create']">
 | 
			
		||||
					新增
 | 
			
		||||
				</el-button>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="1.5">
 | 
			
		||||
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
 | 
			
		||||
                   v-hasPermi="['monitoring:equipment-alarm-realtime:export']">导出</el-button>
 | 
			
		||||
				<el-button
 | 
			
		||||
					type="warning"
 | 
			
		||||
					plain
 | 
			
		||||
					icon="el-icon-download"
 | 
			
		||||
					size="mini"
 | 
			
		||||
					@click="handleExport"
 | 
			
		||||
					:loading="exportLoading"
 | 
			
		||||
					v-hasPermi="['monitoring:equipment-alarm-realtime:export']">
 | 
			
		||||
					导出
 | 
			
		||||
				</el-button>
 | 
			
		||||
			</el-col>
 | 
			
		||||
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 | 
			
		||||
			<right-toolbar
 | 
			
		||||
				:showSearch.sync="showSearch"
 | 
			
		||||
				@queryTable="getList"></right-toolbar>
 | 
			
		||||
		</el-row>
 | 
			
		||||
 | 
			
		||||
		<!-- 列表 -->
 | 
			
		||||
		<el-table v-loading="loading" :data="list">
 | 
			
		||||
			<el-table-column label="id" align="center" prop="id" />
 | 
			
		||||
      <el-table-column label="报警信息ID,关联base_equipment_group_alarm表" align="center" prop="alarmId" />
 | 
			
		||||
      <el-table-column label="字符型报警编码" align="center" prop="alarmContent" />
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				label="报警信息ID,关联base_equipment_group_alarm表"
 | 
			
		||||
				align="center"
 | 
			
		||||
				prop="alarmId" />
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				label="字符型报警编码"
 | 
			
		||||
				align="center"
 | 
			
		||||
				prop="alarmContent" />
 | 
			
		||||
			<el-table-column label="报警详细描述" align="center" prop="description" />
 | 
			
		||||
      <el-table-column label="报警设备id 关联equipment表" align="center" prop="alarmEquipmentId" />
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				label="报警设备id 关联equipment表"
 | 
			
		||||
				align="center"
 | 
			
		||||
				prop="alarmEquipmentId" />
 | 
			
		||||
			<el-table-column label="实时报警值" align="center" prop="alarmValue" />
 | 
			
		||||
      <el-table-column label="状态,0 正常 1 报警中" align="center" prop="alarmStatus" />
 | 
			
		||||
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				label="状态,0 正常 1 报警中"
 | 
			
		||||
				align="center"
 | 
			
		||||
				prop="alarmStatus" />
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				label="创建时间"
 | 
			
		||||
				align="center"
 | 
			
		||||
				prop="createTime"
 | 
			
		||||
				width="180">
 | 
			
		||||
				<template v-slot="scope">
 | 
			
		||||
					<span>{{ parseTime(scope.row.createTime) }}</span>
 | 
			
		||||
				</template>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				label="操作"
 | 
			
		||||
				align="center"
 | 
			
		||||
				class-name="small-padding fixed-width">
 | 
			
		||||
				<template v-slot="scope">
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
 | 
			
		||||
                     v-hasPermi="['monitoring:equipment-alarm-realtime:update']">修改</el-button>
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
 | 
			
		||||
                     v-hasPermi="['monitoring:equipment-alarm-realtime:delete']">删除</el-button>
 | 
			
		||||
					<el-button
 | 
			
		||||
						size="mini"
 | 
			
		||||
						type="text"
 | 
			
		||||
						icon="el-icon-edit"
 | 
			
		||||
						@click="handleUpdate(scope.row)"
 | 
			
		||||
						v-hasPermi="['monitoring:equipment-alarm-realtime:update']">
 | 
			
		||||
						修改
 | 
			
		||||
					</el-button>
 | 
			
		||||
					<el-button
 | 
			
		||||
						size="mini"
 | 
			
		||||
						type="text"
 | 
			
		||||
						icon="el-icon-delete"
 | 
			
		||||
						@click="handleDelete(scope.row)"
 | 
			
		||||
						v-hasPermi="['monitoring:equipment-alarm-realtime:delete']">
 | 
			
		||||
						删除
 | 
			
		||||
					</el-button>
 | 
			
		||||
				</template>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
		</el-table>
 | 
			
		||||
		<!-- 分页组件 -->
 | 
			
		||||
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
 | 
			
		||||
		<pagination
 | 
			
		||||
			v-show="total > 0"
 | 
			
		||||
			:total="total"
 | 
			
		||||
			:page.sync="queryParams.pageNo"
 | 
			
		||||
			:limit.sync="queryParams.pageSize"
 | 
			
		||||
			@pagination="getList" />
 | 
			
		||||
 | 
			
		||||
		<!-- 对话框(添加 / 修改) -->
 | 
			
		||||
    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
 | 
			
		||||
		<el-dialog
 | 
			
		||||
			:title="title"
 | 
			
		||||
			:visible.sync="open"
 | 
			
		||||
			width="500px"
 | 
			
		||||
			v-dialogDrag
 | 
			
		||||
			append-to-body>
 | 
			
		||||
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
 | 
			
		||||
        <el-form-item label="报警信息ID,关联base_equipment_group_alarm表" prop="alarmId">
 | 
			
		||||
          <el-input v-model="form.alarmId" placeholder="请输入报警信息ID,关联base_equipment_group_alarm表" />
 | 
			
		||||
				<el-form-item
 | 
			
		||||
					label="报警信息ID,关联base_equipment_group_alarm表"
 | 
			
		||||
					prop="alarmId">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="form.alarmId"
 | 
			
		||||
						placeholder="请输入报警信息ID,关联base_equipment_group_alarm表" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
				<el-form-item label="字符型报警编码">
 | 
			
		||||
					<editor v-model="form.alarmContent" :min-height="192" />
 | 
			
		||||
@@ -65,8 +140,12 @@
 | 
			
		||||
				<el-form-item label="报警详细描述">
 | 
			
		||||
					<editor v-model="form.description" :min-height="192" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
        <el-form-item label="报警设备id 关联equipment表" prop="alarmEquipmentId">
 | 
			
		||||
          <el-input v-model="form.alarmEquipmentId" placeholder="请输入报警设备id 关联equipment表" />
 | 
			
		||||
				<el-form-item
 | 
			
		||||
					label="报警设备id 关联equipment表"
 | 
			
		||||
					prop="alarmEquipmentId">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="form.alarmEquipmentId"
 | 
			
		||||
						placeholder="请输入报警设备id 关联equipment表" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
				<el-form-item label="实时报警值" prop="alarmValue">
 | 
			
		||||
					<el-input v-model="form.alarmValue" placeholder="请输入实时报警值" />
 | 
			
		||||
@@ -86,13 +165,20 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { createEquipmentAlarmRealtime, updateEquipmentAlarmRealtime, deleteEquipmentAlarmRealtime, getEquipmentAlarmRealtime, getEquipmentAlarmRealtimePage, exportEquipmentAlarmRealtimeExcel } from "@/api/monitoring/equipmentAlarmRealtime";
 | 
			
		||||
import {
 | 
			
		||||
	createEquipmentAlarmRealtime,
 | 
			
		||||
	updateEquipmentAlarmRealtime,
 | 
			
		||||
	deleteEquipmentAlarmRealtime,
 | 
			
		||||
	getEquipmentAlarmRealtime,
 | 
			
		||||
	getEquipmentAlarmRealtimePage,
 | 
			
		||||
	exportEquipmentAlarmRealtimeExcel,
 | 
			
		||||
} from '@/api/monitoring/equipmentAlarmRealtime';
 | 
			
		||||
import Editor from '@/components/Editor';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: "EquipmentAlarmRealtime",
 | 
			
		||||
	name: 'EquipmentAlarmRealtime',
 | 
			
		||||
	components: {
 | 
			
		||||
    Editor
 | 
			
		||||
		Editor,
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
@@ -107,7 +193,7 @@ export default {
 | 
			
		||||
			// 设备报警实时信息列表
 | 
			
		||||
			list: [],
 | 
			
		||||
			// 弹出层标题
 | 
			
		||||
      title: "",
 | 
			
		||||
			title: '',
 | 
			
		||||
			// 是否显示弹出层
 | 
			
		||||
			open: false,
 | 
			
		||||
			// 查询参数
 | 
			
		||||
@@ -119,8 +205,7 @@ export default {
 | 
			
		||||
			// 表单参数
 | 
			
		||||
			form: {},
 | 
			
		||||
			// 表单校验
 | 
			
		||||
      rules: {
 | 
			
		||||
      }
 | 
			
		||||
			rules: {},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
@@ -131,7 +216,7 @@ export default {
 | 
			
		||||
		getList() {
 | 
			
		||||
			this.loading = true;
 | 
			
		||||
			// 执行查询
 | 
			
		||||
      getEquipmentAlarmRealtimePage(this.queryParams).then(response => {
 | 
			
		||||
			getEquipmentAlarmRealtimePage(this.queryParams).then((response) => {
 | 
			
		||||
				this.list = response.data.list;
 | 
			
		||||
				this.total = response.data.total;
 | 
			
		||||
				this.loading = false;
 | 
			
		||||
@@ -153,7 +238,7 @@ export default {
 | 
			
		||||
				alarmValue: undefined,
 | 
			
		||||
				alarmStatus: undefined,
 | 
			
		||||
			};
 | 
			
		||||
      this.resetForm("form");
 | 
			
		||||
			this.resetForm('form');
 | 
			
		||||
		},
 | 
			
		||||
		/** 搜索按钮操作 */
 | 
			
		||||
		handleQuery() {
 | 
			
		||||
@@ -162,43 +247,43 @@ export default {
 | 
			
		||||
		},
 | 
			
		||||
		/** 重置按钮操作 */
 | 
			
		||||
		resetQuery() {
 | 
			
		||||
      this.resetForm("queryForm");
 | 
			
		||||
			this.resetForm('queryForm');
 | 
			
		||||
			this.handleQuery();
 | 
			
		||||
		},
 | 
			
		||||
		/** 新增按钮操作 */
 | 
			
		||||
		handleAdd() {
 | 
			
		||||
			this.reset();
 | 
			
		||||
			this.open = true;
 | 
			
		||||
      this.title = "添加设备报警实时信息";
 | 
			
		||||
			this.title = '添加设备报警实时信息';
 | 
			
		||||
		},
 | 
			
		||||
		/** 修改按钮操作 */
 | 
			
		||||
		handleUpdate(row) {
 | 
			
		||||
			this.reset();
 | 
			
		||||
			const id = row.id;
 | 
			
		||||
      getEquipmentAlarmRealtime(id).then(response => {
 | 
			
		||||
			getEquipmentAlarmRealtime(id).then((response) => {
 | 
			
		||||
				this.form = response.data;
 | 
			
		||||
				this.open = true;
 | 
			
		||||
        this.title = "修改设备报警实时信息";
 | 
			
		||||
				this.title = '修改设备报警实时信息';
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		/** 提交按钮 */
 | 
			
		||||
		submitForm() {
 | 
			
		||||
      this.$refs["form"].validate(valid => {
 | 
			
		||||
			this.$refs['form'].validate((valid) => {
 | 
			
		||||
				if (!valid) {
 | 
			
		||||
					return;
 | 
			
		||||
				}
 | 
			
		||||
				// 修改的提交
 | 
			
		||||
				if (this.form.id != null) {
 | 
			
		||||
          updateEquipmentAlarmRealtime(this.form).then(response => {
 | 
			
		||||
            this.$modal.msgSuccess("修改成功");
 | 
			
		||||
					updateEquipmentAlarmRealtime(this.form).then((response) => {
 | 
			
		||||
						this.$modal.msgSuccess('修改成功');
 | 
			
		||||
						this.open = false;
 | 
			
		||||
						this.getList();
 | 
			
		||||
					});
 | 
			
		||||
					return;
 | 
			
		||||
				}
 | 
			
		||||
				// 添加的提交
 | 
			
		||||
        createEquipmentAlarmRealtime(this.form).then(response => {
 | 
			
		||||
          this.$modal.msgSuccess("新增成功");
 | 
			
		||||
				createEquipmentAlarmRealtime(this.form).then((response) => {
 | 
			
		||||
					this.$modal.msgSuccess('新增成功');
 | 
			
		||||
					this.open = false;
 | 
			
		||||
					this.getList();
 | 
			
		||||
				});
 | 
			
		||||
@@ -207,12 +292,16 @@ export default {
 | 
			
		||||
		/** 删除按钮操作 */
 | 
			
		||||
		handleDelete(row) {
 | 
			
		||||
			const id = row.id;
 | 
			
		||||
      this.$modal.confirm('是否确认删除设备报警实时信息编号为"' + id + '"的数据项?').then(function() {
 | 
			
		||||
			this.$modal
 | 
			
		||||
				.confirm('是否确认删除设备报警实时信息编号为"' + id + '"的数据项?')
 | 
			
		||||
				.then(function () {
 | 
			
		||||
					return deleteEquipmentAlarmRealtime(id);
 | 
			
		||||
        }).then(() => {
 | 
			
		||||
				})
 | 
			
		||||
				.then(() => {
 | 
			
		||||
					this.getList();
 | 
			
		||||
          this.$modal.msgSuccess("删除成功");
 | 
			
		||||
        }).catch(() => {});
 | 
			
		||||
					this.$modal.msgSuccess('删除成功');
 | 
			
		||||
				})
 | 
			
		||||
				.catch(() => {});
 | 
			
		||||
		},
 | 
			
		||||
		/** 导出按钮操作 */
 | 
			
		||||
		handleExport() {
 | 
			
		||||
@@ -220,14 +309,18 @@ export default {
 | 
			
		||||
			let params = { ...this.queryParams };
 | 
			
		||||
			params.pageNo = undefined;
 | 
			
		||||
			params.pageSize = undefined;
 | 
			
		||||
      this.$modal.confirm('是否确认导出所有设备报警实时信息数据项?').then(() => {
 | 
			
		||||
			this.$modal
 | 
			
		||||
				.confirm('是否确认导出所有设备报警实时信息数据项?')
 | 
			
		||||
				.then(() => {
 | 
			
		||||
					this.exportLoading = true;
 | 
			
		||||
					return exportEquipmentAlarmRealtimeExcel(params);
 | 
			
		||||
        }).then(response => {
 | 
			
		||||
				})
 | 
			
		||||
				.then((response) => {
 | 
			
		||||
					this.$download.excel(response, '设备报警实时信息.xls');
 | 
			
		||||
					this.exportLoading = false;
 | 
			
		||||
        }).catch(() => {});
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
				})
 | 
			
		||||
				.catch(() => {});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user