390 lines
12 KiB
Vue
390 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<br>
|
||
<el-form ref="queryParams" :inline="true" :model="queryParams" size="small">
|
||
<el-form-item label="围栏名称" prop="roleName">
|
||
<el-input
|
||
v-model="queryParams.fenceName"
|
||
clearable
|
||
placeholder="请输入围栏名称"
|
||
style="width: 240px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="状态" prop="status">
|
||
<el-select v-model="queryParams.fenceState" placeholder="请选择活动区域">
|
||
<el-option label="启用" value="0"></el-option>
|
||
<el-option label="停用" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
<el-button icon="el-icon-refresh-left" size="mini" type="danger" @click="refreshList" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template>
|
||
<el-button type="info" @click="dialogFormVisible = true">新增</el-button>
|
||
</template>
|
||
|
||
<el-table :data="fence">
|
||
<el-table-column label="围栏名称" prop="fenceName" width="120"/>
|
||
<el-table-column label="围栏经纬度" prop="fenceLongitudeLatitude" width="150"/>
|
||
<el-table-column label="围栏描述" prop="fenceDescription" width="150"/>
|
||
<el-table-column
|
||
label="围栏状态">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px" v-if="scope.row.fenceState == 0">已启用</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.fenceState == 1">已停用</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="创建时间" prop="createTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" label="最近修改时间" prop="updateTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="维护人" prop="maintainerName" width="100"/>
|
||
|
||
<el-table-column
|
||
label="出行状态">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px" v-if="scope.row.fenceCondition == 0">驶入</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.fenceCondition == 1">驶出</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="围栏标识" prop="logoName" width="100"/>
|
||
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-hasPermi="['business:fence:fenceUpdate']"
|
||
icon="el-icon-edit"
|
||
size="mini"
|
||
type="text"
|
||
@click="handleFenceUpdate(scope.row)"
|
||
>编辑电子围栏
|
||
</el-button>
|
||
<el-button
|
||
v-hasPermi="['business:fence:fenceState']"
|
||
v-if="scope.row.fenceState==1"
|
||
icon="el-icon-check"
|
||
size="mini"
|
||
type="text"
|
||
@click="handleStateChange(scope.row)"
|
||
>启用
|
||
</el-button>
|
||
<el-button
|
||
v-hasPermi="['business:fence:fenceState']"
|
||
v-if="scope.row.fenceState==0"
|
||
icon="el-icon-close"
|
||
size="mini"
|
||
type="text"
|
||
@click="handleFenceStateChange(scope.row)"
|
||
>停用
|
||
</el-button>
|
||
<el-button
|
||
v-hasPermi="['business:fence:fenceDelete']"
|
||
icon="el-icon-delete"
|
||
size="mini"
|
||
type="text"
|
||
@click="handleFenceDelete(scope.row)"
|
||
>删除
|
||
</el-button>
|
||
<el-button
|
||
v-hasPermi="['business:fence:fenceDelete']"
|
||
icon="el-icon-edit"
|
||
size="mini"
|
||
type="text"
|
||
@click="handleUpdate(scope.row)"
|
||
>修改电子围栏
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="queryParams.pageNum"
|
||
:page-sizes="[1, 3, 5, 10]"
|
||
:page-size="queryParams.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="400">
|
||
</el-pagination>
|
||
</div>
|
||
|
||
|
||
<!-- Form -->
|
||
<el-dialog title="新增电子围栏" :visible.sync="dialogFormVisible">
|
||
<el-form :model="fenceInsertRequest">
|
||
<el-form-item label="围栏名称" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceInsertRequest.fenceName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="电子围栏描述信息" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceInsertRequest.fenceDescription" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="维护负责人" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceInsertRequest.maintainerName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<template>
|
||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
||
<div style="margin: 15px 0;"></div>
|
||
<el-checkbox-group v-model="fenceInsertRequest.logoIds" @change="handleChange">
|
||
<el-checkbox v-for="item in logo" :key="item.logoId" :label="item.logoId" >{{item.logoName}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addFence">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
|
||
<el-dialog title="修改电子围栏" :visible.sync="dialogFormVisible2">
|
||
<el-form :model="fenceUpdateRequest">
|
||
<el-form-item label="围栏编号" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.fenceId" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="围栏名称" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.fenceName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="经纬度" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.fenceLongitudeLatitude" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="电子围栏描述信息" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.fenceDescription" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="电子围栏创建时间" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.createTime" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="电子围栏修改时间" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.updateTime" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="维护负责人" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.maintainerName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="状态" :label-width="formLabelWidth">
|
||
<el-input v-model="fenceUpdateRequest.fenceState" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="运行状态" :label-width="formLabelWidth">
|
||
<el-select v-model="fenceUpdateRequest.fenceCondition" placeholder="请选择运行状态">
|
||
<el-option label="驶入" value="0"></el-option>
|
||
<el-option label="驶出" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="updateFence">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {fenceList, changeFenceStatus, queryByLogo, fenceDelete, fenceAdd, fenceUpdate} from "@/api/couplet/fence";
|
||
import path from "path";
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
// 查询参数
|
||
queryParams: {},
|
||
fence: [{}],
|
||
fenceUpdateRequest:{},
|
||
fenceInsertRequest:{
|
||
logoIds:[]
|
||
},
|
||
dialogFormVisible: false,
|
||
dialogFormVisible2: false,
|
||
formLabelWidth: '120px',
|
||
checkAll: false,
|
||
logo: [
|
||
{
|
||
logoId:'',
|
||
logoName:'',
|
||
}
|
||
],
|
||
checkedLogo: [],
|
||
isIndeterminate: true,
|
||
fenceChangeState:{}
|
||
};
|
||
},
|
||
methods: {
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.queryByFenceList();
|
||
},
|
||
/**
|
||
* 列表按钮
|
||
*/
|
||
queryByFenceList(){
|
||
let queryParams = this.queryParams;
|
||
fenceList(queryParams).then(
|
||
res=>{
|
||
this.$message.success("查询成功")
|
||
this.fence=res.data.rows
|
||
}
|
||
)
|
||
},
|
||
/**
|
||
* 重置
|
||
*/
|
||
resetQuery(){
|
||
this.queryParams.fenceState='';
|
||
this.queryParams.fenceName='';
|
||
},
|
||
/**
|
||
* 刷新列表
|
||
*/
|
||
refreshList(){
|
||
this.queryByFenceList()
|
||
},
|
||
/**
|
||
* 全选
|
||
* @param val
|
||
*/
|
||
handleCheckAllChange(val) {
|
||
this.checkedCities = val ? this.logo : [];
|
||
this.isIndeterminate = false;
|
||
},
|
||
handleChange(value) {
|
||
// let checkedCount = value.length;
|
||
// this.checkAll = checkedCount === this.logo.length;
|
||
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.logo.length;
|
||
},
|
||
/**
|
||
* 分页
|
||
* @param val
|
||
*/
|
||
handleSizeChange(val) {
|
||
this.queryParams.pageSize = val
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.queryParams.pageNum = val
|
||
this.queryByFenceList()
|
||
},
|
||
/**
|
||
* 新增数据
|
||
*/
|
||
addFence(){
|
||
fenceAdd(this.fenceInsertRequest).then(
|
||
res=>{
|
||
this.$message.success("新增成功")
|
||
}
|
||
)
|
||
this.dialogFormVisible = false;
|
||
},
|
||
/**
|
||
* 查询多选框
|
||
* @param row
|
||
*/
|
||
findByLogo(){
|
||
queryByLogo().then(
|
||
res=>{
|
||
this.logo=res.data
|
||
}
|
||
)
|
||
},
|
||
// 围栏状态修改
|
||
handleFenceStateChange(row) {
|
||
debugger
|
||
if (row.fenceState === 0){
|
||
row.fenceState = 1
|
||
this.$modal.confirm('确认要停用状态吗？').then(function () {
|
||
return changeFenceStatus(row);
|
||
}).then(() => {
|
||
this.$modal.msgSuccess( "停用成功");
|
||
})
|
||
}
|
||
},
|
||
handleStateChange(row) {
|
||
/**
|
||
* 启用
|
||
*/
|
||
if (row.fenceState === 1) {
|
||
row.fenceState = 0
|
||
this.$modal.confirm('确认要启用状态吗？').then(function () {
|
||
return changeFenceStatus(row);
|
||
}).then(() => {
|
||
this.$modal.msgSuccess("启用成功");
|
||
})
|
||
|
||
}
|
||
},
|
||
/**
|
||
* 电子围栏删除
|
||
* @param map
|
||
*/
|
||
handleFenceDelete(row){
|
||
var fenceId = row.fenceId;
|
||
this.$modal.confirm('确认要修改编号为'+fenceId+'的信息吗？').then(function () {
|
||
return fenceDelete(fenceId)
|
||
}).then(() => {
|
||
this.$modal.msgSuccess("删除成功啦!");
|
||
this.queryByFenceList()
|
||
}).catch(function () {
|
||
this.$modal.msgError("删除失败");
|
||
})
|
||
},
|
||
/**
|
||
* 编辑电子围栏图形
|
||
*/
|
||
handleFenceUpdate(row){
|
||
this.$router.push({path: '/business/fence/container', query: {drawGraph: row}})
|
||
},
|
||
handleUpdate(row){
|
||
this.dialogFormVisible2=true;
|
||
this.fenceUpdateRequest=row
|
||
|
||
},
|
||
/**
|
||
* 修改电子围栏
|
||
*/
|
||
updateFence(){
|
||
fenceUpdate(this.fenceUpdateRequest).then(
|
||
res=>{
|
||
this.$message.success("修改成功")
|
||
this.dialogFormVisible2=false;
|
||
}
|
||
)
|
||
}
|
||
},
|
||
created() {
|
||
this.queryByFenceList()
|
||
this.findByLogo()
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mapBox {
|
||
position: relative;
|
||
width: 50%;
|
||
height: 600px;
|
||
}
|
||
|
||
.fence-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
</style>
|