修改界面显示

src/views/board/week/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="headTitle">综合安全生产平台</div>
+    <div class="headTitle">第 {{ nowWeek }} 周 安全生产管控平台</div>
     <div class="title" v-for="(i,k) in title"
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
       {{ i }}
@@ -12,19 +12,19 @@
     <div class="classSelect">
 
 
-      <el-button>产线1</el-button>
-      <el-button>产线2</el-button>
-      <el-button>合计</el-button>
-<!--      <el-radio v-model="selectValue" label="1">产线1</el-radio>-->
-<!--      <el-radio v-model="selectValue" label="2">产线2</el-radio>-->
-<!--      <el-radio v-model="selectValue" label="3">合计</el-radio>-->
+      <el-button :class="nowLine === 1 ? 'clickLine':''" @click="setLine(1)">产线1</el-button>
+      <el-button :class="nowLine === 2 ? 'clickLine':''" @click="setLine(2)">产线2</el-button>
+      <el-button :class="nowLine === 3 ? 'clickLine':''" @click="setLine(3)">合并</el-button>
+      <!--      <el-radio v-model="selectValue" label="1">产线1</el-radio>-->
+      <!--      <el-radio v-model="selectValue" label="2">产线2</el-radio>-->
+      <!--      <el-radio v-model="selectValue" label="3">合计</el-radio>-->
     </div>
 
     <!--IQC-->
     <div class="IQC" id="IQC">
       <div style="background-color: #094170">
         <div class="scrollTableItem" style="font-weight: bold;">
-          编号
+          订单编号
         </div>
         <div class="scrollTableItem" style="font-weight: bold;width: 28%">
           型号
@@ -108,8 +108,8 @@
     </div>
 
     <div v-html="safeDayHtml"></div>
-    <div class="totalNum">总数：{{ totalNum }}</div>
-    <div class="info1">订单数:1000 完成数:1000 差异值:0 清单率:100%</div>
+    <div class="totalNum">合计：{{ totalNum }}台</div>
+    <div class="info1">订单数量:1000 完成数量:1000 清单率:100%</div>
   </div>
 </template>
 
@@ -127,7 +127,8 @@ export default {
   name: "Liner",
   data() {
     return {
-      selectValue: '1',
+      nowLine: 1,
+      nowWeek: "",
       title: [
         '产量统计',
         '三日订单执行情况',
@@ -1020,6 +1021,7 @@ export default {
         },
       ],
     })
+    this.curWeek()
     this.day()
   },
   methods: {
@@ -1036,6 +1038,21 @@ export default {
     <span style="position: absolute;top: 74%;left: 84%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">${today()}<span style="font-size: 0.5vw">天</span> </span>
     <span style="position: absolute;top: 89%;left: 84%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能互联工厂</span>
     `
+    },
+    curWeek() {
+      let today = new Date();
+      let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
+      let dayOfWeek = firstDayOfYear.getDay();
+      let spendDay = 1;
+      if (dayOfWeek != 0) {
+        spendDay = 7 - dayOfWeek + 1;
+      }
+      firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
+      let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
+      this.nowWeek = Math.ceil((d / 7) + 1);
+    },
+    setLine(e) {
+      this.nowLine = e
     }
   }
 }
@@ -1182,14 +1199,20 @@ export default {
 
 .classSelect {
   position: absolute;
-  top: 1%;
-  left: 15%;
+  top: 5%;
+  left: 9%;
 }
-.el-radio{
+
+.el-radio {
   color: #fff !important;
 }
-.el-button{
-  background:#00000000 !important;
+
+.el-button {
+  background: #00000000 !important;
   color: #fff !important;
 }
+
+.clickLine {
+  color: #1890ff !important;
+}
 </style>