DeviceModal.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <BasicModal
  3. v-bind="$attrs"
  4. @register="registerModal"
  5. :title="title"
  6. width="1000px"
  7. :showCancelBtn="false"
  8. :showOkBtn="false"
  9. :footer="null"
  10. destroyOnClose
  11. :mask-closable="false"
  12. @cancel="closeModalFn"
  13. >
  14. <a-tabs v-if="props.showTab" v-model:activeKey="activeKey">
  15. <a-tab-pane key="1" tab="基本信息" force-render>
  16. <FormModal :record="deviceData" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
  17. </a-tab-pane>
  18. <!-- <a-tab-pane key="10" v-if="deviceType == 'fanlocal' || deviceType == 'fanmain'" tab="风机曲线" force-render>
  19. <FanLineModal :record="deviceData" />
  20. </a-tab-pane> -->
  21. <a-tab-pane key="2" tab="点表关联">
  22. <PointTable
  23. :columns="pointColumns"
  24. :pointType="deviceData.strtype"
  25. :deviceId="deviceData.id"
  26. :valuetype="9"
  27. @save="savePointData"
  28. @delete="deletePointById"
  29. />
  30. </a-tab-pane>
  31. <a-tab-pane key="8" tab="虚拟点表配置">
  32. <PointTable
  33. :columns="simulationColumns"
  34. :pointType="deviceData.strtype"
  35. :deviceId="deviceData.id"
  36. :valuetype="4"
  37. @save="savePointData"
  38. @delete="deletePointById"
  39. />
  40. </a-tab-pane>
  41. <a-tab-pane key="3" tab="设备关联" v-if="deviceType == 'managesys'">
  42. <WorkFacePointTable :columns="linkColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
  43. </a-tab-pane>
  44. <a-tab-pane v-if="deviceType == 'managesys'" key="4" tab="预警条目管理">
  45. <ManagerWarningDeviceTable v-if="activeKey == '4'" :deviceId="deviceData.id" />
  46. </a-tab-pane>
  47. <a-tab-pane key="5" :tab="deviceType !== 'managesys' ? '报警配置' : '配置预警设备'">
  48. <template v-if="activeKey == '5'">
  49. <WarningTable v-if="deviceType !== 'managesys'" :deviceId="deviceData.id" :pointType="deviceData.strtype" />
  50. <BackWindDeviceTable v-else :deviceId="deviceData.id" />
  51. </template>
  52. </a-tab-pane>
  53. <a-tab-pane v-if="deviceType == 'managesys'" key="6" tab="配置控制设备">
  54. <template v-if="activeKey == '6'">
  55. <WarningTable v-if="deviceType !== 'managesys'" :deviceId="deviceData.id" :pointType="deviceData.strtype" />
  56. <ManagerWarningTable v-else :deviceId="deviceData.id" />
  57. </template>
  58. </a-tab-pane>
  59. <a-tab-pane key="7" tab="摄像头配置"
  60. ><EditRowTable
  61. :columns="cameraColumns"
  62. :list="cameraList"
  63. :params="{ deviceid: deviceData.id }"
  64. @saveOrUpdate="saveCameraData"
  65. @deleteById="deleteCameraById"
  66. :isAdd="true"
  67. /></a-tab-pane>
  68. <!-- <a-tab-pane key="9" tab="预警指标修改">
  69. <template v-if="activeKey == '9'">
  70. <editWarnTable></editWarnTable>
  71. </template>
  72. </a-tab-pane> -->
  73. </a-tabs>
  74. <FormModal v-else :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
  75. </BasicModal>
  76. </template>
  77. <script lang="ts" setup>
  78. import { computed, unref, inject, reactive, ref, watch } from 'vue';
  79. import { BasicModal, useModalInner } from '/@/components/Modal';
  80. import EditRowTable from '../../comment/EditRowTable.vue';
  81. import PointTable from './pointTabel/PointTable.vue';
  82. import WarningTable from './warningTabel/index.vue';
  83. import ManagerWarningTable from './warningTabel/index1.vue';
  84. import ManagerWarningDeviceTable from './warningTabel/index2.vue';
  85. import BackWindDeviceTable from './warningTabel/index3.vue';
  86. import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
  87. // import editWarnTable from './editWarnTable/index.vue'
  88. import FanLineModal from './FanLineModal .vue';
  89. import FormModal from './FormModal.vue';
  90. import { cloneDeep } from 'lodash-es';
  91. import { columns as pointColumns, workFaceColumns, simulationColumns } from './pointTabel/point.data';
  92. import { saveOrUpdate as pointSaveOrUpdate, deleteById as pointDeleteById } from './pointTabel/point.api';
  93. import { columns as cameraColumns } from './cameraTabel/camera.data';
  94. import { list as cameraList, saveOrUpdate as cameraSaveOrUpdate, deleteById as cameraDeleteById } from './cameraTabel/camera.api';
  95. const props = defineProps({
  96. showTab: { type: Boolean, required: true },
  97. // deviceType: { type: String },
  98. });
  99. // 声明Emits
  100. const emit = defineEmits(['saveOrUpdate', 'register', 'closeModal']);
  101. const isUpdate = inject('isUpdate');
  102. const deviceData = inject('formData') as any;
  103. const deviceType = inject('deviceType') as any;
  104. const record = reactive({});
  105. const activeKey = ref('1');
  106. const linkColumns = ref<any[]>([]);
  107. //表单赋值
  108. const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  109. //重置表单
  110. setModalProps({ confirmLoading: false });
  111. Object.assign(deviceData, data.record);
  112. // 判断是否是关键阻力路线
  113. });
  114. //设置标题
  115. const title = computed(() => {
  116. if (!unref(isUpdate)) {
  117. if (deviceData.strname || deviceData.systemname) {
  118. return `新增(${deviceData.strname || deviceData.systemname})`;
  119. }
  120. return `新增`;
  121. } else {
  122. if (deviceData['strtype'] == 'sys_majorpath') {
  123. linkColumns.value = [
  124. ...workFaceColumns,
  125. ...[
  126. {
  127. title: '是否在关键通风路线上',
  128. width: 100,
  129. dataIndex: 'pathflag',
  130. edit: true,
  131. editComponent: 'Switch',
  132. editValueMap: (value) => {
  133. return value ? '是' : '否';
  134. },
  135. },
  136. {
  137. title: '传感器类型',
  138. width: 100,
  139. dataIndex: 'sensorType',
  140. edit: true,
  141. editComponent: 'Select',
  142. editComponentProps: {
  143. options: [
  144. {
  145. label: '多参',
  146. value: '1',
  147. },
  148. {
  149. label: '测风',
  150. value: '2',
  151. },
  152. ],
  153. },
  154. },
  155. {
  156. title: '风向',
  157. width: 100,
  158. dataIndex: 'winddir',
  159. edit: true,
  160. editComponent: 'Select',
  161. editComponentProps: {
  162. options: [
  163. {
  164. label: '进风',
  165. value: '1',
  166. },
  167. {
  168. label: '用风',
  169. value: '2',
  170. },
  171. {
  172. label: '回风',
  173. value: '3',
  174. },
  175. ],
  176. },
  177. },
  178. {
  179. title: '是否总风量',
  180. width: 100,
  181. dataIndex: 'windflag',
  182. edit: true,
  183. editComponent: 'Switch',
  184. editValueMap: (value) => {
  185. return value ? '是' : '否';
  186. },
  187. },
  188. {
  189. title: '路线名称',
  190. width: 100,
  191. dataIndex: 'des',
  192. edit: true,
  193. editComponent: 'Input',
  194. },
  195. {
  196. title: ' 阻力值',
  197. width: 100,
  198. dataIndex: 'testDrag',
  199. edit: true,
  200. editComponent: 'InputNumber',
  201. },
  202. ],
  203. ];
  204. } else {
  205. linkColumns.value = [...workFaceColumns];
  206. }
  207. if (deviceData.strname || deviceData.systemname) {
  208. return `编辑(${deviceData.strname || deviceData.systemname})`;
  209. }
  210. return `编辑`;
  211. }
  212. });
  213. const closeModalFn = () => {
  214. closeModal();
  215. emit('closeModal');
  216. };
  217. const savePointData = (data) => {
  218. const record = cloneDeep(data.editValueRefs);
  219. pointSaveOrUpdate(Object.assign(record, { id: data.id, deviceId: deviceData.id }), data.id);
  220. };
  221. const saveCameraData = (data: any, reload: Function) => {
  222. cameraSaveOrUpdate(Object.assign({ ...data }, { id: data.id, deviceid: deviceData.id }), data.id);
  223. };
  224. const deletePointById = (id, reload) => {
  225. pointDeleteById({ id: id }, reload);
  226. };
  227. const deleteCameraById = (id, reload) => {
  228. cameraDeleteById({ id: id }, reload);
  229. };
  230. </script>
  231. <style scoped lang="less">
  232. ::v-deep .suffix {
  233. height: 32px;
  234. line-height: 32px;
  235. margin-left: 5px;
  236. color: #fff;
  237. }
  238. </style>