|
@@ -1,129 +1,139 @@
|
|
|
<template>
|
|
|
<div class="nitrogen-box">
|
|
|
- <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注氮管控系统</customHeader>
|
|
|
+ <customHeader
|
|
|
+ :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
|
|
|
+ :options="options"
|
|
|
+ @change="getSelectRow"
|
|
|
+ :optionValue="optionValue"
|
|
|
+ >
|
|
|
+ 智能注氮管控系统
|
|
|
+ </customHeader>
|
|
|
<nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
|
|
|
- <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'"/>
|
|
|
- <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'"/>
|
|
|
- <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'"/>
|
|
|
- <nitrogenAlarmHistory ref="handlerHistoryTable" v-if="activeKey == 'yfj_faultRecord'"/>
|
|
|
- <BottomMenu :nav-list="navList" @change="changeActive"/>
|
|
|
+ <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'" />
|
|
|
+ <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'" />
|
|
|
+ <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'" />
|
|
|
+ <nitrogenAlarmHistory ref="handlerHistoryTable" v-if="activeKey == 'yfj_faultRecord'" />
|
|
|
+ <BottomMenu :nav-list="navList" @change="changeActive" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
|
|
-import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
-import nitrogenEcharts from './components/nitrogenEcharts.vue'
|
|
|
-import nitrogenHistory from './components/nitrogenHistory.vue'
|
|
|
-import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue'
|
|
|
-import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue'
|
|
|
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import { navList, getMonitorComponent } from './nitrogen.data'
|
|
|
-import { getTableList, systemList, } from "./nitrogen.api";
|
|
|
-
|
|
|
-const nitrogenHome = getMonitorComponent()
|
|
|
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
|
|
|
-
|
|
|
-const { currentRoute } = useRouter();
|
|
|
-const activeKey = ref('nitrogen_page');
|
|
|
-
|
|
|
-const historyTable = ref()
|
|
|
-const alarmHistoryTable = ref()
|
|
|
-const handlerHistoryTable = ref()
|
|
|
-
|
|
|
-//关联设备
|
|
|
-const deviceList = ref<DeviceType[]>([])
|
|
|
-const deviceActive = ref('')
|
|
|
-const deviceType = ref('')
|
|
|
-
|
|
|
-const options = ref()
|
|
|
-const optionValue = ref('')
|
|
|
-const optionType = ref('')
|
|
|
-const modalType = ref('')
|
|
|
-const isRefresh = ref(true)
|
|
|
-
|
|
|
-function changeActive(activeValue) {
|
|
|
- activeKey.value = activeValue
|
|
|
-}
|
|
|
-
|
|
|
-function deviceChange(index) {
|
|
|
- deviceActive.value = deviceType.value = deviceList.value[index].deviceType
|
|
|
- isRefresh.value = false
|
|
|
- nextTick(() => {
|
|
|
- isRefresh.value = true
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-async function getDeviceList() {
|
|
|
- const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
|
|
|
- const result = res.msgTxt;
|
|
|
- if(!result || result.length < 1) return
|
|
|
- const deviceArr = <DeviceType[]>[]
|
|
|
- result.forEach(item => {
|
|
|
- const data = item['datalist'].filter((data: any) => {
|
|
|
- const readData = data.readData;
|
|
|
- return Object.assign(data, readData);
|
|
|
- })
|
|
|
- if (item.type !== 'sys') {
|
|
|
- deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
|
|
|
- }
|
|
|
- })
|
|
|
- deviceList.value = deviceArr
|
|
|
- deviceActive.value = deviceArr[0].deviceType
|
|
|
- deviceChange(0)
|
|
|
-};
|
|
|
-
|
|
|
-async function getSysDataSource() {
|
|
|
- const res = await getTableList({ strtype: 'sys_nitrogen', pagetype: 'normal' });
|
|
|
- if (!options.value) {
|
|
|
- // 初始时选择第一条数据
|
|
|
- options.value = res.records || [];
|
|
|
- if (!optionValue.value) {
|
|
|
- getSelectRow(options.value[0]['id'])
|
|
|
- getDeviceList()
|
|
|
- }
|
|
|
+ import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
|
+ import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import nitrogenEcharts from './components/nitrogenEcharts.vue';
|
|
|
+ import nitrogenHistory from './components/nitrogenHistory.vue';
|
|
|
+ import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue';
|
|
|
+ import nitrogenAlarmHistory from './components/nitrogenAlarmHistory.vue';
|
|
|
+ import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+ import { navList, getMonitorComponent } from './nitrogen.data';
|
|
|
+ import { getTableList, systemList } from './nitrogen.api';
|
|
|
+
|
|
|
+ const nitrogenHome = getMonitorComponent();
|
|
|
+ type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
|
|
|
+
|
|
|
+ const { currentRoute } = useRouter();
|
|
|
+ const activeKey = ref('nitrogen_page');
|
|
|
+
|
|
|
+ const historyTable = ref();
|
|
|
+ const alarmHistoryTable = ref();
|
|
|
+ const handlerHistoryTable = ref();
|
|
|
+
|
|
|
+ //关联设备
|
|
|
+ const deviceList = ref<DeviceType[]>([]);
|
|
|
+ const deviceActive = ref('');
|
|
|
+ const deviceType = ref('');
|
|
|
+
|
|
|
+ const options = ref();
|
|
|
+ const optionValue = ref('');
|
|
|
+ const optionType = ref('');
|
|
|
+ const modalType = ref('');
|
|
|
+ const isRefresh = ref(true);
|
|
|
+
|
|
|
+ function changeActive(activeValue) {
|
|
|
+ activeKey.value = activeValue;
|
|
|
+ }
|
|
|
+
|
|
|
+ function deviceChange(index) {
|
|
|
+ deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
|
|
|
+ isRefresh.value = false;
|
|
|
+ nextTick(() => {
|
|
|
+ isRefresh.value = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ async function getDeviceList() {
|
|
|
+ const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
|
|
|
+ const result = res.msgTxt;
|
|
|
+ if (!result || result.length < 1) return;
|
|
|
+ const deviceArr = <DeviceType[]>[];
|
|
|
+ result.forEach((item) => {
|
|
|
+ const data = item['datalist'].filter((data: any) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
+ if (item.type !== 'sys') {
|
|
|
+ deviceArr.unshift({
|
|
|
+ deviceType: item.type,
|
|
|
+ deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
|
|
|
+ datalist: data,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ deviceList.value = deviceArr;
|
|
|
+ deviceActive.value = deviceArr[0].deviceType;
|
|
|
+ deviceChange(0);
|
|
|
}
|
|
|
-};
|
|
|
-
|
|
|
-// 切换检测数据
|
|
|
-async function getSelectRow(deviceID) {
|
|
|
-
|
|
|
- const currentData = options.value.find((item: any) => {
|
|
|
- return item.id == deviceID
|
|
|
- })
|
|
|
- optionValue.value = deviceID
|
|
|
- changeModalType(currentData)
|
|
|
- getDeviceList()
|
|
|
-}
|
|
|
-
|
|
|
-// 获取模型类型
|
|
|
-function changeModalType(currentData) {
|
|
|
- optionType.value = currentData['strtype']
|
|
|
- if (currentData['strsystype'] === '1') {
|
|
|
- // 地上
|
|
|
- modalType.value = 'nitrogenUnderground'
|
|
|
- } else if (currentData['strsystype'] === '2') {
|
|
|
- // 地下
|
|
|
- modalType.value = 'nitrogenUnderground'
|
|
|
+
|
|
|
+ async function getSysDataSource() {
|
|
|
+ const res = await getTableList({ strtype: 'sys_nitrogen', pagetype: 'normal' });
|
|
|
+ if (!options.value) {
|
|
|
+ // 初始时选择第一条数据
|
|
|
+ options.value = res.records || [];
|
|
|
+ if (!optionValue.value) {
|
|
|
+ getSelectRow(options.value[0]['id']);
|
|
|
+ getDeviceList();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
- if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
|
|
|
- await getSysDataSource()
|
|
|
- // getSelectRow(optionValue.value)
|
|
|
-});
|
|
|
+ // 切换检测数据
|
|
|
+ async function getSelectRow(deviceID) {
|
|
|
+ const currentData = options.value.find((item: any) => {
|
|
|
+ return item.id == deviceID;
|
|
|
+ });
|
|
|
+ optionValue.value = deviceID;
|
|
|
+ changeModalType(currentData);
|
|
|
+ getDeviceList();
|
|
|
+ }
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
+ // 获取模型类型
|
|
|
+ function changeModalType(currentData) {
|
|
|
+ optionType.value = currentData['strtype'];
|
|
|
+ if (currentData['strsystype'] === '1') {
|
|
|
+ // 地上
|
|
|
+ modalType.value = 'nitrogenUnderground';
|
|
|
+ } else if (currentData['strsystype'] === '2') {
|
|
|
+ // 地下
|
|
|
+ modalType.value = 'nitrogenUnderground';
|
|
|
+ } else {
|
|
|
+ // 默认是地下的注氮
|
|
|
+ modalType.value = 'nitrogenUnderground';
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-});
|
|
|
+ onMounted(async () => {
|
|
|
+ if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
|
|
|
+ await getSysDataSource();
|
|
|
+ // getSelectRow(optionValue.value)
|
|
|
+ });
|
|
|
|
|
|
+ onUnmounted(() => {});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import '/@/design/vent/modal.less';
|
|
|
-@ventSpace: zxm;
|
|
|
-.nitrogen-home-header {
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
+ @ventSpace: zxm;
|
|
|
+ .nitrogen-home-header {
|
|
|
width: 100%;
|
|
|
height: 100px;
|
|
|
position: fixed;
|
|
@@ -144,33 +154,31 @@ onUnmounted(() => {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
-.nitrogen-box{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- .bottom-btn-group {
|
|
|
+ .nitrogen-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- position: fixed;
|
|
|
- width: calc(100% - 400px);
|
|
|
- height: 100px;
|
|
|
- bottom: 10px;
|
|
|
- align-items: center;
|
|
|
justify-content: center;
|
|
|
- z-index: 2;
|
|
|
- .btn-item {
|
|
|
- width: 200px;
|
|
|
- height: 60px;
|
|
|
- margin: 10px;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- pointer-events: auto;
|
|
|
+ .bottom-btn-group {
|
|
|
+ display: flex;
|
|
|
+ position: fixed;
|
|
|
+ width: calc(100% - 400px);
|
|
|
+ height: 100px;
|
|
|
+ bottom: 10px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 2;
|
|
|
+ .btn-item {
|
|
|
+ width: 200px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 10px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:deep(.win) {
|
|
|
+ margin: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
- &:deep(.win) {
|
|
|
- margin: 0 !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
</style>
|