<template>
|
<div>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form @submit="handleSearch" layout="horizontal" :form="searchForm">
|
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
|
<a-button icon="plus" type="primary" @click="() => this.handleModalVisible(true)" style="margin-left: 25px;">
|
新建
|
</a-button>
|
<div style="float:right;display:flex">
|
<span style="margin-top:10px;margin-right:10px;font-size:14px">组织: </span>
|
<a-select
|
mode="multiple"
|
placeholder="选择组织(输入名称搜索)"
|
:value="selectedItems"
|
style="width: 240px;margin-top:4px"
|
@change="handleChange"
|
:filter-option="filterOption"
|
>
|
<a-select-option v-for="(item,index) in orgData" :key="index" :value="item.id">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
<a-form-item fieldDecoratorId="name" v-bind="searchFormLayout" style="width: 240px">
|
<a-input v-model="serch.name" placeholder="请输入角色名称或编号" />
|
</a-form-item>
|
</div>
|
</a-row>
|
</a-form>
|
</div>
|
<a-table :dataSource="dataSource" :selectedRows="selectedRows" :columns="columns" :loading="tableLoading" @tableChange="handlerTableChange" @selectChange="handlerSelectChange">
|
<!-- <template slot="organizationId" >
|
<div v-for="(item,index) in orgData" :key="index">{{item.name}}</div>
|
</template> -->
|
<!-- <template slot="region" >
|
<div v-for="(item,index) in regionData" :key="index">
|
{{item}}
|
</div>
|
</template> -->
|
</a-table>
|
</div>
|
</a-card>
|
|
<a-modal title="添加-站点" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">
|
<a-form style="margin-top: 8px" :form="createForm">
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" fieldDecoratorId="name" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入名称！', min: 1 }]}">
|
<a-input placeholder="请输入" v-model="saveData.name"/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="组织" fieldDecoratorId="organizationId" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择组织！' }]}">
|
<a-select
|
placeholder="选择组织(输入名称搜索)"
|
:value="selectedItems"
|
style="width: 240px;margin-top:4px"
|
@change="handleChange"
|
:filter-option="filterOption"
|
show-search
|
>
|
<a-select-option v-for="(item,index) in orgData" :key="index" :value="item">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="省/市/区" fieldDecoratorId="provinceCode" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择地区！'}]}">
|
<a-cascader :options="region" placeholder="选择地区" change-on-select @change="onChangeReginon" />
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="详细地址" fieldDecoratorId="address" >
|
<a-input placeholder="请输入" v-model="saveData.address"/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="经度" fieldDecoratorId="longitude" >
|
<a-input placeholder="请输入" v-model="saveData.longitude"/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="纬度" fieldDecoratorId="latitude" >
|
<a-input placeholder="请输入" v-model="saveData.latitude"/>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="备注" fieldDecoratorId="desc" >
|
<a-input placeholder="请输入" v-model="saveData.desc"/>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
|
<update-task-form :visible.sync="updateTaskFormVisible" :record="updateRecord" @ok="handleUpdateOk"></update-task-form>
|
|
<distribution-monitor :width="modelSize.width" :height="modelSize.height" :visible.sync="distributionMenuVisible" :record="updateRecord1" @ok="handleUpdateOk"></distribution-monitor>
|
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Model,
|
Watch
|
} from 'vue-property-decorator';
|
import {
|
State,
|
Mutation,
|
namespace,
|
} from 'vuex-class';
|
|
import moment from 'moment';
|
import { get, post } from "@/util/request";
|
import org from '../../util/org'
|
|
import { Observable, Subscription, BehaviorSubject } from 'rxjs';
|
|
import UpdateTaskForm from './components/UpdateTaskFormMonitor.vue';
|
import DistributionMonitor from './components/DistributionMonitor.vue'
|
|
import TestModal from './components/TestModal.vue';
|
|
const statusMap = ['default', 'processing', 'success', 'error'];
|
const status = ['关闭', '运行中', '已上线', '异常'];
|
const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
|
@Component({
|
components: {
|
UpdateTaskForm,
|
DistributionMonitor
|
},
|
})
|
export default class QueryList extends Vue {
|
private region:any
|
|
private searchForm: any = null;
|
|
private serch:any = {
|
name:''
|
}
|
// 省市区地区码
|
private regionCode:number[] = []
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5,
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 1,
|
},
|
};
|
|
private modelSize:any={
|
width:500,
|
height:500
|
}
|
|
private saveData:any={
|
name:'',
|
organizationId:'',
|
provinceCode:'',
|
cityCode:'',
|
areaCode:'',
|
longitude:'',
|
latitude:'',
|
address:'',
|
desc: '',
|
}
|
|
// 储存选择城市的值
|
private onChangeReginon(value){
|
this.regionCode = value
|
}
|
|
// 下拉查询框变量
|
private selectedItems:any[]=[]
|
|
// 下拉查询框
|
private filteredOptions(input:any,option:any) {
|
return (
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
);
|
}
|
|
//新建选择框，查询功能
|
filterOption(input, option) {
|
return (
|
option.componentOptions.children[0].text
|
.toLowerCase()
|
.indexOf(input.toLowerCase()) >= 0
|
);
|
}
|
|
//下拉查询框方法
|
private handleChange(selectedItems:any) {
|
this.selectedItems = selectedItems;
|
}
|
|
// 组件数据
|
private orgData:any = {}
|
|
// 获得所有组织
|
private getAllOrg(){
|
get("organization/queryNames", {}
|
).then(res => {
|
this.orgData = res.data.data.organizationVOs
|
})
|
}
|
|
@Watch('serch.name')
|
private watchsearchInform(newVal:string,oldval:string){
|
this.handleSearch()
|
}
|
|
private created() {
|
|
this.createForm = this.$form.createForm(this, {name: "devicesMonitorPoint"});
|
this.getAllOrg()
|
this.region = org
|
}
|
private expandForm: boolean = false;
|
|
private selectedRowKeys: any[] = [];
|
|
private selectedRows: any[] = [];
|
|
private tableLoading: boolean = false;
|
|
private moment: any = moment;
|
|
private dataSource: any[] = [];
|
|
private regionData:number[]=[]
|
|
private visibleCreateModal: boolean = false;
|
|
private updateTaskFormVisible: boolean = false;
|
|
private distributionMenuVisible: boolean = false;
|
|
private createForm: any = null;
|
|
private updateRecord: any = {};
|
|
private updateRecord1: any = {};
|
// 初始化站点信息
|
private monitorPoints:any = {}
|
|
private columns: any[] = [{
|
title: '名称',
|
dataIndex: 'name',
|
},
|
{
|
title: '组织',
|
dataIndex: 'organizationId',
|
// scopedSlots: { customRender: 'organizationId' },
|
},
|
{
|
title: '省市区',
|
dataIndex: 'tempRegionData',
|
// scopedSlots: { customRender: 'region' },
|
},
|
{
|
title: '地址',
|
dataIndex: 'address',
|
},
|
{
|
title: '经度',
|
dataIndex: 'longitude',
|
},
|
{
|
title: '纬度',
|
dataIndex: 'latitude',
|
},
|
{
|
title: '备注',
|
dataIndex: 'desc',
|
},
|
{
|
title: '操作',
|
customRender: this.opRender,
|
},
|
];
|
|
constructor() {
|
super();
|
}
|
|
get status() {
|
return status;
|
}
|
|
get statusMap() {
|
return statusMap;
|
}
|
|
get statuFilters() {
|
return [{
|
text: status[0],
|
value: 0,
|
},
|
{
|
text: status[1],
|
value: 1,
|
},
|
{
|
text: status[2],
|
value: 2,
|
},
|
{
|
text: status[3],
|
value: 3,
|
},
|
];
|
}
|
|
|
|
private regionFilters(value:any) {
|
if (!value) return ''
|
return org[value]
|
}
|
|
private handleModalVisible(isVisible: boolean): void {
|
this.visibleCreateModal = isVisible;
|
}
|
|
private toggleForm(): void {
|
this.expandForm = !this.expandForm;
|
}
|
|
private handleFormReset(): void {
|
this.serch.name = null
|
this.loadRuleData()
|
}
|
|
private handleSearch(): void {
|
get("monitorPoint/getMonitorPointByFuzzy",{
|
name:this.serch.name,
|
current: 1,
|
size: 100,
|
orderType:0
|
}).then(res=>{
|
this.dataSource = res.data.data.monitorPoints;
|
})
|
.catch(err=>{
|
console.log(err);
|
})
|
}
|
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
}
|
|
private testCallback(param: any) {
|
}
|
|
private handleUpdateModalVisible(visible: boolean, record: any): void {
|
this.updateTaskFormVisible = true;
|
this.updateRecord = record;
|
}
|
|
private handleUpdateModalVisible1(visible: boolean, record: any): void {
|
this.updateRecord1 = record;
|
setTimeout(()=>{
|
this.distributionMenuVisible = true;
|
},500)
|
}
|
|
private handleCreateModalOk() {
|
this.createForm.validateFields((err: any, fieldsValue: any) => {
|
if (err) {
|
return;
|
}
|
const name = this.createForm.getFieldValue('name');
|
const organizationId = this.selectedItems[0].id
|
const provinceCode = this.regionCode[0]?this.regionCode[0]:''
|
const cityCode = this.regionCode[1]?this.regionCode[1]:''
|
const areaCode = this.regionCode[2]?this.regionCode[2]:''
|
const longitude = this.createForm.getFieldValue('longitude');
|
const latitude = this.createForm.getFieldValue('latitude');
|
const address = this.createForm.getFieldValue('address');
|
const desc = this.createForm.getFieldValue('desc');
|
post('monitorPoint/insertOneMonitorPoint', {
|
name:name,
|
organizationId:organizationId,
|
provinceCode:provinceCode,
|
cityCode:cityCode,
|
areaCode:areaCode,
|
longitude:longitude,
|
latitude:latitude,
|
address:address,
|
desc: desc,
|
}).then((res: any) => {
|
if(res.data.code !== 0){
|
this.$message.warning(res.data.message,2)
|
} else {
|
this.createForm.resetFields();
|
this.visibleCreateModal = false;
|
this.$message.success(res.data.message)
|
this.loadRuleData();
|
}
|
}).catch((err)=>{
|
console.log(err);
|
})
|
});
|
}
|
|
private handleUpdateOk() {
|
this.loadRuleData();
|
}
|
|
private handleCreateModalCancel(): any {
|
this.visibleCreateModal = false;
|
}
|
|
private handlerSelectChange(arr1: any, arr2: any) {
|
this.selectedRows = arr2;
|
}
|
|
private handleMenuClick(e: any) {
|
}
|
|
private mounted() {
|
this.loadRuleData();
|
// this.menuData()
|
}
|
|
private loadRuleData() {
|
this.tableLoading = true;
|
get('monitorPoint/getAllMonitorPoint',{
|
current: 1,
|
size: 100,
|
orderType:0}).then((res) => {
|
this.dataSource = res.data.data.monitorPoints;
|
let tempMonitor = res.data.data.monitorPoints
|
for (let i = 0; i < tempMonitor.length; i++) {
|
tempMonitor[i].tempRegionData = tempMonitor[i].provinceCode[1] + tempMonitor[i].cityCode[1] + tempMonitor[i].areaCode[1]
|
tempMonitor[i].organizationId = tempMonitor[i].organizationId[1]
|
}
|
})
|
.finally(() => {
|
this.tableLoading = false;
|
});
|
}
|
|
|
|
private rightRender(text: string) {
|
return `${text} 万`;
|
}
|
|
private statusRender(text: any, record: any, index: number) {
|
return <a-badge status = {
|
statusMap[text]
|
}
|
text = {
|
status[text]
|
}
|
/>;
|
}
|
|
private updatedAtRender(text: string) {
|
return <span> {
|
moment(text).format('YYYY-MM-DD HH:mm:ss')
|
} </span>;
|
}
|
|
private deleteManageRole(record: any){
|
post('monitorPoint/deleteMonitorPoint',{id:record.id}).then((res)=>{
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
this.loadRuleData()
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
.catch(function (error) {
|
console.log('删除失败')
|
})
|
}
|
|
private opRender(text: string, record: any, index: number) {
|
return <div>
|
<a onClick = {
|
() => this.handleUpdateModalVisible(true, record)
|
} > 编辑 </a>
|
<a-divider type = 'vertical' />
|
<a-popconfirm title="确认删除吗？" ok-text="确定" cancel-text="取消" onConfirm={()=>this.deleteManageRole(record)}>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
<a-divider type = 'vertical' />
|
<a onClick = {
|
() => this.handleUpdateModalVisible1(true, record)
|
} >配置坐标</a>
|
</div>;
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
