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/assets/images/screen/pos-warn.png | 0 /dev/null | 0 src/views/screen/device.vue | 10 src/views/facility/facilityList/index.vue | 6 src/assets/images/screen/pos-run.png | 0 src/assets/images/screen/pos-stop.png | 0 src/views/facility/monitorList/index.vue | 67 ++-- src/api/screen/data.js | 48 +++ src/views/screen/data.vue | 306 ++++++++++++++++----- src/api/screen/home.js | 27 + src/views/facility/facilityType/index.vue | 10 src/views/screen/index.vue | 340 ++++++++++------------- 12 files changed, 502 insertions(+), 312 deletions(-) diff --git a/src/api/screen/data.js b/src/api/screen/data.js new file mode 100644 index 0000000..e950e05 --- /dev/null +++ b/src/api/screen/data.js @@ -0,0 +1,48 @@ +import { publicRequest } from '@/utils/request.js' + + +// 短信邮箱报警记录 +export const getWarnMessage = (data) => { + return publicRequest({ + url: '/statisticsData/getMessageList', + method: 'POST', + data + }) +} + + +// 街道报警记录 +export const getWarnStreet = () => { + return publicRequest({ + url: '/statisticsData/getAlarmListByPoint', + method: 'POST', + }) +} + +// 报警次数统计 +export const getWarnStatic = (data) => { + return publicRequest({ + url: '/statisticsData/getAlarmCount', + method: 'POST', + data + }) +} + + +// 报警记录 +export const getWarnRecord = () => { + return publicRequest({ + url: '/statisticsData/getAlarmRecord', + method: 'POST' + }) +} + + +// 气体报警曲线 +export const getRecordLine = (data) => { + return publicRequest({ + url: '/statisticsData/getLineChart', + method: 'POST', + data + }) +} \ No newline at end of file diff --git a/src/api/screen/home.js b/src/api/screen/home.js new file mode 100644 index 0000000..99746c0 --- /dev/null +++ b/src/api/screen/home.js @@ -0,0 +1,27 @@ +import { publicRequest } from '@/utils/request.js' + + +// 获取标点设备数据 +export const getPointFacityList = () => { + return publicRequest({ + url: '/homeData/getFacilityList', + method: 'POST' + }) +} + +// 获取设备数量统计 +export const staticFacity = () => { + return publicRequest({ + url: '/homeData/deviceCount', + method: 'post' + }) +} + +// 获取工单统计 +export const staticOrder = (data) => { + return publicRequest({ + url: '/homeData/workOrderList', + method: 'post', + data + }) +} \ No newline at end of file diff --git a/src/assets/images/screen/pos-run.png b/src/assets/images/screen/pos-run.png new file mode 100644 index 0000000..f296032 --- /dev/null +++ b/src/assets/images/screen/pos-run.png Binary files differ diff --git a/src/assets/images/screen/pos-stop.png b/src/assets/images/screen/pos-stop.png new file mode 100644 index 0000000..daa6705 --- /dev/null +++ b/src/assets/images/screen/pos-stop.png Binary files differ diff --git a/src/assets/images/screen/pos-warn.png b/src/assets/images/screen/pos-warn.png new file mode 100644 index 0000000..96ce4d8 --- /dev/null +++ b/src/assets/images/screen/pos-warn.png Binary files differ diff --git a/src/assets/images/screen/position.png b/src/assets/images/screen/position.png deleted file mode 100644 index 6d3f379..0000000 --- a/src/assets/images/screen/position.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/warn-one.png b/src/assets/images/screen/warn-one.png deleted file mode 100644 index 573e4d0..0000000 --- a/src/assets/images/screen/warn-one.png +++ /dev/null Binary files differ diff --git a/src/assets/images/screen/warn-two.png b/src/assets/images/screen/warn-two.png deleted file mode 100644 index ce5f8ee..0000000 --- a/src/assets/images/screen/warn-two.png +++ /dev/null Binary files differ diff --git a/src/views/facility/facilityList/index.vue b/src/views/facility/facilityList/index.vue index 769a24e..29988e8 100644 --- a/src/views/facility/facilityList/index.vue +++ b/src/views/facility/facilityList/index.vue @@ -141,7 +141,7 @@ /** 删除按钮操作 */ function handleDelete(row) { - proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () { + proxy.$modal.confirm('是否确认删除名称为"' + row.pointName + '"的数据项?').then(function () { return facilityApi().remove(row.id); }).then(() => { getList(); @@ -325,9 +325,9 @@ <el-button link type="primary" icon="Edit" v-has="['update',route]" @click="handleUpdate(scope.row)">修改 </el-button> - <el-button link type="primary" icon="Delete" v-has="['delete',route]" + <!-- <el-button link type="primary" icon="Delete" v-has="['delete',route]" @click="handleDelete(scope.row)">删除 - </el-button> + </el-button> --> </template> </el-table-column> </el-table> diff --git a/src/views/facility/facilityType/index.vue b/src/views/facility/facilityType/index.vue index c758f1a..d8bc5e5 100644 --- a/src/views/facility/facilityType/index.vue +++ b/src/views/facility/facilityType/index.vue @@ -1,8 +1,8 @@ <!-- * @Author: Liuyi candymxq888@outlook.com * @Date: 2024-08-06 14:47:41 - * @LastEditors: hqs elkers@163.com - * @LastEditTime: 2024-08-14 10:38:16 + * @LastEditors: web candymxq888@outlook.com + * @LastEditTime: 2025-07-15 10:07:32 * @FilePath: \water-qinghe-web\src\views\facilit\facilityList\facilityType.vue * @Description: 设备类型 --> @@ -100,7 +100,7 @@ /** 删除按钮操作 */ function handleDelete(row) { - proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () { + proxy.$modal.confirm('是否确认删除名称为"' + row.facilityTypeName + '"的数据项?').then(function () { return facilityTypeApi().remove(row.id); }).then(() => { getList(); @@ -217,9 +217,9 @@ <el-button link type="primary" icon="Edit" v-has="['update',route]" @click="handleUpdate(scope.row)">修改 </el-button> - <el-button link type="primary" icon="Delete" v-has="['delete',route]" + <!-- <el-button link type="primary" icon="Delete" v-has="['delete',route]" @click="handleDelete(scope.row)">删除 - </el-button> + </el-button> --> </template> </el-table-column> </el-table> diff --git a/src/views/facility/monitorList/index.vue b/src/views/facility/monitorList/index.vue index 519470d..285dce2 100644 --- a/src/views/facility/monitorList/index.vue +++ b/src/views/facility/monitorList/index.vue @@ -35,9 +35,10 @@ let tableHeader = ref({ pointName: '监控点名称', pointCode: '监控点编号', - pointType: '监控类型', address: '详细地址', createTimeView: '创建时间', + leftMargin: '左边距', + topMargin:'上边距', imageUrl: '图片', remark: '备注' }) @@ -61,35 +62,38 @@ const formLabel = ({ pointName: '监控点名称', pointCode: '监控点编号', - pointType: '监控点类型', - parentId: '父级监控点', address: '详细地址', + leftMargin: '左边距', + topMargin:'上边距', + boxType: '弹窗位置', imageUrl: '图片', remark: '备注' }) const rules = ref({ pointName: [{required: true, message: `请输入${formLabel.pointName}`, trigger: "blur"}], pointCode: [{required: true, message: `请输入${formLabel.address}`, trigger: "blur"}], - pointType: [{required: true, message: `请输入${formLabel.pointType}`, trigger: "blur"}], + topMargin: [{required: true, message: `请输入${formLabel.topMargin}`, trigger: "blur"}], + leftMargin: [{required: true, message: `请输入${formLabel.leftMargin}`, trigger: "blur"}], + boxType: [{required: true, message: `请输入${formLabel.boxType}`, trigger: "blur"}], }); const form = ref({ pointName: '', pointCode: '', - pointType: '', - parentId: '', address: '', imageUrl: '', - remark: '' + remark: '', + topMargin:'', + leftMargin: '', + boxType: '' }); const searchParams = ref({ keywords: '', }); -// 监控点类型 -const monityTypeList = [ - {id: 1, name: '水温监测点'}, - {id: 2, name: '生态流量监测点'} -]; +const positionList = [ + { label: '左侧', value: '0' }, + { label: '右侧', value: '1' } +] /** 新增按钮操作 */ async function handleAdd() { @@ -170,13 +174,14 @@ /** 表单重置 */ function reset() { form.value = { - parentId: '', pointName: '', pointCode: '', - pointType: '', address: '', imageUrl: '', - remark: '' + remark: '', + topMargin:'', + leftMargin: '', + boxType: '' }; proxy.resetForm("formRef"); } @@ -227,9 +232,6 @@ <div v-if="key === 'imageUrl'"> <img :src="imgBaseUrl + scope.row.headImg" class="table-headImg" alt="" /> </div> - <div v-else-if="key === 'pointType'"> - {{ scope.row.pointType === 1 ? '水温监测点' : '生态流量监测点' }} - </div> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> @@ -253,21 +255,27 @@ <!-- 添加/修改表单 --> <el-dialog :title="title" v-model="open" append-to-body center> <el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='auto'> - <el-form-item :label="formLabel.pointType" prop="pointType"> - <el-select v-model="form.pointType" :placeholder="'请输入'+formLabel.pointType"> - <el-option - v-for="(item,index) in monityTypeList" - :label="item.name" - :value="item.id" - :key="index" - ></el-option> - </el-select> - </el-form-item> <el-form-item :label="formLabel.pointName" prop="pointName"> <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/> </el-form-item> <el-form-item :label="formLabel.pointCode" prop="pointCode"> <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/> + </el-form-item> + <el-form-item :label="formLabel.leftMargin" prop="leftMargin"> + <el-input v-model="form.leftMargin" :placeholder="'请输入'+formLabel.leftMargin"/> + </el-form-item> + <el-form-item :label="formLabel.topMargin" prop="topMargin"> + <el-input v-model="form.topMargin" :placeholder="'请输入'+formLabel.topMargin"/> + </el-form-item> + <el-form-item :label="formLabel.boxType" prop="boxType"> + <el-select v-model="form.boxType" :placeholder="'请输入'+formLabel.boxType"> + <el-option + v-for="(item,index) in positionList" + :label="item.label" + :value="item.value" + :key="index" + ></el-option> + </el-select> </el-form-item> <el-form-item :label="formLabel.address" prop="address"> <el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/> @@ -275,7 +283,8 @@ <el-form-item :label="formLabel.remark" prop="address"> <el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/> </el-form-item> - <el-form-item></el-form-item> + <el-form-item> + </el-form-item> <el-form-item label="图片" prop="imageUrl" style="flex: 1"> <upload-icons @uploadData="uploadData" :imageList="form.imageUrl" :limit="1"></upload-icons> <span style="display: block;">(请上传1张设备图片)</span> 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%; diff --git a/src/views/screen/device.vue b/src/views/screen/device.vue index c10a067..d735b45 100644 --- a/src/views/screen/device.vue +++ b/src/views/screen/device.vue @@ -11,10 +11,10 @@ :cell-style="rowStyle" style="height: 100%;" > - <el-table-column prop="type" label="异常类型" /> + <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="address" label="报警内容" min-width="150" /> + <el-table-column prop="time" label="报警时长" /> </el-table> </div> </div> @@ -322,6 +322,7 @@ justify-content: space-between; :deep(.el-table){ --el-table-border-color: #000; + --el-table-bg-color: transparent; th{ font-size: 12px; color: #fff; @@ -333,9 +334,6 @@ .el-table__cell{ border: none; } - } - :deep(.el-scrollbar__wrap--hidden-default){ - background-color: #000 !important; } &-l{ width: 29%; diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index 255484b..dd509e9 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -6,43 +6,60 @@ <div class="home-t"></div> <div class="home-content"> <div class="hc-position"> - <div class="point" v-for="item in pointList" :key="item.id" - :style="{left: `${item.left}%`, top: `${item.top}%`, backgroundImage: `url(${warnTwo})`}" + <div class="point" v-for="(item, index) in pointData" :key="index" + :style="{left: `${item.left}%`, top: `${item.top}%`, backgroundImage: `url(${getPointImg(item.facilityState)})`}" + @click.self="changeShow(index)" > - <div class="msg-l"> + <div class="msg-l" v-if="item.showMask && item.boxType === '0'"> + <div class="msg-item"> + <span class="name">设备名称:</span> + <span class="val">{{ item.facilityName }}</span> + </div> <div class="msg-item"> <span class="name">设备状态:</span> - <span class="val">{{ item.status }}</span> + <span class="val">{{ item.facilityState }}</span> </div> <div class="msg-item"> <span class="name">甲烷浓度:</span> - <span class="val">{{ item.jiawan }}</span> + <span class="val">{{ item.methaneValue }}%</span> + </div> + <div class="msg-item"> + <span class="name">室内温度:</span> + <span class="val">{{ item.temperature }}°</span> </div> <div class="msg-item"> <span class="name">风机状态:</span> - <span class="val">{{ item.fengjiStatus }}</span> + <span class="val">{{ item.facilityFanState }}</span> </div> <div class="msg-item"> <span class="name">硫化氢浓度:</span> - <span class="val">{{ item.liuhuaqin }}</span> + <span class="val">{{ item.hyrothionValue }}ppm</span> </div> </div> - <div class="msg-r"> + <div class="msg-r" v-if="item.showMask && item.boxType === '1'"> + <div class="msg-item"> + <span class="name">设备名称:</span> + <span class="val">{{ item.facilityName }}</span> + </div> <div class="msg-item"> <span class="name">设备状态:</span> - <span class="val">{{ item.status }}</span> + <span class="val">{{ item.facilityState }}</span> </div> <div class="msg-item"> <span class="name">甲烷浓度:</span> - <span class="val">{{ item.jiawan }}</span> + <span class="val">{{ item.methaneValue }}%</span> + </div> + <div class="msg-item"> + <span class="name">室内温度:</span> + <span class="val">{{ item.temperature }}°</span> </div> <div class="msg-item"> <span class="name">风机状态:</span> - <span class="val">{{ item.fengjiStatus }}</span> + <span class="val">{{ item.facilityFanState }}</span> </div> <div class="msg-item"> <span class="name">硫化氢浓度:</span> - <span class="val">{{ item.liuhuaqin }}</span> + <span class="val">{{ item.hyrothionValue }}ppm</span> </div> </div> </div> @@ -51,68 +68,47 @@ <div class="shebei item"> <div class="item-t">辖区内设备数统计</div> <div class="item-c"> - <div class="shebei-head"> - <div>辖区位置</div> - <div>甲烷传感器</div> - <div>硫化氢传感器</div> - <div>中端控制器</div> - <div>风机设备</div> - <div>总设备数</div> - </div> - <div class="shebei-conetnt"> - <div class="list"> - <div class="listV"> - <div>龙城大道</div> - <div>5台</div> - <div>5台</div> - <div>5台</div> - <div>5台</div> - <div>5台</div> - </div> - <div class="listV"> - <div>龙城大道</div> - <div>5台</div> - <div>5台</div> - <div>5台</div> - <div>5台</div> - <div>5台</div> - </div> - </div> - </div> + <el-table + :data="facityData" + :header-cell-style="headerStyle" + :cell-style="rowStyle" + style="height: 100%;" + > + <el-table-column prop="pointName" label="辖区位置" align="center" /> + <el-table-column prop="methaneCount" label="甲烷传感器" align="center" /> + <el-table-column prop="hyrothionCount" label="硫化氢传感器" min-width="100" align="center" /> + <el-table-column prop="boxCount" label="终端控制器" align="center" /> + <el-table-column prop="facilityFanCount" label="风机设备" align="center" /> + <el-table-column prop="sumCount" label="总设备数" align="center" /> + </el-table> </div> </div> <div class="gongdan item"> <div class="item-t">未处理工单统计</div> <div class="item-c"> - <div class="gongdan-head"> - <div class="no">工单号</div> - <div class="type">工单类型</div> - <div class="time">上报时间</div> - <div class="user">上报人</div> - <div class="address">所属地址</div> - <div class="status">工单状态</div> - </div> - <div class="gongdan-content"> - <div class="list"> - <div class="listV"> - <div class="no">001</div> - <div class="type">设备维修</div> - <div class="time">2025/06/23</div> - <div class="user">监测设备终端</div> - <div class="address"> - <el-tooltip - class="box-item" - effect="dark" - content="重庆市丰都县龙城大道288号" - placement="top" - > - 重庆市丰都县龙城大道288号 - </el-tooltip> - </div> - <div class="status"><el-button type="danger" size="small">未处理</el-button></div> - </div> - </div> - </div> + <el-table + :data="orderData" + :header-cell-style="headerStyle" + :cell-style="rowStyle" + style="height: 100%;" + > + <el-table-column prop="code" label="工单号" align="center" /> + <el-table-column label="工单类型" align="center"> + <template #default="scope"> + <div v-if="scope.row.type === 1">设备维护</div> + <div v-else>设备维修</div> + </template> + </el-table-column> + <el-table-column prop="createTimeView" label="上报时间" align="center" min-width="100" /> + <el-table-column prop="createUserName" label="上报人" align="center" /> + <el-table-column prop="address" label="所属地址" align="center" min-width="120" /> + <el-table-column label="工单状态" align="center"> + <template #default="scope"> + <div v-if="scope.row.executeState === 100" style="color: #ccc;">未执行</div> + <div v-else style="color: #36fc0e;">已执行</div> + </template> + </el-table-column> + </el-table> </div> </div> </div> @@ -122,14 +118,75 @@ <script setup> - import postImg from '@/assets/images/screen/position.png' - import warnOne from '@/assets/images/screen/warn-one.png' - import warnTwo from '@/assets/images/screen/warn-two.png' + import { onMounted, ref } from 'vue' + import { getPointFacityList, staticFacity, staticOrder } from '@/api/screen/home' + import postRun from '@/assets/images/screen/pos-run.png' + import warnStop from '@/assets/images/screen/pos-stop.png' + import warnWarn from '@/assets/images/screen/pos-warn.png' - const pointList = ref([ - { left: 25, top: 30, status: '一级报警', jiawan: '2.4%LEL', fengjiStatus: 1, liuhuaqin: '1.9%LEL', id: 1 }, - { left: 40, top: 60, status: '一级报警', jiawan: '2.4%LEL', fengjiStatus: 1, liuhuaqin: '1.9%LEL', id: 2 }, - ]) + const headerStyle = { + "background-color": '#041025 !important' + } + const rowStyle = { + "background-color": '#081C3F !important' + } + + const pointData = ref([]) + const facityData = ref([]) + const orderData = ref([]) + + // 显示隐藏弹窗 + const changeShow = (index) => { + pointData.value[index].showMask = !pointData.value[index].showMask + } + + /* + 获取图标 + 0停止 1运行 2一级报警 3二级报警 + */ + const getPointImg = (status) => { + if(status === '运行中') { + return postRun + }else if(status === '一级报警' || status === '二级报警'){ + return warnWarn + }else{ + return warnStop + } + } + + const getPointData = () => { + getPointFacityList().then(res => { + pointData.value = res.data.map(item => { + return { + ...item, + showMask: false + } + }) + }) + } + + const getFacity = () => { + staticFacity().then(res => { + facityData.value = res.data + }) + } + + const getOrder = () => { + const searchdata = { + limit: 100, + page: 1 + } + staticOrder(searchdata).then(res => { + orderData.value = res.data.list + }) + } + + + onMounted(() => { + getPointData() + getFacity() + getOrder() + }) </script> @@ -168,7 +225,7 @@ position: relative; .point{ position: absolute; - width: 56px; + width: 32px; height: 80px; background-repeat: no-repeat; background-size: 100% 100%; @@ -176,7 +233,7 @@ width: 250px; height: 160px; position: absolute; - left: -235px; + left: -245px; top: 0; background-image: url('@/assets/images/screen/msg-box-l.png'); background-repeat: no-repeat; @@ -190,7 +247,7 @@ width: 250px; height: 160px; position: absolute; - left: 40px; + left: 30px; top: 0; background-image: url('@/assets/images/screen/msg-box-r.png'); background-repeat: no-repeat; @@ -233,116 +290,23 @@ padding: 1rem 0.5rem; } } - .shebei{ - .shebei-head{ - height: 2rem; - line-height: 2rem; - display: flex; - justify-content: space-between; - font-size: 0.7rem; - >div{ - width: 16%; - flex-shrink: 0; - text-align: center; - } - } - .shebei-conetnt{ - height: calc(100% - 2rem); - .list{ - height: 100%; - overflow-y: scroll; - &::-webkit-scrollbar{ - display: none; - } - .listV{ - display: flex; - justify-content: space-between; - font-size: 0.7rem; - padding: 0.5rem 0; - background-color: #081C3F; - >div{ - width: 16%; - flex-shrink: 0; - text-align: center; - } - } - } - } - } - .gongdan{ - .gongdan-head{ - height: 2rem; - line-height: 2rem; - display: flex; - justify-content: space-between; - font-size: 0.7rem; - >div{ - flex-shrink: 0; - text-align: center; - } - .no{ - width: 8%; - } - .type{ - width: 12%; - } - .time{ - width: 15%; - } - .user{ - width: 20%; - } - .address{ - width: 30%; - } - .status{ - width: 15%; - } - } - .gongdan-content{ - .list{ - height: 100%; - overflow-y: scroll; - &::-webkit-scrollbar{ - display: none; - } - .listV{ - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.7rem; - padding: 0.5rem 0; - background-color: #081C3F; - >div{ - flex-shrink: 0; - text-align: center; - } - .no{ - width: 8%; - } - .type{ - width: 12%; - } - .time{ - width: 15%; - } - .user{ - width: 20%; - } - .address{ - width: 30%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - .status{ - width: 15%; - } - } - } - } - } } } } + +: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; + } +} </style> \ No newline at end of file -- Gitblit v1.9.3