|
|
@@ -5,102 +5,85 @@
|
|
|
<iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
|
|
|
</div> -->
|
|
|
<div class="main-container">
|
|
|
-
|
|
|
- <transition name="fade" mode="out-in">
|
|
|
- <div class="left-area" v-if="isShow">
|
|
|
- <!-- 左上区域 -->
|
|
|
- <div class="left-t">
|
|
|
- <div class="tcontent-area">
|
|
|
- <div class="tcontent-l">
|
|
|
- <div>全矿井</div>
|
|
|
- <div>监测区域</div>
|
|
|
- </div>
|
|
|
- <div class="tcontent-c">
|
|
|
- <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
|
|
|
- <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</div>
|
|
|
- </div>
|
|
|
- <div class="tcontent-r">火灾风险</div>
|
|
|
+ <div class="left-area">
|
|
|
+ <!-- 左上区域 -->
|
|
|
+ <div class="left-t">
|
|
|
+ <div class="tcontent-area">
|
|
|
+ <div class="tcontent-l">
|
|
|
+ <div>全矿井</div>
|
|
|
+ <div>监测区域</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 左中区域 -->
|
|
|
- <div class="left-c">
|
|
|
- <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '430px' }">
|
|
|
- <workJc :heightT="'30%'" :heightB="'70%'" :echartData="echartDataWork" :cardData="cardData" />
|
|
|
- </DanelBd>
|
|
|
- </div>
|
|
|
- <!-- 左下区域 -->
|
|
|
- <div class="left-b">
|
|
|
- <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
|
|
|
- :selectValue="areaCodeMb" :selectList="selectListMb" @changeSelect="changeSelect">
|
|
|
- <emptyJc :emptyData="emptyData" />
|
|
|
- </DanelBd>
|
|
|
- </div>
|
|
|
- <!-- 左底部区域 -->
|
|
|
- <div class="left-f">
|
|
|
- <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
|
|
|
+ <div class="tcontent-c">
|
|
|
+ <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
|
|
|
+ <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</div>
|
|
|
+ </div>
|
|
|
+ <div class="tcontent-r">火灾风险</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </transition>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div :class="isShow ? 'center-area' : 'center-area1'">
|
|
|
- <div :class="isShow ? 'center-t' : 'center-t1'">
|
|
|
- <div class="center-scalc" @click="getScalc">
|
|
|
- <img src="../../../../assets/images/scalc.png" alt="">
|
|
|
- </div>
|
|
|
+ <!-- 左中区域 -->
|
|
|
+ <div class="left-c">
|
|
|
+ <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '430px' }">
|
|
|
+ <workJc :heightT="'30%'" :heightB="'70%'" :echartData="echartDataWork" :cardData="cardData" />
|
|
|
+ </DanelBd>
|
|
|
+ </div>
|
|
|
+ <!-- 左下区域 -->
|
|
|
+ <div class="left-b">
|
|
|
+ <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
|
|
|
+ :selectValue="areaCodeMb" :selectList="selectListMb" @changeSelect="changeSelect">
|
|
|
+ <emptyJc :emptyData="emptyData" />
|
|
|
+ </DanelBd>
|
|
|
+ </div>
|
|
|
+ <!-- 左底部区域 -->
|
|
|
+ <div class="left-f">
|
|
|
+ <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-area">
|
|
|
+ <div class="center-t">
|
|
|
<iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
|
|
|
</div>
|
|
|
- <transition name="fade" mode="out-in">
|
|
|
- <div class="center-b" v-if="isShow">
|
|
|
- <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect"
|
|
|
- :contentStyle="{ contentH: '289px' }" commonTitle="selected" :selectList="selectList"
|
|
|
- @changeSelect="changeSelect">
|
|
|
- <fiberBunbleJc :bunbleData="bunbleData" />
|
|
|
- </DanelBd>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
-
|
|
|
+ <div class="center-b">
|
|
|
+ <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '289px' }"
|
|
|
+ commonTitle="selected" :selectList="selectList" @changeSelect="changeSelect">
|
|
|
+ <fiberBunbleJc :bunbleData="bunbleData" />
|
|
|
+ </DanelBd>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <transition name="fade" mode="out-in">
|
|
|
- <div class="right-area" v-if="isShow">
|
|
|
- <!-- 右上区域 -->
|
|
|
- <div class="right-t">
|
|
|
- <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
|
|
|
- <systemJc />
|
|
|
- </DanelBd>
|
|
|
- </div>
|
|
|
- <!-- 右中区域 -->
|
|
|
- <div class="right-c">
|
|
|
- <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
|
|
|
- :selectList="selectListDs" :selectValue="dsCode" @changeSelect="changeSelect">
|
|
|
- <outFireJc :outFireData="outFireData" />
|
|
|
- </DanelBd>
|
|
|
- </div>
|
|
|
- <!-- 右下区域 -->
|
|
|
- <div class="right-b">
|
|
|
- <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
|
|
|
- :selectList="selectListBd" :selectValue="pointCodeBd" @changeSelect="changeSelect">
|
|
|
- <substationJc :echartDatas="echartDatas" />
|
|
|
- </DanelBd>
|
|
|
- </div>
|
|
|
- <!-- 右底部区域 -->
|
|
|
- <div class="right-f">
|
|
|
- <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '215px' }" commonTitle="selected"
|
|
|
- :selectList="selectListAq" :selectValue="pointCodeAq" @changeSelect="changeSelect">
|
|
|
- <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
|
|
|
- </DanelBd>
|
|
|
- </div>
|
|
|
+ <div class="right-area">
|
|
|
+ <!-- 右上区域 -->
|
|
|
+ <div class="right-t">
|
|
|
+ <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
|
|
|
+ <systemJc />
|
|
|
+ </DanelBd>
|
|
|
</div>
|
|
|
- </transition>
|
|
|
-
|
|
|
+ <!-- 右中区域 -->
|
|
|
+ <div class="right-c">
|
|
|
+ <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
|
|
|
+ :selectList="selectListDs" :selectValue="dsCode" @changeSelect="changeSelect">
|
|
|
+ <outFireJc :outFireData="outFireData" />
|
|
|
+ </DanelBd>
|
|
|
+ </div>
|
|
|
+ <!-- 右下区域 -->
|
|
|
+ <div class="right-b">
|
|
|
+ <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
|
|
|
+ :selectList="selectListBd" :selectValue="pointCodeBd" @changeSelect="changeSelect">
|
|
|
+ <substationJc :echartDatas="echartDatas" />
|
|
|
+ </DanelBd>
|
|
|
+ </div>
|
|
|
+ <!-- 右底部区域 -->
|
|
|
+ <div class="right-f">
|
|
|
+ <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '215px' }" commonTitle="selected"
|
|
|
+ :selectList="selectListAq" :selectValue="pointCodeAq" @changeSelect="changeSelect">
|
|
|
+ <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
|
|
|
+ </DanelBd>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
|
-import Vodal from 'vodal'
|
|
|
+import { ref, reactive, onMounted,onUnmounted } from 'vue'
|
|
|
import DanelBd from '../../common/danelBd.vue';
|
|
|
import workJc from './components/workJc.vue';
|
|
|
import emptyJc from './components/emptyJc.vue';
|
|
|
@@ -117,9 +100,6 @@ let moduleSelect = reactive([
|
|
|
|
|
|
])
|
|
|
|
|
|
-
|
|
|
-//是否显示左侧区域和右侧区域
|
|
|
-let isShow = ref(true)
|
|
|
let areaCode = ref('')
|
|
|
let pointCode = ref('')
|
|
|
let areaCodeMb = ref('')
|
|
|
@@ -160,12 +140,6 @@ let selectListAq = reactive<any[]>([
|
|
|
let safetyHead = reactive<any[]>([])
|
|
|
let safetyList = reactive<any[]>([])
|
|
|
|
|
|
-//隐藏和显示左右侧区域
|
|
|
-function getScalc() {
|
|
|
- isShow.value = !isShow.value
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
// https获取监测数据
|
|
|
let timer: null | NodeJS.Timeout = null;
|
|
|
function getMonitor() {
|
|
|
@@ -253,8 +227,8 @@ async function getFireAreaInfoListMb() {
|
|
|
dataMb.forEach(m => {
|
|
|
selectListMb.push({ label: m.areaName, value: m.areaCode })
|
|
|
})
|
|
|
-
|
|
|
- areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value']
|
|
|
+
|
|
|
+ areaCodeMb.value =areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value']
|
|
|
//获取密闭监测实时信息
|
|
|
getMbRealDataList()
|
|
|
}
|
|
|
@@ -266,7 +240,7 @@ async function getMbRealDataList() {
|
|
|
console.log(res, '密闭监测实时信息')
|
|
|
emptyData.length = 0
|
|
|
res.forEach(el => {
|
|
|
- emptyData.push({ label: el.name, val: el.currentValue, unit: el.unit },)
|
|
|
+ emptyData.push({ label: el.name, val: el.currentValue,unit:el.unit },)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -301,7 +275,7 @@ async function getSgjcRealDataByPointCodeList() {
|
|
|
val1: el.position,
|
|
|
label2: '时间',
|
|
|
val2: el.time,
|
|
|
- unit: el.unit
|
|
|
+ unit:el.unit
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
@@ -320,16 +294,16 @@ async function getFireAreaInfoListDs() {
|
|
|
selectListDs.push({ label: el.areaName, value: el.areaName })
|
|
|
})
|
|
|
|
|
|
- dsCode.value = dsCode.value ? dsCode.value : selectListDs[0].value
|
|
|
+ dsCode.value=dsCode.value ? dsCode.value : selectListDs[0].value
|
|
|
let dataName = dataDs.filter(v => v.areaName == dsCode.value)[0]
|
|
|
outFireData.push(
|
|
|
- { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
|
|
|
- { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
|
|
|
- { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
|
|
|
- { title: '火焰预警', val: '--', dw: '', label: '状态' },
|
|
|
- { title: '喷粉阀门', val: '--', dw: '', label: '开关量' },
|
|
|
- )
|
|
|
-
|
|
|
+ { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
|
|
|
+ { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
|
|
|
+ { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
|
|
|
+ { title: '火焰预警', val: '--', dw: '', label: '状态' },
|
|
|
+ { title: '喷粉阀门', val: '--', dw: '', label: '开关量' },
|
|
|
+ )
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -357,7 +331,7 @@ async function getInfosByAreaCodeList() {
|
|
|
value: el.pointCode
|
|
|
})
|
|
|
})
|
|
|
- pointCodeBd.value = pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value
|
|
|
+ pointCodeBd.value =pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value
|
|
|
//获取光钎测温图表数据
|
|
|
getGxcwHistoryDataByPointCodeList()
|
|
|
}
|
|
|
@@ -624,82 +598,10 @@ onUnmounted(() => {
|
|
|
width: calc(100% - 814px);
|
|
|
|
|
|
.center-t {
|
|
|
- position: relative;
|
|
|
width: 100%;
|
|
|
height: 60%;
|
|
|
margin-bottom: 15px;
|
|
|
overflow: hidden;
|
|
|
-
|
|
|
- .center-scalc {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- background-color: rgb(30 58 117 / 41.8%);
|
|
|
-
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- width: 37px;
|
|
|
- height: 41px;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- width: 43px;
|
|
|
- height: 47px;
|
|
|
- background-color: rgb(100 228 185 / 6.27%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .center-b {
|
|
|
- width: 100%;
|
|
|
- height: calc(40% - 15px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .center-area1 {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .center-t1 {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin-bottom: 15px;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .center-scalc {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- background-color: rgb(30 58 117 / 41.8%);
|
|
|
-
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- width: 37px;
|
|
|
- height: 41px;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- width: 43px;
|
|
|
- height: 47px;
|
|
|
- background-color: rgb(100 228 185 / 6.27%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.center-b {
|
|
|
@@ -735,25 +637,5 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- /* fade.css */
|
|
|
- .fade-enter-active {
|
|
|
- transition:opacity 2.5s linear;
|
|
|
-
|
|
|
- /* 设置过渡时间为1秒 */
|
|
|
- }
|
|
|
-
|
|
|
- .fade-leave-active {
|
|
|
- transition: opacity 0.5s linear;
|
|
|
-
|
|
|
- /* 设置过渡时间为1秒 */
|
|
|
- }
|
|
|
-
|
|
|
- .fade-enter,
|
|
|
- .fade-leave-to {
|
|
|
- opacity: 0;
|
|
|
-
|
|
|
- /* 初始状态为不可见 */
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
