feat:测试页面视口

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

@@ -1,135 +1,146 @@
 <template>
   <div class="all-con" style="position: relative;">
-    <!-- 顶部图标和导航部分 -->
-    <el-icon style="position: absolute;left: -15px;top: 17px;">
-      <component style="color:#fff;background-color: #3d3dff;height: 2.5em;border-radius:5px 0 0 5px;"
-        :is="showicon? CaretLeft : CaretRight" @click="onShowHide" />
-    </el-icon>
-    <el-card class="oilInfo-bottom one">
-      <el-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em">
-        <!-- 导航选项 -->
-        <el-col :span="1">
-          <div :style="isDisplay == 1? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览</div>
-        </el-col>
-        <el-col :span="2">
-          <div :style="isDisplay == 2? 'border-bottom:1px solid blue' : 'border:none'" @click="display(2)">报警</div>
-        </el-col>
-        <el-col :span="3" class="oilInfo-bottom">
-          <div :style="isDisplay == 3? 'border-bottom:1px solid blue' : 'border:none'" @click="display(3)">ECQS编码状态</div>
-        </el-col>
-        <el-col :span="3" class="oilInfo-bottom">
-          <div :style="isDisplay == 4? 'border-bottom:1px solid blue' : 'border:none'" @click="display(4)">维修记录</div>
-        </el-col>
-        <el-row :span="15" class="oilInfo-bottom to-flex" style="position: absolute;right: 0;">
-          <div style="margin-right: 1em;">图例：</div>
-          <div style="margin-right: 2em;">
-            <div class="status-point" style="background-color:#5b53f9;right: 18.5em;top: 0.75em;" />在线
-          </div>
-          <div style="margin-right: 0.75em;">
-            <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />离线
-          </div>
-          <div style="margin-right: 0.75em;">
-            <img :src="uurl" style="width: 1em;margin-right: 0.25em;">校验成功
-          </div>
-          <div style="margin-right: 2em;">
-            <img :src="urrl" style="width: 1em;margin-right: 0.25em;">校验失败
-          </div>
-        </el-row>
-      </el-row>
-    </el-card>
-    <div class="tip-con">
-      <el-alert v-if="detailsData.list.onlineStatus === '离线'" title="加油机长时间离线" type="error" class="mb15"></el-alert>
-      <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success" class="mb15"></el-alert>
-    </div>
-    <!-- 新的父容器包裹油机内容，方便设置样式 -->
-    <div class="engine-content-container">
-      <el-card class="oilInfo-con oilInfo-bottom">
-        <el-row class='oilInfo-bottom'>
-          <img class="oilInfo-img" :src="url">
-          <div>
-            <el-col :span="24" class="oilInfo-bottom">
-              <div class="status-point oilInfo-con-first"
-                :style="detailsData.list.onlineStatus == '在线'? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
-              <span style="margin:0 0.5em 0 1em">{{ detailsData.list.name }}号机油机</span>
-              <img :src="uurl" style="width: 1em;">
-            </el-col>
-            <el-col :span="24" class="oilInfo-bottom">
-              <span class='oilInfo-item'>出厂编号：</span>{{ detailsData.list.serialNumber }}
-            </el-col>
-            <el-col :span="24" class="oilInfo-bottom">
-              <span class='oilInfo-item'>制造商：</span>{{ detailsData.list.manufacturer }}
-            </el-col>
-          </div>
-        </el-row>
-        <div>
-          <el-row :gutter="20">
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>机型：</span>{{ detailsData.list.model }}
-            </el-col>
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>规格参数：</span>{{ detailsData.list.modelSpec }}
-            </el-col>
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>测量范围：</span>{{ detailsData.list.measureRang }}
-            </el-col>
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>准确度等级：</span>{{ detailsData.list.accuracyLevel }}
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>生产日期：</span>{{ detailsData.list.createdTime }}
-            </el-col>
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>安装日期：</span>{{ detailsData.list.installationDate }}
-            </el-col>
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>启用日期：</span>{{ detailsData.list.startupDate }}
-            </el-col>
-            <el-col :span="6" class="oilInfo-bottom">
-              <span class='oilInfo-item'>累计在线时间：</span>{{ detailsData.list.onlineDesc }}
-            </el-col>
+      <el-icon style="position: absolute;left: -15px;top: 17px;">
+          <component style="color:#fff;background-color: #3d3dff;height: 2.5em;border-radius:5px 0 0 5px;"
+              :is="showicon ? CaretLeft : CaretRight" @click="onShowHide" />
+      </el-icon>
+      <el-card class="oilInfo-bottom one">
+          <el-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em">
+
+              <el-col :span="1">
+                  <div :style="isDisplay == 1 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览
+                  </div>
+              </el-col>
+              <el-col :span="2">
+                  <div :style="isDisplay == 2 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(2)">报警
+                  </div>
+              </el-col>
+              <el-col :span="3" class="oilInfo-bottom">
+                  <div :style="isDisplay == 3 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(3)">
+                      ECQS编码状态
+                  </div>
+              </el-col>
+              <el-col :span="3" class="oilInfo-bottom">
+                  <div :style="isDisplay == 4 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(4)">
+                      维修记录
+                  </div>
+              </el-col>
+              <el-row :span="15" class="oilInfo-bottom to-flex" style="position: absolute;right: 0;">
+                  <div style="margin-right: 1em;">
+                      图例：
+                  </div>
+                  <div style="margin-right: 2em;">
+                      <div class="status-point" style="background-color:#5b53f9;right: 18.5em;top: 0.75em;" />
+                      在线
+                  </div>
+                  <div style="margin-right: 0.75em;">
+                      <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />
+                      离线
+                  </div>
+                  <div style="margin-right: 0.75em;">
+                      <img :src="uurl" style="width: 1em;margin-right: 0.25em;">
+                      校验成功
+                  </div>
+                  <div style="margin-right: 2em;">
+                      <img :src="urrl" style="width: 1em;margin-right: 0.25em;">
+                      校验失败
+                  </div>
+              </el-row>
           </el-row>
