From c45cbdd1fb5e1c491a58f24be403b97999c1a9ec Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期四, 17 七月 2025 17:31:59 +0800
Subject: [PATCH] fix:shuju
---
src/views/screen/device.vue | 323 +++++++++++++++++++++++++++++-----------------
src/api/screen/device.js | 62 ++++++++
src/views/screen/components/dataItem.vue | 34 +++-
3 files changed, 292 insertions(+), 127 deletions(-)
diff --git a/src/api/screen/device.js b/src/api/screen/device.js
new file mode 100644
index 0000000..80c909d
--- /dev/null
+++ b/src/api/screen/device.js
@@ -0,0 +1,62 @@
+import { publicRequest } from '@/utils/request.js'
+
+// 工单
+export const getOrder = () => {
+ return publicRequest({
+ url: '/facilityData/getUserWorkList',
+ method: 'POST'
+ })
+}
+
+// 风机管理
+export const getFanFacity = (params) => {
+ return publicRequest({
+ url: '/facilityData/getFacilityFan',
+ method: 'POST',
+ params
+ })
+}
+
+// 实时数据
+export const getFacityData = (params) => {
+ return publicRequest({
+ url: '/facilityData/getDataList',
+ method: 'POST',
+ params
+ })
+}
+
+// 设备运行时长
+export const getFacityRunTime = () => {
+ return publicRequest({
+ url: '/facilityData/getFacilityRunTime',
+ method: 'POST'
+ })
+}
+
+
+// 设备报警
+export const getFacityWarn = () => {
+ return publicRequest({
+ url: '/facilityData/getAlarmTime',
+ method: 'POST'
+ })
+}
+
+
+// 设备状态
+export const getFacityStatus = () => {
+ return publicRequest({
+ url: '/facilityData/getFacilityState',
+ method: 'POST'
+ })
+}
+
+
+// 监控统计
+export const getPointStatic = () => {
+ return publicRequest({
+ url: '/facilityData/getFacilityPointCount',
+ method: 'POST'
+ })
+}
\ No newline at end of file
diff --git a/src/views/screen/components/dataItem.vue b/src/views/screen/components/dataItem.vue
index 757229f..1b7d755 100644
--- a/src/views/screen/components/dataItem.vue
+++ b/src/views/screen/components/dataItem.vue
@@ -6,38 +6,48 @@
<div class="gas-CH">
<img src="@/assets/images/screen/CH4.png" alt="" />
</div>
- <div class="gas-data"><span>1.1</span>%</div>
+ <div class="gas-data"><span>{{props.item.hydrogenValue}}</span>%</div>
</div>
<div class="gas">
<div class="gas-t">H₂S</div>
<div class="gas-H2">
<img src="@/assets/images/screen/H2S.png" alt="" />
</div>
- <div class="gas-data"><span>1.2</span>ppm</div>
+ <div class="gas-data"><span>{{ props.item.methaneValue }}</span>ppm</div>
</div>
</div>
<div class="item-address">
- 安装位置：重庆市丰都县龙城大道435号安装位置：重庆市丰都县龙城大道435号
+ 安装位置：{{ props.item.pointName }}
</div>
<div class="status">
<span>运行状态：</span>
- <span class="val">正常运行</span>
+ <span class="stop" v-if="props.item.facilityState === 0">停止</span>
+ <span class="run" v-else-if="props.item.facilityState === 1">运行中</span>
+ <span class="warn1" v-else-if="props.item.facilityState === 2">一级报警</span>
+ <span class="warn2" v-else-if="props.item.facilityState === 3">二级报警</span>
</div>
</div>
</template>
<script setup>
+ const props = defineProps({
+ item: {
+ type: Object,
+ default: {}
+ }
+ })
+
</script>
<style lang="scss" scoped>
.item{
- width: 144px;
+ width: 134px;
height: 164px;
border-radius: 10px;
background: radial-gradient( rgba(50,154,196,0.5) 0%, rgba(21,74,131,0.5) 100%);
box-shadow: inset 0px 0px 10px 0px rgba(50,154,196,0.8);
- padding: 8px;
+ padding: 8px 4px;
box-sizing: border-box;
.item-air{
display: flex;
@@ -94,9 +104,17 @@
.status{
font-size: 0.8rem;
margin-top: 0.6rem;
- .val{
+ .run{
color: rgb(40, 250, 40);
- font-size: 0.8rem;
+ }
+ .stop{
+ color: #ccc;
+ }
+ .warn1{
+ color: #f1e313;
+ }
+ .warn2{
+ color: #f14713;
}
}
}
diff --git a/src/views/screen/device.vue b/src/views/screen/device.vue
index 68092b5..c6b2541 100644
--- a/src/views/screen/device.vue
+++ b/src/views/screen/device.vue
@@ -6,15 +6,15 @@
<div class="item-t">设备时长</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="facityWarnTable"
: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="报警内容" min-width="150" />
- <el-table-column prop="time" label="报警时长" />
+ <el-table-column prop="pointName" label="异常监测点" />
+ <el-table-column prop="facilityName" label="异常设备" />
+ <el-table-column prop="description" label="报警内容" />
+ <el-table-column prop="alarmTime" label="报警时长" />
</el-table>
</div>
</div>
@@ -23,12 +23,13 @@
<div class="title-left">风机管理</div>
<div class="title-right">
<el-select
- v-model="value"
+ v-model="typeValue.fengji"
size="small"
style="width: 8rem"
+ @change="getFanList"
>
<el-option
- v-for="item in options"
+ v-for="item in fengjiOption"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -39,53 +40,14 @@
</div>
<div class="item-c">
<div class="fengji">
- <div class="fengjiItem">
- <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengjiItem" v-for="(item, index) in fengjiList" :key="index">
+ <div class="fengji-title">{{ item.pointName }}</div>
<div class="fengji-status">
- <img src="@/assets/images/screen/fengji.png" alt="" />
- <span>正在运行</span>
- </div>
- </div>
- <div class="fengjiItem">
- <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
- <div class="fengji-status">
- <img src="@/assets/images/screen/fengji.png" alt="" />
- <span>正在运行</span>
- </div>
- </div>
- <div class="fengjiItem">
- <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
- <div class="fengji-status">
- <img src="@/assets/images/screen/fengji.png" alt="" />
- <span>正在运行</span>
- </div>
- </div>
- <div class="fengjiItem">
- <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
- <div class="fengji-status">
- <img src="@/assets/images/screen/fengji.png" alt="" />
- <span>正在运行</span>
- </div>
- </div>
- <div class="fengjiItem">
- <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
- <div class="fengji-status">
- <img src="@/assets/images/screen/fengji.png" alt="" />
- <span>正在运行</span>
- </div>
- </div>
- <div class="fengjiItem">
- <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
- <div class="fengji-status">
- <img src="@/assets/images/screen/fengji.png" alt="" />
- <span>正在运行</span>
- </div>
- </div>
- <div class="fengjiItem">
- <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
- <div class="fengji-status">
- <img src="@/assets/images/screen/fengji.png" alt="" />
- <span>正在运行</span>
+ <img :class="{run: item.facilityFanState === 1}" src="@/assets/images/screen/fengji.png" alt="" />
+ <span v-if="item.facilityFanState === 0">停止</span>
+ <span v-else-if="item.facilityFanState === 1">运行中</span>
+ <span v-else-if="item.facilityFanState === 2">一级报警</span>
+ <span v-else-if="item.facilityFanState === 3">二级报警</span>
</div>
</div>
</div>
@@ -95,18 +57,21 @@
<div class="item-t">工单处理</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="ordertable"
: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="device" label="上报时间" />
- <el-table-column prop="time" label="上报人" />
+ <el-table-column prop="code" label="工单号" />
+ <el-table-column prop="typeView" label="工单类型" />
+ <el-table-column prop="createTimeView" label="上报时间" />
+ <el-table-column prop="createUserName" label="上报人" />
<el-table-column prop="address" label="所属地址" />
- <el-table-column prop="status" label="工单状态">
- <div>已处理</div>
+ <el-table-column label="工单状态">
+ <template #default="scoped">
+ <div v-if="scoped.row.executeState === 200" style="color: #36fc0e;">已处理</div>
+ <div v-else style="color: #ccc;">未处理</div>
+ </template>
</el-table-column>
</el-table>
</div>
@@ -126,24 +91,26 @@
<div class="title-left">实时数据</div>
<div class="title-right">
<el-select
- v-model="value"
+ v-model="typeValue.pointId"
size="small"
style="width: 8rem"
+ @change="getNewData"
>
<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="value"
+ <el-select
+ v-model="typeValue.facilityState"
size="small"
style="width: 8rem"
+ @change="getNewData"
>
<el-option
- v-for="item in options"
+ v-for="item in fengjiOption"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -153,7 +120,9 @@
</div>
<div class="item-c">
<div class="data-list">
- <dataItem />
+ <template v-for="(item, index) in newDataList" :key="index">
+ <dataItem :item="item" />
+ </template>
</div>
</div>
</div>
@@ -171,15 +140,15 @@
<div class="item-t">风机状态</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="fengjiStatusTable"
: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-column prop="facilityId" label="风机编号" />
+ <el-table-column prop="runTimeString" label="单次运行时长" />
+ <el-table-column prop="pointName" label="运行地址" />
+ <el-table-column prop="sumTimeString" label="总运行时长" />
</el-table>
</div>
</div>
@@ -187,15 +156,15 @@
<div class="item-t">设备报警</div>
<div class="item-c">
<el-table
- :data="timeData"
+ :data="warnRecordTable"
: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="facilityCode" label="设备编号" />
+ <el-table-column prop="alarmTypeView" label="报警类型" />
<el-table-column prop="address" label="报警地址" />
- <el-table-column prop="time" label="报警时间" />
+ <el-table-column prop="latestAlarmTime" label="报警时间" />
</el-table>
</div>
</div>
@@ -205,15 +174,34 @@
</template>
<script setup>
- import { onMounted } from 'vue';
+ import { onMounted, reactive } from 'vue';
import dataItem from './components/dataItem.vue'
import * as echarts from 'echarts';
+ import { getOrder, getFanFacity, getFacityData, getFacityRunTime, getFacityWarn, getFacityStatus, getPointStatic } from '@/api/screen/device'
+ import { getWarnRecord } from '@/api/screen/data'
+ import pointApi from "@/api/facility/point";
- 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 facityWarnTable = ref([])
+ const fengjiList = ref([])
+ const ordertable = ref([])
+ const facityStatus = ref([])
+ const newDataList = ref([])
+ const lineChartList = ref([])
+ const fengjiStatusTable = ref([])
+ const warnRecordTable = ref([])
+
+ const typeValue = reactive({
+ fengji: 1,
+ pointId: '',
+ facilityState: 1,
+ })
+ const fengjiOption = [
+ {label: '停止', value: 0},
+ {label: '运行中', value: 1},
+ {label: '一级报警', value: 2},
+ {label: '二级报警', value: 3}
+ ]
+ const pointList = ref([])
const headerStyle = {
"background-color": '#041025 !important'
@@ -222,69 +210,58 @@
"background-color": '#081C3F !important'
}
- const value = ref('')
- const options = [
- {
- value: 1,
- label: 'Option1',
- },
- {
- value: 2,
- label: 'Option2',
- }
- ]
const statusRef = ref()
const moniterRef = ref()
let statusCharts = null
let moniterCharts = null
const setStatusCharts = () => {
- if(statusRef.value){
- statusCharts = echarts.init(statusRef.value)
-
- const option = {
+ const option = {
tooltip: {
trigger: 'item'
},
series: [
{
- name: 'Access From',
- type: 'pie',
- radius: ['40%', '70%'],
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' }
- ]
+ type: 'pie',
+ radius: ['40%', '70%'],
+ data: facityStatus.value
}
]
};
statusCharts.setOption(option)
- }
}
const setMoniterCharts = () => {
- if(moniterRef.value){
- moniterCharts = echarts.init(moniterRef.value)
-
- const option = {
+ let xdata = []
+ let sdata = []
+ lineChartList.value.forEach(el => {
+ xdata.push(el.pointName)
+ sdata.push(el.count)
+ })
+ const option = {
tooltip: {
- trigger: 'item'
+ trigger: 'axis'
},
+ dataZoom: [
+ {
+ id: 'dataZoomX',
+ type: 'slider',
+ xAxisIndex: [0],
+ filterMode: 'filter'
+ }
+ ],
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ data: xdata
},
yAxis: {
type: 'value'
},
series: [
{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
+ data: sdata,
type: 'line',
areaStyle: {
color: {
@@ -304,13 +281,109 @@
};
moniterCharts.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 getFacityTimelong = () => {
+ getFacityWarn().then(res => {
+ facityWarnTable.value = res.data
+ })
+ }
+
+ // 获取工单
+ const getOrderList = () => {
+ getOrder().then(res => {
+ ordertable.value = res.data
+ })
+ }
+
+ // 风机管理
+ const getFanList = () => {
+ getFanFacity({ type: typeValue.fengji }).then(res => {
+ fengjiList.value = res.data
+ })
+ }
+
+ // 设备状态
+ const getStatus = () => {
+ getFacityStatus().then(res => {
+ facityStatus.value = res.data.map(item => {
+ return {
+ name: item.typeName,
+ value: Number(item.value)
+ }
+ })
+ setStatusCharts()
+ })
+ }
+
+ // 实时数据
+ const getNewData = () => {
+ const searchData = {
+ pointId: typeValue.pointId,
+ facilityState: typeValue.facilityState
+ }
+ getFacityData(searchData).then(res => {
+ newDataList.value = res.data
+ })
+ }
+
+ // 监控统计
+ const getPoint = () => {
+ getPointStatic().then(res => {
+ lineChartList.value = res.data
+ setMoniterCharts()
+ })
+ }
+
+
+ // 风机状态
+ const getFanStatus = () => {
+ getFacityRunTime().then(res => {
+ fengjiStatusTable.value = res.data
+ })
+ }
+
+ // 设备报警
+ const getFacityWarnRecord = () => {
+ getWarnRecord().then(res => {
+ warnRecordTable.value = res.data
+ })
+ }
+
+ const init = async () => {
+ if(statusRef.value){
+ statusCharts = echarts.init(statusRef.value)
+ }
+ if(moniterRef.value){
+ moniterCharts = echarts.init(moniterRef.value)
+ }
+ await getPointData()
+ getFacityTimelong()
+ getOrderList()
+ getFanList()
+ getStatus()
+ getNewData()
+ getPoint()
+ getFanStatus()
+ getFacityWarnRecord()
}
onMounted(() => {
- setStatusCharts()
- setMoniterCharts()
+ init()
})
</script>
@@ -400,6 +473,8 @@
width: 2rem;
height: 2rem;
margin-right: 2rem;
+ }
+ .run{
animation: rotateAnimation 1s linear 0s infinite;
}
}
@@ -440,6 +515,16 @@
width: 100%;
height: 100%;
}
+ .data-list{
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.7rem;
+ overflow-y: scroll;
+ &::-webkit-scrollbar{
+ display: none;
+ }
+ }
}
}
}
--
Gitblit v1.9.3