|
|
@@ -1,116 +1,23 @@
|
|
|
<template>
|
|
|
<div class="monitor-container">
|
|
|
- <div class="lr left-box">
|
|
|
- <div class="monitor-info item-box">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>设备信息监测</div>
|
|
|
- </template>
|
|
|
- <template #container v-if="dataSource.length > 0 ">
|
|
|
- <div v-for="(monitor, key) in deviceMonitorData" :key="key" class="monitor-item">
|
|
|
- <div class="item-title">{{ monitor.text }}</div>
|
|
|
- <div class="item-val">{{ key.startsWith('1#') ? dataSource[0][key.split('_')[1]]||'-' : key.startsWith('2#') ? dataSource[1][key.split('_')[1]]||'-' : (dataSource[0][key] || '-') }}</div>
|
|
|
- <div class="item-unit">{{ monitor.unit }}</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- <div class="warning-group">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>近一月报警情况</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <dv-scroll-board ref="scrollBoard" :config="warningConfig"
|
|
|
- style="width: 100%; height: 240px; overflow-y: auto; " />
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- <div class="item-box vent-margin-t-10">
|
|
|
- <!-- <LivePlayer id="fm-player1" style="height: 220px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls /> -->
|
|
|
+ <div class="header-box">
|
|
|
+ <div class="header-container">
|
|
|
+ <div class="device-detail">
|
|
|
+ <div class="device-title"> </div>
|
|
|
+ <div class="device-val">是否带电</div>
|
|
|
+ <div class="device-val">是否运行</div>
|
|
|
+ <div class="device-val">故障</div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(device, key) in deviceMonitorList" class="device-detail" :key="key">
|
|
|
+ <div class="device-title">{{ device.title }}</div>
|
|
|
+ <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
|
|
|
+ <span v-if="index == 0" :style="{color: monitorData[detailItem.code] != 1 ? '#BFBFBF' : '#10BC79'}">{{ monitorData[detailItem.code] == 0 ? '不带电' : monitorData[detailItem.code] == 1 ? '带电' : '-' }}</span>
|
|
|
+ <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] != 1 ? '#BFBFBF' : '#10BC79' }">{{ monitorData[detailItem.code] == 0 ? '未运行' : monitorData[detailItem.code] == 1 ? '运行' : '-' }}</span>
|
|
|
+ <span v-if="index == 2" :style="{ color: monitorData[detailItem.code] == 0 ? '#10BC79' : monitorData[detailItem.code] == 1 ? '#F14C4C' : '#BFBFBF'}">{{ monitorData[detailItem.code] == 0 ? '正常' : monitorData[detailItem.code] == 1 ? '报警' : '-'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="lr right-box">
|
|
|
- <div class="control-container item-box">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>设备设施集中控制</div>
|
|
|
- </template>
|
|
|
- <template #container >
|
|
|
- <div class="control-group">
|
|
|
- <div class="control-item" v-for="(item, key) in deviceControlData" :key="key">
|
|
|
- <div class="control-item-title">{{ item }}</div>
|
|
|
- <div class="control-item-state" v-if="!key.startsWith('2#')">
|
|
|
- <a-switch v-model="dataSource[0][key.split('_')[1]]" size="small" checked-children="开启"
|
|
|
- un-checked-children="关闭"
|
|
|
- @change="handlerDevice(dataSource[0][key.split('_')[1]])">
|
|
|
- </a-switch>
|
|
|
- </div>
|
|
|
- <div class="control-item-state" v-else>
|
|
|
- <a-switch v-model="dataSource[1][key.split('_')[1]]" size="small" checked-children="开启"
|
|
|
- un-checked-children="关闭"
|
|
|
- @change="handlerDevice(dataSource[1][key.split('_')[1]])">
|
|
|
- </a-switch>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <a-divider style="height: 1px; background-color: #d7d7d755" />
|
|
|
- <div class="control-btn-group">
|
|
|
- <div class="control-left-box">
|
|
|
- <div class="btn-box">
|
|
|
- <span @click="handlerDevice({ remote : true})">远程</span>
|
|
|
- <span @click="handlerDevice({ remote: false })">就地</span>
|
|
|
- </div>
|
|
|
- <div class="icon-box" :class="{'remote-icon-box': true}">
|
|
|
- <div class="icon"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="control-right-box">
|
|
|
- <a-button class="btn" type="primary" @click="handlerDevice({run: true})">一键启动</a-button>
|
|
|
- <a-button type="primary" danger @click="handlerDevice({ run: false })">紧急停止</a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <a-divider style="height: 1px; background-color: #d7d7d755" />
|
|
|
- <div class="parameter-btn-group">
|
|
|
- <a-button type="primary" @click="openModal('RunParameterModal')">参数设置</a-button>
|
|
|
- <a-button type="primary" @click="openModal('WarningParameterModal')">报警设置</a-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- <div class="control-container item-box echarts-box">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>设备实时监测曲线</div>
|
|
|
- </template>
|
|
|
- <template #container >
|
|
|
- <div class="btn-group">
|
|
|
- <span class="active">注浆流量</span>
|
|
|
- <span>注浆压力</span>
|
|
|
- <span>水舱液位</span>
|
|
|
- <span>注浆筒液位</span>
|
|
|
- </div>
|
|
|
- <div class="item-box echarts-container">
|
|
|
- <div class="echarts-group">
|
|
|
- <div class="echarts-item">
|
|
|
- <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
|
|
|
- </div>
|
|
|
- <div class="echarts-item">
|
|
|
- <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['pressure']" :option="yaliOption" />
|
|
|
- </div>
|
|
|
- <div class="echarts-item">
|
|
|
- <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
|
|
|
- </div>
|
|
|
- <div class="echarts-item">
|
|
|
- <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
</div>
|
|
|
<component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
|
|
|
</template>
|
|
|
@@ -123,7 +30,7 @@ import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
import RunParameterModal from './runParameter.modal.vue'
|
|
|
import WarningParameterModal from './warningParameter.modal.vue'
|
|
|
-import { warningConfig, zhujiangOption, yaliOption } from '../grout.data'
|
|
|
+import { deviceMonitorList } from '../grout.data'
|
|
|
import { list } from '../grout.api';
|
|
|
import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
|
|
|
|
|
|
@@ -142,7 +49,7 @@ const left: string = "0px";
|
|
|
const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
|
|
|
const modalVisible = ref<Boolean>(false); // 模态框是否可见
|
|
|
const loading = ref(false);
|
|
|
-
|
|
|
+const monitorData = ref({})
|
|
|
// 默认初始是第一行
|
|
|
const dataSource = ref([
|
|
|
{
|
|
|
@@ -165,26 +72,6 @@ const dataSource = ref([
|
|
|
}
|
|
|
]); //dusting
|
|
|
|
|
|
-const deviceMonitorData = {
|
|
|
- '1#_waterSupply': { text: '1#制浆机供水流量', unit: 'm³/h' },
|
|
|
- '1#_beltVla': { text: '1#皮带秤数值', unit: 'T' },
|
|
|
- '2#_waterSupply': { text: '2#制浆机供水流量', unit: 'm³/h' },
|
|
|
- '2#_beltVla': { text: '2#皮带秤数值', unit: 'T' },
|
|
|
- density: {text: '密度' , unit: 'g/cm'},
|
|
|
- pressure: { text: '压力', unit: 'MPa' },
|
|
|
- liquidLevel: { text: '缓冲池液位', unit: 'm' },
|
|
|
- flowRate: { text: '注浆流量', unit: 'm³/h' },
|
|
|
-}
|
|
|
-const deviceControlData = {
|
|
|
- '1#_waterPump': '1#清水泵',
|
|
|
- '1#_groutingPump': '1#注浆泵',
|
|
|
- '1#_pulpingMachine': '1#制浆机',
|
|
|
- '2#_waterPump': '2#清水泵',
|
|
|
- '2#_groutingPump': '2#注浆泵',
|
|
|
- '2#_pulpingMachine': '2#制浆机',
|
|
|
- 'liquidLevelProtect ':'液位保护'
|
|
|
-}
|
|
|
-
|
|
|
const flvURL1 = () => {
|
|
|
return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
|
|
|
// return ''
|
|
|
@@ -214,13 +101,16 @@ function getMonitor(flag?) {
|
|
|
|
|
|
async function getDataSource() {
|
|
|
const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
|
|
|
- const dataList = res.msgTxt[0].datalist || [];
|
|
|
- dataSource.value = dataList.filter((data) => {
|
|
|
- const item = data.readData;
|
|
|
- Object.assign(data, item);
|
|
|
- return item
|
|
|
- });
|
|
|
-
|
|
|
+ if(res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist[0]){
|
|
|
+ monitorData.value = Object.assign(res.msgTxt[0].datalist[0], res.msgTxt[0].datalist[0]['readData'])
|
|
|
+ }
|
|
|
+ // const dataList = res.msgTxt[0].datalist || [];
|
|
|
+ // dataSource.value = dataList.filter((data) => {
|
|
|
+ // const item = data.readData;
|
|
|
+ // Object.assign(data, item);
|
|
|
+ // return item
|
|
|
+ // });
|
|
|
+ // monitorData.value =
|
|
|
}
|
|
|
|
|
|
function handlerDevice(param: string | Object) {
|
|
|
@@ -263,247 +153,50 @@ onUnmounted(() => {
|
|
|
// border: 1px solid #fff;
|
|
|
margin-top: 40px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ // justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
padding: 0 5px;
|
|
|
|
|
|
- .lr {
|
|
|
- width: 350px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-top: 10px;
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .right-box {
|
|
|
- width: 320px;
|
|
|
- margin-top: 30px;
|
|
|
- .control-group{
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .control-item {
|
|
|
-
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding: 0 2px;
|
|
|
- .control-item-title{
|
|
|
- color: #63e0ff;
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- }
|
|
|
- .control-item-state{
|
|
|
- width: 94px;
|
|
|
- height: 47px;
|
|
|
- background: url('/@/assets/images/vent/control-switch-bg.png');
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .button-box {
|
|
|
- position: relative;
|
|
|
- padding: 5px;
|
|
|
- border: 1px transparent solid;
|
|
|
- background-clip: border-box;
|
|
|
- border-radius: 5px;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .a-button {
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- &::v-deep .a-button--mini {
|
|
|
- padding: 6px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- &::v-deep .a-button--mini.is-round {
|
|
|
- padding: 6px 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .control-btn-group{
|
|
|
+ .header-box{
|
|
|
+ // width: 100%;
|
|
|
+ margin-top: 50px;
|
|
|
+ .header-container{
|
|
|
+ height: auto;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- .control-left-box{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20px;
|
|
|
- .btn-box{
|
|
|
- width: 100px;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- padding: 2px 8px;
|
|
|
- background: #007099;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgb(125, 230, 249);
|
|
|
- cursor: pointer;
|
|
|
- &:hover{
|
|
|
- background: #005574;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .icon-box{
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- border-radius: 30px;
|
|
|
- border: 2px solid #00bcdd;
|
|
|
- box-shadow: 0 0 20px #ffffff88;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-top: 20px;
|
|
|
-
|
|
|
- .icon{
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- border-radius: 9px;
|
|
|
- border: 3px solid #d7f9ff;
|
|
|
- position: relative;
|
|
|
- background: #00bcdd;
|
|
|
- &::before{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 2px;
|
|
|
- height: 12px;
|
|
|
- background-color: #00bcdd;
|
|
|
- left: 6px;
|
|
|
- top: -16px;
|
|
|
- }
|
|
|
- &::after{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 2px;
|
|
|
- height: 12px;
|
|
|
- left: 6px;
|
|
|
- top: 17px;
|
|
|
- background-color: #00d9ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .remote-icon-box{
|
|
|
- transform: rotate(30deg);
|
|
|
- animation: iconRotate 1s linear;
|
|
|
- }
|
|
|
- .remote-icon-box1{
|
|
|
- transform: rotate(-30deg);
|
|
|
- animation: iconRotate1 1s linear;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes iconRotate{
|
|
|
- from{
|
|
|
- transform: rotate(-30deg);
|
|
|
- }
|
|
|
- to {
|
|
|
- transform: rotate(30deg);
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes iconRotate1{
|
|
|
- from {
|
|
|
- transform: rotate(30deg);
|
|
|
- }
|
|
|
- to {
|
|
|
- transform: rotate(-30deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .control-right-box{
|
|
|
- width: 100px;
|
|
|
- .btn{
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0 0 30px rgb(0, 153, 184) inset;
|
|
|
}
|
|
|
- .parameter-btn-group{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 20px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .device-title{
|
|
|
+ width: 110px;
|
|
|
+ text-align: center;
|
|
|
+ border-top: 1px solid #00baffd4;
|
|
|
+ border-left: 1px solid #00baffd4;
|
|
|
+ line-height: 46px;
|
|
|
+ color: #00e5ff;
|
|
|
+ background-color: #00bbff21;
|
|
|
}
|
|
|
- .echarts-box{
|
|
|
- width: 100%;
|
|
|
- height: 332px;
|
|
|
- position: relative;
|
|
|
- &:deep(.box-container){
|
|
|
- padding: 0px !important;
|
|
|
+ .device-detail{
|
|
|
+ text-align: center;
|
|
|
+ &:first-child{
|
|
|
+ background-color: #00bbff11;
|
|
|
}
|
|
|
- .btn-group{
|
|
|
- line-height: 30px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- margin-top: 3px;
|
|
|
- span{
|
|
|
- padding: 3px 5px;
|
|
|
- margin: 0 2px;
|
|
|
- border-radius: 2px;
|
|
|
- background-image: linear-gradient( #32475B, #5b95c7);
|
|
|
- border: 1px solid #32475B;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .active{
|
|
|
- background-image: linear-gradient( #2E4659, #37A7B4);
|
|
|
- border-top: 1px solid #3DF6FF;
|
|
|
+ &:last-child{
|
|
|
+ .device-val, .device-title{
|
|
|
+ border-right: 1px solid #00baffd4;
|
|
|
}
|
|
|
}
|
|
|
- .echarts-container{
|
|
|
- width: 100%;
|
|
|
- height: 240px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- .echarts-group{
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- position: absolute;
|
|
|
- left: v-bind(left);
|
|
|
- .echarts-item{
|
|
|
- width: 305px;
|
|
|
- }
|
|
|
+ .device-val{
|
|
|
+ line-height: 36px;
|
|
|
+ border-top: 1px solid #00baffd4;
|
|
|
+ border-left: 1px solid #00baffd4;
|
|
|
+ &:last-child{
|
|
|
+ border-bottom: 1px solid #00baffd4;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
- .left-box {
|
|
|
- margin-top: 30px;
|
|
|
- .monitor-item{
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
- justify-content: space-between;
|
|
|
- background-image: linear-gradient(to left, #3df6ff10, #3df6ff00);
|
|
|
- margin: 10px 0;
|
|
|
-
|
|
|
- .item-title{
|
|
|
- width: 200px;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .item-val{
|
|
|
- width: 80px;
|
|
|
- color: #00eefffe;
|
|
|
- }
|
|
|
- .item-unit{
|
|
|
- width: 80px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .item-box{
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
|
|
|
:deep(.@{ventSpace}-tabs-tabpane-active) {
|
hongrunxia