123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- <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="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" />
- </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 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;
- 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>
|