试验报告界面提交

whyczyk

2021-05-21 6d70764adbefec58b42c5aad5a6bc12df73e8812

试验报告界面提交

 public/testConclusion.pdf

Binary files differ

 src/components/chart/multipleLine.vue

New file
@@ -0,0 +1,391 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: "lineChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        var count = 70;
        var baseTop = 70;
        var gridHeight = sendData.gridHeight || 80;

        var data = {
          cpu: [],
          memory: [],
          frame: [],
          main: [],
          output: [],
          input: [],
          fake: [],
          xMin: 0,
          xMax: count * 1000,
        };

        for (var i = 0; i < count; i++) {
          var now = i * 1000;
          data.cpu.push([now, Math.floor(Math.random() * 1000)]);
          data.memory.push([now, Math.floor(Math.random() * 1000)]);
          data.frame.push([now, Math.floor(Math.random() * 1000)]);
          data.main.push([now, Math.floor(Math.random() * 1000)]);
          data.output.push([now, Math.floor(Math.random() * 1000)]);
          data.input.push([now, Math.floor(Math.random() * 1000)]);
          data.fake.push([now, 1]);
        }

        function makeXAxis(gridIndex, opt) {
          return echarts.util.merge({
              type: 'time',
              gridIndex: gridIndex,
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#ffffff'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                formatter: '{HH}:{mm}:{ss}',
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#ffffff'
                }
              },
              min: data.xMin,
              max: data.xMax,
              axisPointer: {
                lineStyle: {
                  color: 'transparent'
                },
              },
            },
            opt || {},
            true
          );
        }

        function makeYAxis(gridIndex, opt) {
          return echarts.util.merge({
              type: 'value',
              gridIndex: gridIndex,
              nameLocation: 'middle',
              nameTextStyle: {
                color: '#ffffff',
                fontSize: 12
              },
              boundaryGap: ['30%', '30%'],
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#ffffff'
                }
              },
              axisLabel: {
                show: false
              },
              splitLine: {
                show: false
              },
            },
            opt || {},
            true
          );
        }

        function makeGrid(top, opt) {
          return echarts.util.merge({
              top: top,
              height: gridHeight,
            },
            opt || {},
            true
          );
        }

        let option = {
          tooltip: {
            trigger: 'axis',
            borderColor: 'rgba(0, 0, 200, 0.2)',
            borderWidth: 1,
            borderRadius: 0,
            padding: 10,
            formatter: function (params) {
              if (params.length) {
                params.unshift({
                  seriesName: 'time',
                  value: [null, Math.floor(params[0].value[0]) + ' ms'],
                  color: '#ffffff',
                });
                return echarts.util
                  .map(['直流输入电压', '直流输入电流', '定子温度', '高速端齿轮转速', '输出功率', '输入功率'], function (seriesName) {
                    for (var i = 0; i < params.length; i++) {
                      var param = params[i];
                      var style = 'color: ' + param.color;
                      if (param.seriesName === seriesName) {
                        return (
                          '<span style="' +
                          style +
                          '">' +
                          param.seriesName +
                          '：</span><span style="' +
                          style +
                          '">' +
                          param.value[1] +
                          '</span>'
                        );
                      }
                    }
                  })
                  .join('<br>');
              }
            },
          },
          axisPointer: {
            link: [{
              xAxisIndex: 'all'
            }],
            snap: true,
          },
          grid: [
            makeGrid(baseTop),
            makeGrid(baseTop + gridHeight),
            makeGrid(baseTop + gridHeight * 2),
            makeGrid(baseTop + gridHeight * 3 + 5, {
              height: gridHeight - 10,
            }),
            makeGrid(baseTop + gridHeight * 4 + 5, {
              height: gridHeight - 10,
            }),
            makeGrid(baseTop + gridHeight * 5 + 5, {
              height: gridHeight - 10,
            }),
            makeGrid(baseTop, {
              show: true,
              height: gridHeight * 6,
              borderColor: '#ffffff',
              borderWidth: 1,
              z: 10,
            }),
          ],
          xAxis: [
            makeXAxis(0),
            makeXAxis(1),
            makeXAxis(2),
            makeXAxis(3),
            makeXAxis(4),
            makeXAxis(5, {
              axisLine: {
                show: false
              },
            }),
            makeXAxis(6, {
              position: 'top',
              axisLine: {
                show: false,
                onZero: false
              },
              splitLine: {
                show: true
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#ffffff'
                }
              },
              axisPointer: {
                show: true,
                lineStyle: {
                  color: '#ffffff',
                  width: 1.5,
                },
              },
            }),
          ],
          yAxis: [
            makeYAxis(0, {
              name: '直流输入电压',
            }),
            makeYAxis(1, {
              name: '直流输入电流',
            }),
            makeYAxis(2, {
              name: '定子温度',
            }),
            makeYAxis(3, {
              name: '高速端齿轮转速',
            }),
            makeYAxis(4, {
              name: '输出功率',
            }),
            makeYAxis(5, {
              name: '输入功率',
            }),
            makeYAxis(6),
          ],
          dataZoom: [{
              type: 'slider',
              top: baseTop + gridHeight * 6 + 20,
              xAxisIndex: [0, 1, 2, 3, 4, 5, 6],
            },
            {
              type: 'inside',
              xAxisIndex: [0, 1, 2, 3, 4, 5, 6],
            },
          ],
          series: [{
              name: '直流输入电压',
              type: 'line',
              symbol: 'circle',
              symbolSize: 2,
              itemStyle: {
                normal: {
                  color: '#5193f2',
                },
              },
              data: data.cpu,
            },
            {
              name: '直流输入电流',
              type: 'line',
              symbol: 'circle',
              symbolSize: 2,
              xAxisIndex: 1,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#75b228',
                },
              },
              data: data.memory,
            },
            {
              name: '定子温度',
              type: 'line',
              symbol: 'circle',
              symbolSize: 2,
              xAxisIndex: 2,
              yAxisIndex: 2,
              itemStyle: {
                normal: {
                  color: '#e29304',
                },
              },
              data: data.frame,
            },
            {
              name: '高速端齿轮转速',
              type: 'line',
              symbol: 'circle',
              symbolSize: 2,
              xAxisIndex: 3,
              yAxisIndex: 3,
              itemStyle: {
                normal: {
                  color: '#8378ea',
                },
              },
              data: data.main,
            },
            {
              name: '输出功率',
              type: 'line',
              symbol: 'circle',
              symbolSize: 2,
              xAxisIndex: 4,
              yAxisIndex: 4,
              itemStyle: {
                normal: {
                  color: '#fb7293',
                },
              },
              data: data.output,
            },
            {
              name: '输入功率',
              type: 'line',
              symbol: 'circle',
              symbolSize: 2,
              xAxisIndex: 5,
              yAxisIndex: 5,
              itemStyle: {
                normal: {
                  color: '#ffdb5c',
                },
              },
              data: data.input,
            },
            {
              name: 'fake',
              type: 'line',
              symbol: 'none',
              symbolSize: 2,
              itemStyle: {
                normal: {
                  color: 'transparent'
                },
              },
              xAxisIndex: 6,
              yAxisIndex: 6,
              data: data.fake,
            },
          ],
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
        }, 0);
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);
      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>
  .echarts-wrapper,
  .echarts-content {
    width: 100%;
    height: 100%;
  }
