gitadmin
/
taauav_app_web_discard_20240715
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

多光谱图管理

master
huxinglu 4 jaren geleden
bovenliggende
e19f923c1d
commit
e30da1da3b
3 gewijzigde bestanden met toevoegingen van 532 en 0 verwijderingen
Zij-aan-zij weergave
Diff Options
Show Stats Download Patch File Download Diff File
  1. +55
    -0
      src/api/water/spectrum.js
  2. +272
    -0
      src/views/water/spectrum/index.vue
  3. +205
    -0
      src/views/water/spectrum/photoForm.vue

+ 55
- 0
src/api/water/spectrum.js Bestand weergeven

@@ -0,0 +1,55 @@
import axios from '../api'

/**
* API接口
*/
export default {

getAllList(params) {
return axios({
method: "GET",
url: '/api/admin/spectrum/list',
params: {
...params
}
})
},

upload(params) {
return axios({
method: "POST",
url: '/api/admin/spectrum/upload',
data: params,
timeout: 1000000,
headers: {
'Content-Type': 'multipart/form-data'
}
})
},

edit(params) {
return axios({
method: "POST",
url: '/api/admin/spectrum/edit',
data: params
})
},

getDetail(id) {
return axios({
method: "GET",
url: '/api/admin/spectrum/detail',
params: {
id
}
})
},

remove(params) {
return axios({
method: "POST",
url: '/api/admin/spectrum/remove',
data: params
})
},
}

+ 272
- 0
src/views/water/spectrum/index.vue Bestand weergeven

@@ -0,0 +1,272 @@
<template>
<div class="spectrum-list">
<el-form :inline="true" :model="searchParam" class="demo-form-inline">
<el-form-item label="任务单号">
<el-input
clearable
v-model="searchParam.inspectNo"
size="small"
placeholder="请输入任务单号"
style="width: 150px"
/>
</el-form-item>
<el-form-item label="区划">
<driverAreaSelect v-model="searchParam.areaId"></driverAreaSelect>
</el-form-item>
<el-form-item label="河道名称">
<el-input
clearable
v-model="searchParam.driverName"
size="small"
placeholder="请输入河道名称"
style="width: 150px"
/>
</el-form-item>
<el-form-item label="巡检时间">
<el-date-picker
style="width: 220px"
placeholder="巡检时间"
clearable
size="small"
value-format="yyyy-MM-dd"
v-model="searchParam.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
:loading="tableLoading"
icon="el-icon-search"
@click="search"
size="small"
type="primary"
>搜索
</el-button>
<el-button
icon="el-icon-refresh-right"
@click="initSearchParam();search()"
type="primary"
size="small"
style="background-color: #fff; border: 1px solid #ccc ; color: #666"
>清空
</el-button>
</el-form-item>
</el-form>
<el-table
stripe
ref="table"
:height="tableHeight"
v-loading="tableLoading"
:data="dataList"
border
size="medium"
row-key="id"
>
<el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
<el-table-column
min-width="130"
show-overflow-tooltip
prop="inspectNo"
label="任务单号"
align="center"
></el-table-column>
<el-table-column show-overflow-tooltip prop="areaName" label="区划" align="center"/>
<el-table-column show-overflow-tooltip prop="driverName" label="河湖名称" align="center"/>
<el-table-column
min-width="120"
show-overflow-tooltip
prop="inspectTime"
label="巡检日期"
align="center"
/>
<el-table-column show-overflow-tooltip prop="tpName" label="总磷" align="center" min-width="80"/>
<el-table-column show-overflow-tooltip prop="tnName" label="总氮" align="center" min-width="80"/>
<el-table-column show-overflow-tooltip prop="nh3nName" label="氨氮" align="center" min-width="80"/>
<el-table-column show-overflow-tooltip prop="doName" label="溶解氧" align="center" min-width="80"/>
<el-table-column show-overflow-tooltip prop="codName" label="化学需氧量" align="center" min-width="110"/>
<el-table-column show-overflow-tooltip prop="tubName" label="浊度" align="center" min-width="80"/>

