大屏样式调整与接口对接

css/index1.css

@@ -109,4 +109,16 @@
       color: #39E6FF;
       padding: 3px 15px;
     }
+
+
+    table {
+      border-collapse: collapse; /* 合并表格边框 */
+      border: 1px solid #35B3CE15; /* 设置表格边框样式和颜色 */
+      width: 100%;
+      text-align: center;
+    }
+
+    tr{
+      height: 35px;
+    }
   }

index.html

@@ -9,7 +9,10 @@
     <link rel="stylesheet" href="./css/index.css">
     <link rel="stylesheet" href="./css/animate.css" />
     <link rel="stylesheet" href="./css/element-ui@2.15.9.css" />
+
     <script src="./libs/vue.js"></script>
+    <script src="./libs/axios.min.js"></script>
+    <script src="./js/request.js"></script>
     <script src="./libs/element-ui@2.15.9.js"></script>
     <script src="./libs/datav.min.vue.js"></script>
     <script src="./libs/echatrs.js"></script>
@@ -57,7 +60,7 @@
                     <div class="box-border p-5" style="height: 56%;">
                         <div class="small-top relative">
                             <div class="pl-12 small-title">收支情况</div>
-                            <div style="position: absolute;right: 10px;top: 10px;">累计当前实际收支：200万/50万</div>
+                            <div style="position: absolute;right: 10px;top: 10px;">累计当前实际收支：{{incomeOrExpenditure}}</div>
                         </div>
                         
                         <div id="statistics" style="width: 100%;height: 100%;"></div>
@@ -69,22 +72,22 @@
                 <div>
                     <div class="box-right p-5">
                         <div class="right-small-top mb-5">
-                            <div style="position: absolute;right: 10px;top: 10px;">当前需交付的订单数量：10个</div>
+                            <div style="position: absolute;right: 10px;top: 10px;">当前需交付的订单数量：{{totalCount}}个</div>
                         </div>
 
                         <div style="overflow: auto;height: 93%;">
                             <div v-for="(item,index) in dataList" class="p-5 mb-3" style="background-color: #126EFE20;">
                                 <div class="flex justify-between mb-5">
-                                    <div class="text-[#fff]">XSD202409050001</div>
-                                    <div class="data-type">正常</div>
+                                    <div class="text-[#fff]">{{item.orderNo}}</div>
+                                    <div class="data-type">{{item.deliveryStatus}}</div>
                                 </div>
     
                                 <div class="text-[#D0E9FF] mb-3">
-                                    客户名称：晋中新颀液压设备有限公司
+                                    客户名称：{{item.customerName}}
                                 </div>
     
                                 <div class="text-[#D0E9FF] mb-3">
-                                    交付日期：2024年8月22日
+                                    交付日期：{{item.deliveryDate}}
                                 </div>
     
                                 <div class="text-[#D0E9FF] mb-3">
@@ -124,7 +127,7 @@
                                         </div>
                                     </div>
                                    
-                                    <el-progress :percentage="50" />
+                                    <el-progress :percentage="item.progress" />
                                 </div>
                             </div>
                         </div>

index1.html

@@ -10,6 +10,8 @@
     <link rel="stylesheet" href="./css/animate.css" />
     <link rel="stylesheet" href="./css/element-ui@2.15.9.css" />
     <script src="./libs/vue.js"></script>
+    <script src="./libs/axios.min.js"></script>
+    <script src="./js/request.js"></script>
     <script src="./libs/element-ui@2.15.9.js"></script>
     <script src="./libs/datav.min.vue.js"></script>
     <script src="./libs/echatrs.js"></script>
@@ -24,10 +26,9 @@
         <div class="main">
             <div class="top-border">
                 <img src="./image/index1/top_text.png" class="top-text">
-                <div class="flex justify-between absolute items-center" style="width: 40%; top: 25px;left: 35%;">
-                    <div class="top-content">生产计划完成率：57%</div>
-                    <div class="top-content">生产效率：77%</div>
-                    <div class="top-content">生产良品率：95%</div>
+                <div class="flex justify-between absolute items-center" style="width: 30%; top: 25px;left: 35%;">
+                    <div class="top-content">生产计划完成率：{{planCompletionRate}}%</div>
+                    <div class="top-content">生产良品率：{{productionGoodProductRate}}%</div>
                 </div>
                 <div class="top-time absolute" style="right: 20px;top: 35px;">
                     {{time}}
