|
|
@@ -0,0 +1,177 @@
|
|
|
+<!-- eslint-disable vue/multi-word-component-names -->
|
|
|
+<template>
|
|
|
+ <!-- 配置预警设备 -->
|
|
|
+ <div class="warning-device-box">
|
|
|
+ <div class="warning-box">
|
|
|
+ <div v-for="item in warningList" class="link-item" :class="{ 'active-device-title': item.id == activeID }" :key="item.id">
|
|
|
+ <span class="" @click="selectWarning(item.id)">{{ item.alarmName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="device-box">
|
|
|
+ <a-button class="vent-margin-b-5" type="primary" @click="handleOpen(true, {})"> 新增 </a-button>
|
|
|
+ <a-table :columns="modelAlarmColumns" :data-source="dataSource" bordered :scroll="{ y: 500 }" :pagination="false" showIndexColumn>
|
|
|
+ <template v-if="show" #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dataIndex === 'operation'">
|
|
|
+ <a class="action-link" @click="handleOpen('update', record)">编辑</a>
|
|
|
+ <a-popconfirm title="确认删除" @confirm="handleDelete(record)">
|
|
|
+ <a class="action-link vent-margin-l-10">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <BasicModal @register="register" :width="800" :min-height="600" @ok="onSubmit">
|
|
|
+ <BasicForm @register="registerForm" />
|
|
|
+ </BasicModal>
|
|
|
+ <!-- <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" :monitor-type="'2,3,9'" /> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { ref, onMounted, nextTick } from 'vue';
|
|
|
+ import { modelAlarmColumns, modelAlarmFormSchemas } from './warning.data';
|
|
|
+ import { warningLogList, modelAlarmAutoList, modelAlarmAutoAdd, modelAlarmAutoEdit, modelAlarmAutoDelete } from './warning.api';
|
|
|
+ // import BaseModal from './BaseModal.vue';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ import { BasicForm, useForm } from '/@/components/Form';
|
|
|
+ import { BasicModal, useModal } from '/@/components/Modal';
|
|
|
+
|
|
|
+ defineEmits(['register']);
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ deviceId: { type: String },
|
|
|
+ });
|
|
|
+
|
|
|
+ const show = ref(false);
|
|
|
+ const formSchemas = modelAlarmFormSchemas();
|
|
|
+ const activeID = ref('');
|
|
|
+ const warningList = ref<{ id: string; alarmName: string }[]>([]);
|
|
|
+ const dataSource = ref<any[]>([]);
|
|
|
+
|
|
|
+ function selectWarning(id) {
|
|
|
+ activeID.value = id;
|
|
|
+ // 查询该条目的下预警设备列表
|
|
|
+ getDataSource();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function getWarningList() {
|
|
|
+ const result = await warningLogList({ sysId: props.deviceId, pageSize: 100000 }); //id: props.deviceId
|
|
|
+ warningList.value = result.records;
|
|
|
+ activeID.value = warningList.value[0]['id'];
|
|
|
+ }
|
|
|
+
|
|
|
+ async function getDataSource() {
|
|
|
+ show.value = false;
|
|
|
+ const result = await modelAlarmAutoList({ sysId: props.deviceId, alarmId: activeID.value, pageSize: 100000 });
|
|
|
+ // const result = await Promise.resolve({
|
|
|
+ // records: [
|
|
|
+ // {
|
|
|
+ // id: 0,
|
|
|
+ // deviceName: '设备名称',
|
|
|
+ // maxArea: '最大过风面积',
|
|
|
+ // des: '灾变时动作描述',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // });
|
|
|
+ show.value = true;
|
|
|
+ dataSource.value = result.records;
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handleDelete(record) {
|
|
|
+ await modelAlarmAutoDelete({ id: record.id });
|
|
|
+ getDataSource();
|
|
|
+ }
|
|
|
+
|
|
|
+ const [register, { openModal, closeModal }] = useModal();
|
|
|
+ const [registerForm, { setFieldsValue, resetFields, validateFields, getFieldsValue }] = useForm({
|
|
|
+ schemas: formSchemas,
|
|
|
+ showActionButtonGroup: false,
|
|
|
+ });
|
|
|
+
|
|
|
+ async function handleOpen(flag, record) {
|
|
|
+ if (!activeID.value) {
|
|
|
+ message.warning('请先选择预警条目！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ openModal(true, {
|
|
|
+ isUpdate: flag == 'update',
|
|
|
+ });
|
|
|
+ nextTick(() => {
|
|
|
+ resetFields();
|
|
|
+ setFieldsValue(record);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ async function onSubmit() {
|
|
|
+ if (activeID.value) {
|
|
|
+ await validateFields();
|
|
|
+ const values = getFieldsValue();
|
|
|
+ // 提交数据弹窗
|
|
|
+ if (values.id) {
|
|
|
+ await modelAlarmAutoEdit({ ...values });
|
|
|
+ } else {
|
|
|
+ await modelAlarmAutoAdd({ ...values, sysId: props.deviceId, alarmId: activeID.value });
|
|
|
+ }
|
|
|
+ getDataSource();
|
|
|
+ }
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ await getWarningList();
|
|
|
+ await getDataSource();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+ @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: var(--vent-font-color);
|
|
|
+ span:hover {
|
|
|
+ color: var(--vent-font-action-link);
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ top: 12px;
|
|
|
+ left: 10px;
|
|
|
+ transform: rotateZ(45deg) skew(10deg, 10deg);
|
|
|
+ background: var(--vent-base-light-bg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active-device-title {
|
|
|
+ color: var(--vent-font-action-link);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device-box {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-link {
|
|
|
+ color: var(--vent-font-action-link);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
