<template>
|
<div>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form-model layout="horizontal">
|
<a-row :gutter="[8,0]">
|
<a-col :span="2">
|
<a-button
|
icon="plus"
|
type="primary"
|
@click="() => this.handleModalVisible(true)"
|
style="margin-left: 25px;"
|
>新建
|
</a-button>
|
</a-col>
|
<a-col :span="12">
|
<a-button
|
icon="search"
|
type="primary"
|
@click="() => this.handleModalHistoryVisible(true)"
|
style="margin-left: 25px;"
|
>设备所属历史组织
|
</a-button>
|
</a-col>
|
<a-col :span="4">
|
<a-form-model-item :labelCol="{span:16}" :wrapperCol="{span:20}">
|
<a-select
|
placeholder="选择组织(输入名称搜索)"
|
allow-clear
|
show-search
|
style="width:200px"
|
:filter-option="filterOption"
|
@change="handleChange"
|
>
|
<!-- @change="handleChange" -->
|
<a-select-option v-for="(item,index) in orgData" :key="index" :value="item.id">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="6">
|
<a-form-model-item
|
:labelCol="{span:2}" :wrapperCol="{span:10}"
|
fieldDecoratorId="name"
|
>
|
<a-input v-model="serchName" placeholder="请输入设备名称或者mac"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:columns="columns"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
></av-standard-table>
|
<!-- :loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
@selectChange="handlerSelectChange"-->
|
</div>
|
|
</a-card>
|
|
<a-modal
|
title="添加特殊设备"
|
destroyOnClose
|
:visible="visibleCreateModal"
|
@ok="handleCreateModalOk"
|
@cancel="handleCreateModalCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="addData"
|
:rules="rules"
|
ref="addRulesForm"
|
>
|
<a-form-model-item has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name">
|
<a-input
|
placeholder="设备名称"
|
type="string"
|
v-model="addData.name"
|
/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="mac"
|
prop="mac"
|
>
|
<a-input
|
placeholder="mac地址"
|
type="string"
|
v-model="addData.mac"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="组织"
|
prop="organization"
|
>
|
<a-select
|
placeholder="选择组织（输入名称搜索）"
|
type="string"
|
allow-clear
|
show-search
|
:filter-option="filterOption"
|
v-model="addData.organization"
|
>
|
<a-select-option v-for="(item,index) in orgData" :key="index" :value = 'item.id'>{{ item.name }}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="设备型号"
|
prop="version"
|
>
|
<a-select
|
placeholder="选择型号（输入名称搜索）"
|
type="string"
|
allow-clear
|
:filter-option="filterOption"
|
show-search
|
v-model="addData.version"
|
>
|
<a-select-option v-for="(item,index) in versions" :key="index" :value = 'item.id'>{{ item.name }}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="设备类型"
|
prop="type"
|
>
|
<a-select
|
placeholder="选择类型"
|
type="string"
|
allow-clear
|
:filter-option="filterOption"
|
show-search
|
v-model="addData.type"
|
>
|
<a-select-option v-for="(item,index) in dictDeviceType" :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="维护人"
|
>
|
<a-select
|
placeholder="选择维护人"
|
mode="multiple"
|
type="string"
|
allow-clear
|
:filter-option="filterOption"
|
v-model="addData.operators"
|
>
|
<a-select-option
|
v-for="(item,index) in operators"
|
:key="index"
|
:value = 'item.id'
|
>{{ item.user_name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" prop="positionBack">
|
<a-cascader :options="areaData" placeholder="双击选择城市(为显示城市下的政府站点)" change-on-select
|
@change="positionLevel" labelInValue/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="政府站点"
|
>
|
<a-select
|
placeholder="政府站点"
|
v-model="addData.guid"
|
allow-clear
|
:filter-option="filterOption"
|
show-search
|
>
|
<a-select-option
|
v-for="(item,index) in govMonitors"
|
:key="index"
|
:value="item.guid"
|
>{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-form-model>
|
|
<!-- <pick-coordinate :mapUrl="mapUrl" :mapRecord="mapRecord" v-if="!mapFlag" @mapFlag="receiveFlag"/>-->
|
</a-modal>
|
|
<a-modal
|
title="编辑特殊设备"
|
destroyOnClose
|
:visible="editFlag"
|
@ok="handleEditModalOk"
|
@cancel="handleEditModalCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:form="form"
|
:model="editData"
|
:rules="rules"
|
ref="editRulesForm"
|
>
|
<a-form-model-item has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name">
|
<a-input
|
placeholder="设备名称"
|
type="string"
|
v-model="editData.name"
|
/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="mac"
|
prop="mac"
|
>
|
<a-input
|
placeholder="mac地址"
|
type="string"
|
v-model="editData.mac"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="组织"
|
prop="organization"
|
>
|
<a-select
|
placeholder="选择组织（输入名称搜索）"
|
type="string"
|
allow-clear
|
show-search
|
:filter-option="filterOption"
|
v-model="editData.organization"
|
>
|
<a-select-option v-for="(item,index) in orgData" :key="index" :value = 'item.id'>{{ item.name }}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="设备型号"
|
prop="version"
|
>
|
<a-select
|
placeholder="选择型号（输入名称搜索）"
|
type="string"
|
allow-clear
|
:filter-option="filterOption"
|
show-search
|
v-model="editData.version"
|
>
|
<a-select-option v-for="(item,index) in versions" :key="index" :value = 'item.id'>{{ item.name }}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="设备类型"
|
prop="type"
|
>
|
<a-select
|
placeholder="选择类型"
|
type="string"
|
allow-clear
|
:filter-option="filterOption"
|
show-search
|
v-model="editData.type"
|
>
|
<a-select-option v-for="(item,index) in dictDeviceType" :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="维护人"
|
>
|
<a-select
|
placeholder="选择维护人"
|
mode="multiple"
|
type="string"
|
allow-clear
|
:filter-option="filterOption"
|
v-model="editData.operators"
|
>
|
<a-select-option
|
v-for="(item,index) in operators"
|
:key="index"
|
:value = 'item.id'
|
>{{ item.user_name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="位置" prop="positionBack">
|
<a-cascader :options="areaData" placeholder="双击选择城市(为显示城市下的政府站点)" change-on-select
|
@change="positionLevel" labelInValue/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="政府站点"
|
>
|
<a-select
|
placeholder="政府站点"
|
v-model="editData.guid"
|
allow-clear
|
:filter-option="filterOption"
|
show-search
|
>
|
<a-select-option
|
v-for="(item,index) in govMonitors"
|
:key="index"
|
:value="item.guid"
|
>{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-form-model>
|
|
<!-- <pick-coordinate :mapUrl="mapUrl" :mapRecord="mapRecord" v-if="!mapFlag" @mapFlag="receiveFlag"/>-->
|
</a-modal>
|
<Calibration :caliRecord="caliRecord" :wFlag="visibleFlag" @cFlag="turnFlag"/>
|
<history-table :visible="historyFlag" :orgData="orgData" @hFlag="turnHFlag"/>
|
|
</div>
|
|
</template>
|
|
<script lang="tsx">
|
import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";
|
|
import { get, post } from "@/util/request";
|
import UpdateTaskForm from "./components/UpdateTaskFormRole.vue";
|
import DistributionMenu from "./components/DistributionMenu.vue";
|
import Calibration from '@/components/device/calibration.vue';
|
import HistoryTable from '@/components/specialDevice/historyTable.vue';
|
import org from "@/util/org";
|
|
const statusMap = ["default", "processing", "success", "error"];
|
const status = ["关闭", "运行中", "已上线", "异常"];
|
|
@Component({
|
components: {
|
UpdateTaskForm,
|
DistributionMenu,
|
Calibration,
|
HistoryTable
|
}
|
})
|
export default class SpecialDevice extends Vue {
|
|
// 存放国控站点数据
|
private govMonitors: any[] = []
|
|
// 联动省市区数据
|
private areaData: any = JSON.parse(JSON.stringify(org))
|
private form: any = null
|
private columns: any[] = [
|
{
|
title: "名称",
|
dataIndex: "name"
|
},
|
{
|
title: "mac",
|
dataIndex: "mac"
|
},
|
{
|
title: "型号",
|
dataIndex: "version.name"
|
},
|
{
|
title: "当前组织",
|
dataIndex: "organization.name"
|
},
|
{
|
title: "政府站点",
|
dataIndex: "govMonitorPoint.name"
|
},
|
{
|
title: "维护人",
|
dataIndex: "operates"
|
},
|
{
|
title: "设备类型",
|
dataIndex: "specialType.name"
|
},
|
{
|
title: "操作",
|
customRender: this.opRender
|
}
|
];
|
// 定位级别数据
|
private positionLevel(val: any) {
|
var code = val[val.length-1]
|
this.getGovPointByArea(code)
|
}
|
|
// 根据定位级别获取政府站点
|
private getGovPointByArea(code: any) {
|
get('govMonitorPoint/govMonitorPoints', {
|
regionCode: code
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.govMonitors = res.data.data
|
}
|
})
|
}
|
//存放分页数据
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 8,
|
showSizeChanger: false,
|
showQuickJumper: false
|
};
|
|
// 存放组织查询的id
|
private orgId: any = null
|
|
// 双向绑定的add数据
|
private addData: any = {
|
name: '',
|
mac: '',
|
organization: undefined,
|
version: undefined,
|
type: undefined,
|
operators: [],
|
guid: undefined
|
}
|
|
// 双向绑定的edit数据
|
private editData: any = {
|
name: '',
|
mac: '',
|
organization: undefined,
|
version: undefined,
|
type: undefined,
|
operators: [],
|
guid: undefined
|
}
|
|
// 用于模糊查询
|
private serchName: string = ''
|
|
// 组织数据
|
private orgData: any = []
|
|
// 新增显示隐藏标识
|
private visibleCreateModal: boolean = false
|
|
// 历史设备隐藏显示标识
|
private historyFlag: boolean = false
|
|
|
// 存放初始数据
|
private dataSource: any[] = []
|
|
// 用于存放字典数据
|
private dictDeviceType: any = {}
|
|
//维护人
|
private operators: any[] = [];
|
|
// 型号
|
private versions: any[] =[]
|
|
//规则指定
|
private rules: any = {
|
name: [
|
{required: true, message: '名称不能为空', trigger: ['change', 'blur']},
|
],
|
mac: [
|
{required: true, message: 'mac不能为空', trigger: ['change', 'blur']},
|
],
|
organization: [
|
{required: true, message: '监控站点不能为空', trigger: ['change', 'blur']},
|
],
|
version: [
|
{required: true, message: '设备型号不能为空', trigger: ['change', 'blur']},
|
],
|
type: [
|
{required: true, message: '设备型号不能为空', trigger: ['change', 'blur']},
|
]
|
}
|
|
// 监听分页数据下标变化
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current
|
this.getCurrentOrgData()
|
}
|
|
//下拉组织数据
|
private handleChange(selectedItems:any) {
|
if (selectedItems === undefined) {
|
this.orgId = null
|
}else {
|
this.orgId = selectedItems;
|
}
|
this.getCurrentOrgData()
|
}
|
|
private filterOption(input: any, option: any) {
|
return (
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
);
|
}
|
|
@Watch('serchName',{
|
deep: true
|
})
|
private watchSerchName(newVal: string, oldVal: string) {
|
this.pagination.current = 1
|
this.getCurrentOrgData()
|
}
|
|
// 初始进入页面
|
private created() {
|
// this.form = this.$form.createForm(this, { name: "specialDevice" });
|
// this.getAllOrg()
|
this.getCurrentOrgData()
|
this.getDropDownData()
|
}
|
|
|
//新建 ，调取初始单位，转换单位
|
private getDropDownData(){
|
//初始加载特殊设备类型
|
get("dict/data/query?type=specialDeviceType ", {})
|
.then(res => {
|
if (res.data.code === 0) {
|
this.dictDeviceType = res.data.data
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
//初始加载型号
|
get("device/versions", {})
|
.then(res => {
|
this.versions = res.data.data.reverse();
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
//初始加载维护人
|
get("device/operators", {})
|
.then(res => {
|
this.operators = res.data.data;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
// 初始加载所有组织
|
get("organization/queryNames", {}).then(res => {
|
this.orgData = res.data.data.organizationVOs.reverse()
|
})
|
}
|
|
// 新增显示
|
private handleModalVisible(flag: any) {
|
this.getGovPointByArea('')
|
this.visibleCreateModal = flag
|
}
|
|
|
// 历史数据窗口显示
|
private handleModalHistoryVisible(flag: boolean) {
|
this.historyFlag = flag
|
}
|
|
// 获取所有显示数据
|
private getCurrentOrgData() {
|
get('specialDevice/getSpecialDeviceByCondition',{
|
current: this.pagination.current,
|
size:this.pagination.pageSize,
|
organization_id: this.orgId,
|
keyword: this.serchName
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
const specialDevices = res.data.data.specialDevices
|
// 处理维护人数组，以字符串方式显示
|
specialDevices.forEach((item: any) => {
|
let operates = ''
|
if (item.operates) {
|
for (let i = 0; i < item.operates.length; i++) {
|
operates += item.operates[i].name+'、'
|
}
|
}
|
if (operates.length > 0) {
|
operates = operates.substr(0, operates.length - 1);
|
}
|
item.operates = operates
|
})
|
this.pagination.total = res.data.data.totalNumber;
|
this.pagination.current = res.data.data.current;
|
|
this.dataSource = specialDevices
|
}
|
})
|
}
|
|
// 新增保存
|
private handleCreateModalOk() {
|
this.$refs.addRulesForm.validate((valid: any) => {
|
if (valid) {
|
post('specialDevice/insert',
|
{
|
name: this.addData.name,
|
mac: this.addData.mac,
|
organizationId: this.addData.organization,
|
deviceVersionId: this.addData.version,
|
specialType: this.addData.type,
|
operateIds: this.addData.operators.length === 0 ? null : JSON.stringify(this.addData.operators).substr(1,JSON.stringify(this.addData.operators).length-2),
|
guid: this.addData.guid
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.pagination.current = 1
|
this.getCurrentOrgData()
|
this.$message.success(res.data.message)
|
this.visibleCreateModal = false
|
this.addData = {
|
name: '',
|
mac: '',
|
organization: undefined,
|
version: undefined,
|
type: undefined,
|
operators: []
|
}
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
|
this.visibleCreateModal = false
|
// 双向绑定的add数据
|
this.addData = {
|
name: '',
|
mac: '',
|
organization: undefined,
|
version: undefined,
|
type: undefined,
|
operators: []
|
}
|
}else {
|
return;
|
}
|
})
|
}
|
|
// 新增取消
|
private handleCreateModalCancel() {
|
this.visibleCreateModal = false
|
this.addData = {
|
name: '',
|
mac: '',
|
organization: undefined,
|
version: undefined,
|
type: undefined,
|
operators: []
|
}
|
}
|
|
// 编辑设备
|
private editFlag: boolean = false
|
private editRecord: any = {}
|
private handleEditModalVisible(flag: boolean, record: any) {
|
this.getGovPointByArea('')
|
this.editRecord = record
|
this.editData.name = record.name
|
this.editData.mac = record.mac
|
this.editData.organization = record.organizationId
|
this.editData.type = record.specialType.dataKey
|
this.editData.version = record.deviceVersionId
|
if (record.operates !== '') {
|
const operateIds = record.operateIds.split(',')
|
const ops = []
|
for (let i = 0; i < operateIds.length; i++) {
|
ops.push(Number(operateIds[i]))
|
}
|
this.editData.operators = ops
|
} else {
|
this.editData.operators = []
|
}
|
this.editData.guid = record.govMonitorPoint.guid
|
this.editFlag = flag
|
}
|
// 编辑确认
|
private handleEditModalOk() {
|
this.$refs.editRulesForm.validate((valid: any) => {
|
if (valid) {
|
let name = this.editData.name === this.editRecord.name ? null : this.editData.name
|
let mac = this.editData.mac === this.editRecord.mac ? null : this.editData.mac
|
let organizationId = this.editData.organization === this.editRecord.organizationId ? null : this.editData.organization
|
let deviceVersionId = this.editData.version === this.editRecord.deviceVersionId ? null : this.editData.version
|
let specialType = this.editData.type === this.editRecord.specialType.dataKey ? null : this.editData.type
|
let operateIds = null
|
if (this.editRecord.operateIds || this.editData.operators.length > 0) {
|
operateIds = JSON.stringify(this.editData.operators).substr(1,JSON.stringify(this.editData.operators).length - 2) === this.editRecord.operateIds
|
? null : JSON.stringify(this.editData.operators).substr(1,JSON.stringify(this.editData.operators).length - 2)
|
}
|
let guid = this.editData.guid === this.editRecord.govMonitorPoint.guid ? null : this.editData.guid
|
if (!(name || mac || organizationId || deviceVersionId || specialType || (operateIds === '' || operateIds) || guid)) {
|
this.$message.warning('未修改！')
|
}else {
|
post('specialDevice/update',{
|
id: this.editRecord.id,
|
name,
|
mac,
|
organizationId,
|
deviceVersionId,
|
specialType,
|
operateIds,
|
guid
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.getCurrentOrgData()
|
this.$message.success(res.data.message)
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
this.editFlag = false
|
}
|
}else {
|
return
|
}
|
})
|
}
|
|
// 编辑取消
|
private handleEditModalCancel() {
|
this.editFlag = false
|
}
|
|
// 删除设备
|
private deleteDevice(record: any) {
|
post('specialDevice/delete',{
|
id: record.id
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
this.pagination.current = 1
|
this.getCurrentOrgData()
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
}
|
|
// 配置校准值
|
private visibleFlag: boolean = false
|
private caliRecord: any = null
|
private showCalibration(record: any) {
|
this.visibleFlag = true
|
this.caliRecord = record
|
}
|
// 隐藏弹出框
|
private turnFlag(flag: boolean) {
|
this.visibleFlag = false
|
}
|
// 隐藏弹出框
|
private turnHFlag(flag: boolean) {
|
this.historyFlag = flag
|
}
|
|
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a onClick={() => this.handleEditModalVisible(true, record)}>
|
{" "}
|
编辑{" "}
|
</a>
|
<a-divider type="vertical"/>
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.deleteDevice(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
<a-divider type="vertical"/>
|
|
<a-dropdown>
|
<a class="ant-dropdown-link">
|
更多 <a-icon type="down"/></a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a onClick={() =>this.showCalibration(record) }>配置校准值</a>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</div>
|
)
|
;
|
}
|
|
|
}
|
</script>
|
|
<style lang="less">
|
.mapShow {
|
display: none;
|
}
|
|
.tableList {
|
.tableListOperator {
|
margin-bottom: 16px;
|
|
button {
|
margin-right: 8px;
|
}
|
}
|
}
|
|
.modalStyle {
|
.ant-modal-content {
|
width: 1000px;
|
}
|
|
.ant-form-item {
|
margin-bottom: 0px;
|
}
|
|
.ant-form-explain {
|
display: none;
|
min-height: 0;
|
}
|
}
|
|
|
</style>
|