@@ -39,14 +40,25 @@
                         <div class="small-top">
                             <div class="pl-12 small-title">领料库存情况</div>
                         </div>
-                        <div class="flex justify-between mt-5" style="flex-wrap: wrap;">
+                        <div class="flex justify-between mt-5" style="flex-wrap: wrap;height: 85%;overflow: auto;">
                             <div v-for="(item,index) in comprehensive" :key="index" class="flex w-[427px] h-[170px] mb-3" style="background-color: #126EFE20;">
                                 <div class="p-3 w-full">
                                     <div class="flex justify-between w-full items-center mb-2">
-                                        <div class="text-[#fff] text-[16px]">{{item.title}}</div>
-                                        <div class="data-type">正常</div>
+                                        <div class="text-[#fff] text-[16px]">{{item.materialName}} ( {{item.specification}} )</div>
+                                        <div class="data-type">{{item.status}}</div>
                                     </div>
-                                    <dv-scroll-board :config="comprehensiveData" style="width: 100%;height: 100%;" />
+                                        <table>
+                                            <tr style="background-color: #35B3CE15;" class="text-[#12B1EB]">
+                                              <th>物料</th>
+                                              <th>所需物料数量</th>
+                                              <th>可用库存数量</th>
+                                            </tr>
+                                            <tr v-for="(itm,idx) in item.details" :key="idx" class="text-[#D0E9FF] text-[14px]">
+                                              <td>{{itm.materialName}}</td>
+                                              <td>{{itm.needQty}}</td>
+                                              <td>{{itm.stockQty}}</td>
+                                            </tr>
+                                        </table>
                                 </div>
                             </div>
                         </div>
@@ -58,8 +70,25 @@
                             <div class="pl-12 small-title">报工情况</div>
                             <div style="position: absolute;right: 10px;top: 10px;">当日填报</div>
                         </div>
-                        <div style="height: 90%;">
-                            <dv-scroll-board :config="shortageConfig" style="width: 100%;height: 100%;" />
+                        <div style="height: 390px;">
+                            <table>
+                                <tr style="background-color: #35B3CE15;" class="text-[#12B1EB]">
+                                  <th>姓名</th>
+                                  <th>工单编号</th>
+                                  <th>生产产品</th>
+                                  <th>当天生产数量</th>
+                                  <th>当天生产时长</th>
+                                  <th>填报时间</th>
+                                </tr>
+                                <tr v-for="(itm,idx) in shortageConfig" :key="idx" class="text-[#D0E9FF] text-[14px]">
+                                  <td>{{itm.name}}</td>
+                                  <td>{{itm.code}}</td>
+                                  <td>{{itm.product}}</td>
+                                  <td>{{itm.number}}</td>
+                                  <td>{{itm.date}}</td>
+                                  <td>{{itm.datetime}}</td>
+                                </tr>
+                            </table>
                         </div>
                     </div>
                 </div>
@@ -69,24 +98,39 @@
                     <div class="box-right p-5">
                         <div class="small-top relative">
                             <div class="pl-12 small-title">生产排产情况</div>
-                            <div style="position: absolute;right: 10px;top: 10px;">计划生产单据：5个</div>
+                            <div style="position: absolute;right: 10px;top: 10px;">计划生产单据：{{dataCount}}个</div>
                         </div>
 
-                        <div style="overflow: auto;height: 93%;">
+                        <div style="overflow: auto;height: 96%;">
                             <div v-for="(item,index) in dataList" class="p-5 mb-3" style="background-color: #126EFE20;">
                                 <div>
                                     <div class="flex justify-between w-full items-center mb-2">
-                                        <div class="text-[#fff] text-[16px]">SCJHD202409070001</div>
-                                        <div class="data-type">正常</div>
+                                        <div class="text-[#fff] text-[16px]">{{item.productionPlanOrderNo}}</div>
+                                        <div>计划生产日期：{{item.planDate}}</div>
                                     </div>
