<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
|
placeholder="选择组织(输入名称搜索)"
|
:value="selectedItems"
|
style="width: 240px;margin-top:4px"
|
@change="handleChange"
|
:filter-option="filteredOptions"
|
allow-clear
|
show-search
|
>
|
<a-select-option
|
v-for="(item, index) in orgData"
|
:key="index"
|
:value="item.id"
|
>
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
<a-form-item v-bind="searchFormLayout" style="width: 240px">
|
<a-input
|
v-model="serch.name"
|
placeholder="请输入站点名称"
|
allow-clear
|
/>
|
</a-form-item>
|
</div>
|
</a-row>
|
</a-form>
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:selectedRows="selectedRows"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@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> -->
|
</av-standard-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="名称"
|
has-feedback
|
>
|
<a-input
|
placeholder="请输入"
|
v-decorator="[
|
'name',
|
{ rules: [{ required: true, message: '请输入名称！', min: 1 }] },
|
]"
|
/>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="组织"
|
has-feedback
|
>
|
<a-select
|
v-decorator="[
|
'organizationId',
|
{ rules: [{ required: true, message: '请选择组织！' }] },
|
]"
|
placeholder="选择组织(输入名称搜索)"
|
style="width: 240px;margin-top:4px"
|
:filter-option="filteredOptions"
|
allow-clear
|
show-search
|
>
|
<a-select-option
|
v-for="(item, index) in orgData"
|
:key="index"
|
:value="item.id"
|
>
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="省/市/区"
|
has-feedback
|
>
|
<a-cascader
|
v-decorator="[
|
'provinceCode',
|
{ rules: [{ required: true, message: '请选择地区！' }] },
|
]"
|
:options="region"
|
placeholder="选择地区"
|
@change="onChangeReginon"
|
/>
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="详细地址"
|
>
|
<a-input v-decorator="['address']" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="经度"
|
>
|
<a-input v-decorator="['longitude']" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="纬度"
|
>
|
<a-input v-decorator="['latitude']" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="备注"
|
>
|
<a-input v-decorator="['desc']" placeholder="请输入" />
|
</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>
|
|
<pick-coordinate
|
:mapUrl="mapUrl"
|
:mapRecord="mapRecord"
|
v-if="!mapFlag"
|
@mapFlag="receiveFlag"
|
/>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";
|
|
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";
|
import PickCoordinate from "@/components/map/pickCoordinate.vue";
|
|
const statusMap = ["default", "processing", "success", "error"];
|
const status = ["关闭", "运行中", "已上线", "异常"];
|
const OPTIONS = ["Apples", "Nails", "Bananas", "Helicopters"];
|
@Component({
|
components: {
|
UpdateTaskForm,
|
DistributionMonitor,
|
PickCoordinate,
|
},
|
})
|
export default class QueryList extends Vue {
|
private region: any;
|
|
private searchForm: any;
|
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 10,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
pageSizeOptions: ["10", "30", "60", "100"],
|
showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据
|
};
|
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 mapRecord: any = {};
|
|
private mapUrl: string = "monitorPoint/updateMonitorPoint";
|
|
// 储存选择城市的值
|
private onChangeReginon(value: any) {
|
this.regionCode = value;
|
}
|
|
// 下拉查询框变量
|
private selectedItems: any[] = [];
|
|
// 下拉查询框
|
private filteredOptions(input: any, option: any) {
|
return (
|
option.componentOptions.children[0].text
|
.toLowerCase()
|
.indexOf(input.toLowerCase()) >= 0
|
);
|
}
|
|
//下拉查询框方法
|
private handleChange(selectedItems: any) {
|
this.selectedItems = selectedItems;
|
this.handleSearch();
|
}
|
|
// 组件数据
|
private orgData: any = {};
|
|
// 获得所有组织
|
private getAllOrg() {
|
get("organization/queryNames", {}).then((res) => {
|
this.orgData = res.data.data.organizationVOs.reverse();
|
});
|
}
|
|
@Watch("serch.name")
|
private watchsearchInform(newVal: string, oldval: string) {
|
this.pagination.current = 1;
|
this.handleSearch();
|
}
|
|
private created() {
|
this.createForm = this.$form.createForm(this, {
|
name: "devicesMonitorPoint",
|
});
|
this.searchForm = 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: "key",
|
key: "key",
|
align: "center",
|
customRender: (text: any, record: any, index: any) => `${index + 1}`,
|
width: 60,
|
},
|
{
|
title: "名称",
|
dataIndex: "name",
|
},
|
{
|
title: "组织",
|
dataIndex: "organizationName",
|
width: "10%",
|
// 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 handleSearch(): void {
|
get("monitorPoint/getMonitorPointByFuzzy", {
|
name: this.serch.name,
|
organization_id: this.selectedItems,
|
current: this.pagination.current,
|
size: this.pagination.pageSize,
|
orderType: 1,
|
})
|
.then((res) => {
|
this.dataSource = res.data.data.monitorPoints;
|
let tempMonitor = res.data.data.monitorPoints;
|
this.pagination.total = res.data.data.totalNumber;
|
this.pagination.current = res.data.data.current;
|
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].organizationName = tempMonitor[i].organizationId[1];
|
tempMonitor[i].organizationId = tempMonitor[i].organizationId[0];
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
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.loadRuleData();
|
}
|
|
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 organizationId = this.createForm.getFieldValue("organizationId");
|
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);
|
return;
|
}
|
this.createForm.resetFields();
|
this.visibleCreateModal = false;
|
this.$message.success(res.data.message, 2);
|
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 showMap(flag: boolean, record: any) {
|
this.mapFlag = flag;
|
this.mapRecord = record;
|
}
|
|
private mapFlag: boolean = true;
|
|
private receiveFlag(flag: boolean) {
|
this.mapFlag = true;
|
}
|
|
@Watch("mapFlag")
|
private monitorMapFlag(newVal: boolean, oldVal: boolean) {
|
this.mapFlag = newVal;
|
}
|
|
private loadRuleData() {
|
this.tableLoading = true;
|
get("monitorPoint/getAllMonitorPoint", {
|
current: this.pagination.current,
|
size: this.pagination.pageSize,
|
orderType: 1,
|
})
|
.then((res) => {
|
if (res.data.code === 0) {
|
this.dataSource = res.data.data.monitorPoints;
|
let tempMonitor = res.data.data.monitorPoints;
|
this.pagination.total = res.data.data.totalNumber;
|
this.pagination.current = res.data.data.current;
|
let tempRegionData;
|
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].organizationName = tempMonitor[i].organizationId[1];
|
tempMonitor[i].organizationId = tempMonitor[i].organizationId[0];
|
}
|
}
|
})
|
.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("删除成功");
|
this.loadRuleData();
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
})
|
.catch((error) => {
|
this.$message.warning(error);
|
});
|
}
|
|
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.showMap(false, record)}>配置坐标</a>
|
</div>
|
);
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
.mapShow {
|
display: none;
|
}
|
</style>
|
