|
@@ -0,0 +1,119 @@
|
|
|
+<template>
|
|
|
+ <div class="fireZhud">
|
|
|
+ <div class="zhud-content">
|
|
|
+ <div class="content-item" v-for="(item, index) in contentList" :key="index">
|
|
|
+ <div class="card-item">
|
|
|
+ <span>设备名称 : </span>
|
|
|
+ <span>{{ item.deviceName || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>额定注氮压力(Mpa) : </span>
|
|
|
+ <span>{{ item.injectionPressure || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>额定注氮流量(m3/h) : </span>
|
|
|
+ <span>{{ item.injectionFlow || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>额定氮气浓度(%) : </span>
|
|
|
+ <span>{{ item.injectionConsistence || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>设备型号 : </span>
|
|
|
+ <span>{{ item.modelCode || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>额定电流 : </span>
|
|
|
+ <span>{{ item.current || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-item">
|
|
|
+ <span>额定电压 : </span>
|
|
|
+ <span>{{ item.voltage || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
|
+import { getRealData } from './fireZhud.api'
|
|
|
+
|
|
|
+let contentList = reactive<any[]>([])
|
|
|
+
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = null;
|
|
|
+function getMonitor() {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ //智能注氮
|
|
|
+ await getRealDataList()
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ },
|
|
|
+ 5000
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+async function getRealDataList() {
|
|
|
+ let res = await getRealData({ type: 'FireZhuD' })
|
|
|
+ console.log(res, '智能注氮数据----------')
|
|
|
+ if (res.length != 0) {
|
|
|
+ contentList.length = 0
|
|
|
+ res.forEach(el => {
|
|
|
+ contentList.push(el)
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getRealDataList()
|
|
|
+ getMonitor()
|
|
|
+})
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.fireZhud {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ // height: calc(100vh - 82px);
|
|
|
+ height: 863px;
|
|
|
+ margin: 50px 10px 15px;
|
|
|
+ background: #282828;
|
|
|
+
|
|
|
+ .zhud-content {
|
|
|
+ position: relative;
|
|
|
+ width: 1566px;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../../assets/images/fire/zhud-t.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .content-item{
|
|
|
+ &:nth-child(1){
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2){
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ right: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|