-                                    <dv-scroll-board :config="shortageConfig" style="width: 100%;height: 100%;" />
+
+                                    <table>
+                                        <tr style="background-color: #35B3CE15;" class="text-[#12B1EB]">
+                                          <th>产品名称</th>
+                                          <th>计划生产数量</th>
+                                          <th>已排产数量</th>
+                                          <th>已生产数量</th>
+                                          <th>已排质检数量</th>
+                                          <th>已入库数量</th>
+                                        </tr>
+                                        <tr v-for="(itm,idx) in item.details" :key="idx" class="text-[#D0E9FF] text-[14px]">
+                                          <td>{{itm.materialName}}</td>
+                                          <td>{{itm.planQty}}</td>
+                                          <td>{{itm.scheduledQty}}</td>
+                                          <td>{{itm.producedQty}}</td>
+                                          <td>{{itm.inspectedQty}}</td>
+                                          <td>{{itm.inQty}}</td>
+                                        </tr>
+                                    </table>
                                 </div>
                             </div>
                         </div>
                     </div>
-
-                   
-
                 </div>
 
 

js/index.js

@@ -50,23 +50,65 @@ let app = new Vue({
         image: './image/index/01.png',
         unit: '%'
       }],
-      dataList: [{
-
-      },{
-
-      }]
+      dataList: [],
+      totalCount:0,
+      incomeOrExpenditure:'',
+      expenditureData:{
+        xData:[],
+        yData:[[],[]]
+      }
     }
   },
   mounted() {
     setTimeout(() => {
+        //从链接地址中获取token参数
+        let token = getQueryVariable('token')
+
+      //综合概况
+      get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/getPpwGeneralOverview',{},{
+        Authorization:token +'='
+      }).then(res => {
+        this.comprehensive[0].number = res.info.annualCumulativeSales
+        this.comprehensive[1].number = res.info.quarterlyCumulativeSales
+        this.comprehensive[2].number = res.info.monthCumulativeSales
+        this.comprehensive[3].number = res.info.cumulativeSalesReturnRate
+        this.comprehensive[4].number = res.info.annualCumulativePurchasingExpenditure
+        this.comprehensive[5].number = res.info.quarterlyCumulativePurchasingExpenditure
+        this.comprehensive[6].number = res.info.monthCumulativePurchasingExpenditure
+        this.comprehensive[7].number = res.info.cumulativePurchaseUnpaidRate
+        })
+
+        //收支情况
+        get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/getPpwIncomeAndExpenditure',{},{
+          Authorization:token+'='
+        }).then(res => {
+          this.expenditureData = res.info
+          this.handleQuantity()
+
+          })
+
+          //累计实际收支
+          get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/getPpwRealIncomeAndExpenditure',{},{
+            Authorization:token+'='
+          }).then(res => {
+            this.incomeOrExpenditure = res.info
+            })
+
+
+          //以单定产
+          get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/queryPpwSalesOrderProgress',{},{
+            Authorization:token+'='
+          }).then(res => {
+            this.dataList = res.infos
+            this.totalCount = res.totalCount
+            })
+
       this.handleTime()
 
