|
|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <a-spin tip="Loading..." :spinning="loading">
|
|
|
+ <div class="monitor-container">
|
|
|
+ <div class="lr left-box">
|
|
|
+ <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutLeft">
|
|
|
+ <ventBox1 v-if="showModules">
|
|
|
+ <template #title>
|
|
|
+ <div>均压与低氧参数监测与设置</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="vent-flex-row-between auto-control mt-10px mb-10px">
|
|
|
+ <div class="title">自动调节：</div>
|
|
|
+ <a-radio-group :value="avePressSetting.isAuto" name="radioGroup" @change="changeAvePressState($event, 'isAuto')">
|
|
|
+ <a-radio :value="false">关闭</a-radio>
|
|
|
+ <a-radio :value="true">开启</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="vent-flex-row-between auto-control mt-10px mb-10px">
|
|
|
+ <div class="title">调节类型：</div>
|
|
|
+ <a-radio-group :value="avePressSetting.controlType" name="radioGroup" @change="changeAvePressState($event, 'controlType')">
|
|
|
+ <a-radio value="co">CO</a-radio>
|
|
|
+ <a-radio value="pressure">压差</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- <div class="divider-line">开始条件</div>
|
|
|
+ <div v-for="(item, index) in settingParam1" class="input-item" :key="index">
|
|
|
+ <div class="title">{{ item.title }}：</div>
|
|
|
+ <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
|
|
|
+ <div class="unit">{{ item.unit }}</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="divider-line"></div>
|
|
|
+ <div v-for="(item, index) in settingParam5" class="input-item" :key="index">
|
|
|
+ <div class="title">{{ item.title }}：</div>
|
|
|
+ <a-input-number class="input-value" v-model:value="avePressSetting[item.code]" placeholder="" :disabled="settingFormDisabled" />
|
|
|
+ <div class="unit"> {{ item.unit }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="divider-line">结束时间</div>
|
|
|
+ <div v-for="(item, index) in settingParam3" class="input-item" :key="index">
|
|
|
+ <div class="title">{{ item.title }}：</div>
|
|
|
+ <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
|
|
|
+ <div class="unit">{{ item.unit }}</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="btn-box flex" style="text-align: center">
|
|
|
+ <div class="btn btn1 flex-1" @click="editSettingForm">{{ settingFormDisabled ? '编辑' : '取消' }}</div>
|
|
|
+ <div class="btn btn1 flex-1" @click="submitSettingForm">提交</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ModuleCommon
|
|
|
+ v-for="(cfg, index) in configs"
|
|
|
+ :key="`svvmbcb${index}`"
|
|
|
+ :show-style="cfg.showStyle"
|
|
|
+ :module-data="cfg.moduleData"
|
|
|
+ :module-name="cfg.moduleName"
|
|
|
+ :device-type="cfg.deviceType"
|
|
|
+ :data="selectData"
|
|
|
+ :visible="showModules"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <PasswordModal z-index="2000" :modal-is-show="modalVisible" modal-title="提交" @handle-ok="handleResolve" @handle-cancel="handleReject" />
|
|
|
+ <UpdatePassword @register="updatePwdRegister" @submit="handleChangePassword" />
|
|
|
+ <!-- <BasicModal title="风门状态监测" :mask="false" :bodyStyle="{ height: '50px' }" style="top: 20px" :show-ok-btn="false" @register="warnRegister2">
|
|
|
+ {{ warnModalText2 }}
|
|
|
+ </BasicModal>
|
|
|
+ <BasicModal
|
|
|
+ title="压差状态监测"
|
|
|
+ :mask="false"
|
|
|
+ :bodyStyle="{ height: '50px' }"
|
|
|
+ centered
|
|
|
+ ok-text="下发联动控制指令"
|
|
|
+ @ok="autoControl"
|
|
|
+ @register="warnRegister1"
|
|
|
+ >
|
|
|
+ {{ warnModalText1 }}
|
|
|
+ </BasicModal>
|
|
|
+ <BasicModal title="局扇状态监测" :mask="false" :bodyStyle="{ height: '50px' }" style="top: 420px" :show-ok-btn="false" @register="warnRegister3">
|
|
|
+ {{ warnModalText3 }}
|
|
|
+ </BasicModal> -->
|
|
|
+
|
|
|
+ <div class="switch-button icon-goto right-10px top-70px" :class="{ 'right-390px': showModules }" @click="showModules = !showModules"></div>
|
|
|
+ <!-- <div v-else class="switch-button icon-goto right-10px top-70px" @click="showModules = true"></div> -->
|
|
|
+ </a-spin>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+ import { ref, onMounted, onUnmounted, defineProps } from 'vue';
|
|
|
+ import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
|
|
|
+ import { list } from '../balancePress.api';
|
|
|
+ import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
|
|
|
+ import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
|
|
|
+ import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+ import { settingParam5 } from '../balancePress.data';
|
|
|
+ // import { Modal } from 'ant-design-vue';
|
|
|
+ import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+ import PasswordModal from '../../comment/components/PasswordModal.vue';
|
|
|
+ import UpdatePassword from '../../comment/components/UpdatePassword.vue';
|
|
|
+ import { useModal } from '/@/components/Modal';
|
|
|
+ // import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
|
|
|
+ // import { getToken } from '/@/utils/auth';
|
|
|
+ // import { useUserStore } from '/@/store/modules/user';
|
|
|
+ import { usePressControl } from '../hooks/useControl';
|
|
|
+ // import dayjs from 'dayjs';
|
|
|
+ // import { Config } from '../../../deviceManager/configurationTable/types';
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const { sysOrgCode } = useGlobSetting();
|
|
|
+
|
|
|
+ const loading = ref(false);
|
|
|
+ const showModules = ref(true);
|
|
|
+
|
|
|
+ // 监测数据
|
|
|
+ const selectData = ref();
|
|
|
+
|
|
|
+ // https获取监测数据
|
|
|
+ let timer: any = null;
|
|
|
+ function getMonitor(flag?) {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ if (props.deviceId) {
|
|
|
+ const data = await getDataSource(props.deviceId);
|
|
|
+ // Object.assign(selectData, data);
|
|
|
+ updateText(selectData);
|
|
|
+ selectData.value = data;
|
|
|
+ }
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ await getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function getDataSource(systemID) {
|
|
|
+ const res = await list({ devicetype: 'sys', systemID });
|
|
|
+
|
|
|
+ const result = Array.from(res.msgTxt).reduce(
|
|
|
+ (obj: any, e: any) => {
|
|
|
+ obj[e.type] = e;
|
|
|
+
|
|
|
+ // if (true) {
|
|
|
+ if (sysOrgCode === 'sdmtjtswmk') {
|
|
|
+ if (e.type.startsWith('fanlocal')) {
|
|
|
+ obj.fanlocal.datalist.push(...e.datalist);
|
|
|
+ }
|
|
|
+ if (e.type.startsWith('safetymonitor')) {
|
|
|
+ e.datalist.forEach((ele) => {
|
|
|
+ if (ele.strinstallpos.includes('风门')) {
|
|
|
+ obj.gate.datalist.push(ele);
|
|
|
+ } else if (ele.strinstallpos.includes('风窗')) {
|
|
|
+ obj.window.datalist.push(ele);
|
|
|
+ } else if (ele.strinstallpos.includes('工作面')) {
|
|
|
+ obj.work_surface.datalist.push(ele);
|
|
|
+ } else {
|
|
|
+ obj.others.datalist.push(ele);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ /** 用于归类fanlocal */
|
|
|
+ fanlocal: { datalist: [] },
|
|
|
+ /** 用于归类gate */
|
|
|
+ gate: { datalist: [] },
|
|
|
+ /** 用于归类window */
|
|
|
+ window: { datalist: [] },
|
|
|
+ /** 用于归类work_surface */
|
|
|
+ work_surface: { datalist: [] },
|
|
|
+ others: { datalist: [] },
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+
|
|
|
+ const {
|
|
|
+ avePressSetting,
|
|
|
+ // avePressLinkage,
|
|
|
+ // gateLinkage,
|
|
|
+ formData,
|
|
|
+ // getAvePress,
|
|
|
+ changePassword,
|
|
|
+ // linkageControl,
|
|
|
+ // settingControl,
|
|
|
+ // autoControl,
|
|
|
+ // cancelControl,
|
|
|
+ } = usePressControl();
|
|
|
+
|
|
|
+ const modalVisible = ref(false);
|
|
|
+
|
|
|
+ const { configs, fetchConfigs } = useInitConfigs();
|
|
|
+
|
|
|
+ const [updatePwdRegister, { closeModal, setModalProps }] = useModal();
|
|
|
+
|
|
|
+ function handleChangePassword(values) {
|
|
|
+ setModalProps({ confirmLoading: true });
|
|
|
+ changePassword(values).finally(() => {
|
|
|
+ setModalProps({ confirmLoading: false });
|
|
|
+ closeModal();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // function changeIsAuto({ target }, id) {
|
|
|
+ // formData.value.isAuto = target.value;
|
|
|
+ // modalVisible.value = true;
|
|
|
+ // resolver = (password) => {
|
|
|
+ // linkageControl(
|
|
|
+ // { password, id },
|
|
|
+ // {
|
|
|
+ // isAuto: formData.value.isAuto,
|
|
|
+ // }
|
|
|
+ // ).finally(() => {
|
|
|
+ // modalVisible.value = false;
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ function changeAvePressState({ target }, __key) {
|
|
|
+ formData.value.temp = target.value;
|
|
|
+ modalVisible.value = true;
|
|
|
+ // resolver = (password) => {
|
|
|
+ // settingControl(
|
|
|
+ // { password, id: avePressSetting.value.id },
|
|
|
+ // {
|
|
|
+ // [key]: formData.value.temp,
|
|
|
+ // }
|
|
|
+ // ).finally(() => {
|
|
|
+ // modalVisible.value = false;
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ }
|
|
|
+
|
|
|
+ // function submitLinkageForm(password) {}
|
|
|
+ function submitSettingForm() {
|
|
|
+ modalVisible.value = true;
|
|
|
+ // resolver = (password) => {
|
|
|
+ // settingControl({ password, id: avePressSetting.value.id }, avePressSetting.value).finally(() => {
|
|
|
+ // modalVisible.value = false;
|
|
|
+ // settingFormDisabled.value = true;
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ }
|
|
|
+
|
|
|
+ let resolver: any = null;
|
|
|
+ let rejecter: any = null;
|
|
|
+ function handleResolve(password) {
|
|
|
+ if (resolver) {
|
|
|
+ resolver(password);
|
|
|
+ } else {
|
|
|
+ modalVisible.value = false;
|
|
|
+ }
|
|
|
+ resolver = null;
|
|
|
+ rejecter = null;
|
|
|
+ }
|
|
|
+ function handleReject() {
|
|
|
+ if (rejecter) {
|
|
|
+ rejecter();
|
|
|
+ } else {
|
|
|
+ modalVisible.value = false;
|
|
|
+ }
|
|
|
+ resolver = null;
|
|
|
+ rejecter = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ const settingFormDisabled = ref(true);
|
|
|
+ function editSettingForm() {
|
|
|
+ settingFormDisabled.value = !settingFormDisabled.value;
|
|
|
+ /** 如果取消了编辑模式，那么需要重置表单 */
|
|
|
+ if (settingFormDisabled.value) {
|
|
|
+ // getAvePress();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ fetchConfigs('balancePressHome');
|
|
|
+ // getAvePress();
|
|
|
+ loading.value = true;
|
|
|
+ mountedThree().then(async () => {
|
|
|
+ if (sysOrgCode === 'jsnyspmy') {
|
|
|
+ await setModelType('balancePressSp'); //balancePressBase
|
|
|
+ } else {
|
|
|
+ await setModelType('balancePressTun'); //balancePressBase
|
|
|
+ }
|
|
|
+ loading.value = false;
|
|
|
+ timer = null;
|
|
|
+ await getMonitor(true);
|
|
|
+ play('startSmoke', 'top', 30, 'open', 0);
|
|
|
+ });
|
|
|
+ // loading.value = false;
|
|
|
+ // timer = null;
|
|
|
+ // getMonitor(true);
|
|
|
+ });
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ destroy();
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
+ @import '../../comment/less/workFace.less';
|
|
|
+ @ventSpace: zxm;
|
|
|
+ .monitor-container {
|
|
|
+ margin-top: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .switch-button {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ position: fixed;
|
|
|
+ // right: 5px;
|
|
|
+ // bottom: 300px;
|
|
|
+ z-index: 1000;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ pointer-events: auto;
|
|
|
+ transition: right 1s;
|
|
|
+ }
|
|
|
+ .icon-goto {
|
|
|
+ --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
|
|
|
+ background-image: var(--image-monitor-goto);
|
|
|
+ }
|
|
|
+
|
|
|
+ .divider-line {
|
|
|
+ border-bottom: 1px solid white;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+ /* .balancePress .zxm-modal-confirm-title {
|
|
|
+ font-size: 20px;
|
|
|
+ } */
|
|
|
+ .balancePress .zxm-modal-confirm-content {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+</style>
|
