|
|
@@ -1,19 +1,175 @@
|
|
|
<template>
|
|
|
<div class="ReportViewing">
|
|
|
- 报告查看
|
|
|
+ <div style="margin-bottom:50px;display: flex;">
|
|
|
+ <el-descriptions title="报告信息" border>
|
|
|
+ <el-descriptions-item label="报告名称">报告名称</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="创建时间">2022-05-18 14:30:00</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="修改时间">2022-05-18 14:30:00</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ <div class="companyManagement1">
|
|
|
+ <div class="companyManagement1-R">
|
|
|
+ <el-input class="s1" v-model="page.name" placeholder="请输入SN" clearable></el-input>
|
|
|
+ <el-input class="s1" v-model="page.name" placeholder="请输入编号" clearable></el-input>
|
|
|
+ <el-date-picker class="s1" v-model="page.name" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
|
|
|
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="searchTimeData">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button class="s1 sBtn" type="primary" icon="el-icon-search"></el-button>
|
|
|
+ <el-dropdown class="s1" @command="commands">
|
|
|
+ <el-button type="warning" icon="el-icon-download">
|
|
|
+ 下载<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item command="a">查看验证方案</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="b">查看验证报告</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="c">查看校准证书</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="d">下载当前数据</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="companyManagement2">
|
|
|
+ <el-table :data="tableData" border size="small">
|
|
|
+ <el-table-column label="ID">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="设备编号">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.name }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="SN">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="温度℃">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.name }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="companyManagement3">
|
|
|
+ <el-pagination @current-change="handleCurrentChange" :current-page="page.pagez" :page-size="page.page_size"
|
|
|
+ layout="total, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <pdf ref="pdf"></pdf>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import pdf from "./pdf.vue"
|
|
|
+ import Axios from 'axios'
|
|
|
+ import fileDownload from 'js-file-download'
|
|
|
export default {
|
|
|
- name:'ReportViewing',
|
|
|
+ name: 'ReportViewing',
|
|
|
+ components: {
|
|
|
+ pdf
|
|
|
+ },
|
|
|
data() {
|
|
|
- return{
|
|
|
- vlaue:''
|
|
|
+ return {
|
|
|
+ src: '',
|
|
|
+ dia: null,
|
|
|
+ LabelWidth: "40px",
|
|
|
+ total: 30,
|
|
|
+ page: {
|
|
|
+ pagez: 1,
|
|
|
+ page_size: 10,
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ page1: {
|
|
|
+ pagez: 1,
|
|
|
+ page_size: 10,
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ tableData: [{
|
|
|
+ date: '铜仁公司',
|
|
|
+ name: '数据采集工程师',
|
|
|
+ time: '2022-12-21 12:00:00'
|
|
|
+ }, {
|
|
|
+ date: '国控总部',
|
|
|
+ name: '冷链负责人',
|
|
|
+ time: '2022-12-21 12:00:00'
|
|
|
+ }, {
|
|
|
+ date: '国控毕节公司',
|
|
|
+ name: '冷链负责人',
|
|
|
+ time: '2022-12-21 12:00:00'
|
|
|
+ }],
|
|
|
}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ commands(e) {
|
|
|
+ switch (e) {
|
|
|
+ case 'a':
|
|
|
+ this.$refs.pdf.SetPdf()
|
|
|
+ break
|
|
|
+ case 'b':
|
|
|
+ this.$refs.pdf.SetPdf()
|
|
|
+ break
|
|
|
+ case 'c':
|
|
|
+ this.$refs.pdf.SetPdf()
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ fileDownload('res.data', '111.docx');
|
|
|
+ // Axios({
|
|
|
+ // method: 'get',
|
|
|
+ // url: 'this.downUrl',
|
|
|
+ // responseType: 'blob'
|
|
|
+ // }).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ // fileDownload(res.data, '111.docx');
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchTimeData(e) {
|
|
|
+ console.log('时间选择', e)
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page.pagez = val
|
|
|
+ console.log('当前页', this.page);
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
-</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .el-input {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ReportViewing {
|
|
|
+ .companyManagement1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .companyManagement1-L {}
|
|
|
+ .companyManagement1-R {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // .sBtn{
|
|
|
+ // margin-left: 10px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .s1{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .companyManagement2 {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .companyManagement3 {
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
YangJian0701