-      this.handleQuantity()
     }, 0)
   },
   methods: {
 
-
     handleTime() {
       setInterval(() => {
         this.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
@@ -91,7 +133,7 @@ let app = new Vue({
         },
         xAxis: {
           type: 'category',
-          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'],
+          data: this.expenditureData.xData,
           axisLine: {
             lineStyle: {
               color: 'white'
@@ -117,7 +159,7 @@ let app = new Vue({
           axisLabel: {}
         },
         series: [{
-          name: '1',
+          name: '收入',
           type: 'bar',
           barWidth: '10%',
           itemStyle: {
@@ -132,10 +174,10 @@ let app = new Vue({
               barBorderRadius: 10,
             },
           },
-          data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
+          data: this.expenditureData.yData[0]
         },
         {
-          name: '2',
+          name: '支出',
           type: 'bar',
           barWidth: '10%',
           itemStyle: {
@@ -151,7 +193,7 @@ let app = new Vue({
             },
 
           },
-          data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
+          data: this.expenditureData.yData[1]
         }]
       };
       chart.setOption(option, true);

js/index1.js

@@ -9,83 +9,125 @@ let app = new Vue({
 
       pageindex: 0,
 
-      comprehensive: [{
-        title: 'DM（90*96*12）',
-        number: 130,
-        image: './image/index/01.png',
-        unit: '万'
-      }, {
-        title: 'DM（90*96*12）',
-        number: 130,
-        image: './image/index/01.png',
-        unit: '万'
-      }, {
-        title: 'DM（90*96*12）',
-        number: 130,
-        image: './image/index/01.png',
-        unit: '万'
-      }, {
-        title: 'DM（90*96*12）',
-        number: 130,
-        image: './image/index/01.png',
-        unit: '%'
-      }],
-      dataList: [{
-        list:[{
-          date1: '扩散段壳体锥(24-0578)    ',
-          date2: '1',
-          date3: '2',
-          date4: '3',
-          date5: '4',
-          date6: '5',
-        },
-        {
-          date1: '扩散段壳体锥(24-0578)    ',
-          date2: '1',
-          date3: '2',
-          date4: '3',
-          date5: '4',
-          date6: '5',
-        },]
-      },{
-
-      }],
-      shortageConfig: {
-        header: ['姓名','工单编号','生产产品','当天生产数量','当天生产时常','填报时间'],
-        align: ['center','center','center','center','center','center'],
-        headerBGC: '#35B3CE15',
-        evenRowBGC: '#35B3CE15',
-        data: [
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-          ['张三', 'SCGD202409060001','DM（90*96*12）','-','-','2024-09-06 17:06:58'],
-        ]
-      },
-      comprehensiveData: {
-        header: ['物料','所需物料数量','可用库存数量'],
-        align: ['center','center','center'],
-        headerBGC: '#35B3CE15',
-        evenRowBGC: '#35B3CE15',
-        data: [
-          ['管料（184*160）', '8','9'],
-          ['管料（184*160）', '8','9'],
-        ]
-      },
+      planCompletionRate:0,
+      productionGoodProductRate:0,
+      dataCount:0,
 
-      
+      comprehensive: [],
+      dataList: [],
+      shortageConfig: [{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      },{
+        name:'张三',
+        code:'SCGD202409060001',
+        product:'DM（90*96*12）',
+        number:'-',
+        date:'-',
+        datetime:'2024-09-06 17:06:58'
+      }]
+          
+        
     }
   },
   mounted() {
     setTimeout(() => {
       this.handleTime()
 
-      // this.handleQuantity()
+
+      let token = getQueryVariable('token')
+
+      //顶部统计信息
+      get('/mbwb/api/v1/erpscs/productionScreen/getTopStatistics',{},{
+        Authorization:token +'='
+      }).then(res => {
+          this.planCompletionRate = res.info.planCompletionRate
+          this.productionGoodProductRate = res.info.productionGoodProductRate
+      })
+
+      //领料库存情况
+      get('/mbwb/api/v1/erpscs/productionScreen/getNeedMaterialStock',{},{
+        Authorization:token +'='
+      }).then(res => {
+         this.comprehensive =  res.infos
+      })
+
+      //生产排产情况
+      get('/mbwb/api/v1/erpscs/productionScreen/getProductionScheduleInfo',{},{
+        Authorization:token +'='
+      }).then(res => {
+        this.dataList = res.infos
+        this.dataCount = res.totalCount
+      })
+      
+      //获取报工情况
+      get('/mbwb/api/v1/erpscs/productionScreen/getWorkReportInfo',{},{
+        Authorization:token +'='
+      }).then(res => {
+        
+      })
+
+
     }, 0)
   },
   methods: {
@@ -97,94 +139,5 @@ let app = new Vue({
       }, 1000)
     },
 
-    handleQuantity() {
-      let chart = echarts.init(document.getElementById('statistics'))
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          left: '2%',
-          right: '4%',
-          bottom: '14%',
-          top: '16%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'],
-          axisLine: {
-            lineStyle: {
-              color: 'white'
-            }
-          },
-        },
-        //调整两个柱状图的间距
-        
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: 'white'
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(255,255,255,0.3)'
-            }
-          },
-          axisLabel: {}
-        },
-        series: [{
-          name: '1',
-          type: 'bar',
-          barWidth: '10%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: '#165ACC'
-              }, {
-                offset: 1,
-                color: '#051024'
-              }]),
-              barBorderRadius: 10,
-            },
-          },
-          data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
-        },
-        {
-          name: '2',
-          type: 'bar',
-          barWidth: '10%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: '#FFA900'
-              }, {
-                offset: 1,
-                color: '#051024'
-              }]),
-              barBorderRadius: 10,
-            },
-
-          },
-          data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
-        }]
-      };
-      chart.setOption(option, true);
-      tools.loopShowTooltip(chart, option, {
-        nterval: 1000,
-        loopSeries: true
-      });
-    },
-
-
   },
 })

js/request.js

