feat：修改可视化数据页面和油机详情页面

admin.ui.plus-master/src/theme/index.scss

@@ -9,3 +9,4 @@
 @import './waves.scss';
 @import './dark.scss';
 @import './my-flex.scss';
+@import './tableStyle.scss';

admin.ui.plus-master/src/views/admin/authorize/dispenserAuthCode/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="layout-pd" >
+  <div class="layout-pd">
     <el-row>
       <!--操作-->
-      <el-col :xs="24" >
+      <el-col :xs="24">
         <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
           <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
             <h1 style="margin-bottom: 10px;font-size: 30px;">油机授权码申请</h1>
@@ -10,58 +10,65 @@
           <div v-if="state.msgDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
             <h1 style="margin-bottom: 10px;color: #81B337;font-size: 20px;">授权码申请成功</h1>
           </div>
-          <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+          <div style="width: 100%;">
+            <el-form :inline="true" @submit.stop.prevent style="width: 20%;">
               <el-form-item label="油站名称" style="width: 100%;">
-                <el-input v-model="state.filter.station" style="width: 100%;" placeholder="请输入油站名称" @keyup.enter="onQuery" />
+                <el-input v-model="state.filter.station" style="width: 100%;" placeholder="请输入油站名称"
+                  @keyup.enter="onQuery" />
               </el-form-item>
             </el-form>
           </div>
-          <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+          <div style="width: 100%;">
+            <el-form :inline="true" @submit.stop.prevent style="width: 20%;">
               <el-form-item label="油机id" style="width: 100%;">
-                <el-input v-model="state.filter.dispenserID" style="width: 100%;" placeholder="请输入油机id" @keyup.enter="onQuery" />
+                <el-input v-model="state.filter.dispenserID" style="width: 100%;" placeholder="请输入油机id"
+                  @keyup.enter="onQuery" />
               </el-form-item>
             </el-form>
           </div>
-          <div v-if="state.pwdDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
-            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+          <div v-if="state.pwdDisplay" style="width: 100%;">
+            <el-form :inline="true" @submit.stop.prevent style="width: 20%;">
               <el-form-item label="油机授权码" style="width: 82%;">
-                <el-input disabled v-model="state.pwd" style="width: 100%;" placeholder="油机授权码" @keyup.enter="onQuery" />
+                <el-input disabled v-model="state.pwd" style="width: 100%;" placeholder="油机授权码"
+                  @keyup.enter="onQuery" />
               </el-form-item>
               <el-form-item>
                 <el-button id="copyBtn" :data-clipboard-text="state.pwd" type="primary" @click="onCopy()">复制</el-button>
               </el-form-item>
             </el-form>
           </div>
-          <div v-if="state.btnDisplay" style="display: flex;justify-content: center;align-items: center;">
-            <el-button style="margin-top: 10px;margin-bottom: 10px;width: 264px;height: 42px;" type="primary" @click="onQuery">申请油机授权码</el-button>
-          </div>
+
+          <hr>
+
+          <!-- 按钮  -->
+          <el-row justify="space-between" class="submit-button">
+            <el-row>
+            </el-row>
+            <el-row>
+              <div v-if="state.btnDisplay" style="display: flex;justify-content: center;align-items: center;">
+                <el-button style="margin-top: 10px;margin-bottom: 10px;width: 264px;height: 42px;" type="primary"
+                  @click="onQuery">申请油机授权码</el-button>
+              </div>
+            </el-row>
+          </el-row>
+
+
         </el-card>
       </el-col>
       <!--表格-->
-      <el-col  :xs="24" >
+      <el-col :xs="24">
         <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
-          <el-table ref="multipleTableRef"
-            v-loading="state.loading"
-            stripe :data="state.tableModel"
-            row-key="id"
-            style="width: 100%" >
-            <el-table-column type="index" label="记录" width="60"/>
-            <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
+          <el-table ref="multipleTableRef" v-loading="state.loading" stripe :data="state.tableModel" row-key="id"
+            style="width: 100%">
+            <el-table-column type="index" label="记录" width="60" />
+            <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop"
+              :label="column.label" />
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination
-              v-model:currentPage="state.pageInput.CurrentPage"
-              v-model:page-size="state.pageInput.PageSize"
-              :total="state.total"
-              :page-sizes="[10, 20, 50, 100]"
-              small
-              background
-              @size-change="onSizeChange"
-              @current-change="onCurrentChange"
-              layout="total, sizes, prev, pager, next, jumper"
-            />
+            <el-pagination v-model:currentPage="state.pageInput.CurrentPage"
+              v-model:page-size="state.pageInput.PageSize" :total="state.total" :page-sizes="[10, 20, 50, 100]" small
+              background @size-change="onSizeChange" @current-change="onCurrentChange"
+              layout="total, sizes, prev, pager, next, jumper" />
           </div>
         </el-card>
       </el-col>
@@ -77,19 +84,19 @@ import { ElMessage, ElTable } from 'element-plus'
 import { DispenserAuthCodeApi } from '/@/api/admin/deviceAuthorization/dispenserAuthCodeApi'
 import { FuelAuthCodeRecordDto } from '/@/api/admin/deviceAuthorization/dispenserAuthCodeDto'
 import Clipboard from 'clipboard'
-import type {pageInput} from "/@/api/admin/shareDto/shareDto";
+import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { AuthApi } from '/@/api/admin/Auth'
 
