From 7da0c2d5b4656f808ba71b9e214256c95379faea Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 16 七月 2025 18:04:59 +0800
Subject: [PATCH] fix:修改数据界面
---
src/views/screen/data.vue | 378 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 368 insertions(+), 10 deletions(-)
diff --git a/src/views/screen/data.vue b/src/views/screen/data.vue
index 9bb46ae..748921a 100644
--- a/src/views/screen/data.vue
+++ b/src/views/screen/data.vue
@@ -3,12 +3,51 @@
<div class="data-l">
<div class="left">
<div class="left-item">
- <div class="item-t">报警次数</div>
- <div class="item-c"></div>
+ <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"></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>
@@ -16,11 +55,70 @@
<div class="center">
<div class="center-item">
<div class="item-t">报警记录</div>
- <div class="item-c"></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>
- <div class="item-c"></div>
+ <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>
@@ -28,11 +126,35 @@
<div class="right">
<div class="right-item">
<div class="item-t">短信报警</div>
- <div class="item-c"></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"></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>
@@ -40,7 +162,210 @@
</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">
@@ -49,6 +374,21 @@
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%;
@@ -67,7 +407,14 @@
width: 100%;
height: 3rem;
line-height: 3rem;
- padding-left: 3.5rem;
+ 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);
@@ -92,11 +439,22 @@
.item-t{
height: 3rem;
line-height: 3rem;
- padding-left: 4.5rem;
+ 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%;
+ }
}
}
}
--
Gitblit v1.9.3