@@ -0,0 +1,166 @@
+
+/** axios封装
+ * 请求拦截、相应拦截、错误统一处理
+ */
+
+
+
+
+const httpRequest = axios.create({
+  baseURL: 'http://10.0.0.198:30701', // 测试环境
+  timeout: 3 * 60 * 1000, // 3分钟等待
+  withCredentials: true, // 携带cookie
+
+})
+
+
+
+
+
+// 请求拦截器
+httpRequest.interceptors.request.use(
+  function (config) {
+   
+      // config.headers['accessToken'] = ''
+    // if (!isLocalEnv()) {
+    //   if (getQueryVariable('token')) {
+    //     config.headers['access_token'] = getQueryVariable('token')
+    //   }
+    // } else {
+    //   config.headers['access_token'] = localStorage.getItem('token')
+    //   // config.headers['access_token'] = '4b3ed521-f509-48d9-b907-ab127479df41'
+    // }
+    // // 上传文件
+    // if (config.url == '/apiSys/oss/upload') {
+    //   config.headers['Content-Type'] = 'multipart/form-data'
+    // } else {
+    //   config.headers['Content-Type'] = 'application/json'
+    // }
+    return config
+  },
+  function (error) {
+    return Promise.reject(error)
+  }
+)
+
+//响应拦截
+httpRequest.interceptors.response.use(
+  function (response) {
+    const res = response.data
+    // if (res.code == 201) {
+    //   this.ELEMENT.Message.error(res.msg)
+    //   if (!isLocalEnv()) {
+    //     // 跳登录页
+    //     window.location = window.location.origin
+    //   } else {
+    //     localEnvLogin()
+    //   }
+    // }
+    return response
+  },
+  function (error) {
+    // this.ELEMENT.Message.error(error.message)
+    return Promise.reject(error)
+  }
+)
+
+function get(url, params,headers) {
+  return new Promise((resolve, reject) => {
+    httpRequest
+      .get(url, { params: params,headers:headers })
+      .then(res => {
+        resolve(res.data)
+      })
+      .catch(err => {
+        reject(err.data)
+      })
+  })
+}
+// qs.stringify(data)
+function post(url, data, config) {
+  return new Promise((resolve, reject) => {
+    httpRequest
+      .post(url, data, config)
+      .then(res => {
+        resolve(res.data)
+      })
+      .catch(err => {
+        reject(err)
+      })
+  })
+}
+
+function postFile(url, blob) {
+  return new Promise((resolve, reject) => {
+    let formdata = new FormData()
+    formdata.append('multipartFile', blob)
+    httpRequest
+      .post(url, formdata)
+      .then(res => {
+        resolve(res.data)
+      })
+      .catch(err => {
+        reject(err)
+      })
+  })
+}
+
+function localEnvLogin() {
+  post(
+    '/apiSys/login',
+    {
+      username: 'admin',
+      password: '1q2w3e4r5t',
+    },
+    {
+      transformRequest: [
+        function (data, headers) {
+          // 将请求数据转换成功 formdata 接收格式
+          headers['Content-Type'] = 'application/x-www-form-urlencoded'
+          return stringify(data)
+        },
+      ],
+    }
+  ).then(res => {
+    localStorage.setItem('token', res.data.token || getQueryVariable('token'))
+  })
+}
+
+// 将参数转换成功 formdata 接收格式
+function stringify(data) {
+  let ret = ''
+  for (const it in data) {
+    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+  }
+  ret = ret.substring(0, ret.lastIndexOf('&'))
+  return ret
+}
+
+// 格式化日期
+function formatDate(time) {
+  let date = time ? new Date(Number(time)) : new Date();
+  let Y = date.getFullYear() + '-';
+  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+  let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
+  let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
+  let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
+  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return Y + M + D + h + m + s;
+}
+
+
+function getQueryVariable(variable) {
+  const query = window.location.search.substring(1); // 获取查询字符串，去除开头的 "?"
+  const vars = query.split('&'); // 按 "&" 分割查询字符串
+
+  for (let i = 0; i < vars.length; i++) {
+    const pair = vars[i].split('='); // 按 "=" 分割键值对
+
+    if (decodeURIComponent(pair[0]) === variable) {
+      return decodeURIComponent(pair[1]);
+    }
+  }
+
+  // 如果没有找到变量，则返回 null 或者默认值
+  return null;
+}