|
|
@@ -0,0 +1,1445 @@
|
|
|
+<template>
|
|
|
+ <div class="scene-box">
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="top-center row">
|
|
|
+ <template v-if="deviceType == 'gate'">
|
|
|
+ <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('打开前门','frontGateOpen_S')">打开前门</div>
|
|
|
+ <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('关闭前门','frontGateClose_S')">关闭前门</div>
|
|
|
+ <div v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'" class="button-box" @click="playAnimation('打开中间门','midGateOpen_S')">打开中间门</div>
|
|
|
+ <div v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'" class="button-box" @click="playAnimation('关闭中间门','midGateClose_S')">关闭中间门</div>
|
|
|
+ <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('打开后门','rearGateOpen_S')">打开后门</div>
|
|
|
+ <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation('关闭后门','rearGateClose_S')">关闭后门</div>
|
|
|
+ <div v-if="selectData['isShowGatesContrl']" class="button-box" @click="playAnimation('同时打开','sameTimeOpen')">同时打开</div>
|
|
|
+ <div v-if="selectData['isShowGatesContrl']" class="button-box" @click="playAnimation('同时关闭','sameTimeClose')">同时关闭</div>
|
|
|
+ </template>
|
|
|
+ <template v-if="deviceType == 'window'">
|
|
|
+ <div class="row" v-if="Number(selectData.nwindownum) == 2">
|
|
|
+ <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定前窗面积', 'frontSetValue')">设定前窗面积</div>
|
|
|
+ <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="playAnimation('设定后窗面积', 'rearSetValue')">设定后窗面积</div>
|
|
|
+ <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定前窗角度', 'frontSetValue')">设定前窗角度</div>
|
|
|
+ <div v-if="hasPermission('window:showAngle')" class="button-box" @click="playAnimation('设定后窗角度', 'frontSetValue')">设定后窗角度</div>
|
|
|
+ </div>
|
|
|
+ <div class="row" v-if="hasPermission('window:fourAreaControl') && Number(selectData.nwindownum) == 4">
|
|
|
+ <div class="button-box" @click="playAnimation('前窗1面积设置', 'frontSetValue1')">前窗1面积</div>
|
|
|
+ <div class="button-box" @click="playAnimation('前窗2面积设置', 'frontSetValue2')">前窗2面积</div>
|
|
|
+ <div class="button-box" @click="playAnimation('后窗1面积设置', 'frontSetValue3')">后窗1面积</div>
|
|
|
+ <div class="button-box" @click="playAnimation('后窗2面积设置', 'frontSetValue4')">后窗2面积</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row" v-if="Number(selectData.nwindownum) == 1">
|
|
|
+ <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="setArea(1)">设定风窗面积</div>
|
|
|
+ <div v-if="hasPermission('window:showAngle')" class="button-box" @click="setAngle(1)">设定风窗角度</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div ref="playerRef" class="player-List">
|
|
|
+ <template v-if="cameraAddrs.length > 0">
|
|
|
+ <div v-for="(item, index) in cameraAddrs" :key="index" class="player-box">
|
|
|
+ <div class="player-name">{{ item.name }}</div>
|
|
|
+ <div style="padding-top: 3px">
|
|
|
+ <template v-if="item.addr.startsWith('rtsp://')">
|
|
|
+ <video :id="`video${index}`" muted autoplay></video>
|
|
|
+ <div class="click-box" @dblclick="goFullScreen(`video${index}`)"></div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div :id="'player' + index"></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class='no-player' v-else>暂无视频</div>
|
|
|
+ </div>
|
|
|
+ <div class="tabs-box bottom-tabs-box" :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
|
|
|
+ style="height: 290px" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
|
|
|
+ <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
|
|
|
+ <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
|
|
|
+ <a-tab-pane key="1" tab="实时监测">
|
|
|
+ <template
|
|
|
+ v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
|
|
|
+ <GroupMonitorTable ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${deviceType}_monitor`"
|
|
|
+ :scroll="scroll" :isAction="true" :isShowSelect="false">
|
|
|
+ </GroupMonitorTable>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 工作面echarts图标 -->
|
|
|
+ <BarAndLine v-if="activeKey == '1' && deviceType == 'surface_history'" class="echarts-line"
|
|
|
+ xAxisPropType="time" :dataSource="surfaceEchartsData" height="300px"
|
|
|
+ :chartsColumns="surfaceChartsColumns" :option="echatsOption" />
|
|
|
+ <MonitorTable v-else-if="activeKey == '1'" ref="monitorTable" :columnsType="`${deviceType}_monitor`"
|
|
|
+ :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="false" :isShowSelect="true"
|
|
|
+ title="设备监测" :scroll="{ y: scroll.y - 30 }" @selectRow="getSelectRow">
|
|
|
+ <template #filterCell="{ column, record }">
|
|
|
+ <template v-if="deviceType.startsWith('gate') || deviceType.startsWith('door')">
|
|
|
+ <a-tag
|
|
|
+ v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'"
|
|
|
+ color="red">正在运行</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == 1"
|
|
|
+ color="default">关闭</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'"
|
|
|
+ color="#46C66F">打开</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'"
|
|
|
+ color="#FF0000">点位异常</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'"
|
|
|
+ color="red">正在运行</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '1'"
|
|
|
+ color="default">关闭</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'"
|
|
|
+ color="#46C66F">打开</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'"
|
|
|
+ color="#FF0000">点位异常</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'"
|
|
|
+ color="red">正在运行</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1"
|
|
|
+ color="default">关闭</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'"
|
|
|
+ color="#46C66F">打开</a-tag>
|
|
|
+ <a-tag
|
|
|
+ v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'"
|
|
|
+ color="#FF0000">点位异常</a-tag>
|
|
|
+ <template v-if="column.dataIndex === 'ndoortype'">
|
|
|
+ <span>{{ render.renderDictText(record.ndoortype, 'ndoortype') }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.dataIndex === 'doorUse'">
|
|
|
+ <span>{{ render.renderDictText(record.doorUse, 'doorUse') }}</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="deviceType.startsWith('windrect')">
|
|
|
+ <a-tag v-if="column.dataIndex === 'sign'"
|
|
|
+ :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
|
|
|
+ {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag>
|
|
|
+ <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
|
|
|
+ <a-tag v-if="record.isRun == -2 || record.isRun == -1"
|
|
|
+ :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
|
|
|
+ record.isRun == -2 ? '空闲' : '等待'
|
|
|
+ }}</a-tag>
|
|
|
+ <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
|
|
|
+ <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="deviceType.startsWith('safetymonitor')">
|
|
|
+ <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
|
|
|
+ <div v-if="!record.V && column.dataIndex === 'V'">-</div>
|
|
|
+ <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
|
|
|
+ <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
|
|
|
+ <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
|
|
|
+ <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="deviceType.startsWith('atomizing')">
|
|
|
+ <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '1'" color="green">连接</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="deviceType.startsWith('gaspatrol')">
|
|
|
+ <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')"
|
|
|
+ color="green">{{
|
|
|
+ record.deviceConnect_str
|
|
|
+ }}</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')"
|
|
|
+ color="red">{{
|
|
|
+ record.deviceConnect_str
|
|
|
+ }}</a-tag>
|
|
|
+ </template>
|
|
|
+ <a-tag v-if="column.dataIndex === 'warnFlag'"
|
|
|
+ :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
|
|
|
+ {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
|
|
|
+ }}</a-tag>
|
|
|
+ <template v-else-if="column.dataIndex === 'warnLevel'">
|
|
|
+ <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
|
|
|
+ <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
|
|
|
+ <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
|
|
|
+ <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
|
|
|
+ <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
|
|
|
+ <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
|
|
|
+ <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
|
|
|
+ <a-tag v-else color="green">正常</a-tag>
|
|
|
+ </template>
|
|
|
+ <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
|
|
|
+ record.netStatus == '0' ? '断开' : '连接'
|
|
|
+ }}</a-tag>
|
|
|
+ </template>
|
|
|
+ </MonitorTable>
|
|
|
+ </template>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="2" tab="历史数据" v-if="!noHistoryArr().find((item) => deviceType.startsWith(item))">
|
|
|
+ <div class="tab-item" v-if="activeKey == '2'">
|
|
|
+ <template v-if="deviceType.startsWith('fanmain')">
|
|
|
+ <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll"
|
|
|
+ dict-code="fan_dict" />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="deviceType.startsWith('fanlocal')">
|
|
|
+ <HistoryTableNew class="w-100% hM-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fanlocal_dict" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <HistoryTable ref="historyTable" :sysId="systemID" :columns-type="`${deviceType}`"
|
|
|
+ :device-type="deviceType" designScope="device-history" :scroll="scroll" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="3" tab="报警历史" v-if="!noWarningArr.find((item) => deviceType.startsWith(item))">
|
|
|
+ <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, { devicekind: deviceType, sysId: systemID, pageSize: 10000 })"
|
|
|
+ :scroll="scroll" designScope="alarm-history" />
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="4" tab="操作历史" v-if="haveHandlerArr.find((item) => deviceType.startsWith(item))">
|
|
|
+ <div class="tab-item">
|
|
|
+ <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
|
|
|
+ columns-type="operator_history" :device-type="deviceType"
|
|
|
+ :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID })"
|
|
|
+ :scroll="scroll" designScope="operator-history" />
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource"
|
|
|
+ :activeID="activeID" />
|
|
|
+ <HandleModal
|
|
|
+ v-if="!globalConfig?.simulatedPassword"
|
|
|
+ :modal-is-show="modalIsShow"
|
|
|
+ :modal-title="modalTitle"
|
|
|
+ :modal-type="modalType"
|
|
|
+ :device-type="deviceType"
|
|
|
+ @handle-ok="handleOK"
|
|
|
+ @handle-cancel="handleCancel"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch, nextTick,unref } from 'vue';
|
|
|
+import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } 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';
|
|
|
+import HistoryTableNew from '/@/views/vent/comment/history/HistoryTable.vue';
|
|
|
+import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
|
|
|
+import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
+import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
|
|
|
+import gaspatrolTable from '../comment/gaspatrolTable.vue';
|
|
|
+import gasReport from '../comment/gasReport.vue';
|
|
|
+import gasReportCount from '../comment/gasReportCount.vue';
|
|
|
+import gasInspectDialog from '../comment/gasInspectDialog.vue';
|
|
|
+import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
|
|
|
+import { TableAction } from '/@/components/Table';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+import { getActions } from '/@/qiankun/state';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { setDivHeight } from '/@/utils/event';
|
|
|
+import { render } from '/@/utils/common/renderUtils';
|
|
|
+import HandleModal from './modal.vue';
|
|
|
+import {
|
|
|
+ majorColumns,
|
|
|
+ haveSysDetailArr,
|
|
|
+ haveDetailArr,
|
|
|
+ haveHandlerArr,
|
|
|
+ noWarningArr,
|
|
|
+ surfaceChartsColumns,
|
|
|
+ noHistoryArr,
|
|
|
+ vehicleFormConfig,
|
|
|
+ noLocationArr,
|
|
|
+} from './device.data';
|
|
|
+import { formConfig } from '../safetyMonitor/safety.data';
|
|
|
+import { getDictItemsByCode } from '/@/utils/dict';
|
|
|
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
|
|
|
+import { useMethods } from '/@/hooks/system/useMethods';
|
|
|
+import { useGo } from '/@/hooks/web/usePage';
|
|
|
+import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
+import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+import { deviceControlApi } from '/@/api/vent/index';
|
|
|
+
|
|
|
+type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
|
|
|
+const glob = useGlobSetting();
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ deviceType: {
|
|
|
+ type: Object,
|
|
|
+ default: () => { },
|
|
|
+ },
|
|
|
+});
|
|
|
+const { handleExportXls } = useMethods();
|
|
|
+const go = useGo();
|
|
|
+const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '35',
|
|
|
+ left: '30',
|
|
|
+ right: '45',
|
|
|
+ bottom: '25',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
+ },
|
|
|
+};
|
|
|
+const { hasPermission } = usePermission();
|
|
|
+const { getCamera, removeCamera, getPlayer } = useCamera();
|
|
|
+const playerRef = ref()
|
|
|
+const router = useRouter();
|
|
|
+const actions = getActions();
|
|
|
+const noLocationList = noLocationArr();
|
|
|
+const monitorTable = ref();
|
|
|
+const historyTable = ref();
|
|
|
+const alarmHistoryTable = ref();
|
|
|
+const handlerHistoryTable = ref();
|
|
|
+const isRefresh = ref(true);
|
|
|
+// 模态框
|
|
|
+const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
|
|
|
+const modalVisible = ref<Boolean>(false); // 模态框是否可见
|
|
|
+
|
|
|
+const tableShow = ref(true); //是否显示树形菜单
|
|
|
+const modalIsShow = ref<boolean>(false); // 是否显示模态框
|
|
|
+const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
|
|
|
+const modalType = ref(''); // 模态框内容显示类型，设备操作类型
|
|
|
+const locationList = ref([]); //巷道定位图标显示列表
|
|
|
+const deviceList = ref<DeviceType[]>([]); //关联设备列表
|
|
|
+const deviceActive = ref('');
|
|
|
+const activeKey = ref('1'); // tab key
|
|
|
+const dataSource = shallowRef([]); // 实时监测数据
|
|
|
+const selectData = ref({})
|
|
|
+const majorPathEchartsData = ref({}); // 关键路线echarts数据
|
|
|
+const surfaceEchartsData = ref<any[]>(); // 工作面历史记录，echarts数据
|
|
|
+const activeID = ref(''); // 打开详情modal时监测的设备id
|
|
|
+const deviceType = ref(''); // 监测设备类型
|
|
|
+const selectRowIndex = ref(-1)
|
|
|
+const systemType = ref('');
|
|
|
+const systemID = ref(''); // 系统监测时，系统id
|
|
|
+const cameraAddrs = ref([])
|
|
|
+const scroll = reactive({
|
|
|
+ y: 180,
|
|
|
+});
|
|
|
+let departmentInfo: Null | Object = null;
|
|
|
+let startMonitorTimer = 0;
|
|
|
+let gaspatrol = ref(null);
|
|
|
+let gasreport = ref(null);
|
|
|
+let gasreportcount = ref(null);
|
|
|
+let station = ref(null);
|
|
|
+let gasSearch = reactive({
|
|
|
+ address: '',
|
|
|
+ userName: '',
|
|
|
+ insType: '2',
|
|
|
+ class: 'night',
|
|
|
+});
|
|
|
+function tabChange(activeKeyVal) {
|
|
|
+ activeKey.value = activeKeyVal;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = undefined;
|
|
|
+function getMonitor(flag?) {
|
|
|
+ if (deviceType.value) {
|
|
|
+ if (timer) timer = null;
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ if (deviceType.value.startsWith('gasDay_normal') && gaspatrol.value) {
|
|
|
+ gaspatrol.value.queryNowGasInsInfoList(); //人工瓦斯巡检
|
|
|
+ } else if (deviceType.value.startsWith('gasDayReport')) {
|
|
|
+ if (glob.sysOrgCode == 'sdmtjtbetmk') {
|
|
|
+ gasreportcount.value.getSearchReport();
|
|
|
+ } else {
|
|
|
+ gasreport.value.getSearchReport(); //瓦斯日报
|
|
|
+ }
|
|
|
+ } else if (deviceType.value.startsWith('substation') && station.value) {
|
|
|
+ //分站
|
|
|
+ station.value.getStationList();
|
|
|
+ } else {
|
|
|
+ await getDataSource();
|
|
|
+ }
|
|
|
+ if (timer) {
|
|
|
+ getMonitor();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function getDataSource() {
|
|
|
+ if (deviceType.value && 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') {
|
|
|
+ if (item.type === 'majorpath') {
|
|
|
+ deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
|
|
|
+ majorPathEchartsData.value = item['datalist'][0];
|
|
|
+ } else if (item.type.startsWith('surface_history')) {
|
|
|
+ surfaceEchartsData.value = item['datalist'][0];
|
|
|
+ deviceArr.unshift({
|
|
|
+ deviceType: item.type,
|
|
|
+ deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
|
|
|
+ datalist: data,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ deviceArr.unshift({
|
|
|
+ deviceType: item.type,
|
|
|
+ deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
|
|
|
+ datalist: data,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ deviceList.value = deviceArr;
|
|
|
+ if (deviceArr.length > 0) {
|
|
|
+ deviceActive.value = deviceArr[0].deviceType;
|
|
|
+ monitorChange(0);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let res = null;
|
|
|
+ if (systemID.value) {
|
|
|
+ res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value });
|
|
|
+ if (res && res.msgTxt) {
|
|
|
+ const result = res.msgTxt;
|
|
|
+ result.forEach((item) => {
|
|
|
+ const data = item['datalist'].filter((data: any) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
+ if (item.type != 'sys') {
|
|
|
+ if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
|
|
|
+ dataSource.value = item['datalist'][0]['paths'];
|
|
|
+ majorPathEchartsData.value = item['datalist'][0];
|
|
|
+ return;
|
|
|
+ } else if (item.type == deviceType.value) {
|
|
|
+ if (item.type == 'surface_history') {
|
|
|
+ // 工作面图标数据
|
|
|
+ surfaceEchartsData.value = item['datalist'][0];
|
|
|
+ } else {
|
|
|
+ dataSource.value = data;
|
|
|
+ console.log('关联设备数据--------------->', data);
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let resultData, searchForm;
|
|
|
+ if (monitorTable.value) {
|
|
|
+ const formData = monitorTable.value.getForm();
|
|
|
+ searchForm = formData.getFieldsValue();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (monitorTable.value) {
|
|
|
+ if (deviceType.value.startsWith('safetymonitor')) {
|
|
|
+ resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } });
|
|
|
+ } else if (deviceType.value.startsWith('location')) {
|
|
|
+ if (!departmentInfo) {
|
|
|
+ departmentInfo = await getDepartmentInfo({});
|
|
|
+ }
|
|
|
+ let department = null;
|
|
|
+ if (departmentInfo && locationForm && locationForm['department']) {
|
|
|
+ for (const key in departmentInfo) {
|
|
|
+ const item = departmentInfo[key];
|
|
|
+ if (item['id'] === locationForm['department']) {
|
|
|
+ department = item;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ resultData = await list({
|
|
|
+ devicetype: deviceType.value,
|
|
|
+ pagetype: 'normal',
|
|
|
+ filterParams: {
|
|
|
+ strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
|
|
|
+ userName: locationForm['strname'] ? locationForm['strname'] : '',
|
|
|
+ userJson: department && department['name'] ? department['name'] : '',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (deviceType.value.startsWith('vehicle')) {
|
|
|
+ resultData = await list({
|
|
|
+ devicetype: deviceType.value,
|
|
|
+ pagetype: 'normal',
|
|
|
+ filterParams: {
|
|
|
+ strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '',
|
|
|
+ vehicleName: locationForm['strname'] ? locationForm['strname'] : '',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 非安全监控
|
|
|
+ resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' });
|
|
|
+ }
|
|
|
+ if (resultData && resultData.msgTxt) {
|
|
|
+ const result = resultData.msgTxt[0];
|
|
|
+ if (result) {
|
|
|
+ const data = result['datalist'].filter((data: any) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
+ if (deviceType.value.startsWith('safetymonitor')) {
|
|
|
+ const resultData = <any[]>[];
|
|
|
+ // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
|
|
|
+ const dictCodes = getDictItemsByCode('safetynormal');
|
|
|
+ if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
|
|
|
+ for (let i = 0; i < dictCodes.length; i++) {
|
|
|
+ const dict = dictCodes[i];
|
|
|
+ data.forEach((item) => {
|
|
|
+ if (dict['value'] == item['dataTypeName']) {
|
|
|
+ resultData.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ dataSource.value = resultData;
|
|
|
+ } else {
|
|
|
+ dataSource.value = data;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let tableData: any[] = [];
|
|
|
+ let noNetData: any[] = [];
|
|
|
+ data.filter((el) => {
|
|
|
+ if (el.netStatus == 1) {
|
|
|
+ tableData.push(el);
|
|
|
+ } else {
|
|
|
+ noNetData.push(el);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ dataSource.value = [...tableData, ...noNetData];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ dataSource.value = [];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ dataSource.value = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function toHide() {
|
|
|
+ tableShow.value = !tableShow.value;
|
|
|
+ document.getElementById('monitorBox').addEventListener('animationend', () => {
|
|
|
+ if (!tableShow.value) {
|
|
|
+ document.getElementById('monitorBox').style.height = '0px';
|
|
|
+ } else {
|
|
|
+ document.getElementById('monitorBox').style.height = '290';
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function monitorChange(index) {
|
|
|
+ dataSource.value = [];
|
|
|
+ deviceActive.value = deviceList.value[index].deviceType;
|
|
|
+ if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+ // 切换检测数据
|
|
|
+async function getSelectRow(selectRow, index) {
|
|
|
+ if (!selectRow) return;
|
|
|
+ selectRowIndex.value = index;
|
|
|
+ selectData.value = selectRow;
|
|
|
+ cameraAddrs.value = await getCamera(selectRow.deviceID, playerRef.value, null, true);
|
|
|
+ if(cameraAddrs.value && cameraAddrs.value.length > 0){
|
|
|
+ nextTick(() => {
|
|
|
+ for(let i=0; i<cameraAddrs.value.length; i++){
|
|
|
+ const item = cameraAddrs.value[i]
|
|
|
+ const fileExtension = item.addr.split('.').pop();
|
|
|
+ if (item.addr.includes('0.0.0.0')) {
|
|
|
+ item.addr = item.addr.replace('0.0.0.0', window.location.hostname);
|
|
|
+ }
|
|
|
+ const player = getPlayer(fileExtension, 'player' + i,item.devicekind, item.addr, item.cameraRate, {width: 755, height: 490})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const playAnimation = (title, flag) => {
|
|
|
+ modalType.value = flag + '';
|
|
|
+ modalTitle.value = title;
|
|
|
+ modalIsShow.value = true;
|
|
|
+};
|
|
|
+const handleOK = (passWord, handlerState, value) => {
|
|
|
+ if (!passWord && !globalConfig?.simulatedPassword) {
|
|
|
+ message.warning('请输入密码！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ deviceid: selectData.value.deviceID,
|
|
|
+ devicetype: selectData.value.deviceType,
|
|
|
+ paramcode: handlerState,
|
|
|
+ password: passWord || globalConfig?.simulatedPassword,
|
|
|
+ value: value,
|
|
|
+ };
|
|
|
+ deviceControlApi(data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ message.success('指令已下发成功！');
|
|
|
+ } else {
|
|
|
+ message.error(res.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ handleCancel();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ modalIsShow.value = false;
|
|
|
+ modalTitle.value = '';
|
|
|
+ modalType.value = '';
|
|
|
+};
|
|
|
+
|
|
|
+onMounted( () => {
|
|
|
+ debugger;
|
|
|
+ const route = unref(router.currentRoute);
|
|
|
+ const nameStrList = route.name.split('-')
|
|
|
+ if(nameStrList.length > 0){
|
|
|
+ deviceType.value = nameStrList[nameStrList.length -1];
|
|
|
+ }
|
|
|
+ timer = null
|
|
|
+ getMonitor(true)
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ }
|
|
|
+ timer = undefined;
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '/@/design/theme.less';
|
|
|
+@import '/@/design/vent/modal.less';
|
|
|
+@ventSpace: zxm;
|
|
|
+
|
|
|
+@{theme-deepblue} {
|
|
|
+ .scene-box {
|
|
|
+ // --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
|
|
|
+ // --image-tree-icon-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-bg.png');
|
|
|
+ // --image-tree-icon-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-hover-bg.png');
|
|
|
+ // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
|
|
|
+ // --image-tree-expansion-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-bg.png');
|
|
|
+ // --image-tree-expansion-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-hover-bg.png');
|
|
|
+ // --image-location-bg: url('/@/assets/images/themify/deepblue/vent/home/location-bg.png');
|
|
|
+ // --image-location-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/location-hover-bg.png');
|
|
|
+ // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
|
|
|
+ // --image-turn-location-top-bg: url('/@/assets/images/themify/deepblue/vent/home/turn-location-top-bg.png');
|
|
|
+ // --image-tree-icon-cover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-bg.png');
|
|
|
+ // --image-tree-icon-cover-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-hover-bg.png');
|
|
|
+ // --image-tohome: url('/@/assets/images/themify/deepblue/vent/home/tohome.png');
|
|
|
+ // --tree-node-select: #0963c1;
|
|
|
+ // --tree-node-hover: #0f376ccc;
|
|
|
+ // --location-bottom-bg: #21324855;
|
|
|
+ // --location-bottom-border: #aed1ff4d;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.scene-box {
|
|
|
+ --image-no-camera_bg: url('/@/assets/images/vent/no-data.png');
|
|
|
+ --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
|
|
|
+ --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
|
|
|
+ --image-tree-icon-bg: url('/@/assets/images/vent/home/tree-icon-bg.png');
|
|
|
+ --image-tree-icon-hover-bg: url('/@/assets/images/vent/home/tree-icon-hover-bg.png');
|
|
|
+ --image-tree-bg: url('/@/assets/images/vent/home/tree-bg.png');
|
|
|
+ --image-tree-expansion-bg: url('/@/assets/images/vent/home/tree-expansion-bg.png');
|
|
|
+ --image-tree-expansion-hover-bg: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png');
|
|
|
+ --image-location-bg: url('/@/assets/images/vent/home/location-bg.png');
|
|
|
+ --image-location-hover-bg: url('/@/assets/images/vent/home/location-hover-bg.png');
|
|
|
+ --image-turn-location-top-bg: url('/@/assets/images/vent/home/turn-location-top-bg.png');
|
|
|
+ --image-tree-icon-cover-bg: url('/@/assets/images/vent/home/tree-icon-cover-bg.png');
|
|
|
+ --image-tree-icon-cover-hover-bg: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png');
|
|
|
+ --image-tohome: url('/@/assets/images/vent/home/tohome.png');
|
|
|
+ --tree-node-select: #00b1c8;
|
|
|
+ --tree-node-hover: #00b1c855;
|
|
|
+ --location-bottom-bg: #00709955;
|
|
|
+ --location-bottom-border: #aef3ff4d;
|
|
|
+}
|
|
|
+.top-box{
|
|
|
+ z-index: 9999;
|
|
|
+ top: 10px !important;
|
|
|
+}
|
|
|
+.player-List{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 580px;
|
|
|
+ display: flex;
|
|
|
+ overflow-y: auto;
|
|
|
+ pointer-events: auto;
|
|
|
+ .player-box {
|
|
|
+ width: 806px;
|
|
|
+ height: 555px;
|
|
|
+ padding: 17px 18px;
|
|
|
+ background: var(--image-camera_bg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ margin: 10px 70px;
|
|
|
+
|
|
|
+ .player-name {
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ top: 35px;
|
|
|
+ right: 35px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: hsla(0, 0%, 50%, 0.5);
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 1px 5px;
|
|
|
+ max-width: 120px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .click-box {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-player{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 80px;
|
|
|
+ background: var(--image-no-camera_bg) no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 50px;
|
|
|
+ color: var(--vent-text-base)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top-header {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background: var(--image-modal-top);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #ffffffdd;
|
|
|
+ font-weight: 600;
|
|
|
+ z-index: 1;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.select-node {
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ left: 10px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 22px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.expansion-icon {
|
|
|
+ background: var(--image-tree-icon-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ position: absolute;
|
|
|
+ left: 190px;
|
|
|
+ top: 25px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-tree-icon-hover-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.device-select {
|
|
|
+ width: 250px;
|
|
|
+ height: 500px;
|
|
|
+ background: var(--image-tree-bg) no-repeat;
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ left: 10px;
|
|
|
+ background-size: contain;
|
|
|
+ pointer-events: auto;
|
|
|
+ padding: 20px 10px 30px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.inspect-info-xj {
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ left: 250px;
|
|
|
+ width: 320px;
|
|
|
+ height: 272px;
|
|
|
+ padding: 20px;
|
|
|
+ background: url('@/assets/images/inspect-bg.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.is-expansion-icon {
|
|
|
+ padding: 5px;
|
|
|
+ pointer-events: auto;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.device-select-show {
|
|
|
+ left: 10px;
|
|
|
+ animation-name: treeShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.device-select-hide {
|
|
|
+ left: -250px;
|
|
|
+ animation-name: treeHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.node-select-show {
|
|
|
+ width: 276px;
|
|
|
+ height: 44px;
|
|
|
+ background: var(--image-tree-expansion-bg) no-repeat;
|
|
|
+ left: 10px;
|
|
|
+ animation-name: treeShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 0;
|
|
|
+ justify-content: flex-start;
|
|
|
+ pointer-events: auto;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-tree-expansion-hover-bg) no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .put-away-icon {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ left: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.node-select-hide {
|
|
|
+ left: -400px;
|
|
|
+ animation-name: treeHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.device-select-box {
|
|
|
+ width: 208px;
|
|
|
+ height: 450px;
|
|
|
+ overflow-y: auto;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+
|
|
|
+ :deep(.zxm-tree) {
|
|
|
+ background: transparent !important;
|
|
|
+ color: var(--vent-font-color) !important;
|
|
|
+
|
|
|
+ .zxm-tree-switcher {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
|
|
|
+ background-color: var(--tree-node-select);
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tree-node-content-wrapper:hover {
|
|
|
+ background-color: var(--tree-node-hover);
|
|
|
+ }
|
|
|
+
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #4288a444;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.location-icon {
|
|
|
+ width: 46px;
|
|
|
+ height: 178px;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ background: var(--image-location-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ line-height: 46px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ padding-top: 10px;
|
|
|
+ pointer-events: auto;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-location-hover-bg) no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-text {
|
|
|
+ padding-top: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.location-select {
|
|
|
+ position: fixed;
|
|
|
+ top: 100px;
|
|
|
+ pointer-events: auto;
|
|
|
+
|
|
|
+ .location-select-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 230px;
|
|
|
+ height: 500px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: var(--image-tree-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-top-title {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ position: absolute;
|
|
|
+ width: 225px;
|
|
|
+ height: 68px;
|
|
|
+ background: var(--image-turn-location-top-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ top: 5px;
|
|
|
+ left: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: -14px;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-expansion-icon {
|
|
|
+ background: var(--image-tree-icon-cover-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ position: relative;
|
|
|
+ left: 10px;
|
|
|
+ top: -15px;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--image-tree-icon-cover-hover-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-container {
|
|
|
+ width: 200px;
|
|
|
+ height: 390px;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ top: 80px;
|
|
|
+ left: 18px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .location-item {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ line-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // background-image: var(--vent-gas-list-item-bg-img);
|
|
|
+ background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
|
|
|
+ margin: 3px 0;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ width: 80px;
|
|
|
+ text-align: right;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-bottom-btn {
|
|
|
+ width: 100%;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ background: var(--location-bottom-bg);
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid var(--location-bottom-border);
|
|
|
+ text-align: center;
|
|
|
+ padding: 2px 0;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #00557422;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.location-select-show {
|
|
|
+ right: 240px;
|
|
|
+ animation-name: locationShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.location-select-hide {
|
|
|
+ right: -2px;
|
|
|
+ animation-name: locationHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.location-btn-show {
|
|
|
+ right: -0px;
|
|
|
+ animation-name: locationBtnShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.location-btn-hide {
|
|
|
+ right: -240px;
|
|
|
+ animation-name: locationBtnHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-box {
|
|
|
+ height: 290px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-tabs-box {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tabs-box {
|
|
|
+ width: calc(100% - 12px) !important;
|
|
|
+ bottom: 3px !important;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .to-small {
|
|
|
+ position: absolute;
|
|
|
+ top: -65px;
|
|
|
+ right: 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .to-home {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: var(--image-tohome) no-repeat center;
|
|
|
+ background-size: auto;
|
|
|
+ padding: 8px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(79, 104, 134, 0.418);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-show-icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-button-group {
|
|
|
+ position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .device-active {
|
|
|
+ background: linear-gradient(45deg, #04e6fb, #0c5cab);
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ border-color: #0efcff;
|
|
|
+ box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-hide-icon {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 10px;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .enter-detail {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 35px;
|
|
|
+ top: 35px;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-right: 8px;
|
|
|
+ width: auto;
|
|
|
+ height: 33px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ padding: 5px 15px 5px 15px;
|
|
|
+ z-index: 999;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--vent-device-manager-control-btn-hover);
|
|
|
+ }
|
|
|
+
|
|
|
+ &::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: var(--vent-device-manager-control-btn);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-hide {
|
|
|
+ height: 0px;
|
|
|
+ animation-name: tableHide;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s;
|
|
|
+}
|
|
|
+
|
|
|
+.table-show {
|
|
|
+ height: 290px;
|
|
|
+ animation-name: tableShow;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ transition: all 1s;
|
|
|
+}
|
|
|
+
|
|
|
+.location-form {
|
|
|
+ display: flex;
|
|
|
+ margin: 8px;
|
|
|
+
|
|
|
+ .location-form-item {
|
|
|
+ width: 400px;
|
|
|
+
|
|
|
+ .location-form-label {
|
|
|
+ width: 100px;
|
|
|
+ display: inline-block;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ background: transparent !important;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ border: 1px solid var(--vent-form-item-border) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-select-selector {
|
|
|
+ width: 200px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@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% {
|
|
|
+ left: -400px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ left: 10px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes treeHide {
|
|
|
+ 0% {
|
|
|
+ left: 10px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ left: -400px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes locationShow {
|
|
|
+ 0% {
|
|
|
+ right: 0px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ right: 240px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes locationHide {
|
|
|
+ 0% {
|
|
|
+ right: 240px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ right: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes locationBtnShow {
|
|
|
+ 0% {
|
|
|
+ right: -240px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ right: -2px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes locationBtnHide {
|
|
|
+ 0% {
|
|
|
+ right: -2px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ right: -240px;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-picker-datetime-panel) {
|
|
|
+ height: 200px !important;
|
|
|
+ overflow-y: auto !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ // overflow: auto;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-select-dropdown) {
|
|
|
+ left: 0 !important;
|
|
|
+ color: #000000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-select-selector) {
|
|
|
+ height: 34px !important;
|
|
|
+ line-height: 34px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-input) {
|
|
|
+ height: 32px !important;
|
|
|
+ line-height: 32px !important;
|
|
|
+
|
|
|
+ .zxm-select-selection-item {
|
|
|
+ line-height: 32px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.device-button {
|
|
|
+ height: 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 20px;
|
|
|
+ background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
|
|
|
+ clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ left: calc(-6px * 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ left: calc(-6px * 2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ left: calc(-6px * 3);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ left: calc(-6px * 4);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ left: calc(-6px * 5);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ left: calc(-6px * 6);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ left: calc(-6px * 7);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(8) {
|
|
|
+ left: calc(-6px * 8);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(9) {
|
|
|
+ left: calc(-6px * 9);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(10) {
|
|
|
+ left: calc(-6px * 10);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(11) {
|
|
|
+ left: calc(-6px * 11);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(12) {
|
|
|
+ left: calc(-6px * 12);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(13) {
|
|
|
+ left: calc(-6px * 13);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(14) {
|
|
|
+ left: calc(-6px * 14);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(15) {
|
|
|
+ left: calc(-6px * 15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(16) {
|
|
|
+ left: calc(-6px * 16);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(17) {
|
|
|
+ left: calc(-6px * 17);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(18) {
|
|
|
+ left: calc(-6px * 18);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(19) {
|
|
|
+ left: calc(-6px * 19);
|
|
|
+ }
|
|
|
+
|
|
|
+ // &:first-child {
|
|
|
+ // clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+// :deep(.@{ventSpace}-pagination){
|
|
|
+// margin-right: 20px !important;
|
|
|
+// margin-top: 5px !important;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// }</style>
|
hongrunxia
