<template>
|
<div class="siteInfo">
|
<el-card>
|
<div class="infoSearch">
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
<el-form-item label="名称">
|
<el-input size="small" v-model="queryParams.name" placeholder="请输点位名称..."></el-input>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button size="small" plain type="primary" @click="setInfoQyery" icon="el-icon-search">查询</el-button>
|
<el-button size="small" plain type="info" @click="setInfoRefresh" icon="el-icon-refresh">重置</el-button>
|
<el-button size="small" plain type="success" @click="setInfoAdd" icon="el-icon-plus">添加</el-button>
|
<el-button size="small" plain type="danger" @click="setInfoDel" icon="el-icon-delete">删除</el-button>
|
</div>
|
</div>
|
</el-card>
|
|
<el-card class="infoConTent">
|
<div class="infoTable">
|
<el-table :data="tableData" style="width: 100%" border height="calc(100% - 65px)" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column align="center" type="index" label="序号" width="70px" />
|
<el-table-column align="center" prop="id" v-if="false" />
|
<el-table-column align="center" prop="name" label="名称" />
|
|
<el-table-column align="center" prop="line" label="环线" />
|
<el-table-column align="center" prop="type" label="类型" :formatter="setInFoType" />
|
<el-table-column align="center" prop="geom" label="位置" />
|
<el-table-column min-width="100" label="操作">
|
<template slot-scope="scope">
|
<el-button @click="setInfoEdit(scope.$index, scope.row)" type="warning" plain size="small">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex" :limit.sync="queryParams.pageSize" @pagination="setInfoSearch" />
|
</div>
|
</el-card>
|
<el-dialog width="30%" :title="dialogTitle" :before-close="outerClose" :visible.sync="dialogFlag">
|
<el-form :model="editData">
|
<el-form-item label="名称" :label-width="formLabelWidth">
|
<el-input v-model="editData.name" style="width: 100%" placeholder=""></el-input>
|
</el-form-item>
|
<el-form-item label="环线" :label-width="formLabelWidth">
|
<el-input v-model="editData.line" style="width: 100%" placeholder=""></el-input>
|
</el-form-item>
|
<el-form-item label="类型" :label-width="formLabelWidth">
|
<el-select v-model="editData.type" style="width: 100%" placeholder="">
|
<el-option v-for="item in siteOption" :key="item.value" :label="item.name" :value="item.val"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="位置" :label-width="formLabelWidth">
|
<div style="width: 100%">
|
<el-input v-model="editData.geom" style="width: 92%" placeholder="" disabled=""></el-input>
|
<el-link style="float: right" @click="setInnerDialog"><i class="el-icon-plus"></i></el-link>
|
</div>
|
</el-form-item>
|
</el-form>
|
<el-dialog width="50%" title="点位" :visible.sync="innerVisible" :before-close="innerClose" append-to-body>
|
<div style="height: 540px">
|
<olMap v-if="innerVisible" @childData="childData" :parentData="parentData"></olMap>
|
</div>
|
</el-dialog>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="outerClose">取 消</el-button>
|
<el-button @click="submitOuter" type="primary">确 认</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { zhangzitou_selectAll, zhangzitou_insertZhangzitouEntity, zhangzitou_updateZhangzitouEntity, zhangzitou_deleteZhangzitouEntitys } from '@/api/mapView/map.js';
|
import mapData from '@/assets/js/mapSdk/mapData';
|
import olMap from '@/components/mapOl/index.vue';
|
export default {
|
components: {
|
olMap,
|
},
|
data() {
|
return {
|
total: 0,
|
queryParams: {
|
pageIndex: 1,
|
pageSize: 10,
|
name: '',
|
srid: 4326,
|
},
|
formLabelWidth: '80px',
|
multipleSelection: [],
|
tableData: [],
|
editData: {
|
type: '',
|
},
|
dialogTitle: null,
|
dialogFlag: false,
|
siteOption: [],
|
infoOption: null,
|
innerVisible: false,
|
parentData: null,
|
};
|
},
|
mounted() {
|
this.setInfoSearch();
|
this.getInfoOption();
|
},
|
methods: {
|
setInFoType(row, column) {
|
var obj = row.type;
|
if (this.infoOption[obj]) {
|
return this.infoOption[obj];
|
}
|
return obj;
|
},
|
getInfoOption() {
|
this.infoOption = mapData.dataStatistics;
|
const option = [];
|
for (var key in this.infoOption) {
|
option.push({
|
name: this.infoOption[key],
|
val: key,
|
});
|
}
|
this.siteOption = option;
|
},
|
setInfoQyery() {
|
this.queryParams.pageIndex = 1;
|
this.queryParams.pageSize = 10;
|
this.setInfoSearch();
|
},
|
setInfoSearch() {
|
zhangzitou_selectAll({
|
limit: this.queryParams.pageSize,
|
page: this.queryParams.pageIndex,
|
name: this.queryParams.name,
|
}).then((response) => {
|
if (response.data.code != 200) return;
|
const valData = response.data.result;
|
this.tableData = valData.pois;
|
this.total = valData.total;
|
});
|
},
|
setInfoRefresh() {
|
this.queryParams = {
|
pageIndex: 1,
|
pageSize: 10,
|
name: '',
|
srid: 4326,
|
};
|
this.setInfoSearch();
|
},
|
setInfoAdd() {
|
this.dialogTitle = '新增';
|
this.editData.type = this.siteOption[0].val;
|
this.dialogFlag = true;
|
},
|
setInfoDel() {
|
if (this.multipleSelection.length < 0) return;
|
const std = [];
|
for (var i in this.multipleSelection) {
|
std.push(this.multipleSelection[i].id);
|
}
|
zhangzitou_deleteZhangzitouEntitys({ ids: std.toString() }).then((response) => {
|
if (response.data.code != 200) {
|
return this.$message('删除失败');
|
}
|
this.$message({
|
message: '删除成功',
|
type: 'success',
|
});
|
|
this.setInfoQyery();
|
});
|
},
|
setInfoEdit(index, row) {
|
this.dialogTitle = '修改';
|
this.editData = { ...row };
|
this.parentData = this.editData.geom;
|
this.dialogFlag = true;
|
},
|
handleSelectionChange(res) {
|
this.multipleSelection = res;
|
},
|
setInnerDialog() {
|
this.innerVisible = true;
|
},
|
outerClose() {
|
this.dialogFlag = false;
|
this.parentData = null;
|
this.editData = {
|
type: '',
|
};
|
},
|
innerClose() {
|
this.innerVisible = false;
|
this.parentData = null;
|
},
|
submitOuter() {
|
if (this.dialogTitle == '新增') {
|
this.outerInsert();
|
} else {
|
this.outerEdit();
|
}
|
this.dialogFlag = false;
|
},
|
childData(res) {
|
this.editData.geom = res;
|
},
|
outerInsert() {
|
const obj = { ...this.editData };
|
zhangzitou_insertZhangzitouEntity(obj).then((response) => {
|
if (response.data.code != 200) {
|
return this.$message('新增失败');
|
}
|
this.$message({
|
message: '新增成功',
|
type: 'success',
|
});
|
this.outerClose();
|
this.setInfoRefresh();
|
});
|
},
|
outerEdit() {
|
const obj = { ...this.editData };
|
console.log(obj);
|
zhangzitou_updateZhangzitouEntity(obj).then((response) => {
|
if (response.data.code != 200) {
|
return this.$message('修改失败');
|
}
|
this.$message({
|
message: '修改成功',
|
type: 'success',
|
});
|
this.outerClose();
|
this.setInfoSearch();
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.siteInfo {
|
width: calc(100% - 20px);
|
height: calc(100% - 20px);
|
position: absolute;
|
margin: 10px;
|
border-radius: 5px;
|
display: flex;
|
flex-direction: column;
|
|
.infoSearch {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
::v-deep.el-form-item {
|
margin: 0px;
|
}
|
}
|
|
.infoConTent {
|
margin-top: 10px;
|
flex: 1;
|
position: relative;
|
|
.infoTable {
|
width: calc(100% - 30px);
|
height: calc(100% - 36px);
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
|
::v-deep.el-divider--horizontal {
|
margin: 0px;
|
margin-bottom: 10px;
|
}
|
|
::v-deep.el-card__body {
|
padding: 15px;
|
}
|
}
|
</style>
|
