From 6e6127068f03a7fe655f1fd504c488f20683039f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 15 七月 2025 18:28:02 +0800
Subject: [PATCH] fix:数据
---
src/views/screen/data.vue | 306 +++++++++++++++++++++++++++++++++++++-------------
1 files changed, 225 insertions(+), 81 deletions(-)
diff --git a/src/views/screen/data.vue b/src/views/screen/data.vue
index 8325b20..f3039f2 100644
--- a/src/views/screen/data.vue
+++ b/src/views/screen/data.vue
@@ -7,12 +7,13 @@
<div class="title-left">报警次数</div>
<div class="title-right">
<el-select
- v-model="value"
+ v-model="typeValue.recordType"
size="small"
style="width: 120px"
+ @change="getStaticWarn"
>
<el-option
- v-for="item in options"
+ v-for="item in timeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -22,7 +23,7 @@
</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="warnStaticData"
:header-cell-style="headerStyle"
:cell-style="rowStyle"
style="height: 100%;"
@@ -38,13 +39,13 @@
<div class="item-t">街道统计</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="streetTableData"
: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="pointName" label="" />
+ <el-table-column prop="count" label="气体处置次数/报警次数汇总" align="center" />
</el-table>
</div>
</div>
@@ -56,17 +57,17 @@
<div class="item-t">报警记录</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="recordData"
:header-cell-style="headerStyle"
:cell-style="rowStyle"
style="height: 100%;"
>
- <el-table-column prop="type" label="设备编号" />
+ <el-table-column prop="facilityCode" label="设备编号" />
<el-table-column prop="address" label="安装地址" />
- <el-table-column prop="device" label="设备类型" />
- <el-table-column prop="device" label="报警类型" />
- <el-table-column prop="device" label="报警次数" />
- <el-table-column prop="time" 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>
@@ -75,27 +76,42 @@
<div class="title-left">气体浓度监测曲线</div>
<div class="title-right">
<el-select
- v-model="value"
+ v-model="typeValue.dateType"
size="small"
style="width: 120px"
+ @change="getLine"
>
<el-option
- v-for="item in options"
+ v-for="item in timeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
- <el-select
- v-model="value"
+ <el-select
+ v-model="typeValue.pointId"
size="small"
style="width: 120px"
+ @change="getLine"
>
<el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ 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: 120px"
+ @change="getLine"
+ >
+ <el-option
+ v-for="item in commonList"
+ :key="item.mark"
+ :label="item.name"
+ :value="item.mark"
/>
</el-select>
</div>
@@ -112,12 +128,12 @@
<div class="item-t">短信报警</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="noteTableData"
:header-cell-style="headerStyle"
:cell-style="rowStyle"
style="height: 100%;"
>
- <el-table-column prop="type" label="设备编号" />
+ <el-table-column prop="pointId" label="设备编号" />
<el-table-column prop="address" label="安装地址" />
<el-table-column prop="device" label="设备类型" />
<el-table-column prop="device" label="报警类型" />
@@ -128,12 +144,12 @@
<div class="item-t">邮箱报警</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="mailTableData"
:header-cell-style="headerStyle"
:cell-style="rowStyle"
style="height: 100%;"
>
- <el-table-column prop="type" label="设备编号" />
+ <el-table-column prop="pointId" label="设备编号" />
<el-table-column prop="address" label="安装地址" />
<el-table-column prop="device" label="设备类型" />
<el-table-column prop="device" label="报警类型" />
@@ -146,25 +162,37 @@
</template>
<script setup>
- import {ref, onMounted} from 'vue'
+ 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 value = ref('')
- const options = [
- {
- value: 1,
- label: 'Option1',
- },
- {
- value: 2,
- label: 'Option2',
- }
+ const timeOptions = [
+ {value: 1, label: '日',},
+ {value: 2, label: '周',},
+ {value: 3, label: '月',},
+ {value: 4, label: '年',}
]
- const timeData = ref([
- { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
- { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
- { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
- ])
+ 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'
@@ -173,52 +201,170 @@
"background-color": '#081C3F !important'
}
- const gasRef = ref()
- let gasCharts = null
-
const setGasCharts = () => {
- if(gasRef.value){
- gasCharts = echarts.init(gasRef.value)
-
- const option = {
- tooltip: {
- trigger: 'item'
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- 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)'}
- ],
- }
+ 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)
+ 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(() => {
- setGasCharts()
+ init()
})
</script>
@@ -230,6 +376,7 @@
justify-content: space-between;
:deep(.el-table){
--el-table-border-color: #000;
+ --el-table-bg-color: transparent;
th{
font-size: 12px;
color: #fff;
@@ -241,9 +388,6 @@
.el-table__cell{
border: none;
}
- }
- :deep(.el-scrollbar__wrap--hidden-default){
- background-color: #000 !important;
}
&-l{
width: 25%;
--
Gitblit v1.9.3