<template>
|
<div class="data">
|
<div class="data-l">
|
<div class="left">
|
<div class="left-item">
|
<div class="item-t">
|
<div class="title-left">报警次数</div>
|
<div class="title-right">
|
<el-select
|
v-model="typeValue.recordType"
|
size="small"
|
style="width: 8rem"
|
@change="getStaticWarn"
|
>
|
<el-option
|
v-for="item in timeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="item-c">
|
<el-table
|
:data="warnStaticData"
|
:header-cell-style="headerStyle"
|
:cell-style="rowStyle"
|
style="height: 100%;"
|
>
|
<el-table-column prop="type" label="" />
|
<el-table-column prop="device" label="浓度最大值" />
|
<el-table-column prop="address" label="浓度最小值" />
|
<el-table-column prop="time" label="报警次数" />
|
</el-table>
|
</div>
|
</div>
|
<div class="left-item">
|
<div class="item-t">街道统计</div>
|
<div class="item-c">
|
<el-table
|
:data="streetTableData"
|
:header-cell-style="headerStyle"
|
:cell-style="rowStyle"
|
style="height: 100%;"
|
>
|
<el-table-column prop="pointName" label="" />
|
<el-table-column prop="count" label="气体处置次数/报警次数汇总" align="center" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="data-c">
|
<div class="center">
|
<div class="center-item">
|
<div class="item-t">报警记录</div>
|
<div class="item-c">
|
<el-table
|
:data="recordData"
|
:header-cell-style="headerStyle"
|
:cell-style="rowStyle"
|
style="height: 100%;"
|
>
|
<el-table-column prop="facilityCode" label="设备编号" />
|
<el-table-column prop="address" label="安装地址" />
|
<el-table-column prop="facilityName" label="设备名称" />
|
<el-table-column prop="alarmTypeView" label="报警类型" />
|
<el-table-column prop="alarmCount" label="报警次数" />
|
<el-table-column prop="latestAlarmTime" label="最新报警时间" />
|
</el-table>
|
</div>
|
</div>
|
<div class="center-item">
|
<div class="item-t">
|
<div class="title-left">气体浓度监测曲线</div>
|
<div class="title-right">
|
<el-select
|
v-model="typeValue.dateType"
|
size="small"
|
style="width: 8rem"
|
@change="getLine"
|
>
|
<el-option
|
v-for="item in timeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-select
|
v-model="typeValue.pointId"
|
size="small"
|
style="width: 8rem"
|
@change="getLine"
|
>
|
<el-option
|
v-for="item in pointList"
|
:key="item.id"
|
:label="item.pointName"
|
:value="item.id"
|
/>
|
</el-select>
|
<el-select
|
v-model="typeValue.columnsCode"
|
size="small"
|
style="width: 8rem"
|
@change="getLine"
|
>
|
<el-option
|
v-for="item in commonList"
|
:key="item.mark"
|
:label="item.name"
|
:value="item.mark"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="item-c">
|
<div class="gasCharts" ref="gasRef"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="data-r">
|
<div class="right">
|
<div class="right-item">
|
<div class="item-t">短信报警</div>
|
<div class="item-c">
|
<el-table
|
:data="noteTableData"
|
:header-cell-style="headerStyle"
|
:cell-style="rowStyle"
|
style="height: 100%;"
|
>
|
<el-table-column prop="pointId" label="设备编号" />
|
<el-table-column prop="address" label="安装地址" />
|
<el-table-column prop="device" label="设备类型" />
|
<el-table-column prop="device" label="报警类型" />
|
</el-table>
|
</div>
|
</div>
|
<div class="right-item">
|
<div class="item-t">邮箱报警</div>
|
<div class="item-c">
|
<el-table
|
:data="mailTableData"
|
:header-cell-style="headerStyle"
|
:cell-style="rowStyle"
|
style="height: 100%;"
|
>
|
<el-table-column prop="pointId" label="设备编号" />
|
<el-table-column prop="address" label="安装地址" />
|
<el-table-column prop="device" label="设备类型" />
|
<el-table-column prop="device" label="报警类型" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, onMounted, reactive} from 'vue'
|
import * as echarts from 'echarts';
|
import { getWarnMessage, getWarnStreet, getWarnStatic, getWarnRecord, getRecordLine } from '@/api/screen/data'
|
import pointApi from "@/api/facility/point";
|
import commonParameters from "@/api/configuration/commonParameters/index.js";
|
|
const timeOptions = [
|
{value: 1, label: '日',},
|
{value: 2, label: '周',},
|
{value: 3, label: '月',},
|
{value: 4, label: '年',}
|
]
|
const pointList = ref([])
|
const commonList = ref([])
|
|
const typeValue = reactive({
|
recordType: 1,
|
dateType: 1,
|
pointId: '',
|
columnsCode: ''
|
})
|
|
const warnStaticData = ref([])
|
const streetTableData = ref([])
|
const recordData = ref([])
|
const recordLineData = ref([])
|
const mailTableData = ref([])
|
const noteTableData = ref([])
|
|
const gasRef = ref()
|
let gasCharts = null
|
|
const headerStyle = {
|
"background-color": '#041025 !important'
|
}
|
const rowStyle = {
|
"background-color": '#081C3F !important'
|
}
|
|
const setGasCharts = () => {
|
const option = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: ['最大值', '平均值', '最小值'],
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
name: '最大值',
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
areaStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [
|
{offset: 0, color: 'rgba(118,196,235,1)' },
|
{offset: 1, color: 'rgba(118,196,235,0)'}
|
],
|
}
|
}
|
},
|
{
|
name: '平均值',
|
data: [186, 555, 321, 586, 1111, 666, 777],
|
type: 'line',
|
areaStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [
|
{offset: 0, color: 'rgba(118,196,235,1)' },
|
{offset: 1, color: 'rgba(118,196,235,0)'}
|
],
|
}
|
}
|
},
|
{
|
name: '最小值',
|
data: [86, 222, 186, 496, 888, 367, 436],
|
type: 'line',
|
areaStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [
|
{offset: 0, color: 'rgba(118,196,235,1)' },
|
{offset: 1, color: 'rgba(118,196,235,0)'}
|
],
|
}
|
}
|
},
|
]
|
};
|
|
gasCharts.setOption(option)
|
}
|
|
// 获取监控点列表
|
const getPointData = () => {
|
const searchData = {
|
limit: 100,
|
page: 1
|
}
|
return pointApi().search(searchData).then((res) => {
|
pointList.value = res.data.list
|
typeValue.pointId = res.data.list[0].id
|
})
|
}
|
|
// 获取公共参数
|
const getConfigData = () => {
|
const searchData = {
|
limit: 100,
|
page: 1
|
}
|
return commonParameters().search(searchData).then((res) =>{
|
commonList.value = res.data.list
|
typeValue.columnsCode = res.data.list[0].mark
|
})
|
}
|
|
|
// 报警数据, type 1邮件， 2短信
|
const getWarnData = () => {
|
const mailSearch = { limit: 100, page: 1, type: 1 }
|
const noteSearch = { limit: 100, page: 1, type: 2 }
|
Promise.all([getWarnMessage(mailSearch), getWarnMessage(noteSearch)]).then(res => {
|
mailTableData.value = res[0].data.list
|
noteTableData.value = res[1].data.list
|
})
|
}
|
|
// 街道报警
|
const getWarenbyStreet = () => {
|
getWarnStreet().then(res => {
|
streetTableData.value = res.data
|
})
|
}
|
|
// 报警次数统计
|
const getStaticWarn = () => {
|
getWarnStatic({ dateType: typeValue.recordType }).then(res => {
|
warnStaticData.value = res.data
|
})
|
}
|
|
// 报警记录
|
const getRedord = () => {
|
getWarnRecord().then(res => {
|
recordData.value = res.data
|
})
|
}
|
|
// 报警记录曲线
|
const getLine = () => {
|
const searchData = {
|
pointId: typeValue.pointId,
|
dateType: typeValue.dateType,
|
columnsCode: typeValue.columnsCode,
|
}
|
getRecordLine(searchData).then(res => {
|
recordLineData.value = res.data
|
setGasCharts()
|
})
|
}
|
|
const init = async () => {
|
if(gasRef.value){
|
gasCharts = echarts.init(gasRef.value)
|
}
|
await getPointData()
|
await getConfigData()
|
getWarnData()
|
getWarenbyStreet()
|
getStaticWarn()
|
getRedord()
|
getLine()
|
}
|
|
onMounted(() => {
|
init()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.data{
|
height: 100%;
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
:deep(.el-table){
|
--el-table-border-color: #000;
|
--el-table-bg-color: transparent;
|
th{
|
font-size: 12px;
|
color: #fff;
|
}
|
tr{
|
font-size: 12px;
|
color: #fff;
|
}
|
.el-table__cell{
|
border: none;
|
}
|
}
|
&-l{
|
width: 25%;
|
height: 100%;
|
.left{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.left-item{
|
width: 100%;
|
height: 49%;
|
background-image: url('@/assets/images/screen/ct-default.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
.item-t{
|
width: 100%;
|
height: 3rem;
|
line-height: 3rem;
|
padding: 0 5rem 0 3rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.title-right{
|
display: flex;
|
gap: 1rem;
|
}
|
}
|
.item-c{
|
height: calc(100% - 3rem);
|
padding: 0.5rem;
|
}
|
}
|
}
|
}
|
&-c{
|
width: 49%;
|
height: 100%;
|
.center{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.center-item{
|
height: 49%;
|
background-image: url('@/assets/images/screen/ct-large.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
.item-t{
|
height: 3rem;
|
line-height: 3rem;
|
padding: 0 6rem 0 4.5rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.title-right{
|
display: flex;
|
gap: 1rem;
|
}
|
}
|
.item-c{
|
height: calc(100% - 3rem);
|
padding: 0.5rem;
|
.gasCharts{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
&-r{
|
width: 25%;
|
height: 100%;
|
.right{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.right-item{
|
height: 49%;
|
background-image: url('@/assets/images/screen/ct-default.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
.item-t{
|
height: 3rem;
|
line-height: 3rem;
|
padding-left: 3rem;
|
}
|
.item-c{
|
height: calc(100% - 3rem);
|
padding: 0.5rem;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
