<template>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form-model layout="horizontal">
|
<a-row :gutter="15">
|
<a-col :span="5">
|
<a-button
|
icon="plus"
|
type="primary"
|
@click="() => this.handleModalVisible(true)"
|
style="margin-left: 25px;"
|
>新建</a-button
|
>
|
</a-col>
|
<a-col :span="5" style="margin-left: 37%">
|
<a-form-model-item :wrapperCol="wrapperCol">
|
<a-select
|
placeholder="选择站点类型"
|
style="width: 240px;margin-top:4px"
|
@change="handleChange"
|
allow-clear
|
show-search
|
>
|
<a-select-option
|
v-for="(item, index) in stationLevel"
|
:key="index"
|
:value="index"
|
>
|
{{ item }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="5">
|
<a-form-model-item :wrapperCol="wrapperCol">
|
<a-input
|
v-model="searchName"
|
placeholder="请输入站点名称"
|
allow-clear
|
/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
></av-standard-table>
|
</div>
|
<a-modal
|
title="政府站点添加"
|
destroyOnClose
|
:visible="addShowOrHiddenFlag"
|
@ok="addOK"
|
@cancel="addCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="addForm"
|
:rules="rules"
|
ref="addRulesForm"
|
>
|
<a-form-model-item
|
has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="站点编号"
|
prop="guid"
|
>
|
<a-input
|
placeholder="请输入站点编号"
|
type="string"
|
v-model="addForm.guid"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name"
|
>
|
<a-input
|
placeholder="设备名称"
|
type="string"
|
v-model="addForm.name"
|
/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="经度"
|
prop="longitude"
|
>
|
<a-input
|
placeholder="请输入经度"
|
type="string"
|
v-model="addForm.longitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="纬度"
|
prop="latitude"
|
>
|
<a-input
|
placeholder="请输入纬度"
|
type="string"
|
v-model="addForm.latitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="位置"
|
has-feedback
|
prop="position"
|
>
|
<!-- v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空' }] }]"-->
|
<a-cascader
|
:options="areaData"
|
placeholder="选择城市"
|
@change="positionLevel"
|
labelInValue
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="站点类型"
|
prop="stationLevel"
|
>
|
<a-select
|
placeholder="选择站点类型"
|
type="string"
|
allow-clear
|
show-search
|
v-model="addForm.stationLevel"
|
>
|
<a-select-option
|
v-for="(item, index) in stationLevel"
|
:key="index"
|
:value="index"
|
>{{ item }}</a-select-option
|
>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="描述"
|
prop="desc"
|
>
|
<a-input placeholder="描述" type="string" v-model="addForm.desc" />
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
<a-modal
|
title="政府站点编辑"
|
destroyOnClose
|
:visible="editShowOrHiddenFlag"
|
@ok="editSave"
|
@cancel="editCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="editForm"
|
:rules="rules"
|
ref="editRulesForm"
|
>
|
<a-form-model-item
|
has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="站点编号"
|
prop="guid"
|
>
|
<a-input
|
placeholder="请输入站点编号"
|
type="string"
|
v-model="editForm.guid"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name"
|
>
|
<a-input
|
placeholder="设备名称"
|
type="string"
|
v-model="editForm.name"
|
/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="经度"
|
prop="longitude"
|
>
|
<a-input
|
placeholder="请输入经度"
|
type="string"
|
v-model="editForm.longitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="纬度"
|
prop="latitude"
|
>
|
<a-input
|
placeholder="请输入纬度"
|
type="string"
|
v-model="editForm.latitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="位置"
|
has-feedback
|
prop="position"
|
>
|
<!-- v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空' }] }]"-->
|
<a-cascader
|
v-model="editForm.position"
|
:options="areaData"
|
placeholder="双击选择城市"
|
@change="positionLevel"
|
labelInValue
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="站点类型"
|
prop="stationLevel"
|
>
|
<a-select
|
placeholder="选择站点类型"
|
type="string"
|
allow-clear
|
show-search
|
v-model="editForm.stationLevel"
|
>
|
<a-select-option
|
v-for="(item, index) in stationLevel"
|
:key="index"
|
:value="index"
|
>{{ item }}</a-select-option
|
>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="描述"
|
prop="desc"
|
>
|
<a-input placeholder="描述" type="string" v-model="editForm.desc" />
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
<a-modal
|
title="政府站点编辑"
|
destroyOnClose
|
:visible="editSiteShowOrHiddenFlag"
|
:rules="siteRules"
|
@ok="editSiteSave"
|
@cancel="editSiteCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="editSiteForm"
|
ref="editSiteRulesForm"
|
>
|
<a-form-model-item
|
has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="站点编号"
|
prop="guid"
|
>
|
<a-input
|
placeholder="请输入站点编号"
|
type="string"
|
v-model="editSiteForm.guid"
|
/>
|
</a-form-model-item>
|
<p class="errInfor">要求：更换站点编号时间为每小时45-50分之间!</p>
|
</a-form-model>
|
</a-modal>
|
</a-card>
|
</template>
|
|
<script lang="tsx">
|
import { Component, Vue, Watch } from "vue-property-decorator";
|
import org from "@/util/org";
|
import { get, post } from "@/util/request";
|
@Component({
|
components: {},
|
})
|
export default class govMonitorPoint extends Vue {
|
// 定义样式
|
private wrapperCol: any = {
|
sm: { span: 16 }, //控制文本框的长度
|
};
|
// 站点id查询条件
|
private stationLevelId: any = "";
|
// 列头
|
private columns: any[] = [
|
{
|
title: "序号",
|
dataIndex: "key",
|
key: "key",
|
align: "center",
|
customRender: (text: any, record: any, index: any) => `${index + 1}`,
|
width: 60,
|
},
|
{
|
title: "站点编号",
|
dataIndex: "guid",
|
},
|
|
{
|
title: "名称",
|
dataIndex: "name",
|
},
|
{
|
title: "经度",
|
dataIndex: "longitude",
|
},
|
{
|
title: "纬度",
|
dataIndex: "latitude",
|
},
|
{
|
title: "定位",
|
dataIndex: "position",
|
},
|
{
|
title: "站点类型",
|
dataIndex: "stationLevelName",
|
},
|
{
|
title: "描述",
|
dataIndex: "desc",
|
},
|
{
|
title: "操作",
|
customRender: this.opRender,
|
},
|
];
|
// 用于查询站点模糊查询
|
private searchName: string = "";
|
// 用于检验是否有数据
|
private tableLoading: boolean = false;
|
// 数据
|
private dataSource: any[] = [];
|
// 显示新增隐藏标识
|
private addShowOrHiddenFlag: boolean = false;
|
// 显示编辑隐藏标识
|
private editShowOrHiddenFlag: boolean = false;
|
|
private editSiteShowOrHiddenFlag: boolean = false;
|
// 存放地理位置信息
|
private areaData: any = JSON.parse(JSON.stringify(org));
|
// 指定新增和编辑规则
|
private rules: any = {
|
guid: [
|
{
|
required: true,
|
message: "设备编号不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
name: [
|
{ required: true, message: "名称不能为空", trigger: ["change", "blur"] },
|
],
|
longitude: [
|
{ required: true, message: "经度不能为空", trigger: ["change", "blur"] },
|
],
|
latitude: [
|
{ required: true, message: "纬度不能为空", trigger: ["change", "blur"] },
|
],
|
position: [
|
{
|
required: true,
|
message: "请选择定位级别",
|
trigger: ["change", "blur"],
|
},
|
],
|
stationLevel: [
|
{
|
required: true,
|
message: "请选择站点类型",
|
trigger: ["change", "blur"],
|
},
|
],
|
};
|
private siteRules: any = {
|
guid: [
|
{
|
required: true,
|
message: "设备编号不能为空",
|
trigger: ["change", "blur"],
|
},
|
],
|
};
|
// 政府站点类型
|
private stationLevel: any = {};
|
// 存放编辑前的数据record
|
private editBeforeRecord: any = null;
|
private editBeforeSiteRecord: any = null;
|
// 新增表单数据
|
private addForm: any = {
|
guid: "",
|
name: "",
|
longitude: "",
|
latitude: "",
|
position: [],
|
stationLevel: undefined,
|
desc: "",
|
};
|
// 编辑表单数据
|
private editForm: any = {
|
id: -1,
|
guid: "",
|
name: "",
|
longitude: "",
|
latitude: "",
|
position: [],
|
stationLevel: undefined,
|
desc: "",
|
};
|
// 编辑表单数据
|
private editSiteForm: any = {
|
id: -1,
|
guid: "",
|
};
|
// 分页数据
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 10,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
pageSizeOptions: ["10", "30", "60", "100"],
|
showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据
|
};
|
// 监听站点名称变化
|
@Watch("searchName", {
|
deep: true,
|
immediate: true,
|
})
|
private watchName(newVal: string, oldVal: string) {
|
this.searchName = newVal;
|
this.pagination.current = 1;
|
this.queryGovDatas();
|
}
|
// 生命周期函数
|
private created() {
|
this.selectDatas();
|
this.queryGovDatas();
|
}
|
// 监听分页数据下标变化
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current;
|
this.pagination.pageSize = pagination.pageSize;
|
this.pagination.total = pagination.total;
|
this.queryGovDatas();
|
}
|
//下拉查询框方法
|
private handleChange(selectedItems: any) {
|
if (selectedItems) {
|
this.stationLevelId = selectedItems;
|
} else {
|
this.stationLevelId = "";
|
}
|
this.pagination.current = 1;
|
this.queryGovDatas();
|
}
|
// 定位级别数据
|
private positionLevel(val: any, selectedOptions: any) {
|
if (selectedOptions && selectedOptions.length > 0) {
|
this.addForm.position = selectedOptions;
|
} else {
|
this.addForm.position = undefined;
|
}
|
}
|
// 获取下拉框数据
|
private selectDatas() {
|
get("dict/data/query?type=stationLevel ", {})
|
.then((res) => {
|
if (res.data.code === 0) {
|
this.stationLevel = res.data.data;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
// 查询所有站点信息
|
private queryGovDatas() {
|
get("govMonitorPoint/getGovMonitorPointByCondition", {
|
current: this.pagination.current,
|
size: this.pagination.pageSize,
|
name: this.searchName,
|
stationLevel: this.stationLevelId,
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.pagination.total = res.data.data.totalNumber;
|
this.pagination.current = res.data.data.current;
|
const govDatas = res.data.data.govMonitorPointList;
|
if (govDatas.length > 0) {
|
for (let i = 0; i < govDatas.length; i++) {
|
for (let j = 0; j < govDatas[i].position.length; j++) {
|
govDatas[i].stationLevelName = this.stationLevel[
|
govDatas[i].stationLevel
|
];
|
}
|
}
|
}
|
this.dataSource = govDatas;
|
}
|
});
|
}
|
// 新增显示
|
private handleModalVisible(flag: boolean) {
|
this.addShowOrHiddenFlag = flag;
|
}
|
// 新增成功
|
private addOK() {
|
this.$refs.addRulesForm.validate((valid: any) => {
|
if (valid) {
|
post("govMonitorPoint/insert", {
|
guid: this.addForm.guid, //政府站点编码
|
name: this.addForm.name, //名称
|
longitude: this.addForm.longitude, //经度
|
latitude: this.addForm.latitude, //纬度
|
provinceCode: this.addForm.position[0].value,
|
cityCode: this.addForm.position[1].value,
|
areaCode: this.addForm.position[2].value,
|
stationLevel: this.addForm.stationLevel,
|
desc: this.addForm.desc, //备注
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.pagination.current = 1;
|
this.$message.success(res.data.message);
|
this.queryGovDatas();
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
});
|
this.addShowOrHiddenFlag = false;
|
this.addForm = {
|
guid: "",
|
name: "",
|
longitude: "",
|
latitude: "",
|
position: [],
|
stationLevel: undefined,
|
desc: "",
|
};
|
this.addShowOrHiddenFlag = false;
|
}
|
});
|
}
|
// 新增取消
|
private addCancel() {
|
this.addForm = {
|
guid: "",
|
name: "",
|
longitude: "",
|
latitude: "",
|
position: [],
|
stationLevel: undefined,
|
desc: "",
|
};
|
this.addShowOrHiddenFlag = false;
|
}
|
// 编辑显示
|
private editShow(flag: boolean, record: any) {
|
this.editShowOrHiddenFlag = flag;
|
this.editBeforeRecord = record;
|
const positon = [];
|
positon.push(record.provinceCode);
|
positon.push(record.cityCode);
|
positon.push(record.areaCode);
|
this.editForm = {
|
id: record.id,
|
guid: record.guid,
|
name: record.name,
|
longitude: record.longitude,
|
latitude: record.latitude,
|
position: positon,
|
stationLevel: record.stationLevel,
|
desc: record.desc === undefined ? "" : record.desc,
|
};
|
}
|
// 编辑显示
|
private editSiteShow(flag: boolean, record: any) {
|
this.editSiteShowOrHiddenFlag = flag;
|
this.editBeforeSiteRecord = record;
|
const positon = [];
|
positon.push(record.provinceCode);
|
positon.push(record.cityCode);
|
positon.push(record.areaCode);
|
this.editSiteForm = {
|
id: record.id,
|
guid: record.guid,
|
};
|
}
|
// 编辑站点保存
|
private editSiteSave() {
|
this.$refs.editSiteRulesForm.validate((valid: any) => {
|
if (valid) {
|
const guid =
|
this.editSiteForm.guid === this.editBeforeSiteRecord.guid
|
? null
|
: this.editSiteForm.guid;
|
if (!guid) {
|
this.$message.warning("未修改！");
|
} else {
|
get("govMonitorPoint/updateGuid", {
|
id: this.editSiteForm.id,
|
guid,
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message);
|
this.editSiteForm = {
|
id: -1,
|
guid: "",
|
};
|
this.editSiteShowOrHiddenFlag = false;
|
this.queryGovDatas();
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
});
|
}
|
}
|
});
|
}
|
private editSiteCancel() {
|
this.editForm = {
|
id: -1,
|
guid: "",
|
};
|
this.editSiteShowOrHiddenFlag = false;
|
}
|
// 编辑保存
|
private editSave() {
|
this.$refs.editRulesForm.validate((valid: any) => {
|
if (valid) {
|
const name =
|
this.editForm.name === this.editBeforeRecord.name
|
? null
|
: this.editForm.name;
|
const guid =
|
this.editForm.guid === this.editBeforeRecord.guid
|
? null
|
: this.editForm.guid;
|
const longitude =
|
this.editForm.longitude === this.editBeforeRecord.longitude
|
? null
|
: this.editForm.longitude;
|
const latitude =
|
this.editForm.latitude === this.editBeforeRecord.latitude
|
? null
|
: this.editForm.latitude;
|
const position =
|
this.editForm.position[0] === this.editBeforeRecord.provinceCode &&
|
this.editForm.position[1] === this.editBeforeRecord.cityCode &&
|
this.editForm.position[2] === this.editBeforeRecord.areaCode
|
? null
|
: this.editForm.position;
|
const stationLevel =
|
this.editForm.stationLevel === this.editBeforeRecord.stationLevel
|
? null
|
: this.editForm.stationLevel;
|
const desc =
|
this.editBeforeRecord.desc === undefined
|
? this.editForm.desc === ""
|
? null
|
: this.editForm.desc
|
: this.editForm.desc === this.editBeforeRecord.desc
|
? null
|
: this.editForm.desc;
|
if (
|
!(
|
name ||
|
guid ||
|
longitude ||
|
latitude ||
|
position ||
|
stationLevel ||
|
desc
|
)
|
) {
|
this.$message.warning("未修改！");
|
} else {
|
post("govMonitorPoint/update", {
|
id: this.editForm.id,
|
guid,
|
name,
|
longitude,
|
latitude,
|
provinceCode: position === null ? null : position[0],
|
cityCode: position === null ? null : position[1],
|
areaCode: position === null ? null : position[2],
|
stationLevel,
|
desc,
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message);
|
this.editForm = {
|
id: -1,
|
guid: "",
|
name: "",
|
longitude: "",
|
latitude: "",
|
position: [],
|
stationLevel: undefined,
|
desc: "",
|
};
|
this.editShowOrHiddenFlag = false;
|
this.queryGovDatas();
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
});
|
}
|
}
|
});
|
}
|
// 编辑取消
|
private editCancel() {
|
this.editForm = {
|
id: -1,
|
guid: "",
|
name: "",
|
longitude: "",
|
latitude: "",
|
position: [],
|
stationLevel: undefined,
|
desc: "",
|
};
|
this.editShowOrHiddenFlag = false;
|
}
|
// 删除
|
private delete(record: any) {
|
post("govMonitorPoint/delete", {
|
id: record.id,
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message);
|
this.pagination.current = 1;
|
this.queryGovDatas();
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
});
|
}
|
// 数据操作方法
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a onClick={() => this.editShow(true, record)}> 编辑 </a>
|
<a-divider type="vertical" />
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.delete(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
<a-divider type="vertical" />
|
<a onClick={() => this.editSiteShow(true, record)}> 政府站点修改 </a>
|
</div>
|
);
|
}
|
}
|
</script>
|
|
<style scoped>
|
.errInfor {
|
text-align: center;
|
color: red;
|
font-size: 15px;
|
font-weight: 700;
|
}
|
</style>
|
