Merge branch 'server_ui_xiaoyao' into server_ui_dongxiaodong

server_ui_dongxiaodong
dongxiaodong 2024-03-31 14:46:13 +08:00
commit 9ff5e6e6f5
8 changed files with 357 additions and 34 deletions

View File

@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 车联管理系统
# 开发环境配置
ENV = 'development'

View File

@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 系统
# 生产环境配置
ENV = 'production'

View File

@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 智能车联管理系统
NODE_ENV = production

View File

@ -1,8 +1,8 @@
{
"name": "muyu",
"version": "3.6.3",
"description": "若依管理系统",
"author": "若依",
"description": "车联网管理系统",
"author": "车联",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",

View File

@ -0,0 +1,66 @@
import request from '@/utils/request'
// 查询电子围栏列表
export function fenceList(data) {
return request({
url: '/couplet/fence/fenceList',
method: 'post',
data
})
}
/**
* 新增电子围栏列表
*/
export function fenceAdd(data) {
return request({
url: '/couplet/fence/fenceAdd',
method: 'post',
data
})
}
/**
* 修改电子围栏列表
*/
export function fenceUpdate(data) {
return request({
url: '/couplet/fence/fenceUpdate',
method: 'post',
data
})
}
/**
* 电子围栏删除
* @param fenceUpdate
* @returns {*}
*/
export function fenceDelete(data) {
return request({
url: '/couplet/fence/'+data,
method: 'delete'
})
}
/**
* 电子围栏停用
* @param data
* @returns {*}
*/
export function changeFenceStatus(data) {
return request({
url: '/couplet/fence/fenceState/',
method: 'post',
data
})
}
/**
* 查询标识
* @param data
* @returns {*}
*/
export function queryByLogo() {
return request({
url: '/couplet/logo/queryByLogo',
method: 'post'
})
}

View File

@ -1,4 +1,121 @@
<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 align="center" label="状态" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.fenceState"
active-value="0"
inactive-value="1"
@change="handleFenceStateChange(scope.row)"
></el-switch>
</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="围栏标识" prop="logoName" width="100"/>
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
<template slot-scope="scope">
<el-button
v-hasPermi="['system:role:edit']"
icon="el-icon-edit"
size="mini"
type="text"
@click="handleUpdate(scope.row)"
>修改
</el-button>
<el-button
v-hasPermi="['system:role:remove']"
icon="el-icon-delete"
size="mini"
type="text"
@click="handleFenceDelete(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="logoIds" @change="handleCheckedCitiesChange">
<el-checkbox v-for="logo in logo" :label="logo.logoName" :key="logo.logoId">{{logo.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>
<div class="mapBox">
<!-- 使用高德地图的组件-->
<el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 600px">
@ -20,13 +137,23 @@
></el-amap-info-window>
</el-amap>
</div>
</div>
</template>
<script>
import {fenceList, changeFenceStatus, queryByLogo, fenceDelete, fenceAdd} from "@/api/couplet/fence";
import {changeRoleStatus} from "@/api/system/role";
import log from "@/views/monitor/job/log.vue";
export default {
components: {},
data() {
return {
//
loading: true,
//
unit: "xxxxx政府司法局",
address: "xx省xx市xxxxx大道东433号",
@ -40,20 +167,137 @@ export default {
content: "自定义标题",
offset: [10, 12],
},
//
queryParams: {},
fence: [{}],
fenceUpdateRequest:{},
fenceInsertRequest:{},
dialogFormVisible: false,
formLabelWidth: '120px',
checkAll: false,
logo: [],
logoIds:{},
// cities: cityOptions,
isIndeterminate: true,
fenceChangeState:{}
};
},
async mounted() {
this.initMap();
},
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;
},
handleCheckedCitiesChange(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(){
this.dialogFormVisible = false;
fenceAdd(this.fenceInsertRequest).then(
res=>{
this.$message.success("新增成功")
}
)
},
/**
* 查询多选框
* @param row
*/
findByLogo(){
queryByLogo().then(
res=>{
this.logo=res.data
console.log(res)
}
)
},
//
handleFenceStateChange(row) {
// let text = row.status === "0" ? "" : "";
// this.$modal.confirm('"' + text + '"').then(function () {
this.$modal.confirm('确认要修改状态吗?').then(function () {
return changeFenceStatus(row);
}).then(() => {
this.$modal.msgSuccess( "成功");
// this.$modal.msgSuccess(text + "");
}).catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
/**
* 电子围栏删除
* @param map
*/
handleFenceDelete(row){
console.log(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("删除失败");
})
},
// parseTime,
//
initMap(map) {
this.markers.push({
// position: [116.407387, 39.904179],
position: [116.39, 39.9],
// position: this.currentPosition,
});
this.windows.push({
position: [116.39, 39.9],
// position: this.currentPosition,
@ -81,13 +325,26 @@ export default {
// });
},
},
created() {
this.queryByFenceList()
this.findByLogo()
},
// - 访DOM",
mounted() {
this.initMap();
},
};
</script>
<style lang="scss" scoped>
.mapBox {
position: relative;
width: 100%;
width: 50%;
height: 600px;
}
.fence-container {
padding: 20px;
}
</style>

View File

@ -44,7 +44,7 @@
</el-row>
<el-row :gutter="20">
<el-col :lg="12" :sm="24" style="padding-left: 20px">
<h2>若依后台管理框架</h2>
<h2>车联后台管理框架</h2>
<p>
一直想做一款后台管理系统看了很多优秀的开源项目但是发现没有合适自己的于是利用空闲休息时间开始自己写一套后台系统如此有了若依管理系统她可以用于所有的Web应用程序如网站管理后台网站会员中心CMSCRMOA等等当然您也可以对她进行深度定制以做出更强系统所有前端后台代码封装过后十分精简易上手出错概率低同时支持移动客户端访问系统会陆续更新一些实用功能
</p>

View File

@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
const name = process.env.VUE_APP_TITLE || '车联管理系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口