|
|
<template>
|
|
|
<div class="reportList">
|
|
|
<div class="usertop">
|
|
|
<el-date-picker
|
|
|
@change="get_List"
|
|
|
v-model="value2"
|
|
|
value-format="yyyy-MM"
|
|
|
type="month"
|
|
|
placeholder="选择日期">
|
|
|
</el-date-picker>
|
|
|
<span class="title">数据报表</span>
|
|
|
<el-select v-model="standard" clearable placeholder="请选择" class="custom-select" @change="standChange">
|
|
|
<el-option
|
|
|
v-for="item in standards"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
<div class="usertable">
|
|
|
<el-input
|
|
|
class="numkeyboard"
|
|
|
v-model="search_value"
|
|
|
size="middle"
|
|
|
@blur="get_List"
|
|
|
placeholder="搜索名称"
|
|
|
></el-input>
|
|
|
<el-table
|
|
|
class="table"
|
|
|
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
|
|
:row-style="{ height: '64px' }"
|
|
|
:header-row-style="{ height: '64px' }"
|
|
|
ref="table"
|
|
|
:data="tableData"
|
|
|
height="385"
|
|
|
@row-click="rowClick"
|
|
|
@selection-change="handleSelectionChange"
|
|
|
>
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
class="checkbox-column"
|
|
|
width="55">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="material_name" label="样品名称" width="180">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="flash_point_value" label="闪点温度"> </el-table-column>
|
|
|
<el-table-column prop="determination_standard" label="标准" width="280"> </el-table-column>
|
|
|
<el-table-column prop="create_time" label="时间" width="280"> </el-table-column>
|
|
|
</el-table>
|
|
|
<div class="footer">
|
|
|
<div class="goBack" @click="handBack">返回</div>
|
|
|
<!-- v-model="params.page" -->
|
|
|
<el-pagination
|
|
|
class="pagination"
|
|
|
background
|
|
|
@current-change="pageChange"
|
|
|
layout="total,prev, pager, next"
|
|
|
:total="total">
|
|
|
</el-pagination>
|
|
|
<div class="add" @click="handExport">导出</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getExperimentList,exportReportList } from "@/api/report";
|
|
|
import url from "socket.io-client/lib/url";
|
|
|
|
|
|
export default {
|
|
|
name: "Login",
|
|
|
data() {
|
|
|
return {
|
|
|
total:0,
|
|
|
selectValue:'',
|
|
|
value2: '',
|
|
|
params:{
|
|
|
page:1,
|
|
|
page_size:10
|
|
|
},
|
|
|
standard:'',
|
|
|
standards:[
|
|
|
{
|
|
|
value:'ASTM D6450(1ml)',
|
|
|
label:'ASTM D6450(1ml)'
|
|
|
},
|
|
|
{
|
|
|
value:'ASTM D7094(2ml)',
|
|
|
label:'ASTM D7094(2ml)'
|
|
|
},
|
|
|
{
|
|
|
value:'SH/T 0768(1ml)',
|
|
|
label:'SH/T 0768(1ml)'
|
|
|
},
|
|
|
],
|
|
|
search_value: "",
|
|
|
tableData: [
|
|
|
],
|
|
|
multipleSelection: []
|
|
|
};
|
|
|
},
|
|
|
created: function () {
|
|
|
this.get_List();
|
|
|
},
|
|
|
methods: {
|
|
|
rowClick(val){
|
|
|
console.log(val,'行点击',val.experiment_id)
|
|
|
this.$router.push({path:'/reportinfo',query:{experiment_id:val.experiment_id}})
|
|
|
},
|
|
|
standChange(val){
|
|
|
this.standard=val;
|
|
|
this.get_List();
|
|
|
},
|
|
|
pageChange(val){
|
|
|
this.params.page=val;
|
|
|
this.get_List();
|
|
|
},
|
|
|
get_List() {
|
|
|
var that = this;
|
|
|
const loading = this.$loading({
|
|
|
lock: true,
|
|
|
text: "获取数据报表...",
|
|
|
spinner: "el-icon-loading",
|
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
|
});
|
|
|
// this.params.page=val;
|
|
|
let data={
|
|
|
search_value: this.search_value,
|
|
|
choose_date:this.value2,
|
|
|
determination_standard:this.standard,
|
|
|
page:this.params.page,
|
|
|
page_size:this.params.page_size
|
|
|
}
|
|
|
getExperimentList(data)
|
|
|
.then((response) => {
|
|
|
if (response.data.status == 1) {
|
|
|
that.$message.error(data.message);
|
|
|
} else {
|
|
|
console.log(response.data,'返回数据2')
|
|
|
that.tableData=response.data.data.data
|
|
|
this.total=response.data.data.total_records
|
|
|
// that.changedata(data.data);
|
|
|
}
|
|
|
loading.close();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
loading.close();
|
|
|
that.$message.error(error.message);
|
|
|
});
|
|
|
},
|
|
|
handBack(){
|
|
|
this.$router.push({path:'/home'})
|
|
|
},
|
|
|
handleSelectionChange(val) {
|
|
|
// this.multipleSelection = val;
|
|
|
this.multipleSelection=[];
|
|
|
this.multipleSelection=val.map(item=>item.experiment_id)
|
|
|
console.log(this.multipleSelection,'选中参数',val)
|
|
|
},
|
|
|
handExport(){
|
|
|
// let data={
|
|
|
// experiment_id:this.multipleSelection
|
|
|
// }
|
|
|
var formData = new FormData()
|
|
|
formData.append('experiment_id_list',JSON.stringify(this.multipleSelection))
|
|
|
exportReportList(formData).then(response=>{
|
|
|
if(response.data.status==0){
|
|
|
this.$message.success('导出成功')
|
|
|
}else{
|
|
|
this.$message.error(response.data.message)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
/* //复选框的大小 */
|
|
|
.checkbox-column .cell {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
.reportList .el-checkbox__inner{
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
}
|
|
|
.reportList .el-checkbox__inner::after{
|
|
|
height: 14px;
|
|
|
left: 10px;
|
|
|
}
|
|
|
/* 表头修改 */
|
|
|
.usertop{
|
|
|
/* margin-top:14px; */
|
|
|
}
|
|
|
.reportList .el-input__icon{
|
|
|
font-size: 30px !important;
|
|
|
line-height:82px;
|
|
|
}
|
|
|
.reportList .el-input__inner{
|
|
|
font-size: 24px;
|
|
|
color: #3A3A3A;
|
|
|
|
|
|
}
|
|
|
.reportList .el-date-editor .el-input__inner,.el-select .el-input__inner{
|
|
|
border:0;
|
|
|
background:none;
|
|
|
}
|
|
|
.el-select-dropdown__item{
|
|
|
height: 68px;
|
|
|
font-size: 28px;
|
|
|
color: #3A3A3A;
|
|
|
line-height: 34px;
|
|
|
}
|
|
|
.el-month-table{
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
/* 搜索框样式修改 */
|
|
|
.reportList .el-input__inner {
|
|
|
text-indent: 20px;
|
|
|
height: 80px !important;
|
|
|
}
|
|
|
/* 表格样式修改 */
|
|
|
.reportList .el-table__header .el-table__cell{
|
|
|
font-weight: 400;
|
|
|
background: #F3F3F3
|
|
|
}
|
|
|
.reportList .el-table .el-table__cell{
|
|
|
font-size: 24px;
|
|
|
color: #3A3A3A;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.custom-select .el-input .el-input__inner,
|
|
|
.custom-select .el-input .el-input__inner:hover,
|
|
|
.custom-select .el-input .el-input__inner:focus {
|
|
|
background-color: transparent !important;
|
|
|
}
|
|
|
|
|
|
/* .custom-select .el-input .el-select__caret {
|
|
|
display: none;
|
|
|
} */
|
|
|
/* 分页 */
|
|
|
.reportList .el-pagination .el-pagination__total{
|
|
|
font-size:24px;
|
|
|
line-height:40px;
|
|
|
}
|
|
|
.reportList .el-pagination .btn-prev,.reportList .el-pagination .btn-next{
|
|
|
width:40px;
|
|
|
height:40px;
|
|
|
}
|
|
|
.reportList .el-pager li{
|
|
|
width:40px;
|
|
|
height:40px;
|
|
|
margin:0 10px !important;
|
|
|
line-height: 40px;
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
.reportList {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.numkeyboard {
|
|
|
width: 944px;
|
|
|
height: 80px;
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
|
|
|
.el-input__inner {
|
|
|
height: 80px !important;
|
|
|
}
|
|
|
}
|
|
|
.usertop {
|
|
|
height: 95px;
|
|
|
font-size: 40px;
|
|
|
font-weight: bold;
|
|
|
color: #3a3a3a;
|
|
|
line-height: 91px;
|
|
|
padding:0 40px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.usertable {
|
|
|
margin: 0 auto;
|
|
|
.table{
|
|
|
width:944px;
|
|
|
margin: 20px auto 0;
|
|
|
.img{
|
|
|
width:58px;
|
|
|
height:58px
|
|
|
}
|
|
|
}
|
|
|
.footer{
|
|
|
width: 1024px;
|
|
|
padding:0 40px;
|
|
|
height: 120px;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0px -3px 6px 1px rgba(0,0,0,0.16);
|
|
|
border-radius: 0px 0px 0px 0px;
|
|
|
display:flex;
|
|
|
justify-content: space-between;
|
|
|
padding-top:12px;
|
|
|
.pagination{
|
|
|
margin-top:30px;
|
|
|
}
|
|
|
.goBack{
|
|
|
width: 208px;
|
|
|
height: 84px;
|
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #ECECEC 100%);
|
|
|
box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
|
|
|
border-radius: 8px 8px 8px 8px;
|
|
|
font-size: 36px;
|
|
|
line-height:84px;
|
|
|
color: #3A3A3A;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.add{
|
|
|
width: 208px;
|
|
|
height: 84px;
|
|
|
background: linear-gradient(180deg, #59CC74 0%, #10922F 100%);
|
|
|
box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.4);
|
|
|
border-radius: 8px 8px 8px 8px;
|
|
|
font-size: 36px;
|
|
|
line-height:84px;
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</style>
|
