|
@@ -46,28 +46,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="tabs-box bottom-tabs-box " style="height: 290px;" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
|
|
|
- <!-- <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 100}px`" > -->
|
|
|
+ <div class="tabs-box bottom-tabs-box" :class="{'table-hide': tableShow, 'table-show': !tableShow }" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
|
|
|
<div :style="`padding: 5px; height: ${scroll.y + 100}px`">
|
|
|
<div class="to-small" @click="toHome"></div>
|
|
|
+
|
|
|
<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="monitorChange(index)">{{ device.deviceName }}
|
|
|
</div>
|
|
|
+ <!-- 场景详情进入 -->
|
|
|
<div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail"
|
|
|
- @click="goDetail()">
|
|
|
+ @click.stop="goDetail()">
|
|
|
<send-outlined />
|
|
|
{{ treeNodeTitle }}详情
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-else-if="deviceType == 'forcFan'">
|
|
|
- <div class="device-button-group">
|
|
|
- <div class="enter-detail" @click="goDetail()">
|
|
|
- <send-outlined />
|
|
|
- {{ treeNodeTitle }}详情
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
<div v-if="deviceType == 'gaspatrol'">
|
|
|
<div class="device-button-group">
|
|
@@ -77,6 +71,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="table-hide-icon" @click="toHide">
|
|
|
+ <FullscreenExitOutlined />
|
|
|
+ 隐藏
|
|
|
+ </div>
|
|
|
<!-- 是人员定位表单代码,由于放在tab中,表格对已知刷新,导致表单数据也在刷寻,造成输入一半的中文时会清空输入框的内容,导致的输入不上数据 -->
|
|
|
<div v-if="deviceType.startsWith('location')" class="location-form" style="position: absolute; z-index: 9999; top: 50px;">
|
|
|
<div class="location-form-item">
|
|
@@ -123,16 +121,6 @@
|
|
|
:pagination="false"></a-table>
|
|
|
</template>
|
|
|
<template v-else-if="deviceType.startsWith('safetymonitor') && activeKey == '1'">
|
|
|
- <!-- <div class="location-form">
|
|
|
- <div class="location-form-item">
|
|
|
- <span class="location-form-label">设备类型:</span>
|
|
|
- <Select style="width: 300px;" v-model:value="safetymonitorForm.dataTypeName" placeholder="请选择设备类型" :option="safetyOption" labelField="name" valueField="code"/>
|
|
|
- </div>
|
|
|
- <div class="location-form-item">
|
|
|
- <span class="location-form-label">分站名称:</span>
|
|
|
- <Input style="width: 200px;" v-model:value="safetymonitorForm.strinstallpos" />
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
<MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
|
|
|
:dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
|
|
|
title="设备监测" :form-config="formConfig" :scroll="{ y: scroll.y - 110 }">
|
|
@@ -333,7 +321,6 @@
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
- <!-- </dv-border-box8> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<mainPath v-if="deviceType == 'majorpath'" :dataSource="majorPathEchartsData"
|
|
@@ -345,7 +332,7 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue'
|
|
|
-import { SendOutlined } from '@ant-design/icons-vue';
|
|
|
+import { SendOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
|
|
|
import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo,getExportUrl } from './device.api'
|
|
|
import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
|
|
|
import HistoryTable from '../../../comment/HistoryTable.vue';
|
|
@@ -358,7 +345,7 @@ import { SvgIcon } from '/@/components/Icon';
|
|
|
import { getActions } from '/@/qiankun/state';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import { setDivHeight } from '/@/utils/event';
|
|
|
-import { majorColumns, haveSysDetailArr, haveDetailArr, haveHandlerArr, noWarningArr, surfaceChartsColumns, noHistoryArr, getMonitorComponent, locationFormConfig, vehicleFormConfig } from './device.data'
|
|
|
+import { majorColumns, haveSysDetailArr, haveDetailArr, haveHandlerArr, noWarningArr, surfaceChartsColumns, noHistoryArr, getMonitorComponent, vehicleFormConfig } from './device.data'
|
|
|
import mainPath from './modal/mainPath.vue'
|
|
|
import { formConfig } from '../../../safetyMonitor/safety.data'
|
|
|
import { getDictItemsByCode } from '/@/utils/dict';
|
|
@@ -367,6 +354,7 @@ import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue
|
|
|
// import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
|
|
|
import { nextTick } from 'vue';
|
|
|
import { useMethods } from '/@/hooks/system/useMethods';
|
|
|
+import { useGo } from '/@/hooks/web/usePage';
|
|
|
// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
|
|
|
|
|
|
const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal } = getMonitorComponent()
|
|
@@ -379,6 +367,7 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
const { handleExportXls } = useMethods();
|
|
|
+const go = useGo()
|
|
|
const echatsOption = {
|
|
|
grid: {
|
|
|
top: '35',
|
|
@@ -419,6 +408,7 @@ const modalVisible = ref<Boolean>(false); // 模态框是否可见
|
|
|
|
|
|
// const drawerHeight = ref(240) // 监测框最小高度
|
|
|
const treeShow = ref(true) //是否显示树形菜单
|
|
|
+const tableShow = ref(true) //是否显示树形菜单
|
|
|
const locationSettingShow = ref(false) //是否显示树形菜单
|
|
|
const treeNodeTitle = ref('') // 选中的树形标题
|
|
|
|
|
@@ -453,11 +443,11 @@ const onSelect: TreeProps['onSelect'] = (keys, e) => {
|
|
|
if(deviceType.value != e.node.parent.node.type)deviceType.value = e.node.parent.node.type
|
|
|
systemID.value = e.node.type
|
|
|
// 传递工作面id信息,用于定位
|
|
|
- actions.setGlobalState({ locationObj: { pageType: deviceType.value, deviceid: systemID.value }, pageObj: null });
|
|
|
+ go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`)
|
|
|
} else {
|
|
|
systemType.value = e.node.type
|
|
|
if(deviceType.value != e.node.type)deviceType.value = e.node.type
|
|
|
- actions.setGlobalState({ locationObj: { pageType: deviceType.value }, pageObj: null });
|
|
|
+ go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`)
|
|
|
}
|
|
|
clearTimeout(timer)
|
|
|
timer = undefined
|
|
@@ -786,7 +776,15 @@ function toHome() {
|
|
|
if (timer) clearTimeout(timer)
|
|
|
timer = undefined
|
|
|
deviceType.value = ''
|
|
|
- actions.setGlobalState({ pageObj: { pageType: 'home' } });
|
|
|
+ go(`/micro-vent-3dModal/dashboard/analysis`)
|
|
|
+ // actions.setGlobalState({ pageObj: { pageType: 'home' } });
|
|
|
+}
|
|
|
+
|
|
|
+function toHide() {
|
|
|
+ tableShow.value = !tableShow.value;
|
|
|
+ if(!tableShow.value){
|
|
|
+ document.getElementById('monitorBox').style.display = 'none';
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
async function findTreeDataValue(obj) {
|
|
@@ -1246,6 +1244,7 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.location-select-hide {
|
|
|
+
|
|
|
right: -2px;
|
|
|
animation-name: locationHide;
|
|
|
/* 持续时间 */
|
|
@@ -1269,7 +1268,7 @@ onUnmounted(() => {
|
|
|
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
}
|
|
|
.tabs-box{
|
|
|
- height: 290px;
|
|
|
+ // height: 290px;
|
|
|
}
|
|
|
.bottom-tabs-box {
|
|
|
position: relative;
|
|
@@ -1281,7 +1280,7 @@ onUnmounted(() => {
|
|
|
.to-small {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
- background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
|
|
|
+ background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
|
|
|
background-size: auto;
|
|
|
position: absolute;
|
|
|
top: -65px;
|
|
@@ -1414,6 +1413,15 @@ onUnmounted(() => {
|
|
|
box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
+ .table-hide-icon{
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 10px;
|
|
|
+ z-index: 9999
|
|
|
}
|
|
|
|
|
|
.enter-detail {
|
|
@@ -1456,7 +1464,18 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.table-hide{
|
|
|
+ animation-name: tableHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
+}
|
|
|
+.table-show{
|
|
|
+ animation-name: tableShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
+}
|
|
|
.location-form{
|
|
|
display: flex;
|
|
|
margin: 8px;
|
|
@@ -1478,7 +1497,28 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+@keyframes tableShow {
|
|
|
+ 0% {
|
|
|
+ height: 0px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ height: 290px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes tableHide {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
|
|
|
+ 100% {
|
|
|
+ height: 0px ;
|
|
|
+ opacity: 0 ;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
@keyframes treeShow {
|
|
|
0% {
|