<template>
|
<div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div class="header">
|
<div>试验区域</div>
|
<div>
|
<el-button type="primary" size="small" @click="clickAdd">新 增</el-button>
|
</div>
|
</div>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
@row-click="clickRow"
|
highlight-current-row
|
height="calc(100vh - 18em)">
|
<el-table-column type="index" label="序号" width="80">
|
<template v-slot="scope">
|
<span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="monthDate" label="月度时间" min-width="180"></el-table-column>
|
<el-table-column prop="testAreaName" label="试验区域名称" min-width="180"></el-table-column>
|
<el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column>
|
<el-table-column prop="createName" label="创建人" min-width="180"></el-table-column>
|
<el-table-column fixed="right" label="操作" min-width="140">
|
<template v-slot="scope">
|
<el-button type="text" size="small" @click="downLoadPost(scope.row)">导出</el-button>
|
<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @click="deleteRowFun(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
|
:total="search.total" layout="->,total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange">
|
</el-pagination>
|
</el-col>
|
<el-col :span="12">
|
<div class="header">
|
<div>温湿度记录：{{ saveRow.monthDate }}</div>
|
<div>
|
<el-button type="primary" size="small" v-if="saveRow.monthDate" @click="dialogVisible1 = true">新 增</el-button>
|
</div>
|
</div>
|
<el-table
|
:data="tableData1"
|
style="width: 100%"
|
height="calc(100vh - 18em)">
|
<el-table-column type="index" label="序号" width="80">
|
<template v-slot="scope">
|
<span>{{ (search1.current - 1) * search1.size + scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="上午" min-width="200" align="center">
|
<template>
|
<el-table-column prop="morningTestTime" label="时间" min-width="110" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="morningTemp" label="温度" min-width="80" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="morningHum" label="湿度" min-width="80" show-overflow-tooltip></el-table-column>
|
</template>
|
</el-table-column>
|
<el-table-column prop="morningRecorderUser" label="记录员" min-width="100"></el-table-column>
|
<el-table-column label="下午" min-width="200" align="center">
|
<template>
|
<el-table-column prop="afternoonTime" label="时间" min-width="110" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="afternoonTemp" label="温度" min-width="80" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="afternoonHum" label="湿度" min-width="80" show-overflow-tooltip></el-table-column>
|
</template>
|
</el-table-column>
|
<el-table-column prop="afternoonRecorderUser" label="记录员" min-width="100"></el-table-column>
|
<el-table-column prop="note" label="备注" show-overflow-tooltip min-width="100"></el-table-column>
|
<el-table-column fixed="right" label="操作" min-width="100">
|
<template v-slot="scope">
|
<el-button type="text" size="small" @click="edit1(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @click="deleteRowFun1(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination :current-page="1" :page-size="search1.size" :page-sizes="[10, 20, 30, 50, 100]"
|
:total="search1.total" layout="->,total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange1"
|
@current-change="handleCurrentChange1">
|
</el-pagination>
|
</el-col>
|
</el-row>
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible"
|
width="50%">
|
<div style="height: 20vh;">
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="月度时间" prop="monthDate"
|
:rules="[{ required: true, message: '请输入月度时间', trigger: 'blur' }]">
|
<el-date-picker
|
value-format="yyyy-MM-dd"
|
style="width: 100%"
|
format="yyyy-MM-dd"
|
size="small"
|
v-model="form.monthDate"
|
type="date"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="试验区域" prop="testAreaName"
|
:rules="[{ required: true, message: '请输入试验区域', trigger: 'blur' }]">
|
<el-input v-model="form.testAreaName"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="addPowerSupplyStability">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible1"
|
@open="openDialog"
|
width="50%">
|
<div style="height: 40vh;">
|
<el-form ref="form1" :model="form1" label-width="120px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="上午时间">
|
<el-date-picker
|
value-format="yyyy-MM-dd hh:mm:ss"
|
style="width: 100%"
|
format="yyyy-MM-dd hh:mm:ss"
|
size="small"
|
v-model="form1.morningTestTime"
|
type="datetime"
|
placeholder="请选择时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="上午温度">
|
<el-input v-model="form1.morningTemp" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="上午湿度">
|
<el-input v-model="form1.morningHum" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="上午记录员">
|
<el-select v-model="form1.morningRecorderId" filterable placeholder="请选择" clearable
|
size="small" style="width: 100%;">
|
<el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下午时间">
|
<el-date-picker
|
value-format="yyyy-MM-dd hh:mm:ss"
|
style="width: 100%"
|
format="yyyy-MM-dd hh:mm:ss"
|
size="small"
|
v-model="form1.afternoonTime"
|
type="datetime"
|
placeholder="请选择时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下午温度">
|
<el-input v-model="form1.afternoonTemp" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下午湿度">
|
<el-input v-model="form1.afternoonHum" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下午记录员">
|
<el-select v-model="form1.afternoonRecorderId" filterable placeholder="请选择" clearable
|
size="small" style="width: 100%;">
|
<el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备注">
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入内容"
|
v-model="form1.note">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
<el-button type="primary" @click="addPowerSupplyStability1">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
search: {
|
size: 20,
|
current: 1,
|
total: 0
|
},
|
search1: {
|
size: 20,
|
current: 1,
|
total: 0
|
},
|
tableData: [],
|
tableData1: [],
|
dialogVisible: false,
|
dialogVisible1: false,
|
form: {},
|
form1: {},
|
saveRow: {},
|
responsibleOptions: []
|
}
|
},
|
mounted() {
|
this.initData()
|
},
|
watch: {
|
dialogVisible(newVal) {
|
if (!newVal) {
|
this.form = {
|
}
|
}
|
},
|
dialogVisible1(newVal) {
|
if (!newVal) {
|
this.form1 = {
|
}
|
}
|
}
|
},
|
methods: {
|
// 导出
|
downLoadPost(row) {
|
this.$axios.get(this.$api.facilitiesAndEnvironment.exportTemperatureAndHumidityRecords + '?dateId=' + row.dateId,{responseType: "blob"}).then(res => {
|
this.outLoading = false
|
const blob = new Blob([res],{ type: 'application/msword' });
|
//将Blob 对象转换成字符串
|
let reader = new FileReader();
|
reader.readAsText(blob, 'utf-8');
|
reader.onload = () => {
|
try {
|
let result = JSON.parse(reader.result);
|
if (result.message) {
|
this.$message.error(result.message);
|
} else {
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '温湿度记录' + '.docx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
} catch (err) {
|
console.log(err);
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '温湿度记录' + '.docx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
}
|
})
|
},
|
openDialog() {
|
this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
|
if (res.code == 200) {
|
this.responsibleOptions = res.data
|
}
|
})
|
},
|
addPowerSupplyStability() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.$axios.post(this.$api.facilitiesAndEnvironment.addFeTempHumDate, this.form, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
this.initData()
|
this.dialogVisible = false
|
})
|
}
|
});
|
},
|
addPowerSupplyStability1() {
|
if (!this.saveRow) {
|
this.$message.warning("请选择试验区域！")
|
return
|
}
|
this.$refs.form1.validate((valid) => {
|
if (valid) {
|
this.form1.dateId = this.saveRow.dateId
|
this.$axios.post(this.$api.facilitiesAndEnvironment.addFeTempHumRecord, this.form1, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
this.initData1(this.saveRow.dateId)
|
this.dialogVisible1 = false
|
})
|
}
|
});
|
},
|
clickRow(row) {
|
this.saveRow = row
|
this.initData1(row.dateId)
|
},
|
edit(row) {
|
this.form = {...row}
|
this.dialogVisible = true
|
},
|
deleteRowFun(row) {
|
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$axios.delete(this.$api.facilitiesAndEnvironment.deleteFeTempHumDate + '?dateId=' + row.dateId).then(res => {
|
this.$message.success('删除成功！')
|
this.initData()
|
})
|
})
|
},
|
edit1(row) {
|
this.form1 = {...row}
|
this.dialogVisible1 = true
|
},
|
deleteRowFun1(row) {
|
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$axios.delete(this.$api.facilitiesAndEnvironment.deleteFeTempHumRecord + '?tempHumId=' + row.tempHumId).then(res => {
|
this.$message.success('删除成功！')
|
this.initData1(this.saveRow.dateId)
|
})
|
})
|
},
|
initData() {
|
this.$axios.get(this.$api.facilitiesAndEnvironment.getFeTempHumDate + '?size=' + this.search.size + '¤t=' + this.search.current).then(res => {
|
if (res.code === 201) return;
|
this.tableData = res.data.records;
|
this.search.total = res.data.total;
|
});
|
},
|
initData1(dateId) {
|
this.$axios.get(this.$api.facilitiesAndEnvironment.getFeTempHumRecordPage + '?size=' + this.search1.size + '¤t=' + this.search1.current + '&dateId=' + dateId).then(res => {
|
if (res.code === 201) return;
|
this.tableData1 = res.data.records;
|
this.search1.total = res.data.total;
|
});
|
},
|
handleSizeChange(val) {
|
this.search.size = val;
|
this.initData();
|
},
|
handleCurrentChange(val) {
|
this.search.current = val;
|
this.initData();
|
},
|
handleSizeChange1(val) {
|
this.search1.size = val;
|
this.initData1();
|
},
|
handleCurrentChange1(val) {
|
this.search1.current = val;
|
this.initData1();
|
},
|
clickAdd() {
|
this.dialogVisible = true
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.header {
|
height: 3em;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
</style>
|
