feat:电子档案 添加序列号查询和安装时间查询；详细样式对其；油站列表添加油站类型查询，添加列表项

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

@@ -16,6 +16,13 @@
                   <el-input v-model="Data.Filter.name" placeholder="请输入加油站名称" clearable></el-input>
                 </el-form-item>
               </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
+                <el-form-item label="油站类型">
+                  <el-select placeholder="请选择油站类型">
+                    <el-option/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
             </el-form-item>
           </el-form>
 
@@ -73,11 +80,15 @@ const Data = reactive({
   tableModel: [] as Array<gasStationFilterModel>,
   /**动态表头 */
   dynamicColumns: [
+    { prop: '', label: '省份' },
+    { prop: '', label: '城市' },
     { prop: 'name', label: '油站名称' },
     { prop: 'type', label: '油站类型' },
     { prop: 'address', label: '油站地址' },
+    { prop: '', label: '站长及联系方式' },
     { prop: 'dispensersTotal', label: '油机数量' },
     { prop: 'nozzleControlsTotal', label: '油枪数量' },
+    { prop: '', label: '启用时间(安装时间)' },
   ],
   /**分页标识 */
   pageInput: {

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

@@ -37,6 +37,18 @@
                   <!-- <el-input v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态" clearable></el-input> -->
                 </el-form-item>
               </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
+                <el-form-item label="序列号">
+                  <el-input placeholder="请输入序列号" clearable></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
+                <el-form-item label="安装时间">
+                  <el-date-picker type="datetime" v-model="value1"
+                                  value-format="YYYY-MM-DD HH:mm:ss" range-separator="To" date-format="MMM DD, YYYY" time-format="HH:mm"
+                                  placeholder="请输入安装时间"  :style="{ width: '240px' }" />
+                 </el-form-item>
+               </el-col>   
             </el-form-item>
           </el-form>
 
@@ -115,6 +127,10 @@ const globalCacheStore = useGlobalCacheStore()
 // const oilEngineStatusType = ref(globalCacheStore.getGlobalStore().get('oilEngineStatusType'))
 /**油机列表 - 列表设备状态、在线状态 */
 const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStatus'))
+
+// 安装日期假数据
+const value1 = ref('')
+
 /**
  * 油机列表数据对象
  */
@@ -264,14 +280,20 @@ onBeforeMount(() => {
 
 <style scoped lang="scss">
 .el-input,
-.el-select {
+.el-select,
+ {
   width: 240px;
 }
 
+.el-date-picker {
+  width: 240px !important;
+}
+
+
 /* 输入框标签固定四个字符宽度 */
 ::v-deep .el-form-item__label {
-  // 字体大小14，4个字符，12px右间距
-  width: 14*4px+12px;
+  // 字体大小14，5个字符，12px右间距
+  width: 14*5px+12px;
   justify-content: start;
 }
 

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

@@ -54,43 +54,8 @@
           <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success"
               class="mb15"></el-alert>
       </div>
-      <!-- 油枪信息 -->
-      <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>
-              <!-- 油机内容 -->
-              <el-card class="oilInfo-con oilInfo-bottom">
+        <!-- 油机内容 -->
+        <el-card class="oilInfo-con oilInfo-bottom">
             <el-row class='oilInfo-bottom'>
                 <img class="oilInfo-img" :src="url">
                 <div>
@@ -139,6 +104,41 @@
                 </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>
 
 </template>
@@ -424,7 +424,7 @@ const onShowHide = () => {
 }
 
 .oilInfo-con {
-    width: 25%;
+    width: 100%;
     height: 25%;
     border-radius: 10px;
 

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

@@ -133,7 +133,7 @@
                   </template>
                 </el-popover>
               </div>
-              <div class="item ">
+              <div class="item">
                 <el-popover placement="top-start" :width="200" title="修改时间" trigger="hover"
                   :content="basicInfo.info.modifiedTime">
                   <template #reference>
@@ -141,7 +141,7 @@
                   </template>
                 </el-popover>
               </div>
-              <div class="item">
+              <div class="item right">
                 <el-link class="my-el-link mr12 ml12" @click="toPage()" type="primary" size="small" :underline="false"
                   target="_blank">查看更多>></el-link>
               </div>
@@ -163,7 +163,7 @@
 
       <!--报警历史-->
       <el-col :xs="24">
-        <el-card class="mt8 my-fill" shadow="hover" header="报警历史">
+        <el-card class="mt8 my-fill" shadow="hover" header="报警历史" :style="{ height: '45vh' }" >
           <el-table v-loading="alarmHistory.loading" stripe :data="alarmHistory.list" row-key="id" style="width: 100%">
             <el-table-column prop="createdDate" label="时间" />
             <el-table-column prop="gasStation" label="加油站" />
@@ -196,7 +196,7 @@
 
       <!--生产日志-->
       <el-col :xs="24">
-        <el-card class="mt8 my-fill" shadow="hover" header="生命周期">
+        <el-card class="mt8 my-fill" shadow="hover" header="生命周期" :style="{ height: '45vh' }">
           <el-table v-loading="lifeCycle.loading" stripe :data="lifeCycle.list" row-key="id" style="width: 100%">
             <el-table-column prop="createdDate" label="时间" />
             <el-table-column prop="operator" label="操作人" />
@@ -452,45 +452,31 @@ onMounted(() => {
   font-weight: 500;
 
   .basicInformation {
-    display: flex;
-    display: -webkit-flex;
-    /* Safari */
-    justify-content: space-around;
-    align-items: center;
-    align-content: space-around;
-    flex-wrap: wrap-reverse;
-
-    .basicInformation-left {
-      display: flex;
-      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;
-      }
-
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .basicInformation-left {
+    flex: 1;
+    min-width: 300px;
+    max-width: calc(100% - 320px); /* 图片区域留出空间 */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 10px 20px;
+    align-content: start;
+    
+    .item {
+      min-width: 0; /* 防止内容溢出 */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+  }
 
-    .basicInformation-right {
-      width: 50%;
-      height: 100%;
-      max-width: 300px;
-      min-width: 200px;
-      padding: 0 10px;
+  .basicInformation-right {
+    flex: 0 0 300px;
+    padding: 0 10px;
+    /* 保持原有图片样式 */
 
       .img {
         width: 220px;