12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142 |
- <template>
- <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
- <a-spin :spinning="loading" >
- </a-spin>
- <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
- <div v-if="globalConfig?.simulatedPassword" id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none;">
- <div style="z-index: -1; position: relative">
- <div class="elementTag" id="inputBox">
- <div class="elementContent">
- <p>风筒入口风速:{{ selectData.windSpeed1 ? selectData.windSpeed1 : '-' }}</p>
- <p>风筒入口瓦斯浓度 {{ selectData.gas2 ? selectData.gas2 : '-' }}</p>
- </div>
- </div>
- <div class="elementTag" id="outBox">
- <div class="elementContent elementContent-r">
- <p>迎头供风量:{{ selectData.windQuantity1 ? selectData.windQuantity2 : '-' }}</p>
- <p>迎头瓦斯浓度:{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
- </div>
- </div>
- <div class="elementTag" id="returnBox">
- <div class="elementContent">
- <p>回风流瓦斯浓度:{{ selectData.gas3 ? selectData.gas3 : '-' }}</p>
- </div>
- </div>
- <!-- <div class="elementTag" id="gateBox">
- <div class="elementContent">
- <p>风门状态:关</p>
- <p>风门过风面积:{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
- </div>
- </div>
- <div class="elementTag" id="windownBox">
- <div class="elementContent">
- <p>风窗全风压回风流:0</p>
- </div>
- </div> -->
- </div>
- </div>
- </div>
-
- <div class="scene-box">
- <div class="top-box" v-if="!loading">
- <div class="top-center row">
- <div class="vent-flex-row" id="fanLocalSelectDom" v-if="getDictItemsByCode('fanlocaltype') && !globalConfig?.simulatedPassword">
- <span style="color: #00f5fe; margin-left: 5px;">风机类型:</span>
- <JDictSelectTag v-model:value="devicekide" dictCode="fanlocaltype" :showChooseOption="false" :getPopupContainer="getPopupContainer" @change="changeDeviceKind" />
- </div>
- <!-- fanlocal_systeml_zj 模拟局部风机,不显示操作按钮 -->
- <div v-if="selectData.deviceType != 'fanlocal_systeml_zj'" class="button-box" v-for="(item, index) in modalTypeArr.leftBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
- </div>
- <div class="top-right row">
- <div class="button-box" v-for="(item, index) in modalTypeArr.rightBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
- </div>
- </div>
- <div class="title-text">
- {{ selectData.supplyAirAddr||selectData.stationname }}
- </div>
- <div class="data-show-box" v-if="!loading">
- <div class="data-item">
- <div class="item-header">环境监测</div>
- <div class="item-container">
- <div class="tab">
- <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
- >主机</div
- >
- <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
- >备机</div
- >
- </div>
- <div class="container-group">
- <div class="warning-header">
- <div class="header-item">
- <div class="header-title">报警总数</div>
- <div class="header-value">0</div>
- </div>
- <div class="header-item">
- <div class="header-title"> 未处理数</div>
- <div class="header-value">0</div>
- </div>
- </div>
- <div class="warning-group">
- <template v-if="selectData.deviceType">
- <!-- <div class="warning-item" v-for="(state, index) in leftColumns" :key="index">
- <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
- <div v-if="state.dataIndex.startsWith('Fan')">
- <div class="signal-item" v-if="warningMonitorRowIndex == 0">
- <div
- class="signal-round"
- :class="{
- 'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
- 'signal-round-warning':
- selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
- 'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
- }"
- ></div>
- <div class="vent-margin-l-8">{{
- selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
- ? '无状态'
- : selectData[state.dataIndex.replace('Fan', 'Fan1')]
- ? '正常'
- : '异常'
- }}</div>
- </div>
- <div class="signal-item" v-if="warningMonitorRowIndex == 1">
- <div
- class="signal-round"
- :class="{
- 'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
- 'signal-round-warning':
- selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
- 'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
- }"
- ></div>
- <div class="vent-margin-l-8">{{
- selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
- ? '无状态'
- : selectData[state.dataIndex.replace('Fan', 'Fan2')]
- ? '正常'
- : '异常'
- }}</div>
- </div>
- </div>
- <div v-else>
- <div class="signal-item">
- <div
- class="signal-round vent-margin-l-8"
- :class="{
- 'signal-round-run': selectData[state.dataIndex],
- 'signal-round-warning': selectData[state.dataIndex] !== undefined && !selectData[state.dataIndex],
- 'signal-round-gry': selectData[state.dataIndex] === undefined,
- }"
- ></div>
- <div class="vent-margin-l-8">{{ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常' }}</div>
- </div>
- </div>
- </div> -->
- <div class="container-item" v-for="(data, index) in leftColumns" :key="index">
- <div class="item-icon">
- <!-- <SvgIcon class="icon-style" size="18" name="temperature" /> -->
- <CaretRightOutlined class="icon-style" />
- </div>
- <div class="item-name">{{ data.title }}</div>
- <div v-if="data.dataIndex.startsWith('Fan')">
- <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
- selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
- }}</div>
- <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
- selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
- }}</div>
- </div>
- <div v-else>
- <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
- </div>
- </div>
- </template>
- </div>
- </div>
- </div>
-
- </div>
- <div class="data-item">
- <div class="item-header">设备监测</div>
- <div class="item-container">
- <div class="tab">
- <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
- >主机</div
- >
- <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
- >备机</div
- >
- </div>
- <div class="container-group container-group-l" >
- <template v-if="!loading">
- <div class="container-item" v-for="(data, index) in rightColumns" :key="index">
- <div class="item-icon">
- <!-- <SvgIcon class="icon-style" size="18" name="temperature" /> -->
- <!-- <StarOutlined /> -->
- <CaretRightOutlined class="icon-style" />
- </div>
- <div class="item-name">{{ data.title }}</div>
- <div v-if="data.dataIndex.startsWith('Fan')">
- <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
- selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
- }}</div>
- <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
- selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
- }}</div>
- </div>
- <div v-else>
- <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
- </div>
- </div>
- </template>
- </div>
- </div>
- </div>
- </div>
- <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 170, scroll, 180)">
- <dv-border-box8 :dur="5" class="dv_border_8" :style="`bottom: 20px; padding: 5px; height: ${scroll.y + 140}px`" >
- <!-- <div class="enter-detail" @click="goDetail()">
- <send-outlined class=""/>风机运行详情
- </div> -->
- <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
- <a-tab-pane key="1" tab="实时监测">
- <GroupMonitorTable v-if="activeKey === '1'" ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${selectData.deviceType}_monitor`" @selectRow="getSelectRow" :scroll="scroll" :is-action="true">
- <template #action="{ record }">
- <a class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
- <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
- </template>
- </GroupMonitorTable>
- </a-tab-pane>
- <a-tab-pane key="2" tab="实时曲线图" force-render>
- <div class="tab-item" v-if="activeKey === '2'">
- <div class="vent-flex-row-between" style="height: 100%">
- <BarSingle
- :xAxisData="xAxisDataGas"
- :dataSource="dataSource[selectRowIndex]"
- height="100%"
- :chartsColumns="chartsColumns"
- style="flex: 3"
- />
- <BarSingle
- v-if="globalConfig?.simulatedPassword"
- :xAxisData="[
- { key: 'F1', valueKey: 'windQuantity1' },
- { key: 'F2', valueKey: 'windQuantity2' },
- ]"
- :dataSource="dataSource[selectRowIndex]"
- height="100%"
- :chartsColumns="chartsColumns1"
- style="flex: 2"
- />
- </div>
- </div>
- </a-tab-pane>
- <a-tab-pane key="3" tab="历史数据">
- <div class="tab-item" v-if="activeKey === '3'">
- <HistoryTable :columns-type="`${selectData.deviceType}`" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="fanlocal-history" :scroll="scroll" />
- </div>
- </a-tab-pane>
- <a-tab-pane key="4" tab="报警历史">
- <div class="tab-item" v-if="activeKey === '4'">
- <AlarmHistoryTable columns-type="alarm" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
- </div>
- </a-tab-pane>
- <a-tab-pane key="5" tab="操作历史">
- <div class="tab-item" v-if="activeKey === '5'">
- <HandlerHistoryTable columns-type="operator_history" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
- </div>
- </a-tab-pane>
- </a-tabs>
- </dv-border-box8>
- </div>
- </div>
- <!-- <div style="z-index: -1; position: absolute; top: 50px; right: 10px; width: 300px; height: 280px; margin: auto" class="player1">
- <LivePlayer id="jb-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
- </div> -->
- <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none;">
- </div>
- <a-modal v-model:visible="modalIsShow" :title="modalTitle" @ok="handleOk">
- <div class="modal-container">
- <div class="vent-flex-row">
- <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
- <div class="warning-text">您是否要进行{{ modalTitle }}操作?</div>
- </div>
- <div class="" v-if="modalType == 'startSmoke'">
- <div class="startSmoke-select">
- <div class="label">主机:</div>
- <a-radio-group v-model:value="mainWindIsShow1" @change="changeMotor" name="localWind1">
- <a-radio value="open">开启</a-radio>
- <a-radio value="stop">停止</a-radio>
- </a-radio-group>
- </div>
- <div class="startSmoke-select">
- <div class="label">备机:</div>
- <a-radio-group v-model:value="mainWindIsShow2" @change="changeMotor" name="localWind2">
- <a-radio value="open">开启</a-radio>
- <a-radio value="stop">停止</a-radio>
- </a-radio-group>
- </div>
- </div>
- <!-- 调频 -->
- <!-- <div class="vent-flex-row input-box" v-if="modalType == 'Fan1Frequency'">
- <div class="label">主风机运行频率(Hz):</div>
- <a-input-number size="small" v-model:value="fan1FrequencyVal" :min="30" :max="50" :step="0.1" />
- </div>
- <div class="vent-flex-row input-box" v-if="modalType == 'Fan2Frequency'">
- <div class="label">备风机运行频率(Hz):</div>
- <a-input-number size="small" v-model:value="fan2FrequencyVal" :min="30" :max="50" :step="0.1" />
- </div> -->
- <!-- <div class="vent-flex-row input-box" v-if="modalType == 'needAir'">
- <div class="label">需风量(单位):</div>
- <a-input-number size="small" v-model:value="frequencyVal" :min="30" :max="50" :step="0.1" />
- </div>
- <div class="vent-flex-row input-box" v-if="modalType == 'disAirAlarm'">
- <div class="label">漏风率(%):</div>
- <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
- </div>
- <div class="vent-flex-row input-box" v-if="modalType == 'diameter'">
- <div class="label">风筒直径(m):</div>
- <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
- </div>
- <div class="vent-flex-row input-box" v-if="modalType == 'len'">
- <div class="label">风筒长度(m):</div>
- <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
- </div>
- <div class="vent-flex-row input-box" v-if="modalType == 'windPowerLimit'">
- <div class="label">风电闭锁限值(m³/min):</div>
- <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
- </div>
- <div class="vent-flex-row input-box" v-if="modalType == 'gasPowerLimit'">
- <div class="label">瓦斯电闭锁限值(m³/min):</div>
- <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
- </div>
- <div v-if="modalType == 'gasAlarm'">
- <div class="vent-flex-row input-box">
- <div class="label">传感器名称:</div>
- <a-select placeholder="传感器" @change="handleChangeSensor" :options="sensorList" v-model:value="modalSensor" />
- </div>
- <div class="vent-flex-row input-box">
- <div class="label">传感器值:</div>
- <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
- </div>
- </div>
- <div v-if="modalType == 'airVolumeAlarm'">
- <div class="vent-flex-row input-box">
- <div class="label">风量上限(m³/min):</div>
- <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].min" :min="0" :max="50" :step="0.1" />
- </div>
- <div class="vent-flex-row input-box">
- <div class="label">风量下限(m³/min):</div>
- <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].max" :min="0" :max="50" :step="0.1" />
- </div>
- </div> -->
- <!-- 启动或停止 -->
- <div class="" v-if="modalType == 'startSmoke'"> </div>
- <div v-if="!globalConfig?.simulatedPassword" class="vent-flex-row input-box">
- <div class="label">操作密码:</div>
- <a-input size="small" type="password" v-model:value="passWord" />
- </div>
- </div>
- </a-modal>
- <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']"/>
- </template>
- <script setup lang="ts">
- import { ExclamationCircleFilled } from '@ant-design/icons-vue';
- import { onBeforeMount, ref, watch, onMounted, nextTick, toRaw, reactive, onUnmounted, inject, unref } from 'vue';
- import BarSingle from '../../../../components/chart/BarSingle.vue';
- import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
- import HistoryTable from '../comment/HistoryTable.vue';
- import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
- import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
- import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
- import { mountedThree, setModelType, destroy, addCssText, addText, playSmoke } from './fanLocal.three';
- import lodash from 'lodash';
- import { getTableList, list } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
- import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
- import { chartsColumns, chartsColumns1 } from './fanLocal.data';
- import { deviceControlApi } from '/@/api/vent/index';
- import LivePlayer from '@liveqing/liveplayer-v3';
- import { setDivHeight } from '/@/utils/event';
- import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
- import { SvgIcon } from '/@/components/Icon';
- import { useRouter } from 'vue-router';
- import { useModal } from '/@/components/Modal';
- import type { BasicColumn } from '/@/components/Table/src/types/table';
- import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
- import { getPopupContainer } from '/@/utils';
- import { getDictItemsByCode } from '/@/utils/dict';
- import { message } from 'ant-design-vue';
- import { useCamera } from '/@/hooks/system/useCamera';
- import { CaretRightOutlined } from '@ant-design/icons-vue';
- const globalConfig = inject('globalConfig');
- const [registerModal, { openModal, closeModal }] = useModal();
- const { currentRoute } = useRouter();
- const modalTypeArr = reactive(
- VENT_PARAM['simulatedPassword'] ?
- {
- leftBtnArr: [
- {
- key: 'startSmoke',
- value: '启动风机',
- },
- {
- key: 'changeSmoke',
- value: '一键倒机',
- },
- // {
- // key: 'Fan1Frequency',
- // value: '主机调频',
- // },
- // {
- // key: 'Fan2Frequency',
- // value: '备机调频',
- // },
- {
- key: 'windPower',
- value: '风电闭锁',
- },
- {
- key: 'gasPower',
- value: '瓦斯电闭锁',
- },
- {
- key: 'needAir',
- value: '需风量',
- },
- {
- key: 'diameter',
- value: '风筒直径',
- },
- {
- key: 'len',
- value: '风筒长度',
- },
- ],
- rightBtnArr: [
- // {
- // key: 'fanlocal',
- // value: '变频风机',
- // },
- // {
- // key: 'fanlocaldp',
- // value: '定频风机',
- // },
- {
- key: 'frequency',
- value: '调频',
- },
- {
- key: 'windPowerLimit',
- value: '风电闭锁限值',
- },
- {
- key: 'gasPowerLimit',
- value: '瓦斯电闭锁限值',
- },
- {
- key: 'airVolumeAlarm',
- value: '风量报警',
- min: 0,
- max: 100,
- },
- {
- key: 'disAirAlarm',
- value: '漏风率报警',
- },
- {
- key: 'gasAlarm',
- value: '瓦斯报警',
- },
- ],
- }: {
- leftBtnArr: [
- {
- key: 'startSmoke',
- value: '启动风机',
- },
- {
- key: 'changeSmoke',
- value: '一键倒机',
- },
- ],
- rightBtnArr: [
- ],
- });
- const sensorList = ref<any[]>([
- {
- value: '1',
- label: 'T1',
- },
- {
- value: '2',
- label: 'T2',
- },
- {
- value: '3',
- label: 'T3',
- },
- ]);
- const scroll = reactive({
- y: 180
- })
- const playerRef = ref()
- const MonitorDataTable = ref()
- const modalSensor = ref(null);
- const loading = ref(false);
- const activeKey = ref('1');
- const player1 = ref();
- const modalIsShow = ref<boolean>(false); // 是否显示模态框
- const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
- const fan1FrequencyVal = ref(40); //主机频率
- const fan2FrequencyVal = ref(40); //备机频率
- const mainWindIsShow1 = ref('open'); // 主机默认启动leftColumns
- const mainWindIsShow2 = ref('stop'); // 备机默认不启动
- const passWord = ref('');
- // 默认初始是第一行
- const selectRowIndex = ref(-1);
- const dataMonitorRowIndex = ref(0);
- // 默认数据右边监测的是主机
- const warningMonitorRowIndex = ref(0);
- const xAxisDataGas = ref([])
- // 设备数据
- const controlType = ref(1);
- const modalType = ref('fm');
- // 监测数据
- const initData = {
- deviceID: '',
- deviceType: '',
- strname: '',
- dataDh: '-', //压差
- dataDtestq: '-', //测试风量
- sourcePressure: '-', //气源压力
- dataDequivalarea: '-',
- netStatus: '0', //通信状态
- warnLevel_str: '',
- stationname: ''
- };
- const dataSource = ref([]);
- // 监测数据
- let selectData = reactive(lodash.cloneDeep(initData));
- const rightColumns = ref<BasicColumn[]>([])
- const leftColumns = ref<BasicColumn[]>([])
- const devicekide = ref('fanlocal')
- const deviceType = ref(selectData.deviceType)
- const headElHeight = ref(0)
- const {getCamera, webRtcServer} = useCamera()
- watch(deviceType , (type) => {
- rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as []
- if(rightColumns.value && rightColumns.value.length < 1){
- rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as []
- }
- leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as []
- if (leftColumns.value && leftColumns.value.length < 1) {
- leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as []
- }
- })
- const flvURL1 = () => {
- // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
- return ''
- };
-
- const changeDeviceKind = (e) => {
- devicekide.value = e
- loading.value = true
- selectRowIndex.value = -1
- nextTick( () => {
- // selectRowIndex.value = 0
- selectData = lodash.cloneDeep(initData)
- loading.value = false
- if(selectData.deviceID)MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
-
- const headEl = document.querySelector(`.zxm-table-thead`);
- if (headEl) {
- headElHeight.value = headEl.clientHeight
- }
- })
- }
- const tabChange = (activeKeyVal) => {
- activeKey.value = activeKeyVal;
- if (activeKeyVal == 1) {
- nextTick(() => {
- MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
- })
- }
- };
- const selectDevice = (key, val) => {
- if (key === 'dataMonitorRowIndex') {
- dataMonitorRowIndex.value = val;
- } else {
- warningMonitorRowIndex.value = val;
- }
- };
- //详情
- function goDetail() {
- openModal()
- }
- //
- async function getDataSource(){
- if(devicekide.value){
- const res = await list({ devicetype: devicekide.value, pagetype: 'normal' });
- if (res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0) {
- const dataArr = res.msgTxt[0].datalist || [];
- dataSource.value = [];
- dataArr.forEach((data) => {
- const readData = data.readData;
- data = Object.assign(data, readData);
- dataSource.value.push(data);
- });
- if (MonitorDataTable.value && selectRowIndex.value == -1) {
- MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']])
- }
- const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
- return data;
- } else {
- return dataSource.value = []
- }
- }else{
- dataSource.value = [];
- }
- };
- // https获取监测数据
- let timer: null | NodeJS.Timeout = null;
- async function getMonitor(flag?) {
- if (Object.prototype.toString.call(timer) === '[object Null]') {
- timer = await setTimeout(async () => {
- await getDataSource();
- if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
- // 初始打开页面
- if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
- MonitorDataTable.value.setSelectedRowKeys(currentRoute.value['query']['id'])
- }else{
- MonitorDataTable.value.setSelectedRowKeys(dataSource.value[0]['deviceID'])
- }
- }
- for (const key in selectData) {
- selectData[key] = ''
- }
-
- if(dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]){
- deviceType.value = dataSource.value[selectRowIndex.value]['deviceType']
- if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
- Object.assign(selectData, dataSource.value[selectRowIndex.value])
- }
- playSmoke(selectData)
- addText(selectData);
- if (timer) {
- timer = null;
- }
- }
- getMonitor();
- }, flag ? 0 :1000);
- }
- };
- // 获取设备基本信息列表
- const deviceBaseList = ref([]);
- function getDeviceBaseList() {
- getTableList({ pageSize: 1000 }).then((res) => {
- deviceBaseList.value = res.records;
- });
- };
- // 切换检测数据
- async function getSelectRow(id) {
- console.log('选中的设备id------->', id)
- if (!id || id == selectData['deviceID']) return;
- // loading.value = true;
- const selectIndex: any = dataSource.value.findIndex((baseData: any) => baseData.deviceID == id);
- selectRowIndex.value = selectIndex;
- modalType.value = selectIndex > 0 ? 'fm' : 'fc';
- nextTick(() => {
- const headEl = document.querySelector(`.zxm-table-thead`);
- if (headEl) {
- headElHeight.value = headEl.clientHeight
- }
- setModelType(modalType.value).then(() => {
- // loading.value = false;
- });
-
- const data = dataSource.value[selectIndex];
- if(data){
- if (data['Fan1StartStatus'] == 1) {
- mainWindIsShow1.value = 'open';
- mainWindIsShow2.value = 'stop';
- selectDevice('warningMonitorRowIndex', 0)
- selectDevice('dataMonitorRowIndex', 0)
- } else if (data['Fan2StartStatus'] == 1) {
- mainWindIsShow2.value = 'open';
- mainWindIsShow1.value = 'stop';
- selectDevice('warningMonitorRowIndex', 1)
- selectDevice('dataMonitorRowIndex', 1)
- }
- const xAxisDataGasArr = []
- for (const key in selectData) {
- if (key.startsWith('gas') && key.length < 5) {
- xAxisDataGasArr.push({ key: 'T' + key.substring(3), valueKey: key })
- }
- }
- xAxisDataGas.value = xAxisDataGasArr
- }
- })
- await getCamera(id, playerRef.value)
- return;
- };
- // 打开并设置modal的标题
- function showModal(obj) {
- modalType.value = obj.key;
- modalTitle.value = obj.value;
- passWord.value = '';
- modalIsShow.value = true;
- };
- function changeMotor(e){
- const target = e.target;
- if (target.name === 'localWind1') {
- if (target.value === 'open') {
- mainWindIsShow2.value = 'stop';
- }
- } else if (target.name === 'localWind2') {
- if (target.value === 'open') {
- mainWindIsShow1.value = 'stop';
- }
- }
- };
- function handleOk(e: MouseEvent) {
- const handType = modalType.value;
- const data = {
- deviceid: selectData.deviceID,
- devicetype: selectData.deviceType,
- paramcode: '',
- password: passWord.value,
- value: null,
- };
- if (handType === 'startSmoke') {
- // 启动风机
- if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
- // playSmoke(handType, 'top', frequency, 'open');
- data.paramcode = 'CtrlFan1Start';
- deviceControlApi(data).then(() => {
- if (globalConfig.History_Type == 'remote') {
- message.success('指令已下发至生产管控平台成功!')
- } else {
- message.success('指令已下发成功!')
- }
- modalTitle.value = '';
- modalIsShow.value = false;
- }).catch((err) => {
- });
- } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
- // playSmoke(handType, 'down', frequency, 'open');
- data.paramcode = 'CtrlFan2Start';
- deviceControlApi(data).then(() => {
- if (globalConfig.History_Type == 'remote') {
- message.success('指令已下发至生产管控平台成功!')
- } else {
- message.success('指令已下发成功!')
- }
- modalTitle.value = '';
- modalIsShow.value = false;
- }).catch((err) => {
- });
- } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
- // playSmoke(handType, '', frequency, 'stop');
- }
- } else if (handType === 'Fan1Frequency' || handType === 'Fan2Frequency') {
- // 调频
- if (handType === 'Fan1Frequency') {
- data.paramcode = 'Fan1FreqHz';
- data.value = fan1FrequencyVal.value;
- } else if (handType === 'Fan2Frequency') {
- data.paramcode = 'Fan2FreqHz';
- data.value = fan2FrequencyVal.value;
- }
-
- deviceControlApi(data).then((res) => {
- if (globalConfig.History_Type == 'remote') {
- message.success('指令已下发至生产管控平台成功!')
- } else {
- message.success('指令已下发成功!')
- }
- modalTitle.value = '';
- modalIsShow.value = false;
- }).catch((err) => {
-
- });
- } else if (handType === 'changeSmoke') {
- if(selectData['Fan1StartStatus'] == 0 || !selectData['Fan1StartStatus']){
- data.paramcode = 'CtrlFan1Start';
- deviceControlApi(data).then((res) => {
- if (globalConfig.History_Type == 'remote') {
- message.success('指令已下发至生产管控平台成功!')
- } else {
- message.success('指令已下发成功!')
- }
- modalTitle.value = '';
- modalIsShow.value = false;
- mainWindIsShow1.value = 'stop';
- mainWindIsShow2.value = 'open';
- }).catch((err) => {
- });
-
- }else if(selectData['Fan2StartStatus'] == 0 || !selectData['Fan2StartStatus']){
- data.paramcode = 'CtrlFan2Start';
- deviceControlApi(data).then((res) => {
- if (globalConfig.History_Type == 'remote') {
- message.success('指令已下发至生产管控平台成功!')
- } else {
- message.success('指令已下发成功!')
- }
- modalTitle.value = '';
- modalIsShow.value = false;
- mainWindIsShow1.value = 'open';
- mainWindIsShow2.value = 'stop';
- }).catch((err) => {
- });
-
- }
- // // 一键倒机
- // if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
- // // playSmoke('startSmoke', 'down', frequency, 'open');
- // data.paramcode = 'CtrlFan2Start';
- // deviceControlApi(data).then((res) => {
- // console.log('设备操作结果', res);
- // modalTitle.value = '';
- // modalIsShow.value = false;
- // }).catch((err) => {
- // });
- // mainWindIsShow1.value = 'stop';
- // mainWindIsShow2.value = 'open';
- // } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
- // // playSmoke('startSmoke', 'top', frequency, 'open');
- // data.paramcode = 'CtrlFan1Start';
- // deviceControlApi(data).then((res) => {
- // console.log('设备操作结果', res);
- // modalTitle.value = '';
- // modalIsShow.value = false;
- // }).catch((err) => {
- // });
- // mainWindIsShow1.value = 'open';
- // mainWindIsShow2.value = 'stop';
- // } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
- // // playSmoke(handType, '', frequency, 'stop');
- // }
- }
-
- };
- function handleChangeSensor(value: string){
- console.log(value);
- };
- function addPlayVideo() {
- if (player1.value && player1.value.play) {
- if (!player1.value.paused()) player1.value.play();
- document.body.removeEventListener('mousedown', addPlayVideo);
- }
- };
- function deviceEdit(e:Event, type:string, record) {
- e.stopPropagation()
- openModal(true, {
- type,
- deviceId: record['deviceID']
- })
- }
- onBeforeMount(() => {
- getDeviceBaseList();
- });
- onMounted(() => {
- const { query } = unref(currentRoute);
- if(query['deviceType']) devicekide.value = query['deviceType'] as string
- mountedThree(player1.value).then(async () => {
- await getMonitor(true);
- nextTick(async() => {
- addCssText();
- });
- });
-
- document.body.addEventListener('mousedown', addPlayVideo, false);
- });
- onUnmounted(() => {
- destroy();
- if (timer) {
- clearTimeout(timer);
- timer = undefined;
- }
- if (webRtcServer.length > 0) {
- webRtcServer.forEach(item => {
- item.disconnect()
- })
- }
- });
- </script>
- <style scoped lang="less">
- @import '/@/design/vent/modal.less';
- :deep(.@{ventSpace}-tabs-tabpane-active) {
- height: 100%;
- }
- .scene-box {
- .title-text{
- height: 32px;
- }
- .bottom-tabs-box{
- height: 280px;
- .tabs-box{
- position: relative !important;
- }
- }
- }
-
- .data-show-box {
- position: relative;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- padding: 10px 5px;
- color: #ffffff;
- z-index: 999;
- top: 60px;
- .data-item {
- pointer-events: auto;
- .item-header {
- width: 374px;
- background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
- background-size: auto;
- height: 32px;
- text-align: center;
- line-height: 34px;
- font-size: 15px;
- font-weight: 600;
- color: #fafafa;
- }
- .item-container {
- width: 346px;
- margin: 0 14px;
- padding: 10px;
- background: #00377c33;
- backdrop-filter: blur(2px);
- .tab {
- width: 323px;
- background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
- display: flex;
- .tab-item {
- flex: 1;
- text-align: center;
- padding-top: 2px;
- color: #ffffff99;
- cursor: pointer;
- &:hover {
- color: #ffffff;
- }
- }
- .tab-item-active-l {
- color: #ffffff;
- background-image: url('/@/assets/images/vent/l-tab-active.png');
- background-repeat: no-repeat;
- background-size: auto;
- background-position: 6px 3px;
- }
- .tab-item-active-r {
- color: #ffffff;
- background-image: url('/@/assets/images/vent/r-tab-active.png');
- background-repeat: no-repeat;
- background-position: 0 3px;
- }
- }
- .container-group {
- width: 314px;
- margin: 0px 4px;
- padding: 10px 0;
- min-height: 432px;
- background: linear-gradient(to right, #00deff22, #2081ff05);
- max-height: 440px;
- overflow-y: auto;
- }
- .container-item {
- width: 100%;
- height: 60px;
- display: flex;
- padding: 10px 0 0 20px;
- margin-bottom: 5px;
- position: relative;
- background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
- background-size: auto;
- background-position: bottom;
- &::before {
- content: '';
- display: block;
- width: 100%;
- height: 5px;
- position: absolute;
- top: 62px;
- left: 0;
- background-color: #73f4ff66;
- backdrop-filter: blur(5px);
- }
- .item-icon {
- width: 54px;
- height: 45px;
- background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
- background-size: cover;
- .icon-style {
- font-size: 18px;
- margin: 10px 0 0 20px;
- color: #ffc800;
- }
- }
- .item-name {
- width: 180px;
- line-height: 60px;
- }
- .item-value {
- position: relative;
- height: 26px;
- line-height: 24px;
- margin: 15px 0;
- text-align: center;
- width: 80px;
- border: 1px solid #00f5fe;
- border-radius: 13px;
- background: linear-gradient(to right, #00f5fe44, #0090ff44);
- &::before {
- width: 6px;
- height: 6px;
- content: '';
- position: absolute;
- left: -3px;
- top: 8px;
- background: #ffa500;
- border-radius: 3px;
- }
- }
- }
- .warning-header {
- display: flex;
- font-size: 14px;
- .header-item {
- flex: 1;
- display: flex;
- flex-direction: column;
- margin: 5px 10px;
- justify-content: center;
- align-items: center;
- .header-title {
- color: #39e7fe;
- }
- .header-value {
- width: 133px;
- height: 56px;
- font-weight: 600;
- font-family: 'douyuFont';
- font-size: 16px;
- color: #ffa500;
- display: flex;
- justify-content: center;
- align-items: center;
- background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
- }
- }
- }
- .warning-group {
- padding: 0 10px;
- position: relative;
- // &::before {
- // content: '';
- // display: block;
- // width: 1px;
- // height: 100%;
- // position: absolute;
- // left: 12px;
- // background-color: #00f5fe;
- // }
- .warning-item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- height: 38px;
- .item-name {
- .icon {
- width: 6px;
- height: 6px;
- display: inline-block;
- background-color: #1cd5ff;
- border-radius: 3px;
- position: relative;
- margin-right: 5px;
- &::before {
- content: '';
- width: 10px;
- height: 10px;
- display: block;
- border: 1px solid #34edff99;
- border-radius: 5px;
- position: absolute;
- top: -2px;
- left: -2px;
- }
- }
- }
- }
- }
- }
- }
- }
- .input-box {
- display: flex;
- align-items: center;
- .input-title {
- color: #73e8fe;
- width: auto;
- }
- margin-right: 10px;
- }
- .label {
- max-width: 220px;
- }
- #fanLocalSelectDom{
- :deep(.@{ventSpace}-select-dropdown){
- left: 0px !important;
- top: 35px !important;
- }
- }
- .@{ventSpace}-input {
- width: 150px;
- }
- :deep(#LivePlayerBox){
- display: flex;
- justify-content: end;
- padding-right: 380px;
- }
- </style>
|