399 lines
11 KiB
Vue
399 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div class="vab-base">
|
||
|
|
<el-form ref="queryForm" :model="queryForm" label-width="80px">
|
||
|
|
<vab-query-form>
|
||
|
|
<el-form-item width="100" prop="code" label="站点名称">
|
||
|
|
<el-select v-model="queryForm.code" placeholder="站点名称">
|
||
|
|
<el-option
|
||
|
|
v-for="item in devicesData"
|
||
|
|
:key="item.code"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.code"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item width="100" prop="date" label="日期">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="queryForm.date"
|
||
|
|
size="medium"
|
||
|
|
type="month"
|
||
|
|
placeholder="选择日期"
|
||
|
|
@change="standardToTime"
|
||
|
|
></el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item width="100">
|
||
|
|
<el-button @click="resetForm()">重置</el-button>
|
||
|
|
<el-button type="primary" size="medium" @click="search">
|
||
|
|
查询
|
||
|
|
</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</vab-query-form>
|
||
|
|
<vab-query-form>
|
||
|
|
<el-form-item width="100">
|
||
|
|
<el-button size="small" type="primary" plain @click="handleAdd">
|
||
|
|
新建
|
||
|
|
</el-button>
|
||
|
|
<el-button type="small" size="medium" @click="exportData">
|
||
|
|
导出
|
||
|
|
</el-button>
|
||
|
|
<el-button type="small" @click="deletes">批量删除</el-button>
|
||
|
|
<el-upload
|
||
|
|
class="upload-demo"
|
||
|
|
:action="action"
|
||
|
|
:headers="headers"
|
||
|
|
:on-preview="handlePreview"
|
||
|
|
:on-remove="handleRemove"
|
||
|
|
list-type="picture"
|
||
|
|
>
|
||
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
||
|
|
</el-upload>
|
||
|
|
</el-form-item>
|
||
|
|
</vab-query-form>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<el-table
|
||
|
|
v-loading="listLoading"
|
||
|
|
:data="rateData"
|
||
|
|
border
|
||
|
|
stripe
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
prop="codRate"
|
||
|
|
label="COD"
|
||
|
|
width="120"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="phRate"
|
||
|
|
label="PH"
|
||
|
|
width="200"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="tnRate"
|
||
|
|
label="总氮"
|
||
|
|
width="200"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="anRate"
|
||
|
|
label="氨氮"
|
||
|
|
width="200"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="tpRate"
|
||
|
|
label="总磷"
|
||
|
|
width="200"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<el-table
|
||
|
|
:data="tableData"
|
||
|
|
stripe
|
||
|
|
border
|
||
|
|
style="width: 100%"
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
fixed
|
||
|
|
type="selection"
|
||
|
|
width="40"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
fixed
|
||
|
|
prop="device.name"
|
||
|
|
label="站点名称"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="date"
|
||
|
|
label="检测日期"
|
||
|
|
width="100"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column label="进水" align="center">
|
||
|
|
<el-table-column prop="inCod" label="COD" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.inCod"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.inCod, 'inCod')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="inAn" label="氨氮" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.inAn"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.inAn, 'inAn')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="inTp" label="总磷" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.inTp"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.inTp, 'inTp')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="inTn" label="总氮" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.inTn"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.inTn, 'inTn')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="inPh" label="PH" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.inPh"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.inPh, 'inPh')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="出水" align="center">
|
||
|
|
<el-table-column prop="outCod" label="COD" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.outCod"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.outCod, 'outCod')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="outAn" label="氨氮" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.outAn"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.outAn, 'outAn')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="outTp" label="总磷" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.outTp"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.outTp, 'outTp')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="outTn" label="总氮" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.outTn"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.outTn, 'outTn')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="outPh" label="PH" width="70" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-input
|
||
|
|
v-model="scope.row.outPh"
|
||
|
|
size="medium"
|
||
|
|
@blur="editData(scope.row.id, scope.row.outPh, 'outPh')"
|
||
|
|
></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" align="center" width="100">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<el-pagination
|
||
|
|
:background="background"
|
||
|
|
:current-page="queryForm.page"
|
||
|
|
:layout="layout"
|
||
|
|
:page-size="queryForm.size"
|
||
|
|
:total="total"
|
||
|
|
style="text-align: right"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
></el-pagination>
|
||
|
|
<testing-add ref="add"></testing-add>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getList,
|
||
|
|
doDelete,
|
||
|
|
doEdit,
|
||
|
|
exportWaterDetection,
|
||
|
|
waterRate,
|
||
|
|
} from '@/api/testing';
|
||
|
|
import { getDevices } from '@/api/task';
|
||
|
|
import { getDate1 } from '@/common/times';
|
||
|
|
import testingAdd from './testingAdd';
|
||
|
|
import ajax from '@/api/download';
|
||
|
|
import { baseURL } from '@/config';
|
||
|
|
import store from '@/store';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
testingAdd,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableData: [],
|
||
|
|
devicesData: [],
|
||
|
|
rateData: [],
|
||
|
|
action: baseURL + '/waterDetection/import',
|
||
|
|
lazy: true,
|
||
|
|
layout: 'total, sizes, prev, pager, next, jumper',
|
||
|
|
total: 0,
|
||
|
|
background: true,
|
||
|
|
listLoading: false,
|
||
|
|
elementLoadingText: '正在加载...',
|
||
|
|
queryForm: {
|
||
|
|
page: 1,
|
||
|
|
size: 20,
|
||
|
|
code: '',
|
||
|
|
date: '',
|
||
|
|
projectId: '',
|
||
|
|
},
|
||
|
|
ids: [],
|
||
|
|
headers: { token: store.getters['user/token'] },
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.queryForm.projectId = sessionStorage.getItem('projectId');
|
||
|
|
this.getDevices();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
testingIndex() {
|
||
|
|
this.setDefaultTime();
|
||
|
|
setTimeout(() => {
|
||
|
|
this.fetchData();
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
async getDevices() {
|
||
|
|
const { data } = await getDevices(this.queryForm);
|
||
|
|
this.devicesData = data;
|
||
|
|
},
|
||
|
|
async editData(id, value, field) {
|
||
|
|
var data = {};
|
||
|
|
data.id = id;
|
||
|
|
data[field] = value;
|
||
|
|
const { msg } = await doEdit(data);
|
||
|
|
this.$notify({
|
||
|
|
title: msg,
|
||
|
|
type: 'success',
|
||
|
|
});
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
//标准时间转yyyy-mm-dd
|
||
|
|
standardToTime() {
|
||
|
|
this.queryForm.date = getDate1(this.queryForm.date);
|
||
|
|
console.log(this.queryForm.date);
|
||
|
|
},
|
||
|
|
setDefaultTime() {
|
||
|
|
this.queryForm.date = getDate1();
|
||
|
|
},
|
||
|
|
async fetchData() {
|
||
|
|
const { data } = await getList(this.queryForm);
|
||
|
|
this.tableData = data.items;
|
||
|
|
this.total = data.total;
|
||
|
|
this.waterRate();
|
||
|
|
},
|
||
|
|
async waterRate() {
|
||
|
|
const { data } = await waterRate(this.queryForm);
|
||
|
|
this.rateData[0] = data;
|
||
|
|
},
|
||
|
|
handleAdd() {
|
||
|
|
this.$refs['add'].showEdit();
|
||
|
|
},
|
||
|
|
//上传数据
|
||
|
|
handleRemove(file, fileList) {
|
||
|
|
console.log(file, fileList);
|
||
|
|
},
|
||
|
|
handlePreview(file) {
|
||
|
|
console.log(file);
|
||
|
|
},
|
||
|
|
//搜索
|
||
|
|
search() {
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
resetForm() {
|
||
|
|
this.$refs.queryForm.resetFields();
|
||
|
|
},
|
||
|
|
//导出
|
||
|
|
async exportData() {
|
||
|
|
const url = await exportWaterDetection(this.queryForm);
|
||
|
|
ajax.downloadFile(url, { fileName: '水质检测.xls' });
|
||
|
|
},
|
||
|
|
handleSelectionChange(val) {
|
||
|
|
const ids = [];
|
||
|
|
val.forEach(row => {
|
||
|
|
ids.push(row.id);
|
||
|
|
});
|
||
|
|
this.ids = ids;
|
||
|
|
},
|
||
|
|
deletes() {
|
||
|
|
const ids = this.ids;
|
||
|
|
if (ids.length == 0) {
|
||
|
|
this.$message({
|
||
|
|
type: 'info',
|
||
|
|
message: '没有选中任何项',
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
this.deleteData(ids);
|
||
|
|
},
|
||
|
|
//删除
|
||
|
|
deleteData(dis) {
|
||
|
|
const that = this;
|
||
|
|
this.$confirm('你确定要删除当前项吗?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
const { msg } = doDelete(dis);
|
||
|
|
this.$message({
|
||
|
|
type: 'success',
|
||
|
|
message: msg == undefined ? '删除成功' : msg,
|
||
|
|
});
|
||
|
|
setTimeout(function () {
|
||
|
|
that.fetchData();
|
||
|
|
}, 1000);
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$message({
|
||
|
|
type: 'info',
|
||
|
|
message: '已取消删除',
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleDelete(row) {
|
||
|
|
const that = this;
|
||
|
|
that.deleteData([row.id]);
|
||
|
|
},
|
||
|
|
handleQuery() {
|
||
|
|
this.queryForm.page = 1;
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
handleSizeChange(val) {
|
||
|
|
this.queryForm.size = val;
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
this.queryForm.page = val;
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|