-const multipleTableRef=ref<InstanceType<typeof ElTable>>()
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 /**FTP申请页面对象 */
 const state = reactive({
-  time:'',
+  time: '',
   /**加载显示 */
   loading: false,
   /**条件查询模块 */
   filter: {
     /**油站名称 */
-    station:'',
+    station: '',
     /**申请日期*/
     applyDate: '',
     /**油机id */
@@ -99,8 +106,8 @@ const state = reactive({
     /**授权码类型*/
     type: ''
   },
-   /**分页标识 */
-   pageInput:{
+  /**分页标识 */
+  pageInput: {
     CurrentPage: 1,
     PageSize: 10,
   } as pageInput,
@@ -118,30 +125,30 @@ const state = reactive({
   ],
   /**授权码 */
   pwd: "",
-  pwdDisplay:false,
-  btnDisplay:true,
-  msgDisplay:false
+  pwdDisplay: false,
+  btnDisplay: true,
+  msgDisplay: false
 })
 
 /**初始化 */
 const init = async () => {
-  state.filter.applyDate=''
-  state.filter.station=''
-  state.filter.dispenserID=''
-  state.filter.name=''
-  state.filter.type=''
-  state.pwd=''
-  state.btnDisplay=true
-  state.msgDisplay=false
-  state.pwdDisplay=false
-  const res:any = await new DispenserAuthCodeApi().getDispenserAuthCodeRecord({...state.pageInput, filter:state.filter}).catch(() => {
+  state.filter.applyDate = ''
+  state.filter.station = ''
+  state.filter.dispenserID = ''
+  state.filter.name = ''
+  state.filter.type = ''
+  state.pwd = ''
+  state.btnDisplay = true
+  state.msgDisplay = false
+  state.pwdDisplay = false
+  const res: any = await new DispenserAuthCodeApi().getDispenserAuthCodeRecord({ ...state.pageInput, filter: state.filter }).catch(() => {
     state.loading = false
 
 
   })
   //console.log(res.data.list)
-  state.total=res.data.total
-  state.tableModel=res.data.list
+  state.total = res.data.total
+  state.tableModel = res.data.list
 }
 
 onMounted(() => {
@@ -169,84 +176,82 @@ onBeforeMount(() => {
 
 
 /**复制FTP密码 */
-const onCopy=()=>{
-  const clipboard=new Clipboard('#copyBtn')
-  clipboard.on('success',()=>{
+const onCopy = () => {
+  const clipboard = new Clipboard('#copyBtn')
+  clipboard.on('success', () => {
     ElMessage.success('复制成功')
     clipboard.destroy()
   })
-  clipboard.on('error',()=>{
+  clipboard.on('error', () => {
     ElMessage.error('复制失败')
     clipboard.destroy()
   })
 }
 /**申请FTP密码 */
-const onQuery =async () => {
-  if(state.filter.station =='' || state.filter.dispenserID =='' ){
+const onQuery = async () => {
+  if (state.filter.station == '' || state.filter.dispenserID == '') {
     ElMessage.error('请输入油站名称和油机id')
-  }else{
-  
-    const res=await new DispenserAuthCodeApi().getDispenserAuthCode({dispenserID:state.filter.dispenserID}).catch()
+  } else {
 
-    if(res.data.result == true)
-    {
-        state.pwd=res.data.authcode
-      state.msgDisplay=true
-      state.pwdDisplay=true
-      state.btnDisplay=false
-      const date=new Date()
-      let month=padZero(date.getMonth()+1)
-      let day=padZero(date.getDate())
-      let hour=padZero(date.getHours())
-      let minute=padZero(date.getMinutes())
-      let second=padZero(date.getSeconds())
-      state.filter.applyDate=date.getFullYear()+'-'+month+'-'+day+' '+hour+':'+minute+':'+second
-      const name:any=await new AuthApi().getUserProfile()
-      state.filter.name=name.data.name
+    const res = await new DispenserAuthCodeApi().getDispenserAuthCode({ dispenserID: state.filter.dispenserID }).catch()
 
-      var buf = state.filter.dispenserID;
-      var funthousand, funhundred, fundecade, funbit, funcode;
-      funthousand = (buf.charCodeAt(16 - 4)- 0x30- 0x11) * 1000;
-      funhundred = (buf.charCodeAt(16 - 3)- 0x30- 0x11) * 100;
-      fundecade = (buf.charCodeAt(16 - 2)- 0x30- 0x11) * 10;
-      funbit = (buf.charCodeAt(16 - 1)- 0x30- 0x11) * 1;
-      funcode = funthousand + funhundred + fundecade + funbit;
-
-/*
-      const buf = Buffer.from(state.filter.dispenserID, 'ascii');
-
- 
-
-      ElMessage.error(buf[0].toString())
-
-      for (let i = 0; i < 16; i++)
-      {
-        buf[i]=  (buf[i] - 0x11);
-      }
-
-      ElMessage.error(buf.toString());
-      //ElMessage.error(strb)
+    if (res.data.result == true) {
+      state.pwd = res.data.authcode
+      state.msgDisplay = true
+      state.pwdDisplay = true
+      state.btnDisplay = false
+      const date = new Date()
+      let month = padZero(date.getMonth() + 1)
+      let day = padZero(date.getDate())
+      let hour = padZero(date.getHours())
+      let minute = padZero(date.getMinutes())
+      let second = padZero(date.getSeconds())
+      state.filter.applyDate = date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+      const name: any = await new AuthApi().getUserProfile()
+      state.filter.name = name.data.name
 
+      var buf = state.filter.dispenserID;
       var funthousand, funhundred, fundecade, funbit, funcode;
-      funthousand = (buf[16 - 4] - 0x30) * 1000;
-      funhundred = (buf[16 - 3] - 0x30) * 100;
-      fundecade = (buf[16 - 2] - 0x30) * 10;
-      funbit = (buf[16 - 1] - 0x30) * 1;
+      funthousand = (buf.charCodeAt(16 - 4) - 0x30 - 0x11) * 1000;
+      funhundred = (buf.charCodeAt(16 - 3) - 0x30 - 0x11) * 100;
+      fundecade = (buf.charCodeAt(16 - 2) - 0x30 - 0x11) * 10;
+      funbit = (buf.charCodeAt(16 - 1) - 0x30 - 0x11) * 1;
       funcode = funthousand + funhundred + fundecade + funbit;
 
-      ElMessage.error(funcode.toString());
-*/
-      state.filter.type=funcode.toString();
+      /*
+            const buf = Buffer.from(state.filter.dispenserID, 'ascii');
+      
+       
+      
+            ElMessage.error(buf[0].toString())
+      
+            for (let i = 0; i < 16; i++)
+            {
+              buf[i]=  (buf[i] - 0x11);
+            }
+      
+            ElMessage.error(buf.toString());
+            //ElMessage.error(strb)
+      
+            var funthousand, funhundred, fundecade, funbit, funcode;
+            funthousand = (buf[16 - 4] - 0x30) * 1000;
+            funhundred = (buf[16 - 3] - 0x30) * 100;
+            fundecade = (buf[16 - 2] - 0x30) * 10;
+            funbit = (buf[16 - 1] - 0x30) * 1;
+            funcode = funthousand + funhundred + fundecade + funbit;
+      
+            ElMessage.error(funcode.toString());
+      */
+      state.filter.type = funcode.toString();
 
       await new DispenserAuthCodeApi().InsertDispenserAuthCode(state.filter)
-      const data:any = await new DispenserAuthCodeApi().getDispenserAuthCodeRecord({...state.pageInput, filter:state.filter}).catch(() => {
+      const data: any = await new DispenserAuthCodeApi().getDispenserAuthCodeRecord({ ...state.pageInput, filter: state.filter }).catch(() => {
         state.loading = false
       })
-      state.total=data.data.total
-      state.tableModel=data.data.list  
+      state.total = data.data.total
+      state.tableModel = data.data.list
     }
-    else
-    {
+    else {
       ElMessage.error(res.data.message)
     }
 
@@ -279,11 +284,11 @@ const onSizeChange = () => {
 }
 
 /**页数变化*/
-const onCurrentChange = () =>{
+const onCurrentChange = () => {
   init()
 }
-const padZero=(num:any)=>{
-  return num<10?'0'+num:num
+const padZero = (num: any) => {
+  return num < 10 ? '0' + num : num
 }
 </script>
 
@@ -291,10 +296,13 @@ const padZero=(num:any)=>{
 .my-el-link {
   font-size: 12px;
 }
+
 .el-form .el-col.mb20 {
   margin: 0 !important;
 }
-.el-input, .el-select {
+
+.el-input,
+.el-select {
   width: 240px;
 }
 </style>

admin.ui.plus-master/src/views/admin/authorize/fuelingFTP/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="layout-pd" >
+  <div class="layout-pd">
     <el-row>
       <!--操作-->
-      <el-col :xs="24" >
+      <el-col :xs="24">
         <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
           <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
             <h1 style="margin-bottom: 10px;font-size: 30px;">油机动态密钥生成</h1>
@@ -10,17 +10,19 @@
           <div v-if="state.msgDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
             <h1 style="margin-bottom: 10px;color: #81B337;font-size: 20px;">密码申请成功</h1>
           </div>
-          <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+          <div style="width: 100%;">
+            <el-form @submit.stop.prevent style="width: 20%;">
               <el-form-item label="申请备注" style="width: 100%;">
-                <el-input v-model="state.filter.info" style="width: 100%;" placeholder="请输入申请备注" @keyup.enter="onQuery" />
+                <el-input v-model="state.filter.info" style="width: 100%;" placeholder="请输入申请备注"
+                  @keyup.enter="onQuery" />
               </el-form-item>
             </el-form>
           </div>
           <div v-if="state.pwdDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
-            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+            <el-form @submit.stop.prevent style="width: 60%;">
               <el-form-item label="FTP密码" style="width: 82%;">
-                <el-input disabled v-model="state.pwd" style="width: 100%;" placeholder="FTP密码" @keyup.enter="onQuery" />
+                <el-input disabled v-model="state.pwd" style="width: 100%;" placeholder="FTP密码"
+                  @keyup.enter="onQuery" />
               </el-form-item>
               <el-form-item>
                 <el-button id="copyBtn" :data-clipboard-text="state.pwd" type="primary" @click="onCopy()">复制</el-button>
@@ -28,40 +30,44 @@
             </el-form>
           </div>
           <div v-if="state.timeDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
-            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+            <el-form @submit.stop.prevent style="width: 60%;">
               <el-form-item label="过期时间" style="width: 100%;">
                 {{ state.filter.expirationTime }}
               </el-form-item>
             </el-form>
           </div>
-          <div v-if="state.btnDisplay" style="display: flex;justify-content: center;align-items: center;">
-            <el-button style="margin-top: 10px;margin-bottom: 10px;width: 264px;height: 42px;" type="primary" @click="onQuery">申请油机FTP密码</el-button>
-          </div>
+
+          <hr style="margin-top: 20px;">
+
+          <!-- 按钮  -->
+          <el-row justify="space-between" class="submit-button">
+            <el-row>
+            </el-row>
+            <el-row>
+              <div v-if="state.btnDisplay" style="display: flex;justify-content: center;align-items: center;">
+                <el-button style="margin-top: 10px;margin-bottom: 10px;width: 264px;height: 42px;" type="primary"
+                  @click="onQuery">申请油机FTP密码</el-button>
+              </div>
+            </el-row>
+          </el-row>
+
+
         </el-card>
       </el-col>
       <!--表格-->
-      <el-col  :xs="24" >
+      <el-col :xs="24">
         <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
-          <el-table ref="multipleTableRef"
-            v-loading="state.loading"
-            stripe :data="state.tableModel"
-            row-key="id"
-            style="width: 100%" >
-            <el-table-column type="index" label="记录" width="60"/>
-            <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
+          <el-table ref="multipleTableRef" v-loading="state.loading" stripe :data="state.tableModel" row-key="id"
+            style="width: 100%">
+            <el-table-column type="index" label="记录" width="60" />
+            <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop"
+              :label="column.label" />
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination
-              v-model:currentPage="state.pageInput.CurrentPage"
-              v-model:page-size="state.pageInput.PageSize"
-              :total="state.total"
-              :page-sizes="[10, 20, 50, 100]"
-              small
-              background
-              @size-change="onSizeChange"
-              @current-change="onCurrentChange"
-              layout="total, sizes, prev, pager, next, jumper"
-            />
+            <el-pagination v-model:currentPage="state.pageInput.CurrentPage"
+              v-model:page-size="state.pageInput.PageSize" :total="state.total" :page-sizes="[10, 20, 50, 100]" small
+              background @size-change="onSizeChange" @current-change="onCurrentChange"
+              layout="total, sizes, prev, pager, next, jumper" />
           </div>
         </el-card>
       </el-col>
@@ -77,13 +83,13 @@ import { ElMessage, ElTable } from 'element-plus'
 import { FuelingFtpAPI } from '/@/api/admin/deviceAuthorization/fuelingFTPApi'
 import { FuelFtpPswRecordDto } from '/@/api/admin/deviceAuthorization/fuelingFTPDto'
 import Clipboard from 'clipboard'
-import type {pageInput} from "/@/api/admin/shareDto/shareDto";
+import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { AuthApi } from '/@/api/admin/Auth'
 
-const multipleTableRef=ref<InstanceType<typeof ElTable>>()
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 /**FTP申请页面对象 */
 const state = reactive({
-  time:'',
+  time: '',
   /**加载显示 */
   loading: false,
   /**条件查询模块 */
@@ -97,8 +103,8 @@ const state = reactive({
     /**申请人*/
     name: ''
   },
-   /**分页标识 */
-   pageInput:{
+  /**分页标识 */
+  pageInput: {
     CurrentPage: 1,
     PageSize: 10,
   } as pageInput,
@@ -115,29 +121,29 @@ const state = reactive({
   ],
   /**FTP密码 */
   pwd: "",
-  pwdDisplay:false,
-  timeDisplay:false,
-  btnDisplay:true,
-  msgDisplay:false
+  pwdDisplay: false,
+  timeDisplay: false,
+  btnDisplay: true,
+  msgDisplay: false
 })
 
 /**初始化 */
 const init = async () => {
-  state.filter.info=''
-  state.filter.name=''
-  state.filter.applyDate=''
-  state.filter.expirationTime=''
-  state.pwd=''
-  state.btnDisplay=true
-  state.msgDisplay=false
-  state.pwdDisplay=false
-  state.timeDisplay=false
-  const res:any = await new FuelingFtpAPI().getFtpDate({...state.pageInput, filter:state.filter}).catch(() => {
+  state.filter.info = ''
+  state.filter.name = ''
+  state.filter.applyDate = ''
+  state.filter.expirationTime = ''
+  state.pwd = ''
+  state.btnDisplay = true
+  state.msgDisplay = false
+  state.pwdDisplay = false
+  state.timeDisplay = false
+  const res: any = await new FuelingFtpAPI().getFtpDate({ ...state.pageInput, filter: state.filter }).catch(() => {
     state.loading = false
   })
   //console.log(res.data.list)
-  state.total=res.data.total
-  state.tableModel=res.data.list
+  state.total = res.data.total
+  state.tableModel = res.data.list
 }
 
 onMounted(() => {
@@ -155,51 +161,51 @@ onBeforeMount(() => {
 /**
  * 监听时间变换
  */
-watch(() => state.time, (newVal ) => {
-  if(newVal.length === 0){
+watch(() => state.time, (newVal) => {
+  if (newVal.length === 0) {
     return
   }
   state.filter.expirationTime = newVal?.[0].toString()
 })
 /**复制FTP密码 */
-const onCopy=()=>{
-  const clipboard=new Clipboard('#copyBtn')
-  clipboard.on('success',()=>{
+const onCopy = () => {
+  const clipboard = new Clipboard('#copyBtn')
+  clipboard.on('success', () => {
     ElMessage.success('复制成功')
     clipboard.destroy()
   })
-  clipboard.on('error',()=>{
+  clipboard.on('error', () => {
     ElMessage.error('复制失败')
     clipboard.destroy()
   })
 }
 /**申请FTP密码 */
-const onQuery =async () => {
-  if(state.filter.info===''){
+const onQuery = async () => {
+  if (state.filter.info === '') {
     ElMessage.error('请输入申请备注')
-  }else{
-    const res=await new FuelingFtpAPI().getFtpPwd().catch()
-    state.pwd=res.data
-    state.msgDisplay=true
-    state.pwdDisplay=true
-    state.timeDisplay=true
-    state.btnDisplay=false
-    const date=new Date()
-    let month=padZero(date.getMonth()+1)
-    let day=padZero(date.getDate())
-    let hour=padZero(date.getHours())
-    let minute=padZero(date.getMinutes())
-    let second=padZero(date.getSeconds())
-    state.filter.applyDate=date.getFullYear()+'-'+month+'-'+day+' '+hour+':'+minute+':'+second
-    state.filter.expirationTime=date.getFullYear()+'-'+month+'-'+day+' 23:59:59'
-    const name:any=await new AuthApi().getUserProfile()
-    state.filter.name=name.data.name
+  } else {
+    const res = await new FuelingFtpAPI().getFtpPwd().catch()
+    state.pwd = res.data
+    state.msgDisplay = true
+    state.pwdDisplay = true
+    state.timeDisplay = true
+    state.btnDisplay = false
+    const date = new Date()
+    let month = padZero(date.getMonth() + 1)
+    let day = padZero(date.getDate())
+    let hour = padZero(date.getHours())
+    let minute = padZero(date.getMinutes())
+    let second = padZero(date.getSeconds())
+    state.filter.applyDate = date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+    state.filter.expirationTime = date.getFullYear() + '-' + month + '-' + day + ' 23:59:59'
+    const name: any = await new AuthApi().getUserProfile()
+    state.filter.name = name.data.name
     await new FuelingFtpAPI().insertFtpDate(state.filter)
-    const data:any = await new FuelingFtpAPI().getFtpDate({...state.pageInput, filter:state.filter}).catch(() => {
+    const data: any = await new FuelingFtpAPI().getFtpDate({ ...state.pageInput, filter: state.filter }).catch(() => {
       state.loading = false
     })
-    state.total=data.data.total
-    state.tableModel=data.data.list
+    state.total = data.data.total
+    state.tableModel = data.data.list
   }
 }
 /**将Filter对象成.的连接方式*/
@@ -225,11 +231,11 @@ const onSizeChange = () => {
 }
 
 /**页数变化*/
-const onCurrentChange = () =>{
+const onCurrentChange = () => {
   init()
 }
-const padZero=(num:any)=>{
-  return num<10?'0'+num:num
+const padZero = (num: any) => {
+  return num < 10 ? '0' + num : num
 }
 </script>
 
@@ -237,10 +243,15 @@ const padZero=(num:any)=>{
 .my-el-link {
   font-size: 12px;
 }
+
 .el-form .el-col.mb20 {
   margin: 0 !important;
 }
-.el-input, .el-select {
+
+.el-input,
+.el-select {
   width: 240px;
 }
+
+@import '/@/theme/tableStyle.scss';
 </style>

admin.ui.plus-master/src/views/admin/authorize/fuelingFTPofDate/index.vue

@@ -1,264 +1,270 @@
 <template>
-    <div class="layout-pd" >
-      <el-row>
-        <!--操作-->
-        <el-col :xs="24" >
-          <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <h1 style="margin-bottom: 10px;font-size: 30px;">油机非当天动态密钥生成</h1>
-            </div>
-            <div v-if="state.msgDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <h1 style="margin-bottom: 10px;color: #81B337;font-size: 20px;">密码申请成功</h1>
-            </div>
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
-                <el-form-item label="密钥使用日期" style="width: 100%;">
-                  <el-input  type="date" v-model="state.filter.useDate" style="width: 30%;"  @keyup.enter="onQuery" />
-                </el-form-item>
-              </el-form>
-            </div>            
-            <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
-                <el-form-item label="申请备注" style="width: 100%;">
-                  <el-input v-model="state.filter.info" style="width: 100%;" placeholder="请输入申请备注" @keyup.enter="onQuery" />
-                </el-form-item>
-              </el-form>
-            </div>
-            <div v-if="state.pwdDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
-                <el-form-item label="FTP密码" style="width: 82%;">
-                  <el-input disabled v-model="state.pwd" style="width: 100%;" placeholder="FTP密码" @keyup.enter="onQuery" />
-                </el-form-item>
-                <el-form-item>
-                  <el-button id="copyBtn" :data-clipboard-text="state.pwd" type="primary" @click="onCopy()">复制</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div v-if="state.timeDisplay" style="width: 100%;display: flex;justify-content: center;align-items: center;">
-              <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
-                <el-form-item label="过期时间" style="width: 100%;">
-                  {{ state.filter.expirationTime }}
-                </el-form-item>
-              </el-form>
-            </div>
-            <div v-if="state.btnDisplay" style="display: flex;justify-content: center;align-items: center;">
-              <el-button style="margin-top: 10px;margin-bottom: 10px;width: 264px;height: 42px;" type="primary" @click="onQuery">申请油机FTP密码</el-button>
-            </div>
-          </el-card>
-        </el-col>
-        <!--表格-->
-        <el-col  :xs="24" >
-          <el-card style="height: 65vh" class="my-fill mt8" shadow="hover">
-            <el-table ref="multipleTableRef"
-              v-loading="state.loading"
-              stripe :data="state.tableModel"
-              row-key="id"
-              style="width: 100%" >
-              <el-table-column type="index" label="记录" width="60"/>
-              <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
-            </el-table>
-            <div class="my-flex my-flex-end" style="margin-top: 20px">
-              <el-pagination
-                v-model:currentPage="state.pageInput.CurrentPage"
-                v-model:page-size="state.pageInput.PageSize"
-                :total="state.total"
-                :page-sizes="[10, 20, 50, 100]"
-                small
-                background
-                @size-change="onSizeChange"
-                @current-change="onCurrentChange"
-                layout="total, sizes, prev, pager, next, jumper"
-              />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
-  
-  </template>
-  
-  <script setup lang="ts" name="authorize/fuelingsdk">
-  import { onMounted, reactive, ref, watch, onBeforeMount } from "vue";
-  import eventBus from "/@/utils/mitt";
-  import { ElMessage, ElTable } from 'element-plus'
-  import { FuelingFtpAPI } from '/@/api/admin/deviceAuthorization/fuelingFTPApi'
-  import { FuelFtpPswRecordDto } from '/@/api/admin/deviceAuthorization/fuelingFTPDto'
-  import Clipboard from 'clipboard'
-  import type {pageInput} from "/@/api/admin/shareDto/shareDto";
-  import { AuthApi } from '/@/api/admin/Auth'
-  
-  const multipleTableRef=ref<InstanceType<typeof ElTable>>()
-  /**FTP申请页面对象 */
-  const state = reactive({
-    time:'',
-    /**加载显示 */
-    loading: false,
-    /**条件查询模块 */
-    filter: {
-      /**申请备注 */
-      info: "",
-      /**过期时间 */
-      expirationTime: '',
-      /**使用日期*/
-      useDate: '',      
-      /**申请日期*/
-      applyDate: '',
-      /**申请人*/
-      name: ''
-    },
-     /**分页标识 */
-     pageInput:{
-      CurrentPage: 1,
-      PageSize: 10,
-    } as pageInput,
-    /**分页总数 */
-    total: 0,
-    /**表格信息 */
-    tableModel: [] as FuelFtpPswRecordDto,
-    /**动态表头 */
-    dynamicColumns: [
-      { prop: 'applyDate', label: '申请日期' },
-      { prop: 'name', label: '申请人' },
-      { prop: 'info', label: '备注' },
-      { prop: 'useDate', label: '密钥使用日期' },
-      { prop: 'expirationTime', label: '密钥过期时间' }
-    ],
-    /**FTP密码 */
-    pwd: "",
-    pwdDisplay:false,
-    timeDisplay:false,
-    btnDisplay:true,
-    msgDisplay:false
+  <div class="layout-pd">
+    <el-row>
+      <!--操作-->
+      <el-col :xs="24">
+        <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
+          <div style="width: 100%;">
+            <h1 style="margin-bottom: 10px;font-size: 30px;display: flex;justify-content: center;align-items: center;">
+              油机非当天动态密钥生成</h1>
+          </div>
+          <div v-if="state.msgDisplay" style="width: 100%;">
+            <h1 style="margin-bottom: 10px;color: #81B337;font-size: 20px;">密码申请成功</h1>
+          </div>
+          <div style="width: 100%;">
+            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+              <el-form-item label="密钥使用日期" style="width: 100%;">
+                <el-input type="date" v-model="state.filter.useDate" style="width: 30%;" @keyup.enter="onQuery" />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div style="width: 100%;">
+            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+              <el-form-item label="申请备注" style="width: 35%;">
+                <el-input v-model="state.filter.info" style="width: 100%;" placeholder="请输入申请备注"
+                  @keyup.enter="onQuery" />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-if="state.pwdDisplay" style="width: 100%;">
+            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+              <el-form-item label="FTP密码" style="width: 82%;">
+                <el-input disabled v-model="state.pwd" style="width: 100%;" placeholder="FTP密码"
+                  @keyup.enter="onQuery" />
+              </el-form-item>
+              <el-form-item>
+                <el-button id="copyBtn" :data-clipboard-text="state.pwd" type="primary" @click="onCopy()">复制</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-if="state.timeDisplay" style="width: 100%;">
+            <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
+              <el-form-item label="过期时间" style="width: 100%;">
+                {{ state.filter.expirationTime }}
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <hr>
+
+          <!-- 按钮  -->
+          <el-row justify="space-between" class="submit-button">
+            <el-row>
+            </el-row>
+            <el-row>
+              <div v-if="state.btnDisplay" style="display: flex;justify-content: center;align-items: center;">
+                <el-button style="margin-top: 10px;margin-bottom: 10px;width: 264px;height: 42px;" type="primary"
+                  @click="onQuery">申请油机FTP密码</el-button>
+              </div>
+            </el-row>
+          </el-row>
+        </el-card>
+      </el-col>
+      <!--表格-->
+      <el-col :xs="24">
+        <el-card style="height: 65vh" class="my-fill mt8" shadow="hover">
+          <el-table ref="multipleTableRef" v-loading="state.loading" stripe :data="state.tableModel" row-key="id"
+            style="width: 100%">
+            <el-table-column type="index" label="记录" width="60" />
+            <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop"
+              :label="column.label" />
+          </el-table>
+          <div class="my-flex my-flex-end" style="margin-top: 20px">
+            <el-pagination v-model:currentPage="state.pageInput.CurrentPage"
+              v-model:page-size="state.pageInput.PageSize" :total="state.total" :page-sizes="[10, 20, 50, 100]" small
+              background @size-change="onSizeChange" @current-change="onCurrentChange"
+              layout="total, sizes, prev, pager, next, jumper" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+
+<script setup lang="ts" name="authorize/fuelingsdk">
+import { onMounted, reactive, ref, watch, onBeforeMount } from "vue";
+import eventBus from "/@/utils/mitt";
+import { ElMessage, ElTable } from 'element-plus'
+import { FuelingFtpAPI } from '/@/api/admin/deviceAuthorization/fuelingFTPApi'
+import { FuelFtpPswRecordDto } from '/@/api/admin/deviceAuthorization/fuelingFTPDto'
+import Clipboard from 'clipboard'
+import type { pageInput } from "/@/api/admin/shareDto/shareDto";
+import { AuthApi } from '/@/api/admin/Auth'
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+/**FTP申请页面对象 */
+const state = reactive({
+  time: '',
+  /**加载显示 */
+  loading: false,
+  /**条件查询模块 */
+  filter: {
+    /**申请备注 */
+    info: "",
+    /**过期时间 */
+    expirationTime: '',
+    /**使用日期*/
+    useDate: '',
+    /**申请日期*/
+    applyDate: '',
+    /**申请人*/
+    name: ''
+  },
+  /**分页标识 */
+  pageInput: {
+    CurrentPage: 1,
+    PageSize: 10,
+  } as pageInput,
+  /**分页总数 */
+  total: 0,
+  /**表格信息 */
+  tableModel: [] as FuelFtpPswRecordDto,
+  /**动态表头 */
+  dynamicColumns: [
+    { prop: 'applyDate', label: '申请日期' },
+    { prop: 'name', label: '申请人' },
+    { prop: 'info', label: '备注' },
+    { prop: 'useDate', label: '密钥使用日期' },
+    { prop: 'expirationTime', label: '密钥过期时间' }
+  ],
+  /**FTP密码 */
+  pwd: "",
+  pwdDisplay: false,
+  timeDisplay: false,
+  btnDisplay: true,
+  msgDisplay: false
+})
+
+/**初始化 */
+const init = async () => {
+  state.filter.info = ''
+  state.filter.name = ''
+  state.filter.applyDate = ''
+  state.filter.expirationTime = ''
+  state.filter.useDate = ''
+  state.pwd = ''
+  state.btnDisplay = true
+  state.msgDisplay = false
+  state.pwdDisplay = false
+  state.timeDisplay = false
+  const res: any = await new FuelingFtpAPI().getFtpDate({ ...state.pageInput, filter: state.filter }).catch(() => {
+    state.loading = false
   })
-  
-  /**初始化 */
-  const init = async () => {
-    state.filter.info=''
-    state.filter.name=''
-    state.filter.applyDate=''
-    state.filter.expirationTime=''
-    state.filter.useDate=''
-    state.pwd=''
-    state.btnDisplay=true
-    state.msgDisplay=false
-    state.pwdDisplay=false
-    state.timeDisplay=false
-    const res:any = await new FuelingFtpAPI().getFtpDate({...state.pageInput, filter:state.filter}).catch(() => {
-      state.loading = false
-    })
-    //console.log(res.data.list)
-    state.total=res.data.total
-    state.tableModel=res.data.list
-  }
-  
-  onMounted(() => {
+  //console.log(res.data.list)
+  state.total = res.data.total
+  state.tableModel = res.data.list
+}
+
+onMounted(() => {
+  init()
+  eventBus.off('refreshView')
+  eventBus.on('refreshView', async () => {
     init()
-    eventBus.off('refreshView')
-    eventBus.on('refreshView', async () => {
-      init()
-    })
   })
-  
-  onBeforeMount(() => {
-    eventBus.off('refreshView')
+})
+
+onBeforeMount(() => {
+  eventBus.off('refreshView')
+})
+
+/**
+ * 监听时间变换
+ */
+watch(() => state.time, (newVal) => {
+  if (newVal.length === 0) {
+    return
+  }
+  state.filter.expirationTime = newVal?.[0].toString()
+})
+/**复制FTP密码 */
+const onCopy = () => {
+  const clipboard = new Clipboard('#copyBtn')
+  clipboard.on('success', () => {
+    ElMessage.success('复制成功')
+    clipboard.destroy()
   })
-  
-  /**
-   * 监听时间变换
-   */
-  watch(() => state.time, (newVal ) => {
-    if(newVal.length === 0){
-      return
-    }
-    state.filter.expirationTime = newVal?.[0].toString()
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败')
+    clipboard.destroy()
   })
-  /**复制FTP密码 */
-  const onCopy=()=>{
-    const clipboard=new Clipboard('#copyBtn')
-    clipboard.on('success',()=>{
-      ElMessage.success('复制成功')
-      clipboard.destroy()
-    })
-    clipboard.on('error',()=>{
-      ElMessage.error('复制失败')
-      clipboard.destroy()
-    })
+}
+/**申请FTP密码 */
+const onQuery = async () => {
+  if (state.filter.useDate === '') {
+    ElMessage.error('请选择密钥使用日期')
   }
-  /**申请FTP密码 */
-  const onQuery =async () => {
-    if(state.filter.useDate==='')
-    {
-        ElMessage.error('请选择密钥使用日期')  
-    }
-    else if(state.filter.info==='')
-    {
-      ElMessage.error('请输入申请备注')
-    }
-    else{
-      const res=await new FuelingFtpAPI().getFtpPwdofDate({dt:state.filter.useDate}).catch()
-      state.pwd=res.data
-      state.msgDisplay=true
-      state.pwdDisplay=true
-      state.timeDisplay=true
-      state.btnDisplay=false
-      const date=new Date()
-      let month=padZero(date.getMonth()+1)
-      let day=padZero(date.getDate())
-      let hour=padZero(date.getHours())
-      let minute=padZero(date.getMinutes())
-      let second=padZero(date.getSeconds())
-      state.filter.applyDate=date.getFullYear()+'-'+month+'-'+day+' '+hour+':'+minute+':'+second
-      state.filter.expirationTime=state.filter.useDate+' 23:59:59'
-      const name:any=await new AuthApi().getUserProfile()
-      state.filter.name=name.data.name
-      await new FuelingFtpAPI().insertFtpDate(state.filter)
-      const data:any = await new FuelingFtpAPI().getFtpDate({...state.pageInput, filter:state.filter}).catch(() => {
-        state.loading = false
-      })
-      state.total=data.data.total
-      state.tableModel=data.data.list
-    }
+  else if (state.filter.info === '') {
+    ElMessage.error('请输入申请备注')
   }
-  /**将Filter对象成.的连接方式*/
-  const flattenObject = (obj, parentKey = '') => {
-    const result = {};
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        const newKey = parentKey ? `${parentKey}.${key}` : key;
-        if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
-          const flattened = flattenObject(obj[key], newKey);
-          Object.assign(result, flattened);
-        } else {
-          result[newKey] = obj[key];
-        }
+  else {
+    const res = await new FuelingFtpAPI().getFtpPwdofDate({ dt: state.filter.useDate }).catch()
+    state.pwd = res.data
+    state.msgDisplay = true
+    state.pwdDisplay = true
+    state.timeDisplay = true
+    state.btnDisplay = false
+    const date = new Date()
+    let month = padZero(date.getMonth() + 1)
+    let day = padZero(date.getDate())
+    let hour = padZero(date.getHours())
+    let minute = padZero(date.getMinutes())
+    let second = padZero(date.getSeconds())
+    state.filter.applyDate = date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+    state.filter.expirationTime = state.filter.useDate + ' 23:59:59'
+    const name: any = await new AuthApi().getUserProfile()
+    state.filter.name = name.data.name
+    await new FuelingFtpAPI().insertFtpDate(state.filter)
+    const data: any = await new FuelingFtpAPI().getFtpDate({ ...state.pageInput, filter: state.filter }).catch(() => {
+      state.loading = false
+    })
+    state.total = data.data.total
+    state.tableModel = data.data.list
+  }
+}
+/**将Filter对象成.的连接方式*/
+const flattenObject = (obj, parentKey = '') => {
+  const result = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const newKey = parentKey ? `${parentKey}.${key}` : key;
+      if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+        const flattened = flattenObject(obj[key], newKey);
+        Object.assign(result, flattened);
+      } else {
+        result[newKey] = obj[key];
       }
     }
-  
-    return result;
-  }
-  /**页条数变化*/
-  const onSizeChange = () => {
-    init()
-  }
-  
-  /**页数变化*/
-  const onCurrentChange = () =>{
-    init()
-  }
-  const padZero=(num:any)=>{
-    return num<10?'0'+num:num
-  }
-  </script>
-  
-  <style scoped lang="scss">
-  .my-el-link {
-    font-size: 12px;
-  }
-  .el-form .el-col.mb20 {
-    margin: 0 !important;
-  }
-  .el-input, .el-select {
-    width: 240px;
   }
-  </style>
-  
+
+  return result;
+}
+/**页条数变化*/
+const onSizeChange = () => {
+  init()
+}
+
+/**页数变化*/
+const onCurrentChange = () => {
+  init()
+}
+const padZero = (num: any) => {
+  return num < 10 ? '0' + num : num
+}
+</script>
+
+<style scoped lang="scss">
+.my-el-link {
+  font-size: 12px;
+}
+
+.el-form .el-col.mb20 {
+  margin: 0 !important;
+}
+
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+// @import '/@/theme/tableStyle.scss';</style>

admin.ui.plus-master/src/views/admin/authorize/fuelingsdk/index.vue

@@ -6,27 +6,27 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="sdkData.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="油站名称">
                   <el-input v-model="sdkData.Filter.OilStation" placeholder="单行输入" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="项目名称">
                   <el-input v-model="sdkData.Filter.Project" placeholder="单行输入" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="SN">
                   <el-input v-model="sdkData.Filter.SN" placeholder="单行输入" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="授权码">
                   <el-input v-model="sdkData.Filter.Key" placeholder="单行输入" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="失效时间">
                   <el-date-picker v-model="sdkData.time" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                     range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
@@ -342,5 +342,4 @@ const onOilSdkRowClick = (row: FueilingSdkAuthInput) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
 </style>

admin.ui.plus-master/src/views/admin/authorize/softwarePackageManagement/index.vue

@@ -6,7 +6,7 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="softwareData.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="软件类型">
                   <el-select v-model="softwareData.Filter.softwareType" placeholder="请选择软件类型" style="width: 200px;">
                     <el-option v-for="(value, key) in softwareType" :key="key" :label="value[1].name"
@@ -14,17 +14,17 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="软件名称">
                   <el-input v-model="softwareData.Filter.softwareName" placeholder="单行输入" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="版本">
                   <el-input v-model="softwareData.Filter.version" placeholder="单行输入" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="设备类型">
                   <el-select v-model="softwareData.Filter.equipmentType" placeholder="请选择设备类型" style="width: 200px;">
                     <el-option v-for="(value, key) in equipmentType" :key="key" :label="value[1].name"
@@ -32,7 +32,7 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="选择时间">
                   <el-date-picker v-model="softwareData.time" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                     range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
@@ -368,8 +368,8 @@ const getColor = (val, row) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
+
 .el-link {
   padding: 5px;
 }
-
 </style>

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

@@ -1,30 +1,32 @@
 <template>
   <div class="layout-pd">
     <el-row>
-      <el-col >
-        <el-card class="mt8" shadow="hover" >
+      <el-col>
+        <el-card class="mt8" shadow="hover">
           <el-form :model="groupLogoKeyOnQuery.filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width:100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="GUID">
                   <el-input v-model="groupLogoKeyOnQuery.filter.keyGuid" placeholder="请输入GUID" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="团标状态">
-                  <el-select  v-model="groupLogoKeyOnQuery.filter.state" placeholder="请选择部件类型" >
-                    <el-option v-for="(value, key) in groupKeyGroupStatus" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
+                  <el-select v-model="groupLogoKeyOnQuery.filter.state" placeholder="请选择部件类型">
+                    <el-option v-for="(value, key) in groupKeyGroupStatus" :key="key" :label="value[1].name"
+                      :value="Number(value[1].value)" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="密钥类型">
-                  <el-select  v-model="groupLogoKeyOnQuery.filter.deviceType" placeholder="请选择部件类型" >
-                    <el-option v-for="(value, key) in groupLogoKeyKeyType" :key="key" :label="value[1].name"  :value="value[1].value" />
+                  <el-select v-model="groupLogoKeyOnQuery.filter.deviceType" placeholder="请选择部件类型">
+                    <el-option v-for="(value, key) in groupLogoKeyKeyType" :key="key" :label="value[1].name"
+                      :value="value[1].value" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="厂商">
                   <el-input v-model="groupLogoKeyOnQuery.filter.manufacturer" placeholder="请输入厂商" clearable></el-input>
                 </el-form-item>
@@ -35,49 +37,41 @@
           <hr>
 
           <!-- 按钮 -->
-           <el-row justify="space-between" class="submit-button">
+          <el-row justify="space-between" class="submit-button">
             <el-row>
               <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
               <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
             </el-row>
-           </el-row>
-           
+          </el-row>
+
         </el-card>
       </el-col>
       <el-col :xs="24">
-        <el-card class="mt8" shadow="hover" >
+        <el-card class="mt8" shadow="hover">
           <el-table v-loading="state.loading" stripe :data="state.list" row-key="id" style="width: 100%">
-            <el-table-column prop="keyGuid" label="GUID"  />
-            <el-table-column prop="state" label="状态"  >
+            <el-table-column prop="keyGuid" label="GUID" />
+            <el-table-column prop="state" label="状态">
               <template #default="{ row }">
-                {{ getState(row.state).name}}
+                {{ getState(row.state).name }}
               </template>
             </el-table-column>
-            <el-table-column prop="deviceType" label="密钥类型"  >
+            <el-table-column prop="deviceType" label="密钥类型">
               <template #default="{ row }">
-                {{ getDeviceType(row.deviceType).name}}
+                {{ getDeviceType(row.deviceType).name }}
               </template>
             </el-table-column>
-          
+
             <el-table-column prop="lastUpdate" label="最近同步时间" />
             <el-table-column prop="applicationTime" label="申请时间" />
             <el-table-column prop="recordTime" label="备案时间" />
             <el-table-column prop="manufacturer" label="厂商" />
-            <el-table-column prop="remark" label="备注"  />
+            <el-table-column prop="remark" label="备注" />
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination
-              v-model:currentPage="state.pageInput.currentPage"
-              v-model:page-size="state.pageInput.pageSize"
-              :total="state.total"
-              :default-page-size="5"
-              :page-sizes="[5, 10, 20, 50, 100]"
-              small
-              background
-              @size-change="onSizeChange"
-              @current-change="onCurrentChange"
-              layout="total, sizes, prev, pager, next, jumper"
-            />
+            <el-pagination v-model:currentPage="state.pageInput.currentPage"
+              v-model:page-size="state.pageInput.pageSize" :total="state.total" :default-page-size="5"
+              :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onSizeChange"
+              @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
         </el-card>
       </el-col>
@@ -87,25 +81,25 @@
 
 <script setup lang="ts">/**团标密钥数据对象*/
 
-import {onMounted, reactive} from "vue";
+import { onMounted, reactive } from "vue";
 import {
   groupLogoKeyFilterModel,
   groupLogoKeyPageInput, groupLogoKeyRequestBody,
 } from "/@/api/admin/productionManagement/groupLogoKeyDto";
-import {ref} from "vue-demi";
-import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
-import {GroupLogoKeyApi} from "/@/api/admin/productionManagement/groupLogoKeyApi";
+import { ref } from "vue-demi";
+import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
+import { GroupLogoKeyApi } from "/@/api/admin/productionManagement/groupLogoKeyApi";
 
 /**
  * 团标密钥查询时需要的参数
  * */
 const groupLogoKeyOnQuery = reactive({
-  filter:{
-    keyGuid:'',
-    deviceType:'',
-    lastUpdate:'',
+  filter: {
+    keyGuid: '',
+    deviceType: '',
+    lastUpdate: '',
     applicationTime: '',
-    recordTime: '' ,
+    recordTime: '',
   } as groupLogoKeyFilterModel,
 })
 
@@ -114,8 +108,8 @@ const groupLogoKeyOnQuery = reactive({
  */
 const state = reactive({
   loading: false,
-  list:  [] as Array<groupLogoKeyFilterModel>,
-  pageInput:{
+  list: [] as Array<groupLogoKeyFilterModel>,
+  pageInput: {
     currentPage: 1,
     pageSize: 10,
   } as groupLogoKeyPageInput,
@@ -134,9 +128,9 @@ const groupLogoKeyKeyType = ref(globalCacheStore.getGlobalStore().get('groupLogo
 /**获取团标状态*/
 const getState = (val) => {
   val = String(val)
-  if(groupKeyGroupStatus.value.has(val)){
+  if (groupKeyGroupStatus.value.has(val)) {
     return groupKeyGroupStatus.value.get(val)
-  }else{
+  } else {
     return val
   }
 }
@@ -144,9 +138,9 @@ const getState = (val) => {
 /**获取密钥类型*/
 const getDeviceType = (val) => {
   val = String(val)
-  if(groupLogoKeyKeyType.value.has(val)){
+  if (groupLogoKeyKeyType.value.has(val)) {
     return groupLogoKeyKeyType.value.get(val)
-  }else{
+  } else {
     return val
   }
 }
@@ -172,7 +166,7 @@ const onCurrentChange = (val: number) => {
 
 const onQuery = async () => {
   state.loading = true
-  const { data } = await new GroupLogoKeyApi().getPage({...state.pageInput, filter:groupLogoKeyOnQuery.filter} as groupLogoKeyRequestBody).catch(() => state.loading = false)
+  const { data } = await new GroupLogoKeyApi().getPage({ ...state.pageInput, filter: groupLogoKeyOnQuery.filter } as groupLogoKeyRequestBody).catch(() => state.loading = false)
   state.list = data?.list ?? []
   state.total = data?.total ?? 0
   state.loading = false
@@ -185,11 +179,11 @@ onMounted(() => {
 
 const onReset = () => {
   groupLogoKeyOnQuery.filter = {
-    keyGuid:'',
-    deviceType:'',
-    lastUpdate:'',
+    keyGuid: '',
+    deviceType: '',
+    lastUpdate: '',
     applicationTime: '',
-    recordTime: '' ,
+    recordTime: '',
   }
   state.pageInput.currentPage = 1
   onQuery()
@@ -199,5 +193,4 @@ const onReset = () => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
 </style>

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

@@ -6,21 +6,21 @@
                 <el-card class="mt8" shadow="hover">
                     <el-form :model="qrBookData.Filter" @submit.stop.prevent>
                         <el-form-item prop="name" style="width: 100%;">
-                            <el-col :xs="24" :sm="12" :md="8" :lg="8" class="mb20">
+                            <el-col :xs="24" :sm="12" :md="8" :lg="6" class="mb20">
                                 <el-form-item label="上传人">
                                     <el-input v-model="qrBookData.Filter.Author" placeholder="单行输入"
                                         clearable></el-input>
                                 </el-form-item>
                             </el-col>
 
-                            <el-col :xs="24" :sm="12" :md="8" :lg="8" class="mb20">
+                            <el-col :xs="24" :sm="12" :md="8" :lg="6" class="mb20">
                                 <el-form-item label="文件名">
                                     <el-input v-model="qrBookData.Filter.FileName" placeholder="单行输入"
                                         clearable></el-input>
                                 </el-form-item>
                             </el-col>
 
-                            <el-col :xs="24" :md="8" :lg="8" :xl="4" class="mb20">
+                            <el-col :xs="24" :md="8" :lg="8" :xl="6" class="mb20">
                                 <el-form-item label="选择时间">
                                     <el-date-picker v-model="qrBookData.time" type="datetimerange"
                                         value-format="YYYY-MM-DD HH:mm:ss" range-separator="To"

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

@@ -7,17 +7,17 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="state.filterModel" @submit.stop.prevent>
             <el-form-item prop="name" style="width:100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="物料编号">
                   <el-input v-model="state.filterModel.bomMateNo" placeholder="物料编号" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="部件名称">
                   <el-input v-model="state.filterModel.bomName" placeholder="部件名称" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="部件类型">
                   <el-select v-model="state.filterModel.bomType" placeholder="请选择部件类型">
                     <el-option v-for="(value, key) in componentType" :key="key" :label="value[1].name"

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

@@ -6,59 +6,59 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="Data.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="油机ID">
                   <el-input v-model="Data.Filter.fuelld" placeholder="请输入油机ID" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="加油站">
                   <el-input v-model="Data.Filter.gasStation" placeholder="请输入加油站" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="油机号">
                   <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="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="序列号">
                   <el-input v-model="Data.Filter.serialNumber" placeholder="请输入序列号" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="报警来源">
                   <el-input v-model="Data.Filter.alarmSource" placeholder="请输入报警来源" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="报警类型">
                   <el-input v-model="Data.Filter.alarmType" placeholder="请输入报警类型" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="报警描述">
                   <el-input v-model="Data.Filter.alarmDescription" placeholder="请输入报警描述" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="报警设备">
                   <el-input v-model="Data.Filter.alarmDevice" placeholder="请输入报警设备" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="油枪">
                   <el-input v-model="Data.Filter.nozzleControlName" placeholder="请输入油枪" clearable></el-input>
                 </el-form-item>
               </el-col>
 
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="创建时间">
                   <el-date-picker v-model="Data.time" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                     range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item>
                 </el-form-item>
               </el-col>
@@ -237,5 +237,4 @@ const onCurrentChange = (val: number) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
 </style>

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

@@ -5,15 +5,15 @@
       <!--操作-->
       <el-col :xs="24">
         <el-card class="mt8" shadow="hover">
-          <el-form :model="Data.Filter"  @submit.stop.prevent>
-            <el-form-item prop="name" style="width: 100%" >
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+          <el-form :model="Data.Filter" @submit.stop.prevent>
+            <el-form-item prop="name" style="width: 100%">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="规则名称">
                   <el-input v-model="Data.time1" placeholder="请输入规则名称" clearable></el-input>
                 </el-form-item>
               </el-col>
             </el-form-item>
-          </el-form> 
+          </el-form>
 
           <hr>
 
@@ -53,7 +53,7 @@
 
 <script setup lang="ts" name="partsManagement/oilGun">
 import { defineAsyncComponent, onMounted, reactive, ref, watch } from "vue";
-import { alarmRluesFilterModel_SearchFilter,alarmRluesFilterModel,PageInputAlarmRluesFilterModel } from "/@/api/admin/AlarmService/alarmRulesDto";
+import { alarmRluesFilterModel_SearchFilter, alarmRluesFilterModel, PageInputAlarmRluesFilterModel } from "/@/api/admin/AlarmService/alarmRulesDto";
 import { alarmRulesApi } from "/@/api/admin/AlarmService/alarmRulesApi";
 
 /**页面对象 */
@@ -113,20 +113,20 @@ const init = async () => {
   pushMethodChange()
 }
 
-  const onQuery = () => {
-    init()
-    console.log("查询")
-  }
-
-  /**重置查询条件 */
-  const resetQuery = () => {
-    Data.Filter.ruleName = ''
-  }
-  /**重置 */
-  const onReset = () => {
-    resetQuery()
-    init()
-  }
+const onQuery = () => {
+  init()
+  console.log("查询")
+}
+
+/**重置查询条件 */
+const resetQuery = () => {
+  Data.Filter.ruleName = ''
+}
+/**重置 */
+const onReset = () => {
+  resetQuery()
+  init()
+}
 
 /** 
  * 添加规则
@@ -176,9 +176,9 @@ const pushMethodChange = (() => {
     }
 
     // 触发方式
-    if(item['triggerMethod'] == '0'){
+    if (item['triggerMethod'] == '0') {
       item['triggerMethod'] = '其中之一条件满足即触发'
-    }else if(item['triggerMethod'] == '1'){
+    } else if (item['triggerMethod'] == '1') {
       item['triggerMethod'] = '全部满足时触发'
     }
   })

admin.ui.plus-master/src/views/admin/statement/alarmRules/template.vue

@@ -7,7 +7,7 @@
                 <el-card class="mt8" shadow="hover">
                     <el-form :model="Data.Filter" @submit.stop.prevent>
                         <el-form-item prop="name" style="width: 100%">
-                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                                 <el-form-item label="模板名称">
                                     <el-input v-model="Data.time1" placeholder="请输入模板名称" clearable></el-input>
                                 </el-form-item>

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

@@ -6,7 +6,7 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="Data.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="用户名">
                   <el-input v-model="Data.Filter.name" placeholder="用户名" clearable></el-input>
                 </el-form-item>
@@ -137,5 +137,4 @@ const onCurrentChange = (val: number) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
 </style>

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

@@ -6,12 +6,12 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="Data.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="省份">
                   <el-input v-model="Data.Filter.province" placeholder="请输入省份" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="油站名称">
                   <el-input v-model="Data.Filter.name" placeholder="请输入加油站名称" clearable></el-input>
                 </el-form-item>
@@ -142,5 +142,4 @@ const onCurrentChange = (val: number) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
 </style>

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

@@ -6,33 +6,33 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="oilEngineData.filterModel" @submit.stop.prevent>
             <el-form-item prop="name" style="width:100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="油机号">
                   <el-input v-model="oilEngineData.filterModel.name" placeholder="请输入油机号" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="加油站">
                   <el-input v-model="oilEngineData.filterModel.gasStation" placeholder="请输入加油站" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="加油机机型">
                   <el-input v-model="oilEngineData.filterModel.model" placeholder="请输入加油机机型" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="设备状态">
-                  <el-select  v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态" >
-                    <el-option v-for="(value, key) in FuelDispenserEnum" :key="key" :label="value"  :value="key" />
+                  <el-select v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态">
+                    <el-option v-for="(value, key) in FuelDispenserEnum" :key="key" :label="value" :value="key" />
                   </el-select>
                   <!-- <el-input v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态" clearable></el-input> -->
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="在线状态">
-                  <el-select  v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态" >
-                    <el-option v-for="(value, key) in OnlineStatus" :key="key" :label="value"  :value="key" />
+                  <el-select v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态">
+                    <el-option v-for="(value, key) in OnlineStatus" :key="key" :label="value" :value="key" />
                   </el-select>
                   <!-- <el-input v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态" clearable></el-input> -->
                 </el-form-item>
@@ -46,65 +46,53 @@
           <el-row justify="space-between" class="submit-button">
             <el-row>
               <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-                  <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
+              <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
             </el-row>
           </el-row>
         </el-card>
       </el-col>
       <!--列表-->
       <el-col :xs="24">
-        <el-card style="height: 70vh"  class="my-fill mt8" shadow="hover">
-          <el-table v-loading="oilEngineData.loading" stripe :data="oilEngineData.tableModel" row-key="id" style="width: 100%">
-            <el-table-column prop="name" label="油机号"  />
-            <el-table-column prop="oilCompany" label="石油公司"  />
-            <el-table-column prop="gasStation" label="加油站"  />
-            <el-table-column prop="serialNumber" label="序列号"  />
-            <el-table-column prop="model" label="加油机机型"  />
-            <el-table-column prop="gunCount" label="加油机枪数量"  />
+        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
+          <el-table v-loading="oilEngineData.loading" stripe :data="oilEngineData.tableModel" row-key="id"
+            style="width: 100%">
+            <el-table-column prop="name" label="油机号" />
+            <el-table-column prop="oilCompany" label="石油公司" />
+            <el-table-column prop="gasStation" label="加油站" />
+            <el-table-column prop="serialNumber" label="序列号" />
+            <el-table-column prop="model" label="加油机机型" />
+            <el-table-column prop="gunCount" label="加油机枪数量" />
             <!-- <el-table-column prop="manufacturer"  label="加油机厂商" /> -->
-            <el-table-column prop="manufactureDate"  label="出场时间" />
-            <el-table-column prop="startupDate"  label="启动时间" />
-            <el-table-column prop="installationDate"  label="安装时间" />
-            <el-table-column prop="deviceStatus" label="设备状态" >
+            <el-table-column prop="manufactureDate" label="出场时间" />
+            <el-table-column prop="startupDate" label="启动时间" />
+            <el-table-column prop="installationDate" label="安装时间" />
+            <el-table-column prop="deviceStatus" label="设备状态">
               <template #default="{ row }">
-                <div :style="{color:getColor(getOilEngineStatus(row.deviceStatus))}" class="bold-font">
-                  {{getOilEngineStatus(row.deviceStatus)}}
+                <div :style="{ color: getColor(getOilEngineStatus(row.deviceStatus)) }" class="bold-font">
+                  {{ getOilEngineStatus(row.deviceStatus) }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="onlineStatus" label="在线状态" >
+            <el-table-column prop="onlineStatus" label="在线状态">
               <template #default="{ row }">
-                <div :style="{color:getColor(getOilEngineStatus(row.onlineStatus))}" class="bold-font">
-                  {{getOilEngineStatus(row.onlineStatus)}}
+                <div :style="{ color: getColor(getOilEngineStatus(row.onlineStatus)) }" class="bold-font">
+                  {{ getOilEngineStatus(row.onlineStatus) }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="100">
+            <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation"
+              width="100">
               <template #default="{ row }">
-                <el-link
-                  class="my-el-link mr12 ml12"
-                  @click="toPage(row)"
-                  type="primary"
-                  icon="ele-Tickets"
-                  :underline="false"
-                  target="_blank"
-                >详情</el-link>
+                <el-link class="my-el-link mr12 ml12" @click="toPage(row)" type="primary" icon="ele-Tickets"
+                  :underline="false" target="_blank">详情</el-link>
               </template>
             </el-table-column>
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination
-              v-model:currentPage="oilEngineData.pageInput.currentPage"
-              v-model:page-size="oilEngineData.pageInput.pageSize"
-              :total="oilEngineData.total"
-              :default-page-size="5"
-              :page-sizes="[5, 10, 20, 50, 100]"
-              small
-              background
-              @size-change="onSizeChange"
-              @current-change="onCurrentChange"
-              layout="total, sizes, prev, pager, next, jumper"
-            />
+            <el-pagination v-model:currentPage="oilEngineData.pageInput.currentPage"
+              v-model:page-size="oilEngineData.pageInput.pageSize" :total="oilEngineData.total" :default-page-size="5"
+              :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onSizeChange"
+              @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
         </el-card>
       </el-col>
@@ -114,11 +102,11 @@
 
 <script setup lang="ts">
 
-import { onBeforeMount, onMounted, reactive,ref } from "vue";
-import {ListOfOilEnginesApi} from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi";
-import {FuelDispenserDto_SearchFilter,PageInputFuelDispenserDto,FuelDispenserDto} from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";
+import { onBeforeMount, onMounted, reactive, ref } from "vue";
+import { ListOfOilEnginesApi } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi";
+import { FuelDispenserDto_SearchFilter, PageInputFuelDispenserDto, FuelDispenserDto } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";
 import eventBus from "/@/utils/mitt";
-import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
+import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import router from "/@/router";
 
 /**获取全局缓存*/
@@ -130,20 +118,20 @@ const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStat
 /**
  * 油机列表数据对象
  */
-  const oilEngineData = reactive({
+const oilEngineData = reactive({
   loading: false,
   filterModel: {
     /**油机号*/
     name: "",
-     /**加油站*/
-    gasStation:"",
+    /**加油站*/
+    gasStation: "",
     /**加油机机型*/
     model: "",
     /**设备状态*/
     deviceStatus: "",
     /**在线状态*/
     onlineStatus: "",
-  }as FuelDispenserDto_SearchFilter,
+  } as FuelDispenserDto_SearchFilter,
   total: 0,
   pageInput: {
     currentPage: 1,
@@ -151,12 +139,12 @@ const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStat
   } as PageInputFuelDispenserDto,
   tableModel: [] as Array<FuelDispenserDto>
 })
- /**设备状态*/
+/**设备状态*/
 enum FuelDispenserEnum {
   enable = '启用',
   register = '备案',
-  disable='维修',
-  factory='出产注册'
+  disable = '维修',
+  factory = '出产注册'
 }
 /**在线状态*/
 enum OnlineStatus {
@@ -196,11 +184,11 @@ const onSizeChange = () => {
 }
 
 /**页数变化*/
-const onCurrentChange = () =>{
+const onCurrentChange = () => {
   init()
 }
 const toPage = (row) => {
-  router.push({path:`/statement/${row.fuelId}`})
+  router.push({ path: `/statement/${row.fuelId}` })
 }
 // /**油机列表 - 列表状态 */
 // const getOilEngineStatusType = (val) => {
@@ -214,17 +202,17 @@ const toPage = (row) => {
 /**油机列表 - 列表设备状态、在线状态 */
 const getOilEngineStatus = (val) => {
   val = String(val)
-  if(oilEngineStatus.value.has(val)){
+  if (oilEngineStatus.value.has(val)) {
     return oilEngineStatus.value.get(val)
-  }else {
+  } else {
     return val
   }
 }
 /**初始化 */
 const init = async () => {
   oilEngineData.loading = true
-  const query = flattenObject({ filterModel: oilEngineData.filterModel})
-  const res:any = await new ListOfOilEnginesApi().getPage({...oilEngineData.pageInput, filter:oilEngineData.filterModel})
+  const query = flattenObject({ filterModel: oilEngineData.filterModel })
+  const res: any = await new ListOfOilEnginesApi().getPage({ ...oilEngineData.pageInput, filter: oilEngineData.filterModel })
   oilEngineData.tableModel = res?.data?.list ?? []
   oilEngineData.total = res?.data?.total ?? 0
   oilEngineData.loading = false
@@ -240,13 +228,13 @@ const resetQuery = () => {
 
 //设置不同设备状态、在线状态字体颜色
 const getColor = (value: string): string => {
-  if (value === '在线'||value === '启用') {
+  if (value === '在线' || value === '启用') {
     return '#41b584';
   } else if (value === '出厂注册') {
-      return '#409eff';
-  } else if(value === '备案') {
+    return '#409eff';
+  } else if (value === '备案') {
     return '#E6A23C';
-  }else{
+  } else {
     return '#F34D37'
   }
 }

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

@@ -1,142 +1,239 @@
 <template>
-  <div class="layout-pd">
-    <el-row>
-      <el-col :xs="24">
-        <el-card style="height: 86vh"   class="mt8 my-fill all-con" shadow="hover">
-          <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="ma-con">
-            <!-- <div class="top-con" id="top-conId" v-loading="oilListData.loading">
-              <el-scrollbar>
-                <div class="scrollbar-flex-content" >
-                  <div class="card"  :style="{backgroundColor: item.oilEngineStatus === '在线' ? '#67C23A': '#F56C6C'}" name="card"   v-for="(item,index) in oilListData.list" v-bind:key="index"  >
-                    <div class="info-con">
-                      <span>{{item.oilEngineName}}&nbsp;&nbsp;
-                        <span >
-                          {{item.oilEngineStatus}}
-                        </span>
-                      </span>
-                      <span >{{item.oilSpecifications}}</span>
-                    </div>
-                    <div class="info-con">
-                      <span>油品:&nbsp;{{item.oils}}</span>
-                      <span>自锁状态:&nbsp;
-                        <span >{{item.selfLockingState}}</span>
-                      </span>
-                    </div>
-                    <div class="info-con">
-                      <span>ESQS编码:&nbsp;{{item.ECQSCode}}</span>
-                    </div>
-                  </div>
-                </div>
-              </el-scrollbar>
-            </div> -->
-            <div class="bom-con">
-              <div class="bomCon-lef">
-                <el-image style="top: 25%;translate: (-50%,-50%);" src="https://cma-fds.org.cn/static/img/dispenser.6960513.png"></el-image>
+  <div class="layout-pd" style="height: 100%;width: 100%;">
+    <el-row style="height: 100%;width: 100%; display: flex;">
+      <!-- 菜单栏 -->
+      <el-menu default-active="2" class="el-menu-vertical-demo" text-color="black" @open="handleOpen"
+        @close="handleClose" v-if="showicon">
+        <el-menu-item index="1">
+          <span>整站</span>
+        </el-menu-item>
+        <el-sub-menu index="2">
+          <template #title>
+            <span>{{ detailsData.list.name }}号机</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item index="1-1" v-for="(item, index) in oilListData.list" v-bind:key="index"> {{
+              item.mainBoard_NozzleNo
+            }}</el-menu-item>
+          </el-menu-item-group>
+        </el-sub-menu>
+        <!-- <el-menu-item index="2">
+          <span>Navigator Two</span>
+        </el-menu-item>
+        <el-menu-item index="3" disabled>
+          <span>Navigator Three</span>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <span>Navigator Four</span>
+        </el-menu-item> -->
+      </el-menu>
+
+      <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>
-              <div class="bomCon-rig">
-                <div class="bomConR-lef">
-                  <el-card v-loading="detailsData.loading"  style="margin-bottom: 10px;" :header="detailsData.list.name+'号机油机'">
-                      <div class="oilInfo-con" >
-                        <div class="oilInfo-item">出厂编号:&nbsp;{{detailsData.list.serialNumber}}</div>
-                        <div class="oilInfo-item">机型:&nbsp;{{detailsData.list.model}}</div>
-                        <div class="oilInfo-item">制造商:&nbsp;{{detailsData.list.manufacturer}}</div>
-                        <div class="oilInfo-item oilInfo-item-two">
-                          <span>规格参数:&nbsp;{{detailsData.list.modelSpec}}</span>
-                          <span>生产日期:&nbsp;{{detailsData.list.createdTime}}</span>
-                        </div>
-                        <div class="oilInfo-item oilInfo-item-two">
-                          <span>测量范围:&nbsp;{{detailsData.list.measureRang}}</span>
-                          <span>安装日期:&nbsp;{{detailsData.list.installationDate}}</span>
-                        </div>
-                        <div class="oilInfo-item oilInfo-item-two">
-                          <span>准确度等级:&nbsp;{{detailsData.list.accuracyLevel}}</span>
-                          <span>启用日期:&nbsp;{{detailsData.list.startupDate}}</span>
-                        </div>
-                        <div class="oilInfo-item oilInfo-item-two">
-                          <span>设备状态:&nbsp;{{detailsData.list.deviceStatus}}</span>
-                          <span>在线状态:&nbsp;{{detailsData.list.onlineStatus}}</span>
-                        </div>
-                        <div class="oilInfo-item oilInfo-item-two">
-                          <span>报警状态:&nbsp;{{detailsData.list.alarmLevel}}</span>
-                          <span>累计在线时间:&nbsp;{{detailsData.list.onlineDesc}}</span>
-                        </div>
-                      </div>
-                  </el-card>
-                  <el-card v-loading="tableData.loading" >
-                    <div style="margin-bottom: 10px;color: #505050;">
-                      <span>最新5条报警</span>
-                      <span style="float: right;"><el-link type="primary" @click="toPage()">更多报警>></el-link></span>
-                    </div>
-                    <el-table :data="tableData.list" stripe  row-key="id" style="width: 100%">
-                      <el-table-column prop="createdDate" label="时间"  />
-                      <el-table-column prop="name" 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 class="bomConR-rig" style="padding-right: 0;"  >
-                  <el-row :gutter="12">
-                    <el-col :span="12" v-for="(item,index) in oilListData.list" v-bind:key="index" >
-                      <el-card v-loading="oilListData.loading" style="margin-bottom: 10px;width: 100%;" @click="toParts(item.name,item.mainBoard_NozzleNo,item.onlineStatus,item.fuelName,item.alarming,item.code)">
-                        <div class="oilInfo-con" style="padding: 0;">
-                          <div class="oilInfo-item oilInfo-item-two">
-                          <span>{{item.name}}</span>
-                          <span style="float: right;">{{item.mainBoard_NozzleNo}}</span>
-                        </div>
-                          <div class="oilInfo-item oilInfo-item-two">
-                            <span>在线状态:&nbsp;{{item.onlineStatus}}</span>
-                          </div>
-                          <div class="oilInfo-item oilInfo-item-two">
-                            <span>油品:&nbsp;{{ item.fuelName }}</span>
-                          </div>
-                          <div class="oilInfo-item oilInfo-item-two">
-                            <span>自锁功能:&nbsp;{{ item.alarming }}</span>
-                          </div>
-                          <div class="oilInfo-item oilInfo-item-two">
-                            <span>ECQS编码:&nbsp;{{item.code}}</span>
-                          </div>
-                          <!-- <div class="oilInfo-item oilInfo-item-two" style="float: right;">
-                            <el-icon :size="20"><circle-plus-filled /></el-icon>
-                          </div> -->
-                        </div>
-                      </el-card>
-                    </el-col>
-                  </el-row>
-                </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>
+        <!-- 油机内容 -->
+        <el-text tag="b" style="color: #000">油机详情</el-text>
+        <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-row>
           </div>
         </el-card>
-      </el-col>
+        <el-row :gutter="10" class="oilInfo-bottom">
+          <el-col :span="0.5" class="oilInfo-bottom">
+            <el-text tag="b" style="color: #000">油枪列表</el-text>
+          </el-col>
+          <el-col :span="0.5" class="oilInfo-bottom">
+            <div class="oilLabel-con" @click="isOnline('所有')"
+              :style="flagData.isFlag == '所有' ? 'background-color:#4d4dff' : 'background-color:#89898b'">所有
+            </div>
+          </el-col>
+          <el-col :span="0.5" class="oilInfo-bottom">
+            <div class="oilLabel-con" @click="isOnline('在线')"
+              :style="flagData.isFlag == '在线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">在线</div>
+          </el-col>
+          <el-col :span="0.5" class="oilInfo-bottom">
+            <div class="oilLabel-con" @click="isOnline('离线')"
+              :style="flagData.isFlag == '离线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">离线</div>
+          </el-col>
+          <el-col :span="0.5" class="oilInfo-bottom">
+            <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验通过</div>
+          </el-col>
+          <el-col :span="0.5" class="oilInfo-bottom">
+            <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验失败</div>
+          </el-col>
+        </el-row>
+        <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 }}
+              </el-row>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+
     </el-row>
 
+
+
+
+
   </div>
 </template>
 
 <script setup lang="ts">
-import {onMounted, reactive, ref, watch} from "vue";
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+  CaretRight,
+  CaretLeft,
+} from '@element-plus/icons-vue'
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+
+
+const url = '/src/assets/logo-com.png'
+const uurl = '/src/assets/map/IconParkSolidCheckOne.png'
+const urrl = '/src/assets/map/IconParkSolidCloseOne.png'
+
+
+
+// -------------------------
+
+
+
+
+import { onMounted, reactive, ref, watch } from "vue";
 //import { CirclePlusFilled } from '@element-plus/icons-vue'
 import { NozzlecontrolDtl } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
-import {OilEngineDetailsApi} from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
-import { FuelDispenserEntity,AlarmHistoryDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
+import { OilEngineDetailsApi } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
+import { FuelDispenserEntity, AlarmHistoryDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
 import router from "/@/router";
-import {MoreOilEngineDetailsApi} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
+import { MoreOilEngineDetailsApi } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";
+import { random, range } from 'lodash';
 
 /******************************数据对象***************************************/
 
@@ -169,8 +266,17 @@ const oilListData = reactive({
 const initID = ref()
 const toPage = () => {
   const id = router.currentRoute.value.params.id
-  router.push({path:`/statement/${id}/more/moreAlert`})
+  router.push({ path: `/statement/${id}/more/moreAlert` })
 }
+
+/**
+ * 油枪列表相关数据
+ */
+let listcom = JSON.parse(JSON.stringify(oilListData.list))
+let flagData = reactive({
+  keyData: 0,
+  isFlag: '所有'
+})
 /******************************数据对象***************************************/
 
 /*******************************方法**************************************/
@@ -203,7 +309,7 @@ const toPage = () => {
 //   ele.classList.add("active-card")
 // }
 
-watch(() => initID.value, ()=>{
+watch(() => initID.value, () => {
   initTableData()
   initDetailsData()
 })
@@ -214,8 +320,8 @@ watch(() => initID.value, ()=>{
 /**
  * 格式化日期
  */
-const formatDate=(val)=>{
-  const date=new Date(val)
+const formatDate = (val) => {
+  const date = new Date(val)
   const year: number = date.getFullYear();
   const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
   const day: string = date.getDate().toString().padStart(2, '0');
@@ -229,10 +335,12 @@ const formatDate=(val)=>{
  */
 const initOilListData = async () => {
   oilListData.loading = true
-  const fuelId=router.currentRoute.value.params.id
-  const { data } = await new MoreOilEngineDetailsApi().getOilListData({Fuelid:fuelId})
+  const fuelId = router.currentRoute.value.params.id
+  const { data } = await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: fuelId })
   oilListData.list = data
   oilListData.loading = false
+  listcom = data
+  flagData.keyData = Math.random()
 }
 
 /**
@@ -240,14 +348,14 @@ const initOilListData = async () => {
  */
 const initTableData = async () => {
   tableData.loading = true
-  const fuelId=router.currentRoute.value.params.id
-  const filter={fuelId:fuelId}
-  const pageInput={currentPage: 1,pageSize: 5}
-  const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({...pageInput,filter:filter})
+  const fuelId = router.currentRoute.value.params.id
+  const filter = { fuelId: fuelId }
+  const pageInput = { currentPage: 1, pageSize: 5 }
+  const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({ ...pageInput, filter: filter })
   tableData.list = data.list
-  tableData.list=tableData.list?.map((item)=>{
-    if(item.createdDate!==null){
-      item.createdDate=formatDate(item.createdDate)
+  tableData.list = tableData.list?.map((item) => {
+    if (item.createdDate !== null) {
+      item.createdDate = formatDate(item.createdDate)
     }
     return item
   })
@@ -259,32 +367,32 @@ const initTableData = async () => {
  */
 const initDetailsData = async () => {
   detailsData.loading = true
-  const fuelId=router.currentRoute.value.params.id
-  const { data } = await new OilEngineDetailsApi().getBasicInfoDto({Fuelid:fuelId})
+  const fuelId = router.currentRoute.value.params.id
+  const { data } = await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: fuelId })
   detailsData.list = data
-  if(detailsData.list.createdTime!==null){
-    detailsData.list.createdTime=formatDate(detailsData.list.createdTime)
+  if (detailsData.list.createdTime !== null) {
+    detailsData.list.createdTime = formatDate(detailsData.list.createdTime)
   }
-  if(detailsData.list.installationDate!==null){
-    detailsData.list.installationDate=formatDate(detailsData.list.installationDate)
+  if (detailsData.list.installationDate !== null) {
+    detailsData.list.installationDate = formatDate(detailsData.list.installationDate)
   }
-  if(detailsData.list.startupDate!==null){
-    detailsData.list.startupDate=formatDate(detailsData.list.startupDate)
+  if (detailsData.list.startupDate !== null) {
+    detailsData.list.startupDate = formatDate(detailsData.list.startupDate)
   }
-  if(detailsData.list.onlineStatus!==null){
-    if(detailsData.list.onlineStatus==='offline'){
-      detailsData.list.onlineStatus='离线'
-    }else{
-      detailsData.list.onlineStatus='在线'
+  if (detailsData.list.onlineStatus !== null) {
+    if (detailsData.list.onlineStatus === 'offline') {
+      detailsData.list.onlineStatus = '离线'
+    } else {
+      detailsData.list.onlineStatus = '在线'
     }
   }
-  if(detailsData.list.deviceStatus!==null){
-    if(detailsData.list.deviceStatus==='enable'){
-      detailsData.list.deviceStatus='启用'
-    }else if(detailsData.list.deviceStatus==='factory'){
-      detailsData.list.deviceStatus='出厂注册'
-    }else{
-      detailsData.list.deviceStatus='备案'
+  if (detailsData.list.deviceStatus !== null) {
+    if (detailsData.list.deviceStatus === 'enable') {
+      detailsData.list.deviceStatus = '启用'
+    } else if (detailsData.list.deviceStatus === 'factory') {
+      detailsData.list.deviceStatus = '出厂注册'
+    } else {
+      detailsData.list.deviceStatus = '备案'
     }
   }
   detailsData.loading = false
@@ -301,97 +409,139 @@ onMounted(() => {
 })
 
 // 路由跳转 -- 部件信息图
-const toParts = ((name:any,NozzleNo:any,status:any,fuelName:any,alarming:any,code:any)=>{
+const toParts = ((name: any, NozzleNo: any, status: any, fuelName: any, alarming: any, code: any) => {
   router.push({
-    path:`/statement/partInformation`,
-    query:{
-      name:name,
-      NozzleNo:NozzleNo,
-      status:status,
-      fuelName:fuelName,
-      alarming:alarming,
-      code:code
+    path: `/statement/partInformation`,
+    query: {
+      name: name,
+      NozzleNo: NozzleNo,
+      status: status,
+      fuelName: fuelName,
+      alarming: alarming,
+      code: code
     }
   })
 })
 /**********************************初始化***********************************/
 
+const isOnline = (statu: string) => {
+  if (statu == '所有') {
+    listcom = JSON.parse(JSON.stringify(oilListData.list))
+  } else {
+    listcom = oilListData.list.filter((data) => {
+      return data.onlineStatus === statu
+    })
+  }
+  flagData.keyData = Math.random()
+  flagData.isFlag = statu
+}
+
+
+const isDisplay = ref(1)
+// 内容区顶部导航 变换
+const display = (num: number) => {
+  isDisplay.value = num
+  if (num == 2) {
+    toPage()
+  }
+}
+
+// 
+let showicon = ref(true)
+const onShowHide = () => {
+  showicon.value = !showicon.value
+}
 
 
 </script>
 
 <style scoped lang="scss">
-  .all-con {
-
-    .ma-con {
-      height: 100%;
-      .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;
-          }
-        }
-
-        //.active-card {
-        //  background-color: #9fcaf3;
-        //}
-      }
-      .bom-con {
-        display: flex;
-        //height: 82%;
-
-        .bomCon-lef {
-          width: 24%;
-        }
-
-        .bomCon-rig {
-          display: flex;
-          width: 100%;
-
-          .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;
-          }
-        }
-      }
-    }
+.all-con {
+  flex: 1;
+  margin-left: 20px;
+
+
+}
+
+.oilInfo-bottom {
+  margin-bottom: 10px;
+}
+
+.oilInfo-top {
+  margin-bottom: 10px;
+}
+
+.oilInfo-con {
+  width: 100%;
+  height: 25%;
+  border-radius: 10px;
+
+}
+
+.oilInfo-item {
+  color: rgb(173, 171, 171)
+}
+
+.oilInfo-img {
+  margin-right: 20px;
+  width: 75px;
+  height: 75px;
+  background-color: #ccc;
+  border-radius: 8px;
+}
+
+.oilLabel-con {
+  background-color: #89898b;
+  height: 1.5em;
+  width: 3.9em;
+  line-height: 1.5em;
+  text-align: center;
+  border-radius: 999rem;
+  color: #fff;
+}
+
+.oilInfo-msg {
+  height: 200px;
+
+  .oilInfo-item-two {
+    color: rgb(173, 171, 171)
   }
+}
+
+// -------- 菜单栏
+.el-menu,
+.el-menu-item-group {
+  background-color: #fff;
+  color: #606266
+}
+
+::v-deep.el-submenu .el-menu-item {
+  width: auto !important;
+}
+
+.el-menu span,
+.el-menu-item {
+  color: #606266
+}
+
+// 小圆点
+.status-point {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  right: 10%;
+  top: 30%;
+  margin-right: 30px;
+}
+
+.oilInfo-con-first {
+  left: 7em;
+  top: 0.5em;
+}
+
+.one {
+  --el-card-padding: 10px
+}
 </style>

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

@@ -4,28 +4,28 @@
       <!--操作-->
       <el-col :xs="24">
         <el-card class="mt8" shadow="hover">
-          <el-form :model="Data.Filter"  @submit.stop.prevent>
+          <el-form :model="Data.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="序列号">
                   <el-input v-model="Data.Filter.sn" placeholder="请输入序列号" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="在线状态">
                   <el-select v-model="Data.Filter.onlineStatus" placeholder="请选择在线状态">
                     <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value" :value="key" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="设备状态">
                   <el-select v-model="Data.Filter.deviceStatus" placeholder="请选择设备状态">
                     <el-option v-for="(value, key) in selectList.Device" :key="key" :label="value" :value="key" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="报警级别">
                   <el-select v-model="Data.Filter.deviceAlarmLevel" placeholder="请选择报警级别">
                     <el-option v-for="(value, key) in selectList.Level" :key="key" :label="value" :value="key" />
@@ -182,5 +182,4 @@ const onCurrentChange = (val: number) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
 </style>

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

@@ -6,26 +6,26 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="Data.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="序列号">
                   <el-input v-model="Data.Filter.sn" placeholder="请输入序列号" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="在线状态">
                   <el-select v-model="Data.Filter.onlineStatus" placeholder="请选择在线状态">
                     <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value" :value="key" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="设备状态">
                   <el-select v-model="Data.Filter.deviceStatus" placeholder="请选择设备状态">
                     <el-option v-for="(value, key) in selectList.Device" :key="key" :label="value" :value="key" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="报警级别">
                   <el-select v-model="Data.Filter.deviceAlarmLevel" placeholder="请选择报警级别">
                     <el-option v-for="(value, key) in selectList.Level" :key="key" :label="value" :value="key" />
@@ -194,5 +194,4 @@ const onCurrentChange = (val: number) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
 </style>

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

@@ -6,26 +6,26 @@
         <el-card class="mt8" shadow="hover">
           <el-form :model="Data.Filter" @submit.stop.prevent>
             <el-form-item prop="name" style="width: 100%">
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="序列号">
                   <el-input v-model="Data.Filter.sn" placeholder="请输入序列号" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="在线状态">
                   <el-select v-model="Data.Filter.onlineStatus" placeholder="请选择在线状态">
                     <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value" :value="key" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="设备状态">
                   <el-select v-model="Data.Filter.deviceStatus" placeholder="请选择设备状态">
                     <el-option v-for="(value, key) in selectList.Device" :key="key" :label="value" :value="key" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="报警级别">
                   <el-select v-model="Data.Filter.deviceAlarmLevel" placeholder="请选择报警级别">
                     <el-option v-for="(value, key) in selectList.Level" :key="key" :label="value" :value="key" />
@@ -184,7 +184,4 @@ const onCurrentChange = (val: number) => {
 
 </script>
 
-<style scoped lang="scss">
-@import '/@/theme/tableStyle.scss';
-
-</style>
+<style scoped lang="scss"></style>

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

@@ -4,31 +4,31 @@
       <!--操作-->
       <el-col :xs="24">
         <el-card class="mt8" shadow="hover">
-          <el-form :model="Data.Filter"  @submit.stop.prevent>
-            <el-form-item prop="name" style="width: 100%" >
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+          <el-form :model="Data.Filter" @submit.stop.prevent>
+            <el-form-item prop="name" style="width: 100%">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="石油公司">
                   <el-input v-model="Data.Filter.CompanyName" placeholder="请输入石油公司" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="油枪号">
                   <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="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="加油站">
                   <el-input v-model="Data.Filter.StationName" placeholder="请输入加油站名称" clearable></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="在线状态">
                   <el-select v-model="Data.Filter.onlineStatus" placeholder="请选择在线状态">
                     <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value" :value="value" />
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
+              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                 <el-form-item label="出厂时间">
                   <el-date-picker v-model="Data.time1" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                     range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
@@ -36,9 +36,9 @@
               </el-col>
             </el-form-item>
           </el-form>
-          
+
           <hr>
-          
+
           <!-- 按钮 -->
           <el-row justify="space-between" class="submit-button">
             <el-row>
@@ -52,9 +52,9 @@
       <el-col :xs="24">
         <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%" >
+            style="width: 100%">
             <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
-              :label="column.label"/>
+              :label="column.label" />
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
             <el-pagination v-model:currentPage="Data.pageInput.currentPage" v-model:page-size="Data.pageInput.pageSize"
@@ -207,8 +207,4 @@ watch(() => Data.time1, (newVal) => {
 
 <style scoped lang="scss">
 @import '/@/theme/tableStyle.scss';
-
-
-
-
 </style>

admin.ui.plus-master/src/views/admin/visualization/digitalMap/index.vue

@@ -1,34 +1,138 @@
 <template>
+
   <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view to-flex">
-      <div ref="echartsMapRef" style="height: 100%;width: 100%;"></div>
-      <div class="to-right">
-        <h3>国内销售排名Top&nbsp;&nbsp;5</h3>
-        <div class="item" v-for="(item,index) in topData" :key="index">
-          {{item.name}}:&nbsp;&nbsp;{{item.value}}
+    <div class="layout-padding-auto layout-padding-view to-flex" style="background-color:#e9e9e9">
+      <el-row class="to-flex">
+        <el-card class='to-card' shadow="hover">
+          <!-- 标题 -->
+          <div class="to-title">
+            <img :src="url[0]" class="to-img" />
+            <el-text tag="b" class="to-Atext">加油站</el-text>
+            <el-text tag="b" class="to-Btext">176</el-text>
+            <el-text class="to-Ctext">座</el-text>
+          </div>
+          <div class="to-content">
+            <el-table :data="tableData[0]" style=""
+              :cell-style="{ 'text-align': 'right', 'padding': 0, 'font-size': '16px' }" :show-header="false"
+              :row-style="{ height: '10px' }">
+              <el-table-column prop="a" width="90" />
+              <el-table-column prop="b" width="50" />
+              <el-table-column prop="c" width="80" />
+            </el-table>
+          </div>
+        </el-card>
+
+        <el-card class='to-card' shadow="hover">
+          <!-- 标题 -->
+          <div class="to-title">
+            <img :src="url[1]" class="to-img" />
+            <el-text tag="b" class="to-Atext">加油机</el-text>
+            <el-text class="to-Btext">532</el-text>
+            <el-text class="to-Ctext">台</el-text>
+          </div>
+          <div class="to-content">
+            <el-table :data="tableData[1]" style=""
+              :cell-style="{ 'text-align': 'right', 'padding': 0, 'font-size': '16px' }" :show-header="false"
+              :row-style="{ height: '10px' }">
+              <el-table-column prop="a" width="90" />
+              <el-table-column prop="b" width="50" />
+              <el-table-column prop="c" width="80" />
+            </el-table>
+          </div>
+        </el-card>
+
+        <el-card class='to-card' shadow="hover">
+          <!-- 标题 -->
+          <div class="to-title">
+            <img :src="url[2]" class="to-img" />
+            <el-text tag="b" class="to-Atext">加油枪</el-text>
+            <el-text class="to-Btext">1822</el-text>
+            <el-text class="to-Ctext">条</el-text>
+          </div>
+          <div class="to-content">
+            <el-table :data="tableData[2]" style=""
+              :cell-style="{ 'text-align': 'right', 'padding': 0, 'font-size': '16px' }" :show-header="false"
+              :row-style="{ height: '10px' }">
+              <el-table-column prop="a" width="90" />
+              <el-table-column prop="b" width="60" />
+              <el-table-column prop="c" width="80" />
+            </el-table>
+          </div>
+        </el-card>
+      </el-row>
+
+      <!-- 地图 -->
+      <el-card style="height: 100vh;width: 100vw; margin-top: 5px;" shadow="hover">
+        <div ref="echartsMapRef" style="height: 65vh;width: 85vw; text-align: center;"></div>
+        <div class="to-right">
+          <h3>国内销售排名Top&nbsp;&nbsp;5</h3>
+          <div class="item" v-for="(item, index) in topData" :key="index">
+            {{ item.name }}:&nbsp;&nbsp;{{ item.value }}
+          </div>
         </div>
-      </div>
+        <div class="to-left">
+          <div class="range">全国</div>
+          <div class="title">油站、油机、油枪综合分布</div>
+        </div>
+      </el-card>
+
     </div>
   </div>
+
 </template>
 
 <script setup lang="ts">
 
 import echartsMapList from "./mockData/mock.json"
-import {onMounted, ref} from "vue";
+import { onMounted, reactive, ref } from "vue";
 import * as echarts from "echarts";
-import {allCity} from "/@/views/admin/visualization/digitalMap/mockData/allCity";
+import { allCity } from "/@/views/admin/visualization/digitalMap/mockData/allCity";
 import router from "/@/router";
 
 // 定义变量内容
 const echartsMapRef = ref<RefType>('')
 
 
+// -----------
+const url = [
+  '/src/assets/map/address.PNG',
+  '/src/assets/map/oilEngine.PNG',
+  '/src/assets/map/oilGun.PNG'
+]
+const tableData = reactive([[{
+  a: '校验失败',
+  b: '33',
+  c: '18.75%'
+}, {
+  a: '离线',
+  b: '5',
+  c: '2.84%'
+}],
+[{
+  a: '校验失败',
+  b: '50',
+  c: '9.40%'
+}, {
+  a: '离线',
+  b: '21',
+  c: '3.95%'
+}],
+[{
+  a: '校验失败',
+  b: '183',
+  c: '10.04%'
+}, {
+  a: '离线',
+  b: '72',
+  c: '3.95%'
+}]
+])
+
 const mapData = allCity.sort((a, b) => {
   return b.value - a.value
 })
 
-const topData= mapData.slice(0, 5)
+const topData = mapData.slice(0, 5)
 
 
 // 注册中国地图
@@ -46,28 +150,28 @@ const initEchartsMap = () => {
   const myChart = echarts.init(echartsMapRef.value)
   const option = {
     backgroundColor: 'transparent',
-    title: {
-      text: '国内销售数量',
-      left: 'center',
-      textStyle: {
-        color: '#000'
-      }
-    },
-    // layoutCenter: ['50%', '80%'],//位置
-    // layoutSize:'130%',//大小
+    // title: {
+    //   text: '国内销售数量',
+    //   left: 'center',
+    //   textStyle: {
+    //     color: '#000'
+    //   }
+    // },
+    // layoutCenter: ['40%', '60%'],//位置
+    // layoutSize: '65%',//大小
     tooltip: {
       trigger: 'item',
       formatter: (params) => params.name
     },
     visualMap: {
       min: 0,
-      max: 50,
+      max: 300,
       text: ['High', 'Low'],
       realtime: false,
       calculable: true,
       inRange: {
-        // color: ['lightskyblue', 'yellow', 'orangered']
-        color: ['#aacff9','#75c7f6', '#33a9d6']
+        color: ['lightskyblue', 'yellow', 'orangered']
+        // color: ['#aacff9', '#75c7f6', '#33a9d6']
       }
     },
     series: [
@@ -77,35 +181,35 @@ const initEchartsMap = () => {
         map: 'echartsMapList',
         label: {
           show: true,
-          fontSize:12,
-          formatter:(params) => {
-            if(params.value){
-              return params.name+':'+params.value
+          fontSize: 12,
+          formatter: (params) => {
+            if (params.value) {
+              return params.name + ':' + params.value
             }
-            return params.name+':0'
+            return params.name + ':0'
           },
         },
-        top:'30%',
-        roam:true,
-        zoom:1.6,
+        top: '30%',
+        roam: true,
+        zoom: 1.6,
         scaleLimit: {
           //滚轮缩放的极限控制
           min: 1, //缩放最小大小
         },
-        data:mapData,
+        data: mapData,
       }
     ]
   }
   myChart.setOption(option)
-  myChart.on('georoam',(params) => {
-    if('dy' in params|| 'dx' in params) return
+  myChart.on('georoam', (params) => {
+    if ('dy' in params || 'dx' in params) return
     const myOption = myChart.getOption()
     const myZoom = myOption.series[0].zoom
-    if(myZoom > 1.5){
+    if (myZoom > 1.5) {
       myOption.series[0].label.fontSize = 20
-    }else if(myZoom > 1.1){
+    } else if (myZoom > 1.1) {
       myOption.series[0].label.fontSize = 12
-    }else {
+    } else {
       myOption.series[0].label.fontSize = 10
     }
     delete myOption.series[0].top
@@ -113,7 +217,7 @@ const initEchartsMap = () => {
     myChart.setOption(myOption)
   })
   myChart.on('click', (e) => {
-    router.push({path:`/admin/visualization/cityLevelMap/${e.data.code}/${e.data.name}`})
+    router.push({ path: `/admin/visualization/cityLevelMap/${e.data.code}/${e.data.name}` })
   });
   window.addEventListener('resize', () => {
     myChart.resize()
@@ -131,6 +235,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .to-flex {
   position: relative;
+
   .to-right {
     position: absolute;
     display: flex;
@@ -143,15 +248,112 @@ onMounted(() => {
     max-width: 300px;
     height: 25%;
     background-color: rgba(0, 234, 255, 0.5);
-    color: #000; /* 文本颜色为黑色 */
+    color: #000;
+
+    /* 文本颜色为黑色 */
     h3 {
       text-align: center;
       font-size: 14px;
     }
+
     .item {
       text-align: center;
       font-size: 12px;
     }
   }
+
+  .to-left {
+    width: 15%;
+    // max-width: 500px;
+    height: 25%;
+    position: absolute;
+    z-index: 999;
+    top: 40%;
+    left: 10%;
+    font-size: 18px;
+
+    .range {
+      border: {
+        top: 1px solid black;
+        bottom: 1px solid black
+      }
+
+      text-align: center;
+      width: 50px;
+      color: rgb(12, 169, 231);
+      font-weight: 600;
+      transform: skew(-10deg);
+      margin-bottom: 5%;
+    }
+
+    .title {
+      color: #8d8b8b;
+    }
+  }
+}
+
+/** ----- 顶部信息框样式 ----- */
+// 去除边框线
+::v-deep .el-table--border th.el-table__cell,
+::v-deep .el-table td.el-table__cell {
+  border-bottom: none !important;
+}
+
+::v-deep .el-table--border .el-table__cell {
+  border-right: none !important;
+}
+
+::v-deep .el-table--group,
+.el-table--border {
+  border: none !important;
+}
+
+::v-deep .el-table .cell {
+  padding: 0;
+}
+
+.el-table {
+  --el-table-border-color: none;
+}
+
+.to-card {
+  flex: 1;
+  text-align: center;
+  margin-right: 7px;
+
+  .to-title {
+    // width: 85%;
+    margin-bottom: 20px
+  }
+
+  .to-img {
+    width: 50px;
+    position: relative;
+    top: 15px;
+
+  }
+
+  .to-Atext {
+    color: black;
+    margin-left: 10px;
+    font-size: 18px;
+  }
+
+  .to-Btext {
+    color: blue;
+    margin-left: 10px;
+    font-size: 16px;
+  }
+
+  .to-Ctext {
+    color: #000;
+    margin-left: 5px;
+    font-size: 16px;
+  }
+
+  .to-content {
+    margin: auto;
+    width: 100%;
+  }
 }
 </style>