大屏除工作台外地图相关及弹窗展示
This commit is contained in:
parent
2ef9adf060
commit
3ab53e4c65
|
|
@ -47,6 +47,20 @@ export const queryDeviceByProApi = (data) => {
|
|||
})
|
||||
}
|
||||
|
||||
// 查询倾角，拉力柱状图数据接口
|
||||
export const getTowerDevAttributeRecordByDevice = (data) => {
|
||||
return request.get(`/base/screen/info/getTowerDevAttributeRecordByDevice`, {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 根据设备类型编码（环境、基坑、倾角、拉力）查询当天预警信息
|
||||
export const getDevTypeCodeDetails = (data) => {
|
||||
return request.get(`/base/screen/homeTwo/getDevTypeCodeDetails`, {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 根据设备id查询最新室外环境监测信息
|
||||
export const queryEnvironmentInfoByIdApi = (data) => {
|
||||
return request.get(`/base/screen/info/getDevAttributeLatestInfoById`, {
|
||||
|
|
|
|||
|
|
@ -199,3 +199,9 @@ ul {
|
|||
text-align: right;
|
||||
border-top: 1px solid #393737;
|
||||
}
|
||||
|
||||
.maxsize {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<el-dialog
|
||||
title=""
|
||||
:visible.sync="ifOpen"
|
||||
width="70%"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@open="openChart"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="../../assets/img/signalPrefix.png" alt="" />
|
||||
<span
|
||||
style="
|
||||
padding: 0 15px 0 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
"
|
||||
>组塔监测</span
|
||||
>
|
||||
<img src="../../assets/img/lineSuffix.png" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<div class="cont-lef">
|
||||
<div class="sel-top">{{proData.proName}}</div>
|
||||
<div
|
||||
:class="['single-sel', { isActive: currentSelIndex === item.value }]"
|
||||
v-for="item in deviceRange"
|
||||
:key="item.value"
|
||||
@click="handleEnvir(item)"
|
||||
>{{ item.label }}</div
|
||||
>
|
||||
</div>
|
||||
<div class="cont-rig">
|
||||
<!-- <div class="rig-top">
|
||||
<el-date-picker
|
||||
v-model="dateVal"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="queryDate"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div> -->
|
||||
<div class="rig-charts">
|
||||
<div class="charts-up">
|
||||
<div id="angleWetChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
queryDeviceByProApi,
|
||||
queryEnvironmentInfoByIdApi,
|
||||
getTowerDevAttributeRecordByDevice,
|
||||
queryWarnInfoByIdApi
|
||||
} from '@/api/substation/substation'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'angleDialog',
|
||||
components: {},
|
||||
props: {
|
||||
ifOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
proData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
deviceVal: undefined,
|
||||
deviceRange: [],
|
||||
dateVal: '',
|
||||
selList: [
|
||||
{ id: 1, name: '一号环境' },
|
||||
{ id: 2, name: '二号环境' },
|
||||
{ id: 3, name: '三号环境' },
|
||||
],
|
||||
currentSelIndex: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//获取设备列表
|
||||
async getDeviceData(proId) {
|
||||
let res = await queryDeviceByProApi({
|
||||
proId,
|
||||
devType: 117
|
||||
})
|
||||
if(res.data.data.length !== 0) {
|
||||
this.deviceRange = res.data.data.map(item => {
|
||||
return {
|
||||
label: item.devName,
|
||||
value: item.devId
|
||||
}
|
||||
})
|
||||
this.deviceVal = this.proData.id;
|
||||
this.currentSelIndex = this.proData.id;
|
||||
await this.getChartsData(this.deviceVal)
|
||||
}
|
||||
},
|
||||
//获取echart数据
|
||||
async getChartsData(devId) {
|
||||
this.desHander()
|
||||
let res = await getTowerDevAttributeRecordByDevice({devId})
|
||||
this.generateCharts(res.data.slice(0,9))
|
||||
},
|
||||
//打开时触发
|
||||
openChart() {
|
||||
this.$nextTick(() => {
|
||||
this.getDeviceData(this.proData.proId)
|
||||
})
|
||||
},
|
||||
// 点击设备
|
||||
handleEnvir(val) {
|
||||
this.currentSelIndex = val.value
|
||||
// this.generateCharts()
|
||||
this.getChartsData(val.value)
|
||||
},
|
||||
queryDate() {
|
||||
console.log(this.dateVal)
|
||||
},
|
||||
//渲染echart
|
||||
generateCharts(list) {
|
||||
console.log(list)
|
||||
let tempArr = list.map(item => {
|
||||
return Number(item.jcValue)
|
||||
})
|
||||
let tempXList = list.map(item => {
|
||||
return item.xtime
|
||||
})
|
||||
|
||||
// 倾角图表
|
||||
let tempOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
valueFormatter:(value) => {
|
||||
return value + '°'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: tempXList,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '°'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '倾角',
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
data: tempArr,
|
||||
itemStyle:{
|
||||
// 设置柱状渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#007FFF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#93D4EA'
|
||||
}
|
||||
]),
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let tempChart = echarts.init(document.querySelector('#angleWetChart'))
|
||||
tempChart.setOption(tempOption)
|
||||
},
|
||||
// 销毁实例
|
||||
desHander(){
|
||||
let myChart = echarts.init(document.querySelector('#angleWetChart'));
|
||||
myChart.dispose();
|
||||
},
|
||||
closeDialog() {
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 600px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cont-lef {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
margin-right: 15px;
|
||||
border: 1px solid #c6d8fa;
|
||||
border-radius: 10px;
|
||||
|
||||
.sel-top {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
background-color: #d3e4fa;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.single-sel {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #ced1d5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.isActive{
|
||||
|
||||
background-color: #d3e4fa;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cont-rig {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rig-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rig-charts {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.charts-up,
|
||||
.charts-down {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #98bbda;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -110,19 +110,20 @@ export default {
|
|||
devType: 119
|
||||
})
|
||||
if(res.data.data.length !== 0) {
|
||||
this.pitVal = res.data.data[0].devId
|
||||
this.currentSelIndex = res.data.data[0].devId;
|
||||
this.pitRange = res.data.data.map(item => {
|
||||
return {
|
||||
label: item.devName,
|
||||
value: item.devId
|
||||
}
|
||||
})
|
||||
this.pitVal = this.proData.id;
|
||||
this.currentSelIndex = this.proData.id;
|
||||
await this.getPitData(this.pitVal)
|
||||
}
|
||||
},
|
||||
//获取ercharts数据
|
||||
async getPitData(devId) {
|
||||
this.desHander()
|
||||
let res = await queryPitDataApi({
|
||||
devId
|
||||
})
|
||||
|
|
@ -396,6 +397,16 @@ export default {
|
|||
let H2SChart = echarts.init(document.querySelector('#H2SChart'))
|
||||
H2SChart.setOption(H2SOption)
|
||||
},
|
||||
desHander(){
|
||||
let myChart1 = echarts.init(document.querySelector('#O2Chart'));
|
||||
myChart1.dispose();
|
||||
let myChart2 = echarts.init(document.querySelector('#fireChart'));
|
||||
myChart2.dispose();
|
||||
let myChart3 = echarts.init(document.querySelector('#COChart'));
|
||||
myChart3.dispose();
|
||||
let myChart4 = echarts.init(document.querySelector('#H2SChart'));
|
||||
myChart4.dispose();
|
||||
},
|
||||
getFormattedDate() {
|
||||
const today = new Date() // 获取今天的日期
|
||||
const year = today.getFullYear() // 获取年份
|
||||
|
|
|
|||
|
|
@ -114,19 +114,20 @@ export default {
|
|||
devType: 116
|
||||
})
|
||||
if(res.data.data.length !== 0) {
|
||||
this.deviceVal = res.data.data[0].devId;
|
||||
this.currentSelIndex = res.data.data[0].devId;
|
||||
this.deviceRange = res.data.data.map(item => {
|
||||
return {
|
||||
label: item.devName,
|
||||
value: item.devId
|
||||
}
|
||||
})
|
||||
this.deviceVal = this.proData.id;
|
||||
this.currentSelIndex = this.proData.id;
|
||||
await this.getChartsData(this.deviceVal)
|
||||
}
|
||||
},
|
||||
//获取echart数据
|
||||
async getChartsData(devId) {
|
||||
this.desHander()
|
||||
let res = await queryChartsInfoByIdApi({devId})
|
||||
this.generateCharts(res.data)
|
||||
},
|
||||
|
|
@ -403,6 +404,17 @@ export default {
|
|||
let airChart = echarts.init(document.querySelector('#airChart'))
|
||||
airChart.setOption(airOption)
|
||||
},
|
||||
desHander(){
|
||||
console.log(111)
|
||||
let myChart1 = echarts.init(document.querySelector('#tempWetChart'));
|
||||
myChart1.dispose();
|
||||
let myChart2 = echarts.init(document.querySelector('#windChart'));
|
||||
myChart2.dispose();
|
||||
let myChart3 = echarts.init(document.querySelector('#loudChart'));
|
||||
myChart3.dispose();
|
||||
let myChart4 = echarts.init(document.querySelector('#airChart'));
|
||||
myChart4.dispose();
|
||||
},
|
||||
closeDialog() {
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,306 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<el-dialog
|
||||
title=""
|
||||
:visible.sync="ifOpen"
|
||||
width="70%"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@open="openChart"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="../../assets/img/signalPrefix.png" alt="" />
|
||||
<span
|
||||
style="
|
||||
padding: 0 15px 0 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
"
|
||||
>组塔监测</span
|
||||
>
|
||||
<img src="../../assets/img/lineSuffix.png" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<div class="cont-lef">
|
||||
<div class="sel-top">{{proData.proName}}</div>
|
||||
<div
|
||||
:class="['single-sel', { isActive: currentSelIndex === item.value }]"
|
||||
v-for="item in deviceRange"
|
||||
:key="item.value"
|
||||
@click="handleEnvir(item)"
|
||||
>{{ item.label }}</div
|
||||
>
|
||||
</div>
|
||||
<div class="cont-rig">
|
||||
<!-- <div class="rig-top">
|
||||
<el-date-picker
|
||||
v-model="dateVal"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="queryDate"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div> -->
|
||||
<div class="rig-charts">
|
||||
<div class="charts-up">
|
||||
<div id="pullWetChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
queryDeviceByProApi,
|
||||
queryEnvironmentInfoByIdApi,
|
||||
getTowerDevAttributeRecordByDevice,
|
||||
queryWarnInfoByIdApi
|
||||
} from '@/api/substation/substation'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'pullDialog',
|
||||
components: {},
|
||||
props: {
|
||||
ifOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
proData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
deviceVal: undefined,
|
||||
deviceRange: [],
|
||||
dateVal: '',
|
||||
selList: [
|
||||
{ id: 1, name: '一号环境' },
|
||||
{ id: 2, name: '二号环境' },
|
||||
{ id: 3, name: '三号环境' },
|
||||
],
|
||||
currentSelIndex: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//获取设备列表
|
||||
async getDeviceData(proId) {
|
||||
let res = await queryDeviceByProApi({
|
||||
proId,
|
||||
devType: 118
|
||||
})
|
||||
if(res.data.data.length !== 0) {
|
||||
this.deviceVal = res.data.data[0].devId;
|
||||
this.currentSelIndex = res.data.data[0].devId;
|
||||
this.deviceRange = res.data.data.map(item => {
|
||||
return {
|
||||
label: item.devName,
|
||||
value: item.devId
|
||||
}
|
||||
})
|
||||
this.deviceVal = this.proData.id;
|
||||
this.currentSelIndex = this.proData.id;
|
||||
await this.getChartsData(this.deviceVal)
|
||||
}
|
||||
},
|
||||
//获取echart数据
|
||||
async getChartsData(devId) {
|
||||
this.desHander()
|
||||
let res = await getTowerDevAttributeRecordByDevice({devId})
|
||||
// console.log(res)
|
||||
|
||||
this.generateCharts(res.data.slice(0,9))
|
||||
},
|
||||
//打开时触发
|
||||
openChart() {
|
||||
this.$nextTick(() => {
|
||||
this.getDeviceData(this.proData.proId)
|
||||
})
|
||||
},
|
||||
// 点击设备
|
||||
handleEnvir(val) {
|
||||
this.currentSelIndex = val.value
|
||||
// this.generateCharts()
|
||||
this.getChartsData(val.value)
|
||||
},
|
||||
queryDate() {
|
||||
console.log(this.dateVal)
|
||||
},
|
||||
//渲染echart
|
||||
generateCharts(list) {
|
||||
console.log(list)
|
||||
let tempArr = list.map(item => {
|
||||
return Number(item.jcValue)
|
||||
})
|
||||
let tempXList = list.map(item => {
|
||||
return item.xtime
|
||||
})
|
||||
// 拉力图表
|
||||
let tempOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
valueFormatter:(value) => {
|
||||
return value + 'N'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: tempXList,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '°'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '拉力',
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
data: tempArr,
|
||||
itemStyle:{
|
||||
// 设置柱状渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#007FFF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#93D4EA'
|
||||
}
|
||||
]),
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let tempChart = echarts.init(document.querySelector('#pullWetChart'))
|
||||
tempChart.dispose()
|
||||
tempChart.setOption(tempOption)
|
||||
|
||||
},
|
||||
// 销毁实例
|
||||
desHander(){
|
||||
let myChart = echarts.init(document.querySelector('#pullWetChart'));
|
||||
myChart.dispose();
|
||||
},
|
||||
closeDialog() {
|
||||
echarts.init(document.getElementById('#pullWetChart')).dispose()
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 600px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cont-lef {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
margin-right: 15px;
|
||||
border: 1px solid #c6d8fa;
|
||||
border-radius: 10px;
|
||||
|
||||
.sel-top {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
background-color: #d3e4fa;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.single-sel {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 40px;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #ced1d5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.isActive{
|
||||
|
||||
background-color: #d3e4fa;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cont-rig {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rig-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rig-charts {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.charts-up,
|
||||
.charts-down {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #98bbda;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -167,6 +167,19 @@
|
|||
>
|
||||
</DipDialog>
|
||||
|
||||
<PullDialog
|
||||
:if-open="pullOpen"
|
||||
@closeDialog="pullOpen = false"
|
||||
:proData="pullData"
|
||||
>
|
||||
</PullDialog>
|
||||
|
||||
<AngleDialog
|
||||
:if-open="angleOpen"
|
||||
@closeDialog="angleOpen = false"
|
||||
:proData="angleData"
|
||||
>
|
||||
</AngleDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -181,12 +194,16 @@ import {
|
|||
} from '@/api/tableApis'
|
||||
import EnvirDialog from '@/components/dialog/envirDialog.vue'
|
||||
import DipDialog from '@/components/dialog/dipDialog.vue'
|
||||
import PullDialog from '@/components/dialog/pullDialog.vue'
|
||||
import AngleDialog from '@/components/dialog/angleDialog.vue'
|
||||
export default {
|
||||
name: 'commonDialog',
|
||||
components: {
|
||||
Pagination,
|
||||
EnvirDialog,
|
||||
DipDialog
|
||||
DipDialog,
|
||||
PullDialog,
|
||||
AngleDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -207,6 +224,10 @@ export default {
|
|||
envirData:{},
|
||||
dipOpen: false,
|
||||
dipData:{},
|
||||
angleOpen: false,
|
||||
angleData:{},
|
||||
pullOpen: false,
|
||||
pullData:{},
|
||||
proTypeRange: [
|
||||
{ label: '变电工程', value: '1' },
|
||||
{ label: '线路工程', value: '2' },
|
||||
|
|
@ -467,6 +488,12 @@ export default {
|
|||
} else if(v.devTypeName === '基坑监测类') {
|
||||
this.dipOpen = true;
|
||||
this.dipData=v;
|
||||
} else if(v.devTypeName === '组塔倾角监测类') {
|
||||
this.angleOpen = true;
|
||||
this.angleData=v;
|
||||
} else if(v.devTypeName === '组塔拉力监测类') {
|
||||
this.pullOpen = true;
|
||||
this.pullData=v;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ export default {
|
|||
this.$emit('openDialog', { order: v })
|
||||
},
|
||||
async getProjData() {
|
||||
|
||||
let res = await queryProjInfoApi()
|
||||
this.projData = res.data
|
||||
this.getProjBar()
|
||||
|
|
|
|||
|
|
@ -76,7 +76,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
async getRiskData() {
|
||||
let res = await queryRiskInfoApi()
|
||||
let param = {
|
||||
startTime:this.timeFormat(),
|
||||
endTime:this.timeFormat(),
|
||||
}
|
||||
let res = await queryRiskInfoApi(param)
|
||||
this.tableList = res.data
|
||||
},
|
||||
toggleDialog(v) {
|
||||
|
|
@ -93,6 +97,29 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
timeFormat() {
|
||||
let date = new Date();
|
||||
// 若传入时间为假值，则取当前时间
|
||||
let formatStr = 'yyyy-mm-dd';
|
||||
const timeSource = {
|
||||
'y': date.getFullYear().toString(), // 年
|
||||
'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
|
||||
'd': date.getDate().toString().padStart(2, '0'), // 日
|
||||
'h': date.getHours().toString().padStart(2, '0'), // 时
|
||||
'M': date.getMinutes().toString().padStart(2, '0'), // 分
|
||||
's': date.getSeconds().toString().padStart(2, '0') // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
}
|
||||
for (const key in timeSource) {
|
||||
const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
|
||||
if (ret) {
|
||||
// 年可能只需展示两位
|
||||
const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
|
||||
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
|
||||
}
|
||||
}
|
||||
return formatStr
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -112,22 +112,25 @@
|
|||
:row-style="rowStyle"
|
||||
>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
prop="devName"
|
||||
label="设备名称"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
prop="warnTime"
|
||||
label="时间"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
prop="warnType"
|
||||
label="预警内容"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.warnType }}异常
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
|
@ -141,7 +144,8 @@ import {
|
|||
queryDeviceByProApi,
|
||||
queryEnvironmentInfoByIdApi,
|
||||
queryChartsInfoByIdApi,
|
||||
queryWarnInfoByIdApi
|
||||
queryWarnInfoByIdApi,
|
||||
getDevTypeCodeDetails
|
||||
} from '@/api/substation/substation'
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -194,10 +198,12 @@ export default {
|
|||
mounted() {
|
||||
console.log(this.sendMsg)
|
||||
this.getDeviceData(this.sendMsg.projectId)
|
||||
this.getDevTypeCodeDetails(this.sendMsg.projectId)
|
||||
},
|
||||
methods: {
|
||||
async getDeviceData(proId) {
|
||||
let res = await queryDeviceByProApi({
|
||||
powerId:this.sendMsg.gtId,
|
||||
proId,
|
||||
devType: 116
|
||||
})
|
||||
|
|
@ -213,6 +219,15 @@ export default {
|
|||
await this.getChartsData(this.deviceVal)
|
||||
}
|
||||
},
|
||||
//预警信息
|
||||
async getDevTypeCodeDetails(proId) {
|
||||
let param= {
|
||||
proId:proId,
|
||||
devTypeCode: 116
|
||||
}
|
||||
let res = await getDevTypeCodeDetails(param)
|
||||
this.tableList=res.data
|
||||
},
|
||||
async getEnvironmentData(devId) {
|
||||
let res = await queryEnvironmentInfoByIdApi({
|
||||
devId
|
||||
|
|
|
|||
|
|
@ -123,10 +123,10 @@
|
|||
<div class="rig-top">
|
||||
<div class="inner-tit">
|
||||
<img src="../../assets/img/lef-badge.png" alt="">
|
||||
当日监测记录
|
||||
预警信息
|
||||
</div>
|
||||
<el-table
|
||||
:data="todayRecordList"
|
||||
:data="tableList"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
:row-style="rowStyle"
|
||||
|
|
@ -138,16 +138,19 @@
|
|||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jcTime"
|
||||
prop="warnTime"
|
||||
label="时间"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jcValue"
|
||||
prop="warnType"
|
||||
label="预警内容"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.warnType }}异常
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
|
@ -177,7 +180,8 @@ import {
|
|||
queryPitDataApi,
|
||||
queryLimitSpaceApi,
|
||||
queryNewLimitSpaceApi,
|
||||
queryEnvironmentInfoByIdApi
|
||||
queryEnvironmentInfoByIdApi,
|
||||
getDevTypeCodeDetails
|
||||
} from '@/api/substation/substation'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
|
|
@ -201,7 +205,8 @@ export default {
|
|||
pitList: [
|
||||
|
||||
],
|
||||
todayRecordList: []
|
||||
todayRecordList: [],
|
||||
tableList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -210,13 +215,16 @@ export default {
|
|||
|
||||
mounted() {
|
||||
console.log(this.sendMsg)
|
||||
this.getLimitData(this.sendMsg.projectId)
|
||||
// this.getLimitData(this.sendMsg.projectId)
|
||||
this.getDeviceData(this.sendMsg.projectId)
|
||||
//预警信息
|
||||
this.getDevTypeCodeDetails(this.sendMsg.projectId)
|
||||
// this.generateCharts()
|
||||
},
|
||||
methods: {
|
||||
async getDeviceData(proId) {
|
||||
let res = await queryDeviceByProApi({
|
||||
powerId:this.sendMsg.gtId,
|
||||
proId,
|
||||
devType: 119
|
||||
})
|
||||
|
|
@ -245,6 +253,15 @@ export default {
|
|||
})
|
||||
this.generateCharts(res.data)
|
||||
},
|
||||
//预警信息
|
||||
async getDevTypeCodeDetails(proId) {
|
||||
let param= {
|
||||
proId:proId,
|
||||
devTypeCode: 119
|
||||
}
|
||||
let res = await getDevTypeCodeDetails(param)
|
||||
this.tableList=res.data
|
||||
},
|
||||
async getLimitData(proId) {
|
||||
let res = await queryNewLimitSpaceApi({
|
||||
proId
|
||||
|
|
|
|||
|
|
@ -273,11 +273,13 @@ export default {
|
|||
methods: {
|
||||
async getDeviceData(proId) {
|
||||
let angleRes = await queryDeviceByProApi({
|
||||
powerId:this.sendMsg.gtId,
|
||||
proId,
|
||||
devType: 117
|
||||
})
|
||||
this.towerAngleList = angleRes.data.data
|
||||
let pullRes = await queryDeviceByProApi({
|
||||
powerId:this.sendMsg.gtId,
|
||||
proId,
|
||||
devType: 118
|
||||
})
|
||||
|
|
|
|||
|
|
@ -235,8 +235,14 @@ export default {
|
|||
proj.proPowerList.forEach(tower => {
|
||||
this.geoData.push({
|
||||
name: tower.gtName,
|
||||
projName: tower.gtName,
|
||||
gtId:tower.id,
|
||||
projName: proj.projectName+'-'+tower.gtName,
|
||||
projectId: proj.projectId,
|
||||
// province: proj.areaName,
|
||||
devTypeNum: tower.devTypeNum,
|
||||
devNum: tower.devNum,
|
||||
successNum: tower.successNum,
|
||||
errorNum: tower.errorNum,
|
||||
itemStyle: { normal: { areaColor: '#7DDEFF' } },
|
||||
value: [
|
||||
Number(tower.lon),
|
||||
|
|
|
|||
Loading…
Reference in New Issue