|
|
@@ -6,21 +6,25 @@
|
|
|
<img v-else src="@/assets/images/vent/report-toggle.png" alt="" />
|
|
|
</div>
|
|
|
<div class="ventilate-top">
|
|
|
- <a-button v-if="!hasPermission('ventilateWarn:return')" preIcon="ant-design:rollback-outlined" type="text"
|
|
|
- size="small" style="position: absolute; left: 15px; top: 15px; color: var(--vent-font-color)" @click="getBack">
|
|
|
+ <a-button
|
|
|
+ v-if="!hasPermission('ventilateWarn:return')"
|
|
|
+ preIcon="ant-design:rollback-outlined"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="position: absolute; left: 15px; top: 15px; color: var(--vent-font-color)"
|
|
|
+ @click="getBack"
|
|
|
+ >
|
|
|
返回
|
|
|
</a-button>
|
|
|
<div class="alarm-menu">
|
|
|
<div class="type-btn">
|
|
|
- <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListTf" :key="index"
|
|
|
- @click="btnClick(index)">
|
|
|
+ <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListTf" :key="index" @click="btnClick(index)">
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-btn">
|
|
|
<div style="width: 100%; height: 100%" v-if="menuList.length">
|
|
|
- <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
|
|
|
- @click="cardClick(ind, item)">
|
|
|
+ <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
|
|
|
<div class="text">{{ item.name }}</div>
|
|
|
<div class="warn">{{ item.warn }}</div>
|
|
|
</div>
|
|
|
@@ -33,8 +37,14 @@
|
|
|
</div>
|
|
|
<div class="ventilate-content">
|
|
|
<a-spin :spinning="loading">
|
|
|
- <TopArea :activeIndex="activeIndex" :statusData="ventilateTopList" :echartData="echartDataFc1"
|
|
|
- :ventTunDataSource="ventTunDataSource" :maxY="maxY" :minY="minY"></TopArea>
|
|
|
+ <TopArea
|
|
|
+ :activeIndex="activeIndex"
|
|
|
+ :statusData="ventilateTopList"
|
|
|
+ :echartData="echartDataFc1"
|
|
|
+ :ventTunDataSource="ventTunDataSource"
|
|
|
+ :maxY="maxY"
|
|
|
+ :minY="minY"
|
|
|
+ />
|
|
|
</a-spin>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,522 +57,521 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
|
|
|
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
-import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
-import { useGlobSetting } from '/@/hooks/setting';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
|
|
|
-import { ventilateTopList, typeMenuListTf, getMaxY, getMinY } from '../common.data';
|
|
|
-import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
-import MeasurePoint from '../common/measurePoint.vue';
|
|
|
-import { realTimeNetCal, modalParam } from '../alarm.api';
|
|
|
-import TopArea from '../common/top-area.vue';
|
|
|
-
|
|
|
-//巷道阻力分析数据
|
|
|
-let hdData = reactive({
|
|
|
- maxLevel: '',
|
|
|
- address: '',
|
|
|
-});
|
|
|
-//通风选项激活索引
|
|
|
-let activeIndex = ref(0);
|
|
|
-let monitor = ref(true);
|
|
|
-let toggleData = reactive<any>({});
|
|
|
-const { hasPermission } = usePermission();
|
|
|
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
|
|
|
-let router = useRouter();
|
|
|
-//左侧数据列表
|
|
|
-let menuList = reactive<any[]>([]);
|
|
|
-const ventTunDataSource = ref([]);
|
|
|
-//当前左侧激活菜单的索引
|
|
|
-let activeIndex1 = ref(0);
|
|
|
-let maxY = ref<any>(0);
|
|
|
-let minY = ref<any>(0)
|
|
|
-const loading = ref(false);
|
|
|
-
|
|
|
-//通风图表数据
|
|
|
-const echartDataFc1 = reactive<any>({
|
|
|
- maxData: {
|
|
|
- lengedData: '进风量',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- minData: {
|
|
|
- lengedData: '回风量',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- aveValue: {
|
|
|
- lengedData: '需风量',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- xData: [],
|
|
|
-});
|
|
|
-let cardListTf = ref<any[]>([]);
|
|
|
-const chartListTf = ref<any[]>([]);
|
|
|
-let showToggle = ref('report');
|
|
|
-
|
|
|
-// https获取监测数据
|
|
|
-let timer: null | NodeJS.Timeout = null;
|
|
|
-function getMonitor(flag?) {
|
|
|
- timer = setTimeout(
|
|
|
- async () => {
|
|
|
- //获取左侧菜单数据
|
|
|
- await getMenuList();
|
|
|
- await getWindDeviceList();
|
|
|
- getMonitor(false);
|
|
|
+ import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
|
|
|
+ import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
+ import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+ import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+ import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
|
|
|
+ import { ventilateTopList, typeMenuListTf, getMaxY, getMinY } from '../common.data';
|
|
|
+ import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import MeasurePoint from '../common/measurePoint.vue';
|
|
|
+ import { realTimeNetCal, modalParam } from '../alarm.api';
|
|
|
+ import TopArea from '../common/top-area.vue';
|
|
|
+
|
|
|
+ //巷道阻力分析数据
|
|
|
+ let hdData = reactive({
|
|
|
+ maxLevel: '',
|
|
|
+ address: '',
|
|
|
+ });
|
|
|
+ //通风选项激活索引
|
|
|
+ let activeIndex = ref(0);
|
|
|
+ let monitor = ref(true);
|
|
|
+ let toggleData = reactive<any>({});
|
|
|
+ const { hasPermission } = usePermission();
|
|
|
+ const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
|
|
|
+ let router = useRouter();
|
|
|
+ //左侧数据列表
|
|
|
+ let menuList = reactive<any[]>([]);
|
|
|
+ const ventTunDataSource = ref([]);
|
|
|
+ //当前左侧激活菜单的索引
|
|
|
+ let activeIndex1 = ref(0);
|
|
|
+ let maxY = ref<any>(0);
|
|
|
+ let minY = ref<any>(0);
|
|
|
+ const loading = ref(false);
|
|
|
+
|
|
|
+ //通风图表数据
|
|
|
+ const echartDataFc1 = reactive<any>({
|
|
|
+ maxData: {
|
|
|
+ lengedData: '进风量',
|
|
|
+ data: [],
|
|
|
},
|
|
|
- flag ? 0 : 1500
|
|
|
- );
|
|
|
-}
|
|
|
-//获取巷道阻力分析数据
|
|
|
-let timer1: null | NodeJS.Timeout = null;
|
|
|
-function getMonitor1(flag?) {
|
|
|
- timer1 = setTimeout(
|
|
|
- async () => {
|
|
|
- await getRealTimeNetData();
|
|
|
- getMonitor1(false);
|
|
|
+ minData: {
|
|
|
+ lengedData: '回风量',
|
|
|
+ data: [],
|
|
|
},
|
|
|
- flag ? 0 : 30000
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-//返回首页
|
|
|
-function getBack() {
|
|
|
- router.push('/monitorChannel/monitor-alarm-home');
|
|
|
-}
|
|
|
-//点击切换实时\报表数据
|
|
|
-let handlerToggle = () => {
|
|
|
- monitor.value = !monitor.value;
|
|
|
- echartDataFc1.maxData.data.length = 0;
|
|
|
- echartDataFc1.minData.data.length = 0;
|
|
|
- echartDataFc1.aveValue.data.length = 0;
|
|
|
- echartDataFc1.xData.length = 0;
|
|
|
- getData()
|
|
|
-};
|
|
|
-//实时报表数据
|
|
|
-function getData(){
|
|
|
- ventilateTopList[0].value = monitor.value ? toggleData.faceIntM3 : toggleData.jin;
|
|
|
- ventilateTopList[1].value = monitor.value ? toggleData.faceRetM3 : toggleData.hui;
|
|
|
- if (monitor.value) {
|
|
|
- toggleData.history_report.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
- } else {
|
|
|
- toggleData.history.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
- if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
- echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
- } else {
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- }
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
+ aveValue: {
|
|
|
+ lengedData: '需风量',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ xData: [],
|
|
|
+ });
|
|
|
+ let cardListTf = ref<any[]>([]);
|
|
|
+ const chartListTf = ref<any[]>([]);
|
|
|
+ let showToggle = ref('report');
|
|
|
+
|
|
|
+ // https获取监测数据
|
|
|
+ let timer: null | NodeJS.Timeout = null;
|
|
|
+ function getMonitor(flag?) {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ //获取左侧菜单数据
|
|
|
+ await getMenuList();
|
|
|
+ await getWindDeviceList();
|
|
|
+ getMonitor(false);
|
|
|
+ },
|
|
|
+ flag ? 0 : 1500
|
|
|
+ );
|
|
|
}
|
|
|
-}
|
|
|
-//获取左侧数据列表
|
|
|
-async function getMenuList() {
|
|
|
- let res = await sysTypeWarnList({ type: 'vent' });
|
|
|
- if (res.length != 0) {
|
|
|
- menuList.length = 0;
|
|
|
- res.forEach((el) => {
|
|
|
- menuList.push({
|
|
|
- name: el.deviceName,
|
|
|
- warn: el.warnDes.indexOf('预警') != -1 ? '风量不足' : el.warnDes,
|
|
|
- deviceID: el.deviceID,
|
|
|
- strtype: el.deviceType,
|
|
|
- detail: el.detail
|
|
|
- });
|
|
|
- });
|
|
|
- //获取右侧详情数据
|
|
|
- getDetailList(menuList[activeIndex1.value].detail)
|
|
|
+ //获取巷道阻力分析数据
|
|
|
+ let timer1: null | NodeJS.Timeout = null;
|
|
|
+ function getMonitor1(flag?) {
|
|
|
+ timer1 = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await getRealTimeNetData();
|
|
|
+ getMonitor1(false);
|
|
|
+ },
|
|
|
+ flag ? 0 : 30000
|
|
|
+ );
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-//获取右侧详情数据
|
|
|
-function getDetailList(param) {
|
|
|
- echartDataFc1.maxData.data.length = 0;
|
|
|
- echartDataFc1.minData.data.length = 0;
|
|
|
- echartDataFc1.aveValue.data.length = 0;
|
|
|
- echartDataFc1.xData.length = 0;
|
|
|
- if (JSON.stringify(param) != '{}') {
|
|
|
- toggleData = Object.assign({}, param);
|
|
|
- ventilateTopList[2].value = param.xufengliang || '--';
|
|
|
- ventilateTopList[3].text = param.warnFlag ? param.warnDes : '正常';
|
|
|
- if (showToggle.value == 'monitor') {
|
|
|
- ventilateTopList[0].value = param.jin;
|
|
|
- ventilateTopList[1].value = param.hui;
|
|
|
- if (param.history.length != 0) {
|
|
|
- param.history.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
- if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
- echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
- } else {
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- }
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
- }
|
|
|
- } else if (showToggle.value == 'report') {
|
|
|
- ventilateTopList[0].value = param.faceIntM3;
|
|
|
- ventilateTopList[1].value = param.faceRetM3;
|
|
|
- param.history_report.forEach((v) => {
|
|
|
+
|
|
|
+ //返回首页
|
|
|
+ function getBack() {
|
|
|
+ router.push('/monitorChannel/monitor-alarm-home');
|
|
|
+ }
|
|
|
+ //点击切换实时\报表数据
|
|
|
+ let handlerToggle = () => {
|
|
|
+ monitor.value = !monitor.value;
|
|
|
+ echartDataFc1.maxData.data.length = 0;
|
|
|
+ echartDataFc1.minData.data.length = 0;
|
|
|
+ echartDataFc1.aveValue.data.length = 0;
|
|
|
+ echartDataFc1.xData.length = 0;
|
|
|
+ getData();
|
|
|
+ };
|
|
|
+ //实时报表数据
|
|
|
+ function getData() {
|
|
|
+ ventilateTopList[0].value = monitor.value ? toggleData.faceIntM3 : toggleData.jin;
|
|
|
+ ventilateTopList[1].value = monitor.value ? toggleData.faceRetM3 : toggleData.hui;
|
|
|
+ if (monitor.value) {
|
|
|
+ toggleData.history_report.forEach((v) => {
|
|
|
echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
echartDataFc1.aveValue.data.push(0);
|
|
|
echartDataFc1.xData.push(v.time);
|
|
|
});
|
|
|
} else {
|
|
|
- getData()
|
|
|
+ toggleData.history.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
+ if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
+ echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
+ } else {
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
+ }
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
}
|
|
|
-
|
|
|
- let echartD = [echartDataFc1.maxData.data, echartDataFc1.minData.data]
|
|
|
- maxY.value = getMaxY(echartD)
|
|
|
- minY.value = getMinY(echartD)
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-//通风选项切换
|
|
|
-function btnClick(ind) {
|
|
|
- activeIndex.value = ind;
|
|
|
- switch (ind) {
|
|
|
- case 0:
|
|
|
- if (timer1) clearTimeout(timer1);
|
|
|
- activeIndex1.value = 0;
|
|
|
- getMenuList();
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- if (timer) clearTimeout(timer);
|
|
|
- activeIndex1.value = 0;
|
|
|
+ //获取左侧数据列表
|
|
|
+ async function getMenuList() {
|
|
|
+ let res = await sysTypeWarnList({ type: 'vent' });
|
|
|
+ if (res.length != 0) {
|
|
|
menuList.length = 0;
|
|
|
- getRealTimeNetData();
|
|
|
- getMonitor1();
|
|
|
- break;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//菜单选项切换
|
|
|
-function cardClick(ind, item) {
|
|
|
- clearTimeout(timer);
|
|
|
- if (!activeIndex.value && !loading.value) {
|
|
|
- activeIndex1.value = ind;
|
|
|
- loading.value = true;
|
|
|
- setTimeout(() => {
|
|
|
- getMonitor();
|
|
|
- loading.value = false;
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//获取通风监控测点信息
|
|
|
-async function getWindDeviceList() {
|
|
|
- const cardTfList: any[] = [];
|
|
|
- const chartTfList: any[] = [];
|
|
|
- let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
|
|
|
- if (res && res.msgTxt[0]) {
|
|
|
- let list = res.msgTxt[0].datalist || [];
|
|
|
- if (list.length > 0) {
|
|
|
- list.forEach((el: any) => {
|
|
|
- const readData = el.readData;
|
|
|
- el = Object.assign(el, readData);
|
|
|
- cardTfList.push({
|
|
|
- label: '通信状态',
|
|
|
- value: el.netStatus == '0' ? '断开' : '连接',
|
|
|
- listR: [
|
|
|
- { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
|
|
|
- { id: 1, label: '风量', dw: 'm³/min', value: el.m3 || '--' },
|
|
|
- { id: 2, label: '风速', dw: 'm/s', value: el.va || '--' },
|
|
|
- { id: 4, label: '时间', dw: '', value: el.readTime },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- label: '是否报警',
|
|
|
- dw: '',
|
|
|
- value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
- // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
|
|
|
- const avgParam = el.avgParam || {
|
|
|
- avg_vent_value: 0,
|
|
|
- max_vent_value: 0,
|
|
|
- min_vent_value: 0,
|
|
|
- };
|
|
|
- chartTfList.push({
|
|
|
- label: el.strinstallpos,
|
|
|
- time: new Date(),
|
|
|
- data: [avgParam.avg_m3_value, avgParam.max_m3_value, avgParam.min_m3_value, el.readData.m3],
|
|
|
+ res.forEach((el) => {
|
|
|
+ menuList.push({
|
|
|
+ name: el.deviceName,
|
|
|
+ warn: el.warnDes.indexOf('预警') != -1 ? '风量不足' : el.warnDes,
|
|
|
+ deviceID: el.deviceID,
|
|
|
+ strtype: el.deviceType,
|
|
|
+ detail: el.detail,
|
|
|
});
|
|
|
});
|
|
|
+ //获取右侧详情数据
|
|
|
+ getDetailList(menuList[activeIndex1.value].detail);
|
|
|
}
|
|
|
- cardListTf.value = cardTfList;
|
|
|
- chartListTf.value = chartTfList;
|
|
|
}
|
|
|
-}
|
|
|
-async function getRealTimeNetData() {
|
|
|
- const modalData = await modalParam({});
|
|
|
- if (modalData && modalData.param && modalData.param.records.length && modalData.param.records.length > 0) {
|
|
|
- const res = await realTimeNetCal({ modelID: modalData.param.records[0]['defaultmodelid'] });
|
|
|
- if (res && res['result']) ventTunDataSource.value = res['result']['tuns'];
|
|
|
- let data = [];
|
|
|
- ventTunDataSource.value.forEach((el) => {
|
|
|
- if (el['dHTotal'] && el['oldHTotal']) {
|
|
|
- el['leveld'] = ((el['dHTotal'] - el['oldHTotal']) / el['oldHTotal']) * 100;
|
|
|
- data.push(el['leveld']);
|
|
|
+
|
|
|
+ //获取右侧详情数据
|
|
|
+ function getDetailList(param) {
|
|
|
+ echartDataFc1.maxData.data.length = 0;
|
|
|
+ echartDataFc1.minData.data.length = 0;
|
|
|
+ echartDataFc1.aveValue.data.length = 0;
|
|
|
+ echartDataFc1.xData.length = 0;
|
|
|
+ if (JSON.stringify(param) != '{}') {
|
|
|
+ toggleData = Object.assign({}, param);
|
|
|
+ ventilateTopList[2].value = param.xufengliang || '--';
|
|
|
+ ventilateTopList[3].text = param.warnFlag ? param.warnDes : '正常';
|
|
|
+ if (showToggle.value == 'monitor') {
|
|
|
+ ventilateTopList[0].value = param.jin;
|
|
|
+ ventilateTopList[1].value = param.hui;
|
|
|
+ if (param.history.length != 0) {
|
|
|
+ param.history.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
+ if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
+ echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
+ } else {
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
+ }
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (showToggle.value == 'report') {
|
|
|
+ ventilateTopList[0].value = param.faceIntM3;
|
|
|
+ ventilateTopList[1].value = param.faceRetM3;
|
|
|
+ param.history_report.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
} else {
|
|
|
- data = [];
|
|
|
+ getData();
|
|
|
}
|
|
|
- });
|
|
|
- hdData.maxLevel = '正常';
|
|
|
+
|
|
|
+ let echartD = [echartDataFc1.maxData.data, echartDataFc1.minData.data];
|
|
|
+ maxY.value = getMaxY(echartD);
|
|
|
+ minY.value = getMinY(echartD);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //通风选项切换
|
|
|
+ function btnClick(ind) {
|
|
|
+ activeIndex.value = ind;
|
|
|
+ switch (ind) {
|
|
|
+ case 0:
|
|
|
+ if (timer1) clearTimeout(timer1);
|
|
|
+ activeIndex1.value = 0;
|
|
|
+ getMenuList();
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ if (timer) clearTimeout(timer);
|
|
|
+ activeIndex1.value = 0;
|
|
|
+ menuList.length = 0;
|
|
|
+ getRealTimeNetData();
|
|
|
+ getMonitor1();
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- const { sysOrgCode, sysDataType } = useGlobSetting();
|
|
|
- showToggle.value = sysDataType || 'report';
|
|
|
- await getMenuList();
|
|
|
- await getMonitor();
|
|
|
-});
|
|
|
-onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
+
|
|
|
+ //菜单选项切换
|
|
|
+ function cardClick(ind, item) {
|
|
|
clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
+ if (!activeIndex.value && !loading.value) {
|
|
|
+ activeIndex1.value = ind;
|
|
|
+ loading.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ getMonitor();
|
|
|
+ loading.value = false;
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
}
|
|
|
- if (timer1) {
|
|
|
- clearTimeout(timer1);
|
|
|
- timer1 = undefined;
|
|
|
+
|
|
|
+ //获取通风监控测点信息
|
|
|
+ async function getWindDeviceList() {
|
|
|
+ const cardTfList: any[] = [];
|
|
|
+ const chartTfList: any[] = [];
|
|
|
+ let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
|
|
|
+ if (res && res.msgTxt[0]) {
|
|
|
+ let list = res.msgTxt[0].datalist || [];
|
|
|
+ if (list.length > 0) {
|
|
|
+ list.forEach((el: any) => {
|
|
|
+ const readData = el.readData;
|
|
|
+ el = Object.assign(el, readData);
|
|
|
+ cardTfList.push({
|
|
|
+ label: '通信状态',
|
|
|
+ value: el.netStatus == '0' ? '断开' : '连接',
|
|
|
+ listR: [
|
|
|
+ { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
|
|
|
+ { id: 1, label: '风量', dw: 'm³/min', value: el.m3 || '--' },
|
|
|
+ { id: 2, label: '风速', dw: 'm/s', value: el.va || '--' },
|
|
|
+ { id: 4, label: '时间', dw: '', value: el.readTime },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: '是否报警',
|
|
|
+ dw: '',
|
|
|
+ value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
|
|
|
+ const avgParam = el.avgParam || {
|
|
|
+ avg_vent_value: 0,
|
|
|
+ max_vent_value: 0,
|
|
|
+ min_vent_value: 0,
|
|
|
+ };
|
|
|
+ chartTfList.push({
|
|
|
+ label: el.strinstallpos,
|
|
|
+ time: new Date(),
|
|
|
+ data: [avgParam.avg_m3_value, avgParam.max_m3_value, avgParam.min_m3_value, el.readData.m3],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ cardListTf.value = cardTfList;
|
|
|
+ chartListTf.value = chartTfList;
|
|
|
+ }
|
|
|
}
|
|
|
-});
|
|
|
+ async function getRealTimeNetData() {
|
|
|
+ const modalData = await modalParam({});
|
|
|
+ if (modalData && modalData.param && modalData.param.records.length && modalData.param.records.length > 0) {
|
|
|
+ const res = await realTimeNetCal({ modelID: modalData.param.records[0]['defaultmodelid'] });
|
|
|
+ if (res && res['result']) ventTunDataSource.value = res['result']['tuns'];
|
|
|
+ let data = [];
|
|
|
+ ventTunDataSource.value.forEach((el) => {
|
|
|
+ if (el['dHTotal'] && el['oldHTotal']) {
|
|
|
+ el['leveld'] = ((el['dHTotal'] - el['oldHTotal']) / el['oldHTotal']) * 100;
|
|
|
+ data.push(el['leveld']);
|
|
|
+ } else {
|
|
|
+ data = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ hdData.maxLevel = '正常';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ const { sysOrgCode, sysDataType } = useGlobSetting();
|
|
|
+ showToggle.value = sysDataType || 'report';
|
|
|
+ await getMenuList();
|
|
|
+ await getMonitor();
|
|
|
+ });
|
|
|
+ onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ }
|
|
|
+ if (timer1) {
|
|
|
+ clearTimeout(timer1);
|
|
|
+ timer1 = undefined;
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import '/@/design/theme.less';
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+
|
|
|
+ @{theme-deepblue} {
|
|
|
+ .ventilateWarn {
|
|
|
+ --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
|
|
|
+ --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
|
|
|
+ --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
|
|
|
+ --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
+ --image-jinfengliang: url('/@/assets/images/themify/deepblue/fire/jinfengliang.png');
|
|
|
+ --image-huifengliang: url('/@/assets/images/themify/deepblue/fire/huifengliang.png');
|
|
|
+ --image-xufengliang: url('/@/assets/images/themify/deepblue/fire/xufengliang.png');
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-@{theme-deepblue} {
|
|
|
.ventilateWarn {
|
|
|
- --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
|
|
|
- --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
|
|
|
- --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
|
|
|
- --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
- --image-jinfengliang: url('/@/assets/images/themify/deepblue/fire/jinfengliang.png');
|
|
|
- --image-huifengliang: url('/@/assets/images/themify/deepblue/fire/huifengliang.png');
|
|
|
- --image-xufengliang: url('/@/assets/images/themify/deepblue/fire/xufengliang.png');
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ventilateWarn {
|
|
|
- --image-border: url('/@/assets/images/fire/border.png');
|
|
|
- --image-no-choice: url('/@/assets/images/fire/no-choice.png');
|
|
|
- --image-choice: url('/@/assets/images/fire/choice.png');
|
|
|
- --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
- --image-jinfengliang: url('/@/assets/images/fire/jinfengliang.png');
|
|
|
- --image-huifengliang: url('/@/assets/images/fire/huifengliang.png');
|
|
|
- --image-xufengliang: url('/@/assets/images/fire/xufengliang.png');
|
|
|
- --border-image-1: linear-gradient(to bottom, #2d74a0, #2d74a0, #2d74a0);
|
|
|
- --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
- position: reactive;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 80px 10px 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .ventilate-top {
|
|
|
+ --image-border: url('/@/assets/images/fire/border.png');
|
|
|
+ --image-no-choice: url('/@/assets/images/fire/no-choice.png');
|
|
|
+ --image-choice: url('/@/assets/images/fire/choice.png');
|
|
|
+ --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
+ --image-jinfengliang: url('/@/assets/images/fire/jinfengliang.png');
|
|
|
+ --image-huifengliang: url('/@/assets/images/fire/huifengliang.png');
|
|
|
+ --image-xufengliang: url('/@/assets/images/fire/xufengliang.png');
|
|
|
+ --border-image-1: linear-gradient(to bottom, #2d74a0, #2d74a0, #2d74a0);
|
|
|
+ --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
+ position: reactive;
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 50%;
|
|
|
- margin-bottom: 15px;
|
|
|
- background: var(--image-border) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding-right: 15px;
|
|
|
-
|
|
|
- .alarm-menu {
|
|
|
- height: 100%;
|
|
|
- width: 332px;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .type-btn {
|
|
|
- width: 100%;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- background-color: var(--vent-warn-tab-bg);
|
|
|
- border: 2px solid var(--vent-warn-tab-border);
|
|
|
- margin-bottom: 20px;
|
|
|
- border-radius: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 50%;
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- color: var(--vent-font-color);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .btn1 {
|
|
|
- width: 50%;
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 14px;
|
|
|
- color: var(--vent-font-color);
|
|
|
- text-align: center;
|
|
|
- border-radius: 2px;
|
|
|
- background: var(--vent-warn-tab-bg-actived);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
+ padding: 80px 10px 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .card-btn {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 50px);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .btn {
|
|
|
- position: relative;
|
|
|
- width: 81%;
|
|
|
- height: 24%;
|
|
|
- margin-bottom: 6%;
|
|
|
- font-family: 'douyuFont';
|
|
|
- background: var(--image-no-choice) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .text {
|
|
|
- width: 80%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 28px;
|
|
|
- font-size: 14px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- text-align: center;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
+ .ventilate-top {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 50%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: var(--image-border) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding-right: 15px;
|
|
|
|
|
|
- .warn {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 8px;
|
|
|
- font-size: 12px;
|
|
|
- color: var(--vent-font-color);
|
|
|
- text-align: center;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
- }
|
|
|
+ .alarm-menu {
|
|
|
+ height: 100%;
|
|
|
+ width: 332px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .btn1 {
|
|
|
- position: relative;
|
|
|
+ .type-btn {
|
|
|
width: 100%;
|
|
|
- height: 24%;
|
|
|
- margin-bottom: 6%;
|
|
|
- font-family: 'douyuFont';
|
|
|
- background: var(--image-choice) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .text {
|
|
|
- width: 80%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 28px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ background-color: var(--vent-warn-tab-bg);
|
|
|
+ border: 2px solid var(--vent-warn-tab-border);
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 50%;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
font-size: 14px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
text-align: center;
|
|
|
- transform: translate(-62%, 0);
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
- .warn {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 8px;
|
|
|
+ .btn1 {
|
|
|
+ width: 50%;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
font-size: 14px;
|
|
|
color: var(--vent-font-color);
|
|
|
text-align: center;
|
|
|
- transform: translate(-60%, 0);
|
|
|
+ border-radius: 2px;
|
|
|
+ background: var(--vent-warn-tab-bg-actived);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .hd-content {
|
|
|
- position: relative;
|
|
|
+ .card-btn {
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
- padding: 0 20px;
|
|
|
- background: var(--image-no-choice) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: relative;
|
|
|
+ width: 81%;
|
|
|
+ height: 24%;
|
|
|
+ margin-bottom: 6%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ background: var(--image-no-choice) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 80%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .warn {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .hd-content-text {
|
|
|
- display: flex;
|
|
|
+ .btn1 {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
- height: 200px;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 18px;
|
|
|
- color: var(--vent-font-yellow-color);
|
|
|
+ height: 24%;
|
|
|
+ margin-bottom: 6%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ background: var(--image-choice) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 80%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-62%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .warn {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-60%, 0);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .hd-content-val {
|
|
|
- position: absolute;
|
|
|
- width: calc(100% - 40px);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-family: 'douyuFont';
|
|
|
- bottom: 80px;
|
|
|
- font-size: 20px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
+ .hd-content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ padding: 0 20px;
|
|
|
+ background: var(--image-no-choice) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .hd-content-text {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: var(--vent-font-yellow-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hd-content-val {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ bottom: 80px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .ventilate-content {
|
|
|
- height: 100%;
|
|
|
- width: calc(100% - 332px);
|
|
|
- padding: 10px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-right: 10px;
|
|
|
+ .ventilate-content {
|
|
|
+ height: 100%;
|
|
|
+ width: calc(100% - 332px);
|
|
|
+ padding: 10px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .tun-box {
|
|
|
- width: 600px;
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
-
|
|
|
- .ventilate-bottom {
|
|
|
- height: calc(50% - 15px);
|
|
|
- background: var(--image-border) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .tun-box {
|
|
|
+ width: 600px;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
|
|
|
- .bot-area {
|
|
|
- height: 100%;
|
|
|
- padding: 10px;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
+ .ventilate-bottom {
|
|
|
+ height: calc(50% - 15px);
|
|
|
+ background: var(--image-border) no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
+ padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
+ .bot-area {
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .icon-toggle {
|
|
|
- position: absolute;
|
|
|
- right: 345px;
|
|
|
- top: 17px;
|
|
|
+ .icon-toggle {
|
|
|
+ position: absolute;
|
|
|
+ right: 345px;
|
|
|
+ top: 17px;
|
|
|
|
|
|
- img {
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
hongrunxia
