|
|
@@ -1,218 +0,0 @@
|
|
|
-<template>
|
|
|
- <!-- 配置预警设备 -->
|
|
|
- <div class="warning-device-box">
|
|
|
- <div class="device-box">
|
|
|
- <a-button class="vent-margin-b-5" type="primary" @click="handleOpen(true, {})"> 新增 </a-button>
|
|
|
- <a-table :columns="MonitorColumns" :data-source="dataSource" bordered :scroll="{ y: 500 }" :pagination="false">
|
|
|
- <template v-if="show" #bodyCell="{ column, record }">
|
|
|
- <template v-if="column.dataIndex === 'operation'">
|
|
|
- <a class="action-link" @click="handleOpen('update', record)">编辑</a>
|
|
|
- <a class="action-link vent-margin-l-10" @click="handleDelete(record)">删除</a>
|
|
|
- </template>
|
|
|
- <template v-if="column.dataIndex === 'operation1'">
|
|
|
- <a class="action-link" @click="handleOpen('add', record)">新增</a>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" :monitor-type="'2,3,9,202,203,209'" />
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { ref, onMounted } from 'vue';
|
|
|
-import { rowOrColSpanMap, MonitorColumns, monitorWarningFormSchemas } from './warning.data';
|
|
|
-import { warningLogList, workFaceWarningList, workFaceWarningAdd, workFaceWarningEdit, workFaceWarningDelete } from './warning.api';
|
|
|
-import BaseModal from './BaseModal.vue';
|
|
|
-import { useModal } from '/@/components/Modal';
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
-
|
|
|
-const emit = defineEmits(['register']);
|
|
|
-
|
|
|
-const props = defineProps({
|
|
|
- deviceId: { type: String },
|
|
|
-});
|
|
|
-
|
|
|
-const show = ref(false);
|
|
|
-const formSchemas = monitorWarningFormSchemas({ id: props.deviceId });
|
|
|
-const activeID = ref('');
|
|
|
-const dataSource = ref<any[]>([]);
|
|
|
-
|
|
|
-function selectWarning(id) {
|
|
|
- activeID.value = id;
|
|
|
- // 查询该条目的下预警设备列表
|
|
|
- getDataSource();
|
|
|
-}
|
|
|
-async function getDataSource() {
|
|
|
- show.value = false;
|
|
|
- rowOrColSpanMap.clear();
|
|
|
- const result = await workFaceWarningList({ sysId: props.deviceId, monitorType: 2, alarmId: activeID.value, pageSize: 100000 });
|
|
|
- let flag = 0;
|
|
|
- let groupNum = 0;
|
|
|
- let resultDataSource: any[] = [];
|
|
|
- const value1 = [
|
|
|
- {
|
|
|
- code: 'key',
|
|
|
- rowSpan: 0,
|
|
|
- colSpan: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- code: 'alarmName',
|
|
|
- rowSpan: 0,
|
|
|
- colSpan: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- code: 'operation1',
|
|
|
- rowSpan: 0,
|
|
|
- colSpan: 1,
|
|
|
- },
|
|
|
- ];
|
|
|
- // 根据relId 排序
|
|
|
-
|
|
|
- for (let i = 0; i < result.records.length; i++) {
|
|
|
- const item = result.records[i];
|
|
|
- if (!item.relId) {
|
|
|
- groupNum++;
|
|
|
- resultDataSource.push(item);
|
|
|
- let itemChildArr: any[] = [];
|
|
|
- for (let j = 0; j < result.records.length; j++) {
|
|
|
- const itemChild = result.records[j];
|
|
|
- if (itemChild.relId == item.id) {
|
|
|
- resultDataSource.push(itemChild);
|
|
|
- itemChildArr.push(itemChild);
|
|
|
- }
|
|
|
- }
|
|
|
- const value0 = [
|
|
|
- {
|
|
|
- code: 'key',
|
|
|
- rowSpan: itemChildArr.length + 1,
|
|
|
- colSpan: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- code: 'alarmName',
|
|
|
- rowSpan: itemChildArr.length + 1,
|
|
|
- colSpan: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- code: 'operation1',
|
|
|
- rowSpan: itemChildArr.length + 1,
|
|
|
- colSpan: 1,
|
|
|
- },
|
|
|
- ];
|
|
|
- rowOrColSpanMap.set(item['id'], value0);
|
|
|
- item['key'] = `${groupNum}`;
|
|
|
- for (let m = 0; m < itemChildArr.length; m++) {
|
|
|
- rowOrColSpanMap.set(itemChildArr[m]['id'], value1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- show.value = true;
|
|
|
- dataSource.value = resultDataSource;
|
|
|
-}
|
|
|
-
|
|
|
-async function handleDelete(record) {
|
|
|
- await workFaceWarningDelete({ id: record.id });
|
|
|
- getDataSource();
|
|
|
-}
|
|
|
-
|
|
|
-const [register, { openModal, closeModal }] = useModal();
|
|
|
-
|
|
|
-function handleOpen(flag?, record?) {
|
|
|
- if (record) {
|
|
|
- if (flag == 'update') {
|
|
|
- openModal(true, {
|
|
|
- isUpdate: true,
|
|
|
- record,
|
|
|
- });
|
|
|
- } else {
|
|
|
- if (!activeID.value) {
|
|
|
- message.warning('请先选择预警条目!');
|
|
|
- return;
|
|
|
- }
|
|
|
- // 新增并关系数据
|
|
|
- openModal(true, {
|
|
|
- isUpdate: false,
|
|
|
- record,
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (!activeID.value) {
|
|
|
- message.warning('请先选择预警条目!');
|
|
|
- return;
|
|
|
- }
|
|
|
- openModal(true, {
|
|
|
- isUpdate: false,
|
|
|
- });
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-async function onSubmit(flag, values) {
|
|
|
- if (activeID.value) {
|
|
|
- // 提交数据弹窗
|
|
|
- if (flag == 'update') {
|
|
|
- await workFaceWarningEdit({ ...values });
|
|
|
- } else {
|
|
|
- await workFaceWarningAdd({ ...values, monitorType: 2, sysId: props.deviceId, alarmId: activeID.value });
|
|
|
- }
|
|
|
- getDataSource();
|
|
|
- }
|
|
|
- closeModal();
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- await getWarningList();
|
|
|
- await getDataSource();
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-@ventSpace: zxm;
|
|
|
-
|
|
|
-.warning-device-box {
|
|
|
- width: 100%;
|
|
|
- height: 600px;
|
|
|
- overflow-y: auto;
|
|
|
- display: flex;
|
|
|
- .warning-box {
|
|
|
- width: 200px;
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- background: #ffffff11;
|
|
|
- padding: 5px;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- .link-item {
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- line-height: 30px;
|
|
|
- padding-left: 30px;
|
|
|
- color: #fff;
|
|
|
- span:hover {
|
|
|
- color: #89ffff;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- top: 12px;
|
|
|
- left: 10px;
|
|
|
- transform: rotateZ(45deg) skew(10deg, 10deg);
|
|
|
- background: #45d3fd;
|
|
|
- }
|
|
|
- }
|
|
|
- .active-device-title {
|
|
|
- color: aqua;
|
|
|
- }
|
|
|
- }
|
|
|
- .device-box {
|
|
|
- flex: 1;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-link {
|
|
|
- color: #00e7ff;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|