报表跳转

src/views/wel/components/statisticsTable.vue

@@ -1,49 +1,56 @@
 <template>
-  <div class="statics_box">
-    <!-- 统计报表 -->
-     <div class="title">
-        统计报表
-    </div>
-    <div class="table_box">
-        <div class="table_box_item" v-for="item in tableData" :key="item.name">
-            <img v-show="item.url == 'pro_table'" src="@/assets/pro_table.png" alt="">
-            <img v-show="item.url == 'craft_table'" src="@/assets/craft_table.png" alt="">
-            <img v-show="item.url == 'qua_table'" src="@/assets/qua_table.png" alt="">
-            <span>{{ item.name }}</span>
+    <div class="statics_box">
+        <!-- 统计报表 -->
+        <div class="title">
+            统计报表
+        </div>
+        <div class="table_box">
+            <div class="table_box_item" v-for="item in tableData" :key="item.name" @click="turnPage(item.page)">
+                <img v-show="item.url == 'pro_table'" src="@/assets/pro_table.png" alt="">
+                <img v-show="item.url == 'craft_table'" src="@/assets/craft_table.png" alt="">
+                <img v-show="item.url == 'qua_table'" src="@/assets/qua_table.png" alt="">
+                <span>{{ item.name }}</span>
+            </div>
         </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-    data(){
-        return{
-            tableData:[
-                {name:'生产报表',url:'pro_table'},
-                {name:'工艺报表',url:'craft_table'},
-                {name:'质量报表',url:'qua_table'},
+    data() {
+        return {
+            tableData: [
+                { name: '生产报表', url: 'pro_table', page: '/statisticalAnalysis/productionReport' },
+                { name: '工艺报表', url: 'craft_table' },
+                { name: '质量报表', url: 'qua_table' },
             ]
         }
+    },
+    methods: {
+        turnPage(page) {
+            if (page) {
+                this.$router.push(page);
+            }
+        }
     }
 }
 </script>
 
 <style lang="scss" scoped>
-.statics_box{
+.statics_box {
     padding: 20px;
     height: 50%;
 
-    .title{
+    .title {
         font-weight: 550;
     }
 
-    .table_box{
+    .table_box {
         display: flex;
         flex-wrap: wrap;
         margin-top: 10px;
 
-        .table_box_item{
+        .table_box_item {
             display: flex;
             flex-direction: column;
             width: 32%;
@@ -52,12 +59,11 @@ export default {
             margin-block: 10px;
             cursor: pointer;
 
-            img{
+            img {
                 width: 20px;
                 margin-bottom: 5px;
             }
         }
     }
 }
-
 </style>