<template>
|
<div class="menuPop">
|
<div class="rightTitle">
|
<span>管道</span>
|
<el-link @click="closeSpaceBox" :underline="false" class="boxClose"
|
><i class="el-icon-close"></i>
|
</el-link>
|
</div>
|
<div style="padding: 5px">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item>
|
<el-select
|
v-model="formInline.name"
|
style="width: 150px"
|
placeholder="...."
|
@change="changeValue($event)"
|
>
|
<el-option
|
v-for="item in optionx"
|
:key="item.field"
|
:label="item.alias"
|
:value="item.field"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="formInline.region"
|
style="width: 100px"
|
placeholder="...."
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-input
|
style="width: 150px"
|
v-model="formInline.input"
|
placeholder="请输入..."
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button plain @click="setSpaceTableLayer">查詢</el-button>
|
<el-button plain @click="restSpacePopLayer">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="centTable">
|
<el-table :data="tableData" height="220" style="width: 100%">
|
<el-table-column
|
align="center"
|
type="index"
|
label="序号"
|
width="50"
|
/>
|
<el-table-column label="定位" width="100" align="center">
|
<template slot-scope="scope">
|
<el-button
|
icon="el-icon-map-location"
|
size="mini"
|
@click="spaceLocation(scope.$index, scope.row)"
|
></el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, index) in attributeData"
|
:key="index"
|
:label="item.alias"
|
:prop="item.field"
|
show-overflow-tooltip
|
align="center"
|
></el-table-column>
|
</el-table>
|
</div>
|
|
<div class="bottomPage">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listdata.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="listdata.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="count"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
inquiry_selectByPage,
|
inquiry_selectWktById,
|
inquiry_selectFields,
|
inquiry_selectDomains,
|
decr,
|
} from '../../api/api.js';
|
export default {
|
computed: {
|
storeTime() {
|
return this.$store.state.mapSpaceQueryLayer;
|
},
|
},
|
data() {
|
return {
|
count: 0,
|
listdata: {
|
pageIndex: 1,
|
pageSize: 10,
|
name: null,
|
srid: 4326,
|
wkt: null,
|
filter: null,
|
},
|
formInline: {
|
name: '',
|
region: '',
|
},
|
attributeData: [],
|
optionx: [],
|
options: [],
|
options1: [
|
{
|
value: '=',
|
label: '=',
|
},
|
{
|
value: 'like',
|
label: 'like',
|
},
|
{
|
value: '<>',
|
label: '<>',
|
},
|
],
|
options2: [
|
{
|
value: '=',
|
label: '=',
|
},
|
{
|
value: '<>',
|
label: '<>',
|
},
|
{
|
value: '<=',
|
label: '<=',
|
},
|
{
|
value: '<',
|
label: '<',
|
},
|
{
|
value: '>=',
|
label: '>=',
|
},
|
{
|
value: '>',
|
label: '>',
|
},
|
],
|
value: '',
|
tableData: [],
|
spaceLayer: '',
|
imagePoint: null,
|
domainsLayer: null,
|
};
|
},
|
watch: {
|
async storeTime(index) {
|
this.spaceLayer = index;
|
this.getDomainsLayer();
|
// this.getTableselectFields();
|
// this.restSpacePopLayer();
|
},
|
},
|
created() {
|
this.spaceLayer = this.$store.state.mapSpaceQueryLayer;
|
// this.showSpacePopLayer();
|
// this.getTableselectFields();
|
this.getDomainsLayer();
|
},
|
|
methods: {
|
closeSpaceBox() {
|
if (this.imagePoint != null) {
|
sgworld.Creator.DeleteObject(this.imagePoint);
|
this.imagePoint = null;
|
}
|
this.$store.state.mapPopBoolean = false;
|
this.$store.state.mapPopBoxFlag = null;
|
},
|
setSpaceTableLayer() {
|
this.setListDataStart();
|
this.getSpaceTableLayer();
|
},
|
restSpacePopLayer() {
|
this.formInline.input = null;
|
this.showSpacePopLayer();
|
},
|
changeValue(value) {
|
var obj = {};
|
obj = this.optionx.find(function (item) {
|
return item.value === value;
|
});
|
if (obj.type == 'serial' || obj.type == 'int') {
|
this.options = this.options2;
|
} else {
|
this.options = this.options1;
|
}
|
this.formInline.region = this.options[0].value;
|
},
|
setListDataStart() {
|
this.listdata.pageSize = 10;
|
this.listdata.pageIndex = 1;
|
this.tableData = [];
|
},
|
//初始化查询条件
|
showSpacePopLayer() {
|
let val_date = this.optionx[0];
|
this.formInline.name = val_date.field;
|
if (val_date.type == 'serial' || val_date.type == 'int') {
|
this.options = this.options2;
|
} else {
|
this.options = this.options1;
|
}
|
this.formInline.region = this.options[0].value;
|
this.getSpaceTableLayer();
|
},
|
//初始化查询表的字段
|
async getTableselectFields() {
|
const data = await inquiry_selectFields({ name: this.spaceLayer });
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
this.optionx = [];
|
var valadata = data.result;
|
for (var i in valadata) {
|
if (valadata[i].showtype == 1) {
|
if (
|
valadata[i].domainNa != null &&
|
valadata[i].domainNa != undefined
|
) {
|
valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa);
|
}
|
this.optionx.push(valadata[i]);
|
this.attributeData.push(valadata[i]);
|
}
|
}
|
this.showSpacePopLayer();
|
},
|
getMatchDomainNa(res) {
|
var std = null;
|
for (var i in this.domainsLayer) {
|
if (this.domainsLayer[i].domName == res) {
|
return (std = this.domainsLayer[i].codeDesc);
|
}
|
}
|
return std;
|
},
|
//初始化查询阈值表
|
async getDomainsLayer() {
|
const data = await inquiry_selectDomains({ name: this.spaceLayer });
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
this.domainsLayer = data.result;
|
this.setListDataStart();
|
this.getTableselectFields();
|
},
|
//初始化查询表格信息
|
async getSpaceTableLayer() {
|
this.listdata.name = this.spaceLayer;
|
if (this.formInline.input == undefined || this.formInline.input == null) {
|
this.listdata.filter = null;
|
} else {
|
this.listdata.filter =
|
this.formInline.name +
|
' ' +
|
this.formInline.region +
|
' ' +
|
this.formInline.input;
|
}
|
const data = await inquiry_selectByPage(this.listdata);
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
var val_Data = data.result;
|
this.count = data.count;
|
|
for (var i in val_Data) {
|
var valste = val_Data[i];
|
for (var j in this.optionx) {
|
if (
|
this.optionx[j].domainNa != null &&
|
this.optionx[j].domainNa != undefined
|
) {
|
valste[this.optionx[j].field] = this.optionx[j].domainNa;
|
}
|
}
|
}
|
this.tableData = data.result;
|
},
|
async spaceLocation(index, row) {
|
var param = {
|
gid: row.gid,
|
name: this.spaceLayer,
|
};
|
const data = await inquiry_selectWktById(param);
|
if (data.code != 200) {
|
this.$message.error('列表调用失败');
|
}
|
|
var val1 = decr(data.result);
|
if (val1) {
|
if (this.imagePoint != null) {
|
sgworld.Creator.DeleteObject(this.imagePoint);
|
this.imagePoint = null;
|
}
|
var wkt = this.$wkt.parse(val1);
|
this.setMapLoaction(wkt);
|
}
|
},
|
handleSizeChange(val) {
|
this.listdata.pageSize = val;
|
this.getSpaceTableLayer();
|
},
|
handleCurrentChange(val) {
|
this.listdata.pageIndex = val;
|
this.getSpaceTableLayer();
|
},
|
setMapLoaction(res) {
|
var coord = res.coordinates;
|
if (res.type == 'Point') {
|
this.imagePoint = sgworld.Creator.CreateLabel(
|
{ X: coord[0], Y: coord[1], Altitude: 2000 },
|
'',
|
SmartEarthRootUrl + 'Workers/image/mark.png',
|
{
|
disableDepthTestDistance: Infinity,
|
scale: 0.8,
|
},
|
0,
|
'巡检点'
|
);
|
sgworld.Navigate.flyToObj(this.imagePoint.item);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.menuPop {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
border: 1px solid gray;
|
float: left;
|
.rightTitle {
|
padding: 5px;
|
color: white;
|
width: 100%;
|
.boxClose {
|
float: right;
|
margin-right: 20px;
|
color: white;
|
}
|
}
|
|
.bottomPage {
|
position: absolute;
|
bottom: 1%;
|
}
|
}
|
</style>
|