-        </div>
       </el-card>
-    </div>
-    <!-- 新的父容器包裹油枪信息，方便设置样式 -->
-    <div class="nozzle-content-container">
-      <el-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
-        <el-col :span="8" v-for="(item, index) in listcom" v-bind:key="index">
-          <el-card class="oilInfo-msg oilInfo-bottom"
-            @click="toParts(item.name, item.mainBoard_NozzleNo, item.onlineStatus, item.fuelName, item.alarming, item.code)">
-            <el-row class="oilInfo-bottom">
-              <img :src="url" class="oilInfo-img">
-              <div>
-                <el-col :span="24" class="oilInfo-bottom">
-                  <el-text tag="b">逻辑枪号：{{ item.name }}</el-text>
-                  <div style="position: absolute;right: 10%;top: 5%;">
-                    <div class="status-point"
-                      :style="item.onlineStatus == '在线'? 'background-color:#5b53f9' : 'background-color:#9f9fa3'">
-                    </div>
-                    <img :src="uurl" style="width: 1em;">
-                  </div>
-                </el-col>
-                <el-col :span="24" class="oilInfo-bottom">
-                  <span class="oilInfo-item-two">物理枪号：</span>{{ item.mainBoard_NozzleNo }}
-                </el-col>
-                <el-col :span="24" class="oilInfo-bottom">
-                  <span class="oilInfo-item-two">自锁功能：</span>{{ item.alarming }}
-                </el-col>
-              </div>
-            </el-row>
-            <el-row class="oilInfo-bottom">
-              <span class="oilInfo-item-two">油品：</span>{{ item.fuelName }}
-            </el-row>
-            <el-row>
-              <span class="oilInfo-item-two">ECQS编码：</span>{{ item.code }}
+      <div class="tip-con">
+          <el-alert v-if="detailsData.list.onlineStatus === '离线'" title="加油机长时间离线" type="error"
+              class="mb15"></el-alert>
+          <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success"
+              class="mb15"></el-alert>
+      </div>
+        <!-- 油机内容 -->
+        <el-card class="oilInfo-con oilInfo-bottom">
+            <el-row class='oilInfo-bottom'>
+                <img class="oilInfo-img" :src="url">
+                <div>
+                    <el-col :span="24" class="oilInfo-bottom">
+                        <div class="status-point oilInfo-con-first"
+                            :style="detailsData.list.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
+                        <span style="margin:0 0.5em 0 1em">{{ detailsData.list.name }}号机油机</span>
+                        <img :src="uurl" style="width: 1em;">
+                    </el-col>
+                    <el-col :span="24" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>出厂编号：</span>{{ detailsData.list.serialNumber }}
+                    </el-col>
+                    <el-col :span="24" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>制造商：</span>{{ detailsData.list.manufacturer }}
+                    </el-col>
+                </div>
             </el-row>
