修改界面显示

src/views/index_v1.vue

@@ -6,6 +6,56 @@
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData"/>
     </el-row>
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <el-table
+        :data="tableData"
+        header-cell-style="text-align:center;background-color:#57c9cd;color:#fff"
+        cell-style="text-align:center"
+        style="width: 100%">
+        <el-table-column
+          prop="no"
+          label="序号"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="plant"
+          label="工厂"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="productionLine"
+          label="产线">
+        </el-table-column>
+        <el-table-column
+          prop="workOrderNumber"
+          label="工单号">
+        </el-table-column>
+        <el-table-column
+          prop="productName"
+          label="产品名称">
+        </el-table-column>
+        <el-table-column
+          prop="productCode"
+          label="产品编码">
+        </el-table-column>
+        <el-table-column
+          prop="SalesOrderNumber"
+          label="销售单号">
+        </el-table-column>
+        <el-table-column
+          prop="scheduledProduction"
+          label="计划产量">
+        </el-table-column>
+        <el-table-column
+          prop="FinishedOutput"
+          label="完成产量">
+        </el-table-column>
+        <el-table-column
+          prop="percentageComplete"
+          label="完成率">
+        </el-table-column>
+      </el-table>
+    </el-row>
 
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="16">
@@ -67,7 +117,22 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: lineChartData.newVisitis,
+
+      tableData: [
+        {
+          no: '1',
+          plant: '1',
+          productionLine: '1',
+          workOrderNumber: '1',
+          productName: '1',
+          productCode: '1',
+          SalesOrderNumber: '1',
+          scheduledProduction: '1',
+          FinishedOutput: '1',
+          percentageComplete: '1'
+        }
+      ]
     }
   },
   methods: {
@@ -96,4 +161,7 @@ export default {
     padding: 8px;
   }
 }
+.el-table th.el-table__cell > .cell{
+  text-align: center  ;
+}
 </style>

src/views/model/model.vue

@@ -79,7 +79,7 @@
 
 
       <div class="flowChart" v-show="show1">
-        <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)"
+        <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k);toLink(i)"
              :class="nowFlowIndex === k ? 'wireAnimation' : ''"
              :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background: linear-gradient(to bottom, ${nowFlowIndex === k ? '#00911F': i.bgColor+'99'}, ${nowFlowIndex === k ? '#00370C': i.bgColor});z-index:2;`">
           <span v-html="i.text"></span>
@@ -550,7 +550,7 @@ export default {
       // '1733000034217234432',
       // '1732999987471716352',
       // '1732999849172930560',
-
+      //
       // '1732999837521154048',
       // '1732999828495011840',
       // '1732999786233204736',
@@ -640,6 +640,10 @@ export default {
     },
     setNowFlowIndex(k) {
       this.nowFlowIndex = k
+    },
+    toLink(e){
+      console.log(e.link)
+      this.$router.push('/board/liner')
     }
   }
 };