123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295 |
- <template>
- <div class="scene-box">
- <customHeader>智能通风风排瓦斯监测</customHeader>
- <div class="center-container">
- <div class="top box">
- <div class="title top-title">枣林风排瓦斯</div>
- <div class="items-top items-box">
- <div v-for="(item, n) in param" :key=n class="item" :class="`item${n + 1}`">
- <template v-if="item.code != 'gas'">
- <div class="item-title">{{ item.title }}</div>
- <div class="item-value">{{ dataSource[0] ? formatNum(dataSource[0][item.code]) : '-' }}</div>
- </template>
- <div class="gas-item" v-else-if="dataSource[0] && dataSource[0][item.code]">
- <div class="gas" v-for="(gasItem, i) in dataSource[0][item.code]" :key="i">
- <div class="title1">{{ gasItem['title'] }}</div>
- <div class="title2">瓦斯浓度(%)</div>
- <div class="item-value">{{ gasItem['value'] ? formatNum(gasItem['value']) : '-' }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="bottom box">
- <div class="title bottom-title">刘家堰风排瓦斯</div>
- <div class="items-bottom items-box">
- <div v-for="(item, n) in param" :key=n class="item" :class="`item${n + 1}`">
- <template v-if="item.code != 'gas'">
- <div class="item-title">{{ item.title }}</div>
- <div class="item-value">{{ dataSource[1] ? formatNum(dataSource[1][item.code]) : '-' }}</div>
- </template>
- <div class="gas-item" v-else-if="dataSource[0] && dataSource[0][item.code]">
- <div class="gas" v-for="(gasItem, i) in dataSource[1][item.code]" :key="i">
- <div class="title1">{{ gasItem['title'] }}</div>
- <div class="title2">瓦斯浓度(%)</div>
- <div class="item-value">{{ gasItem['value'] ? formatNum(gasItem['value']) : '-' }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, onMounted, onUnmounted } from 'vue';
- import customHeader from '/@/components/vent/customHeader.vue';
- import { param, httpParam, result1, result2 } from './compre.data'
- import { list } from './compre.api'
- import { formatNum } from '/@/utils/ventutil'
- type DataSource = {
- fl: number,
- gas: Array<any[]>,
- fpGas: number,
- }
- const dataSource = ref<DataSource[]>([])
- let timer = null as unknown as NodeJS.Timer;
- async function getDataSource(t: NodeJS.Timer) {
- setTimeout(async () => {
- // const result1 = resultFn1()
- // const result2 = resultFn2()
- try {
- for (let i = 0; i < httpParam.length; i++) {
- const item = httpParam[i]
- const result = await list({ devcode: item.devcode })
- // console.log('综合监测返回数据------>', result, result1, result2)
- let res = result[0]
- if (res) {
- switch (item.code) {
- case '1_fs1':
- result1[0]['fs'] = res['realvalue'];
- break;
- case '1_fs2':
- result1[1]['fs'] = res['realvalue'];
- break;
- case '1_gas1':
- result1[0]['gas'] = res['realvalue'];
- break;
- case '1_gas2':
- result1[1]['gas'] = res['realvalue'];
- break;
- case '2_fs1':
- result2[0]['fs'] = res['realvalue'];
- break;
- case '2_fs2':
- result2[1]['fs'] = res['realvalue'];
- break;
- case '2_gas1':
- result2[0]['gas'] = res['realvalue'];
- break;
- case '2_gas2':
- result2[1]['gas'] = res['realvalue'];
- break;
- }
- }
- }
- // 计算
- const data = [
- {
- fl: 0,
- gas: <any[]>[],
- fpGas: 0,
- },
- {
- fl: 0,
- gas: <any[]>[],
- fpGas: 0,
- }
- ]
- result1[0]['fl'] = result1[0].fs * result1[0].faceArea * 60
- result1[1]['fl'] = result1[1].fs * result1[1].faceArea * 60
- result2[0]['fl'] = result2[0].fs * result2[0].faceArea * 60
- result2[1]['fl'] = result2[1].fs * result2[1].faceArea * 60
- data[0]['fl'] = result1[0]['fl'] + result1[1]['fl']
- data[1]['fl'] = result2[0]['fl'] + result2[1]['fl']
- data[0]['fpGas'] = (result1[0]['fl'] * result1[0]['gas'] / 100) + (result1[1]['fl'] * result1[1]['gas'] / 100)
- data[1]['fpGas'] = (result2[0]['fl'] * result2[0]['gas'] / 100) + (result2[1]['fl'] * result2[1]['gas'] / 100)
- data[0]['gas'] = [
- {
- title: '二盘区一号回风联巷',
- value: result1[0]['gas']
- },
- {
- title: '二盘区二号回风联巷',
- value: result1[1]['gas']
- },
- ]
- data[1]['gas'] = [
- {
- title: '五盘区一号回风巷',
- value: result2[0]['gas']
- },
- {
- title: '五盘区二号回风巷',
- value: result2[1]['gas']
- },
- ]
- dataSource.value = data
- } catch (error) {
- // clearInterval(t)
- }
- }, 0)
- }
- onMounted(async () => {
- await getDataSource(timer)
- timer = setInterval(async () => {
- await getDataSource(timer)
- }, 1000)
- });
- onUnmounted(() => {
- clearInterval(timer)
- });
- </script>
- <style lang="less" scoped>
- .center-container {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- .top {
- background: url('/@/assets/images/vent/compre-top.png') no-repeat;
- margin-top: 60px;
- }
- .bottom {
- background: url('/@/assets/images/vent/compre-bottom.png') no-repeat;
- margin-top: 80px;
- }
- .box {
- width: 1500px;
- height: 320px;
- background-size: contain;
- position: relative;
- .title {
- width: 100%;
- position: absolute;
- color: #dddddd;
- text-align: center;
- font-size: 22px;
- font-weight: 600;
- text-shadow: 2px 2px 4px #00000088;
- }
- .top-title {
- top: 14px;
- }
- .bottom-title {
- bottom: 33px;
- }
- }
- .items-top {
- margin-top: 130px;
- }
- .items-bottom {
- margin-top: 45px;
- }
- .items-box {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-around;
- padding: 0 40px;
- .item {
- width: 375px;
- height: 132px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- padding-left: 160px;
- position: relative;
- .item-title {
- color: #e8e8e8;
- margin-bottom: 10px;
- font-weight: 600;
- }
- .item-value {
- font-size: 22px;
- font-family: 'douyuFont';
- }
- .gas-item {
- position: absolute;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- left: 0px;
- padding: 0 60px;
- top: 20px;
- .gas {
- .title1 {
- color: #00d9ff;
- margin-bottom: 10px;
- font-size: 16px;
- font-weight: 600;
- }
- .title2 {
- color: #fff;
- margin-bottom: 10px;
- font-weight: 600;
- }
- }
- }
- }
- .item1 {
- background: url('/@/assets/images/vent/compre-3.png') no-repeat;
- color: #30B6FF;
- }
- .item2 {
- width: 507px;
- height: 135px;
- background: url('/@/assets/images/vent/compre-2-1.png') no-repeat;
- color: #A9B6FF;
- }
- .item3 {
- background: url('/@/assets/images/vent/compre-1.png') no-repeat;
- color: #27FDED;
- }
- }
- }</style>
|