8 changed files with 125 additions and 1 deletions
-
2package.json
-
6src/app.vue
-
1src/assets/images/menuIcon/n-gas.svg
-
1src/assets/images/menuIcon/s-gas.svg
-
1src/layouts/default.vue
-
13src/router/routes.ts
-
50src/stores/gasStore.ts
-
52src/views/gas/index.vue
@ -0,0 +1 @@ |
|||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="19" height="19" viewBox="0 0 19 19"><g transform="matrix(-1,0,0,1,38,0)"><path d="M36,0L21,0C19.9,0,19,0.9,19,2L19,17C19,18.1,19.9,19,21,19L36,19C37.1,19,38,18.1,38,17L38,2C38,0.9,37.1,0,36,0ZM21.25,4L26,4L26,5.5L21.25,5.5C20.85,5.5,20.5,5.15,20.5,4.75C20.5,4.35,20.85,4,21.25,4ZM21.25,9L22.5,9L22.5,10.5L21.25,10.5C20.85,10.5,20.5,10.15,20.5,9.75C20.5,9.35,20.85,9,21.25,9ZM29,15.5L21.25,15.5C20.85,15.5,20.5,15.15,20.5,14.75C20.5,14.35,20.85,14,21.25,14L29,14L29,15.5ZM35.75,15.5L33,15.5C33,16.05,32.55,16.5,32,16.5L31.5,16.5C30.95,16.5,30.5,16.05,30.5,15.5L30.5,14C30.5,13.45,30.95,13,31.5,13L32,13C32.55,13,33,13.45,33,14L35.75,14C36.15,14,36.5,14.35,36.5,14.75C36.5,15.15,36.15,15.5,35.75,15.5ZM35.75,10.5L26.5,10.5C26.5,11.05,26.05,11.5,25.5,11.5L25,11.5C24.45,11.5,24,11.05,24,10.5L24,9C24,8.45,24.45,8,25,8L25.5,8C26.05,8,26.5,8.45,26.5,9L35.75,9C36.15,9,36.5,9.35,36.5,9.75C36.5,10.15,36.15,10.5,35.75,10.5ZM35.75,5.5L30,5.5C30,6.05,29.55,6.5,29,6.5L28.5,6.5C27.95,6.5,27.5,6.05,27.5,5.5L27.5,4C27.5,3.45,27.95,3,28.5,3L29,3C29.55,3,30,3.45,30,4L35.75,4C36.15,4,36.5,4.35,36.5,4.75C36.5,5.15,36.15,5.5,35.75,5.5Z" fill="#191919" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg> |
@ -0,0 +1 @@ |
|||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="19" height="19" viewBox="0 0 19 19"><g transform="matrix(-1,0,0,1,38,0)"><path d="M36,0L21,0C19.9,0,19,0.9,19,2L19,17C19,18.1,19.9,19,21,19L36,19C37.1,19,38,18.1,38,17L38,2C38,0.9,37.1,0,36,0ZM21.25,4L26,4L26,5.5L21.25,5.5C20.85,5.5,20.5,5.15,20.5,4.75C20.5,4.35,20.85,4,21.25,4ZM21.25,9L22.5,9L22.5,10.5L21.25,10.5C20.85,10.5,20.5,10.15,20.5,9.75C20.5,9.35,20.85,9,21.25,9ZM29,15.5L21.25,15.5C20.85,15.5,20.5,15.15,20.5,14.75C20.5,14.35,20.85,14,21.25,14L29,14L29,15.5ZM35.75,15.5L33,15.5C33,16.05,32.55,16.5,32,16.5L31.5,16.5C30.95,16.5,30.5,16.05,30.5,15.5L30.5,14C30.5,13.45,30.95,13,31.5,13L32,13C32.55,13,33,13.45,33,14L35.75,14C36.15,14,36.5,14.35,36.5,14.75C36.5,15.15,36.15,15.5,35.75,15.5ZM35.75,10.5L26.5,10.5C26.5,11.05,26.05,11.5,25.5,11.5L25,11.5C24.45,11.5,24,11.05,24,10.5L24,9C24,8.45,24.45,8,25,8L25.5,8C26.05,8,26.5,8.45,26.5,9L35.75,9C36.15,9,36.5,9.35,36.5,9.75C36.5,10.15,36.15,10.5,35.75,10.5ZM35.75,5.5L30,5.5C30,6.05,29.55,6.5,29,6.5L28.5,6.5C27.95,6.5,27.5,6.05,27.5,5.5L27.5,4C27.5,3.45,27.95,3,28.5,3L29,3C29.55,3,30,3.45,30,4L35.75,4C36.15,4,36.5,4.35,36.5,4.75C36.5,5.15,36.15,5.5,35.75,5.5Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg> |
@ -0,0 +1,50 @@ |
|||||
|
import { sendCmd } from 'apis/system' |
||||
|
import { defineStore } from 'pinia' |
||||
|
import { ref } from 'vue' |
||||
|
|
||||
|
/** |
||||
|
* 主页数据管理模块 |
||||
|
* @module useHomeStore |
||||
|
*/ |
||||
|
interface gasPathSwitcher { |
||||
|
gasPathSwitcher: gasPathSwitcher |
||||
|
path: string |
||||
|
} |
||||
|
interface gasPathSwitcher { |
||||
|
isOnline: boolean |
||||
|
} |
||||
|
|
||||
|
export const useGasStore = defineStore('gas', () => { |
||||
|
// 状态定义
|
||||
|
const channelSwitcherMap = ['degradation', 'disinfection', 'dehumidification'] |
||||
|
const isOnline = ref<true | false>(false) |
||||
|
const currentChannel = ref<string | null>(null) |
||||
|
/** |
||||
|
* 选择通道 |
||||
|
*/ |
||||
|
const selectChannel = async (data: string) => { |
||||
|
const defaultParams = { |
||||
|
className: 'DMGasPathMgrService', |
||||
|
fnName: 'selectChannel', |
||||
|
params: { |
||||
|
dmGasPath: data, |
||||
|
}, |
||||
|
} |
||||
|
return await sendCmd(defaultParams) |
||||
|
} |
||||
|
/** |
||||
|
* 根据上报的数据更新当前通道和线上状态 |
||||
|
*/ |
||||
|
const updateChannelByReport = (data: gasPathSwitcher) => { |
||||
|
isOnline.value = data.gasPathSwitcher.isOnline |
||||
|
currentChannel.value = data.path |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
channelSwitcherMap, |
||||
|
currentChannel, |
||||
|
isOnline, |
||||
|
selectChannel, |
||||
|
updateChannelByReport, |
||||
|
} |
||||
|
}) |
@ -0,0 +1,52 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { FtMessageBox } from 'libs/messageBox' |
||||
|
import { useGasStore } from 'stores/gasStore' |
||||
|
|
||||
|
const gasStore = useGasStore() |
||||
|
const selectChannel = (channel: string, event: any) => { |
||||
|
FtMessageBox.warning(`请确认打开${event.target.textContent}?`).then(() => { |
||||
|
gasStore.selectChannel(channel) |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<main class="main-content"> |
||||
|
<el-row style="margin-top: 20px"> |
||||
|
<el-col :span="24"> |
||||
|
<div> |
||||
|
是否在线:{{ gasStore.isOnline ? '在线' : '离线' }} |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div> |
||||
|
当前通道:{{ gasStore.currentChannel }} |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div> |
||||
|
通道控制: |
||||
|
<bt-button type="primary" button-text="降解通道" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[0]" @click="selectChannel(gasStore.channelSwitcherMap[0], $event)" /> |
||||
|
<bt-button type="primary" button-text="消毒通道" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[1]" @click="selectChannel(gasStore.channelSwitcherMap[1], $event)" /> |
||||
|
<bt-button type="primary" button-text="除湿通道" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[2]" @click="selectChannel(gasStore.channelSwitcherMap[2], $event)" /> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</main> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
$lineHeight: 12vh; |
||||
|
.main-content { |
||||
|
height: 100%; |
||||
|
background: $gradient-color; |
||||
|
} |
||||
|
.el-row { |
||||
|
margin-bottom: 20px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue