|
|
@@ -1,252 +1,285 @@
|
|
|
<template>
|
|
|
- <div class="bg"
|
|
|
- style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
|
|
|
+ <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
|
|
|
<a-spin :spinning="loading" />
|
|
|
- <div id="gas3DCSS" v-show="activeKey == 'monitor' && !loading && currentDeviceType == 'pump_under'" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
|
|
|
+ <div
|
|
|
+ id="gas3DCSS"
|
|
|
+ v-show="activeKey == 'monitor' && !loading && currentDeviceType == 'pump_under'"
|
|
|
+ style="width: 100%; height: 100%; top: 0; left: 0; position: absolute; overflow: hidden"
|
|
|
+ >
|
|
|
</div>
|
|
|
<div id="gasPump3D" v-show="activeKey == 'monitor'" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
|
|
|
-
|
|
|
</div>
|
|
|
<div class="scene-box">
|
|
|
- <customHeader :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">瓦斯抽采泵站监测与管控</customHeader>
|
|
|
+ <customHeader
|
|
|
+ :fieldNames="{ label: 'strinstallpos', value: 'deviceID', options: 'children' }"
|
|
|
+ :options="options"
|
|
|
+ @change="getSelectRow"
|
|
|
+ :optionValue="optionValue"
|
|
|
+ >瓦斯抽采泵站监测与管控</customHeader
|
|
|
+ >
|
|
|
<div class="center-container">
|
|
|
- <gasPumpHome v-if="activeKey == 'monitor'" :deviceId = 'optionValue' :device-type="currentDeviceType" />
|
|
|
+ <gasPumpHome v-if="activeKey == 'monitor'" :deviceId="optionValue" :device-type="currentDeviceType" />
|
|
|
<div v-else class="history-group">
|
|
|
<div class="device-button-group" v-if="deviceList.length > 0">
|
|
|
- <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="deviceChange(index)">{{ device.deviceName }}</div>
|
|
|
+ <div
|
|
|
+ class="device-button"
|
|
|
+ :class="{ 'device-active': deviceActive == device.deviceType }"
|
|
|
+ v-for="(device, index) in deviceList"
|
|
|
+ :key="index"
|
|
|
+ @click="deviceChange(index)"
|
|
|
+ >{{ device.deviceName }}</div
|
|
|
+ >
|
|
|
</div>
|
|
|
- <gasPumpHistory v-if="activeKey == 'monitor_history'" ref="historyTable" class="vent-margin-t-20" :device-type="currentDeviceType" :device-id="optionValue"/>
|
|
|
- <gasPumpHandleHistoryVue v-if="activeKey == 'handler_history'" ref="alarmHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="currentDeviceType" />
|
|
|
- <gasPumpAlarmHistory v-if="activeKey == 'faultRecord'" ref="handlerHistoryTable" class="vent-margin-t-20" :deviceId = 'optionValue' :device-type="currentDeviceType"/>
|
|
|
- </div>
|
|
|
+ <gasPumpHistory
|
|
|
+ v-if="activeKey == 'monitor_history'"
|
|
|
+ ref="historyTable"
|
|
|
+ class="vent-margin-t-20"
|
|
|
+ :device-type="currentDeviceType"
|
|
|
+ :device-id="optionValue"
|
|
|
+ />
|
|
|
+ <gasPumpHandleHistoryVue
|
|
|
+ v-if="activeKey == 'handler_history'"
|
|
|
+ ref="alarmHistoryTable"
|
|
|
+ class="vent-margin-t-20"
|
|
|
+ :deviceId="optionValue"
|
|
|
+ :device-type="currentDeviceType"
|
|
|
+ />
|
|
|
+ <gasPumpAlarmHistory
|
|
|
+ v-if="activeKey == 'faultRecord'"
|
|
|
+ ref="handlerHistoryTable"
|
|
|
+ class="vent-margin-t-20"
|
|
|
+ :deviceId="optionValue"
|
|
|
+ :device-type="currentDeviceType"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <BottomMenu @change="changeActive"/>
|
|
|
+ <BottomMenu @change="changeActive" />
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
|
|
|
-import { list } from './gasPump.api';
|
|
|
-import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
|
|
|
-import {getComponent} from './gasPump.data'
|
|
|
-import gasPumpHistory from './components/gasPumpHistory.vue';
|
|
|
-import gasPumpHandleHistoryVue from './components/gasPumpHandleHistory.vue';
|
|
|
-import gasPumpAlarmHistory from './components/gasPumpAlarmHistory.vue';
|
|
|
-import { mountedThree, destroy, setModelType } from './gasPump.threejs';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-
|
|
|
-type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
|
|
|
-const gasPumpHome = getComponent()
|
|
|
-const { currentRoute } = useRouter();
|
|
|
-const activeKey = ref('monitor');
|
|
|
-const loading = ref(false);
|
|
|
-
|
|
|
-const historyTable = ref()
|
|
|
-const alarmHistoryTable = ref()
|
|
|
-const handlerHistoryTable = ref()
|
|
|
-
|
|
|
-
|
|
|
-//关联设备
|
|
|
-const deviceList = ref<DeviceType[]>([])
|
|
|
-const deviceActive = ref('')
|
|
|
-const deviceType = ref('')
|
|
|
-
|
|
|
-const options = ref()
|
|
|
-// 默认初始是第一行
|
|
|
-const selectRowIndex = ref(0);
|
|
|
-const dataSource = ref([])
|
|
|
-
|
|
|
-const optionValue = ref('')
|
|
|
-const currentDeviceType = ref('')
|
|
|
-
|
|
|
-// 监测数据
|
|
|
-const selectData = reactive({
|
|
|
- FlowSensor_InputFlux: 0
|
|
|
-});
|
|
|
-
|
|
|
-function changeActive(activeValue) {
|
|
|
- if(activeKey.value == 'monitor'){
|
|
|
- if (currentDeviceType.value == 'pump_over') {
|
|
|
- setModelType('gasPump')
|
|
|
- } else if (currentDeviceType.value == 'pump_under') {
|
|
|
- setModelType('gasPumpUnder')
|
|
|
+ import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
|
|
|
+ import { list } from './gasPump.api';
|
|
|
+ import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
|
|
|
+ import { getComponent } from './gasPump.data';
|
|
|
+ import gasPumpHistory from './components/gasPumpHistory.vue';
|
|
|
+ import gasPumpHandleHistoryVue from './components/gasPumpHandleHistory.vue';
|
|
|
+ import gasPumpAlarmHistory from './components/gasPumpAlarmHistory.vue';
|
|
|
+ import { mountedThree, destroy, setModelType } from './gasPump.threejs';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+
|
|
|
+ type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
|
|
|
+ const gasPumpHome = getComponent();
|
|
|
+ const { currentRoute } = useRouter();
|
|
|
+ const activeKey = ref('monitor');
|
|
|
+ const loading = ref(false);
|
|
|
+
|
|
|
+ const historyTable = ref();
|
|
|
+ const alarmHistoryTable = ref();
|
|
|
+ const handlerHistoryTable = ref();
|
|
|
+
|
|
|
+ //关联设备
|
|
|
+ const deviceList = ref<DeviceType[]>([]);
|
|
|
+ const deviceActive = ref('');
|
|
|
+ const deviceType = ref('');
|
|
|
+
|
|
|
+ const options = ref();
|
|
|
+ // 默认初始是第一行
|
|
|
+ const selectRowIndex = ref(0);
|
|
|
+ const dataSource = ref([]);
|
|
|
+
|
|
|
+ const optionValue = ref('');
|
|
|
+ const currentDeviceType = ref('');
|
|
|
+
|
|
|
+ // 监测数据
|
|
|
+ const selectData = reactive({
|
|
|
+ FlowSensor_InputFlux: 0,
|
|
|
+ });
|
|
|
+
|
|
|
+ function changeActive(activeValue) {
|
|
|
+ if (activeKey.value == 'monitor') {
|
|
|
+ if (currentDeviceType.value == 'pump_over') {
|
|
|
+ setModelType('gasPump');
|
|
|
+ } else if (currentDeviceType.value == 'pump_under') {
|
|
|
+ setModelType('gasPumpUnder');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ activeKey.value = activeValue;
|
|
|
+ }
|
|
|
+
|
|
|
+ function deviceChange(index) {
|
|
|
+ if (deviceList.value.length > 0) {
|
|
|
+ deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
|
|
|
}
|
|
|
}
|
|
|
- activeKey.value = activeValue
|
|
|
-}
|
|
|
|
|
|
-function deviceChange(index) {
|
|
|
- if(deviceList.value.length > 0){
|
|
|
- deviceActive.value = deviceType.value = deviceList.value[index].deviceType
|
|
|
-
|
|
|
+ // 查询关联设备列表
|
|
|
+ async function getDeviceList() {
|
|
|
+ const res = await list({ devicetype: 'sys', systemID: optionValue.value });
|
|
|
+ const result = res.msgTxt;
|
|
|
+ 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;
|
|
|
+ if (deviceArr[0]) deviceActive.value = deviceArr[0].deviceType;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-// 查询关联设备列表
|
|
|
-async function getDeviceList() {
|
|
|
- const res = await list({ devicetype: 'sys', systemID: optionValue.value });
|
|
|
- const result = res.msgTxt;
|
|
|
- const deviceArr = <DeviceType[]>[]
|
|
|
- result.forEach(item => {
|
|
|
- const data = item['datalist'].filter((data: any) => {
|
|
|
+
|
|
|
+ async function getSysDataSource() {
|
|
|
+ const res = await list({ devicetype: 'pump', pagetype: 'normal' });
|
|
|
+ dataSource.value = res.msgTxt[0].datalist || [];
|
|
|
+ dataSource.value.forEach((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
|
|
|
- if(deviceArr[0])deviceActive.value = deviceArr[0].deviceType
|
|
|
-};
|
|
|
-
|
|
|
-async function getSysDataSource () {
|
|
|
- const res = await list({ devicetype: 'pump', pagetype: 'normal' });
|
|
|
- dataSource.value = res.msgTxt[0].datalist || [];
|
|
|
- dataSource.value.forEach((data: any) => {
|
|
|
- const readData = data.readData;
|
|
|
- data = Object.assign(data, readData);
|
|
|
- });
|
|
|
-
|
|
|
- if(!options.value) {
|
|
|
- // 初始时选择第一条数据
|
|
|
- options.value = dataSource.value
|
|
|
- if(!optionValue.value){
|
|
|
- optionValue.value = dataSource.value[0]['deviceID']
|
|
|
- Object.assign(selectData, dataSource.value[0])
|
|
|
- getSelectRow(optionValue.value)
|
|
|
- }else{
|
|
|
- const currentData = dataSource.value.find(item => item['deviceID'] === optionValue.value) || {}
|
|
|
- Object.assign(selectData, currentData)
|
|
|
+ data = Object.assign(data, readData);
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!options.value) {
|
|
|
+ // 初始时选择第一条数据
|
|
|
+ options.value = dataSource.value;
|
|
|
+ if (!optionValue.value) {
|
|
|
+ optionValue.value = dataSource.value[0]['deviceID'];
|
|
|
+ Object.assign(selectData, dataSource.value[0]);
|
|
|
+ getSelectRow(optionValue.value);
|
|
|
+ } else {
|
|
|
+ const currentData = dataSource.value.find((item) => item['deviceID'] === optionValue.value) || {};
|
|
|
+ Object.assign(selectData, currentData);
|
|
|
+ }
|
|
|
}
|
|
|
+ const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
|
|
|
+ return data;
|
|
|
}
|
|
|
- const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
|
|
|
- return data;
|
|
|
-};
|
|
|
-
|
|
|
-// 切换检测数据
|
|
|
-function getSelectRow(deviceID){
|
|
|
- const currentData = dataSource.value.find((item: any) => {
|
|
|
- return item.deviceID == deviceID
|
|
|
- })
|
|
|
- if(currentData){
|
|
|
- optionValue.value = currentData['deviceID']
|
|
|
- currentDeviceType.value = currentData['deviceType']
|
|
|
- Object.assign(selectData, currentData)
|
|
|
- if (currentDeviceType.value == 'pump_over') {
|
|
|
- setModelType('gasPump')
|
|
|
- } else if (currentDeviceType.value == 'pump_under') {
|
|
|
- setModelType('gasPumpUnder')
|
|
|
+
|
|
|
+ // 切换检测数据
|
|
|
+ function getSelectRow(deviceID) {
|
|
|
+ const currentData = dataSource.value.find((item: any) => {
|
|
|
+ return item.deviceID == deviceID;
|
|
|
+ });
|
|
|
+ if (currentData) {
|
|
|
+ optionValue.value = currentData['deviceID'];
|
|
|
+ currentDeviceType.value = currentData['deviceType'];
|
|
|
+ Object.assign(selectData, currentData);
|
|
|
+ if (currentDeviceType.value == 'pump_over') {
|
|
|
+ setModelType('gasPump');
|
|
|
+ } else if (currentDeviceType.value == 'pump_under') {
|
|
|
+ setModelType('gasPumpUnder');
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(async() => {
|
|
|
- if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id']
|
|
|
- mountedThree().then(async () => {
|
|
|
- await getSysDataSource()
|
|
|
- await getDeviceList()
|
|
|
- getSelectRow(optionValue.value)
|
|
|
- });
|
|
|
|
|
|
-});
|
|
|
+ onMounted(async () => {
|
|
|
+ if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
|
|
|
+ mountedThree().then(async () => {
|
|
|
+ await getSysDataSource();
|
|
|
+ await getDeviceList();
|
|
|
+ getSelectRow(optionValue.value);
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
- destroy();
|
|
|
-});
|
|
|
+ onUnmounted(() => {
|
|
|
+ destroy();
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@import '/@/design/vent/modal.less';
|
|
|
-@ventSpace: zxm;
|
|
|
-.scene-box{
|
|
|
- pointer-events: none;
|
|
|
- .history-group{
|
|
|
- padding: 0 20px;
|
|
|
- .history-container{
|
|
|
- position: relative;
|
|
|
- background: #6195af1a;
|
|
|
- width: calc(100% + 10px);
|
|
|
- top: 0px;
|
|
|
- left: -10px;
|
|
|
- border: 1px solid #00fffd22;
|
|
|
- padding: 10px 0;
|
|
|
- box-shadow: 0 0 20px #44b4ff33 inset;
|
|
|
- }
|
|
|
- }
|
|
|
- .device-button-group{
|
|
|
- // margin: 0 20px;
|
|
|
- display: flex;
|
|
|
- pointer-events: auto;
|
|
|
- position: relative;
|
|
|
- margin-top: 90px;
|
|
|
- &::after{
|
|
|
- position:absolute;
|
|
|
- content: '';
|
|
|
- width: calc(100% + 10px);
|
|
|
- height: 2px;
|
|
|
- top: 30px;
|
|
|
- left: -10px;
|
|
|
- border-bottom: 1px solid #0efcff;
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
+ @ventSpace: zxm;
|
|
|
+ .scene-box {
|
|
|
+ pointer-events: none;
|
|
|
+ .history-group {
|
|
|
+ padding: 0 20px;
|
|
|
+ .history-container {
|
|
|
+ position: relative;
|
|
|
+ background: #6195af1a;
|
|
|
+ width: calc(100% + 10px);
|
|
|
+ top: 0px;
|
|
|
+ left: -10px;
|
|
|
+ border: 1px solid #00fffd22;
|
|
|
+ padding: 10px 0;
|
|
|
+ box-shadow: 0 0 20px #44b4ff33 inset;
|
|
|
+ }
|
|
|
}
|
|
|
- .device-button{
|
|
|
- padding: 4px 15px;
|
|
|
- position: relative;
|
|
|
+ .device-button-group {
|
|
|
+ // margin: 0 20px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- margin: 0 3px;
|
|
|
-
|
|
|
- &::before{
|
|
|
- content: '';
|
|
|
+ pointer-events: auto;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 90px;
|
|
|
+ &::after {
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- border: 1px solid #6176AF;
|
|
|
- transform: skewX(-38deg);
|
|
|
- background-color: rgba(0, 77, 103,85%);
|
|
|
- z-index: -1;
|
|
|
+ content: '';
|
|
|
+ width: calc(100% + 10px);
|
|
|
+ height: 2px;
|
|
|
+ top: 30px;
|
|
|
+ left: -10px;
|
|
|
+ border-bottom: 1px solid #0efcff;
|
|
|
}
|
|
|
- }
|
|
|
- .device-active{
|
|
|
- // color: #0efcff;
|
|
|
- &::before{
|
|
|
- border-color: #0efcff;
|
|
|
- box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
+ .device-button {
|
|
|
+ padding: 4px 15px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 3px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border: 1px solid #6176af;
|
|
|
+ transform: skewX(-38deg);
|
|
|
+ background-color: rgba(0, 77, 103, 85%);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device-active {
|
|
|
+ // color: #0efcff;
|
|
|
+ &::before {
|
|
|
+ border-color: #0efcff;
|
|
|
+ box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.center-container{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 100px);
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
- overflow: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.input-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-left: 10px;
|
|
|
-
|
|
|
- .input-title {
|
|
|
- color: #73e8fe;
|
|
|
- width: auto;
|
|
|
+ .center-container {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
}
|
|
|
|
|
|
- .@{ventSpace}-input-number {
|
|
|
- border-color: #ffffff88 !important;
|
|
|
+ :deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
+ .input-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 10px;
|
|
|
+
|
|
|
+ .input-title {
|
|
|
+ color: #73e8fe;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-input-number {
|
|
|
+ border-color: #ffffff88 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
</style>
|
