|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="scene-box" v-if="routerParam !== 'home'">
|
|
|
- <!-- <div class="scene-box"> -->
|
|
|
+ <!-- <div class="scene-box"> -->
|
|
|
<div class="device-header">智能通风管控系统</div>
|
|
|
<div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow, }">
|
|
|
<SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" @click="showTree(true)" />
|
|
|
@@ -9,646 +9,696 @@
|
|
|
<div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow, }">
|
|
|
<SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree(false)" />
|
|
|
<div class="device-select-box">
|
|
|
- <a-tree
|
|
|
- :show-line="true"
|
|
|
- :tree-data="treeData"
|
|
|
- v-model:selectedKeys="selectedKeys"
|
|
|
- v-model:expandedKeys="expandedKeys"
|
|
|
- @select="onSelect"
|
|
|
- >
|
|
|
+ <a-tree :show-line="true" :tree-data="treeData" v-model:selectedKeys="selectedKeys"
|
|
|
+ v-model:expandedKeys="expandedKeys" @select="onSelect">
|
|
|
</a-tree>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="bottom-tabs-box" @mousedown="setDivHeight" id="monitorBox">
|
|
|
<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 class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
|
|
|
+ v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}</div>
|
|
|
<div class="enter-detail" @click="goDetail()">
|
|
|
<send-outlined />
|
|
|
{{ treeNodeTitle }}详情
|
|
|
</div>
|
|
|
</div>
|
|
|
- <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" >
|
|
|
+ <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
|
|
|
<a-tab-pane key="1" tab="实时监测">
|
|
|
<template v-if="deviceType == 'fan' && activeKey == '1'">
|
|
|
<GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
|
|
|
</template>
|
|
|
- <template v-else-if = "activeKey == '1'">
|
|
|
- <MonitorTable
|
|
|
- ref="monitorTable"
|
|
|
- :columnsType="`${deviceType}_monitor`"
|
|
|
- :dataSource="dataSource"
|
|
|
- design-scope="device_monitor"
|
|
|
- :isShowPagination = "false"
|
|
|
- :isShowActionColumn="true"
|
|
|
- title="设备监测"
|
|
|
- >
|
|
|
- <template #action="{ record }">
|
|
|
- <TableAction
|
|
|
- :actions="[
|
|
|
- {
|
|
|
- label: '详情',
|
|
|
- onClick: goDetail.bind(null, record),
|
|
|
- },
|
|
|
- {
|
|
|
- label: '定位',
|
|
|
- onClick: goLocation.bind(null, record),
|
|
|
- },
|
|
|
- ]"
|
|
|
- />
|
|
|
- </template>
|
|
|
+ <template v-else-if="activeKey == '1'">
|
|
|
+ <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :dataSource="dataSource"
|
|
|
+ design-scope="device_monitor" :isShowPagination="false" :isShowActionColumn="true" title="设备监测">
|
|
|
+ <template #action="{ record }">
|
|
|
+ <TableAction :actions="[
|
|
|
+ {
|
|
|
+ label: '详情',
|
|
|
+ onClick: goDetail.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '定位',
|
|
|
+ onClick: goLocation.bind(null, record),
|
|
|
+ },
|
|
|
+ ]" />
|
|
|
+ </template>
|
|
|
</MonitorTable>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="2" tab="历史数据">
|
|
|
<div class="tab-item">
|
|
|
- <HistoryTable ref="historyTable" v-if="activeKey == '2'" :sysId="systemID" :columns-type="`${deviceType}`" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { strtype : deviceType, sysId: systemID })" designScope="device-history" />
|
|
|
+ <HistoryTable ref="historyTable" v-if="activeKey == '2'" :sysId="systemID" :columns-type="`${deviceType}`"
|
|
|
+ :device-type="deviceType"
|
|
|
+ :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })"
|
|
|
+ designScope="device-history" />
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="3" tab="报警历史">
|
|
|
<div class="tab-item">
|
|
|
- <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })" designScope="alarm-history" />
|
|
|
+ <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm"
|
|
|
+ :device-type="deviceType"
|
|
|
+ :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })"
|
|
|
+ designScope="alarm-history" />
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="4" tab="操作历史">
|
|
|
<div class="tab-item">
|
|
|
- <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID" columns-type="operatorhistory" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })" designScope="operator-history" />
|
|
|
- </div>
|
|
|
+ <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
|
|
|
+ columns-type="operatorhistory" :device-type="deviceType"
|
|
|
+ :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })"
|
|
|
+ designScope="operator-history" />
|
|
|
+ </div>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</div>
|
|
|
- <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
|
|
|
+ <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource"
|
|
|
+ :activeID="activeID" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
- import {ref, onMounted, onUnmounted, ComponentOptions, shallowRef } from 'vue'
|
|
|
- import { SendOutlined } from '@ant-design/icons-vue';
|
|
|
- import { list, getDeviceList, getDeviceTypeList } from './device.api'
|
|
|
- import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
|
|
|
- import HistoryTable from '../comment/HistoryTable.vue';
|
|
|
- import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
|
|
|
- import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
- import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
|
|
|
- import { TreeProps, message } from 'ant-design-vue';
|
|
|
- import { TableAction } from '/@/components/Table';
|
|
|
- import FiberModal from './modal/fiber.modal.vue';
|
|
|
- import DustModal from './modal/dust.modal.vue'
|
|
|
- import { SvgIcon } from '/@/components/Icon';
|
|
|
- import { getActions } from '/@/qiankun/state';
|
|
|
- import { useRouter } from 'vue-router';
|
|
|
-
|
|
|
+import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, nextTick } from 'vue'
|
|
|
+import { SendOutlined } from '@ant-design/icons-vue';
|
|
|
+import { list, getDeviceList, getDeviceTypeList } from './device.api'
|
|
|
+import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
|
|
|
+import HistoryTable from '../comment/HistoryTable.vue';
|
|
|
+import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
|
|
|
+import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
+import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
|
|
|
+import { TreeProps, message } from 'ant-design-vue';
|
|
|
+import { TableAction } from '/@/components/Table';
|
|
|
+import FiberModal from './modal/fiber.modal.vue';
|
|
|
+import DustModal from './modal/dust.modal.vue'
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+import { getActions } from '/@/qiankun/state';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
|
|
|
- type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
|
|
|
|
|
|
- const router = useRouter()
|
|
|
+type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };
|
|
|
|
|
|
- const actions = getActions();
|
|
|
- actions.setGlobalState({ pageObj: { pageType: 'home' } });
|
|
|
+const router = useRouter()
|
|
|
|
|
|
- const monitorTable = ref()
|
|
|
- const historyTable = ref()
|
|
|
- const alarmHistoryTable = ref()
|
|
|
- const handlerHistoryTable = ref()
|
|
|
-
|
|
|
- const routerParam = ref('home') // 默认进来时首页
|
|
|
- // 模态框
|
|
|
- const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
|
|
|
- const modalVisible = ref<Boolean>(false); // 模态框是否可见
|
|
|
-
|
|
|
- //
|
|
|
- const drawerHeight = ref(240) // 监测框最小高度
|
|
|
- const treeShow = ref(true) //是否显示树形菜单
|
|
|
- const treeNodeTitle = ref('') // 选中的树形标题
|
|
|
-
|
|
|
- const deviceList = ref<DeviceType[]>([])
|
|
|
- const deviceActive = ref('')
|
|
|
- const activeKey = ref('1'); // tab key
|
|
|
- const dataSource = shallowRef([]) // 实时监测数据
|
|
|
- const activeID = ref('') // 打开详情modal时监测的设备id
|
|
|
- const deviceType = ref('') // 监测设备类型
|
|
|
- const systemType = ref('')
|
|
|
- const systemID = ref('') // 系统监测时，系统id
|
|
|
- const selectedKeys = ref<string[]>([]);
|
|
|
- const expandedKeys = ref<string[]>([]);
|
|
|
- const scroll = ref({
|
|
|
- y: drawerHeight.value - 100
|
|
|
- })
|
|
|
- const treeData = ref<TreeProps['treeData']>([]);
|
|
|
-
|
|
|
- //树形菜单选择事件
|
|
|
- const onSelect: TreeProps['onSelect'] = async(keys, e) => {
|
|
|
- deviceType.value = ''
|
|
|
- systemID.value = ''
|
|
|
- deviceList.value = []
|
|
|
- if(e.node.parent && (e.node.parent.node.type.toString()).startsWith('sys')){
|
|
|
- systemType.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 });
|
|
|
- }else{
|
|
|
- systemType.value = e.node.type
|
|
|
- deviceType.value = e.node.type
|
|
|
- }
|
|
|
- selectedKeys.values = keys
|
|
|
- treeNodeTitle.value = e.node.title
|
|
|
+const actions = getActions();
|
|
|
+actions.setGlobalState({ pageObj: { pageType: 'home' } });
|
|
|
|
|
|
- if (timer) clearInterval(timer);
|
|
|
- await getDataSource()
|
|
|
- getMonitor()
|
|
|
- };
|
|
|
-
|
|
|
- function tabChange(activeKeyVal) {
|
|
|
- activeKey.value = activeKeyVal;
|
|
|
- };
|
|
|
+const monitorTable = ref()
|
|
|
+const historyTable = ref()
|
|
|
+const alarmHistoryTable = ref()
|
|
|
+const handlerHistoryTable = ref()
|
|
|
+
|
|
|
+const routerParam = ref('home') // 默认进来时首页
|
|
|
+// 模态框
|
|
|
+const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
|
|
|
+const modalVisible = ref<Boolean>(false); // 模态框是否可见
|
|
|
+
|
|
|
+//
|
|
|
+const drawerHeight = ref(240) // 监测框最小高度
|
|
|
+const treeShow = ref(true) //是否显示树形菜单
|
|
|
+const treeNodeTitle = ref('') // 选中的树形标题
|
|
|
+
|
|
|
+const deviceList = ref<DeviceType[]>([])
|
|
|
+const deviceActive = ref('')
|
|
|
+const activeKey = ref('1'); // tab key
|
|
|
+const dataSource = shallowRef([]) // 实时监测数据
|
|
|
+const activeID = ref('') // 打开详情modal时监测的设备id
|
|
|
+const deviceType = ref('') // 监测设备类型
|
|
|
+const systemType = ref('')
|
|
|
+const systemID = ref('') // 系统监测时，系统id
|
|
|
+const selectedKeys = ref<string[]>([]);
|
|
|
+const expandedKeys = ref<string[]>([]);
|
|
|
+const scroll = ref({
|
|
|
+ y: drawerHeight.value - 100
|
|
|
+})
|
|
|
+const treeData = ref<TreeProps['treeData']>([]);
|
|
|
|
|
|
- function showTree(flag) {
|
|
|
- treeShow.value = flag
|
|
|
+//树形菜单选择事件
|
|
|
+const onSelect: TreeProps['onSelect'] = (keys, e) => {
|
|
|
+ deviceType.value = ''
|
|
|
+ systemID.value = ''
|
|
|
+ deviceList.value = []
|
|
|
+ if (e.node.parent && (e.node.parent.node.type.toString()).startsWith('sys')) {
|
|
|
+ systemType.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 });
|
|
|
+ } else {
|
|
|
+ systemType.value = e.node.type
|
|
|
+ deviceType.value = e.node.type
|
|
|
}
|
|
|
+ selectedKeys.values = keys
|
|
|
+ treeNodeTitle.value = e.node.title
|
|
|
+ debugger
|
|
|
+ if(timer) clearTimeout(timer)
|
|
|
+ timer = undefined
|
|
|
+ if (monitorTable.value) monitorTable.value.setLoading(true)
|
|
|
+ nextTick(() => {
|
|
|
+ timer = null
|
|
|
+ getMonitor()
|
|
|
+ })
|
|
|
|
|
|
- async function getDeviceType () {
|
|
|
- const result = await getDeviceTypeList({})
|
|
|
- if (result.length > 0) {
|
|
|
- const dataSource = <TreeProps['treeData']>[]
|
|
|
- let key = '0'
|
|
|
- const getData = (resultList, dataSourceList, keyVal) => {
|
|
|
- resultList.forEach((item, index) => {
|
|
|
- if (item.children && item.children.length > 0) {
|
|
|
- const children = getData(item.children, [], `${keyVal}-${index}`)
|
|
|
- dataSourceList.push({
|
|
|
- children: children,
|
|
|
- title: item.itemText,
|
|
|
- key: `${keyVal}-${index}`,
|
|
|
- type: item.itemValue,
|
|
|
- });
|
|
|
-
|
|
|
- } else {
|
|
|
- dataSourceList.push({
|
|
|
- children: [],
|
|
|
- title: item.itemText,
|
|
|
- key: `${keyVal}-${index}`,
|
|
|
- type: item.itemValue,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- return dataSourceList
|
|
|
- }
|
|
|
- console.log('树形菜单-------------->', treeData.value)
|
|
|
- treeData.value = getData(result, dataSource, key)
|
|
|
-
|
|
|
+};
|
|
|
+
|
|
|
+function tabChange(activeKeyVal) {
|
|
|
+ activeKey.value = activeKeyVal;
|
|
|
+};
|
|
|
+
|
|
|
+function showTree(flag) {
|
|
|
+ treeShow.value = flag
|
|
|
+}
|
|
|
+
|
|
|
+async function getDeviceType() {
|
|
|
+ const result = await getDeviceTypeList({})
|
|
|
+ if (result.length > 0) {
|
|
|
+ const dataSource = <TreeProps['treeData']>[]
|
|
|
+ let key = '0'
|
|
|
+ const getData = (resultList, dataSourceList, keyVal) => {
|
|
|
+ resultList.forEach((item, index) => {
|
|
|
+ if (item.children && item.children.length > 0) {
|
|
|
+ const children = getData(item.children, [], `${keyVal}-${index}`)
|
|
|
+ dataSourceList.push({
|
|
|
+ children: children,
|
|
|
+ title: item.itemText,
|
|
|
+ key: `${keyVal}-${index}`,
|
|
|
+ type: item.itemValue,
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ dataSourceList.push({
|
|
|
+ children: [],
|
|
|
+ title: item.itemText,
|
|
|
+ key: `${keyVal}-${index}`,
|
|
|
+ type: item.itemValue,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return dataSourceList
|
|
|
}
|
|
|
+ console.log('树形菜单-------------->', treeData.value)
|
|
|
+ treeData.value = getData(result, dataSource, key)
|
|
|
+
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // https获取监测数据
|
|
|
- let timer: null | NodeJS.Timeout = null;
|
|
|
- function getMonitor() {
|
|
|
- timer = setInterval(async () => {
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = undefined;
|
|
|
+function getMonitor() {
|
|
|
+ if (timer) timer = null
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]' && deviceType.value) {
|
|
|
+ timer = setTimeout(async () => {
|
|
|
await getDataSource()
|
|
|
+ if (timer) {
|
|
|
+ getMonitor();
|
|
|
+ }
|
|
|
}, 1000);
|
|
|
- };
|
|
|
-
|
|
|
- async function getDataSource() {
|
|
|
- if (deviceType.value.startsWith('sys') && systemID.value) {
|
|
|
- const res = await list({ devicetype: 'sys', systemID: systemID.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 })
|
|
|
- }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+async function getDataSource() {
|
|
|
+ if (deviceType.value.startsWith('sys') && systemID.value) {
|
|
|
+ const res = await list({ devicetype: 'sys', systemID: systemID.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);
|
|
|
})
|
|
|
- console.log('关联设备列表', deviceArr)
|
|
|
- deviceList.value = deviceArr
|
|
|
- deviceActive.value = deviceArr[1].deviceType
|
|
|
- monitorChange(1)
|
|
|
- } else {
|
|
|
- const res = await list({ devicetype: deviceType.value, pagetype: 'normal' })
|
|
|
- if (res.msgTxt[0]) {
|
|
|
- dataSource.value = res.msgTxt[0].datalist || [];
|
|
|
- dataSource.value.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 })
|
|
|
}
|
|
|
+ })
|
|
|
+ console.log('关联设备列表', deviceArr)
|
|
|
+ deviceList.value = deviceArr
|
|
|
+ deviceActive.value = deviceArr[1].deviceType
|
|
|
+ monitorChange(1)
|
|
|
+ } else {
|
|
|
+ const res = await list({ devicetype: deviceType.value, pagetype: 'normal' })
|
|
|
+ if (res.msgTxt[0]) {
|
|
|
+ dataSource.value = res.msgTxt[0].datalist || [];
|
|
|
+ dataSource.value.filter((data: any) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- function setDivHeight(e: MouseEvent) {
|
|
|
- const divObject = document.getElementById('monitorBox') as HTMLElement
|
|
|
- const divHeight = divObject.offsetHeight
|
|
|
- drawerHeight.value = divHeight
|
|
|
- const startY = e.clientY
|
|
|
- document.onmousemove = function(res){
|
|
|
- res.preventDefault()
|
|
|
- const distY = Math.abs(res.clientY - startY)
|
|
|
- if(res.clientY > startY){
|
|
|
- if(divHeight - distY >= 240){
|
|
|
- drawerHeight.value = divHeight - distY
|
|
|
- }else{
|
|
|
- drawerHeight.value = 240
|
|
|
- }
|
|
|
- }
|
|
|
- if(res.clientY < startY){
|
|
|
- drawerHeight.value = divHeight + distY
|
|
|
+function setDivHeight(e: MouseEvent) {
|
|
|
+ const divObject = document.getElementById('monitorBox') as HTMLElement
|
|
|
+ const divHeight = divObject.offsetHeight
|
|
|
+ drawerHeight.value = divHeight
|
|
|
+ const startY = e.clientY
|
|
|
+ document.onmousemove = function (res) {
|
|
|
+ res.preventDefault()
|
|
|
+ const distY = Math.abs(res.clientY - startY)
|
|
|
+ if (res.clientY > startY) {
|
|
|
+ if (divHeight - distY >= 240) {
|
|
|
+ drawerHeight.value = divHeight - distY
|
|
|
+ } else {
|
|
|
+ drawerHeight.value = 240
|
|
|
}
|
|
|
- divObject.style.height = drawerHeight.value+'px'
|
|
|
}
|
|
|
- document.onmouseup = function() {
|
|
|
- document.onmousemove = null
|
|
|
- if(scroll.value.y != drawerHeight.value - 100) {
|
|
|
- scroll.value = {y: drawerHeight.value - 100 }
|
|
|
-
|
|
|
- // const tableBody = document.getElementsByClassName('zxm-table-container')[0].children[1] as HTMLElement
|
|
|
- // debugger
|
|
|
- // tableBody.style.height = `${drawerHeight.value - 350}px`
|
|
|
- }
|
|
|
+ if (res.clientY < startY) {
|
|
|
+ drawerHeight.value = divHeight + distY
|
|
|
}
|
|
|
+ divObject.style.height = drawerHeight.value + 'px'
|
|
|
}
|
|
|
- // 定位
|
|
|
- function goLocation(record) {
|
|
|
- actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
|
|
|
- }
|
|
|
- // 详情
|
|
|
- function goDetail(record?){
|
|
|
-
|
|
|
- if(record){
|
|
|
- if (deviceType.value.startsWith('fiber')) {
|
|
|
- activeID.value = record.deviceID
|
|
|
- currentModal.value = FiberModal
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.startsWith('dusting')) {
|
|
|
- activeID.value = record.deviceID
|
|
|
- currentModal.value = DustModal
|
|
|
- modalVisible.value = true;
|
|
|
- } else if (deviceType.value.indexOf("gate") != -1) {
|
|
|
- const newPage = router.resolve({path: '/monitorChannel/monitor-gate'})
|
|
|
- window.open(newPage.href, '_blank')
|
|
|
- } else if (deviceType.value.indexOf("window") != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-window' })
|
|
|
- window.open(newPage.href, '_blank')
|
|
|
- } else if (deviceType.value.indexOf("windrect") != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect' })
|
|
|
- window.open(newPage.href, '_blank')
|
|
|
- } else if (deviceType.value.indexOf("fanmain") != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-main' })
|
|
|
- window.open(newPage.href, '_blank')
|
|
|
- } else if (deviceType.value.indexOf("fanlocal") != -1) {
|
|
|
- const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-local' })
|
|
|
- window.open(newPage.href, '_blank')
|
|
|
- } else {
|
|
|
- message.info('待开发。。。')
|
|
|
- }
|
|
|
- }else{
|
|
|
- if (systemType.value.indexOf("sys_dongshi") != -1) {
|
|
|
- const newPage = router.resolve({ path: '/chamber-home', query: {id: systemID.value }})
|
|
|
- window.open(newPage.href, '_blank')
|
|
|
- }else{
|
|
|
- message.info('待开发。。。')
|
|
|
- }
|
|
|
+ document.onmouseup = function () {
|
|
|
+ document.onmousemove = null
|
|
|
+ if (scroll.value.y != drawerHeight.value - 100) {
|
|
|
+ scroll.value = { y: drawerHeight.value - 100 }
|
|
|
+
|
|
|
+ // const tableBody = document.getElementsByClassName('zxm-table-container')[0].children[1] as HTMLElement
|
|
|
+ // debugger
|
|
|
+ // tableBody.style.height = `${drawerHeight.value - 350}px`
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
- function toHome() {
|
|
|
- deviceList.value = []
|
|
|
- actions.setGlobalState({ pageObj: { pageType: 'home'} });
|
|
|
+}
|
|
|
+
|
|
|
+function goLocation(record) {
|
|
|
+ actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
|
|
|
+}
|
|
|
+function goDetail(record?) {
|
|
|
+
|
|
|
+ if (record) {
|
|
|
+ if (deviceType.value.startsWith('fiber')) {
|
|
|
+ activeID.value = record.deviceID
|
|
|
+ currentModal.value = FiberModal
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.startsWith('dusting')) {
|
|
|
+ activeID.value = record.deviceID
|
|
|
+ currentModal.value = DustModal
|
|
|
+ modalVisible.value = true;
|
|
|
+ } else if (deviceType.value.indexOf("gate") != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-gate' })
|
|
|
+ window.open(newPage.href, '_blank')
|
|
|
+ } else if (deviceType.value.indexOf("window") != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-window' })
|
|
|
+ window.open(newPage.href, '_blank')
|
|
|
+ } else if (deviceType.value.indexOf("windrect") != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect' })
|
|
|
+ window.open(newPage.href, '_blank')
|
|
|
+ } else if (deviceType.value.indexOf("fanmain") != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-main' })
|
|
|
+ window.open(newPage.href, '_blank')
|
|
|
+ } else if (deviceType.value.indexOf("fanlocal") != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-local' })
|
|
|
+ window.open(newPage.href, '_blank')
|
|
|
+ } else {
|
|
|
+ message.info('待开发。。。')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (systemType.value.indexOf("sys_dongshi") != -1) {
|
|
|
+ const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } })
|
|
|
+ window.open(newPage.href, '_blank')
|
|
|
+ } else {
|
|
|
+ message.info('待开发。。。')
|
|
|
+ }
|
|
|
}
|
|
|
- // 遍历树形菜单
|
|
|
- async function findTreeDataValue(data:[], obj) {
|
|
|
- const findDeviceType = (data: [], obj) => {
|
|
|
- let type = ''
|
|
|
- if (obj.deviceid) {
|
|
|
- type = obj.deviceid
|
|
|
- } else {
|
|
|
- type = obj.deviceType
|
|
|
- }
|
|
|
- data.find((item: any) => {
|
|
|
- if (item.children.length > 0) {
|
|
|
- findDeviceType(item.children, obj)
|
|
|
- }
|
|
|
- if (item.type == type) {
|
|
|
- deviceType.value = obj.deviceid ? 'sys' : item.type
|
|
|
- if (obj.deviceid) systemID.value = obj.deviceid
|
|
|
- selectedKeys.value = [item.key]
|
|
|
- expandedKeys.value = [item.key]
|
|
|
- treeNodeTitle.value = item.title
|
|
|
- }
|
|
|
- })
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function toHome() {
|
|
|
+ deviceList.value = []
|
|
|
+ if(timer) clearTimeout(timer)
|
|
|
+ timer = undefined
|
|
|
+ actions.setGlobalState({ pageObj: { pageType: 'home' } });
|
|
|
+}
|
|
|
+
|
|
|
+async function findTreeDataValue(data: [], obj) {
|
|
|
+ const findDeviceType = (data: [], obj) => {
|
|
|
+ let type = ''
|
|
|
+ if (obj.deviceid) {
|
|
|
+ type = obj.deviceid
|
|
|
+ } else {
|
|
|
+ type = obj.deviceType
|
|
|
}
|
|
|
- findDeviceType(data, obj)
|
|
|
- if (timer) clearInterval(timer);
|
|
|
+ data.find((item: any) => {
|
|
|
+ if (item.children.length > 0) {
|
|
|
+ findDeviceType(item.children, obj)
|
|
|
+ }
|
|
|
+ if (item.type == type) {
|
|
|
+ deviceType.value = obj.deviceid ? 'sys' : item.type
|
|
|
+ if (obj.deviceid) systemID.value = obj.deviceid
|
|
|
+ selectedKeys.value = [item.key]
|
|
|
+ expandedKeys.value = [item.key]
|
|
|
+ treeNodeTitle.value = item.title
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ findDeviceType(data, obj)
|
|
|
+ debugger
|
|
|
+ if (timer === undefined) {
|
|
|
+ timer = null
|
|
|
await getDataSource()
|
|
|
getMonitor()
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- function monitorChange(index) {
|
|
|
- dataSource.value = []
|
|
|
- deviceActive.value = deviceType.value = deviceList.value[index].deviceType
|
|
|
+function monitorChange(index) {
|
|
|
+ dataSource.value = []
|
|
|
+ deviceActive.value = deviceType.value = deviceList.value[index].deviceType
|
|
|
|
|
|
- if (activeKey.value == '1' && monitorTable.value) {
|
|
|
- monitorTable.value.setLoading(true)
|
|
|
- dataSource.value = deviceList.value[index].datalist
|
|
|
- }
|
|
|
- if(activeKey.value == '2' && historyTable.value){
|
|
|
- historyTable.value.setLoading(true)
|
|
|
- }
|
|
|
- if (activeKey.value == '3' && alarmHistoryTable.value) {
|
|
|
- alarmHistoryTable.value.setLoading(true)
|
|
|
- }
|
|
|
- if (activeKey.value == '4' && handlerHistoryTable.value) {
|
|
|
- handlerHistoryTable.value.setLoading(true)
|
|
|
- }
|
|
|
+ if (activeKey.value == '1' && monitorTable.value) {
|
|
|
+ monitorTable.value.setLoading(true)
|
|
|
+ dataSource.value = deviceList.value[index].datalist
|
|
|
}
|
|
|
-
|
|
|
- onMounted(async() => {
|
|
|
- actions.onGlobalStateChange(async(newState, prev) => {
|
|
|
- for (const key in newState) {
|
|
|
- if (key === 'pageObj') {
|
|
|
- const pageObj = newState[key]
|
|
|
- if (pageObj) {
|
|
|
- routerParam.value = pageObj.pageType
|
|
|
+ if (activeKey.value == '2' && historyTable.value) {
|
|
|
+ historyTable.value.setLoading(true)
|
|
|
+ }
|
|
|
+ if (activeKey.value == '3' && alarmHistoryTable.value) {
|
|
|
+ alarmHistoryTable.value.setLoading(true)
|
|
|
+ }
|
|
|
+ if (activeKey.value == '4' && handlerHistoryTable.value) {
|
|
|
+ handlerHistoryTable.value.setLoading(true)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ actions.onGlobalStateChange((newState, prev) => {
|
|
|
+ for (const key in newState) {
|
|
|
+ if (key === 'pageObj') {
|
|
|
+ const pageObj = newState[key]
|
|
|
+ if (pageObj) {
|
|
|
+ routerParam.value = pageObj.pageType
|
|
|
+ if(routerParam.value !== 'home'){
|
|
|
if (pageObj.deviceid) {
|
|
|
- await findTreeDataValue(treeData.value, { deviceid: pageObj.deviceid })
|
|
|
+ findTreeDataValue(treeData.value, { deviceid: pageObj.deviceid })
|
|
|
} else {
|
|
|
- await findTreeDataValue(treeData.value, { deviceType: pageObj.pageType })
|
|
|
+ findTreeDataValue(treeData.value, { deviceType: pageObj.pageType })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
- await getDeviceType()
|
|
|
- // await getDataSource()
|
|
|
- // getMonitor()
|
|
|
- })
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
- clearInterval(timer);
|
|
|
}
|
|
|
})
|
|
|
+ await getDeviceType()
|
|
|
+ // getMonitor()
|
|
|
+})
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ }
|
|
|
+ timer = undefined;
|
|
|
+})
|
|
|
|
|
|
</script>
|
|
|
<style lang="less" scoped >
|
|
|
- @import '/@/design/vent/modal.less';
|
|
|
- @ventSpace: zxm;
|
|
|
- .device-header{
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- background: url('/@/assets/images/vent/home/modal-top.png');
|
|
|
- text-align: center;
|
|
|
- line-height: 56px;
|
|
|
- font-size: 28px;
|
|
|
- color: #ffffffdd;
|
|
|
- font-weight: 600;
|
|
|
- z-index: -1;
|
|
|
+@import '/@/design/vent/modal.less';
|
|
|
+@ventSpace: zxm;
|
|
|
+
|
|
|
+.device-header {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background: url('/@/assets/images/vent/home/modal-top.png');
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #ffffffdd;
|
|
|
+ font-weight: 600;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+.select-node {
|
|
|
+ position: fixed;
|
|
|
+ top: 60px;
|
|
|
+ left: 10px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 24px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
- .select-node{
|
|
|
- position: fixed;
|
|
|
- top: 60px;
|
|
|
- left: 10px;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 24px;
|
|
|
- .title{
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.device-select {
|
|
|
+ width: 250px;
|
|
|
+ height: 500px;
|
|
|
+ background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
|
|
|
+ position: fixed;
|
|
|
+ top: 60px;
|
|
|
+ left: 10px;
|
|
|
+ background-size: contain;
|
|
|
+ pointer-events: auto;
|
|
|
+ padding: 20px 10px 30px 10px;
|
|
|
+
|
|
|
+ .expansion-icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 190px;
|
|
|
+ top: 25px;
|
|
|
}
|
|
|
- .device-select{
|
|
|
- width: 250px;
|
|
|
- height: 500px;
|
|
|
- background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
|
|
|
- position: fixed;
|
|
|
- top: 60px;
|
|
|
- left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.is-expansion-icon {
|
|
|
+ background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ padding: 5px;
|
|
|
+ pointer-events: auto;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
|
|
|
background-size: contain;
|
|
|
- pointer-events: auto;
|
|
|
- padding: 20px 10px 30px 10px;
|
|
|
- .expansion-icon{
|
|
|
- position: absolute;
|
|
|
- left: 190px;
|
|
|
- top: 25px;
|
|
|
- }
|
|
|
}
|
|
|
- .is-expansion-icon{
|
|
|
- background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
- padding: 5px;
|
|
|
- pointer-events: auto;
|
|
|
- z-index: 999;
|
|
|
- &:hover{
|
|
|
- background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- }
|
|
|
- .put-away-icon{
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .device-select-show{
|
|
|
- left: 10px;
|
|
|
- animation-name: treeShow;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
- }
|
|
|
- .device-select-hide{
|
|
|
- left: -250px;
|
|
|
- animation-name: treeHide;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
- }
|
|
|
- .node-select-show{
|
|
|
- left: 10px;
|
|
|
- animation-name: treeShow;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
- }
|
|
|
- .node-select-hide{
|
|
|
- left: -400px;
|
|
|
- animation-name: treeHide;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 1s;
|
|
|
- transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
- }
|
|
|
- .device-select-box{
|
|
|
- width: 208px;
|
|
|
- height: 450px;
|
|
|
- overflow-y: auto;
|
|
|
- color: #fff;
|
|
|
- :deep(.zxm-tree){
|
|
|
+}
|
|
|
+
|
|
|
+.put-away-icon {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.device-select-show {
|
|
|
+ left: 10px;
|
|
|
+ animation-name: treeShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.device-select-hide {
|
|
|
+ left: -250px;
|
|
|
+ animation-name: treeHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.node-select-show {
|
|
|
+ left: 10px;
|
|
|
+ animation-name: treeShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.node-select-hide {
|
|
|
+ left: -400px;
|
|
|
+ animation-name: treeHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.device-select-box {
|
|
|
+ width: 208px;
|
|
|
+ height: 450px;
|
|
|
+ overflow-y: auto;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ :deep(.zxm-tree) {
|
|
|
+ background: transparent !important;
|
|
|
+ color: #fff !important;
|
|
|
+
|
|
|
+ .zxm-tree-switcher {
|
|
|
background: transparent !important;
|
|
|
- color: #fff !important;
|
|
|
- .zxm-tree-switcher{
|
|
|
- background: transparent !important;
|
|
|
- }
|
|
|
- .zxm-tree-node-content-wrapper.zxm-tree-node-selected{
|
|
|
- background-color: #00b1c8;
|
|
|
- }
|
|
|
- .zxm-tree-node-content-wrapper:hover{
|
|
|
- background-color: #00b1c855;
|
|
|
- }
|
|
|
- input{
|
|
|
- height: 0px !important;
|
|
|
- }
|
|
|
}
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 10px;
|
|
|
- background: #ededed22;
|
|
|
- height: 100px;
|
|
|
+
|
|
|
+ .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
|
|
|
+ background-color: #00b1c8;
|
|
|
}
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- background: #4288A444;
|
|
|
+
|
|
|
+ .zxm-tree-node-content-wrapper:hover {
|
|
|
+ background-color: #00b1c855;
|
|
|
}
|
|
|
- }
|
|
|
- .bottom-tabs-box{
|
|
|
-
|
|
|
- position: relative;
|
|
|
- .to-small{
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
|
|
|
- background-size: auto;
|
|
|
- position: absolute;
|
|
|
- top: -65px;
|
|
|
- right: 30px;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 8px;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- background-color: rgba(0, 58, 128, 0.418);
|
|
|
- &:hover{
|
|
|
- background-color: rgba(42, 85, 138, 0.418);
|
|
|
- }
|
|
|
+
|
|
|
+ input {
|
|
|
+ height: 0px !important;
|
|
|
}
|
|
|
- .device-button-group{
|
|
|
- position: absolute;
|
|
|
- top: -30px;
|
|
|
- left: 30px;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #ededed22;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #4288A444;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-tabs-box {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .to-small {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
|
|
|
+ background-size: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: -65px;
|
|
|
+ right: 30px;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 8px;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ background-color: rgba(0, 58, 128, 0.418);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(42, 85, 138, 0.418);
|
|
|
}
|
|
|
- .enter-detail{
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 150px;
|
|
|
- top: -10px;
|
|
|
- padding: 5px;
|
|
|
- // border: 1px transparent solid;
|
|
|
- border-radius: 5px;
|
|
|
- margin-left: 8px;
|
|
|
- margin-right: 8px;
|
|
|
- width: auto;
|
|
|
- // height: 40px;
|
|
|
- // border: 1px solid #65dbea;
|
|
|
- height: 33px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-button-group {
|
|
|
+ position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ left: 30px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .device-button {
|
|
|
+ padding: 4px 15px;
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
color: #fff;
|
|
|
- padding: 5px 15px 5px 15px;
|
|
|
cursor: pointer;
|
|
|
- &:hover {
|
|
|
- background: linear-gradient(#2cd1ff55, #1eb0ff55);
|
|
|
- }
|
|
|
+ margin: 0 3px;
|
|
|
+
|
|
|
&::before {
|
|
|
- width: calc(100% - 6px);
|
|
|
- height: 27px;
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
- top: 3px;
|
|
|
+ top: 0;
|
|
|
right: 0;
|
|
|
- left: 3px;
|
|
|
bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border: 1px solid #6176AF;
|
|
|
+ transform: skewX(-38deg);
|
|
|
+ background-color: rgba(0, 77, 103, 85%);
|
|
|
z-index: -1;
|
|
|
- border-radius: inherit; /*important*/
|
|
|
- background: linear-gradient(#1fa6cb, #127cb5);
|
|
|
}
|
|
|
- &::after {
|
|
|
- width: calc(100% + 32px);
|
|
|
- height: 10px;
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 35px;
|
|
|
- right: 0;
|
|
|
- left: -16px;
|
|
|
- bottom: 0;
|
|
|
- z-index: -1;
|
|
|
- border-radius: inherit; /*important*/
|
|
|
- background: url('/@/assets/images/vent/short-light.png') no-repeat;
|
|
|
- background-position: center;
|
|
|
- background-size: 100%;
|
|
|
- z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-active {
|
|
|
+
|
|
|
+ // color: #0efcff;
|
|
|
+ &::before {
|
|
|
+ border-color: #0efcff;
|
|
|
+ box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- @keyframes treeShow {
|
|
|
- 0% {
|
|
|
- left: -400px;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- left: 10px;
|
|
|
- opacity: 1;
|
|
|
+
|
|
|
+ .enter-detail {
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 120px;
|
|
|
+ top: -10px;
|
|
|
+ padding: 5px;
|
|
|
+ // border: 1px transparent solid;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-right: 8px;
|
|
|
+ width: auto;
|
|
|
+ // height: 40px;
|
|
|
+ // border: 1px solid #65dbea;
|
|
|
+ height: 33px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 15px 5px 15px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(#2cd1ff55, #1eb0ff55);
|
|
|
}
|
|
|
- }
|
|
|
- @keyframes treeHide {
|
|
|
- 0% {
|
|
|
- left: 10px;
|
|
|
- opacity: 1;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ width: calc(100% - 6px);
|
|
|
+ height: 27px;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ right: 0;
|
|
|
+ left: 3px;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: -1;
|
|
|
+ border-radius: inherit;
|
|
|
+ /*important*/
|
|
|
+ background: linear-gradient(#1fa6cb, #127cb5);
|
|
|
}
|
|
|
- 100% {
|
|
|
- left: -400px;
|
|
|
- opacity: 0;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ width: calc(100% + 32px);
|
|
|
+ height: 10px;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 35px;
|
|
|
+ right: 0;
|
|
|
+ left: -16px;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: -1;
|
|
|
+ border-radius: inherit;
|
|
|
+ /*important*/
|
|
|
+ background: url('/@/assets/images/vent/short-light.png') no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 100%;
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- :deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
- overflow: auto;
|
|
|
- // height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes treeShow {
|
|
|
+ 0% {
|
|
|
+ left: -400px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ left: 10px;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
- :deep(.zxm-select-dropdown){
|
|
|
- left: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes treeHide {
|
|
|
+ 0% {
|
|
|
+ left: 10px;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ left: -400px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ overflow: auto;
|
|
|
+ // height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-select-dropdown) {
|
|
|
+ left: 0 !important;
|
|
|
+}</style>
|
lxh