修改报表

src/views/report/adverseRecordYearOnYear/index.vue

@@ -2,7 +2,13 @@
   <div class="app-container">
     <el-form :inline="true" :model="form" ref="form">
       <el-form-item label="年度" prop="year">
-        <el-input v-model="form.year" placeholder="选择年度"></el-input>
+        <el-date-picker
+          v-model="form.year"
+          type="year"
+          format="yyyy"
+          value-format="yyyy"
+          placeholder="选择年">
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="产线" prop="productionLine">
         <el-select v-model="form.productionLine" placeholder="选择产线">

src/views/report/highFault/index.vue

@@ -1,26 +1,167 @@
 <template>
   <div class="app-container">
-    3
+    <el-form :inline="true" :model="form" ref="form">
+      <el-form-item label="工厂" prop="factory">
+        <el-select v-model="form.factory" placeholder="选择工厂">
+          <el-option :label="i.label" :value="i.value" v-for="i in option"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="产线" prop="productionLine">
+        <el-select v-model="form.productionLine" placeholder="选择产线">
+          <el-option :label="i.label" :value="i.value" v-for="i in option1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="下线时间" prop="date">
+        <el-date-picker
+          v-model="form.date"
+          type="daterange"
+          format="yyyy-mm-dd"
+          value-format="yyyy-mm-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button @click="resetForm('form')">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        type="index"
+        label="序号"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="type"
+        label="产品型号">
+      </el-table-column>
+      <el-table-column
+        prop="num"
+        label="问题数量">
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="form.pageNum"
+      :limit.sync="form.pageSize"
+      @pagination="getList"
+    />
+    <h3 style="font-weight: 600">高故障Top20柱状图</h3>
+    <div style="width: 100%;height: 30vw">
+      <Chart ref="chart1"></Chart>
+    </div>
   </div>
 </template>
 
 <script>
-import { findProductLineList } from '@//api/base/productLine'
+import Chart from "@/components/board/Chart";
-import { parseTime } from '@//utils/ruoyi'
-import {
-  boxTraceabilityDetailReport,
-  boxTraceabilityReport,
-} from '@//api/report/reportAPI'
 
 export default {
   name: 'ProductOffLine',
+  components:{
+    Chart,
+  },
   data() {
     return {
+      total:100,
+      form: {
+        pageNum:1,
+        pageSize:10
+      },
+      option: [
+        {
+          value: '11',
+          label: '工厂一'
+        },
+        {
+          value: '22',
+          label: '工厂二'
+        },
+      ],
+      option1: [
+        {
+          value: '11',
+          label: '产线一'
+        },
+        {
+          value: '22',
+          label: '产线二'
+        },
+      ],
+      tableData: [
+        {
+          type:'1',
+          num:1,
+        },
+        {
+          type:'1',
+          num:1,
+        },
+        {
+          type:'1',
+          num:1,
+        },
+        {
+          type:'1',
+          num:1,
+        },
+        {
+          type:'1',
+          num:1,
+        },
+      ]
+    }
+  },
+  mounted() {
+    this.$refs.chart1.setData({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
         }
       },
-  created() {
+      legend: {},
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value',
+        position:'top',
+        boundaryGap: [0, 0.01]
+      },
+      yAxis: {
+        type: 'category',
+        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+      },
+      series: [
+        {
+          name: '数量',
+          type: 'bar',
+          data: [18203, 23489, 29034, 104970, 131744, 630230]
+        },
+      ]
+    })
   },
   methods: {
+    getList(){
+      console.log(this.form)
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    }
   }
 }
 </script>
+<style lang="less" scoped>
+/deep/ .el-table .cell{
+  text-align: center !important;
+}
+</style>