<el-table-column label="操作" align="left" width="150">
<template slot-scope="{row}">
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='edit')"
@click="uploadItem(row)"
type="primary"
size="mini"
icon="el-icon-upload2"
>导入
</el-button>
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='edit')"
type="danger"
size="mini"
class="el-icon-delete"
@click="handleDelete(row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-current">
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
prev-text="上一页"
next-text="下一页"
background
layout="total, prev, pager, next, jumper"
style="display: inline-block;"
:total="count"
@current-change="handleCurrentChange"
/>
</div>
<photoForm
:data="dataChild"
@successSubmit="visible=false;getAllList()"
@handleClose="visible=false"
v-if="visible"
:visible="visible"
/>
</div>
</template>

<script>
import api from "@/api/water/spectrum";
import driverAreaSelect from "@/components/driverAreaSelect";
import photoForm from "./photoForm";
import {mapGetters} from "vuex";

export default {
name: "spectrum-list",
data() {
return {
dataChild: {},
visible: false,
dataList: [],
currentPage: 1,
count: 0,
pageSize: parseInt((document.body.clientHeight - 250 - 43) / 47),
tableHeight: document.body.clientHeight - 250,
tableLoading: false,
searchParam: {
inspectNo: "",
driverName: "",
areaId: "",
time: ""
}
};
},
computed: {
...mapGetters(["btnRule", "isAdmin"])
},
components: {driverAreaSelect, photoForm},
created() {
},
mounted() {
this.tableLoading = true;
this.getAllList();
},
methods: {
uploadItem(row) {
this.dataChild = row;
this.visible = true;
},
indexMethod(index) {
return index + 1 + (this.currentPage - 1) * this.pageSize;
},
handleDelete(row) {
this.$confirm("确定要删除吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.tableLoading = true;
let param = {
id: row.id,
codPic:'',
nh3nPic:'',
tpPic:'',
tnPic:'',
doPic:'',
tubPic:'',
leftLatitude: "",
leftLongitude: "",
rightLatitude: "",
rightLongitude: "",
codName:'',
nh3nName:'',
tpName:'',
tnName:'',
doName:'',
tubName:'',
};
api
.edit(param)
.then(res => {
this.$message({
type: "success",
message: "操作成功"
});
this.getAllList();
})
.catch(e => {
this.tableLoading = false;
});
});
},
initSearchParam() {
this.searchParam = {
inspectNo: "",
driverName: "",
areaId: "",
time: ""
};
},
search() {
this.currentPage = 1;
this.tableLoading = true;
this.$refs.table.bodyWrapper.scrollTop = 0;
this.getAllList();
},
handleCurrentChange(val) {
this.tableLoading = true;
this.currentPage = val;
this.$refs.table.bodyWrapper.scrollTop = 0;
this.getAllList();
},
getAllList() {
let searchParam = JSON.parse(JSON.stringify(this.searchParam));
if (searchParam.time && searchParam.time.length > 0) {
searchParam.startTime = searchParam.time[0];
searchParam.endTime = searchParam.time[1];
delete searchParam.time;
}
searchParam.page = this.currentPage;
searchParam.pageSize = this.pageSize;
api
.getAllList(searchParam)
.then(res => {
this.dataList = res.data.records ? res.data.records : [];
this.count = res.data.total;
this.tableLoading = false;
})
.catch(e => {
this.dataList = [];
this.tableLoading = false;
});
}
}
};
</script>

<style lang="less">
.spectrum-list {
height: fit-content;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
padding: 15px;
}
</style>

+ 205
- 0
src/views/water/spectrum/photoForm.vue Bestand weergeven

