index.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906
  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
  5. id="main3DCSS"
  6. class="threejs-Object-CSS"
  7. v-show="!loading"
  8. style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
  9. >
  10. <div style="position: relative">
  11. <div class="elementTag" id="inputBox">
  12. <div class="elementContent elementContent-r" v-if="selectData.DataPa && backMonitorIsShow">
  13. <p><span class="data-title">风机气压(Pa):</span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</p>
  14. <p><span class="data-title">风机静压(Pa):</span>{{ selectData.Fan2Negative ? selectData.Fan2Negative : '-' }}</p>
  15. <p><span class="data-title">风机风量(m³/s):</span>{{ selectData.Fan2m3 ? selectData.Fan2m3 : '-' }}</p>
  16. </div>
  17. </div>
  18. <div class="elementTag" id="inputBox1">
  19. <div class="elementContent elementContent-r" v-if="selectData.DataPa && frontMonitorIsShow">
  20. <p><span class="data-title">风机全压(Pa):</span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</p>
  21. <p><span class="data-title">风机静压(Pa):</span>{{ selectData.Fan1Negative ? selectData.Fan1Negative : '-' }}</p>
  22. <p><span class="data-title">风机风量(m³/s):</span>{{ selectData.Fan1m3 ? selectData.Fan1m3 : '-' }}</p>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. <div id="main3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
  28. <FanEchrats id="fan-echarts" :chartData="selectData" style="position: absolute; z-index: -1" />
  29. </div>
  30. <div class="scene-box" style="z-index: 999">
  31. <div class="title-text" style="position: absolute; z-index: 9999; width: 100%; text-align: center">{{ selectData.strname }}</div>
  32. <div class="top-box control-group">
  33. <div class="button-box" v-for="(item, index) in modalTypeArr.centerBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
  34. </div>
  35. <div class="data-show-box">
  36. <div class="data-item">
  37. <div class="item-header">环境监测</div>
  38. <div class="item-container">
  39. <div class="tab">
  40. <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
  41. >1#风机</div
  42. >
  43. <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
  44. >2#风机</div
  45. >
  46. </div>
  47. <div class="container-group container-group-l">
  48. <template v-if="deviceType">
  49. <div class="container-item" v-for="(data, index) in getTableHeaderColumns(deviceType + '_monitor_left')" :key="index">
  50. <div class="item-icon">
  51. <SvgIcon class="icon-style" size="18" name="temperature" />
  52. </div>
  53. <div class="item-name">{{ data.title }}</div>
  54. <div v-if="data.dataIndex.startsWith('Fan')">
  55. <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
  56. selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
  57. }}</div>
  58. <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
  59. selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
  60. }}</div>
  61. </div>
  62. <div v-else>
  63. <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
  64. </div>
  65. </div>
  66. </template>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="data-item">
  71. <div class="item-header">设备状态</div>
  72. <div class="item-container">
  73. <div class="tab">
  74. <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
  75. >1#风机</div
  76. >
  77. <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
  78. >2#风机</div
  79. >
  80. </div>
  81. <div class="container-group">
  82. <div class="warning-header">
  83. <div class="header-item">
  84. <div class="header-title">报警总数</div>
  85. <div class="header-value">0</div>
  86. </div>
  87. <div class="header-item">
  88. <div class="header-title"> 未处理数</div>
  89. <div class="header-value">0</div>
  90. </div>
  91. </div>
  92. <div class="warning-group">
  93. <template v-if="deviceType">
  94. <div class="warning-item" v-for="(state, index) in getTableHeaderColumns(deviceType + '_monitor_right')" :key="index">
  95. <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
  96. <div v-if="state.dataIndex.startsWith('Fan')">
  97. <div class="signal-item" v-if="warningMonitorRowIndex == 0">
  98. <div
  99. class="signal-round"
  100. :class="{
  101. 'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
  102. 'signal-round-warning':
  103. selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
  104. 'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
  105. }"
  106. ></div>
  107. <div>{{
  108. selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
  109. ? '无状态'
  110. : selectData[state.dataIndex.replace('Fan', 'Fan1')]
  111. ? '正常'
  112. : '异常'
  113. }}</div>
  114. </div>
  115. <div class="signal-item" v-if="warningMonitorRowIndex == 1">
  116. <div
  117. class="signal-round"
  118. :class="{
  119. 'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
  120. 'signal-round-warning':
  121. selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
  122. 'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
  123. }"
  124. ></div>
  125. <div>{{
  126. selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
  127. ? '无状态'
  128. : selectData[state.dataIndex.replace('Fan', 'Fan2')]
  129. ? '正常'
  130. : '异常'
  131. }}</div>
  132. </div>
  133. </div>
  134. <div v-else>
  135. <div class="signal-item" v-if="warningMonitorRowIndex == 0">
  136. <div
  137. class="signal-round"
  138. :class="{
  139. 'signal-round-run': selectData[state.dataIndex],
  140. 'signal-round-warning': selectData[state.dataIndex] !== undefined && !selectData[state.dataIndex],
  141. 'signal-round-gry': selectData[state.dataIndex] === undefined,
  142. }"
  143. ></div>
  144. <div>{{ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常' }}</div>
  145. </div>
  146. </div>
  147. </div>
  148. </template>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="bottom-tabs-box">
  155. <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
  156. <a-tab-pane key="1" tab="实时监测">
  157. <GroupMonitorTable :dataSource="dataSource" columnsType="fanmain_monitor" @selectRow="getSelectRow" />
  158. </a-tab-pane>
  159. <!-- <a-tab-pane key="2" tab="实时曲线图" force-render>
  160. <div class="tab-item" v-if="activeKey === '2'">
  161. <Bar :chartData="dataSource" xAxisPropType="strname" :propTypeArr="propTypeArr" height="40vh" width="100%" />
  162. </div>
  163. </a-tab-pane> -->
  164. <a-tab-pane key="3" tab="历史数据">
  165. <div class="tab-item">
  166. <HistoryTable columns-type="fanmain_history" device-type="fanmain" :device-list-api="baseList" designScope="fanmain-history" />
  167. </div>
  168. </a-tab-pane>
  169. <a-tab-pane key="4" tab="报警历史">
  170. <div class="tab-item">
  171. <AlarmHistoryTable columns-type="alarm_history" device-type="fanmain" :device-list-api="baseList" designScope="alarm-history" />
  172. </div>
  173. </a-tab-pane>
  174. <a-tab-pane key="5" tab="操作历史">
  175. <div class="tab-item">
  176. <HandlerHistoryTable columns-type="alarm_history" device-type="fanlocal" :device-list-api="baseList" designScope="alarm-history" />
  177. </div>
  178. </a-tab-pane>
  179. </a-tabs>
  180. </div>
  181. </div>
  182. <div style="z-index: -1; position: absolute; top: -100px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer">
  183. <!-- <LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls /> -->
  184. <LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted loop loading controls />
  185. </div>
  186. <a-modal v-model:visible="modalIsShow" :title="modalTitle" @ok="handleOk" @cancel="handleCancel">
  187. <div class="modal-container">
  188. <div class="vent-flex-row">
  189. <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
  190. <div class="warning-text">您是否要进行{{ modalTitle }}操作?</div>
  191. </div>
  192. <!-- 调频 -->
  193. <div class="vent-flex-row input-box" v-if="modalType == 'frequency'">
  194. <div class="label">运行频率(单位):</div>
  195. <a-input-number v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
  196. </div>
  197. <!-- 启动或停止 -->
  198. <div class="" v-if="modalType == 'startSmoke'">
  199. <div class="startSmoke-select">
  200. <div class="label">1#风机:</div>
  201. <a-radio-group v-model:value="mainWindIsShow1" @change="changeMotor" name="mainWind1">
  202. <a-radio value="open">开启</a-radio>
  203. <a-radio value="stop">停止</a-radio>
  204. </a-radio-group>
  205. </div>
  206. <div class="startSmoke-select">
  207. <div class="label">2#风机:</div>
  208. <a-radio-group v-model:value="mainWindIsShow2" @change="changeMotor" name="mainWind2">
  209. <a-radio value="open">开启</a-radio>
  210. <a-radio value="stop">停止</a-radio>
  211. </a-radio-group>
  212. </div>
  213. </div>
  214. <div class="vent-flex-row input-box">
  215. <div class="label">操作密码:</div>
  216. <a-input size="small" type="password" v-model:value="passWord" />
  217. </div>
  218. </div>
  219. </a-modal>
  220. </template>
  221. <script setup lang="ts">
  222. import { ExclamationCircleFilled } from '@ant-design/icons-vue';
  223. import FanEchrats from '/@/views/vent/monitorManager/mainFanMonitor/fanEchrats.vue';
  224. import { onBeforeMount, computed, ComputedRef, ref, onMounted, nextTick, onUnmounted, reactive, toRaw, toRef, toRefs } from 'vue';
  225. import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
  226. import HistoryTable from '../comment/HistoryTable.vue';
  227. import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  228. import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  229. import { dataColumns, stateColumns, getData, getMonitorData } from './main.data';
  230. import { deviceControlApi } from '/@/api/vent/index';
  231. import { mountedThree, destroy, addText, play, setModelType, playAnimate, resetEcharts } from './main.threejs';
  232. import LivePlayer from '@liveqing/liveplayer-v3';
  233. import { Icon as SvgIcon } from '/@/components/Icon';
  234. import { list, pathList, deviceList, testWind } from './main.api';
  235. import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
  236. import { getTableList } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
  237. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  238. const modalTypeArr = reactive({
  239. centerBtnArr: [
  240. {
  241. key: 'startSmoke',
  242. value: '启动/停止',
  243. },
  244. {
  245. key: 'changeSmoke',
  246. value: '不停风倒机',
  247. },
  248. {
  249. key: 'changeDirection',
  250. value: '一键反风',
  251. },
  252. {
  253. key: 'frequency',
  254. value: '一键调频',
  255. },
  256. ],
  257. });
  258. const player1 = ref(null);
  259. const activeKey = ref('1');
  260. const loading = ref(false);
  261. const modalIsShow = ref<boolean>(false); // 是否显示模态框
  262. const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
  263. const modalType = ref(''); // 模态框内容显示类型,设备操作类型
  264. const frequencyVal = ref(40); //频率
  265. const mainWindIsShow1 = ref('stop'); // 1#风机默认启动
  266. const mainWindIsShow2 = ref('stop'); // 2#风机默认不启动
  267. const frontMonitorIsShow = ref(false); // 存放1#风机临时状态,保存模态框取消时,还需要返回之前的值
  268. const backMonitorIsShow = ref(false); // 存放2#风机临时状态,保存模态框取消时,还需要返回之前的值
  269. const passWord = ref('');
  270. // 默认初始是第一行 (默认n%2==0时是主机,n%2==1时是备机)
  271. const selectRowIndex = ref(0);
  272. // 默认数据左边监测的是1#风机
  273. const dataMonitorRowIndex = ref(0);
  274. // 默认数据右边监测的是1#风机
  275. const warningMonitorRowIndex = ref(0);
  276. // 监测数据
  277. const selectData = reactive({
  278. deviceID: '',
  279. Fan1Negative: '-', // 静压
  280. Fan2Negative: '-', // 静压
  281. DataPa: '-', //全压
  282. Fan1m3: '-', //电机流量
  283. Fan2m3: '-', //电机流量
  284. deviceType: '',
  285. });
  286. const deviceType = computed(() => selectData.deviceType);
  287. const flvURL1 = () => {
  288. // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
  289. return `/video/mainWind.mp4`;
  290. };
  291. // const dataSource = computed(() => {
  292. // const data = [...getRecordList()] || [];
  293. // Object.assign(selectData, toRaw(data[selectRowIndex.value]));
  294. // addFmText(selectData);
  295. // return data;
  296. // });
  297. const dataSource = ref([]);
  298. const propTypeArr = new Map([
  299. ['incipientWindSpeed1', 'V1风速'],
  300. ['incipientWindSpeed2', 'V2风速'],
  301. ['incipientWindSpeed3', 'V3风速'],
  302. ['sourcePressure', '气源压力'],
  303. ]);
  304. const tabChange = (activeKeyVal) => {
  305. activeKey.value = activeKeyVal;
  306. };
  307. // 设备数据
  308. const controlType = ref(1);
  309. const getDataSource = async () => {
  310. const res = await list({ devicetype: 'fan', pagetype: 'normal' });
  311. const dataArr = res.msgTxt[0].datalist || [];
  312. dataSource.value = [];
  313. dataArr.forEach((data) => {
  314. if (data.deviceType?.startsWith('fanmain')) {
  315. const readData = data.readData;
  316. data = Object.assign(data, readData);
  317. dataSource.value.push(data);
  318. }
  319. });
  320. const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
  321. return data;
  322. };
  323. // https获取监测数据
  324. let timer: null | NodeJS.Timeout = null;
  325. const getMonitor = () => {
  326. if (Object.prototype.toString.call(timer) === '[object Null]') {
  327. timer = setTimeout(async () => {
  328. await getDataSource();
  329. Object.assign(selectData, deviceBaseList.value, dataSource.value[selectRowIndex.value]);
  330. addText(selectData);
  331. playAnimate(selectData);
  332. if (timer) {
  333. timer = null;
  334. }
  335. getMonitor();
  336. }, 1000);
  337. }
  338. };
  339. // const getMonitor = () => {
  340. // if (Object.prototype.toString.call(timer) === '[object Null]') {
  341. // timer = setTimeout(() => {
  342. // if (timer) {
  343. // timer = null;
  344. // }
  345. // dataSource.value = getData();
  346. // // 默认前两行(主、备)是正在监测的主通风机, 实际中需要手动选中
  347. // const monitorData = getMonitorData();
  348. // Object.assign(dataSource.value[selectRowIndex.value], monitorData);
  349. // const data: any = toRaw(dataSource.value[selectRowIndex.value]);
  350. // Object.assign(selectData, data);
  351. // resetEcharts('mainWindRect');
  352. // getMonitor();
  353. // }, 1000);
  354. // }
  355. // };
  356. const deviceBaseList = ref([]);
  357. const getDeviceBaseList = () => {
  358. getTableList({ pageSize: 1000 }).then((res) => {
  359. deviceBaseList.value = res.records;
  360. });
  361. };
  362. // 切换检测数据
  363. const getSelectRow = (id) => {
  364. if (!id) return;
  365. loading.value = true;
  366. const baseDataIndex: any = dataSource.value.findIndex((baseData: any) => baseData.deviceID === id);
  367. selectRowIndex.value = baseDataIndex;
  368. const type = 'mainWindRect';
  369. // const type = baseDataIndex > 0 ? 'fm' : 'fc';
  370. setModelType(type).then(() => {
  371. loading.value = false;
  372. });
  373. const data = dataSource.value[baseDataIndex];
  374. if (data['Fan1StartStatus'] == 1) {
  375. mainWindIsShow1.value = 'open';
  376. frontMonitorIsShow.value = true
  377. }else {
  378. mainWindIsShow1.value = 'stop';
  379. frontMonitorIsShow.value = false
  380. }
  381. if (data['Fan2StartStatus'] == 1) {
  382. mainWindIsShow2.value = 'open';
  383. backMonitorIsShow.value = true
  384. }else {
  385. mainWindIsShow2.value = 'stop';
  386. backMonitorIsShow.value = false
  387. }
  388. // play('initiatePlay', 'front', frequencyVal.value, 'open', 'tubPositivePath');
  389. return;
  390. };
  391. const start = (paramcode) => {
  392. const data = {
  393. deviceid: selectData.deviceID,
  394. devicetype: selectData.deviceType,
  395. paramcode: paramcode,
  396. };
  397. deviceControlApi(data).then((res) => {
  398. if (res.success) {
  399. //
  400. console.log('8888888888888888');
  401. }
  402. });
  403. };
  404. // 切换左右两边1#、2#风机的监测数据
  405. const selectDevice = (key, val) => {
  406. if (key === 'dataMonitorRowIndex') {
  407. dataMonitorRowIndex.value = val;
  408. } else {
  409. warningMonitorRowIndex.value = val;
  410. }
  411. };
  412. // 打开并设置modal的标题
  413. const showModal = (obj) => {
  414. modalType.value = obj.key;
  415. modalTitle.value = obj.value;
  416. modalIsShow.value = true;
  417. };
  418. const changeMotor = (e) => {
  419. const target = e.target;
  420. if (target.name === 'mainWind1') {
  421. if (target.value === 'open') {
  422. mainWindIsShow2.value = 'stop';
  423. }
  424. } else if (target.name === 'mainWind2') {
  425. if (target.value === 'open') {
  426. mainWindIsShow1.value = 'stop';
  427. }
  428. }
  429. };
  430. // 根据实时监测的数据执行动画
  431. const getState = (data) => {
  432. // 根据监测数据判断哪个风机在运行
  433. if (data['fanStart1'] == 1) {
  434. mainWindIsShow1.value = 'open';
  435. } else if (data['fanStart2'] == 1) {
  436. mainWindIsShow2.value = 'open';
  437. }
  438. }
  439. // 风机操作
  440. // const handleOk = (e: MouseEvent) => {
  441. // if (passWord.value !== '123456') {
  442. // message.warning('密码不正确,请重新输入');
  443. // return;
  444. // }
  445. // const frequency = frequencyVal.value;
  446. // if (modalType.value == 'startSmoke') {
  447. // if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
  448. // frontMonitorIsShow.value = true;
  449. // backMonitorIsShow.value = false;
  450. // play('startSmoke', 'front', frequency, 'open', 'tubPositivePath');
  451. // play('startSmoke', 'back', null, 'close', '');
  452. // } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
  453. // frontMonitorIsShow.value = false;
  454. // backMonitorIsShow.value = true;
  455. // play('startSmoke', 'back', frequency, 'open', 'tubPositivePath');
  456. // play('startSmoke', 'front', null, 'close', '');
  457. // } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
  458. // frontMonitorIsShow.value = false;
  459. // backMonitorIsShow.value = false;
  460. // play('startSmoke', 'back', null, 'stop', '');
  461. // play('startSmoke', 'front', null, 'close', '');
  462. // }
  463. // } else if (modalType.value == 'changeDirection') {
  464. // if (mainWindIsShow1.value == 'open') {
  465. // play('changeDirection', 'front', frequency, null, 'tubInversePath');
  466. // } else if (mainWindIsShow2.value == 'open') {
  467. // play('changeDirection', 'back', null, null, 'tubInversePath');
  468. // }
  469. // } else if (modalType.value == 'changeSmoke') {
  470. // // 不停风倒机的同时要切换当前监测数据
  471. // if (mainWindIsShow1.value == 'open') {
  472. // frontMonitorIsShow.value = false;
  473. // backMonitorIsShow.value = true;
  474. // // 切换到后面那台风,并需要设置后面风机的频率
  475. // // play('changeSmoke', 'back', dataSource.value[selectRowIndex.value + 1]['frequency'], null, 'tubInversePath');
  476. // play('changeSmoke', 'back', frequency, null, 'tubPositivePath');
  477. // } else if (mainWindIsShow2.value == 'open') {
  478. // frontMonitorIsShow.value = true;
  479. // backMonitorIsShow.value = false;
  480. // // 切换到前面那台风,并需要设置前面风机的频率
  481. // play('changeSmoke', 'front', frequency, null, 'tubPositivePath');
  482. // }
  483. // } else if (modalType.value == 'frequency') {
  484. // if (mainWindIsShow1.value == 'open') {
  485. // play('frequency', 'front', frequency);
  486. // } else if (mainWindIsShow2.value == 'open') {
  487. // play('frequency', 'back', frequency);
  488. // }
  489. // }
  490. // modalTitle.value = '';
  491. // modalIsShow.value = false;
  492. // };
  493. const handleOk = (e: MouseEvent) => {
  494. if (modalType.value == 'startSmoke') {
  495. if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
  496. frontMonitorIsShow.value = true;
  497. backMonitorIsShow.value = false;
  498. start('CtrlFan1Start');
  499. } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
  500. frontMonitorIsShow.value = false;
  501. backMonitorIsShow.value = true;
  502. start('CtrlFan2Start');
  503. } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
  504. frontMonitorIsShow.value = false;
  505. backMonitorIsShow.value = false;
  506. }
  507. } else if (modalType.value == 'changeDirection') {
  508. if (mainWindIsShow1.value == 'open') {
  509. } else if (mainWindIsShow2.value == 'open') {
  510. }
  511. } else if (modalType.value == 'changeSmoke') {
  512. // 不停风倒机的同时要切换当前监测数据
  513. if (mainWindIsShow1.value == 'open') {
  514. frontMonitorIsShow.value = false;
  515. backMonitorIsShow.value = true;
  516. // 切换到后面那台风,并需要设置后面风机的频率
  517. // play('changeSmoke', 'back', dataSource.value[selectRowIndex.value + 1]['frequency'], null, 'tubInversePath');
  518. } else if (mainWindIsShow2.value == 'open') {
  519. frontMonitorIsShow.value = true;
  520. backMonitorIsShow.value = false;
  521. // 切换到前面那台风,并需要设置前面风机的频率
  522. }
  523. } else if (modalType.value == 'frequency') {
  524. if (mainWindIsShow1.value == 'open') {
  525. } else if (mainWindIsShow2.value == 'open') {
  526. }
  527. }
  528. modalTitle.value = '';
  529. modalIsShow.value = false;
  530. };
  531. // 取消
  532. const handleCancel = () => {
  533. if (modalType.value == 'startSmoke') {
  534. const data = dataSource.value[selectRowIndex.value];
  535. mainWindIsShow1.value = 'stop';
  536. mainWindIsShow2.value = 'stop';
  537. if (data['fanStart1'] == 1) {
  538. mainWindIsShow1.value = 'open';
  539. } else if (data['fanStart2'] == 1) {
  540. mainWindIsShow2.value = 'open';
  541. }
  542. }
  543. };
  544. onBeforeMount(() => {
  545. // document.body.addEventListener('mousedown', addPlayVideo, true);
  546. getDeviceBaseList();
  547. });
  548. onMounted(() => {
  549. loading.value = true;
  550. mountedThree(player1.value).then(async () => {
  551. // await setModelType('mainWindRect');
  552. getMonitor();
  553. addText('mainWindRect');
  554. // play('initiatePlay', 'front', frequencyVal.value, 'open', 'tubPositivePath');
  555. });
  556. });
  557. onUnmounted(() => {
  558. destroy();
  559. if (timer) {
  560. clearTimeout(timer);
  561. timer = undefined;
  562. }
  563. });
  564. </script>
  565. <style scoped lang="less">
  566. @import '/@/design/vent/modal.less';
  567. :deep(.@{ventSpace}-tabs-tabpane-active) {
  568. overflow: auto;
  569. }
  570. .head-line {
  571. display: flex;
  572. flex-direction: row;
  573. justify-content: space-between;
  574. .button-box {
  575. position: relative;
  576. padding: 5px;
  577. border: 1px transparent solid;
  578. border-radius: 5px;
  579. margin-left: 8px;
  580. margin-right: 8px;
  581. width: auto;
  582. height: 34px;
  583. border: 1px solid #65dbea;
  584. display: flex;
  585. align-items: center;
  586. justify-content: center;
  587. color: #fff;
  588. padding: 0 15px;
  589. cursor: pointer;
  590. &:hover {
  591. background: linear-gradient(#3eb2ff55, #00c3ff55);
  592. }
  593. &::before {
  594. width: calc(100% - 6px);
  595. height: 26px;
  596. content: '';
  597. position: absolute;
  598. top: 3px;
  599. right: 0;
  600. left: 3px;
  601. bottom: 0;
  602. z-index: -1;
  603. border-radius: inherit; /*important*/
  604. background: linear-gradient(#014978, #3bf3fc);
  605. }
  606. }
  607. }
  608. .control-group,
  609. .top-box {
  610. display: flex !important;
  611. align-items: center !important;
  612. justify-content: center !important;
  613. position: absolute !important;
  614. width: 915px !important;
  615. height: 75px !important;
  616. left: 50% !important;
  617. top: 85px !important;
  618. transform: translateX(-50%) !important;
  619. background: url('/@/assets/images/vent/tab-group-bg.png') no-repeat !important;
  620. padding: 0 30px !important;
  621. .button-box {
  622. height: 35px !important;
  623. margin-left: 15px !important;
  624. margin-right: 15px !important;
  625. padding: 0 30px !important;
  626. border: 1px transparent solid;
  627. border: 1px solid #65dbea;
  628. &:hover {
  629. background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
  630. }
  631. &::before {
  632. height: 27px !important;
  633. background: linear-gradient(#1fa6cb, #127cb5) !important;
  634. }
  635. &::after {
  636. top: 35px !important;
  637. }
  638. }
  639. }
  640. .data-show-box {
  641. position: relative;
  642. display: flex;
  643. flex-direction: row;
  644. justify-content: space-between;
  645. padding: 10px;
  646. color: #ffffff;
  647. z-index: 999;
  648. top: 50px;
  649. .data-item {
  650. pointer-events: auto;
  651. .item-header {
  652. width: 374px;
  653. background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
  654. background-size: auto;
  655. height: 32px;
  656. text-align: center;
  657. line-height: 34px;
  658. font-size: 15px;
  659. font-weight: 600;
  660. color: #fafafa;
  661. }
  662. .item-container {
  663. width: 346px;
  664. margin: 0 14px;
  665. padding: 10px;
  666. background: #004aac33;
  667. backdrop-filter: blur(2px);
  668. .tab {
  669. width: 323px;
  670. background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
  671. display: flex;
  672. .tab-item {
  673. flex: 1;
  674. text-align: center;
  675. padding-top: 2px;
  676. color: #ffffff99;
  677. cursor: pointer;
  678. &:hover {
  679. color: #ffffff;
  680. }
  681. }
  682. .tab-item-active-l {
  683. color: #ffffff;
  684. background-image: url('/@/assets/images/vent/l-tab-active.png');
  685. background-repeat: no-repeat;
  686. background-size: auto;
  687. background-position: 6px 3px;
  688. }
  689. .tab-item-active-r {
  690. color: #ffffff;
  691. background-image: url('/@/assets/images/vent/r-tab-active.png');
  692. background-repeat: no-repeat;
  693. background-position: 0 3px;
  694. }
  695. }
  696. .container-group {
  697. width: 314px;
  698. margin: 0px 4px;
  699. padding: 10px 0;
  700. min-height: 472px;
  701. background: linear-gradient(to right, #007bff22, #2081ff05);
  702. max-height: 480px;
  703. overflow-y: auto;
  704. }
  705. .container-group-l {
  706. .container-item {
  707. width: 100%;
  708. height: 63px;
  709. display: flex;
  710. padding: 10px 0 0 20px;
  711. margin-bottom: 5px;
  712. position: relative;
  713. background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
  714. background-size: auto;
  715. background-position: bottom;
  716. &::before {
  717. content: '';
  718. display: block;
  719. width: 100%;
  720. height: 5px;
  721. position: absolute;
  722. top: 62px;
  723. left: 0;
  724. background-color: #73f4ff66;
  725. backdrop-filter: blur(5px);
  726. }
  727. .item-icon {
  728. width: 54px;
  729. height: 45px;
  730. background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
  731. background-size: cover;
  732. .icon-style {
  733. margin: 10px 0 0 18px;
  734. }
  735. }
  736. .item-name {
  737. width: 180px;
  738. line-height: 60px;
  739. }
  740. .item-value {
  741. position: relative;
  742. height: 26px;
  743. line-height: 24px;
  744. margin: 15px 0;
  745. text-align: center;
  746. width: 80px;
  747. border: 1px solid #00f5fe;
  748. border-radius: 13px;
  749. background: linear-gradient(to right, #00f5fe44, #0090ff44);
  750. &::before {
  751. width: 6px;
  752. height: 6px;
  753. content: '';
  754. position: absolute;
  755. left: -3px;
  756. top: 8px;
  757. background: #ffa500;
  758. border-radius: 3px;
  759. }
  760. }
  761. }
  762. }
  763. .warning-header {
  764. display: flex;
  765. font-size: 14px;
  766. .header-item {
  767. flex: 1;
  768. display: flex;
  769. flex-direction: column;
  770. margin: 5px 10px;
  771. justify-content: center;
  772. align-items: center;
  773. .header-title {
  774. color: #39e7fe;
  775. }
  776. .header-value {
  777. width: 133px;
  778. height: 56px;
  779. font-weight: 600;
  780. font-family: 'douyuFont';
  781. font-size: 16px;
  782. color: #ffa500;
  783. display: flex;
  784. justify-content: center;
  785. align-items: center;
  786. background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
  787. }
  788. }
  789. }
  790. .warning-group {
  791. padding: 0 10px;
  792. position: relative;
  793. &::before {
  794. content: '';
  795. display: block;
  796. width: 1px;
  797. height: 100%;
  798. position: absolute;
  799. left: 12px;
  800. background-color: #00f5fe;
  801. }
  802. .warning-item {
  803. display: flex;
  804. flex-direction: row;
  805. justify-content: space-between;
  806. align-items: center;
  807. height: 38px;
  808. .item-name {
  809. .icon {
  810. width: 6px;
  811. height: 6px;
  812. display: inline-block;
  813. background-color: #1cd5ff;
  814. border-radius: 3px;
  815. position: relative;
  816. margin-right: 5px;
  817. &::before {
  818. content: '';
  819. width: 10px;
  820. height: 10px;
  821. display: block;
  822. border: 1px solid #34edff99;
  823. border-radius: 5px;
  824. position: absolute;
  825. top: -2px;
  826. left: -2px;
  827. }
  828. }
  829. }
  830. }
  831. }
  832. }
  833. }
  834. }
  835. .threejs-Object-CSS {
  836. .elementTag {
  837. backdrop-filter: blur(2px);
  838. .elementContent {
  839. width: 220px;
  840. background-color: rgba(0, 0, 0, 0.3);
  841. box-shadow: 0px 0px 40px rgb(0 90 131 / 55%) inset;
  842. border: 2px solid rgb(153 176 195 / 55%);
  843. padding: 15px 20px 0px 20px;
  844. font-size: 15px;
  845. p {
  846. color: #f2a500;
  847. }
  848. span {
  849. // color: #74e9fe;
  850. color: #fff;
  851. }
  852. }
  853. .elementContent-r {
  854. &::before {
  855. right: 120px;
  856. }
  857. &::after {
  858. right: 270px;
  859. border: 4px solid rgb(0, 221, 255); //rgb(0 220 255 / 75%)
  860. background: #a7a7a766;
  861. }
  862. }
  863. }
  864. }
  865. ::v-deep(.@{ventSpace}-table-wrapper) {
  866. height: 100% !important;
  867. }
  868. ::v-deep(.@{ventSpace}-spin-container) {
  869. height: 100% !important;
  870. overflow-y: auto;
  871. }
  872. .label {
  873. max-width: 220px;
  874. }
  875. .@{ventSpace}-input {
  876. width: 150px;
  877. }
  878. </style>