|
|
@@ -2,110 +2,146 @@
|
|
|
<customHeader>预警监测管控系统</customHeader>
|
|
|
<div class="sensor-container">
|
|
|
<div class="lr left-box">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div class="monitor-title" @click="showModal('tf')">通风监测</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>
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div class="monitor-title" @click="showModal('tf')">通风监测</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">56.99</div>
|
|
|
- </div>
|
|
|
+ <div class="param-val-box">
|
|
|
+ <div class="param-val-icon"></div>
|
|
|
+ <div class="param-val">{{ windData.jf || 0 }}</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">56.99</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 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">56.99</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 ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
|
|
|
- <BarSingle
|
|
|
- :xAxisData="xAxisData"
|
|
|
- :dataSource="echartsDataSource"
|
|
|
- height="225px"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- :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">
|
|
|
- <div class="icon-item" v-for="(item, key) in iconsMonitor" :key="key">
|
|
|
- <div class="wrapper">
|
|
|
- {{ item.text }}
|
|
|
- </div>
|
|
|
- <div></div>
|
|
|
- <img :src="item.url" :alt="item.text"/>
|
|
|
- <div class="level-text" :class="{ 'level-text-1': item.level == 1, 'level-text-2': item.level == 2, 'level-text-3': item.level == 3, 'level-text-4': item.level == 4, 'level-text-5': item.level == 5 }">{{ item.level == 1 ? '正常' : item.level == 2 ? '低风险' : item.level == 3 ? '中风险' : item.level == 4 ? '高风险' : item.level == 5 ? '报警' : '' }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
|
|
|
+ <BarSingle
|
|
|
+ :xAxisData="xAxisData"
|
|
|
+ :dataSource="windData.levels"
|
|
|
+ height="225px"
|
|
|
+ :chartsColumns="chartsColumns"
|
|
|
+ :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">
|
|
|
+ <div class="icon-item" v-for="(item, key) in iconsMonitor" :key="key">
|
|
|
+ <div class="wrapper">
|
|
|
+ {{ item.text }}
|
|
|
</div>
|
|
|
+ <div></div>
|
|
|
+ <img :src="item.url" :alt="item.text" />
|
|
|
+ <div
|
|
|
+ class="level-text"
|
|
|
+ :class="{
|
|
|
+ 'level-text-1': item.level == 0,
|
|
|
+ 'level-text-2': item.level == 101,
|
|
|
+ 'level-text-3': item.level == 102,
|
|
|
+ 'level-text-4': item.level == 103,
|
|
|
+ 'level-text-5': item.level == 104,
|
|
|
+ }"
|
|
|
+ >{{
|
|
|
+ item.level == 0
|
|
|
+ ? '正常'
|
|
|
+ : item.level == 101
|
|
|
+ ? '低风险'
|
|
|
+ : item.level == 102
|
|
|
+ ? '中风险'
|
|
|
+ : item.level == 103
|
|
|
+ ? '高风险'
|
|
|
+ : item.level == 104
|
|
|
+ ? '报警'
|
|
|
+ : ''
|
|
|
+ }}</div
|
|
|
+ >
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
</div>
|
|
|
<div class="center-box">
|
|
|
<div class="animation-box">
|
|
|
<canvas class="rain"></canvas>
|
|
|
- <div class="bottom bottom5">
|
|
|
+ <div class="bottom" :class="{ 'bottom1': centerData.levels==0,'bottom2':centerData.levels==101,'bottom3':centerData.levels==102,'bottom4':centerData.levels==103,'bottom5':centerData.levels==104 }">
|
|
|
<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;">
|
|
|
+ <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"/>
|
|
|
+ <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 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">高风险</div>
|
|
|
+ <div class="text1">{{ centerData.levels==0 ? '正常' : centerData.levels==101 ? '低风险' : centerData.levels==102 ? '中风险' : centerData.levels==103 ? '高风险' : centerData.levels==104 ? '报警' : '--' }}</div>
|
|
|
<div class="text2">风险分析</div>
|
|
|
</div>
|
|
|
<div class="icon-animation"></div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="total-item-monitor-box">
|
|
|
<div class="item item1">
|
|
|
<div class="icon-box">
|
|
|
@@ -113,7 +149,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">火灾监测</span>
|
|
|
- <span class="value value1">异常</span>
|
|
|
+ <span class="value value1">{{ centerData.fire }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item2">
|
|
|
@@ -122,7 +158,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">设备监测</span>
|
|
|
- <span class="value value">正常</span>
|
|
|
+ <span class="value value">{{ centerData.sb }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item3">
|
|
|
@@ -131,7 +167,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">瓦斯监测</span>
|
|
|
- <span class="value">正常</span>
|
|
|
+ <span class="value">{{ centerData.ws }}</span>
|
|
|
<div class="">
|
|
|
<span class="title">矿井瓦斯鉴定等级监测</span>
|
|
|
<span class="value">低瓦斯</span>
|
|
|
@@ -144,7 +180,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">粉尘监测</span>
|
|
|
- <span class="value">正常</span>
|
|
|
+ <span class="value">{{ centerData.fc }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item5">
|
|
|
@@ -153,11 +189,10 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">通风监测</span>
|
|
|
- <span class="value">正常</span>
|
|
|
+ <span class="value">{{ centerData.tf }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
<div class="fire-monitor">
|
|
|
<div class="monitor-title top" @click="showModal('fire')">火灾监测</div>
|
|
|
@@ -172,7 +207,7 @@
|
|
|
<div class="item item1">
|
|
|
<div class="icon"></div>
|
|
|
<div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
|
|
|
- <div class="value" :style="{color: item.value == '报警'? '#ff0000': ''}" >{{ item.value }} </div>
|
|
|
+ <div class="value" :style="{ color: item.value == '报警' ? '#ff0000' : '' }">{{ item.value }} </div>
|
|
|
<div class="title">{{ item.title }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -187,22 +222,22 @@
|
|
|
</template>
|
|
|
<template #container>
|
|
|
<!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
|
|
|
- <div class="dust-monitor ">
|
|
|
+ <div class="dust-monitor">
|
|
|
<div v-for="(item, index) in dustMonitor" :key="index" class="item-box">
|
|
|
<div class="title">{{ item.title }}</div>
|
|
|
- <div class="value">10个</div>
|
|
|
+ <div class="value">0个</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
|
|
|
<BarSingle
|
|
|
:xAxisData="xAxisData"
|
|
|
- :dataSource="echartsDataSource"
|
|
|
+ :dataSource="dustData.levels"
|
|
|
height="225px"
|
|
|
:chartsColumns="chartsColumns"
|
|
|
:option="option"
|
|
|
:color="colors"
|
|
|
- :fontColor='fontColor'
|
|
|
+ :fontColor="fontColor"
|
|
|
/>
|
|
|
</template>
|
|
|
</ventBox1>
|
|
|
@@ -238,66 +273,95 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
</ventBox1>
|
|
|
</div>
|
|
|
</div>
|
|
|
<DetailModal v-if="isShowDialog" v-model:visible="modalVisible" :monitor-data="dataSource" @register="register" @close="hideModal" />
|
|
|
<!-- 火灾监测弹框 -->
|
|
|
- <DetailModalFire v-else v-model:visible="modalVisible" @register="register" :moduleName="moduleName" @close="hideModal" />
|
|
|
+ <DetailModalFire v-else v-model:visible="modalVisible" @register="register" :moduleName="moduleName" @close="hideModal" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
|
|
import customHeader from '/@/views/vent/comment/components/customHeader.vue';
|
|
|
import DetailModal from './DetailModal.vue';
|
|
|
- import DetailModalFire from './DetailModalFire.vue';//火灾监测弹窗
|
|
|
- import { warningList } from './alarm.api';
|
|
|
- import { iconsMonitor, chartsColumns, xAxisData, echartsDataSource, option, colors, fontColor, dustMonitor, gasMonitor, fireMonitor, fireMonitor1 } from './alarm.data'
|
|
|
- import ventBox1 from '/@/components/vent/ventBox1.vue'
|
|
|
+ import DetailModalFire from './DetailModalFire.vue'; //火灾监测弹窗
|
|
|
+ import { warningList, getTotalList } from './alarm.api';
|
|
|
+ import {
|
|
|
+ iconsMonitor,
|
|
|
+ chartsColumns,
|
|
|
+ xAxisData,
|
|
|
+ option,
|
|
|
+ colors,
|
|
|
+ fontColor,
|
|
|
+ dustMonitor,
|
|
|
+ gasMonitor,
|
|
|
+ fireMonitor,
|
|
|
+ fireMonitor1,
|
|
|
+ } from './alarm.data';
|
|
|
+ import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
import BarSingle from '../../../../components/chart/BarSingle.vue';
|
|
|
- import { rainBg } from '/@/utils/ui.js'
|
|
|
+ import { rainBg } from '/@/utils/ui.js';
|
|
|
import { useModal } from '/@/components/Modal';
|
|
|
|
|
|
- let isShowDialog=ref(true)//切换弹窗显示
|
|
|
- let moduleName=ref<any>('')//火灾、粉尘、瓦斯模块名
|
|
|
- const alarmCounts = ref()
|
|
|
+ let isShowDialog = ref(true); //切换弹窗显示
|
|
|
+ let moduleName = ref<any>(''); //火灾、粉尘、瓦斯模块名
|
|
|
+ const alarmCounts = ref();
|
|
|
const dataSource = ref([]);
|
|
|
- const modalVisible = ref(false)
|
|
|
+ const modalVisible = ref(false);
|
|
|
|
|
|
const resetScroll = (e: Event) => {
|
|
|
- if(e.target && e.target)
|
|
|
- (e.target as Element).scrollTop = 0
|
|
|
- }
|
|
|
-
|
|
|
- const [register, { openModal }] = useModal()
|
|
|
+ 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: '',
|
|
|
+ tf: '',
|
|
|
+ ws: '',
|
|
|
+ sb: '',
|
|
|
+ fc: '',
|
|
|
+ levels:0,
|
|
|
+ });
|
|
|
+ const [register, { openModal }] = useModal();
|
|
|
|
|
|
function showModal(data) {
|
|
|
- isShowDialog.value=data=='tf' || data=='sbyj' ? true : false
|
|
|
- moduleName.value=data
|
|
|
- modalVisible.value = true
|
|
|
- openModal()
|
|
|
+ isShowDialog.value = data == 'tf' || data == 'sbyj' ? true : false;
|
|
|
+ moduleName.value = data;
|
|
|
+ modalVisible.value = true;
|
|
|
+ openModal();
|
|
|
}
|
|
|
|
|
|
function hideModal() {
|
|
|
- modalVisible.value = false
|
|
|
+ modalVisible.value = false;
|
|
|
}
|
|
|
-
|
|
|
|
|
|
// https获取监测数据
|
|
|
let timer: null | NodeJS.Timeout = null;
|
|
|
function getMonitor(flag = false) {
|
|
|
if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- timer = setTimeout(async () => {
|
|
|
- await getDataSource();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor();
|
|
|
- }, flag? 0 : 1000);
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await getDataSource();
|
|
|
+ await getList();
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
async function getDataSource() {
|
|
|
const res = await warningList({ isok: 0 });
|
|
|
@@ -309,11 +373,41 @@
|
|
|
// return data;
|
|
|
// });
|
|
|
// }
|
|
|
- };
|
|
|
-
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取预警数据
|
|
|
+ async function getList() {
|
|
|
+ const res = await getTotalList({});
|
|
|
+ console.log(res, '预警数据--------------');
|
|
|
+ let data=[]
|
|
|
+ windData.levels = res.info.sysInfo.ventS.levels;
|
|
|
+ dustData.levels = res.info.sysInfo.dustS.levels;
|
|
|
+ centerData.fire = res.info.sysInfo.fireS.status;
|
|
|
+ centerData.tf = res.info.sysInfo.ventS.status;
|
|
|
+ centerData.ws = res.info.sysInfo.gasS.status;
|
|
|
+ centerData.sb = res.info.sysInfo.synthesizeS.status;
|
|
|
+ centerData.fc = res.info.sysInfo.dustS.status;
|
|
|
+ Object.keys(res.info.sysInfo).forEach(v=>{
|
|
|
+ data.push(res.info.sysInfo[v].maxLevel)
|
|
|
+ })
|
|
|
+ data=data.sort((a,b)=>b-a)
|
|
|
+ centerData.levels=data[0]
|
|
|
+ Object.keys(iconsMonitor).forEach((el) => {
|
|
|
+ iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
|
|
|
+ });
|
|
|
+
|
|
|
+ // if(dataSource.value.length > 0){
|
|
|
+ // dataSource.value.map((data: any) => {
|
|
|
+ // const readData = data.readData;
|
|
|
+ // data = Object.assign(data, readData);
|
|
|
+ // return data;
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
getMonitor(true);
|
|
|
- rainBg('rain', 'animation-box')
|
|
|
+ rainBg('rain', 'animation-box');
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
@@ -328,7 +422,7 @@
|
|
|
@a : 370px; // 椭圆x轴半径(长半径)
|
|
|
@b : 107px; // 椭圆y轴半径(短半径)
|
|
|
@s : 40; // 坐标点的数目(数目越大，动画越精细)
|
|
|
-
|
|
|
+
|
|
|
@bg: #e6e2df;
|
|
|
|
|
|
.loop(@index) when (@index < @s + 1) {
|
|
|
@@ -478,7 +572,7 @@
|
|
|
justify-content: center;
|
|
|
padding: 3px;
|
|
|
animation: move 10s linear infinite;
|
|
|
-
|
|
|
+
|
|
|
.level-text{
|
|
|
position: absolute;
|
|
|
top: 51px;
|
|
|
@@ -810,14 +904,14 @@
|
|
|
color: #ff2313;
|
|
|
// animation: color-blink 1s infinite;
|
|
|
}
|
|
|
- // @keyframes color-blink {
|
|
|
- // 0% { color: red; }
|
|
|
- // 50% { color: blue; }
|
|
|
+ // @keyframes color-blink {
|
|
|
+ // 0% { color: red; }
|
|
|
+ // 50% { color: blue; }
|
|
|
// 100% { color: red; }
|
|
|
- // }
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.total-item-monitor-box{
|
|
|
width: 100%;
|
|
|
height: 237px;
|
|
|
@@ -826,7 +920,7 @@
|
|
|
left: 265px;
|
|
|
background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
|
|
|
background-size: contain;
|
|
|
-
|
|
|
+
|
|
|
&::after{
|
|
|
content: '';
|
|
|
width: 750px;
|
|
|
@@ -849,10 +943,10 @@
|
|
|
.icon-box{
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
-
|
|
|
+
|
|
|
position: relative;
|
|
|
z-index: 0;
|
|
|
-
|
|
|
+
|
|
|
&::before{
|
|
|
position: absolute;
|
|
|
content: '';
|
|
|
@@ -909,13 +1003,13 @@
|
|
|
font-weight: 800;
|
|
|
margin-top: 6px;
|
|
|
color: #ff0000;
|
|
|
- animation: color-blink 1s infinite;
|
|
|
+ animation: color-blink 1s infinite;
|
|
|
+ }
|
|
|
+ @keyframes color-blink {
|
|
|
+ 0% { color: red; }
|
|
|
+ 50% { color: rgb(198, 0, 0); }
|
|
|
+ 100% { color: rgb(255, 18, 18); }
|
|
|
}
|
|
|
- @keyframes color-blink {
|
|
|
- 0% { color: red; }
|
|
|
- 50% { color: rgb(198, 0, 0); }
|
|
|
- 100% { color: rgb(255, 18, 18); }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
.item1{
|
|
|
@@ -951,7 +1045,7 @@
|
|
|
.icon{
|
|
|
background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
.item5{
|
|
|
top: 25px;
|
|
|
@@ -1127,7 +1221,4 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</style>
|
