hywen
/
SafetyScreen-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

项目修改2

This commit is contained in:
FrancisHu 2024-09-27 11:13:55 +08:00
parent 1ea188fd63
commit f68e9f4ea3
4 changed files with 126 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/substation/substation.js
View File

@ -75,6 +75,13 @@ export const queryLimitSpaceApi = (data) => {
}) })
} }
// 查询有限空间监测设备 - new
export const queryNewLimitSpaceApi = (data) => {
return request.get(`/base/screen/info/getPitDevAttributeRecordByDay`, {
params: data
})
}
// 查询组塔监测设备 - 当日监测 // 查询组塔监测设备 - 当日监测
export const queryTowerTodayApi = (data) => { export const queryTowerTodayApi = (data) => {
return request.get(`/base/screen/info/getTowerDevAttributeRecordByDay`, { return request.get(`/base/screen/info/getTowerDevAttributeRecordByDay`, {

3
src/components/substation/envirDetect.vue
View File

@ -140,7 +140,8 @@ import * as echarts from 'echarts'
import { import {
queryDeviceByProApi, queryDeviceByProApi,
queryEnvironmentInfoByIdApi, queryEnvironmentInfoByIdApi,
queryChartsInfoByIdApi queryChartsInfoByIdApi,
queryWarnInfoByIdApi
} from '@/api/substation/substation' } from '@/api/substation/substation'
export default { export default {
components: { components: {

60
src/components/substation/pitDetect.vue
View File

@ -5,7 +5,7 @@
<div class="inner-tit"> <div class="inner-tit">
<div> <div>
<img src="../../assets/img/lef-badge.png" alt=""> <img src="../../assets/img/lef-badge.png" alt="">
组塔检测 基坑检测
</div> </div>
<div style="display: flex; justify-content: right"> <div style="display: flex; justify-content: right">
<el-select <el-select
@ -35,22 +35,22 @@
<span>{{ item.tit }}</span> <span>{{ item.tit }}</span>
</div>--> </div>-->
<div class="single-icon"> <div class="single-icon">
<span style="color: #3BC7E3">37<span style="font-size: 18px">%VOL</span></span> <span style="color: #3BC7E3">{{ environmentInfoList ? environmentInfoList[0].jcValue : '' }}<span style="font-size: 18px">%VOL</span></span>
<span>含氧量</span> <span>含氧量</span>
<img src="../../assets/img/O2.png" alt=""> <img src="../../assets/img/O2.png" alt="">
</div> </div>
<div class="single-icon"> <div class="single-icon">
<span style="color: #7588FF">37<span style="font-size: 18px">%PPM</span></span> <span style="color: #7588FF">{{ environmentInfoList ? environmentInfoList[1].jcValue : '' }}<span style="font-size: 18px">%PPM</span></span>
<span>一氧化碳</span> <span>一氧化碳</span>
<img src="../../assets/img/CO.png" alt=""> <img src="../../assets/img/CO.png" alt="">
</div> </div>
<div class="single-icon"> <div class="single-icon">
<span style="color: #62C560">37<span style="font-size: 18px">%LEL</span></span> <span style="color: #62C560">{{ environmentInfoList ? environmentInfoList[2].jcValue : '' }}<span style="font-size: 18px">%LEL</span></span>
<span>可燃气体</span> <span>可燃气体</span>
<img src="../../assets/img/fire.png" alt=""> <img src="../../assets/img/fire.png" alt="">
</div> </div>
<div class="single-icon"> <div class="single-icon">
<span style="color: #F68F84">37<span style="font-size: 18px">%PPM</span></span> <span style="color: #F68F84">{{ environmentInfoList ? environmentInfoList[3].jcValue : '' }}<span style="font-size: 18px">%PPM</span></span>
<span>硫化氢</span> <span>硫化氢</span>
<img src="../../assets/img/H2S.png" alt=""> <img src="../../assets/img/H2S.png" alt="">
</div> </div>
@ -78,23 +78,23 @@
</div> </div>
<div class="lef-tower-pic"> <div class="lef-tower-pic">
<div <div
:class="['single-tower', { isActive: currentPit === item.id } ]" :class="['single-tower', { isActive: currentPit === item.devId } ]"
v-for="item in pitList" v-for="item in pitList"
:key="item.id" :key="item.devId"
@click="selPit(item)" @click="selPit(item.devId)"
> >
<img <img
v-if="item.status === 0" v-if="item.devStatus === 0"
src="../../assets/img/pit-offline.png" src="../../assets/img/pit-offline.png"
alt="" alt=""
/> />
<img <img
v-if="item.status === 1" v-if="item.devWarn === 1"
src="../../assets/img/pit-alerting.png" src="../../assets/img/pit-alerting.png"
alt="" alt=""
/> />
<img <img
v-if="item.status === 2" v-if="item.devStatus === 1 && item.devWarn === 0"
src="../../assets/img/pit-online.png" src="../../assets/img/pit-online.png"
alt="" alt=""
/> />
@ -175,7 +175,9 @@
import { import {
queryDeviceByProApi, queryDeviceByProApi,
queryPitDataApi, queryPitDataApi,
queryLimitSpaceApi queryLimitSpaceApi,
queryNewLimitSpaceApi,
queryEnvironmentInfoByIdApi
} from '@/api/substation/substation' } from '@/api/substation/substation'
import * as echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
@ -191,21 +193,13 @@ export default {
name: 'pitDetect', name: 'pitDetect',
data() { data() {
return { return {
currentPit: 1, environmentInfoList: undefined,
currentPit: undefined,
pitVal: undefined, pitVal: undefined,
pitRange: [], pitRange: [],
// 暂定 0离线 1报警 2在线 // 暂定 0离线 1报警 2在线
pitList: [ pitList: [
{ id: 1, status: 1 },
{ id: 2, status: 2 },
{ id: 3, status: 0 },
{ id: 4, status: 0 },
{ id: 5, status: 2 },
{ id: 6, status: 2 },
{ id: 7, status: 1 },
{ id: 8, status: 1 },
{ id: 9, status: 2 },
{ id: 10, status: 2 },
], ],
todayRecordList: [] todayRecordList: []
} }
@ -228,15 +222,23 @@ export default {
}) })
if(res.data.data.length !== 0) { if(res.data.data.length !== 0) {
this.pitVal = res.data.data[0].devId this.pitVal = res.data.data[0].devId
this.pitList = res.data.data
this.pitRange = res.data.data.map(item => { this.pitRange = res.data.data.map(item => {
return { return {
label: item.devName, label: item.devName,
value: item.devId value: item.devId
} }
}) })
await this.getEnvironmentData(this.pitVal)
await this.getPitData(this.pitVal) await this.getPitData(this.pitVal)
} }
}, },
async getEnvironmentData(devId) {
let res = await queryEnvironmentInfoByIdApi({
devId
})
this.environmentInfoList = res.data.data
},
async getPitData(devId) { async getPitData(devId) {
let res = await queryPitDataApi({ let res = await queryPitDataApi({
devId devId
@ -244,16 +246,19 @@ export default {
this.generateCharts(res.data) this.generateCharts(res.data)
}, },
async getLimitData(proId) { async getLimitData(proId) {
let res = await queryLimitSpaceApi({ let res = await queryNewLimitSpaceApi({
proId proId
}) })
this.todayRecordList = res.data this.todayRecordList = res.data
}, },
selPit(val) { selPit(v) {
this.currentPit = val.id this.currentPit = v
this.getEnvironmentData(v)
this.getPitData(v)
}, },
pitChange(e) { pitChange(e) {
console.log(e) console.log(e)
this.getEnvironmentData(e)
this.getPitData(e) this.getPitData(e)
}, },
rowStyle(scope) { rowStyle(scope) {
@ -690,11 +695,12 @@ export default {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
overflow-y: auto;
.single-tower{ .single-tower{
width: 35%; width: 35%;
height: 19%; height: 25%;
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;

145
src/components/substation/towerDetect.vue
View File

@ -24,23 +24,23 @@
<span>倾角监测设备</span> <span>倾角监测设备</span>
<div class="lef-tower-pic"> <div class="lef-tower-pic">
<div <div
:class="['single-tower', { isActive: currentAngleTower === item.id } ]" :class="['single-tower', { isActive: currentAngleTower === item.devId } ]"
v-for="item in towerAngleList" v-for="item in towerAngleList"
:key="item.id" :key="item.devId"
@click="selTowerAngle(item)" @click="selTowerAngle(item)"
> >
<img <img
v-if="item.status === 0" v-if="item.devStatus === 0"
src="../../assets/img/offline.png" src="../../assets/img/offline.png"
alt="" alt=""
/> />
<img <img
v-if="item.status === 1" v-if="item.devWarn === 1"
src="../../assets/img/alerting.png" src="../../assets/img/alerting.png"
alt="" alt=""
/> />
<img <img
v-if="item.status === 2" v-if="item.devStatus === 1 && item.devWarn === 0"
src="../../assets/img/inline.png" src="../../assets/img/inline.png"
alt="" alt=""
/> />
@ -49,23 +49,23 @@
<span>拉力监测设备</span> <span>拉力监测设备</span>
<div class="lef-tower-pic"> <div class="lef-tower-pic">
<div <div
:class="['single-tower', { isActive: currentPullTower === item.id } ]" :class="['single-tower', { isActive: currentPullTower === item.devId } ]"
v-for="item in towerPullList" v-for="item in towerPullList"
:key="item.id" :key="item.devId"
@click="selTowerPull(item)" @click="selTowerPull(item)"
> >
<img <img
v-if="item.status === 0" v-if="item.devStatus === 0"
src="../../assets/img/offline.png" src="../../assets/img/offline.png"
alt="" alt=""
/> />
<img <img
v-if="item.status === 1" v-if="item.devWarn === 1"
src="../../assets/img/alerting.png" src="../../assets/img/alerting.png"
alt="" alt=""
/> />
<img <img
v-if="item.status === 2" v-if="item.devStatus === 1 && item.devWarn === 0"
src="../../assets/img/inline.png" src="../../assets/img/inline.png"
alt="" alt=""
/> />
@ -84,22 +84,25 @@
<img src="../../assets/img/dip-angle.png" alt=""/> <img src="../../assets/img/dip-angle.png" alt=""/>
<div> <div>
<span>倾角</span> <span>倾角</span>
<span style="color: #854DFA">30°</span> <span style="color: #854DFA">{{ angleFirst }}°</span>
</div> </div>
</div> </div>
<div class="lower-info"> <div class="lower-info">
<div> <div
v-for="item in angleList"
:key="item.jcName"
>
<span>{{ item.jcTime }}</span>
<span>{{ item.jcValue }}{{ item.jcUnit }}</span>
</div>
<!-- <div>
<span>2024.08.02 12:01</span> <span>2024.08.02 12:01</span>
<span>30°</span> <span>30°</span>
</div> </div>
<div> <div>
<span>2024.08.02 12:01</span> <span>2024.08.02 12:01</span>
<span>30°</span> <span>30°</span>
</div> </div>-->
<div>
<span>2024.08.02 12:01</span>
<span>30°</span>
</div>
</div> </div>
</div> </div>
<div class="pull-force"> <div class="pull-force">
@ -113,22 +116,25 @@
<img src="../../assets/img/pull.png" alt=""/> <img src="../../assets/img/pull.png" alt=""/>
<div> <div>
<span>拉力</span> <span>拉力</span>
<span style="color: #418CFF">30N</span> <span style="color: #418CFF">{{ pullFirst }}N</span>
</div> </div>
</div> </div>
<div class="lower-info"> <div class="lower-info">
<div> <div
v-for="item in pullList"
:key="item.jcName"
>
<span>{{ item.jcTime }}</span>
<span>{{ item.jcValue }}{{ item.jcUnit }}</span>
</div>
<!-- <div>
<span>2024.08.02 12:01</span> <span>2024.08.02 12:01</span>
<span>30N</span> <span>30N</span>
</div> </div>
<div> <div>
<span>2024.08.02 12:01</span> <span>2024.08.02 12:01</span>
<span>30N</span> <span>30N</span>
</div> </div>-->
<div>
<span>2024.08.02 12:01</span>
<span>30N</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -219,8 +225,10 @@
<script> <script>
import { import {
queryDeviceByProApi,
queryTowerTodayApi, queryTowerTodayApi,
queryTowerWarnApi queryTowerWarnApi,
queryEnvironmentInfoByIdApi
} from '@/api/substation/substation' } from '@/api/substation/substation'
export default { export default {
components: { components: {
@ -235,35 +243,21 @@ export default {
name: 'towerDetect', name: 'towerDetect',
data() { data() {
return { return {
currentAngleTower: 1, currentAngleTower: undefined,
currentPullTower: 1, currentPullTower: undefined,
// 暂定 0离线 1报警 2在线 // 暂定 0离线 1在线
towerAngleList: [ towerAngleList: [
{ id: 1, status: 1 },
{ id: 2, status: 2 },
{ id: 3, status: 0 },
{ id: 4, status: 0 },
{ id: 5, status: 2 },
{ id: 6, status: 2 },
{ id: 7, status: 1 },
{ id: 8, status: 1 },
{ id: 9, status: 2 },
{ id: 10, status: 2 },
], ],
towerPullList: [ towerPullList: [
{ id: 1, status: 1 },
{ id: 2, status: 2 },
{ id: 3, status: 0 },
{ id: 4, status: 0 },
{ id: 5, status: 2 },
{ id: 6, status: 2 },
{ id: 7, status: 1 },
{ id: 8, status: 1 },
{ id: 9, status: 2 },
{ id: 10, status: 2 },
], ],
detectList: [], detectList: [],
alertList: [] alertList: [],
angleFirst: undefined,
pullFirst: undefined,
angleList: [],
pullList: []
} }
}, },
created() { created() {
@ -272,19 +266,32 @@ export default {
mounted() { mounted() {
console.log(this.sendMsg) console.log(this.sendMsg)
this.getDeviceData(this.sendMsg.projectId)
this.getTowerTodayData(this.sendMsg.projectId) this.getTowerTodayData(this.sendMsg.projectId)
this.getTowerWarnData(this.sendMsg.projectId) this.getTowerWarnData(this.sendMsg.projectId)
}, },
methods: { methods: {
async getDeviceData(proId) {
let angleRes = await queryDeviceByProApi({
proId,
devType: 117
})
this.towerAngleList = angleRes.data.data
let pullRes = await queryDeviceByProApi({
proId,
devType: 118
})
this.towerPullList = pullRes.data.data
},
async getTowerWarnData(proId) { async getTowerWarnData(proId) {
let res = await queryTowerWarnApi({ let res = await queryTowerWarnApi({
proId proId
}) })
res.data.forEach(item => { res.data.forEach(item => {
if(item.devType === 'angle') { if(item.devType === '117') {
item.angle = item.jcValue item.angle = item.jcValue + '°'
} else if(item.dev === 'pull') { } else if(item.dev === '118') {
item.pull = item.jcValue item.pull = item.jcValue + 'N'
} }
}) })
this.alertList = res.data this.alertList = res.data
@ -294,19 +301,34 @@ export default {
proId proId
}) })
res.data.forEach(item => { res.data.forEach(item => {
if(item.devType === 'angle') { if(item.devType === '117') {
item.angle = item.jcValue item.angle = item.jcValue + '°'
} else if(item.dev === 'pull') { } else if(item.dev === '118') {
item.pull = item.jcValue item.pull = item.jcValue + 'N'
} }
}) })
this.detectList = res.data this.detectList = res.data
}, },
async getEnvironmentData(devId, type) {
let res = await queryEnvironmentInfoByIdApi({
devId
})
if(type === '117') {
this.angleFirst = res.data.data[0].jcValue
this.angleList = res.data.data.filter(item => item.jcUnit === '°')
} else if(type === '118') {
this.pullFirst = res.data.data[0].jcValue
this.pullList = res.data.data.filter(item => item.jcUnit === 'N')
}
},
selTowerAngle(val) { selTowerAngle(val) {
this.currentAngleTower = val.id console.log(val)
this.currentAngleTower = val.devId
this.getEnvironmentData(val.devId, val.devType)
}, },
selTowerPull(val) { selTowerPull(val) {
this.currentPullTower = val.id this.currentPullTower = val.devId
this.getEnvironmentData(val.devId, val.devType)
}, },
rowStyle(scope) { rowStyle(scope) {
if(scope.rowIndex % 2 === 0) { if(scope.rowIndex % 2 === 0) {
@ -526,15 +548,16 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
overflow-y: auto;
div{ div{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px 50px;
border-bottom: 1px dashed #CCCFD4; border-bottom: 1px dashed #CCCFD4;
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
align-items: center; align-items: center;
span:first-child{ span:first-child{