修改车辆管理前台效果

dev.car
法外狂徒张三 2024-10-08 11:12:52 +08:00
parent 4daecfda92
commit d7d89d9042
13 changed files with 925 additions and 2 deletions

62
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "3.6.3", "version": "3.6.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0", "axios": "0.24.0",
"clipboard": "2.0.8", "clipboard": "2.0.8",
@ -27,6 +28,7 @@
"skywalking-client-js": "^0.11.0", "skywalking-client-js": "^0.11.0",
"sortablejs": "1.10.2", "sortablejs": "1.10.2",
"vue": "2.6.12", "vue": "2.6.12",
"vue-amap": "^0.5.10",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.5.5", "vue-cropper": "0.5.5",
"vue-meta": "2.4.0", "vue-meta": "2.4.0",
@ -72,6 +74,11 @@
"node": "8 || 10 || 12 || 14 || 16 || 17" "node": "8 || 10 || 12 || 14 || 16 || 17"
} }
}, },
"node_modules/@amap/amap-jsapi-loader": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
},
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@ -4558,6 +4565,14 @@
"tslib": "^2.0.3" "tslib": "^2.0.3"
} }
}, },
"node_modules/camelcase": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz",
"integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/caniuse-api": { "node_modules/caniuse-api": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz", "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -16950,6 +16965,14 @@
"integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
"dev": true "dev": true
}, },
"node_modules/uppercamelcase": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
"integrity": "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==",
"dependencies": {
"camelcase": "^1.2.1"
}
},
"node_modules/uri-js": { "node_modules/uri-js": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz", "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
@ -17194,6 +17217,19 @@
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==", "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details." "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details."
}, },
"node_modules/vue-amap": {
"version": "0.5.10",
"resolved": "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz",
"integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
"dependencies": {
"uppercamelcase": "^1.1.0"
},
"engines": {
"core-js": "^2.5.0",
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
},
"node_modules/vue-count-to": { "node_modules/vue-count-to": {
"version": "1.0.13", "version": "1.0.13",
"resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz", "resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz",
@ -18817,6 +18853,11 @@
"js-message": "1.0.7" "js-message": "1.0.7"
} }
}, },
"@amap/amap-jsapi-loader": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
},
"@ampproject/remapping": { "@ampproject/remapping": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@ -22240,6 +22281,11 @@
"tslib": "^2.0.3" "tslib": "^2.0.3"
} }
}, },
"camelcase": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz",
"integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g=="
},
"caniuse-api": { "caniuse-api": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz", "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -32087,6 +32133,14 @@
"integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
"dev": true "dev": true
}, },
"uppercamelcase": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
"integrity": "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==",
"requires": {
"camelcase": "^1.2.1"
}
},
"uri-js": { "uri-js": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz", "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
@ -32288,6 +32342,14 @@
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.12.tgz", "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
}, },
"vue-amap": {
"version": "0.5.10",
"resolved": "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz",
"integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
"requires": {
"uppercamelcase": "^1.1.0"
}
},
"vue-count-to": { "vue-count-to": {
"version": "1.0.13", "version": "1.0.13",
"resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz", "resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz",

View File

@ -36,6 +36,7 @@
"url": "https://gitee.com/y_project/MuYu-Cloud.git" "url": "https://gitee.com/y_project/MuYu-Cloud.git"
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0", "axios": "0.24.0",
"clipboard": "2.0.8", "clipboard": "2.0.8",
@ -54,6 +55,7 @@
"skywalking-client-js": "^0.11.0", "skywalking-client-js": "^0.11.0",
"sortablejs": "1.10.2", "sortablejs": "1.10.2",
"vue": "2.6.12", "vue": "2.6.12",
"vue-amap": "^0.5.10",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.5.5", "vue-cropper": "0.5.5",
"vue-meta": "2.4.0", "vue-meta": "2.4.0",

View File

@ -0,0 +1,43 @@
import request from '@/utils/request'
// 查询电子围栏列表
export function listCorpuscle() {
return request({
url: '/car/carRail/list',
method: 'get'
})
}
// // 查询电子围栏详细
// export function getCorpuscle(id) {
// return request({
// url: '/carRail/corpuscle/' + id,
// method: 'get'
// })
// }
// 新增电子围栏
export function addCorpuscle(data) {
return request({
url: '/car/carRail',
method: 'post',
data: data
})
}
// 修改电子围栏
export function updateCorpuscle(data) {
return request({
url: '/car/carRail',
method: 'put',
data: data
})
}
// 删除电子围栏
export function delCorpuscle(id) {
return request({
url: '/car/carRail/' + id,
method: 'delete'
})
}

View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询围栏组列表
export function listFence() {
return request({
url: '/car/fence/list',
method: 'get',
})
}
// 查询围栏组详细
export function getFence(id) {
return request({
url: '/car/fence/' + id,
method: 'get'
})
}
// 新增围栏组
export function addFence(data) {
return request({
url: '/car/fence',
method: 'post',
data: data
})
}
// 修改围栏组
export function updateFence(data) {
return request({
url: '/car/fence',
method: 'put',
data: data
})
}
// 删除围栏组
export function delFence(id) {
return request({
url: '/car/fence/' + id,
method: 'delete'
})
}

View File

@ -0,0 +1,12 @@
import request from '@/utils/request'
// 查询围栏组
export function listFence() {
return request({
url: '/car/fence/list',
method: 'get',
})
}

View File

@ -21,7 +21,7 @@ export function getUser(userId) {
// 新增用户 // 新增用户
export function addUser(data) { export function addUser(data) {
return request({ return request({
url: '/saas/user', url: '/car/user',
method: 'post', method: 'post',
data: data data: data
}) })

View File

@ -145,6 +145,14 @@ export default {
{ {
value: '/car/breakdown', value: '/car/breakdown',
label: '车辆故障' label: '车辆故障'
},
{
value: '/firm/strategy',
label: '预警策略'
},
{
value: '/firm/logs',
label: '预警日志'
} }
], ],
activeTab: '', activeTab: '',

View File

@ -0,0 +1,294 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="围栏编码" prop="fenceCode">
<el-input
v-model="queryParams.fenceCode"
placeholder="请输入围栏编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="围栏名称" prop="fenceName">
<el-input
v-model="queryParams.fenceName"
placeholder="请输入围栏名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="启用状态(1.启用 2.停用)" prop="state">
<el-input
v-model="queryParams.state"
placeholder="请输入启用状态(1.启用 2.停用)"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['carRail:corpuscle:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['carRail:corpuscle:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['carRail:corpuscle:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['carRail:corpuscle:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="corpuscleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="自增主键" align="center" prop="id" />
<el-table-column label="围栏编码" align="center" prop="fenceCode" />
<el-table-column label="围栏名称" align="center" prop="fenceName" />
<el-table-column label="围栏类型(1.驶入 2.驶出)" align="center" prop="fenceType" />
<el-table-column label="围栏位置" align="center" prop="fencePosition" />
<el-table-column label="启用状态(1.启用 2.停用)" align="center" prop="state" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['carRail:corpuscle:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['carRail:corpuscle:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改电子围栏对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="围栏编码" prop="fenceCode">
<el-input v-model="form.fenceCode" placeholder="请输入围栏编码" />
</el-form-item>
<el-form-item label="围栏名称" prop="fenceName">
<el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
</el-form-item>
<el-form-item label="围栏位置" prop="fencePosition">
<el-input v-model="form.fencePosition" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="启用状态(1.启用 2.停用)" prop="state">
<el-input v-model="form.state" placeholder="请输入启用状态(1.启用 2.停用)" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listCorpuscle, getCorpuscle, delCorpuscle, addCorpuscle, updateCorpuscle } from "/src/api/carRail/corpuscle";
export default {
name: "Corpuscle",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
corpuscleList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
fenceCode: null,
fenceName: null,
fenceType: null,
fencePosition: null,
state: null
},
//
form: {},
//
rules: {
fenceCode: [
{ required: true, message: "围栏编码不能为空", trigger: "blur" }
],
fenceType: [
{ required: true, message: "围栏类型(1.驶入 2.驶出)不能为空", trigger: "change" }
],
fencePosition: [
{ required: true, message: "围栏位置不能为空", trigger: "blur" }
],
state: [
{ required: true, message: "启用状态(1.启用 2.停用)不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询电子围栏列表 */
getList() {
this.loading = true;
listCorpuscle(this.queryParams).then(response => {
this.corpuscleList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
fenceCode: null,
fenceName: null,
fenceType: null,
fencePosition: null,
state: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加电子围栏";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getCorpuscle(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改电子围栏";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateCorpuscle(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addCorpuscle(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除电子围栏编号为"' + ids + '"的数据项?').then(function() {
return delCorpuscle(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('carRail/corpuscle/export', {
...this.queryParams
}, `corpuscle_${new Date().getTime()}.xlsx`)
}
}
};
</script>

View File

@ -0,0 +1,289 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="围栏组编码" prop="groupCode">
<el-input
v-model="queryParams.groupCode"
placeholder="请输入围栏组编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="围栏组名称" prop="groupName">
<el-input
v-model="queryParams.groupName"
placeholder="请输入围栏组名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="启用状态" prop="state">
<el-input
v-model="queryParams.state"
placeholder="请输入启用状态"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['fence:fence:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['fence:fence:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['fence:fence:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['fence:fence:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="自增主键" align="center" prop="id" />
<el-table-column label="围栏组编码" align="center" prop="groupCode" />
<el-table-column label="围栏组名称" align="center" prop="groupName" />
<el-table-column label="围栏组类型" align="center" prop="groupType" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" />
<el-table-column label="更新人" align="center" prop="updateBy" />
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column label="启用状态" align="center" prop="state" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['fence:fence:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['fence:fence:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改围栏组对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="围栏组编码" prop="groupCode">
<el-input v-model="form.groupCode" placeholder="请输入围栏组编码" />
</el-form-item>
<el-form-item label="围栏组名称" prop="groupName">
<el-input v-model="form.groupName" placeholder="请输入围栏组名称" />
</el-form-item>
<el-form-item label="启用状态" prop="state">
<el-input v-model="form.state" placeholder="请输入启用状态" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listFence, getFence, delFence, addFence, updateFence } from "/src/api/fence/fence";
export default {
name: "Fence",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
fenceList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
groupCode: null,
groupName: null,
groupType: null,
state: null,
},
//
form: {},
//
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询围栏组列表 */
getList() {
this.loading = true;
listFence(this.queryParams).then(response => {
this.fenceList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
groupCode: null,
groupName: null,
groupType: null,
state: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加围栏组";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getFence(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改围栏组";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateFence(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addFence(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除围栏组编号为"' + ids + '"的数据项?').then(function() {
return delFence(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('fence/fence/export', {
...this.queryParams
}, `fence_${new Date().getTime()}.xlsx`)
}
}
};
</script>

View File

@ -0,0 +1,155 @@
<template>
<!-- 围栏数据以表格的形式展示 -->
<el-table :data="fencingData" border style="width: 100%">
<el-table-column prop="name" label="围栏名称" width="150">
<template slot-scope="scope">
<el-input v-model="fencingData[scope.$index].name"></el-input>
</template>
</el-table-column>
<el-table-column prop="path" label="坐标数据">
<template slot-scope="scope">
<el-button type="primary" size="small"
@click.native.prevent="PathCopy(scope.$index, fencingData)">
复制</el-button>
<div class="input-card">
<h4>电子围栏绘制</h4>
<div class="input-item">
<input type="button" class="btn" value="开始绘制" id="start" @click="startDrawPolygon()" />
<input type="button" class="btn" value="清空" id="pause" @click="clearPolygon()" />
</div>
<div class="input-item">
<input type="button" class="btn" value="结束并保存" id="resume" @click="stopAndSave()" />
<input type="button" class="btn" value="重新绘制" id="stop" @click="redrawPolygon()" />
</div>
</div>
<div id="container"></div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click.native.prevent="hold(scope.$index, fencingData)">
编辑</el-button>
<el-button type="text" size="small"
@click.native.prevent="hold1(scope.$index, fencingData)">
保存</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, fencingData)" type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<!--地图容器-->
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
name: "gaode",
data(){
return {
// map: null,
// mouseTool: null,
// polyType: {
// strokeColor: "#FF33FF",
// strokeOpacity: 1,
// strokeWeight: 4,
// strokeOpacitys: 0.2,
// fillColor: "#1791fc",
// fillOpacity: 0.4,
// // 线 'dashed'
// strokeStyle: "solid"
// // strokeStyledashed
// // strokeDasharray: [30,10],
// },
// polygonList: [],
// savedPolygon: []
// },
fencingData: [{
name: '北京电子围栏',
path: [
[116.388565, 39.907388],
[116.383565, 39.902388],
[116.383565, 39.912388]
]
}],
}
},
methods: {
initMap() {
AMapLoader.load({
key: "49aadf24c5cbc3a8ed85257398cbbc1d", //Key
version: '1.4.15', // JSAPI 1.4.15
resizeEnable: true,
plugins: ['AMap.MypType','PolyEditor'], //使'AMap.Scale'
}).then((AMap) => {
this.map = new AMap.Map("container", { //id
viewMode: "3D", //3D
zooms: [4,18],
vizoom: 6, //
center: [112.602725, 37.876636], //
});
this.map.plugin(['AMap.MypType','AMap.Scale','AMap.HawkEye','AMap.PolyEditor'], () => {
this.map.addControl(new AMap.MypType());//
this.map.addControl(new AMap.Scale());//
this.map.addControl(new AMap.HawkEye());//
this.map.addControl(new AMap.PolyEditor());//
},)
//
// var weixing=new AMap.TileLayer.Satellite({
// zIndex: 10
// });
// this.map.add(weixing);
}).catch(e => {
console.log(e);
})
},
},
mounted() {
//DOM
this.$nextTick(() => {
this.initMap();
});
},
created() {
//
//
// initMap created
if(this.fencingData.length>0){
for (let i = 0; i < this.fencingData.length; i++) {
//poly
this.poly(this.fencingData[i])
}
}
}
}
</script>
<style scoped>
#container {
width: 60%;
height: 400px;
margin: 50px auto;
border: 2px solid red;
}
</style>

View File

@ -262,6 +262,11 @@ export default {
created() { created() {
this.getList(); this.getList();
}, },
mounted() {
this.$store.dispatch('app/toggleSideBarHide',true);
document.querySelector('.navbar').style.display = 'none';
document.querySelector('.tags-view-container').style.display = 'none';
},
methods: { methods: {
/** 查询预警日志列表 */ /** 查询预警日志列表 */
getList() { getList() {

View File

@ -228,7 +228,11 @@ export default {
rule: {} rule: {}
}; };
}, },
mounted() {
this.$store.dispatch('app/toggleSideBarHide',true);
document.querySelector('.navbar').style.display = 'none';
document.querySelector('.tags-view-container').style.display = 'none';
},
created() { created() {
this.queryParams.strategyId = this.$route.query.id this.queryParams.strategyId = this.$route.query.id
this.getList(); this.getList();

View File

@ -188,6 +188,11 @@ export default {
created() { created() {
this.getList(); this.getList();
}, },
mounted() {
this.$store.dispatch('app/toggleSideBarHide',true);
document.querySelector('.navbar').style.display = 'none';
document.querySelector('.tags-view-container').style.display = 'none';
},
methods: { methods: {
/** 查询预警策略列表 */ /** 查询预警策略列表 */
getList() { getList() {