</style>

 src/pages/dataManage/historyData.vue

@@ -46,10 +46,15 @@
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width" :resizable="false" align="center"
            v-for="(item,index) in table.headers" :key="index">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
          <el-table-column fixed="right" label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
              <el-button type="success" size="mini" @click="seeDetails(scope.row)">查看历史数据</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="试验报告" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="view(scope.row)">查看</el-button>
              <el-button type="danger" size="mini" @click="download(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -60,6 +65,11 @@
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>
    <!-- 启动 弹窗 -->
    <el-dialog title="预览" width="1000px" top="0" :visible.sync="showReport" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <iframe src="./testConclusion.pdf" width="1000" height="560px" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

@@ -96,7 +106,7 @@
        startTime2: null,
        table: {
          headers: [{
            prop: "createTime",
            prop: "startTime",
            label: "历史数据时间",
          }, {
            prop: "name",
@@ -118,13 +128,27 @@
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        }
        },
        showReport: false
      };
    },
    components: {
      pagePanel
    },
    methods: {
      view() {
        // console.log('view', obj);
        this.showReport = true;
      },
      download() {
        // console.log('download');
        const link = document.createElement("a");
        link.href = encodeURI('./testConclusion.pdf');
        link.download = 'testConclusion.pdf';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
      // 查询用户列表
      getList() {
        let params = {
@@ -150,8 +174,12 @@
      resetParams() {

      },
      edit() {

      seeDetails() {
        this.$router.push({
          path: '/index/historyDataDetails',
        }).catch(err => {
          console.log(err)
        });
      },
      currentChange(value) {
        this.page.pageCurr = value;

 src/pages/dataManage/historyDataDetails.vue

New file
@@ -0,0 +1,72 @@
<template>
  <div class="container">
    <flex-layout>
      <page-panel :border="true" class="flex-page-content">
        <div slot="title" class="page-panel-title">
          <span class="title-pillar"></span>
          试验历史数据
        </div>
        <template slot="btnGrp">
          <div style="">
            查询观察点
            <el-input type="text" v-model.trim="keyword" size="small" style="width:60px"></el-input>
            分钟内数据
            <el-button type="primary" size="mini" style="margin-left:20px;">查询</el-button>
          </div>
        </template>
        <multiple-line id="MultipleLine" ref="MultipleLine"></multiple-line>
      </page-panel>
    </flex-layout>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import ThreeBtn from '@/components/ThreeBtn.vue'
  import MultipleLine from '@/components/chart/multipleLine.vue';
  export default {
    data() {
      return {
        keyword: '',
        showReport: false
      };
    },
    components: {
      pagePanel,
      ThreeBtn,
      MultipleLine
    },
    methods: {},
    mounted() {
      let gridHeight = this.$refs.MultipleLine.$refs.chart.clientHeight / 7.7375;
      this.$refs.MultipleLine.setData({
        gridHeight: gridHeight
      })
    },
    beforeDestroy() {

    }
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .page-list-banner {
    margin-bottom: 10px;
  }

  .num {
    cursor: pointer;
    color: aqua;
  }

  .dialog-form {
    background-color: #ececec;
    padding: 20px;
    width: 100%;
    height: 100%;
  }
</style>

 src/pages/test/testReport.vue

New file
@@ -0,0 +1,209 @@
<template>
  <div class="container">
    <flex-layout>
      <page-panel class="page-list-banner" :border="true" slot="header">
        <div slot="title" class="page-panel-title">
          <span class="title-pillar"></span>
          试验报告查看
        </div>
        <!-- <template slot="btnGrp">
          <el-button type="primary" @click="resetParams" size="mini">高级筛选</el-button>
        </template> -->
        <div class="table-layout">
          <div class="table-row">
            <!-- 查询条件 -->
            <div class="table-cell text-right">输入查询</div>
            <div class="table-cell">
              <el-input type="text" v-model.trim="keyword" size="small" placeholder="请输入关键字"></el-input>
            </div>
            <div class="table-cell" style="width:60%">
            </div>
          </div>
        </div>
        <div class="banner-btn-grp">
          <div class="el-pagination-btns">
            <el-button type="primary" @click="getList" round size="mini" icon="el-icon-search">查询
            </el-button>
          </div>
          <div class="el-pagination-btns">
            <el-button type="warning" @click="resetParams" round size="mini" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </page-panel>
      <page-panel title="数据列表" class="flex-page-content">
        <template slot="btnGrp">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogFormVisible = true">新建文件夹
          </el-button>
        </template>
        <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
          v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-table-column prop="name" align="center" :resizable="false" label="文件夹">
          </el-table-column>
          <el-table-column prop="size" align="center" :resizable="false" label="文件大小">
          </el-table-column>
          <el-table-column prop="updateTime" align="center" :resizable="false" label="更新时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="340" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="seeDetails(scope.row)">查看</el-button>
              <el-button type="primary" size="mini" @click="dialogFormVisible=true">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </page-panel>
      <div class="flex-page-footer" slot="footer">
        <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>


    <el-dialog title="添加文件夹" width="400px" top="0" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <div class="dialog-form">
        <el-form ref="ruleForm" size="mini" label-position="top" class="params-dialog">
          <el-form-item label="文件夹名称">
            <el-input v-model="addname" autocomplete="off"></el-input>
          </el-form-item>
          <div class="form-footer">
            <three-btn @click="dialogFormVisible=false">添加</three-btn>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import ThreeBtn from '@/components/ThreeBtn.vue'
  export default {
    data() {
      return {
        keyword: '',
        table: {
          headers: [],
          datas: [{
            name: '2021-04-03 空载实验项目报告',
            size: '10.2MB',
            updateTime: '2021-04-05 12:00:00',
          }],
          loading: false
        },
        page: {
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        },
        dialogFormVisible: false,
        addname: ''
      };
    },
    components: {
      pagePanel,
      ThreeBtn
    },
    methods: {
      // 查询用户列表
      getList() {
        let params = {
          pageNum: this.page.pageCurr,
          pageSize: this.page.pageSize
        };
        let data = {};
        if (this.keyword) {
          data.search = this.keyword
        }
        // roleSearch(params, data).then((res) => {
        //   res = res.data.data;
        //   res.list.forEach((item) => {
        //     item.stateStr = item.state == 0 ? true : false;
        //   });
        //   this.page.pageAll = res.total;
        //   this.table.datas = res.list;
        // }).catch((err) => {
        //   console.log(err)
        // });
      }
      // 重置搜索条件
      ,
      resetParams() {

      },
      //查看详情
      seeDetails(val) {
        console.log(val)
        this.$router.push({
          path: '/index/testReportDetails',
        }).catch(err => {
          console.log(err)
        });
      },
      //移除角色
      remove() {
        this.$confirm("确认删除该文件夹吗？", '系统提示', {
          type: 'warning',
        }).then(() => {
          // console.log(row)
          // let postData = {
          //   roleId: row.id
          // }
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          // deleteRole(postData).then((res) => {
          //   if (res.data.code == 1) {
          //     this.$message({
          //       message: '删除成功！',
          //       type: 'success'
          //     });
          //     this.getList();
          //   }
          // }).catch((err) => {
          //   console.log(err)
          // });
        }).catch(() => {});
      },
      currentChange(value) {
        this.page.pageCurr = value;
        this.getList();
      },
      sizeChange(value) {
        this.page.pageCurr = 1;
        this.page.pageSize = value;
        this.getList();
      },
    },
    mounted() {
      this.getList();
    },
    beforeDestroy() {

    }
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .page-list-banner {
    margin-bottom: 10px;
  }

  .num {
    cursor: pointer;
    color: aqua;
  }

  .dialog-form {
    background-color: #ececec;
    padding: 20px;
    width: 100%;
    height: 100%;
  }
</style>

 src/pages/test/testReportDetails.vue

New file
@@ -0,0 +1,156 @@
<template>
  <div class="container">
    <flex-layout>
      <page-panel title="数据列表" :border="true" class="flex-page-content">
        <div slot="title" class="page-panel-title">
          <span class="title-pillar"></span>
          2021-04-03 空载实验报告
        </div>
        <template slot="btnGrp">
          <el-input type="text" v-model.trim="keyword" size="small" placeholder="请输入关键字"></el-input>
          <el-button type="primary" size="mini" style="margin-left:10px;">查询</el-button>
        </template>
        <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
          v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-table-column prop="name" align="center" :resizable="false" label="附件名称">
          </el-table-column>
          <el-table-column prop="type" align="center" :resizable="false" label="格式">
          </el-table-column>
          <el-table-column prop="size" align="center" :resizable="false" label="大小">
          </el-table-column>
          <el-table-column prop="downNum" align="center" :resizable="false" label="下载次数">
          </el-table-column>
          <el-table-column prop="updateTime" align="center" :resizable="false" label="创建日期">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="340" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="view(scope.row)">查看文件</el-button>
              <el-button type="primary" size="mini" @click="download(scope.row)">下载文件</el-button>
            </template>
          </el-table-column>
        </el-table>
      </page-panel>
      <div class="flex-page-footer" slot="footer">
        <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>
    <!-- 启动 弹窗 -->
    <el-dialog title="预览" width="1000px" top="0" :visible.sync="showReport" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <iframe src="./testConclusion.pdf" width="1000" height="560px" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import ThreeBtn from '@/components/ThreeBtn.vue'
  export default {
    data() {
      return {
        keyword: '',
        table: {
          headers: [],
          datas: [{
            name: '空载实验项目试验报告0907',
            type: 'PDF',
            size: '10.2MB',
            downNum: 100,
            updateTime: '2021-04-05 12:00:00',
          }],
          loading: false
        },
        page: {
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        },
        showReport: false
      };
    },
    components: {
      pagePanel,
      ThreeBtn
    },
    methods: {
      view() {
        // console.log('view', obj);
        this.showReport = true;
      },
      download() {
        // console.log('download');
        const link = document.createElement("a");
        link.href = encodeURI('./testConclusion.pdf');
        link.download = 'testConclusion.pdf';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
      // 查询用户列表
      getList() {
        let params = {
          pageNum: this.page.pageCurr,
          pageSize: this.page.pageSize
        };
        let data = {};
        if (this.keyword) {
          data.search = this.keyword
        }
        // roleSearch(params, data).then((res) => {
        //   res = res.data.data;
        //   res.list.forEach((item) => {
        //     item.stateStr = item.state == 0 ? true : false;
        //   });
        //   this.page.pageAll = res.total;
        //   this.table.datas = res.list;
        // }).catch((err) => {
        //   console.log(err)
        // });
      }
      // 重置搜索条件
      ,
      resetParams() {

      },
      currentChange(value) {
        this.page.pageCurr = value;
        this.getList();
      },
      sizeChange(value) {
        this.page.pageCurr = 1;
        this.page.pageSize = value;
        this.getList();
      },
    },
    mounted() {
      this.getList();
    },
    beforeDestroy() {

    }
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .page-list-banner {
    margin-bottom: 10px;
  }

  .num {
    cursor: pointer;
    color: aqua;
  }

  .dialog-form {
    background-color: #ececec;
    padding: 20px;
    width: 100%;
    height: 100%;
  }
</style>

 src/pages/test/testReportTemplate.vue

New file
@@ -0,0 +1,188 @@
<template>
  <div class="container">
    <flex-layout>
      <page-panel class="page-list-banner" :border="true" slot="header">
        <div slot="title" class="page-panel-title">
          <span class="title-pillar"></span>
          试验报告模板管理
        </div>
        <!-- <template slot="btnGrp">
          <el-button type="primary" @click="resetParams" size="mini">高级筛选</el-button>
        </template> -->
        <div class="table-layout">
          <div class="table-row">
            <!-- 查询条件 -->
            <div class="table-cell text-right">输入查询</div>
            <div class="table-cell">
              <el-input type="text" v-model.trim="keyword" size="small" placeholder="请输入关键字"></el-input>
            </div>
            <div class="table-cell" style="width:60%">
            </div>
          </div>
        </div>
        <div class="banner-btn-grp">
          <div class="el-pagination-btns">
            <el-button type="primary" @click="getList" round size="mini" icon="el-icon-search">查询
            </el-button>
          </div>
          <div class="el-pagination-btns">
            <el-button type="warning" @click="resetParams" round size="mini" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </page-panel>
      <page-panel title="数据列表" class="flex-page-content">
        <template slot="btnGrp">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogFormVisible = true">新建模板
          </el-button>
        </template>
        <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
          v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-table-column prop="name" align="center" :resizable="false" label="模板名称">
          </el-table-column>
          <el-table-column prop="type" align="center" :resizable="false" label="模板类型">
          </el-table-column>
          <el-table-column prop="updateTime" align="center" :resizable="false" label="创建时间">
          </el-table-column>
          <el-table-column prop="status" align="center" :resizable="false" label="模板状态">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="340" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="view(scope.row)">预览</el-button>
              <el-button type="primary" size="mini" @click="dialogFormVisible=true">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </page-panel>
      <div class="flex-page-footer" slot="footer">
        <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.pageAll"
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>


    <el-dialog title="添加文件夹" width="400px" top="0" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <div class="dialog-form">
        <el-form ref="ruleForm" size="mini" label-position="top" class="params-dialog">
          <el-form-item label="文件夹名称">
            <el-input v-model="addname" autocomplete="off"></el-input>
          </el-form-item>
          <div class="form-footer">
            <three-btn @click="dialogFormVisible=false">添加</three-btn>
          </div>
        </el-form>
      </div>
    </el-dialog>

    <!-- 启动 弹窗 -->
    <el-dialog title="预览" width="1000px" top="0" :visible.sync="showReport" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <iframe src="./testConclusion.pdf" width="1000" height="560px" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import ThreeBtn from '@/components/ThreeBtn.vue'
  export default {
    data() {
      return {
        keyword: '',
        table: {
          headers: [],
          datas: [{
            name: '空载试验模板',
            type: '.excel',
            updateTime: '2021-04-05 12:00:00',
            status: '已审批'
          }],
          loading: false
        },
        page: {
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        },
        dialogFormVisible: false,
        addname: '',
        showReport: false
      };
    },
    components: {
      pagePanel,
      ThreeBtn
    },
    methods: {
      // 查询用户列表
      getList() {
        let params = {
          pageNum: this.page.pageCurr,
          pageSize: this.page.pageSize
        };
        let data = {};
        if (this.keyword) {
          data.search = this.keyword
        }
        // roleSearch(params, data).then((res) => {
        //   res = res.data.data;
        //   res.list.forEach((item) => {
        //     item.stateStr = item.state == 0 ? true : false;
        //   });
        //   this.page.pageAll = res.total;
        //   this.table.datas = res.list;
        // }).catch((err) => {
        //   console.log(err)
        // });
      }
      // 重置搜索条件
      ,
      resetParams() {

      },
      view() {
        // console.log('view', obj);
        this.showReport = true;
      },
      currentChange(value) {
        this.page.pageCurr = value;
        this.getList();
      },
      sizeChange(value) {
        this.page.pageCurr = 1;
        this.page.pageSize = value;
        this.getList();
      },
    },
    mounted() {
      this.getList();
    },
    beforeDestroy() {

    }
  };
</script>

<style scoped>
  .container {
    height: 100%;
  }

  .page-list-banner {
    margin-bottom: 10px;
  }

  .num {
    cursor: pointer;
    color: aqua;
  }

  .dialog-form {
    background-color: #ececec;
    padding: 20px;
    width: 100%;
    height: 100%;
  }
</style>

 src/router/routes.js

@@ -101,7 +101,40 @@
                name: '历史数据查询',
            },
            component: (resolve) => require(['@/pages/dataManage/historyData.vue'], resolve),
        }, { //进线屏监控
        },
        { //查看历史数据
            path: 'historyDataDetails',
            name: 'historyDataDetails',
            meta: {
                name: '查看历史数据',
            },
            component: (resolve) => require(['@/pages/dataManage/historyDataDetails.vue'], resolve),
        },
        { //试验报告
            path: 'testReport',
            name: 'testReport',
            meta: {
                name: '试验报告',
            },
            component: (resolve) => require(['@/pages/test/testReport.vue'], resolve),
        },
        { //试验报告文件列表
            path: 'testReportDetails',
            name: 'testReportDetails',
            meta: {
                name: '试验报告文件列表',
            },
            component: (resolve) => require(['@/pages/test/testReportDetails.vue'], resolve),
        },
        { //试验报告模板管理
            path: 'testReportTemplate',
            name: 'testReportTemplate',
            meta: {
                name: '试验报告模板管理',
            },
            component: (resolve) => require(['@/pages/test/testReportTemplate.vue'], resolve),
        },
        { //进线屏监控
            path: 'intoLineMonitoring',
            name: 'intoLineMonitoring',
            meta: {
@@ -166,8 +199,7 @@
                name: '试验管理',
            },
            component: (resolve) => require(['@/pages/test/testManager/index.vue'], resolve),
            children: [
                {
            children: [{
                    path: 'testing',
                    name: 'testing',
                    meta: {
@@ -192,6 +224,6 @@
                name: '404',
            },
            component: (resolve) => require(['@/pages/404/index.vue'], resolve),
        }
        },
    ]
}];