index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div class="nitrogen-box">
  3. <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注氮管控系统</customHeader>
  4. <nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
  5. <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'"/>
  6. <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'"/>
  7. <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'"/>
  8. <nitrogenAlarmHistory ref="handlerHistoryTable" v-if="activeKey == 'yfj_faultRecord'"/>
  9. <BottomMenu :nav-list="navList" @change="changeActive"/>
  10. </div>
  11. </template>
  12. <script lang="ts" setup>
  13. import { ref, onMounted, onUnmounted, nextTick } from 'vue'
  14. import customHeader from '/@/components/vent/customHeader.vue';
  15. import nitrogenEcharts from './components/nitrogenEcharts.vue'
  16. import nitrogenHistory from './components/nitrogenHistory.vue'
  17. import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue'
  18. import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue'
  19. import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
  20. import { useRouter } from 'vue-router';
  21. import { navList, getMonitorComponent } from './nitrogen.data'
  22. import { getTableList, systemList, } from "./nitrogen.api";
  23. const nitrogenHome = getMonitorComponent()
  24. type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
  25. const { currentRoute } = useRouter();
  26. const activeKey = ref('nitrogen_page');
  27. const historyTable = ref()
  28. const alarmHistoryTable = ref()
  29. const handlerHistoryTable = ref()
  30. //关联设备
  31. const deviceList = ref<DeviceType[]>([])
  32. const deviceActive = ref('')
  33. const deviceType = ref('')
  34. const options = ref()
  35. const optionValue = ref('')
  36. const optionType = ref('')
  37. const modalType = ref('')
  38. const isRefresh = ref(true)
  39. function changeActive(activeValue) {
  40. activeKey.value = activeValue
  41. }
  42. function deviceChange(index) {
  43. deviceActive.value = deviceType.value = deviceList.value[index].deviceType
  44. isRefresh.value = false
  45. nextTick(() => {
  46. isRefresh.value = true
  47. })
  48. }
  49. async function getDeviceList() {
  50. const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
  51. const result = res.msgTxt;
  52. if(!result || result.length < 1) return
  53. const deviceArr = <DeviceType[]>[]
  54. result.forEach(item => {
  55. const data = item['datalist'].filter((data: any) => {
  56. const readData = data.readData;
  57. return Object.assign(data, readData);
  58. })
  59. if (item.type !== 'sys') {
  60. deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
  61. }
  62. })
  63. deviceList.value = deviceArr
  64. deviceActive.value = deviceArr[0].deviceType
  65. deviceChange(0)
  66. };
  67. async function getSysDataSource() {
  68. const res = await getTableList({ strtype: 'sys_nitrogen', pagetype: 'normal' });
  69. if (!options.value) {
  70. // 初始时选择第一条数据
  71. options.value = res.records || [];
  72. if (!optionValue.value) {
  73. getSelectRow(options.value[0]['id'])
  74. getDeviceList()
  75. }
  76. }
  77. };
  78. // 切换检测数据
  79. async function getSelectRow(deviceID) {
  80. const currentData = options.value.find((item: any) => {
  81. return item.id == deviceID
  82. })
  83. optionValue.value = deviceID
  84. changeModalType(currentData)
  85. getDeviceList()
  86. }
  87. // 获取模型类型
  88. function changeModalType(currentData) {
  89. optionType.value = currentData['strtype']
  90. if (currentData['strsystype'] === '1') {
  91. // 地上
  92. modalType.value = 'nitrogen'
  93. } else if (currentData['strsystype'] === '2') {
  94. // 地下
  95. modalType.value = 'nitrogenUnderground'
  96. }
  97. }
  98. onMounted(async () => {
  99. if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
  100. await getSysDataSource()
  101. // getSelectRow(optionValue.value)
  102. });
  103. onUnmounted(() => {
  104. });
  105. </script>
  106. <style lang="less" scoped>
  107. @ventSpace: zxm;
  108. .nitrogen-home-header {
  109. width: 100%;
  110. height: 100px;
  111. position: fixed;
  112. top: 0;
  113. background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
  114. background-size: contain;
  115. display: flex;
  116. justify-content: center;
  117. .header-icon {
  118. margin-top: 45px;
  119. }
  120. .header-text {
  121. position: fixed;
  122. top: 18px;
  123. color: #fff;
  124. font-size: 24px;
  125. }
  126. }
  127. .nitrogen-box{
  128. width: 100%;
  129. height: 100%;
  130. display: flex;
  131. justify-content: center;
  132. .bottom-btn-group {
  133. display: flex;
  134. position: fixed;
  135. width: calc(100% - 400px);
  136. height: 100px;
  137. bottom: 10px;
  138. align-items: center;
  139. justify-content: center;
  140. z-index: 2;
  141. .btn-item {
  142. width: 200px;
  143. height: 60px;
  144. margin: 10px;
  145. color: #fff;
  146. cursor: pointer;
  147. pointer-events: auto;
  148. }
  149. }
  150. &:deep(.win) {
  151. margin: 0 !important;
  152. }
  153. }
  154. </style>