瞎改

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>射频通道</title>
+    <title>平面库射频通道</title>
   </head>
   <script>
     window._CONFIG = {};

package.json

@@ -10,16 +10,19 @@
   },
   "dependencies": {
     "axios": "^1.2.1",
-    "element-plus": "^2.2.27",
+    "consola": "^2.15.3",
+    "element-plus": "^2.2.32",
     "pinia": "^2.0.28",
+    "vite-plugin-style-import": "^2.0.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/test-utils": "^2.2.6",
-    "less": "^4.1.2",
     "jsdom": "^20.0.3",
+    "less": "^4.1.2",
+    "sass": "^1.58.3",
     "vite": "^4.0.0",
     "vitest": "^0.25.6"
   }

src/assets/base.css

@@ -19,6 +19,12 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  --theme-primary: linear-gradient(to bottom, #7c9643, #c1d05d);
+
+  --el-bg-color: #00ff00
+
+  
 }
 
 /* semantic color variables for this project */
@@ -72,3 +78,21 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+
+
+.el-tabs {
+  --el-tabs-header-height: 80px !important;
+  background: var(--theme-primary);
+  color: #f8f8f8;
+}
+
+.el-tabs__header {
+  margin-bottom: 0;
+  margin-top: 0px !important;
+}
+
+.el-tabs__item {
+  color: #fff; /* 这里修改为您想要的字体颜色 */
+}
+

src/main.js

@@ -8,10 +8,15 @@ import './assets/main.css'
 import './assets/iconfont/iconfont.css'
 
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/index.css' // 引入 Element Plus 的样式文件
 
 const app = createApp(App)
 
+// 设置全局主题色
+app.config.globalProperties.$theme = {
+    primary: '#1890ff',
+  };
+
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus).mount('#app')

src/views/ChannelSetting.vue

@@ -81,12 +81,12 @@
         </el-row>
         <el-form-item label="读写器类型">
           <el-select v-model="formData.readerType" style="width: 100%;">
-            <el-option :value="4" label="索利得四通道"></el-option>
-            <el-option :value="8" label="索利得八通道"></el-option>
+            <el-option :value="4" label="四通道"></el-option>
+            <el-option :value="8" label="八通道"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="天线功率">
-          <el-input v-model="formData.readerPower" placeholder="4通道格式为10,10,10,10,范围为0-30之间。8通道同理"/>
+          <el-input v-model="formData.readerPower" placeholder="四通道格式为10,10,10,10,范围为0-30之间。8通道同理"/>
         </el-form-item>
         <el-row>
           <el-col :span="12">

src/views/HomeView.vue

@@ -3,13 +3,15 @@
     <el-tab-pane v-for="item in tabList" :key="item.title">
       <template #label>
         <span class="custom-tabs-label">
-          <span :class="item.icon"></span>
-          <span>{{item.title}}</span>
+          <i :class="item.icon" style="font-size: 24px;margin-right: 10px;"></i>
+          <span class="tabfont">{{item.title}}</span>
         </span>
       </template>
       <component :is="item.template" :ref="item.template" @refresh="handleRefresh" @logChange="handleLogChange"></component>
     </el-tab-pane>
-    <el-card><div v-html="log" style="display: flex;align-items: center;"></div></el-card>
+    <el-card>
+      <div v-html="log" class="log-scroll" style="display: flex;align-items: center;"></div>
+    </el-card>
   </el-tabs>
 </template>
 
