feat(油机列表详情): 编写油机列表详情静态页面

完成油机列表详情静态页面的编写。

admin.ui.plus-master/src/api/admin/reportManagement/README.md

@@ -8,4 +8,8 @@
 
 ## oilEngineDetails
 
-	报表管理 - 油机详情 API + DTO
+	报表管理 - 油机详情 API + DTO
+
+## moreOilEngineDetails
+
+	报表管理 - 油机列表 - 查看更多 API + DTO

admin.ui.plus-master/src/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi.ts

@@ -0,0 +1,200 @@
+import {HttpClient} from "/@/api/admin/http-client";
+
+export class MoreOilEngineDetailsApi<SecurityDataType = unknown> extends HttpClient<SecurityDataType>{
+
+  timer = 400
+  /**
+   * No description
+   *
+   * @tags data
+   * @name getOilListData
+   * @summary  获取油机列表详情数据
+   * @request GET:
+   * @secure
+   */
+  getOilListData = () =>
+    new Promise(resolve => {
+      setTimeout(() => {
+        resolve(
+          {
+            success: true,
+            code: null,
+            msg: null,
+            data:
+              [
+                {
+                  oilEngineName: "17",
+                  oilEngineStatus: "离线",
+                  oilSpecifications: "1主板1枪",
+                  oils: "95号车用汽油",
+                  selfLockingState: "关闭",
+                  ECQSCode: "200023204009",
+                },
+                {
+                  oilEngineName: "18",
+                  oilEngineStatus: "离线",
+                  oilSpecifications: "1主板2枪",
+                  oils: "95号车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204015",
+                },
+                {
+                  oilEngineName: "19",
+                  oilEngineStatus: "离线",
+                  oilSpecifications: "1主板3枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204036",
+                },
+                {
+                  oilEngineName: "20",
+                  oilEngineStatus: "离线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                },
+                {
+                  oilEngineName: "21",
+                  oilEngineStatus: "在线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                },
+                {
+                  oilEngineName: "22",
+                  oilEngineStatus: "在线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                },
+                {
+                  oilEngineName: "23",
+                  oilEngineStatus: "离线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                },
+                {
+                  oilEngineName: "24",
+                  oilEngineStatus: "在线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                },
+                {
+                  oilEngineName: "25",
+                  oilEngineStatus: "在线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                },
+                {
+                  oilEngineName: "26",
+                  oilEngineStatus: "在线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                },
+                {
+                  oilEngineName: "27",
+                  oilEngineStatus: "在线",
+                  oilSpecifications: "1主板4枪",
+                  oils: "98车用汽油",
+                  selfLockingState: "已启动",
+                  ECQSCode: "200023204059",
+                }
+              ]
+          }
+        )
+      },this.timer)
+    })
+
+  /**
+   * No description
+   *
+   * @tags data
+   * @name getTableData
+   * @summary  获取表格数据对象
+   * @request GET:
+   * @secure
+   */
+  getTableData = () =>
+    new Promise(resolve => {
+      setTimeout(() => {
+        resolve({
+          success: true,
+          code: null,
+          msg: null,
+          data:[{
+            time: "string",
+            refuelingGun: "string",
+            alarmSource: "string",
+            alarmDescription: "string",
+            alarmType: "string"
+          },{
+            time: "string",
+            refuelingGun: "string",
+            alarmSource: "string",
+            alarmDescription: "string",
+            alarmType: "string"
+          },{
+            time: "string",
+            refuelingGun: "string",
+            alarmSource: "string",
+            alarmDescription: "string",
+            alarmType: "string"
+          },{
+            time: "string",
+            refuelingGun: "string",
+            alarmSource: "string",
+            alarmDescription: "string",
+            alarmType: "string"
+          }]
+        })
+      },this.timer)
+    })
+
+  /**
+   * No description
+   *
+   * @tags data
+   * @name getDetailsData
+   * @summary  获取油机详情数据对象
+   * @request GET:
+   * @secure
+   */
+  getDetailsData = () =>
+    new Promise(resolve => {
+      setTimeout(() => {
+        resolve({
+          success: true,
+          code: null,
+          msg: null,
+          data:{
+            oilEngineName: "4",
+            factoryNumber: "1904344P",
+            model: "4枪4显2油品潜油泵",
+            manufacture: "托肯恒山科技(广州)有限公司",
+            specifications: "THD2244B2",
+            dateOfManufacture: "2019-11-27 18:28",
+            measuringRange: "5L-50L",
+            installDate: "2019-11-27 18:28",
+            accuracyLevel: "0.3",
+            dateOfActivation: "2019-11-28 18:28",
+            equipmentStatus: "启动",
+            onlineStatus: "离线",
+            alarmStatus: "严重报警",
+            numberOfAlarms: "0",
+            accumulatedOnline: "945天"
+          }
+        })
+      },this.timer)
+    })
+}

admin.ui.plus-master/src/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto.ts

@@ -0,0 +1,76 @@
+/**
+ * 报表管理 - 油机列表 - 查看更多
+ * 数据对象的Dto
+ * */
+
+/**
+ * 表格数据对象
+ */
+export interface moreOilEngineDetails_TableData {
+  /**时间*/
+  time: string
+  /**加油枪*/
+  refuelingGun: string
+  /**报警来源*/
+  alarmSource: string
+  /**报警描述*/
+  alarmDescription: string
+  /**报警类型*/
+  alarmType: string
+}
+
+
+/**
+ * 油机详情数据对象
+ */
+export interface moreOilEngineDetails_DetailsData {
+  /**油机名称*/
+  oilEngineName: string,
+  /**出厂编号*/
+  factoryNumber: string,
+  /**机型*/
+  model: string,
+  /**制造商*/
+  manufacture: string,
+  /**规格参数*/
+  specifications: string,
+  /**生产日期*/
+  dateOfManufacture: string,
+  /**测量范围*/
+  measuringRange: string,
+  /**安装日期*/
+  installDate: string,
+  /**准确度等级*/
+  accuracyLevel: string,
+  /**启用日期*/
+  dateOfActivation: string,
+  /**设备状态*/
+  equipmentStatus: string,
+  /**在线状态*/
+  onlineStatus: string,
+  /**报警状态*/
+  alarmStatus: string,
+  /**报警次数*/
+  numberOfAlarms: string,
+  /**累计在线时间*/
+  accumulatedOnline: string
+}
+
+
+/**
+ * 油机列表详情数据对象
+ */
+export interface moreOilEngineDetails_OilListData{
+  /**油机名称*/
+  oilEngineName: string
+  /**油机状态*/
+  oilEngineStatus: string
+  /**油机规格*/
+  oilSpecifications: string
+  /**油品*/
+  oils: string
+  /**自锁状态*/
+  selfLockingState: string
+  /**ECQS编码*/
+  ECQSCode: string
+}

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

@@ -11,16 +11,79 @@
             ></el-alert>
           </div>
           <div class="ma-con">
-            <div class="left-con">
-
+            <div class="top-con" id="top-conId" v-loading="oilListData.loading">
+              <el-scrollbar>
+                <div class="scrollbar-flex-content" >
+                  <div :class="{'card':true,'active-card':index === 0} " name="card" @click="onCardChange($event,item)"  v-for="(item,index) in oilListData.list" v-bind:key="index"  >
+                    <div class="info-con">
+                      <span>{{item.oilEngineName}}&nbsp;&nbsp;
+                        <span :style="{color:item.oilEngineStatus === '在线' ? '#67C23A' : '#F56C6C'}">
+                          {{item.oilEngineStatus}}
+                        </span>
+                      </span>
+                      <span >{{item.oilSpecifications}}</span>
+                    </div>
+                    <div class="info-con">
+                      <span>油品:&nbsp;{{item.oils}}</span>
+                      <span>自锁状态:&nbsp;
+                        <span :style="{color:item.selfLockingState === '已启动' ? '#67C23A' : '#F56C6C'}">{{item.selfLockingState}}</span>
+                      </span>
+                    </div>
+                    <div class="info-con">
+                      <span>ESQS编码:&nbsp;{{item.ECQSCode}}</span>
+                    </div>
+                  </div>
+                </div>
+              </el-scrollbar>
             </div>
-            <div class="mid-con">
-              <div class="top">
-              </div>
-              <div class="down">
+            <div class="bom-con">
+              <div class="bomCon-lef">3D</div>
+              <div class="bomCon-rig">
+                <div class="bomConR-lef">
+                  <el-card v-loading="detailsData.loading"  style="height:100%;" :header="detailsData.list.oilEngineName+'号机油机'">
+                      <div class="oilInfo-con" >
+                        <div class="oilInfo-item">出厂编号:&nbsp;{{detailsData.list.factoryNumber}}</div>
+                        <div class="oilInfo-item">机型:&nbsp;{{detailsData.list.model}}</div>
+                        <div class="oilInfo-item">制造商:&nbsp;{{detailsData.list.manufacture}}</div>
+                        <div class="oilInfo-item oilInfo-item-two">
+                          <span>规格参数:&nbsp;{{detailsData.list.specifications}}</span>
+                          <span>生产日期:&nbsp;{{detailsData.list.dateOfManufacture}}</span>
+                        </div>
+                        <div class="oilInfo-item oilInfo-item-two">
+                          <span>测量范围:&nbsp;{{detailsData.list.measuringRange}}</span>
+                          <span>安装日期:&nbsp;{{detailsData.list.installDate}}</span>
+                        </div>
+                        <div class="oilInfo-item oilInfo-item-two">
+                          <span>准确度等级:&nbsp;{{detailsData.list.accuracyLevel}}</span>
+                          <span>启用日期:&nbsp;{{detailsData.list.dateOfActivation}}</span>
+                        </div>
+                        <div class="oilInfo-item oilInfo-item-two">
+                          <span>设备状态:&nbsp;{{detailsData.list.equipmentStatus}}</span>
+                          <span>在线状态:&nbsp;{{detailsData.list.onlineStatus}}</span>
+                        </div>
+                        <div class="oilInfo-item oilInfo-item-two">
+                          <span>报警状态:&nbsp;{{detailsData.list.alarmStatus}}</span>
+                          <span>报警次数:&nbsp;{{detailsData.list.numberOfAlarms}}</span>
+                        </div>
+                        <div class="oilInfo-item oilInfo-item-two">
+                          <span>累计在线时间:&nbsp;{{detailsData.list.accumulatedOnline}}</span>
+                        </div>
+                      </div>
+                  </el-card>
+                </div>
+                <div class="bomConR-rig">
+                  <el-card v-loading="tableData.loading"  style="height:100%" >
+                    <el-table  :data="tableData.list" stripe  row-key="id" style="width: 100%">
+                      <el-table-column prop="time" label="时间"  />
+                      <el-table-column prop="refuelingGun" label="加油枪" />
+                      <el-table-column prop="alarmSource" label="报警来源" />
+                      <el-table-column prop="alarmDescription" label="报警描述" />
+                      <el-table-column prop="alarmType" label="报警类型" />
+                    </el-table>
+                  </el-card>
+                </div>
               </div>
             </div>
-            <div class="rig-con"></div>
           </div>
         </el-card>
       </el-col>
@@ -31,34 +94,200 @@
 
 <script setup lang="ts">
 
+import {onMounted, reactive, ref, watch} from "vue";
+import {
+  moreOilEngineDetails_DetailsData, moreOilEngineDetails_OilListData,
+  moreOilEngineDetails_TableData
+} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
+import {MoreOilEngineDetailsApi} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
+
+/******************************数据对象***************************************/
+
+/**
+ * 表格数据对象
+ */
+const tableData = reactive({
+  loading: false,
+  list: [] as Array<moreOilEngineDetails_TableData>
+})
+
+/**
+ * 油机详情数据对象
+ */
+const detailsData = reactive({
+  loading: false,
+  list: {} as moreOilEngineDetails_DetailsData
+})
+
+/**
+ * 油机列表详情数据对象
+ */
+const oilListData = reactive({
+  loading: false,
+  list: [] as Array<moreOilEngineDetails_OilListData>
+})
+
+/**
+ * 油机列表初始ID
+ */
+const initID = ref()
+/******************************数据对象***************************************/
+
+/*******************************方法**************************************/
+
+/**
+ * 变换时改样式
+ * @param event
+ * @param item
+ */
+const onCardChange = (event, item) => {
+  // console.log(event)
+  // console.log(item);
+  let ele = event.target
+
+  if( ele.getAttribute('name') !== 'card') {
+    ele = ele.closest('.card')
+  }
+
+  if(ele.classList.contains("active-card")) return
+
+  initID.value = item.oilEngineName
+
+  const parentElement = document.getElementById('top-conId')
+  const myElement = parentElement.querySelector('.active-card')
+
+  if(myElement){
+    myElement.classList.remove('active-card')
+  }
+
+  ele.classList.add("active-card")
+}
+
+watch(() => initID.value, ()=>{
+  initTableData()
+  initDetailsData()
+})
+
+/*******************************方法**************************************/
+
+/**********************************初始化***********************************/
+
+/**
+ * 初始化油机列表详情数据对象
+ */
+const initOilListData = async () => {
+  oilListData.loading = true
+  const { data } = await new MoreOilEngineDetailsApi().getOilListData()
+  oilListData.list = data
+  initID.value = data[0].oilEngineName
+  oilListData.loading = false
+}
+
+/**
+ * 初始化表格数据对象
+ */
+const initTableData = async () => {
+  tableData.loading = true
+  const { data } = await new MoreOilEngineDetailsApi().getTableData()
+  tableData.list = data
+  tableData.loading = false
+}
+
+/**
+ * 初始化油机详情数据对象
+ */
+const initDetailsData = async () => {
+  detailsData.loading = true
+  const { data } = await new MoreOilEngineDetailsApi().getDetailsData()
+  detailsData.list = data
+  detailsData.loading = false
+}
+
+const init = () => {
+  initOilListData()
+}
+
+onMounted(() => {
+  init()
+})
+
+/**********************************初始化***********************************/
+
+
+
 </script>
 
 <style scoped lang="scss">
   .all-con {
-    .tip-con {
-      //height: 5%;
-    }
+
     .ma-con {
-      display: flex;
       height: 100%;
-      .left-con {
-        width: 25%;
-        background-color: #8c939d;
-      }
-      .mid-con {
-        width: 55%;
-        .top {
-          height: 45%;
-          background-color: #95d475;
+      .top-con {
+        height: 18%;
+        .scrollbar-flex-content {
+          display: flex;
+          height: 100%;
+        }
+
+        .card {
+          flex-shrink: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          padding: 10px;
+          width: 240px;
+          margin: 14px;
+          border-radius: 4px;
+          box-shadow: var(--el-box-shadow-light);
+          cursor: pointer;
+          font-size: 12px;
+          font-weight: 600;
+
+          .info-con {
+            display: flex;
+            justify-content: space-between;
+          }
         }
-        .down {
-          height: 55%;
-          background-color: #19d4ae;
+
+        .active-card {
+          background-color: #9fcaf3;
         }
       }
-      .rig-con {
-        width: 20%;
-        background-color: #869fe4;
+      .bom-con {
+        display: flex;
+        height: 82%;
+
+        .bomCon-lef {
+          width: 24%;
+        }
+
+        .bomCon-rig {
+          display: flex;
+          width: 80%;
+
+          .bomConR-lef {
+            width: 50%;
+
+            .oilInfo-con {
+
+              .oilInfo-item {
+                margin-bottom: 25px;
+              }
+              .oilInfo-item-two > span {
+                display: inline-block;
+                width: 50%;
+              }
+            }
+          }
+
+          .bomConR-rig {
+            width: 50%;
+          }
+
+          .bomConR-lef, .bomConR-rig {
+            padding: 20px;
+          }
+        }
       }
     }
   }