index.vue 43 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193
  1. <template>
  2. <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
  3. <a-spin :spinning="loading" />
  4. <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
  5. <div
  6. v-if="globalConfig?.simulatedPassword"
  7. id="fanLocal3DCSS"
  8. class="threejs-Object-CSS"
  9. style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none"
  10. >
  11. <div style="z-index: -1; position: relative">
  12. <div class="elementTag" id="inputBox">
  13. <div class="elementContent">
  14. <p>风筒入口风速:{{ selectData.windSpeed1 ? selectData.windSpeed1 : '-' }}</p>
  15. <p>风筒入口瓦斯浓度 {{ selectData.gas2 ? selectData.gas2 : '-' }}</p>
  16. </div>
  17. </div>
  18. <div class="elementTag" id="outBox">
  19. <div class="elementContent elementContent-r">
  20. <p>迎头供风量:{{ selectData.windQuantity1 ? selectData.windQuantity2 : '-' }}</p>
  21. <p>迎头瓦斯浓度:{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
  22. </div>
  23. </div>
  24. <div class="elementTag" id="returnBox">
  25. <div class="elementContent">
  26. <p>回风流瓦斯浓度:{{ selectData.gas3 ? selectData.gas3 : '-' }}</p>
  27. </div>
  28. </div>
  29. <!-- <div class="elementTag" id="gateBox">
  30. <div class="elementContent">
  31. <p>风门状态:关</p>
  32. <p>风门过风面积:{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
  33. </div>
  34. </div>
  35. <div class="elementTag" id="windownBox">
  36. <div class="elementContent">
  37. <p>风窗全风压回风流:0</p>
  38. </div>
  39. </div> -->
  40. </div>
  41. </div>
  42. </div>
  43. <div class="scene-box">
  44. <div class="top-box" v-if="!loading">
  45. <div class="top-center row">
  46. <div class="vent-flex-row" id="fanLocalSelectDom" v-if="getDictItemsByCode('fanlocaltype') && !globalConfig?.simulatedPassword">
  47. <span style="color: #00f5fe; margin-left: 5px">风机类型:</span>
  48. <JDictSelectTag
  49. v-model:value="devicekide"
  50. dictCode="fanlocaltype"
  51. :showChooseOption="false"
  52. :getPopupContainer="getPopupContainer"
  53. @change="changeDeviceKind"
  54. />
  55. </div>
  56. <!-- fanlocal_systeml_zj 模拟局部风机,不显示操作按钮 -->
  57. <div
  58. v-if="selectData.deviceType != 'fanlocal_systeml_zj'"
  59. class="button-box"
  60. v-for="(item, index) in modalTypeArr.leftBtnArr"
  61. :key="index"
  62. @click="showModal(item)"
  63. >{{ item.value }}</div
  64. >
  65. </div>
  66. <div class="top-right row">
  67. <div class="button-box" v-for="(item, index) in modalTypeArr.rightBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
  68. </div>
  69. </div>
  70. <div class="title-text">
  71. {{ selectData.supplyAirAddr || selectData.strinstallpos || selectData.stationname }}
  72. </div>
  73. <div class="data-show-box" v-if="!loading">
  74. <div class="data-item">
  75. <div class="item-header">环境监测</div>
  76. <div class="item-container">
  77. <div class="tab">
  78. <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
  79. >主机</div
  80. >
  81. <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
  82. >备机</div
  83. >
  84. </div>
  85. <div class="container-group">
  86. <div class="warning-header">
  87. <div class="header-item">
  88. <div class="header-title">报警总数</div>
  89. <div class="header-value">0</div>
  90. </div>
  91. <div class="header-item">
  92. <div class="header-title"> 未处理数</div>
  93. <div class="header-value">0</div>
  94. </div>
  95. </div>
  96. <div class="warning-group">
  97. <template v-if="selectData.deviceType">
  98. <!-- <div class="warning-item" v-for="(state, index) in leftColumns" :key="index">
  99. <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
  100. <div v-if="state.dataIndex.startsWith('Fan')">
  101. <div class="signal-item" v-if="warningMonitorRowIndex == 0">
  102. <div
  103. class="signal-round"
  104. :class="{
  105. 'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
  106. 'signal-round-warning':
  107. selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
  108. 'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
  109. }"
  110. ></div>
  111. <div class="vent-margin-l-8">{{
  112. selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
  113. ? '无状态'
  114. : selectData[state.dataIndex.replace('Fan', 'Fan1')]
  115. ? '正常'
  116. : '异常'
  117. }}</div>
  118. </div>
  119. <div class="signal-item" v-if="warningMonitorRowIndex == 1">
  120. <div
  121. class="signal-round"
  122. :class="{
  123. 'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
  124. 'signal-round-warning':
  125. selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
  126. 'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
  127. }"
  128. ></div>
  129. <div class="vent-margin-l-8">{{
  130. selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
  131. ? '无状态'
  132. : selectData[state.dataIndex.replace('Fan', 'Fan2')]
  133. ? '正常'
  134. : '异常'
  135. }}</div>
  136. </div>
  137. </div>
  138. <div v-else>
  139. <div class="signal-item">
  140. <div
  141. class="signal-round vent-margin-l-8"
  142. :class="{
  143. 'signal-round-run': selectData[state.dataIndex],
  144. 'signal-round-warning': selectData[state.dataIndex] !== undefined && !selectData[state.dataIndex],
  145. 'signal-round-gry': selectData[state.dataIndex] === undefined,
  146. }"
  147. ></div>
  148. <div class="vent-margin-l-8">{{ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常' }}</div>
  149. </div>
  150. </div>
  151. </div> -->
  152. <div class="container-item" v-for="(data, index) in leftColumns" :key="index">
  153. <div class="item-icon">
  154. <!-- <SvgIcon class="icon-style" size="18" name="temperature" /> -->
  155. <CaretRightOutlined class="icon-style" />
  156. </div>
  157. <div class="item-name">{{ data.title }}</div>
  158. <div v-if="data.dataIndex.startsWith('Fan')">
  159. <div class="item-value" v-if="warningMonitorRowIndex == 0">{{
  160. selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
  161. }}</div>
  162. <div class="item-value" v-if="warningMonitorRowIndex == 1">{{
  163. selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
  164. }}</div>
  165. </div>
  166. <div v-else>
  167. <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
  168. </div>
  169. </div>
  170. </template>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. <div class="data-item">
  176. <div class="item-header">设备监测</div>
  177. <div class="item-container">
  178. <div class="tab">
  179. <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
  180. >主机</div
  181. >
  182. <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
  183. >备机</div
  184. >
  185. </div>
  186. <div class="container-group container-group-l">
  187. <template v-if="!loading">
  188. <div class="container-item" v-for="(data, index) in rightColumns" :key="index">
  189. <div class="item-icon">
  190. <!-- <SvgIcon class="icon-style" size="18" name="temperature" /> -->
  191. <!-- <StarOutlined /> -->
  192. <CaretRightOutlined class="icon-style" />
  193. </div>
  194. <div class="item-name">{{ data.title }}</div>
  195. <div v-if="data.dataIndex.startsWith('Fan')">
  196. <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
  197. selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
  198. }}</div>
  199. <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
  200. selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
  201. }}</div>
  202. </div>
  203. <div v-else>
  204. <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
  205. </div>
  206. </div>
  207. </template>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 170, scroll, 180)">
  213. <dv-border-box8 :dur="5" class="dv_border_8" :style="`bottom: 20px; padding: 5px; height: ${scroll.y + 140}px`">
  214. <!-- <div class="enter-detail" @click="goDetail()">
  215. <send-outlined class=""/>风机运行详情
  216. </div> -->
  217. <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
  218. <a-tab-pane key="1" tab="实时监测">
  219. <GroupMonitorTable
  220. v-if="activeKey === '1'"
  221. ref="MonitorDataTable"
  222. :dataSource="dataSource"
  223. :columnsType="`${selectData.deviceType}_monitor`"
  224. @selectRow="getSelectRow"
  225. :scroll="scroll"
  226. :is-action="true"
  227. >
  228. <template #action="{ record }">
  229. <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
  230. <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
  231. </template>
  232. </GroupMonitorTable>
  233. </a-tab-pane>
  234. <a-tab-pane key="2" tab="实时曲线图" force-render>
  235. <div class="tab-item" v-if="activeKey === '2'">
  236. <div class="vent-flex-row-between" style="height: 100%">
  237. <BarSingle
  238. :xAxisData="xAxisDataGas"
  239. :dataSource="dataSource[selectRowIndex]"
  240. height="100%"
  241. :chartsColumns="chartsColumns"
  242. style="flex: 3"
  243. />
  244. <BarSingle
  245. v-if="globalConfig?.simulatedPassword"
  246. :xAxisData="[
  247. { key: 'F1', valueKey: 'windQuantity1' },
  248. { key: 'F2', valueKey: 'windQuantity2' },
  249. ]"
  250. :dataSource="dataSource[selectRowIndex]"
  251. height="100%"
  252. :chartsColumns="chartsColumns1"
  253. style="flex: 2"
  254. />
  255. </div>
  256. </div>
  257. </a-tab-pane>
  258. <a-tab-pane key="3" tab="历史数据">
  259. <div class="tab-item" v-if="activeKey === '3'">
  260. <HistoryTable
  261. :columns-type="`${selectData.deviceType}`"
  262. :device-type="`${devicekide}`"
  263. :device-list-api="baseList"
  264. designScope="fanlocal-history"
  265. :scroll="scroll"
  266. />
  267. </div>
  268. </a-tab-pane>
  269. <a-tab-pane key="4" tab="报警历史">
  270. <div class="tab-item" v-if="activeKey === '4'">
  271. <AlarmHistoryTable
  272. columns-type="alarm"
  273. :device-type="`${devicekide}`"
  274. :device-list-api="baseList"
  275. designScope="alarm-history"
  276. :scroll="scroll"
  277. />
  278. </div>
  279. </a-tab-pane>
  280. <a-tab-pane key="5" tab="操作历史">
  281. <div class="tab-item" v-if="activeKey === '5'">
  282. <HandlerHistoryTable
  283. columns-type="operator_history"
  284. :device-type="`${devicekide}`"
  285. :device-list-api="baseList"
  286. designScope="alarm-history"
  287. :scroll="scroll"
  288. />
  289. </div>
  290. </a-tab-pane>
  291. </a-tabs>
  292. </dv-border-box8>
  293. </div>
  294. </div>
  295. <!-- <div style="z-index: -1; position: absolute; top: 50px; right: 10px; width: 300px; height: 280px; margin: auto" class="player1">
  296. <LivePlayer id="jb-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
  297. </div> -->
  298. <div
  299. ref="playerRef"
  300. style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none"
  301. >
  302. </div>
  303. <a-modal v-model:visible="modalIsShow" :title="modalTitle" @ok="handleOk">
  304. <div class="modal-container">
  305. <div class="vent-flex-row">
  306. <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
  307. <div class="warning-text">您是否要进行{{ modalTitle }}操作?</div>
  308. </div>
  309. <div class="" v-if="modalType == 'startSmoke'">
  310. <div class="startSmoke-select">
  311. <div class="label">主机:</div>
  312. <a-radio-group v-model:value="mainWindIsShow1" @change="changeMotor" name="localWind1">
  313. <a-radio value="open">开启</a-radio>
  314. <a-radio value="stop">停止</a-radio>
  315. </a-radio-group>
  316. </div>
  317. <div class="startSmoke-select">
  318. <div class="label">备机:</div>
  319. <a-radio-group v-model:value="mainWindIsShow2" @change="changeMotor" name="localWind2">
  320. <a-radio value="open">开启</a-radio>
  321. <a-radio value="stop">停止</a-radio>
  322. </a-radio-group>
  323. </div>
  324. </div>
  325. <!-- 调频 -->
  326. <!-- <div class="vent-flex-row input-box" v-if="modalType == 'Fan1Frequency'">
  327. <div class="label">主风机运行频率(Hz):</div>
  328. <a-input-number size="small" v-model:value="fan1FrequencyVal" :min="30" :max="50" :step="0.1" />
  329. </div>
  330. <div class="vent-flex-row input-box" v-if="modalType == 'Fan2Frequency'">
  331. <div class="label">备风机运行频率(Hz):</div>
  332. <a-input-number size="small" v-model:value="fan2FrequencyVal" :min="30" :max="50" :step="0.1" />
  333. </div> -->
  334. <!-- <div class="vent-flex-row input-box" v-if="modalType == 'needAir'">
  335. <div class="label">需风量(单位):</div>
  336. <a-input-number size="small" v-model:value="frequencyVal" :min="30" :max="50" :step="0.1" />
  337. </div>
  338. <div class="vent-flex-row input-box" v-if="modalType == 'disAirAlarm'">
  339. <div class="label">漏风率(%):</div>
  340. <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
  341. </div>
  342. <div class="vent-flex-row input-box" v-if="modalType == 'diameter'">
  343. <div class="label">风筒直径(m):</div>
  344. <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
  345. </div>
  346. <div class="vent-flex-row input-box" v-if="modalType == 'len'">
  347. <div class="label">风筒长度(m):</div>
  348. <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
  349. </div>
  350. <div class="vent-flex-row input-box" v-if="modalType == 'windPowerLimit'">
  351. <div class="label">风电闭锁限值(m³/min):</div>
  352. <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
  353. </div>
  354. <div class="vent-flex-row input-box" v-if="modalType == 'gasPowerLimit'">
  355. <div class="label">瓦斯电闭锁限值(m³/min):</div>
  356. <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
  357. </div>
  358. <div v-if="modalType == 'gasAlarm'">
  359. <div class="vent-flex-row input-box">
  360. <div class="label">传感器名称:</div>
  361. <a-select placeholder="传感器" @change="handleChangeSensor" :options="sensorList" v-model:value="modalSensor" />
  362. </div>
  363. <div class="vent-flex-row input-box">
  364. <div class="label">传感器值:</div>
  365. <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
  366. </div>
  367. </div>
  368. <div v-if="modalType == 'airVolumeAlarm'">
  369. <div class="vent-flex-row input-box">
  370. <div class="label">风量上限(m³/min):</div>
  371. <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].min" :min="0" :max="50" :step="0.1" />
  372. </div>
  373. <div class="vent-flex-row input-box">
  374. <div class="label">风量下限(m³/min):</div>
  375. <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].max" :min="0" :max="50" :step="0.1" />
  376. </div>
  377. </div> -->
  378. <!-- 启动或停止 -->
  379. <div class="" v-if="modalType == 'startSmoke'"> </div>
  380. <div v-if="!globalConfig?.simulatedPassword" class="vent-flex-row input-box">
  381. <div class="label">操作密码:</div>
  382. <a-input size="small" type="password" v-model:value="passWord" />
  383. </div>
  384. </div>
  385. </a-modal>
  386. <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']" />
  387. </template>
  388. <script setup lang="ts">
  389. import { ExclamationCircleFilled } from '@ant-design/icons-vue';
  390. import { onBeforeMount, ref, watch, onMounted, nextTick, toRaw, reactive, onUnmounted, inject, unref } from 'vue';
  391. import BarSingle from '../../../../components/chart/BarSingle.vue';
  392. import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
  393. import HistoryTable from '../comment/HistoryTable.vue';
  394. import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  395. import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  396. import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
  397. import { mountedThree, setModelType, destroy, addCssText, addText, playSmoke } from './fanLocal.three';
  398. import lodash from 'lodash';
  399. import { getTableList, list } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
  400. import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
  401. import { chartsColumns, chartsColumns1 } from './fanLocal.data';
  402. import { deviceControlApi } from '/@/api/vent/index';
  403. import LivePlayer from '@liveqing/liveplayer-v3';
  404. import { setDivHeight } from '/@/utils/event';
  405. import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  406. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  407. import { SvgIcon } from '/@/components/Icon';
  408. import { useRouter } from 'vue-router';
  409. import { useModal } from '/@/components/Modal';
  410. import type { BasicColumn } from '/@/components/Table/src/types/table';
  411. import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  412. import { getPopupContainer } from '/@/utils';
  413. import { getDictItemsByCode } from '/@/utils/dict';
  414. import { message } from 'ant-design-vue';
  415. import { useCamera } from '/@/hooks/system/useCamera';
  416. import { CaretRightOutlined } from '@ant-design/icons-vue';
  417. const globalConfig = inject('globalConfig');
  418. const [registerModal, { openModal, closeModal }] = useModal();
  419. const { currentRoute } = useRouter();
  420. const modalTypeArr = reactive(
  421. VENT_PARAM['simulatedPassword']
  422. ? {
  423. leftBtnArr: [
  424. {
  425. key: 'startSmoke',
  426. value: '启动风机',
  427. },
  428. {
  429. key: 'changeSmoke',
  430. value: '一键倒机',
  431. },
  432. // {
  433. // key: 'Fan1Frequency',
  434. // value: '主机调频',
  435. // },
  436. // {
  437. // key: 'Fan2Frequency',
  438. // value: '备机调频',
  439. // },
  440. {
  441. key: 'windPower',
  442. value: '风电闭锁',
  443. },
  444. {
  445. key: 'gasPower',
  446. value: '瓦斯电闭锁',
  447. },
  448. {
  449. key: 'needAir',
  450. value: '需风量',
  451. },
  452. {
  453. key: 'diameter',
  454. value: '风筒直径',
  455. },
  456. {
  457. key: 'len',
  458. value: '风筒长度',
  459. },
  460. ],
  461. rightBtnArr: [
  462. // {
  463. // key: 'fanlocal',
  464. // value: '变频风机',
  465. // },
  466. // {
  467. // key: 'fanlocaldp',
  468. // value: '定频风机',
  469. // },
  470. {
  471. key: 'frequency',
  472. value: '调频',
  473. },
  474. {
  475. key: 'windPowerLimit',
  476. value: '风电闭锁限值',
  477. },
  478. {
  479. key: 'gasPowerLimit',
  480. value: '瓦斯电闭锁限值',
  481. },
  482. {
  483. key: 'airVolumeAlarm',
  484. value: '风量报警',
  485. min: 0,
  486. max: 100,
  487. },
  488. {
  489. key: 'disAirAlarm',
  490. value: '漏风率报警',
  491. },
  492. {
  493. key: 'gasAlarm',
  494. value: '瓦斯报警',
  495. },
  496. ],
  497. }
  498. : {
  499. leftBtnArr: [
  500. {
  501. key: 'startSmoke',
  502. value: '启动风机',
  503. },
  504. {
  505. key: 'changeSmoke',
  506. value: '一键倒机',
  507. },
  508. ],
  509. rightBtnArr: [],
  510. }
  511. );
  512. const sensorList = ref<any[]>([
  513. {
  514. value: '1',
  515. label: 'T1',
  516. },
  517. {
  518. value: '2',
  519. label: 'T2',
  520. },
  521. {
  522. value: '3',
  523. label: 'T3',
  524. },
  525. ]);
  526. const scroll = reactive({
  527. y: 180,
  528. });
  529. const playerRef = ref();
  530. const MonitorDataTable = ref();
  531. const modalSensor = ref(null);
  532. const loading = ref(false);
  533. const activeKey = ref('1');
  534. const player1 = ref();
  535. const modalIsShow = ref<boolean>(false); // 是否显示模态框
  536. const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
  537. const fan1FrequencyVal = ref(40); //主机频率
  538. const fan2FrequencyVal = ref(40); //备机频率
  539. const mainWindIsShow1 = ref('open'); // 主机默认启动leftColumns
  540. const mainWindIsShow2 = ref('stop'); // 备机默认不启动
  541. const passWord = ref('');
  542. // 默认初始是第一行
  543. const selectRowIndex = ref(-1);
  544. const dataMonitorRowIndex = ref(0);
  545. // 默认数据右边监测的是主机
  546. const warningMonitorRowIndex = ref(0);
  547. const xAxisDataGas = ref([]);
  548. // 设备数据
  549. const controlType = ref(1);
  550. const modalType = ref('fm');
  551. // 监测数据
  552. const initData = {
  553. deviceID: '',
  554. deviceType: '',
  555. strname: '',
  556. dataDh: '-', //压差
  557. dataDtestq: '-', //测试风量
  558. sourcePressure: '-', //气源压力
  559. dataDequivalarea: '-',
  560. netStatus: '0', //通信状态
  561. warnLevel_str: '',
  562. stationname: '',
  563. };
  564. const dataSource = ref([]);
  565. // 监测数据
  566. let selectData = reactive(lodash.cloneDeep(initData));
  567. const rightColumns = ref<BasicColumn[]>([]);
  568. const leftColumns = ref<BasicColumn[]>([]);
  569. const devicekide = ref('fanlocal');
  570. const deviceType = ref(selectData.deviceType);
  571. const headElHeight = ref(0);
  572. const { getCamera, webRtcServer } = useCamera();
  573. watch(deviceType, (type) => {
  574. rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as [];
  575. if (rightColumns.value && rightColumns.value.length < 1) {
  576. rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as [];
  577. }
  578. leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as [];
  579. if (leftColumns.value && leftColumns.value.length < 1) {
  580. leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as [];
  581. }
  582. });
  583. const flvURL1 = () => {
  584. // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
  585. return '';
  586. };
  587. const changeDeviceKind = (e) => {
  588. devicekide.value = e;
  589. loading.value = true;
  590. selectRowIndex.value = -1;
  591. nextTick(() => {
  592. // selectRowIndex.value = 0
  593. selectData = lodash.cloneDeep(initData);
  594. loading.value = false;
  595. if (selectData.deviceID) MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
  596. const headEl = document.querySelector(`.zxm-table-thead`);
  597. if (headEl) {
  598. headElHeight.value = headEl.clientHeight;
  599. }
  600. });
  601. };
  602. const tabChange = (activeKeyVal) => {
  603. activeKey.value = activeKeyVal;
  604. if (activeKeyVal == 1) {
  605. nextTick(() => {
  606. MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
  607. });
  608. }
  609. };
  610. const selectDevice = (key, val) => {
  611. if (key === 'dataMonitorRowIndex') {
  612. dataMonitorRowIndex.value = val;
  613. } else {
  614. warningMonitorRowIndex.value = val;
  615. }
  616. };
  617. //详情
  618. function goDetail() {
  619. openModal();
  620. }
  621. //
  622. async function getDataSource() {
  623. if (devicekide.value) {
  624. const res = await list({ devicetype: devicekide.value, pagetype: 'normal' });
  625. if (res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0) {
  626. const dataArr = res.msgTxt[0].datalist || [];
  627. dataSource.value = [];
  628. dataArr.forEach((data) => {
  629. const readData = data.readData;
  630. data = Object.assign(data, readData);
  631. dataSource.value.push(data);
  632. });
  633. if (MonitorDataTable.value && selectRowIndex.value == -1) {
  634. MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
  635. }
  636. const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
  637. return data;
  638. } else {
  639. return (dataSource.value = []);
  640. }
  641. } else {
  642. dataSource.value = [];
  643. }
  644. }
  645. // https获取监测数据
  646. let timer: null | NodeJS.Timeout = null;
  647. async function getMonitor(flag?) {
  648. if (Object.prototype.toString.call(timer) === '[object Null]') {
  649. timer = await setTimeout(
  650. async () => {
  651. await getDataSource();
  652. if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
  653. // 初始打开页面
  654. if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
  655. MonitorDataTable.value.setSelectedRowKeys(currentRoute.value['query']['id']);
  656. } else {
  657. MonitorDataTable.value.setSelectedRowKeys(dataSource.value[0]['deviceID']);
  658. }
  659. }
  660. for (const key in selectData) {
  661. selectData[key] = '';
  662. }
  663. if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
  664. deviceType.value = dataSource.value[selectRowIndex.value]['deviceType'];
  665. if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
  666. Object.assign(selectData, dataSource.value[selectRowIndex.value]);
  667. }
  668. playSmoke(selectData);
  669. addText(selectData);
  670. if (timer) {
  671. timer = null;
  672. }
  673. }
  674. getMonitor();
  675. },
  676. flag ? 0 : 1000
  677. );
  678. }
  679. }
  680. // 获取设备基本信息列表
  681. const deviceBaseList = ref([]);
  682. function getDeviceBaseList() {
  683. getTableList({ pageSize: 1000 }).then((res) => {
  684. deviceBaseList.value = res.records;
  685. });
  686. }
  687. // 切换检测数据
  688. async function getSelectRow(id) {
  689. console.log('选中的设备id------->', id);
  690. if (!id || id == selectData['deviceID']) return;
  691. // loading.value = true;
  692. const selectIndex: any = dataSource.value.findIndex((baseData: any) => baseData.deviceID == id);
  693. selectRowIndex.value = selectIndex;
  694. modalType.value = selectIndex > 0 ? 'fm' : 'fc';
  695. nextTick(() => {
  696. const headEl = document.querySelector(`.zxm-table-thead`);
  697. if (headEl) {
  698. headElHeight.value = headEl.clientHeight;
  699. }
  700. setModelType(modalType.value).then(() => {
  701. // loading.value = false;
  702. });
  703. const data = dataSource.value[selectIndex];
  704. if (data) {
  705. if (data['Fan1StartStatus'] == 1) {
  706. mainWindIsShow1.value = 'open';
  707. mainWindIsShow2.value = 'stop';
  708. selectDevice('warningMonitorRowIndex', 0);
  709. selectDevice('dataMonitorRowIndex', 0);
  710. } else if (data['Fan2StartStatus'] == 1) {
  711. mainWindIsShow2.value = 'open';
  712. mainWindIsShow1.value = 'stop';
  713. selectDevice('warningMonitorRowIndex', 1);
  714. selectDevice('dataMonitorRowIndex', 1);
  715. }
  716. const xAxisDataGasArr = [];
  717. for (const key in selectData) {
  718. if (key.startsWith('gas') && key.length < 5) {
  719. xAxisDataGasArr.push({ key: 'T' + key.substring(3), valueKey: key });
  720. }
  721. }
  722. xAxisDataGas.value = xAxisDataGasArr;
  723. }
  724. });
  725. await getCamera(id, playerRef.value);
  726. return;
  727. }
  728. // 打开并设置modal的标题
  729. function showModal(obj) {
  730. modalType.value = obj.key;
  731. modalTitle.value = obj.value;
  732. passWord.value = '';
  733. modalIsShow.value = true;
  734. }
  735. function changeMotor(e) {
  736. const target = e.target;
  737. if (target.name === 'localWind1') {
  738. if (target.value === 'open') {
  739. mainWindIsShow2.value = 'stop';
  740. }
  741. } else if (target.name === 'localWind2') {
  742. if (target.value === 'open') {
  743. mainWindIsShow1.value = 'stop';
  744. }
  745. }
  746. }
  747. function handleOk(e: MouseEvent) {
  748. const handType = modalType.value;
  749. const data = {
  750. deviceid: selectData.deviceID,
  751. devicetype: selectData.deviceType,
  752. paramcode: '',
  753. password: passWord.value,
  754. value: null,
  755. };
  756. if (handType === 'startSmoke') {
  757. // 启动风机
  758. if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
  759. // playSmoke(handType, 'top', frequency, 'open');
  760. data.paramcode = 'CtrlFan1Start';
  761. deviceControlApi(data)
  762. .then(() => {
  763. if (globalConfig.History_Type == 'remote') {
  764. message.success('指令已下发至生产管控平台成功!');
  765. } else {
  766. message.success('指令已下发成功!');
  767. }
  768. modalTitle.value = '';
  769. modalIsShow.value = false;
  770. })
  771. .catch((err) => {});
  772. } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
  773. // playSmoke(handType, 'down', frequency, 'open');
  774. data.paramcode = 'CtrlFan2Start';
  775. deviceControlApi(data)
  776. .then(() => {
  777. if (globalConfig.History_Type == 'remote') {
  778. message.success('指令已下发至生产管控平台成功!');
  779. } else {
  780. message.success('指令已下发成功!');
  781. }
  782. modalTitle.value = '';
  783. modalIsShow.value = false;
  784. })
  785. .catch((err) => {});
  786. } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
  787. // playSmoke(handType, '', frequency, 'stop');
  788. }
  789. } else if (handType === 'Fan1Frequency' || handType === 'Fan2Frequency') {
  790. // 调频
  791. if (handType === 'Fan1Frequency') {
  792. data.paramcode = 'Fan1FreqHz';
  793. data.value = fan1FrequencyVal.value;
  794. } else if (handType === 'Fan2Frequency') {
  795. data.paramcode = 'Fan2FreqHz';
  796. data.value = fan2FrequencyVal.value;
  797. }
  798. deviceControlApi(data)
  799. .then((res) => {
  800. if (globalConfig.History_Type == 'remote') {
  801. message.success('指令已下发至生产管控平台成功!');
  802. } else {
  803. message.success('指令已下发成功!');
  804. }
  805. modalTitle.value = '';
  806. modalIsShow.value = false;
  807. })
  808. .catch((err) => {});
  809. } else if (handType === 'changeSmoke') {
  810. if (selectData['Fan1StartStatus'] == 0 || !selectData['Fan1StartStatus']) {
  811. data.paramcode = 'CtrlFan1Start';
  812. deviceControlApi(data)
  813. .then((res) => {
  814. if (globalConfig.History_Type == 'remote') {
  815. message.success('指令已下发至生产管控平台成功!');
  816. } else {
  817. message.success('指令已下发成功!');
  818. }
  819. modalTitle.value = '';
  820. modalIsShow.value = false;
  821. mainWindIsShow1.value = 'stop';
  822. mainWindIsShow2.value = 'open';
  823. })
  824. .catch((err) => {});
  825. } else if (selectData['Fan2StartStatus'] == 0 || !selectData['Fan2StartStatus']) {
  826. data.paramcode = 'CtrlFan2Start';
  827. deviceControlApi(data)
  828. .then((res) => {
  829. if (globalConfig.History_Type == 'remote') {
  830. message.success('指令已下发至生产管控平台成功!');
  831. } else {
  832. message.success('指令已下发成功!');
  833. }
  834. modalTitle.value = '';
  835. modalIsShow.value = false;
  836. mainWindIsShow1.value = 'open';
  837. mainWindIsShow2.value = 'stop';
  838. })
  839. .catch((err) => {});
  840. }
  841. // // 一键倒机
  842. // if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
  843. // // playSmoke('startSmoke', 'down', frequency, 'open');
  844. // data.paramcode = 'CtrlFan2Start';
  845. // deviceControlApi(data).then((res) => {
  846. // console.log('设备操作结果', res);
  847. // modalTitle.value = '';
  848. // modalIsShow.value = false;
  849. // }).catch((err) => {
  850. // });
  851. // mainWindIsShow1.value = 'stop';
  852. // mainWindIsShow2.value = 'open';
  853. // } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
  854. // // playSmoke('startSmoke', 'top', frequency, 'open');
  855. // data.paramcode = 'CtrlFan1Start';
  856. // deviceControlApi(data).then((res) => {
  857. // console.log('设备操作结果', res);
  858. // modalTitle.value = '';
  859. // modalIsShow.value = false;
  860. // }).catch((err) => {
  861. // });
  862. // mainWindIsShow1.value = 'open';
  863. // mainWindIsShow2.value = 'stop';
  864. // } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
  865. // // playSmoke(handType, '', frequency, 'stop');
  866. // }
  867. }
  868. }
  869. function handleChangeSensor(value: string) {
  870. console.log(value);
  871. }
  872. function addPlayVideo() {
  873. if (player1.value && player1.value.play) {
  874. if (!player1.value.paused()) player1.value.play();
  875. document.body.removeEventListener('mousedown', addPlayVideo);
  876. }
  877. }
  878. function deviceEdit(e: Event, type: string, record) {
  879. e.stopPropagation();
  880. openModal(true, {
  881. type,
  882. deviceId: record['deviceID'],
  883. });
  884. }
  885. onBeforeMount(() => {
  886. getDeviceBaseList();
  887. });
  888. onMounted(() => {
  889. const { query } = unref(currentRoute);
  890. if (query['deviceType']) devicekide.value = query['deviceType'] as string;
  891. mountedThree(player1.value).then(async () => {
  892. await getMonitor(true);
  893. nextTick(async () => {
  894. addCssText();
  895. });
  896. });
  897. document.body.addEventListener('mousedown', addPlayVideo, false);
  898. });
  899. onUnmounted(() => {
  900. destroy();
  901. if (timer) {
  902. clearTimeout(timer);
  903. timer = undefined;
  904. }
  905. if (webRtcServer.length > 0) {
  906. webRtcServer.forEach((item) => {
  907. item.disconnect();
  908. });
  909. }
  910. });
  911. </script>
  912. <style scoped lang="less">
  913. @import '/@/design/vent/modal.less';
  914. :deep(.@{ventSpace}-tabs-tabpane-active) {
  915. height: 100%;
  916. }
  917. .scene-box {
  918. .title-text {
  919. height: 32px;
  920. }
  921. .bottom-tabs-box {
  922. height: 280px;
  923. .tabs-box {
  924. position: relative !important;
  925. }
  926. }
  927. }
  928. .data-show-box {
  929. position: relative;
  930. display: flex;
  931. flex-direction: row;
  932. justify-content: space-between;
  933. padding: 10px 5px;
  934. color: #ffffff;
  935. z-index: 999;
  936. top: 60px;
  937. .data-item {
  938. pointer-events: auto;
  939. .item-header {
  940. width: 374px;
  941. background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
  942. background-size: auto;
  943. height: 32px;
  944. text-align: center;
  945. line-height: 34px;
  946. font-size: 15px;
  947. font-weight: 600;
  948. color: #fafafa;
  949. }
  950. .item-container {
  951. width: 346px;
  952. margin: 0 14px;
  953. padding: 10px;
  954. background: #00377c33;
  955. backdrop-filter: blur(2px);
  956. .tab {
  957. width: 323px;
  958. background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
  959. display: flex;
  960. .tab-item {
  961. flex: 1;
  962. text-align: center;
  963. padding-top: 2px;
  964. color: #ffffff99;
  965. cursor: pointer;
  966. &:hover {
  967. color: #ffffff;
  968. }
  969. }
  970. .tab-item-active-l {
  971. color: #ffffff;
  972. background-image: url('/@/assets/images/vent/l-tab-active.png');
  973. background-repeat: no-repeat;
  974. background-size: auto;
  975. background-position: 6px 3px;
  976. }
  977. .tab-item-active-r {
  978. color: #ffffff;
  979. background-image: url('/@/assets/images/vent/r-tab-active.png');
  980. background-repeat: no-repeat;
  981. background-position: 0 3px;
  982. }
  983. }
  984. .container-group {
  985. width: 314px;
  986. margin: 0px 4px;
  987. padding: 10px 0;
  988. min-height: 432px;
  989. background: linear-gradient(to right, #00deff22, #2081ff05);
  990. max-height: 440px;
  991. overflow-y: auto;
  992. }
  993. .container-item {
  994. width: 100%;
  995. height: 60px;
  996. display: flex;
  997. padding: 10px 0 0 20px;
  998. margin-bottom: 5px;
  999. position: relative;
  1000. background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
  1001. background-size: auto;
  1002. background-position: bottom;
  1003. &::before {
  1004. content: '';
  1005. display: block;
  1006. width: 100%;
  1007. height: 5px;
  1008. position: absolute;
  1009. top: 62px;
  1010. left: 0;
  1011. background-color: #73f4ff66;
  1012. backdrop-filter: blur(5px);
  1013. }
  1014. .item-icon {
  1015. width: 54px;
  1016. height: 45px;
  1017. background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
  1018. background-size: cover;
  1019. .icon-style {
  1020. font-size: 18px;
  1021. margin: 10px 0 0 20px;
  1022. color: #ffc800;
  1023. }
  1024. }
  1025. .item-name {
  1026. width: 180px;
  1027. line-height: 60px;
  1028. }
  1029. .item-value {
  1030. position: relative;
  1031. height: 26px;
  1032. line-height: 24px;
  1033. margin: 15px 0;
  1034. text-align: center;
  1035. width: 80px;
  1036. border: 1px solid #00f5fe;
  1037. border-radius: 13px;
  1038. background: linear-gradient(to right, #00f5fe44, #0090ff44);
  1039. &::before {
  1040. width: 6px;
  1041. height: 6px;
  1042. content: '';
  1043. position: absolute;
  1044. left: -3px;
  1045. top: 8px;
  1046. background: #ffa500;
  1047. border-radius: 3px;
  1048. }
  1049. }
  1050. }
  1051. .warning-header {
  1052. display: flex;
  1053. font-size: 14px;
  1054. .header-item {
  1055. flex: 1;
  1056. display: flex;
  1057. flex-direction: column;
  1058. margin: 5px 10px;
  1059. justify-content: center;
  1060. align-items: center;
  1061. .header-title {
  1062. color: #39e7fe;
  1063. }
  1064. .header-value {
  1065. width: 133px;
  1066. height: 56px;
  1067. font-weight: 600;
  1068. font-family: 'douyuFont';
  1069. font-size: 16px;
  1070. color: #ffa500;
  1071. display: flex;
  1072. justify-content: center;
  1073. align-items: center;
  1074. background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
  1075. }
  1076. }
  1077. }
  1078. .warning-group {
  1079. padding: 0 10px;
  1080. position: relative;
  1081. // &::before {
  1082. // content: '';
  1083. // display: block;
  1084. // width: 1px;
  1085. // height: 100%;
  1086. // position: absolute;
  1087. // left: 12px;
  1088. // background-color: #00f5fe;
  1089. // }
  1090. .warning-item {
  1091. display: flex;
  1092. flex-direction: row;
  1093. justify-content: space-between;
  1094. align-items: center;
  1095. height: 38px;
  1096. .item-name {
  1097. .icon {
  1098. width: 6px;
  1099. height: 6px;
  1100. display: inline-block;
  1101. background-color: #1cd5ff;
  1102. border-radius: 3px;
  1103. position: relative;
  1104. margin-right: 5px;
  1105. &::before {
  1106. content: '';
  1107. width: 10px;
  1108. height: 10px;
  1109. display: block;
  1110. border: 1px solid #34edff99;
  1111. border-radius: 5px;
  1112. position: absolute;
  1113. top: -2px;
  1114. left: -2px;
  1115. }
  1116. }
  1117. }
  1118. }
  1119. }
  1120. }
  1121. }
  1122. }
  1123. .input-box {
  1124. display: flex;
  1125. align-items: center;
  1126. .input-title {
  1127. color: #73e8fe;
  1128. width: auto;
  1129. }
  1130. margin-right: 10px;
  1131. }
  1132. .label {
  1133. max-width: 220px;
  1134. }
  1135. #fanLocalSelectDom {
  1136. :deep(.@{ventSpace}-select-dropdown) {
  1137. left: 0px !important;
  1138. top: 35px !important;
  1139. }
  1140. }
  1141. .@{ventSpace}-input {
  1142. width: 150px;
  1143. }
  1144. :deep(#LivePlayerBox) {
  1145. display: flex;
  1146. flex-direction: row;
  1147. justify-content: flex-end;
  1148. padding-right: 380px;
  1149. pointer-events: none;
  1150. .video-parent {
  1151. height: 208px;
  1152. pointer-events: auto !important;
  1153. }
  1154. }
  1155. </style>