@@ -61,15 +63,28 @@ export default defineComponent({
 </script>
 
 <style scope>
-.menu-tabs > .el-tabs__content {
-  height: calc(100vh - 71px);
+.tabfont {
+  font-family: '微软雅黑';
+  font-size: 30px;
+  font-weight: 550;
+  /* color: aliceblue; */
 }
-.el-tabs {
-  --el-tabs-header-height: 60px !important;
+
+.log-scroll {
+  display: inline-block;
+  white-space: nowrap;
+  animation: scroll 20s linear infinite;
 }
-.el-tabs--border-card>.el-tabs__content {
-  padding: 0px !important;
+
+@keyframes scroll {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
 }
+
 .red{
   width: 10px;
   height: 10px;

src/views/InTask.vue

 <template>
-  <el-row :gutter="20">
+  <el-row>
     <el-col :span="16">
-      <el-card style="height: calc(50vh - 68px);">
+      <el-card style="height: calc(50vh - 63px);">
         <template #header>
           <div class="card-header">
             <span>计划任务</span>
@@ -11,8 +11,8 @@
         <el-table :data="billList" ref="bill" border style="width: 100%;height: 28.5vh;" highlight-current-row @row-click="billClick">
           <el-table-column type="index" label="序号" width="60" align="center"/>
           <el-table-column prop="bizBillNo" label="单据号" align="center"/>
-          <el-table-column prop="billName" label="凭证号" align="center"/>
-          <el-table-column prop="swOrgName" label="收物单位" align="center"/>
+          <el-table-column prop="billName" label="凭证号" align="center" :show-overflow-tooltip="true"/>
+          <el-table-column prop="swOrgName" label="收物单位" align="center" :show-overflow-tooltip="true"/>
           <el-table-column prop="percentage" label="进度" align="center">
             <template #default="scope">
               {{scope.row.percentage}}%
@@ -26,7 +26,7 @@
               <el-tag size="small" v-if="scope.row.activeState == 3">已上报</el-tag>
             </template>
           </el-table-column>
-        <el-table-column label="操作" width="200" align="center">
+        <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
             <el-button type="success" size="small" @click="activateBill(scope.row)" v-if="scope.row.activeState == 0" :disabled="lockState">激活</el-button> 
             <el-button type="warning" size="small" @click="deactivate(scope.row)" v-if="scope.row.activeState == 1">解除</el-button> 
@@ -44,7 +44,7 @@
           :total="total"
         />
       </el-card>
-      <el-card style="height: calc(50vh - 68px);margin-top: 10px;">
+      <el-card style="height: calc(50vh - 63px);">
         <template #header>
           <span>物资列表</span>
         </template>
@@ -73,7 +73,7 @@
         </template>
         <el-table :data="modelList" border style="width: 100%;height: 70vh;">
           <el-table-column type="index" label="序号" width="60" align="center"/>
-          <el-table-column prop="modelName" label="号型名称" align="center" width="180"/>
+          <el-table-column prop="modelName" label="号型名称" align="center"/>
           <el-table-column prop="planAmount" label="计划数量" align="center"/>
           <el-table-column prop="realAmount" label="实际数量" align="center"/>
           <el-table-column prop="writeAmount" label="手动修改数量" align="center">

src/views/RFID.vue

@@ -2,7 +2,7 @@
   <div>
     <el-tabs type="border-card" v-model="activeTab">
       <el-tab-pane v-for="item in channelList" :key="item" :label="'通道' + item.stationId" :name="item.stationId">
-        <el-card style="height: calc(100vh - 187px)">
+        <el-card style="height: calc(100vh - 227.75px)">
           <template #header>
             <div class="card-header">
               <span>实时出入库数据</span>
@@ -274,7 +274,7 @@ export default defineComponent({
       // Websoket接收消息事件
       const websocketOnmessage = (res) => {
         let message = JSON.parse(res.data)
-        // console.log(message)
+        console.log(message)
         if (message.noticeType == 0 || message.noticeType == 4) {
           logData.value = ''
           if (message.noticeType == 0) {
@@ -289,7 +289,7 @@ export default defineComponent({
           for(let value1 of map.values()) {
             logData.value += value1
           }
-          console.log(logData.value)
+          // console.log(logData.value)
           emit('logChange', logData.value)
         }
         if (message.noticeType == 2) {
@@ -459,9 +459,14 @@ export default defineComponent({
 })
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
+
+
+
+// 其他样式代码不变
 .el-tabs--border-card >.el-tabs__content {
   padding: 0px !important;
+  background-color: var(--color-primary);
 }
 .text {
   text-align: center;

vite.config.js

@@ -3,6 +3,8 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '', // 开发或生产环境服务的公共基础路径 配置引入相对路径
@@ -16,7 +18,31 @@ export default defineConfig({
     // 为开发服务器配置 CORS
     cors: true,
   },
-  plugins: [vue()],
+  // plugins: [vue()],
+  plugins: [vue(),
+    createStyleImportPlugin({
+      libs: [
+        {
+          libraryName: 'element-plus',
+          esModule: true,
+          ensureStyleFile: true,
+          resolveStyle: (name) => {
+            name = name.slice(3);
+            return `element-plus/theme-chalk/src/${name}.css`;
+          },
+        },
+      ],
+      // 添加主题配置
+      useTheme: true,
+      preprocessor: 'sass',
+      themeVariables: [
+        '@primary-color'
+      ],
+      themeColors: {
+        'primary-color': '#ccff33'
+      }
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))