|
|
@@ -1,9 +1,10 @@
|
|
|
<!--油机详情页面-->
|
|
|
<template>
|
|
|
- <div class="layout-pd">
|
|
|
+ <div class="layout-pd oilInfo">
|
|
|
<el-row>
|
|
|
+ <!--基本信息-->
|
|
|
<el-col :xs="24">
|
|
|
- <el-card class="mt8" header="基础信息" shadow="hover">
|
|
|
+ <el-card class="mt8" header="基本信息" shadow="hover">
|
|
|
<div class="basicInformation" v-loading="basicInfo.loading">
|
|
|
<div class="basicInformation-left">
|
|
|
<div class="item ">
|
|
|
@@ -170,114 +171,350 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="basicInformation-right" >
|
|
|
- <div style="width: 100%;height: 100% ;background-color: #16cfd0">
|
|
|
- 2
|
|
|
+ <div @click="showBigPic(basicInfo.info.imgUrl)">
|
|
|
+ <el-image loading="lazy"
|
|
|
+ alt="fgg"
|
|
|
+ class="img"
|
|
|
+ fit="contain"
|
|
|
+ :src="basicInfo.info.imgUrl ? baseUrl + '/' + basicInfo.info.imgUrl : ''" >
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot">
|
|
|
+ <el-icon><icon-picture /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
</div>
|
|
|
-<!-- <div @click="showBigPic(goods.basicInformation.img)">-->
|
|
|
-<!-- <el-image loading="lazy"-->
|
|
|
-<!-- alt="fgg"-->
|
|
|
-<!-- class="img"-->
|
|
|
-<!-- fit="contain"-->
|
|
|
-<!-- :src="baseUrl + '/' + goods.basicInformation.img" >-->
|
|
|
-<!-- <template #error>-->
|
|
|
-<!-- <div class="image-slot">-->
|
|
|
-<!-- <el-icon><icon-picture /></el-icon>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </template>-->
|
|
|
-<!-- </el-image>-->
|
|
|
-<!-- </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
+
|
|
|
+ <!--报警历史-->
|
|
|
<el-col :xs="24">
|
|
|
- <el-card class="mt8" shadow="hover">
|
|
|
- 22
|
|
|
+ <el-card style="height: 40vh" class="mt8 my-fill" shadow="hover" header="报警历史">
|
|
|
+ <el-table v-loading="alarmHistory.loading" stripe :data="alarmHistory.list" row-key="id" style="width: 100%">
|
|
|
+ <el-table-column prop="time" label="时间" />
|
|
|
+ <el-table-column prop="gasStation" label="加油站" />
|
|
|
+ <el-table-column prop="fillingMachine" label="加油机" >
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{row.fillingMachine}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fuelDispenserSerialNumber" label="加油机序号" >
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{row.fuelDispenserSerialNumber}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="alarmSource" label="报警来源" >
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{row.alarmSource}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="alarmType" label="报警类型" />
|
|
|
+ <el-table-column prop="alarmDescription" label="报警描述" />
|
|
|
+ </el-table>
|
|
|
+ <div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
+ <el-pagination
|
|
|
+ v-model:currentPage="alarmHistory.pageInput.currentPage"
|
|
|
+ v-model:page-size="alarmHistory.pageInput.pageSize"
|
|
|
+ :default-page-size="5"
|
|
|
+ :total="alarmHistory.total"
|
|
|
+ :page-sizes="[5, 10, 20, 50, 100]"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ @size-change="onAlarmHistorySizeChange"
|
|
|
+ @current-change="onAlarmHistoryCurrentChange"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
+
|
|
|
+ <!--生命周期-->
|
|
|
<el-col :xs="24">
|
|
|
- <el-card class="mt8" shadow="hover">
|
|
|
- 22
|
|
|
+ <el-card style="height: 40vh" class="mt8 my-fill" shadow="hover" header="生命周期">
|
|
|
+ <el-table v-loading="lifeCycle.loading" stripe :data="lifeCycle.list" row-key="id" style="width: 100%">
|
|
|
+ <el-table-column prop="time" label="时间" />
|
|
|
+ <el-table-column prop="operator" label="操作人" />
|
|
|
+ <el-table-column prop="operatorID" label="操作人ID" />
|
|
|
+ <el-table-column prop="operation" label="操作" />
|
|
|
+ </el-table>
|
|
|
+ <div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
+ <el-pagination
|
|
|
+ v-model:currentPage="lifeCycle.pageInput.currentPage"
|
|
|
+ v-model:page-size="lifeCycle.pageInput.pageSize"
|
|
|
+ :default-page-size="5"
|
|
|
+ :total="lifeCycle.total"
|
|
|
+ :page-sizes="[5, 10, 20, 50, 100]"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ @size-change="onLifeCycleSizeChange"
|
|
|
+ @current-change="onLifeCycleCurrentChange"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <el-dialog
|
|
|
+ v-model="bigImgDto.isShow"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ :show-close="false"
|
|
|
+ width="80%"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="bigImgDto.imgUrl"
|
|
|
+ class="fullscreen-image"
|
|
|
+ alt="放大的图片"/>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import {reactive} from "vue";
|
|
|
+import { Picture as IconPicture } from '@element-plus/icons-vue'
|
|
|
+import {onMounted, reactive} from "vue";
|
|
|
+import {OilEngineDetailsApi} from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
|
|
|
+
|
|
|
+/******************************数据对象***************************************/
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取当前环境请求的URL前缀
|
|
|
+ */
|
|
|
+const baseUrl = import.meta.env.VITE_API_URL
|
|
|
|
|
|
+/**
|
|
|
+ * 显示大图数据对象
|
|
|
+ */
|
|
|
+const bigImgDto = reactive({
|
|
|
+ isShow:false,
|
|
|
+ imgUrl:''
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 油机详情 - 基本信息 - 数据对象
|
|
|
+ */
|
|
|
const basicInfo = reactive({
|
|
|
loading:false,
|
|
|
info:{
|
|
|
- oilEngineNumber:"4",
|
|
|
- serialNumber:"1904344P",
|
|
|
- oilCompanies:"中石化安徽宣城石油分公司",
|
|
|
- fuelDispenserManufacturer:"托肯恒山科技（广州）有限公司",
|
|
|
- gasStation:"中石化安徽宣城金陵加油站",
|
|
|
- specifications:"THD2244B2",
|
|
|
- measuringRange:"2L-50L",
|
|
|
- accuracyLevel:"0.3",
|
|
|
- factoryCode:"1904344P",
|
|
|
- onlineStatus:"离线",
|
|
|
- alarmStatus:"严重报警"
|
|
|
+ oilEngineNumber:"",
|
|
|
+ serialNumber:"",
|
|
|
+ oilCompanies:"",
|
|
|
+ fuelDispenserManufacturer:"",
|
|
|
+ gasStation:"",
|
|
|
+ specifications:"",
|
|
|
+ measuringRange:"",
|
|
|
+ accuracyLevel:"",
|
|
|
+ factoryCode:"",
|
|
|
+ onlineStatus:"",
|
|
|
+ alarmStatus:"",
|
|
|
+ imgUrl:""
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 油机详情 - 报警历史 - 数据对象
|
|
|
+ */
|
|
|
+const alarmHistory = reactive({
|
|
|
+ loading:false,
|
|
|
+ list:[{
|
|
|
+ time:"",
|
|
|
+ gasStation:"",
|
|
|
+ fillingMachine:"",
|
|
|
+ fuelDispenserSerialNumber:"",
|
|
|
+ alarmSource:"",
|
|
|
+ alarmType:"",
|
|
|
+ alarmDescription:""
|
|
|
+ }],
|
|
|
+ pageInput:{
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 5
|
|
|
+ },
|
|
|
+ total:0
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 油机详情 - 生命周期 - 数据对象
|
|
|
+ */
|
|
|
+const lifeCycle = reactive({
|
|
|
+ loading:false,
|
|
|
+ list:[{
|
|
|
+ time:"",
|
|
|
+ operator:"",
|
|
|
+ operatorID:"",
|
|
|
+ operation:"",
|
|
|
+ }],
|
|
|
+ pageInput:{
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 5
|
|
|
+ },
|
|
|
+ total:0
|
|
|
+})
|
|
|
+
|
|
|
+/***************************数据对象***************************************/
|
|
|
+
|
|
|
+
|
|
|
+/*******************************方法**************************************/
|
|
|
+
|
|
|
+/**
|
|
|
+ * 展示大图
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const showBigPic = (val) => {
|
|
|
+ if(val){
|
|
|
+ bigImgDto.imgUrl = baseUrl + '/' + val
|
|
|
+ }else {
|
|
|
+ bigImgDto.imgUrl = ''
|
|
|
+ }
|
|
|
+ bigImgDto.isShow = true
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 油机详情 - 报警历史 - 页条变化
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const onAlarmHistorySizeChange = (val) => {
|
|
|
+ alarmHistory.pageInput.pageSize = val
|
|
|
+ getAlarmHistory()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 油机详情 - 报警历史 - 页码变化
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const onAlarmHistoryCurrentChange = (val) => {
|
|
|
+ alarmHistory.pageInput.currentPage = val
|
|
|
+ getAlarmHistory()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 油机详情 - 生命周期 - 页条变化
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const onLifeCycleSizeChange = (val) =>{
|
|
|
+ lifeCycle.pageInput.pageSize = val
|
|
|
+ getLifeCycle()
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 油机详情 - 生命周期 - 页码变化
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const onLifeCycleCurrentChange = (val) => {
|
|
|
+ lifeCycle.pageInput.currentPage = val
|
|
|
+ getLifeCycle()
|
|
|
+}
|
|
|
+
|
|
|
+/*********************************方法************************************/
|
|
|
+
|
|
|
+
|
|
|
+/**********************************初始化***********************************/
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取 油机详情 - 基本信息 - 数据对对象
|
|
|
+ */
|
|
|
+const getBasicInfo = async () => {
|
|
|
+ basicInfo.loading = true
|
|
|
+ const { data } = await new OilEngineDetailsApi().getBasicInfoDto()
|
|
|
+ basicInfo.info = data
|
|
|
+ basicInfo.loading = false
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取 油机详情 - 报警历史 - 数据对对象
|
|
|
+ */
|
|
|
+const getAlarmHistory = async () => {
|
|
|
+ alarmHistory.loading = true
|
|
|
+ const {total, list} = await new OilEngineDetailsApi().getAlarmHistoryDto()
|
|
|
+ alarmHistory.total = total
|
|
|
+ alarmHistory.list = list
|
|
|
+ alarmHistory.loading = false
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取 油机详情 - 生命周期 - 数据对对象
|
|
|
+ */
|
|
|
+const getLifeCycle = async () => {
|
|
|
+ lifeCycle.loading = true
|
|
|
+ const {total, list} = await new OilEngineDetailsApi().getLifeCycleDto()
|
|
|
+ lifeCycle.total = total
|
|
|
+ lifeCycle.list = list
|
|
|
+ lifeCycle.loading = false
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 初始化
|
|
|
+ */
|
|
|
+onMounted(() => {
|
|
|
+ getBasicInfo()
|
|
|
+ getAlarmHistory()
|
|
|
+ getLifeCycle()
|
|
|
+})
|
|
|
+
|
|
|
+/*********************************初始化************************************/
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.basicInformation{
|
|
|
- display: flex;
|
|
|
- display: -webkit-flex; /* Safari */
|
|
|
- justify-content: space-around;
|
|
|
- align-items:center;
|
|
|
- align-content:space-around;
|
|
|
- flex-wrap: wrap-reverse;
|
|
|
- .basicInformation-left{
|
|
|
+.oilInfo{
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ .basicInformation{
|
|
|
display: flex;
|
|
|
display: -webkit-flex; /* Safari */
|
|
|
justify-content: space-around;
|
|
|
- flex-wrap: wrap;
|
|
|
- height: 100%;
|
|
|
- max-width: 65%;
|
|
|
- min-width: 300px;
|
|
|
- .item{
|
|
|
- cursor: pointer;
|
|
|
- width: 240px;/*设置显示的最大宽度*/
|
|
|
- height:40px;
|
|
|
- overflow:hidden;/*超出部分隐藏*/
|
|
|
- white-space:nowrap;/*强制单行显示*/
|
|
|
- text-overflow: ellipsis;
|
|
|
+ align-items:center;
|
|
|
+ align-content:space-around;
|
|
|
+ flex-wrap: wrap-reverse;
|
|
|
+ .basicInformation-left{
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- }
|
|
|
+ display: -webkit-flex; /* Safari */
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 65%;
|
|
|
+ min-width: 300px;
|
|
|
+ .item{
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 240px;/*设置显示的最大宽度*/
|
|
|
+ height:40px;
|
|
|
+ overflow:hidden;/*超出部分隐藏*/
|
|
|
+ white-space:nowrap;/*强制单行显示*/
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
- .basicInformation-right{
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- max-width: 300px;
|
|
|
- min-width: 200px;
|
|
|
- padding: 0 10px;
|
|
|
- .img {
|
|
|
- width: 220px;
|
|
|
- height: 140px;
|
|
|
- cursor: pointer;
|
|
|
}
|
|
|
- .image-slot {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
+ .basicInformation-right{
|
|
|
+ width: 50%;
|
|
|
height: 100%;
|
|
|
- background: var(--el-fill-color-light);
|
|
|
- color: var(--el-text-color-secondary);
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
- .image-slot .el-icon {
|
|
|
- font-size: 30px;
|
|
|
+ max-width: 300px;
|
|
|
+ min-width: 200px;
|
|
|
+ padding: 0 10px;
|
|
|
+ .img {
|
|
|
+ width: 220px;
|
|
|
+ height: 140px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .image-slot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: var(--el-fill-color-light);
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .image-slot .el-icon {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .fullscreen-image {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 80vh;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