-          </el-card>
-        </el-col>
+            <div>
+                <el-row :gutter="20">
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>机型：</span>{{ detailsData.list.model }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>规格参数：</span>{{ detailsData.list.modelSpec }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>测量范围：</span>{{ detailsData.list.measureRang }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>准确度等级：</span>{{ detailsData.list.accuracyLevel }}
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>生产日期：</span>{{ detailsData.list.createdTime }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>安装日期：</span>{{ detailsData.list.installationDate }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>启用日期：</span>{{ detailsData.list.startupDate }}
+                    </el-col>
+                    <el-col :span="6" class="oilInfo-bottom">
+                        <span class='oilInfo-item'>累计在线时间：</span>{{ detailsData.list.onlineDesc }}
+                    </el-col>
+                </el-row>
+            </div>
+        </el-card>
+      <!-- 油枪信息 -->
+      <el-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
+          <el-col :span="8" v-for="(item, index) in oilListData.firstList" v-bind:key="index">
+              <el-card class="oilInfo-msg oilInfo-bottom"
+                  @click="toParts(item.name, item.mainBoard_NozzleNo, item.onlineStatus, item.fuelName, item.alarming, item.code)">
+                  <el-row class="oilInfo-bottom">
+                      <img :src="url" class="oilInfo-img">
+                      <div>
+                          <el-col :span="24" class="oilInfo-bottom">
+                              <el-text tag="b">逻辑枪号：{{ item.name }}</el-text>
+                              <div style="position: absolute;right: 10%;top: 5%;">
+                                  <div class="status-point"
+                                      :style="item.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'">
+                                  </div>
+                                  <img :src="uurl" style="width: 1em;">
+                              </div>
+                          </el-col>
+                          <el-col :span="24" class="oilInfo-bottom">
+                              <span class="oilInfo-item-two">物理枪号：</span>{{
+                                  item.mainBoard_NozzleNo }}
+                          </el-col>
+                          <el-col :span="24" class="oilInfo-bottom">
+                              <span class="oilInfo-item-two">自锁功能：</span>{{ item.alarming }}
+                          </el-col>
+                      </div>
+                  </el-row>
+                  <el-row class="oilInfo-bottom">
+                      <span class="oilInfo-item-two">油品：</span>{{ item.fuelName }}
+                  </el-row>
+                  <el-row>
+                      <span class="oilInfo-item-two">ECQS编码：</span>{{ item.code }}
+                  </el-row>
+              </el-card>
+          </el-col>
       </el-row>
-    </div>
   </div>
+
 </template>
 
 <script setup lang="ts">
@@ -149,6 +160,7 @@ import {
     CaretRight,
     CaretLeft,
 } from '@element-plus/icons-vue'
+import { da } from "element-plus/es/locale";
 
 /******************************数据对象***************************************/
 
@@ -186,7 +198,9 @@ const detailsData = reactive({
  */
 const oilListData = reactive({
     loading: false,
-    list: [] as Array<NozzlecontrolDtl>
+    list: [] as Array<NozzlecontrolDtl>,
+    firstList : [] as Array<NozzlecontrolDtl>,
+    lastList : [] as Array<NozzlecontrolDtl>
 })
 /**
  * 油机列表初始ID
@@ -201,6 +215,8 @@ const toPage = () => {
  * 油枪列表相关数据
  */
 let listcom = JSON.parse(JSON.stringify(oilListData.list))
+
+
 let flagData = reactive({
     keyData: 0,
     isFlag: '所有'
@@ -268,6 +284,8 @@ const initOilListData = async () => {
     const fuelId = props.id
     const { data } = await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: fuelId })
     oilListData.list = data
+    oilListData.firstList = data.slice(0,4)
+    oilListData.lastList = data.slice(4)
     oilListData.loading = false
     listcom = data
     flagData.keyData = Math.random()
@@ -340,6 +358,10 @@ onMounted(() => {
 
 // 路由跳转 -- 部件信息图
 const toParts = ((name: any, NozzleNo: any, status: any, fuelName: any, alarming: any, code: any) => {
+
+  console.log("原油枪列表",listcom)
+  console.log("第一个油枪列表",oilListData.firstList);
+  return;
     router.push({
         path: `/statement/partInformation`,
         query: {

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

@@ -50,7 +50,7 @@
       </el-col>
       <!--表格-->
       <el-col :xs="24">
-        <el-card style="height: 47vh" class="my-fill mt8" shadow="hover">
+        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
           <el-table ref="multipleTableRef" v-loading="Data.loading" stripe :data="Data.tableModel" row-key="id"
             style="width: 100%">
             <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"