feat:前端优化

admin.ui.plus-master/src/components/StatusBox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="status-box" :class="boxColorClass">
-      <span :class="textColorClass">{{ displayText }}</span>
+      <span :class="textColorClass">{{ status }}</span>
     </div>
   </template>
   
@@ -14,28 +14,65 @@
       }
     },
     computed: {
-      displayText() {
-        switch (this.status) {
-          case 1: return '成功'
-          case 0: return '未测试'
-          case 2: return '失败'
-          case "已生产": return '已生产'
-          default: return '失败'
-        }
-      },
+      // displayText() {
+      //   switch (this.status) {
+      //     // PCBA-主板检测列表
+      //     case '成功': return '成功'
+      //     case '未测试': return '未测试'
+      //     case '失败': return '失败'
+      //     // 生产管理-部件电子档案
+      //     case "已生产": return '已生产'
+      //     case "生产中": return '生产中'
+      //     case "已装机": return '已装机'
+      //     case "待灌注": return '待灌注'
+      //     case "已灌注": return '已灌注'
+      //     case "已备案": return '已备案'
+      //     default: return '失败'
+      //   }
+      // },
       textColorClass() {
         switch (this.status) {
-          case 1: return 'green'
-          case 0: return 'blue'
-          case 2: return 'red'
+          // PCBA-主板检测列表
+          case '成功': return 'green'
+          case '未测试': return 'blue'
+          case '失败': return 'red'
+          // 生产管理-部件电子档案
+          case "已生产": return 'blue'
+          case "生产中": return 'grey'
+          case "已装机": return 'green'
+          case "待灌注": return 'yellow'
+          case "已灌注": return 'grey'
+          case "已备案": return 'green'
+          // 生产管理-部件类型
+          case "启用": return 'green'
+          case "未启用": return 'red'
+
+          case "出厂注册": return 'blue'
+          case '在线': return 'green'
+
           default: return 'red'
         }
       },
       boxColorClass() {
         switch (this.status) {
-          case 1: return 'green'
-          case 0: return 'blue'
-          case 2: return 'red'
+         // PCBA-主板检测列表
+          case '成功': return 'green'
+          case '未测试': return 'blue'
+          case '失败': return 'red'
+          // 生产管理-部件电子档案
+          case "已生产": return 'blue'
+          case "生产中": return 'grey'
+          case "已装机": return 'green'
+          case "待灌注": return 'yellow'
+          case "已灌注": return 'grey'
+          case "已备案": return 'green'
+          // 生产管理-部件类型
+          case "启用": return 'green'
+          case "未启用": return 'red'
+
+          case "出厂注册": return 'blue'
+          case '在线': return 'green'
+
           default: return 'red'
         }
       }
@@ -45,7 +82,7 @@
   
   <style scoped>
   .status-box {
-    width: 50px;
+    width: 60px;
     height: 30px;
     background-color: white;
     border: 1px solid;
@@ -71,6 +108,16 @@
     background-color: #ddd1fd;
   }
   
+  .status-box.gray {
+    border-color:grey;
+    background-color:#8a8b94;
+  }
+
+  .status-box.yellow {
+    border-color:yellow;
+    background-color:#fefff4;
+  }
+
   span.green {
     color: green;
   }
@@ -82,4 +129,12 @@
   span.blue {
     color: blue;
   }
+
+  span.grey{
+    color: gray;
+  }
+
+  .status-box.yellow {
+    color: rgb(255, 208, 0);
+  }
   </style>

admin.ui.plus-master/src/views/admin/PCBA/boardFunctionResult/index.vue

@@ -89,9 +89,7 @@
             <el-table-column prop="name" label="功能名称" />
             <el-table-column prop="result" label="测试结果">
               <template #default="{ row }">
-                <div :style="{ color: getPCBATestState(row.result).color }" class="bold-font">
-                  {{ getPCBATestState(row.result).name }}
-                </div>
+                  <StatusBox :status="getPCBATestState(row.result).name" />
               </template>
             </el-table-column>
             <el-table-column prop="onceTestPass" label="是否一次通过">
@@ -133,6 +131,8 @@ import { BoardFunctionResultDto } from '/@/api/admin/PCBA/BoardFunctionResultDto
 import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { getCurrentInstance } from 'vue';
+import StatusBox from "/@/components/StatusBox.vue";
+
 const { proxy: ctx } = getCurrentInstance();
 
 /**获取全局缓存*/

admin.ui.plus-master/src/views/admin/PCBA/boardList/index.vue

@@ -73,9 +73,9 @@
             <el-table-column prop="lastTestTime" label="最近检测时间" />
             <el-table-column prop="lastTestState" label="最新检测状态">
               <template #default="{ row }">
-                <status-box :status="row.lastTestState" />
+                <status-box :status="getTestStateText(row.lastTestState)" />
               </template>
-            </el-table-column>
+            </el-table-column>            
             <el-table-column prop="lastTestUser" label="最新检测员" />
             <el-table-column prop="onceTestPass" label="是否一次通过">
               <template #default="{ row }">
@@ -180,6 +180,15 @@ const state = reactive({
   total: 0,
 });
 
+// 将测试状态值转换为文本
+const getTestStateText = (state: number): string => {
+  switch(state) {
+    case 0: return '未测试';
+    case 1: return '成功';
+    case 2: return '失败';
+  }
+};
+
 onMounted(() => {
   init();
   eventBus.off('refreshView');

admin.ui.plus-master/src/views/admin/PCBA/boardTestRecord/index.vue

@@ -102,7 +102,8 @@
             <el-table-column prop="result" label="测试结果">
               <template #default="{ row }">
                 <div :style="{ color: getPCBATestState(row.result).color }" class="bold-font">
-                  {{ getPCBATestState(row.result).name }}
+                  <StatusBox :status="getPCBATestState(row.result).name" />
+                  <!-- {{ getPCBATestState(row.result).name }} -->
                 </div>
               </template>
             </el-table-column>
@@ -137,6 +138,8 @@ import { BoardTestRecordDto } from '/@/api/admin/PCBA/boardTestRecordDto';
 import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { getCurrentInstance } from 'vue';
+import StatusBox from "../../../../components/StatusBox.vue";
+
 const { proxy: ctx } = getCurrentInstance();
 
 /**获取全局缓存*/

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

@@ -13,13 +13,13 @@
           </div>
           <div style="width: 100%;margin-top:20px">
             <el-form :inline="true" @submit.stop.prevent style="width: 60%;">
-              <el-form-item label="密钥使用日期" style="width: 40%;">
-                <el-input type="date" v-model="state.filter.useDate" style="width: 100%;" @keyup.enter="onQuery" value-format="yyyy/MM" />
-              </el-form-item>
               <el-form-item label="申请备注" style="width: 40%;">
                 <el-input v-model="state.filter.info" style="width: 100%;" placeholder="请输入申请备注"
                   @keyup.enter="onQuery" />
               </el-form-item>
+              <el-form-item label="密钥使用日期" style="width: 45%;">
+                <el-input type="date" v-model="state.filter.useDate" style="width: 100%;" @keyup.enter="onQuery" value-format="yyyy/MM" />
+              </el-form-item>
             </el-form>
           </div>
           <div v-if="state.pwdDisplay" style="width: 100%;">

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

@@ -34,21 +34,22 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
-                <el-form-item label="选择时间">
-                  <el-date-picker v-model="softwareData.time" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
-                    range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" />
-                </el-form-item>
-              </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                               <el-form-item label="状态">
                                   <el-select  placeholder="请选择上传状态">
+                                   <el-option label="所有" :value="''"></el-option>
                                    <el-option label="已发布" :value="''"></el-option>
                                    <el-option label="待发布" :value="''"></el-option>
                                    <el-option label="失效" :value="''"></el-option>
                                  </el-select>
                              </el-form-item>
                            </el-col>
+                           <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
+                <el-form-item label="选择时间">
+                  <el-date-picker v-model="softwareData.time" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
+                    range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" />
+                </el-form-item>
+              </el-col>
             </el-form-item>
           </el-form>
 
@@ -127,6 +128,7 @@ import eventBus from "/@/utils/mitt";
 import { SoftwarePackageManagementApi } from "/@/api/admin/deviceAuthorization/softwarePackageManagementApi";
 import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
+import StatusBox from "/@/components/StatusBox.vue";
 
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('./components/form-edit.vue'))
@@ -364,6 +366,8 @@ const getProp = (val, row) => {
   if (val === 'softwareType') return softwareType.value.get(String(row[val])).name
   if (val === 'equipmentType') return equipmentType.value.get(String(row[val])).name
   if (val === 'state') return softwarePackageStatus.value.get(String(row[val])).name
+  // <StatusBox :status="softwarePackageStatus.value.get(String(row[val])).name" />
+
   return row[val]
 }
 

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

@@ -54,7 +54,8 @@
             <el-table-column prop="keyGuid" label="GUID" />
             <el-table-column prop="state" label="状态">
               <template #default="{ row }">
-                {{ getState(row.state).name }}
+                <!-- {{ getState(row.state).name }} -->
+                <StatusBox :status="getState(row.state).name" />
               </template>
             </el-table-column>
             <el-table-column prop="deviceType" label="密钥类型">
@@ -91,6 +92,7 @@ import {
 import { ref } from "vue-demi";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { GroupLogoKeyApi } from "/@/api/admin/productionManagement/groupLogoKeyApi";
+import StatusBox from "/@/components/StatusBox.vue";
 
 /**
  * 团标密钥查询时需要的参数

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

@@ -20,14 +20,6 @@
                                 </el-form-item>
                             </el-col>
 
-                            <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"
-                                        start-placeholder="开始日期" end-placeholder="结束日期" />
-                                </el-form-item>
-                            </el-col>
-
                             <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                               <el-form-item label="状态">
                                   <el-select  placeholder="请选择上传状态">
@@ -38,6 +30,14 @@
                              </el-form-item>
                            </el-col>
                         </el-form-item>
+                        
+                        <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"
+                                        start-placeholder="开始日期" end-placeholder="结束日期" />
+                                </el-form-item>
+                            </el-col>
                     </el-form>
 
                     <hr>
@@ -105,6 +105,8 @@ import { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { QRBookApi } from "/@/api/admin/productionManagement/qrBookApi";
 import eventBus from "/@/utils/mitt";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
+import StatusBox from "/@/components/StatusBox.vue";
+
 
 /**引入组件*/
 const FileEditDialog = defineAsyncComponent(() => import('./components/qrbook-edit.vue'))
@@ -228,6 +230,8 @@ const getName = (val, row) => {
     return row[val]
 }
 
+
+
 watch(() => qrBookData.time, (val) => {
     if (val?.length === 0) return
     qrBookData.Filter.StartTime = val?.[0].toString()

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

@@ -90,17 +90,20 @@
             <el-table-column prop="tqcKeyState" label="国标状态">
               <template #default="{ row }">
                 <!-- <div :style="{color:getComponentStatus(row.key_name).color}" class="bold-font"> -->
-                <div :style="{ color: getColor(getComponentStatus(row.tqcKeyState).name) }" class="bold-font">
+                <!-- <div :style="{ color: getColor(getComponentStatus(row.tqcKeyState).name) }" class="bold-font">
                   {{ getComponentStatus(row.tqcKeyState).name }}
-                </div>
+                </div> -->
+                <StatusBox :status="getComponentStatus(row.tqcKeyState).name" />
               </template>
             </el-table-column>
             <el-table-column prop="ecvrKeyState" label="油气回收">
               <template #default="{ row }">
                 <!-- <div :style="{color:getComponentStatus(row.key_name).color}" class="bold-font"> -->
-                <div :style="{ color: getColor(getComponentStatus(row.ecvrKeyState).name) }" class="bold-font">
+                <!-- <div :style="{ color: getColor(getComponentStatus(row.ecvrKeyState).name) }" class="bold-font">
                   {{ getComponentStatus(row.ecvrKeyState).name }}
-                </div>
+                </div> -->
+                <StatusBox :status="getComponentStatus(row.ecvrKeyState).name" />
+
               </template>
             </el-table-column>
             <el-table-column prop="createTime" label="创建时间" />

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

@@ -61,9 +61,9 @@
             <el-table-column prop="bomNo" label="物料号" />
             <el-table-column prop="status" label="状态">
               <template #default="{ row }">
-                <div :style="{ color: getComponentState(row.status).color }" class="bold-font">
-                  {{ getComponentState(row.status).name }}
-                </div>
+
+                <StatusBox :status="getComponentState(row.status).name" />
+
               </template>
             </el-table-column>
             <el-table-column prop="remark" label="备注" />
@@ -136,7 +136,7 @@ import { PageInputFileGetPageDto } from "/@/api/admin/productionManagement/Comop
 import { ComponentGetPageDto } from "/@/api/admin/productionManagement/ComponentTypeDto";
 import { Picture as IconPicture } from '@element-plus/icons-vue'
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
-
+import StatusBox from '/@/components/StatusBox.vue';
 
 
 /**引入组件*/

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

@@ -42,8 +42,8 @@
                     type="datetimerange"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     range-separator="To"
-                    start-placeholder="Start date"
-                    end-placeholder="End date"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
                   />
                 </el-form-item>
               </el-col>

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

@@ -68,6 +68,7 @@
               <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-button  type="primary" icon="ele-Document" @click="exportDataToExcel"> 导出 </el-button>
           </el-row>
         </el-card>
       </el-col>
@@ -75,7 +76,7 @@
       <el-col :xs="24">
         <el-card class="my-fill mt8" shadow="hover">
           <el-table v-loading="oilEngineData.loading" stripe :data="oilEngineData.tableModel" row-key="id"
-            style="width: 100%">
+            style="width: 100%" id="myTable" ref="myTable">
             <el-table-column prop="name" label="油机号" />
             <el-table-column prop="oilCompany" label="石油公司" />
             <el-table-column prop="gasStation" label="加油站" />
@@ -89,14 +90,19 @@
             <el-table-column prop="deviceStatus" label="设备状态">
               <template #default="{ row }">
                 <div :style="{ color: getColor(getOilEngineStatus(row.deviceStatus)) }" class="bold-font">
-                  {{ getOilEngineStatus(row.deviceStatus) }}
+                <StatusBox :status="getOilEngineStatus(row.deviceStatus)" />
+
+                  <!-- {{ getOilEngineStatus(row.deviceStatus) }} -->
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="onlineStatus" label="在线状态">
               <template #default="{ row }">
                 <div :style="{ color: getColor(getOilEngineStatus(row.onlineStatus)) }" class="bold-font">
-                  {{ getOilEngineStatus(row.onlineStatus) }}
+                <StatusBox :status="getOilEngineStatus(row.onlineStatus)" />
+
+
+                  <!-- {{ getOilEngineStatus(row.onlineStatus) }} -->
                 </div>
               </template>
             </el-table-column>
@@ -128,6 +134,9 @@ import { FuelDispenserDto_SearchFilter, PageInputFuelDispenserDto, FuelDispenser
 import eventBus from "/@/utils/mitt";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import router from "/@/router";
+import StatusBox from "../../../../components/StatusBox.vue";
+
+
 
 /**获取全局缓存*/
 const globalCacheStore = useGlobalCacheStore()
@@ -139,6 +148,7 @@ const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStat
 // 安装日期假数据
 const value1 = ref('')
 
+
 /**
  * 油机列表数据对象
  */
@@ -214,6 +224,7 @@ const onCurrentChange = () => {
 const toPage = (row) => {
   router.push({ path: `/statement/${row.fuelId}` })
 }
+
 // /**油机列表 - 列表状态 */
 // const getOilEngineStatusType = (val) => {
 //   val = String(val)

admin.ui.plus-master/src/views/admin/workbench/index.vue

@@ -64,7 +64,7 @@
 <!--    </el-row>-->
   </div>
   <div class="version">
-    托肯恒山科技有效公司  V 4.1.1  
+    托肯恒山科技有限公司  V 4.1.1  
   </div>
 </template>
 
@@ -746,9 +746,7 @@ $homeNavLengh: 8;
 .version{
   display: flex;
   justify-content: center;
-  margin-top: 4vh;
-  font-size: 3vh;
-  font-family:'Courier New', Courier, monospace;
-  font-weight: 700;
+  margin-top: 6vh;
+  font-size: 15px;
 }
 </style>