index3.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <template>
  2. <!-- 配置预警设备 -->
  3. <div class="warning-device-box">
  4. <div class="warning-box">
  5. <div v-for="item in warningList" class="link-item" :class="{ 'active-device-title': item.id == activeID }" :key="item.id">
  6. <span class="" @click="selectWarning(item.id)">{{ item.alarmName }}</span>
  7. </div>
  8. </div>
  9. <div class="device-box">
  10. <a-button class="vent-margin-b-5" type="primary" @click="handleOpen(true, {})"> 新增 </a-button>
  11. <a-table :columns="MonitorColumns" :data-source="dataSource" bordered :scroll="{ y: 500 }" :pagination="false">
  12. <template v-if="show" #bodyCell="{ column, record }">
  13. <template v-if="column.dataIndex === 'operation'">
  14. <a class="action-link" @click="handleOpen('update', record)">编辑</a>
  15. <a class="action-link vent-margin-l-10" @click="handleDelete(record)">删除</a>
  16. </template>
  17. <template v-if="column.dataIndex === 'operation1'">
  18. <a class="action-link" @click="handleOpen('add', record)">新增</a>
  19. </template>
  20. </template>
  21. </a-table>
  22. </div>
  23. </div>
  24. <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" />
  25. </template>
  26. <script lang="ts" setup>
  27. import { ref, onMounted } from 'vue';
  28. import { rowOrColSpanMap, MonitorColumns, monitorWarningFormSchemas } from './warning.data';
  29. import { warningLogList, workFaceWarningList, workFaceWarningAdd, workFaceWarningEdit, workFaceWarningDelete } from './warning.api';
  30. import BaseModal from './BaseModal.vue';
  31. import { useModal } from '/@/components/Modal';
  32. import { message } from 'ant-design-vue';
  33. const emit = defineEmits(['register']);
  34. const props = defineProps({
  35. deviceId: { type: String },
  36. });
  37. const show = ref(false);
  38. const formSchemas = monitorWarningFormSchemas({ id: props.deviceId });
  39. const activeID = ref('');
  40. const warningList = ref<{ id: string; alarmName: string }[]>([]);
  41. const dataSource = ref<any[]>([]);
  42. function selectWarning(id) {
  43. activeID.value = id;
  44. // 查询该条目的下预警设备列表
  45. getDataSource();
  46. }
  47. async function getWarningList() {
  48. const result = await warningLogList({ sysId: props.deviceId, pageSize: 100000 }); //id: props.deviceId
  49. warningList.value = result.records;
  50. activeID.value = warningList.value[0]['id'];
  51. }
  52. async function getDataSource() {
  53. show.value = false;
  54. rowOrColSpanMap.clear();
  55. const result = await workFaceWarningList({ sysId: props.deviceId, monitorType: 2, alarmId: activeID.value, pageSize: 100000 });
  56. let flag = 0;
  57. let groupNum = 0;
  58. let resultDataSource: any[] = [];
  59. const value1 = [
  60. {
  61. code: 'key',
  62. rowSpan: 0,
  63. colSpan: 1,
  64. },
  65. {
  66. code: 'alarmName',
  67. rowSpan: 0,
  68. colSpan: 1,
  69. },
  70. {
  71. code: 'operation1',
  72. rowSpan: 0,
  73. colSpan: 1,
  74. },
  75. ];
  76. // 根据relId 排序
  77. for (let i = 0; i < result.records.length; i++) {
  78. const item = result.records[i];
  79. if (!item.relId) {
  80. groupNum++;
  81. resultDataSource.push(item);
  82. let itemChildArr: any[] = [];
  83. for (let j = 0; j < result.records.length; j++) {
  84. const itemChild = result.records[j];
  85. if (itemChild.relId == item.id) {
  86. resultDataSource.push(itemChild);
  87. itemChildArr.push(itemChild);
  88. }
  89. }
  90. const value0 = [
  91. {
  92. code: 'key',
  93. rowSpan: itemChildArr.length + 1,
  94. colSpan: 1,
  95. },
  96. {
  97. code: 'alarmName',
  98. rowSpan: itemChildArr.length + 1,
  99. colSpan: 1,
  100. },
  101. {
  102. code: 'operation1',
  103. rowSpan: itemChildArr.length + 1,
  104. colSpan: 1,
  105. },
  106. ];
  107. rowOrColSpanMap.set(item['id'], value0);
  108. item['key'] = `${groupNum}`;
  109. for (let m = 0; m < itemChildArr.length; m++) {
  110. rowOrColSpanMap.set(itemChildArr[m]['id'], value1);
  111. }
  112. }
  113. }
  114. show.value = true;
  115. dataSource.value = resultDataSource;
  116. }
  117. async function handleDelete(record) {
  118. await workFaceWarningDelete({ id: record.id });
  119. getDataSource();
  120. }
  121. const [register, { openModal, closeModal }] = useModal();
  122. function handleOpen(flag?, record?) {
  123. if (record) {
  124. if (flag == 'update') {
  125. openModal(true, {
  126. isUpdate: true,
  127. record,
  128. });
  129. } else {
  130. if (!activeID.value) {
  131. message.warning('请先选择预警条目!');
  132. return;
  133. }
  134. // 新增并关系数据
  135. openModal(true, {
  136. isUpdate: false,
  137. record,
  138. });
  139. }
  140. } else {
  141. if (!activeID.value) {
  142. message.warning('请先选择预警条目!');
  143. return;
  144. }
  145. openModal(true, {
  146. isUpdate: false,
  147. });
  148. }
  149. }
  150. async function onSubmit(flag, values) {
  151. if (activeID.value) {
  152. // 提交数据弹窗
  153. if (flag == 'update') {
  154. await workFaceWarningEdit({ ...values });
  155. } else {
  156. await workFaceWarningAdd({ ...values, monitorType: 2, sysId: props.deviceId, alarmId: activeID.value });
  157. }
  158. getDataSource();
  159. }
  160. closeModal();
  161. }
  162. onMounted(async () => {
  163. await getWarningList();
  164. await getDataSource();
  165. });
  166. </script>
  167. <style lang="less" scoped>
  168. @ventSpace: zxm;
  169. .warning-device-box {
  170. width: 100%;
  171. height: 600px;
  172. overflow-y: auto;
  173. display: flex;
  174. .warning-box {
  175. width: 200px;
  176. height: 100%;
  177. overflow-y: auto;
  178. background: #ffffff11;
  179. padding: 5px;
  180. border-radius: 5px;
  181. .link-item {
  182. position: relative;
  183. cursor: pointer;
  184. line-height: 30px;
  185. padding-left: 30px;
  186. color: #fff;
  187. span:hover {
  188. color: #89ffff;
  189. }
  190. &::after {
  191. content: '';
  192. position: absolute;
  193. display: block;
  194. width: 8px;
  195. height: 8px;
  196. top: 12px;
  197. left: 10px;
  198. transform: rotateZ(45deg) skew(10deg, 10deg);
  199. background: #45d3fd;
  200. }
  201. }
  202. .active-device-title {
  203. color: aqua;
  204. }
  205. }
  206. .device-box {
  207. flex: 1;
  208. margin-left: 10px;
  209. }
  210. .action-link {
  211. color: #00e7ff;
  212. }
  213. }
  214. </style>