@@ -0,0 +1,205 @@
<template>
<el-drawer
title="导入文件"
:visible.sync="visible"
direction="rtl"
size="500px"
:before-close="handleClose"
>
<div class="photo-form">
<el-form v-loading="uploadLoading" ref="ruleForm" :model="ruleForm" size="small" label-width="100px">
<el-form-item label="总磷" prop="tpPic">
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
@click="uploadFile('tp')"
size="small"
type="primary"
icon="el-icon-upload2"
>上传
</el-button>
<span>{{ruleForm.tpName}}</span>
</el-form-item>
<el-form-item label="总氮" prop="tnPic">
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
@click="uploadFile('tn')"
size="small"
type="primary"
icon="el-icon-upload2"
>上传
</el-button>
<span>{{ruleForm.tnName}}</span>
</el-form-item>
<el-form-item label="氨氮" prop="nh3nPic">
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
@click="uploadFile('nh3n')"
size="small"
type="primary"
icon="el-icon-upload2"
>上传
</el-button>
<span>{{ruleForm.nh3nName}}</span>
</el-form-item>
<el-form-item label="溶解氧" prop="doPic">
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
@click="uploadFile('do')"
size="small"
type="primary"
icon="el-icon-upload2"
>上传
</el-button>
<span>{{ruleForm.doName}}</span>
</el-form-item>
<el-form-item label="化学需氧量" prop="codPic">
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
@click="uploadFile('cod')"
size="small"
type="primary"
icon="el-icon-upload2"
>上传
</el-button>
<span>{{ruleForm.codName}}</span>
</el-form-item>
<el-form-item label="浊度" prop="tubPic">
<el-button
v-if="isAdmin||btnRule.some(btn=>btn=='upload')"
@click="uploadFile('tub')"
size="small"
type="primary"
icon="el-icon-upload2"
>上传
</el-button>
<span>{{ruleForm.tubName}}</span>
</el-form-item>
<el-form-item label="左下经度" prop="leftLongitude">
<el-input clearable v-model="ruleForm.leftLongitude" size="small" placeholder="请输入河湖名称"/>
</el-form-item>

<el-form-item label="左下纬度" prop="leftLatitude">
<el-input clearable v-model="ruleForm.leftLatitude" size="small" placeholder="请输入河湖名称"/>
</el-form-item>
<el-form-item label="右上经度" prop="rightLongitude">
<el-input clearable v-model="ruleForm.rightLongitude" size="small" placeholder="请输入河湖名称"/>
</el-form-item>
<el-form-item label="右上纬度" prop="rightLatitude">
<el-input clearable v-model="ruleForm.rightLatitude" size="small" placeholder="请输入河湖名称"/>
</el-form-item>
</el-form>
<div style="text-align: center">
<el-button
v-if="!ruleForm.disabled"
icon="el-icon-document-add"
:loading="addBtnLoading"
type="primary"
size="medium"
@click="submitForm('ruleForm')"
>提交
</el-button>
<el-button
icon="el-icon-back"
style="margin-left: 15px"
size="medium"
@click="handleClose"
>返回
</el-button>
</div>
</div>
<input id="upload" type="file" name="file" @change="uploadClick" style="display: none;"/>
</el-drawer>
</template>

<script>
import api from "@/api/water/spectrum";
import $ from "jquery";
import {mapGetters} from "vuex";

export default {
name: "photorForm",
data() {
return {
ruleForm: {},
uploadLoading: false,
addBtnLoading: false,
typeName: ''
};
},
props: {
visible: {
type: Boolean,
default() {
return false;
}
},
data: {
type: Object,
default() {
return {};
}
}
},
computed: {
...mapGetters(["btnRule", "isAdmin"])
},
components: {},
created() {
this.ruleForm = JSON.parse(JSON.stringify(this.data));
},
mounted() {
},
methods: {
uploadFile(name) {
this.typeName = name
$("#upload").click();
},
uploadClick(event) {
let file = event.target.files[0];
let formdata = new window.FormData();
formdata.append("file", file);
this.uploadLoading = true;
api.upload(formdata).then(
rs => {
this.$message({
type: "success",
message: "上传成功"
});
let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
ruleForm[this.typeName + 'Pic'] = rs.data.url;
ruleForm[this.typeName + 'Name'] = rs.data.fileName;
this.ruleForm = Object.assign({}, ruleForm)
this.uploadLoading = false;
},
error => {
this.uploadLoading = false;
}
);
event.target.value = "";
},
handleClose() {
this.$emit("handleClose");
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
this.addBtnLoading = true;
api.edit(ruleForm)
.then(res => {
this.addBtnLoading = false;
this.$message({
type: "success",
message: "操作成功"
});
this.$emit('successSubmit')
})
.catch(e => {
this.addBtnLoading = false;
});
}
});
}
}
};
</script>

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan