feat(部件详情): 部件详情页的开发

完成了部件详情静态页面的开发

admin.ui.plus-master/src/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi.ts

@@ -0,0 +1,111 @@
+import {HttpClient} from "/@/api/admin/http-client";
+
+export class OilEngineDetailsApi <SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
+
+  /**
+  * No description
+  *
+  * @tags
+  * @name GetBasicInfo
+  * @summary 获取油机详情基本信息
+  * @request GET:
+  * @secure
+  */
+
+  timer = 500
+
+  getBasicInfoDto = () =>
+    new Promise(resolve => {
+      setTimeout(()=>{
+        resolve({
+          data:{
+            oilEngineNumber:"4",
+            serialNumber:"1904344P",
+            oilCompanies:"中石化安徽宣城石油分公司深爱的深爱的",
+            fuelDispenserManufacturer:"托肯恒山科技(广州)有限公司",
+            gasStation:"中石化安徽宣城金陵加油站",
+            specifications:"THD2244B2",
+            measuringRange:"2L-50L",
+            accuracyLevel:"0.3",
+            factoryCode:"1904344P",
+            onlineStatus:"离线",
+            alarmStatus:"严重报警",
+            imgUrl:"upload/2023/09/15/65048ee6-9b3f-2234-0097-734b351ca09d.png"
+          }
+        })
+      },this.timer)
+    })
+
+
+  getAlarmHistoryDto = () =>
+    new Promise(resolve => {
+      setTimeout(() => {
+        resolve({
+          total:100,
+          list:[{
+            time:'2023-07-23 09:36',
+            gasStation:"中化安徽宣城金陵加油站",
+            fillingMachine:"4",
+            fuelDispenserSerialNumber:"1904344P",
+            alarmSource:"云平台",
+            alarmType:"加油机离线",
+            alarmDescription:"加油机(监督装置)长期离线"
+          },{
+            time:'2023-07-23 09:36',
+            gasStation:"中化安徽宣城金陵加油站",
+            fillingMachine:"4",
+            fuelDispenserSerialNumber:"1904344P",
+            alarmSource:"云平台",
+            alarmType:"加油机离线",
+            alarmDescription:"加油机(监督装置)长期离线"
+          },{
+            time:'2023-07-23 09:36',
+            gasStation:"中化安徽宣城金陵加油站",
+            fillingMachine:"4",
+            fuelDispenserSerialNumber:"1904344P",
+            alarmSource:"云平台",
+            alarmType:"加油机离线",
+            alarmDescription:"加油机(监督装置)长期离线"
+          },{
+            time:'2023-07-23 09:36',
+            gasStation:"中化安徽宣城金陵加油站",
+            fillingMachine:"4",
+            fuelDispenserSerialNumber:"1904344P",
+            alarmSource:"云平台",
+            alarmType:"加油机离线",
+            alarmDescription:"加油机(监督装置)长期离线"
+          }]
+        })
+      },this.timer)
+    })
+
+  getLifeCycleDto = () =>
+    new Promise(resolve => {
+      setTimeout(() => {
+        resolve({
+          total:100,
+          list:[{
+            time:"2023-07-23 09:36",
+            operator:"托肯",
+            operatorID:"123",
+            operation:"132",
+          },{
+            time:"2023-07-23 09:36",
+            operator:"托肯",
+            operatorID:"123",
+            operation:"132",
+          },{
+            time:"2023-07-23 09:36",
+            operator:"托肯",
+            operatorID:"123",
+            operation:"132",
+          },{
+            time:"2023-07-23 09:36",
+            operator:"托肯",
+            operatorID:"123",
+            operation:"132",
+          }]
+        })
+      },this.timer)
+    })
+}

admin.ui.plus-master/src/views/admin/product/goodInfo/index.vue

@@ -4,7 +4,7 @@
     <el-row>
       <!-- 基础信息 -->
       <el-col :xs="24" >
-        <el-card shadow="hover" header="基础信息">
+        <el-card shadow="hover" header="基本信息">
           <div class="basicInformation" v-loading="goods.loadingBasic">
             <div class="basicInformation-left">
               <div class="item ">
@@ -174,7 +174,7 @@
                             alt="fgg"
                             class="img"
                             fit="contain"
-                            :src="baseUrl + '/' + goods.basicInformation.img" >
+                            :src="goods.basicInformation.img ? baseUrl + '/' + goods.basicInformation.img : '' " >
                     <template #error>
                       <div class="image-slot">
                         <el-icon><icon-picture /></el-icon>
@@ -454,13 +454,10 @@ onMounted(() => {
 })
 
 </script>
+
 <style scoped lang="scss">
 .goodInfo{
   font-weight: 500;
-  .el-card{
-    margin-bottom: 20px;
-  }
-
 
   .basicInformation{
     display: flex;
@@ -478,14 +475,13 @@ onMounted(() => {
       max-width: 65%;
       min-width: 300px;
       .item{
+        display: inline-block;
         cursor: pointer;
         width: 240px;/*设置显示的最大宽度*/
         height:40px;
         overflow:hidden;/*超出部分隐藏*/
         white-space:nowrap;/*强制单行显示*/
         text-overflow: ellipsis;
-        display: flex;
-        align-items: center;
 
         .bold-font{
           font-weight: bold;

admin.ui.plus-master/src/views/admin/statement/listOfOilEngines/index.vue

@@ -23,8 +23,8 @@
       </el-col>
       <!--列表-->
       <el-col :xs="24">
-        <el-card class="mt8" shadow="hover">
-          <el-table v-loading="state.loading" stripe :data="state.list" row-key="id" style="width: 100%">
+        <el-card style="height: 70vh"  class="my-fill mt8" shadow="hover">
+          <el-table  v-loading="state.loading" stripe :data="state.list" row-key="id" style="width: 100%">
             <el-table-column type="index" label="序号" width="60"/>
             <el-table-column prop="id" label="GUID"  />
             <el-table-column prop="name" label="名称"  >

admin.ui.plus-master/src/views/admin/statement/oilEngineDetails/index.vue

@@ -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>