|
|
@@ -1,384 +1,1609 @@
|
|
|
<template>
|
|
|
+ <customHeader>预警监测管控系统</customHeader>
|
|
|
<div class="sensor-container">
|
|
|
- <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
|
|
|
- <a-tab-pane key="1" tab="实时预警">
|
|
|
- <div class="box-bg table-box" style="margin-bottom: 10px">
|
|
|
- <label style="color: #fff">设备类型：</label>
|
|
|
- <MonitorTable
|
|
|
- ref="SensorMonitorRef"
|
|
|
- columnsType="alarm_history"
|
|
|
- :dataSource="dataSource"
|
|
|
- design-scope="alarm"
|
|
|
- @select-row="getSelectRow"
|
|
|
- :formConfi="formConfig"
|
|
|
- title="传感器监测"
|
|
|
- >
|
|
|
- <template #filterCell="{ column, record }">
|
|
|
- <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
|
|
|
- record.warnFlag == 0 ? '正常' : '报警'
|
|
|
- }}</a-tag>
|
|
|
- <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
|
|
|
- record.netStatus == '0' ? '断开' : '连接'
|
|
|
- }}</a-tag>
|
|
|
- </template>
|
|
|
- </MonitorTable>
|
|
|
- </div>
|
|
|
- <div class="charts-box box-bg">
|
|
|
- <BarAndLine
|
|
|
- v-if="chartsColumns.length > 0"
|
|
|
- :chartsColumnsType="selectData.deviceType"
|
|
|
- xAxisPropType="readTime"
|
|
|
- :dataSource="detailDataSource"
|
|
|
- height="100%"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- chartsType="detail"
|
|
|
- :option="echartsOption"
|
|
|
- @refresh="refreshEchatrs"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="实时报警">
|
|
|
- <div class="tab-item table-box box-bg padding-0">
|
|
|
- <HistoryTable columns-type="modelsensor" device-type="modelsensor" @change="historyDataSourceChange" designScope="modelsensor-history" />
|
|
|
- </div>
|
|
|
- <div class="charts-box box-bg">
|
|
|
- <BarAndLine
|
|
|
- v-if="chartsColumns.length > 0"
|
|
|
- :chartsColumnsType="selectData.deviceType"
|
|
|
- xAxisPropType="gcreatetime"
|
|
|
- :dataSource="historyDataSource"
|
|
|
- height="100%"
|
|
|
+ <div class="lr left-box">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div v-if="showToggle == 'all'" class="icon-toggle" @click="handlerToggle">
|
|
|
+ <img v-if="monitor" src="@/assets/images/vent/monitor-toggle.png" alt="" />
|
|
|
+ <img v-else src="@/assets/images/vent/report-toggle.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="monitor-title" @click="showModal('vent')">通风监测预警</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
|
|
|
+ <div class="vent-param">
|
|
|
+ <div class="light-group">
|
|
|
+ <div class="param-item">
|
|
|
+ <div class="param">
|
|
|
+ <div class="param-icon">
|
|
|
+ <div class="param-title">总进风量</div>
|
|
|
+ <div class="param-unit">(m³/min)</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="param-val-box">
|
|
|
+ <div class="param-val-icon"></div>
|
|
|
+ <div class="param-val">{{ windData.jf || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="param-item">
|
|
|
+ <div class="param">
|
|
|
+ <div class="param-icon">
|
|
|
+ <div class="param-title">总回风量</div>
|
|
|
+ <div class="param-unit">(m³/min)</div>
|
|
|
+ </div>
|
|
|
+ <div class="param-val-box">
|
|
|
+ <div class="param-val-icon"></div>
|
|
|
+ <div class="param-val">{{ windData.hf || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="param-item">
|
|
|
+ <div class="param">
|
|
|
+ <div class="param-icon">
|
|
|
+ <div class="param-title">总需风量</div>
|
|
|
+ <div class="param-unit">(m³/min)</div>
|
|
|
+ </div>
|
|
|
+ <div class="param-val-box">
|
|
|
+ <div class="param-val-icon"></div>
|
|
|
+ <div class="param-val">{{ windData.xf || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
|
|
|
+ <BarSingle
|
|
|
+ :xAxisData="xAxisData"
|
|
|
+ :dataSource="windData.levels"
|
|
|
+ height="225px"
|
|
|
:chartsColumns="chartsColumns"
|
|
|
- chartsType="history"
|
|
|
- :option="echartsOption1"
|
|
|
- @refresh="refreshEchatrs"
|
|
|
+ :option="option"
|
|
|
+ :color="colors"
|
|
|
+ :fontColor="fontColor"
|
|
|
/>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div class="monitor-title" @click="showModal('sbyj')">设备监测预警</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="icons-box" @mouseleave="resetScroll">
|
|
|
+ <template v-for="(item, key) in iconsMonitor" :key="key">
|
|
|
+ <div class="icon-item" v-if="item.text">
|
|
|
+ <div class="wrapper">
|
|
|
+ {{ item.text }}
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <img :src="item.url" :alt="item.text" />
|
|
|
+ <div class="level-text">
|
|
|
+ <div class="all-count">
|
|
|
+ <span>{{ `${item.allText} : ` }}</span>
|
|
|
+ <span class="num-count">{{ item.allCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="warn-count">
|
|
|
+ <span>{{ `${item.warnText} : ` }}</span>
|
|
|
+ <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="close-count">
|
|
|
+ <span> {{ `${item.closeText} : ` }}</span>
|
|
|
+ <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ <div class="center-box">
|
|
|
+ <div class="echart-warn-grade">
|
|
|
+ <warnGradeEchart :echartData="Levels" />
|
|
|
+ </div>
|
|
|
+ <div class="btn-warn-grade">
|
|
|
+ <!-- <a-button type="primary" size="small" @click="warnGradeClick">风险等级划分标准</a-button> -->
|
|
|
+ </div>
|
|
|
+ <div class="animation-box">
|
|
|
+ <canvas class="rain"></canvas>
|
|
|
+ <div
|
|
|
+ class="bottom"
|
|
|
+ :class="{
|
|
|
+ bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
|
|
|
+ bottom2: centerData.levels == 102,
|
|
|
+ bottom3: centerData.levels == 103,
|
|
|
+ bottom4: centerData.levels == 104,
|
|
|
+ bottom5: centerData.levels == 201,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="animation1">
|
|
|
+ <div class="ball"></div>
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559" style="opacity: 0.5">
|
|
|
+ <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
|
|
|
+ <path
|
|
|
+ id="椭圆_2595"
|
|
|
+ data-name="椭圆 2595"
|
|
|
+ d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
|
|
|
+ transform="translate(755.808 140.636)"
|
|
|
+ fill="#28a6ff"
|
|
|
+ opacity="0.7"
|
|
|
+ />
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="animation2">
|
|
|
+ <div class="ball1"></div>
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7" viewBox="0 0 414.878 91.7">
|
|
|
+ <g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
|
|
|
+ <path
|
|
|
+ id="椭圆_2595"
|
|
|
+ data-name="椭圆 2595"
|
|
|
+ d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
|
|
|
+ transform="translate(722.572 159.023)"
|
|
|
+ fill="#3dd8ff"
|
|
|
+ opacity="0.5"
|
|
|
+ />
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <div class="text1">{{
|
|
|
+ centerData.levels == 0
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.levels == 101
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.levels == 102
|
|
|
+ ? '一般风险'
|
|
|
+ : centerData.levels == 103
|
|
|
+ ? '较大风险'
|
|
|
+ : centerData.levels == 104
|
|
|
+ ? '重大风险'
|
|
|
+ : centerData.levels == 201
|
|
|
+ ? '报警'
|
|
|
+ : '未连接'
|
|
|
+ }}</div>
|
|
|
+
|
|
|
+ <div class="text2">{{ centerData.riskLevel !== undefined && centerData.riskLevel !== null ? centerData.riskLevel : '-' }}</div>
|
|
|
+ <div class="text3">风险得分</div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-animation" @click="warnGradeClick"></div>
|
|
|
</div>
|
|
|
- </a-tab-pane>
|
|
|
- <a-tab-pane key="3" tab="报警历史">
|
|
|
- <div class="tab-item box-bg">
|
|
|
- <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" :device-list-api="baseList" designScope="alarm-history" />
|
|
|
+
|
|
|
+ <div class="total-item-monitor-box">
|
|
|
+ <div class="item item1">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">火灾监测预警</span>
|
|
|
+ <span :class="centerData.fire != 0 && centerData.fire != 101 ? 'value1' : 'value'">{{
|
|
|
+ centerData.fire == 0
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.fire == 101
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.fire == 102
|
|
|
+ ? '一般风险'
|
|
|
+ : centerData.fire == 103
|
|
|
+ ? '较大风险'
|
|
|
+ : centerData.fire == 104
|
|
|
+ ? '重大风险'
|
|
|
+ : centerData.fire == 201
|
|
|
+ ? '报警'
|
|
|
+ : centerData.fire
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item item2">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">设备监测预警</span>
|
|
|
+ <span :class="centerData.sb != 0 && centerData.sb != 101 ? 'value1' : 'value'">{{
|
|
|
+ centerData.sb == 0
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.sb == 101
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.sb == 102
|
|
|
+ ? '一般风险'
|
|
|
+ : centerData.sb == 103
|
|
|
+ ? '较大风险'
|
|
|
+ : centerData.sb == 104
|
|
|
+ ? '重大风险'
|
|
|
+ : centerData.sb == 201
|
|
|
+ ? '报警'
|
|
|
+ : centerData.sb
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item item5">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">通风监测预警</span>
|
|
|
+ <span :class="centerData.tf !== 0 && centerData.tf !== 101 ? 'value1' : 'value'">{{
|
|
|
+ centerData.tf == 0
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.tf == 101
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.tf == 102
|
|
|
+ ? '一般风险'
|
|
|
+ : centerData.tf == 103
|
|
|
+ ? '较大风险'
|
|
|
+ : centerData.tf == 104
|
|
|
+ ? '重大风险'
|
|
|
+ : centerData.tf == 201
|
|
|
+ ? '报警'
|
|
|
+ : centerData.tf
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
- <div class="title-text">
|
|
|
- {{ selectData.strname }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="lr right-box">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div class="monitor-title" @click="showModal('fire')">内因火灾监测预警</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="fire-box fire-inner-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
|
|
|
+ <div class="box-item">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ value1: item.warnLevel == '绿色预警',
|
|
|
+ value2: item.warnLevel == '黄色预警',
|
|
|
+ value3: item.warnLevel == '红色预警',
|
|
|
+ }"
|
|
|
+ >{{ item.value1 ? item.value1 : '--' }}</div
|
|
|
+ >
|
|
|
+ <div class="title">监测位置</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="box-item">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ value1: item.warnLevel == '绿色预警',
|
|
|
+ value2: item.warnLevel == '黄色预警',
|
|
|
+ value3: item.warnLevel == '红色预警',
|
|
|
+ }"
|
|
|
+ >{{ item.warnLevel || '-' }}
|
|
|
+ </div>
|
|
|
+ <div class="title">预警等级</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-item1">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ value1: item.warnLevel == '绿色预警',
|
|
|
+ value2: item.warnLevel == '黄色预警',
|
|
|
+ value3: item.warnLevel == '红色预警',
|
|
|
+ }"
|
|
|
+ >{{ item.smokeJd || '-' }}
|
|
|
+ </div>
|
|
|
+ <div class="title">煤自燃阶段</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div class="monitor-title" @click="showModal('fire')">外因火灾监测预警</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="fire-box fire-outer-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="data-box1" v-for="(item, index) in fireMonitor" :key="index">
|
|
|
+ <div class="box-item">
|
|
|
+ <!-- <div class="value1"> {{ !item.value ? '-' : item.value == '正常' ? '低风险' : item.value }} </div> -->
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <div class="value1"> {{ !item.value ? '低风险' : item.value == '正常' ? '低风险' : item.value }} </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ <!-- 风险等级弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleGrade" width="850px" :footer="null" :title="titleGrade" centered destroyOnClose>
|
|
|
+ <warnGradeInfo />
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
- import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive, nextTick } from 'vue';
|
|
|
- import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
- import HistoryTable from '../comment/HistoryTable.vue';
|
|
|
- import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
|
|
|
- import { warningList } from './alarm.api';
|
|
|
- import { formConfig } from './alarm.data';
|
|
|
- import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
|
|
|
-
|
|
|
- const SensorMonitorRef = ref();
|
|
|
- const deviceBaseList = ref([]);
|
|
|
- const activeKey = ref('1');
|
|
|
- const deviceKind = ref('');
|
|
|
- const deviceTypeOption = ref([]);
|
|
|
- // 默认初始是第一行
|
|
|
- const selectRowIndex = ref(0);
|
|
|
- const dataSource = ref([]);
|
|
|
- const detailDataSource = ref<any[]>([]);
|
|
|
- const historyDataSource = ref<any[]>([]);
|
|
|
- const chartsColumns = ref<any[]>([]);
|
|
|
-
|
|
|
- const echartsOption = {
|
|
|
- grid: {
|
|
|
- top: '20%',
|
|
|
- left: '10px',
|
|
|
- right: '5px',
|
|
|
- bottom: '5%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- };
|
|
|
+ import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+ import { rainBg } from '/@/utils/ui.js';
|
|
|
+ import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
|
|
+ import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+ import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api';
|
|
|
+ import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
|
|
|
+ import { getTotalList, sysTypeWarnList } from './alarm.api';
|
|
|
+ import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+ import BarSingle from '../../../../components/chart/BarSingle.vue';
|
|
|
+ import warnGradeEchart from './common/warnGradeEchart.vue';
|
|
|
+ import warnGradeInfo from './common/warnGradeInfo.vue';
|
|
|
+
|
|
|
+ let monitor = ref(true);
|
|
|
+ let toggleData = reactive({});
|
|
|
+ let router = useRouter();
|
|
|
+ let warnLevels = ref('');
|
|
|
+ let Levels = reactive({});
|
|
|
+ const warnNumMap = new Map([
|
|
|
+ ['fire', 0],
|
|
|
+ ['dust', 0],
|
|
|
+ ['vent', 0],
|
|
|
+ ['gas', 0],
|
|
|
+ ]);
|
|
|
|
|
|
- const selectData = reactive({
|
|
|
- strname: '',
|
|
|
- deviceType: '',
|
|
|
- deviceID: '',
|
|
|
+ const resetScroll = (e: Event) => {
|
|
|
+ if (e.target && e.target) (e.target as Element).scrollTop = 0;
|
|
|
+ };
|
|
|
+ let windData = reactive({
|
|
|
+ levels: {},
|
|
|
+ jf: 0,
|
|
|
+ hf: 0,
|
|
|
+ xf: 0,
|
|
|
+ }); //通风监测数据
|
|
|
+ let dustData = reactive({
|
|
|
+ //粉尘监测数据
|
|
|
+ levels: {},
|
|
|
+ });
|
|
|
+ let centerData = reactive({
|
|
|
+ fire: 0,
|
|
|
+ tf: 0,
|
|
|
+ ws: 0,
|
|
|
+ sb: 0,
|
|
|
+ fc: 0,
|
|
|
+ levels: 0,
|
|
|
+ riskLevel: '-',
|
|
|
});
|
|
|
+ //瓦斯
|
|
|
+ let gasMonitor = reactive<any[]>([]);
|
|
|
+ let gasData = {
|
|
|
+ sums: 0,
|
|
|
+ sums1: 0,
|
|
|
+ };
|
|
|
+ let fireMonitor1 = ref<any[]>([]);
|
|
|
+ let visibleGrade = ref(false); //控制风险等级弹窗显示与隐藏
|
|
|
+ let titleGrade = ref(''); //风险等级弹窗标题
|
|
|
+ let showToggle = ref('report');
|
|
|
|
|
|
- const tabChange = (activeKeyVal) => {
|
|
|
- activeKey.value = activeKeyVal;
|
|
|
+ //点击切换实时\报表数据
|
|
|
+ let handlerToggle = () => {
|
|
|
+ monitor.value = !monitor.value;
|
|
|
+ windData.jf = monitor.value ? toggleData.ventInfo.zongjinfeng : toggleData.ventInfo.totalIntM3;
|
|
|
+ windData.hf = monitor.value ? toggleData.ventInfo.zonghuifeng : toggleData.ventInfo.totalRetM3;
|
|
|
+ };
|
|
|
+ //风险等级点击
|
|
|
+ let warnGradeClick = () => {
|
|
|
+ visibleGrade.value = true;
|
|
|
+ titleGrade.value = '风险等级信息';
|
|
|
};
|
|
|
+ //跳转详情
|
|
|
+ function showModal(data) {
|
|
|
+ switch (data) {
|
|
|
+ case 'vent':
|
|
|
+ router.push('/ventilate/warn/home');
|
|
|
+ break;
|
|
|
+ case 'fire':
|
|
|
+ router.push('/fire/warn/home');
|
|
|
+ break;
|
|
|
+ case 'dust':
|
|
|
+ router.push('/dust/warn/home');
|
|
|
+ break;
|
|
|
+ case 'gas':
|
|
|
+ router.push('/gas/warn/home');
|
|
|
+ break;
|
|
|
+ case 'sbyj':
|
|
|
+ // router.push('/device/warn/home');
|
|
|
+ router.push('/device/warn/home');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
// https获取监测数据
|
|
|
let timer: null | NodeJS.Timeout = null;
|
|
|
- const getMonitor = (flag = false) => {
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- timer = setTimeout(
|
|
|
- async () => {
|
|
|
- await getDataSource();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor();
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
- );
|
|
|
- }
|
|
|
- };
|
|
|
+ function getMonitor(flag = false) {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ // await getDataSource();
|
|
|
+ await getList();
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 10000
|
|
|
+ );
|
|
|
+ }
|
|
|
|
|
|
- const getDataSource = async () => {
|
|
|
- const res = await warningList({});
|
|
|
- dataSource.value = res.list.records || [];
|
|
|
- // if(dataSource.value.length > 0){
|
|
|
- // dataSource.value.map((data: any) => {
|
|
|
- // const readData = data.readData;
|
|
|
- // data = Object.assign(data, readData);
|
|
|
- // return data;
|
|
|
- // });
|
|
|
- // }
|
|
|
- };
|
|
|
+ // 获取预警数据
|
|
|
+ async function getList() {
|
|
|
+ const res = await getTotalList({});
|
|
|
+ console.log(res, '预警数据--------------');
|
|
|
+ // fireMonitor1.value.length = 0;
|
|
|
+ toggleData = Object.assign({}, res);
|
|
|
+ windData.levels = res.info.sysInfo.ventS.levels;
|
|
|
+ windData.levels['blue'] = warnNumMap.get('vent');
|
|
|
+ if (showToggle.value == 'monitor') {
|
|
|
+ windData.jf = res.ventInfo.zongjinfeng;
|
|
|
+ windData.hf = res.ventInfo.zonghuifeng;
|
|
|
+ } else if (showToggle.value == 'report') {
|
|
|
+ windData.jf = res.ventInfo.totalIntM3;
|
|
|
+ windData.hf = res.ventInfo.totalRetM3;
|
|
|
+ } else {
|
|
|
+ windData.jf = monitor.value ? res.ventInfo.zongjinfeng : res.ventInfo.totalIntM3;
|
|
|
+ windData.hf = monitor.value ? res.ventInfo.zonghuifeng : res.ventInfo.totalRetM3;
|
|
|
+ }
|
|
|
+ windData.xf = res.ventInfo.xufengliang;
|
|
|
+ dustData.levels = res.info.sysInfo.dustS.levels;
|
|
|
+ dustData.levels['blue'] = warnNumMap.get('dust');
|
|
|
+ centerData.fire = res.info.sysInfo.fireS.maxLevel;
|
|
|
+ centerData.tf = res.info.sysInfo.ventS.maxLevel;
|
|
|
+ centerData.ws = res.info.sysInfo.gasS.maxLevel;
|
|
|
+ centerData.sb = res.info.deviceWarnInfo.maxLevel;
|
|
|
+ centerData.fc = res.info.sysInfo.dustS.maxLevel;
|
|
|
+ centerData.riskLevel = res.info.riskLevel;
|
|
|
+ Levels = Object.assign({}, await getDisasterProportion());
|
|
|
+ centerData.levels =
|
|
|
+ Levels.level > 0 && Levels.level <= 1
|
|
|
+ ? 101
|
|
|
+ : Levels.level > 1 && Levels.level <= 2
|
|
|
+ ? 102
|
|
|
+ : Levels.level > 2 && Levels.level <= 3
|
|
|
+ ? 103
|
|
|
+ : Levels.level > 3 && Levels.level <= 4
|
|
|
+ ? 104
|
|
|
+ : 0;
|
|
|
|
|
|
- const getSelectRow = (selectRow, index) => {
|
|
|
- if (!selectRow) return;
|
|
|
- selectRowIndex.value = index;
|
|
|
- const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
|
|
|
- Object.assign(selectData, selectRow, baseData);
|
|
|
- if (selectData.deviceType) {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
+ Object.keys(iconsMonitor).forEach((el) => {
|
|
|
+ if (res.info.devicekindInfo[el]) {
|
|
|
+ // iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
|
|
|
+ iconsMonitor[el].text = res.info.devicekindInfo[el].name;
|
|
|
+ iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount;
|
|
|
+ iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count;
|
|
|
+ iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netstatus;
|
|
|
}
|
|
|
- if (activeKey.value === '1') detailDataSource.value = [];
|
|
|
- if (activeKey.value === '2') historyDataSource.value = [];
|
|
|
- handleChange(selectData.deviceType);
|
|
|
- }
|
|
|
- };
|
|
|
+ });
|
|
|
+ fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo
|
|
|
+ ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
|
|
|
+ ? '正常'
|
|
|
+ : ''
|
|
|
+ : '';
|
|
|
+ fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo
|
|
|
+ ? res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
|
|
|
+ res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
|
|
|
+ res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
|
|
|
+ ? '正常'
|
|
|
+ : ''
|
|
|
+ : '';
|
|
|
|
|
|
- function handleChange(type) {
|
|
|
- if (type === 'modelsensor_multi') {
|
|
|
- chartsColumns.value = [
|
|
|
- {
|
|
|
- legend: '气压值',
|
|
|
- seriesName: '(Pa)',
|
|
|
- ymax: 50,
|
|
|
- yname: 'Pa',
|
|
|
- linetype: 'bar',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#37BCF2',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'pa',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '温度',
|
|
|
- seriesName: '(℃)',
|
|
|
- ymax: 50,
|
|
|
- yname: '℃',
|
|
|
- linetype: 'bar',
|
|
|
- yaxispos: 'right',
|
|
|
- color: '#FC4327',
|
|
|
- sort: 2,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'temperature',
|
|
|
- },
|
|
|
- ];
|
|
|
- } else if (type === 'modelsensor_smoke') {
|
|
|
- chartsColumns.value = [
|
|
|
- {
|
|
|
- legend: '烟雾浓度',
|
|
|
- seriesName: '(%)',
|
|
|
- ymax: 20,
|
|
|
- yname: '%',
|
|
|
- linetype: 'bar',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#37BCF2',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'windSpeed',
|
|
|
- },
|
|
|
- ];
|
|
|
- } else if (type === 'modelsensor_speed') {
|
|
|
- chartsColumns.value = [
|
|
|
- {
|
|
|
- legend: '风速',
|
|
|
- seriesName: '(m/s)',
|
|
|
- ymax: 20,
|
|
|
- yname: 'm/s',
|
|
|
- linetype: 'bar',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#37BCF2',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'windSpeed',
|
|
|
- },
|
|
|
- ];
|
|
|
- } else if (type === 'modelsensor_gas') {
|
|
|
- chartsColumns.value = [
|
|
|
- {
|
|
|
- legend: '甲烷',
|
|
|
- seriesName: '(%)',
|
|
|
- ymax: 20,
|
|
|
- yname: '%',
|
|
|
- linetype: 'bar',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#37BCF2',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'windSpeed',
|
|
|
- },
|
|
|
- ];
|
|
|
- }
|
|
|
+ fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo
|
|
|
+ ? res.info.sysInfo.fireS.summaryInfo.external.fireval &&
|
|
|
+ res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
|
|
|
+ res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
|
|
|
+ ? '正常'
|
|
|
+ : ''
|
|
|
+ : '';
|
|
|
|
|
|
- console.log('[ type ] >', type, chartsColumns.value);
|
|
|
- }
|
|
|
+ fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo
|
|
|
+ ? res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
|
|
|
+ ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
|
|
|
+ : ''
|
|
|
+ : '';
|
|
|
|
|
|
- function refreshEchatrs() {
|
|
|
- timer = null;
|
|
|
- getMonitor();
|
|
|
- console.log('echarts 刷新');
|
|
|
+ if (res.bundletubeInfo && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
|
|
|
+ const moniterList: any[] = [];
|
|
|
+ res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
|
|
|
+ moniterList.push({
|
|
|
+ warnLevel: el.syswarnLevel_str,
|
|
|
+ smokeJd: el.syswarnLevel_des,
|
|
|
+ value1: el.strinstallpos,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ fireMonitor1.value = moniterList;
|
|
|
+ } else {
|
|
|
+ fireMonitor1.value = [];
|
|
|
+ }
|
|
|
+ gasMonitor.length = 0;
|
|
|
+ gasData.sums = 0;
|
|
|
+ gasData.sums1 = 0;
|
|
|
+ res.info.sysInfo.gasS.devices.forEach((el) => {
|
|
|
+ gasData.sums += el.gasNumber;
|
|
|
+ gasData.sums1 += el.pumpNumber;
|
|
|
+ gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- function historyDataSourceChange(dataSource) {
|
|
|
- historyDataSource.value = dataSource;
|
|
|
- if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
|
|
|
+ function getLevelNum() {
|
|
|
+ return new Promise(async (resolve) => {
|
|
|
+ const typeArr = ['fire', 'dust', 'vent', 'gas'];
|
|
|
+ for (let i = 0; i < typeArr.length; i++) {
|
|
|
+ const type = typeArr[i];
|
|
|
+ const result = await sysTypeWarnList({ type });
|
|
|
+ warnNumMap.set(type, result['length']);
|
|
|
+ }
|
|
|
+ resolve(null);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- getMonitor(true);
|
|
|
+ const { sysOrgCode, sysDataType } = useGlobSetting();
|
|
|
+ warnLevels.value = sysOrgCode;
|
|
|
+ showToggle.value = sysDataType || 'report';
|
|
|
+ await getLevelNum();
|
|
|
+ await getMonitor(true);
|
|
|
+ rainBg('rain', 'animation-box');
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- }
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@import '/@/design/theme.less';
|
|
|
- @import '/@/design/vent/modal.less';
|
|
|
- .padding-0 {
|
|
|
- padding: 10px 0 !important;
|
|
|
- }
|
|
|
- .sensor-container {
|
|
|
- position: relative;
|
|
|
- top: 65px;
|
|
|
- padding: 10px;
|
|
|
- z-index: 999;
|
|
|
- max-height: calc(100vh - 150px);
|
|
|
- .@{ventSpace}-tabs {
|
|
|
- max-height: calc(100vh - 100px);
|
|
|
- .tab-item {
|
|
|
- max-height: calc(100vh - 170px);
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .title-text {
|
|
|
- position: absolute;
|
|
|
- top: -14px;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .table-box {
|
|
|
- height: calc(60vh - 150px);
|
|
|
- padding: 20px 10px;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
+ @import '/@/design/vent/color.less';
|
|
|
+ @a: 370px; // 椭圆x轴半径(长半径)
|
|
|
+ @b: 107px; // 椭圆y轴半径(短半径)
|
|
|
+ @s: 40; // 坐标点的数目(数目越大，动画越精细)
|
|
|
|
|
|
- .box-bg {
|
|
|
- border: 1px solid #4d7ad855;
|
|
|
- border-radius: 2px;
|
|
|
- // background-color: #001d3055;
|
|
|
- -webkit-backdrop-filter: blur(8px);
|
|
|
- backdrop-filter: blur(8px);
|
|
|
- box-shadow: 0 0 10px #5984e055 inset;
|
|
|
- background-color: #00b3ff12;
|
|
|
- }
|
|
|
- .charts-box {
|
|
|
- height: calc(40vh - 80px);
|
|
|
- padding: 5px 10px;
|
|
|
- margin-top: 10px;
|
|
|
+ @bg: #e6e2df;
|
|
|
+
|
|
|
+ .loop(@index) when (@index < @s + 1) {
|
|
|
+ .loop((@index + 1));
|
|
|
+ @keyframeSel: @index * 100% ./ @s;
|
|
|
+
|
|
|
+ @{keyframeSel} {
|
|
|
+ transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
|
|
|
}
|
|
|
}
|
|
|
- :deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- :deep(.@{ventSpace}-tabs-card) {
|
|
|
- .@{ventSpace}-tabs-tab {
|
|
|
- background: linear-gradient(#2cd1ff55, #1eb0ff55);
|
|
|
- border-color: #74e9fe;
|
|
|
- border-radius: 0%;
|
|
|
- &:hover {
|
|
|
- color: #64d5ff;
|
|
|
- }
|
|
|
+
|
|
|
+ @{theme-deepblue} {
|
|
|
+ .sensor-container {
|
|
|
+ --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
|
|
|
+ --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
|
|
|
+ // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
|
|
|
+ --image-fire-bg-top: url('/@/assets/images/themify/deepblue/vent/fire-bg-top.png');
|
|
|
+ --image-icon-bottom-bg: url('/@/assets/images/themify/deepblue/vent/icon-bottom-bg.png');
|
|
|
+ --image-outer-icon: url('/@/assets/images/themify/deepblue/vent/outer-icon.svg');
|
|
|
+ --image-inner-icon: url('/@/assets/images/themify/deepblue/vent/inner-icon.svg');
|
|
|
+ --image-box-bottom-bg: none;
|
|
|
+ // --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
|
|
|
+ --image-center-bg: url('/@/assets/images/themify/deepblue/vent/alarm/center-bg.png');
|
|
|
+ --image-warning-bg: url('/@/assets/images/themify/deepblue/vent/alarm/warning-bg.png');
|
|
|
+ --image-warning-icon-bg1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg1.png');
|
|
|
+ --image-warning-icon-bg-a1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a1.png');
|
|
|
+ --image-warning-icon-bg2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg2.png');
|
|
|
+ --image-warning-icon-bg-a2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a2.png');
|
|
|
+ --image-warning-icon-bg3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg3.png');
|
|
|
+ --image-warning-icon-bg-a3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a3.png');
|
|
|
+ --image-warning-icon-bg4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg4.png');
|
|
|
+ --image-warning-icon-bg-a4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a4.png');
|
|
|
+ --image-warning-icon-bg5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg5.png');
|
|
|
+ --image-warning-icon-bg-a5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a5.png');
|
|
|
+ --image-bottom1: url('/@/assets/images/themify/deepblue/vent/alarm/bottom1.png');
|
|
|
+ --image-bottom: url('/@/assets/images/themify/deepblue/vent/alarm/bottom.png');
|
|
|
+ --image-icon-bg: url('/@/assets/images/themify/deepblue/vent/alarm/icon-bg.png');
|
|
|
+ --image-icon-animation: url('/@/assets/images/themify/deepblue/vent/alarm/icon-animation.png');
|
|
|
+ --image-data-bg: url('/@/assets/images/themify/deepblue/vent/alarm/data-bg.png');
|
|
|
+ --image-icon-fire: url('/@/assets/images/themify/deepblue/vent/alarm/icon-fire.svg');
|
|
|
+ --image-icon-device: url('/@/assets/images/themify/deepblue/vent/alarm/icon-device.svg');
|
|
|
+ --image-icon-dust: url('/@/assets/images/themify/deepblue/vent/alarm/icon-dust.svg');
|
|
|
+ --image-icon-gas: url('/@/assets/images/themify/deepblue/vent/alarm/icon-gas.svg');
|
|
|
+ --image-icon-vent: url('/@/assets/images/themify/deepblue/vent/alarm/icon-vent.svg');
|
|
|
+ --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
|
|
|
+ --image-plane: url('/@/assets/images/themify/deepblue/vent/plane.png');
|
|
|
+ --image-small-bg1: url('/@/assets/images/themify/deepblue/vent/small-bg1.png');
|
|
|
+ --image-plane1: url('/@/assets/images/themify/deepblue/vent/plane1.png');
|
|
|
+ --container-color: #0e223b;
|
|
|
+ // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
|
|
|
+ --container-image: none;
|
|
|
}
|
|
|
- .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
|
|
|
- color: aqua;
|
|
|
+
|
|
|
+ .sensor-container {
|
|
|
+ .center-box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
}
|
|
|
- .@{ventSpace}-tabs-nav::before {
|
|
|
- border-color: #74e9fe;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sensor-container {
|
|
|
+ --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
|
|
|
+ --image-box-top-bg: url('/@/assets/images/vent/box-top-bg.png');
|
|
|
+ --image-fire-bg-top: url('/@/assets/images/vent/fire-bg-top.png');
|
|
|
+ --image-icon-bottom-bg: url('/@/assets/images/vent/icon-bottom-bg.png');
|
|
|
+ --image-outer-icon: url('/@/assets/images/vent/outer-icon.svg');
|
|
|
+ --image-inner-icon: url('/@/assets/images/vent/inner-icon.svg');
|
|
|
+ --image-box-bottom-bg: url('/@/assets/images/vent/box-bottom-bg.png');
|
|
|
+ --image-center-bg: url('/@/assets/images/vent/alarm/center-bg.png');
|
|
|
+ --image-warning-bg: url('/@/assets/images/vent/alarm/warning-bg.png');
|
|
|
+ --image-warning-icon-bg1: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
|
|
|
+ --image-warning-icon-bg-a1: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
|
|
|
+ --image-warning-icon-bg2: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
|
|
|
+ --image-warning-icon-bg-a2: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
|
|
|
+ --image-warning-icon-bg3: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
|
|
|
+ --image-warning-icon-bg-a3: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
|
|
|
+ --image-warning-icon-bg4: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
|
|
|
+ --image-warning-icon-bg-a4: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
|
|
|
+ --image-warning-icon-bg5: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
|
|
|
+ --image-warning-icon-bg-a5: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
|
|
|
+ --image-bottom1: url('/@/assets/images/vent/alarm/bottom1.png');
|
|
|
+ --image-bottom: url('/@/assets/images/vent/alarm/bottom.png');
|
|
|
+ --image-icon-bg: url('/@/assets/images/vent/alarm/icon-bg.png');
|
|
|
+ --image-icon-animation: url('/@/assets/images/vent/alarm/icon-animation.png');
|
|
|
+ --image-data-bg: url('/@/assets/images/vent/alarm/data-bg.png');
|
|
|
+ --image-icon-fire: url('/@/assets/images/vent/alarm/icon-fire.svg');
|
|
|
+ --image-icon-device: url('/@/assets/images/vent/alarm/icon-device.svg');
|
|
|
+ --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
|
|
|
+ --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
|
|
|
+ --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
|
|
|
+ --image-value-bg: url('/@/assets/images/vent/value-bg.png');
|
|
|
+ --image-plane: url('/@/assets/images/vent/plane.png');
|
|
|
+ --image-small-bg1: url('/@/assets/images/vent/small-bg1.png');
|
|
|
+ --image-plane1: url('/@/assets/images/vent/plane1.png');
|
|
|
+ --container-color: #00213236;
|
|
|
+ --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 86px);
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ top: 78px;
|
|
|
+
|
|
|
+ .lr {
|
|
|
+ width: 650px;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ // background-color: #ffffff10;
|
|
|
}
|
|
|
- .@{ventSpace}-picker,
|
|
|
- .@{ventSpace}-select-selector {
|
|
|
- width: 100% !important;
|
|
|
- background: #00000017 !important;
|
|
|
- border: 1px solid @vent-form-item-border !important;
|
|
|
- input,
|
|
|
- .@{ventSpace}-select-selection-item,
|
|
|
- .@{ventSpace}-picker-suffix {
|
|
|
- color: #fff !important;
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ .vent-param {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .light-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .param-item {
|
|
|
+ width: 150px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: reactive;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .param-icon {
|
|
|
+ width: 121px;
|
|
|
+ height: 69px;
|
|
|
+ background: var(--image-vent-param-bg);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: -20px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .param-title {
|
|
|
+ position: relative;
|
|
|
+ top: -4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-unit {
|
|
|
+ position: relative;
|
|
|
+ top: -2px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-val-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: -20px;
|
|
|
+
|
|
|
+ .param-val-icon {
|
|
|
+ width: 2px;
|
|
|
+ height: 15px;
|
|
|
+ background: #00d8ff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ background: #00d8ff;
|
|
|
+ bottom: -2px;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-val {
|
|
|
+ position: relative;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ // color: #20dbfd;
|
|
|
+ text-shadow: 0 0 25px #00d8ff;
|
|
|
+ font-size: 13px;
|
|
|
+ border: 1px solid #40b7f3;
|
|
|
+ padding: 5px 30px 2px 30px;
|
|
|
+ top: 2px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ width: calc(100% - 4px);
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+ display: block;
|
|
|
+ border: 1px solid #006ea6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .@{ventSpace}-select-selection-placeholder {
|
|
|
- color: #b7b7b7 !important;
|
|
|
+
|
|
|
+ .icons-box {
|
|
|
+ height: 365px;
|
|
|
+ overflow-y: hidden;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 3px;
|
|
|
+
|
|
|
+ &:nth-child(even) {
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level-text {
|
|
|
+ width: 245px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ position: absolute;
|
|
|
+ top: 48px;
|
|
|
+ left: 180px;
|
|
|
+ color: #ffffffe0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
+
|
|
|
+ .num-count,
|
|
|
+ .num-count1 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warn-count,
|
|
|
+ .close-count {
|
|
|
+ .num-count {
|
|
|
+ color: #ffffffe0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num-count1 {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 427px;
|
|
|
+ height: 79px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 48px;
|
|
|
+ left: 112px;
|
|
|
+ color: #ffffffe0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .@{ventSpace}-pagination-next,
|
|
|
- .action,
|
|
|
- .@{ventSpace}-select-arrow,
|
|
|
- .@{ventSpace}-picker-separator {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-table-cell-row-hover {
|
|
|
- background: #264d8833 !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-table-row-selected {
|
|
|
- background: #00c0a311 !important;
|
|
|
- td {
|
|
|
- background-color: #00000000 !important;
|
|
|
+
|
|
|
+ @keyframes move {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-269px);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .@{ventSpace}-table-thead {
|
|
|
- // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
|
|
|
- background: #3d9dd45d !important;
|
|
|
-
|
|
|
- & > tr > th,
|
|
|
- .@{ventSpace}-table-column-title {
|
|
|
- // color: #70f9fc !important;
|
|
|
- border-color: #84f2ff !important;
|
|
|
- border-left: none !important;
|
|
|
- border-right: none !important;
|
|
|
- padding: 7px;
|
|
|
+
|
|
|
+ @keyframes move1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .@{ventSpace}-table-tbody {
|
|
|
- tr > td {
|
|
|
- padding: 12px;
|
|
|
+ .center-box {
|
|
|
+ position: relative;
|
|
|
+ width: calc(100% - 710px);
|
|
|
+ // background-color: #ffffff10;
|
|
|
+ margin: 0 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .echart-warn-grade {
|
|
|
+ position: absolute;
|
|
|
+ left: -10px;
|
|
|
+ top: 10px;
|
|
|
+ width: 400px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-warn-grade {
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+ .animation-box {
|
|
|
+ height: fit-content;
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-top: 120px;
|
|
|
+ background: var(--image-center-bg) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ background-position: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: 45px;
|
|
|
+
|
|
|
+ .rain {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 528px;
|
|
|
+ height: 395px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 325px;
|
|
|
+ height: 379px;
|
|
|
+ position: absolute;
|
|
|
+ left: 105px;
|
|
|
+ top: -60px;
|
|
|
+ background: var(--image-warning-bg) no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation1 {
|
|
|
+ width: 390px;
|
|
|
+ height: 78px;
|
|
|
+ position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ left: 80px;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ // animation: rotate3 3s linear infinite;
|
|
|
+ .ball {
|
|
|
+ position: absolute;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
+ border-radius: 6px;
|
|
|
+ background-size: cover;
|
|
|
+ offset-path: path(
|
|
|
+ 'M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
|
|
|
+ );
|
|
|
+ animation: 10s linear 0s infinite alternate ball;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation2 {
|
|
|
+ width: 430px;
|
|
|
+ height: 92px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 60px;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ // animation: rotate4 3s linear infinite;
|
|
|
+ .ball1 {
|
|
|
+ position: absolute;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
+ border-radius: 6px;
|
|
|
+ background-size: cover;
|
|
|
+ offset-path: path(
|
|
|
+ 'M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
|
|
|
+ );
|
|
|
+ animation: 10s linear 0s infinite alternate ball1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 30px;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ padding-top: 20px;
|
|
|
+ position: relative;
|
|
|
+ top: 30px;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffffffdd;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
+ top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text3 {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffffdd;
|
|
|
+ margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
+ top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ width: 178px;
|
|
|
+ height: 208px;
|
|
|
+ margin: 0 auto;
|
|
|
+ top: -130px;
|
|
|
+ left: 4px;
|
|
|
+ position: relative;
|
|
|
+ animation: 0.5s linear 0s infinite alternate iconMove;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom1 {
|
|
|
+ background-image: var(--image-warning-icon-bg1);
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: var(--image-warning-icon-bg-a1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #00d8ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom2 {
|
|
|
+ background-image: var(--image-warning-icon-bg2);
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: var(--image-warning-icon-bg-a2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #fcfc22;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom3 {
|
|
|
+ background-image: var(--image-warning-icon-bg3);
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: var(--image-warning-icon-bg-a3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #ff7010;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom4 {
|
|
|
+ background-image: var(--image-warning-icon-bg4);
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: var(--image-warning-icon-bg-a4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #df4e43;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom5 {
|
|
|
+ background-image: var(--image-warning-icon-bg5);
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: var(--image-warning-icon-bg-a5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #ff2313;
|
|
|
+ // animation: color-blink 1s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ // @keyframes color-blink {
|
|
|
+ // 0% { color: red; }
|
|
|
+ // 50% { color: blue; }
|
|
|
+ // 100% { color: red; }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-item-monitor-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 237px;
|
|
|
+ position: relative;
|
|
|
+ top: 180px;
|
|
|
+ left: 265px;
|
|
|
+ background: var(--image-bottom1) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 750px;
|
|
|
+ height: 750px;
|
|
|
+ position: absolute;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ transform: translateX(0%) translateY(0%) rotateX(72deg);
|
|
|
+ background: var(--image-bottom);
|
|
|
+ animation: rotate1 3s linear infinite;
|
|
|
+ top: -200px;
|
|
|
+ left: -180px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ // width: 107px;
|
|
|
+ // height: 107px;
|
|
|
+ // left: 120px;
|
|
|
+ // top: 115px;
|
|
|
+ // animation: red-ball 10s linear infinite;
|
|
|
+ .icon-box {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 105px;
|
|
|
+ height: 68px;
|
|
|
+ top: 15px;
|
|
|
+ z-index: -1;
|
|
|
+ background: var(--image-icon-bg) no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 71px;
|
|
|
+ height: 71px;
|
|
|
+ top: 26px;
|
|
|
+ left: 14px;
|
|
|
+ z-index: 1;
|
|
|
+ background: var(--image-icon-animation) no-repeat;
|
|
|
+ transform: translateX(0%) rotateX(70deg);
|
|
|
+ animation: rotate2 2s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-monitor-box {
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ position: relative;
|
|
|
+ top: -135px;
|
|
|
+ left: -20px;
|
|
|
+ font-weight: 600;
|
|
|
+ // background: #06020066;
|
|
|
+ padding: 5px 20px 8px 20px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 196px;
|
|
|
+ height: 48px;
|
|
|
+ left: -20px;
|
|
|
+ top: -10px;
|
|
|
+ background: var(--image-data-bg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #2bdcff;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #ff0000;
|
|
|
+ animation: color-blink 1s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes color-blink {
|
|
|
+ 0% {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ color: rgb(198, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ color: rgb(255, 18, 18);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item1 {
|
|
|
+ top: 230px;
|
|
|
+ left: 150px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: var(--image-icon-fire);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item2 {
|
|
|
+ top: 185px;
|
|
|
+ left: -120px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: var(--image-icon-device);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item3 {
|
|
|
+ top: 185px;
|
|
|
+ left: 420px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: var(--image-icon-dust);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item4 {
|
|
|
+ top: 20px;
|
|
|
+ left: 390px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: var(--image-icon-gas);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-monitor-box {
|
|
|
+ top: -155px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item5 {
|
|
|
+ top: 185px;
|
|
|
+ left: 420px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: var(--image-icon-vent);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes iconMove {
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(72deg) rotateZ(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate2 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(70deg) rotateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate3 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate4 {
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ball {
|
|
|
+ 100% {
|
|
|
+ offset-distance: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 0% {
|
|
|
+ offset-distance: 0%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ball1 {
|
|
|
+ 0% {
|
|
|
+ offset-distance: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ offset-distance: 0%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
|
|
|
- background-color: #26648855 !important;
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ .fire-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 360px;
|
|
|
+ padding: 0 10px;
|
|
|
+ padding-top: 40px;
|
|
|
+ .icon {
|
|
|
+ width: 405px;
|
|
|
+ height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ background: var(--image-plane) no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: bottom;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ top: -35px;
|
|
|
+ left: 180px;
|
|
|
+ // background: var(--image-inner-icon) no-repeat;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 82px;
|
|
|
+ height: 36px;
|
|
|
+ background: var(--image-icon-bottom-bg);
|
|
|
+ left: 160px;
|
|
|
+ top: -5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ height: 250px;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ .data-box {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px auto;
|
|
|
+ position: relative;
|
|
|
+ background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
|
|
|
+ .box-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #2bdcff;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: rgb(145, 230, 9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ // color: rgb(0, 242, 255);
|
|
|
+ color: #ffff35;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ // color: #ffff35;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value4 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ffbe69;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value5 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff6f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value6 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-item1 {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #2bdcff;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: rgb(145, 230, 9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ // color: rgb(0, 242, 255);
|
|
|
+ color: #ffff35;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ // color: #ffff35;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value4 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ffbe69;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value5 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff6f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value6 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-box1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px auto;
|
|
|
+ position: relative;
|
|
|
+ background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
|
|
|
+ .box-item {
|
|
|
+ width: 300px;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #2bdcff;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: rgb(145, 230, 9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ // color: rgb(0, 242, 255);
|
|
|
+ color: #ffff35;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ // color: #ffff35;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value4 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ffbe69;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value5 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff6f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value6 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fire-inner-box {
|
|
|
+ .icon {
|
|
|
+ &::after {
|
|
|
+ background: var(--image-inner-icon) no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fire-outer-box {
|
|
|
+ .icon {
|
|
|
+ &::after {
|
|
|
+ background: var(--image-outer-icon) no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .jeecg-basic-table-row__striped {
|
|
|
- // background: #97efff11 !important;
|
|
|
- td {
|
|
|
- background-color: #97efff11 !important;
|
|
|
+ .monitor-title {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .icon-toggle {
|
|
|
+ position: absolute;
|
|
|
+ left: 18px;
|
|
|
+ top: 6px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
hongrunxia