<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: "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: 0,
|
pageSize: 8,
|
showSizeChanger: false,
|
showQuickJumper: false
|
};
|
// 监听站点名称变化
|
@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.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>
|
