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

项目修改

This commit is contained in:
FrancisHu 2024-09-26 18:02:21 +08:00
parent d7ebe48d1e
commit 1ea188fd63
7 changed files with 231 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -28,10 +28,16 @@ export default {
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom: '#app',
/* designHeight: 1080,
designWidth: 1920, */
el: '#app',
dw: 1920, // Width of your design layout
dh: 1080, // Height of your design layout
scaleType: 'contain', // Scaling type, 'contain' scales the content proportionally
offsetLeft: 0, // No left offset
offsetTop: 0, // No top offse
resize: true,
cssMode: 'scale'
})
},
}

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

@ -54,6 +54,13 @@ export const queryEnvironmentInfoByIdApi = (data) => {
})
}
// 根据工程id查询预警信息
export const queryWarnInfoByIdApi = (data) => {
return request.get(`/base/screen/info/getPowerDevAttributeRecordByWarn`, {
params: data
})
}
// 根据设备id查询折线图数据
export const queryChartsInfoByIdApi = (data) => {
return request.get(`/base/screen/info/getDevAttributeRecordById`, {
@ -68,9 +75,23 @@ export const queryLimitSpaceApi = (data) => {
})
}
// 查询组塔监测设备
export const queryTowerWatchApi = (data) => {
// 查询组塔监测设备 - 当日监测
export const queryTowerTodayApi = (data) => {
return request.get(`/base/screen/info/getTowerDevAttributeRecordByDay`, {
params: data
})
}
// 查询组塔监测设备 - 报警记录
export const queryTowerWarnApi = (data) => {
return request.get(`/base/screen/info/getPowerDevAttributeRecordByWarn`, {
params: data
})
}
// 查询基坑数据
export const queryPitDataApi = (data) => {
return request.get(`/base/screen/info/getPitDevAttributeRecordByDevice`, {
params: data
})
}

2
src/components/home/commonDialog.vue
View File

@ -130,8 +130,6 @@
<template slot-scope="scope">
<template v-if="item.t_slot === 'code'">
<span
style="color: #029EFC; cursor: pointer"
@click="toggleCode(scope.row)"
>
{{ scope.row[item.t_props] }}
</span>

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

@ -34,32 +34,32 @@
<span>{{ item.tit }}</span>
</div>-->
<div class="single-icon">
<span style="color: #42C8E3">37°C</span>
<span style="color: #42C8E3">{{ environmentInfoList ? environmentInfoList[8].jcValue : '' }}°C</span>
<span>温度</span>
<img src="../../assets/img/temp.png" alt="">
</div>
<div class="single-icon">
<span style="color: #FDA496">32m/s</span>
<span style="color: #FDA496">{{ environmentInfoList ? environmentInfoList[7].jcValue : '' }}m/s</span>
<span>风速</span>
<img src="../../assets/img/wind.png" alt="">
</div>
<div class="single-icon">
<span style="color: #87D674">60%</span>
<span style="color: #87D674">{{ environmentInfoList ? environmentInfoList[9].jcValue : '' }}%rh</span>
<span>湿度</span>
<img src="../../assets/img/wet.png" alt="">
</div>
<div class="single-icon">
<span style="color: #F2AD49">{{ environmentInfoList[5].jcValue }}分贝</span>
<span style="color: #F2AD49">{{ environmentInfoList ? environmentInfoList[5].jcValue : '' }}db</span>
<span>噪声</span>
<img src="../../assets/img/loud.png" alt="">
</div>
<div class="single-icon">
<span style="color: #9634CC">{{ environmentInfoList[3].jcValue }}/ugm3</span>
<span style="color: #9634CC">{{ environmentInfoList ? environmentInfoList[3].jcValue : '' }}/ugm3</span>
<span>PM2.5</span>
<img src="../../assets/img/pm2.5.png" alt="">
</div>
<div class="single-icon">
<span style="color: #1DB1C0">{{ environmentInfoList[4].jcValue }}/ugm3</span>
<span style="color: #1DB1C0">{{ environmentInfoList ? environmentInfoList[4].jcValue : '' }}/ugm3</span>
<span>PM10</span>
<img src="../../assets/img/pm10.png" alt="">
</div>
@ -155,7 +155,7 @@ export default {
name: 'manDetect',
data() {
return {
environmentInfoList: [],
environmentInfoList: undefined,
deviceVal: undefined,
deviceRange: [],
tableList: [
@ -197,8 +197,10 @@ export default {
methods: {
async getDeviceData(proId) {
let res = await queryDeviceByProApi({
proId
proId,
devType: 116
})
if(res.data.data.length !== 0) {
this.deviceVal = res.data.data[0].devId
this.deviceRange = res.data.data.map(item => {
return {
@ -208,6 +210,7 @@ export default {
})
await this.getEnvironmentData(this.deviceVal)
await this.getChartsData(this.deviceVal)
}
},
async getEnvironmentData(devId) {
let res = await queryEnvironmentInfoByIdApi({
@ -321,7 +324,7 @@ export default {
},
yAxis: {
type: 'value',
name: '%',
name: '%rh',
},
series: [
{
@ -376,7 +379,7 @@ export default {
},
yAxis: {
type: 'value',
name: '分贝',
name: 'db',
},
series: [
{

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

@ -3,9 +3,27 @@
<div class="pit-lef">
<div class="tower-watch">
<div class="inner-tit">
<div>
<img src="../../assets/img/lef-badge.png" alt="">
组塔检测
</div>
<div style="display: flex; justify-content: right">
<el-select
v-model="pitVal"
clearable
filterable
placeholder="请选择"
@change="pitChange"
>
<el-option
v-for="item in pitRange"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="work-icons">
<!-- <div
class="single-icon"
@ -155,6 +173,8 @@
<script>
import {
queryDeviceByProApi,
queryPitDataApi,
queryLimitSpaceApi
} from '@/api/substation/substation'
import * as echarts from 'echarts'
@ -172,6 +192,8 @@ export default {
data() {
return {
currentPit: 1,
pitVal: undefined,
pitRange: [],
// 暂定 0离线 1报警 2在线
pitList: [
{ id: 1, status: 1 },
@ -195,9 +217,32 @@ export default {
mounted() {
console.log(this.sendMsg)
this.getLimitData(this.sendMsg.projectId)
this.generateCharts()
this.getDeviceData(this.sendMsg.projectId)
// this.generateCharts()
},
methods: {
async getDeviceData(proId) {
let res = await queryDeviceByProApi({
proId,
devType: 119
})
if(res.data.data.length !== 0) {
this.pitVal = res.data.data[0].devId
this.pitRange = res.data.data.map(item => {
return {
label: item.devName,
value: item.devId
}
})
await this.getPitData(this.pitVal)
}
},
async getPitData(devId) {
let res = await queryPitDataApi({
devId
})
this.generateCharts(res.data)
},
async getLimitData(proId) {
let res = await queryLimitSpaceApi({
proId
@ -207,6 +252,10 @@ export default {
selPit(val) {
this.currentPit = val.id
},
pitChange(e) {
console.log(e)
this.getPitData(e)
},
rowStyle(scope) {
if(scope.rowIndex % 2 === 0) {
return {
@ -218,7 +267,19 @@ export default {
}
}
},
generateCharts() {
generateCharts(list) {
let O2Arr = list['含氧量'].map(item => {
return Number(item.jcValue)
})
let COArr = list['一氧化碳'].map(item => {
return Number(item.jcValue)
})
let fireArr = list['可燃气体'].map(item => {
return Number(item.jcValue)
})
let H2SArr = list['硫化氢'].map(item => {
return Number(item.jcValue)
})
// 含氧量图表
let O2Option = {
tooltip: {
@ -256,7 +317,7 @@ export default {
name: '含氧量',
type: 'bar',
barWidth: '40%',
data: [118, 112, 93, 98, 107, 91, 96],
data: O2Arr,
itemStyle:{
// 设置柱状渐变色
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
@ -302,7 +363,7 @@ export default {
series: [
{
name: '可燃气体',
data: [301, 350, 313, 352, 426, 487, 503],
data: fireArr,
type: 'line',
smooth: true,
symbol: 'none',
@ -353,7 +414,7 @@ export default {
series: [
{
name: '一氧化碳',
data: [90, 94, 101, 66, 86, 72, 60],
data: COArr,
type: 'line',
smooth: true,
lineStyle: {
@ -423,7 +484,7 @@ export default {
},*/
{
name: '硫化氢',
data: [205, 182, 97, 264, 173, 473, 235],
data: H2SArr,
type: 'line',
lineStyle: {
color: '#4B84FC'
@ -483,12 +544,13 @@ export default {
.inner-tit{
width: 100%;
width: 45%;
box-sizing: border-box;
padding: 10px 20px;
background-color: #EFF4FE;
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
font-size: 20px;
font-family: 'YouShe', sans-serif;

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

@ -21,12 +21,38 @@
在线
</div>
</div>
<span>倾角监测设备</span>
<div class="lef-tower-pic">
<div
:class="['single-tower', { isActive: currentTower === item.id } ]"
v-for="item in towerList"
:class="['single-tower', { isActive: currentAngleTower === item.id } ]"
v-for="item in towerAngleList"
:key="item.id"
@click="selTower(item)"
@click="selTowerAngle(item)"
>
<img
v-if="item.status === 0"
src="../../assets/img/offline.png"
alt=""
/>
<img
v-if="item.status === 1"
src="../../assets/img/alerting.png"
alt=""
/>
<img
v-if="item.status === 2"
src="../../assets/img/inline.png"
alt=""
/>
</div>
</div>
<span>拉力监测设备</span>
<div class="lef-tower-pic">
<div
:class="['single-tower', { isActive: currentPullTower === item.id } ]"
v-for="item in towerPullList"
:key="item.id"
@click="selTowerPull(item)"
>
<img
v-if="item.status === 0"
@ -121,13 +147,13 @@
:row-style="rowStyle"
>
<el-table-column
prop="name"
prop="devName"
label="设备名称"
align="center"
>
</el-table-column>
<el-table-column
prop="time"
prop="jcTime"
label="时间"
align="center"
width="180"
@ -137,14 +163,12 @@
prop="angle"
label="倾角"
align="center"
>
</el-table-column>
<el-table-column
prop="force"
prop="pull"
label="拉力"
align="center"
>
</el-table-column>
</el-table>
@ -161,13 +185,13 @@
:row-style="rowStyle"
>
<el-table-column
prop="name"
prop="devName"
label="设备名称"
align="center"
>
</el-table-column>
<el-table-column
prop="time"
prop="jcTime"
label="时间"
align="center"
width="180"
@ -181,7 +205,7 @@
>
</el-table-column>
<el-table-column
prop="force"
prop="pull"
label="拉力"
align="center"
@ -195,7 +219,8 @@
<script>
import {
queryTowerWatchApi
queryTowerTodayApi,
queryTowerWarnApi
} from '@/api/substation/substation'
export default {
components: {
@ -210,9 +235,10 @@ export default {
name: 'towerDetect',
data() {
return {
currentTower: 1,
currentAngleTower: 1,
currentPullTower: 1,
// 暂定 0离线 1报警 2在线
towerList: [
towerAngleList: [
{ id: 1, status: 1 },
{ id: 2, status: 2 },
{ id: 3, status: 0 },
@ -224,87 +250,20 @@ export default {
{ id: 9, status: 2 },
{ id: 10, status: 2 },
],
detectList: [
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
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 },
],
alertList: [
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},{
name: 'xx设备',
time: '2024.10.01 12:04:03',
angle: '30°',
force: '30N'
},
]
detectList: [],
alertList: []
}
},
created() {
@ -313,16 +272,41 @@ export default {
mounted() {
console.log(this.sendMsg)
this.getTowerTodayData(this.sendMsg.projectId)
this.getTowerWarnData(this.sendMsg.projectId)
},
methods: {
async getTowerWarnData(devId) {
let res = await queryTowerWatchApi({
devId
async getTowerWarnData(proId) {
let res = await queryTowerWarnApi({
proId
})
res.data.forEach(item => {
if(item.devType === 'angle') {
item.angle = item.jcValue
} else if(item.dev === 'pull') {
item.pull = item.jcValue
}
})
this.alertList = res.data
},
selTower(val) {
this.currentTower = val.id
async getTowerTodayData(proId) {
let res = await queryTowerTodayApi({
proId
})
res.data.forEach(item => {
if(item.devType === 'angle') {
item.angle = item.jcValue
} else if(item.dev === 'pull') {
item.pull = item.jcValue
}
})
this.detectList = res.data
},
selTowerAngle(val) {
this.currentAngleTower = val.id
},
selTowerPull(val) {
this.currentPullTower = val.id
},
rowStyle(scope) {
if(scope.rowIndex % 2 === 0) {
@ -407,7 +391,7 @@ export default {
.lef-spin{
width: 100%;
height: 30px;
height: 4%;
display: flex;
align-items: center;
color: #000;
@ -432,19 +416,29 @@ export default {
}
span{
padding: 15px 0;
color: #000;
font-size: 16px;
}
.lef-tower-pic{
flex: 1;
width: 100%;
height: 350px;
box-sizing: border-box;
padding: 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
overflow-y: auto;
.single-tower{
width: 35%;
height: 17%;
height: 135px;
border-radius: 20px;
cursor: pointer;
display: flex;

15
src/views/homePage/index.vue
View File

@ -35,13 +35,13 @@
<!-- 左侧数据模块列表 -->
<div class="leftModuleBox">
<div style="height: 200px; margin-bottom: 10px">
<LeftOne @openDialog="handleDialog"></LeftOne>
<LeftOne :key="childKey" @openDialog="handleDialog"></LeftOne>
</div>
<div style="height: 430px; margin-bottom: 10px">
<LeftTwo @openDialog="handleDialog"></LeftTwo>
<LeftTwo :key="childKey" @openDialog="handleDialog"></LeftTwo>
</div>
<div style="height: 300px">
<LeftThree @openDialog="handleDialog"></LeftThree>
<LeftThree :key="childKey" @openDialog="handleDialog"></LeftThree>
</div>
</div>
<!-- 中间3D效果展示 -->
@ -80,10 +80,10 @@
<!-- 右侧数据模块列表 -->
<div class="rightModuleBox">
<div style="height: 470px; margin-bottom: 10px">
<RightOne @openDialog="handleDialog"></RightOne>
<RightOne :key="childKey" @openDialog="handleDialog"></RightOne>
</div>
<div style="height: 470px">
<rightTwo @openDialog="handleDialog"></rightTwo>
<rightTwo :key="childKey" @openDialog="handleDialog"></rightTwo>
</div>
<!-- <rightThree></rightThree>-->
<!-- <LeftThree></LeftThree>-->
@ -179,6 +179,7 @@ export default {
name: 'Home',
data() {
return {
childKey: 0,
currentIndex: 1,
geoData: undefined
}
@ -190,6 +191,10 @@ export default {
mounted() {
this.getGeoData()
setInterval(() => {
this.childKey++
this.getGeoData()
}, 1000 * 60)
/* this.geoData = [
{ name: '北京市', projName: '王府井工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [116.407526, 39.90403] },
{ name: '上海市', projName: '外滩工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [121.473701, 31.230416] },