功能优化
parent
cfde67f531
commit
dbbb06e814
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 MiB After Width: | Height: | Size: 6.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 39 KiB |
|
|
@ -39,6 +39,12 @@ export const constantRouterMap = [
|
|||
// component: () => import('@/views/flowschemes/add')
|
||||
// }]
|
||||
// },
|
||||
{
|
||||
path: '/helpdocument',
|
||||
name: 'helpdocument',
|
||||
meta: { title: '系统文档', icon: 'zhuyeicon', sortNo: 0 }, // iconfont icon-
|
||||
component: () => import('@/views/documentation/index')
|
||||
},
|
||||
{
|
||||
path: '/index', // 控制台
|
||||
name: 'layout',
|
||||
|
|
@ -51,12 +57,7 @@ export const constantRouterMap = [
|
|||
name: 'navigation',
|
||||
meta: { title: '导航页', icon: 'zhuyeicon', sortNo: 0 }, // iconfont icon-
|
||||
component: () => import('@/views/navigation/index')
|
||||
},{
|
||||
path: '/helpdocument',
|
||||
name: 'helpdocument',
|
||||
meta: { title: '系统文档', icon: 'zhuyeicon', sortNo: 0 }, // iconfont icon-
|
||||
component: () => import('@/views/documentation/index')
|
||||
}
|
||||
},
|
||||
]
|
||||
},{
|
||||
path: '/gridman', // 网格化管理
|
||||
|
|
@ -75,6 +76,11 @@ export const constantRouterMap = [
|
|||
name: 'gridman_record',
|
||||
meta: { title: '进山记录', icon: 'zhuyeicon', sortNo: 0 }, // iconfont icon-
|
||||
component: () => import('@/views/gridman/record/index')
|
||||
},{
|
||||
path: '/gridman_grid',
|
||||
name: 'gridman_grid',
|
||||
meta: { title: '网格员', icon: 'zhuyeicon', sortNo: 0 }, // iconfont icon-
|
||||
component: () => import('@/views/gridman/grid/index')
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,754 @@
|
|||
<template>
|
||||
<div class="grid-container">
|
||||
<div class="operate-container">
|
||||
<!-- <el-input type="text" size="mini" style="width:300px;margin-right:14px;" placeholder='请输入搜索关键字'></el-input> -->
|
||||
<!-- <el-button icon="el-icon-search" size="mini" type="default">查询</el-button> -->
|
||||
<el-button icon="el-icon-plus" size="mini" type="primary" @click="addDialog">添加</el-button>
|
||||
<el-button icon="el-icon-edit" size="mini" type="primary" @click="createDialog">编辑</el-button>
|
||||
<el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteWg">删除</el-button>
|
||||
</div>
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="4" style="margin-right:0px;height: calc( 100vh - 190px);">
|
||||
<div
|
||||
style="background:#1a274b;padding-top:20px;padding-left:20px;height:100%;width: calc( 100% - 10px);overflow-y:auto;">
|
||||
<el-tree :data="data" default-expand-all :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20" style="background:#1a274b;height: calc( 100vh - 190px);">
|
||||
<el-table :data="tableData" size="mini" height=" " border style="width: 100%;height: 100%;"
|
||||
@selection-change="handleSelectionChange">
|
||||
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="areaName" label="网格名称">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="households" label="户数">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="peopleNum" label="人数">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="phone" label="联系电话">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="politicalOutlook" label="身份">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="userName" label="网格员姓名">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="userType" label="网格员类型">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<!-- <div class="page-container">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNum"
|
||||
:page-sizes="[20,50,100, 200, 300, 400]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div> -->
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog :title="titleStr" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
|
||||
<el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="网格名称：" prop="areaName">
|
||||
<el-input v-model="ruleForm.areaName"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="户数：" prop="households">
|
||||
<el-input type="number" v-model="ruleForm.households"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="人数：" prop="peopleNum">
|
||||
<el-input type="number" v-model="ruleForm.peopleNum"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="网格员名称：" prop="userName">
|
||||
<el-input type="text" v-model="ruleForm.userName"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系电话：" prop="phone">
|
||||
<el-input type="text" v-model="ruleForm.phone"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
<el-form-item label="身份证号：" prop="cardNo">
|
||||
<el-input type="text" v-model="ruleForm.cardNo"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="政治面貌：" prop="politicalOutlook">
|
||||
<el-select v-model="ruleForm.politicalOutlook" placeholder="请选择">
|
||||
<el-option label="群众" value="群众"></el-option>
|
||||
<el-option label="中共党员" value="中共党员"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学历：" prop="education">
|
||||
<el-select v-model="ruleForm.education" placeholder="请选择">
|
||||
<el-option label="小学" value="小学"></el-option>
|
||||
<el-option label="初中" value="初中"></el-option>
|
||||
<el-option label="高中" value="高中"></el-option>
|
||||
<el-option label="专科" value="专科"></el-option>
|
||||
<el-option label="本科" value="本科"></el-option>
|
||||
<el-option label="研究生" value="研究生"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="网格员类型：" prop="userType">
|
||||
<el-select v-model="ruleForm.userType" placeholder="请选择">
|
||||
<el-option v-for="item in WGYTypesList" :label="item.descprtion" :value="item.descprtion" :key="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="退伍军人：" prop="veteran">
|
||||
<el-checkbox v-model="ruleForm.veteran"></el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注信息：" prop="remake">
|
||||
<el-input type="text" v-model="ruleForm.remake"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')" v-if="typeName == 'add'">立即创建</el-button>
|
||||
<el-button type="primary" @click="createForm('ruleForm')" v-else>保存</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMethodCommon } from '../../../api/common'
|
||||
// import { getOrgTree, getGridUser, getGridUserInfo, getWGYTypes, editGrid, addGrid, DeleteGrid } from '../../api/monitor'
|
||||
import { validateMobile, validID, validateStock } from './widget/validate.js'
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
"areaId": 0,
|
||||
"areaName": "",
|
||||
"areaType": 0,
|
||||
"createId": "",
|
||||
"households": 0,
|
||||
"peopleNum": 0,
|
||||
"remake": "",
|
||||
"pId": 0,
|
||||
"userId": 0,
|
||||
"cardNo": "",
|
||||
"userName": "",
|
||||
"userType": "",
|
||||
"politicalOutlook": "",
|
||||
"education": "",
|
||||
"veteran": false,
|
||||
"phone": "",
|
||||
"imaUrl": ""
|
||||
},
|
||||
rules: {
|
||||
areaName: [
|
||||
{ required: true, message: '网格名称不能为空', trigger: 'blur' },
|
||||
],
|
||||
households: [
|
||||
{ required: true, message: '户数', trigger: 'blur' },
|
||||
{ validator: validateStock.bind(this), trigger: 'blur' }
|
||||
],
|
||||
peopleNum: [
|
||||
{ required: true, message: '人数', trigger: 'blur' },
|
||||
{ validator: validateStock.bind(this), trigger: 'blur' }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: '网格员名称不能为空', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '联系电话不能为空', trigger: 'blur' },
|
||||
{ validator: validateMobile.bind(this), trigger: 'blur' }
|
||||
],
|
||||
cardNo: [
|
||||
{ required: true, message: '身份证号不能为空', trigger: 'blur' },
|
||||
{ validator: validID.bind(this), trigger: 'blur' }
|
||||
],
|
||||
politicalOutlook: [
|
||||
{ required: true, message: '政治面貌不能为空', trigger: 'blur' },
|
||||
],
|
||||
education: [
|
||||
{ required: true, message: '学历不能为空', trigger: 'blur' },
|
||||
],
|
||||
userType: [
|
||||
{ required: true, message: '网格员类型不能为空', trigger: 'blur' },
|
||||
],
|
||||
veteran: [
|
||||
{ required: true, message: '退伍军人不能为空', trigger: 'blur' },
|
||||
]
|
||||
},
|
||||
dialogVisible: false,
|
||||
total: 100,
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
},
|
||||
data: null,
|
||||
defaultProps: {
|
||||
children: 'child',
|
||||
label: 'areaName'
|
||||
},
|
||||
tableData: [],
|
||||
checkTreeId: null,
|
||||
selectIdList: [],
|
||||
WGYTypesList: [],
|
||||
typeName: 'add'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTree();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
var _this = this
|
||||
console.log(this.ruleForm)
|
||||
this.ruleForm.pId = this.checkTreeId
|
||||
this.ruleForm.households = Number(this.ruleForm.households)
|
||||
this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
addGrid(_this.ruleForm).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success(res.data.msg);
|
||||
_this.dialogVisible = false
|
||||
_this.getUserList({ id: _this.checkTreeId });
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
createForm() {
|
||||
var _this = this
|
||||
console.log(this.ruleForm)
|
||||
this.ruleForm.areaId = this.selectIdList[0]
|
||||
this.ruleForm.pId = this.checkTreeId
|
||||
this.ruleForm.households = Number(this.ruleForm.households)
|
||||
this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
editGrid(_this.ruleForm).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success(res.data.msg);
|
||||
_this.dialogVisible = false
|
||||
_this.getUserList({ id: _this.checkTreeId });
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getTypes() {
|
||||
var _this = this
|
||||
getWGYTypes().then((res) => {
|
||||
console.log(res.data.data)
|
||||
_this.WGYTypesList = res.data.data
|
||||
})
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
this.selectIdList = []
|
||||
e.forEach(item => {
|
||||
this.selectIdList.push(item.id)
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => { });
|
||||
},
|
||||
addDialog() {
|
||||
this.dialogVisible = true;
|
||||
this.titleStr = '添加'
|
||||
this.typeName = 'add'
|
||||
this.getTypes()
|
||||
this.ruleForm = {
|
||||
"areaId": 0,
|
||||
"areaName": "",
|
||||
"areaType": 0,
|
||||
"createId": "",
|
||||
"households": 0,
|
||||
"peopleNum": 0,
|
||||
"remake": "",
|
||||
"pId": 0,
|
||||
"userId": 0,
|
||||
"cardNo": "",
|
||||
"userName": "",
|
||||
"userType": "",
|
||||
"politicalOutlook": "",
|
||||
"education": "",
|
||||
"veteran": false,
|
||||
"phone": "",
|
||||
"imaUrl": ""
|
||||
}
|
||||
|
||||
},
|
||||
createDialog() {
|
||||
if (this.selectIdList.length == 0) {
|
||||
this.$message.warning('至少选中一个进行编辑');
|
||||
return
|
||||
}else if(this.selectIdList.length > 1) {
|
||||
this.$message.warning('只能选中一个进行编辑');
|
||||
return
|
||||
}
|
||||
this.getTypes()
|
||||
|
||||
var _this = this
|
||||
this.dialogVisible = true;
|
||||
this.titleStr = '编辑'
|
||||
this.typeName = 'create'
|
||||
getGridUserInfo({ id: _this.selectIdList[0] }).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res.data.data)
|
||||
_this.ruleForm = res.data.data[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteWg() {
|
||||
var _this = this
|
||||
if (this.selectIdList.length == 0) {
|
||||
this.$message.warning('至少选中一个进行删除');
|
||||
return
|
||||
}else if(this.selectIdList.length > 1) {
|
||||
this.$message.warning('只能选中一个进行删除');
|
||||
return
|
||||
}
|
||||
this.$confirm("确认删除？")
|
||||
.then(() => {
|
||||
DeleteGrid({ AreaId: _this.selectIdList[0] }).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success(res.data.msg);
|
||||
_this.dialogVisible = false
|
||||
_this.getUserList({ id: _this.checkTreeId });
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch((_) => { });
|
||||
|
||||
},
|
||||
getTree() {
|
||||
let _this = this;
|
||||
var querys = {
|
||||
regionName: localStorage.getItem("areaENName")
|
||||
}
|
||||
getOrgTree(querys).then(res => {
|
||||
console.log("data", res.data.data);
|
||||
if (res.data.code == 200) {
|
||||
_this.data = res.data.data;
|
||||
this.getUserList({ id: _this.data[0].child[0].child[0].id });
|
||||
this.checkTreeId = _this.data[0].child[0].child[0].id
|
||||
console.log("_this.data", _this.data);
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserList(data) {
|
||||
getGridUser(data).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.tableData = res.data.data.dataInfo;
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(node) {
|
||||
this.checkTreeId = node.id
|
||||
this.getUserList({ id: node.id })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-checkbox{
|
||||
margin-top: 4px!important;
|
||||
}
|
||||
::v-deep .el-checkbox__inner{
|
||||
background-color: transparent;
|
||||
border: 0.0625rem solid #00b2ff;
|
||||
color: #fff;
|
||||
border-radius: 0px
|
||||
}
|
||||
::v-deep .el-dialog__title {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.operate-container {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-bottom: 1px solid #108eff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
width: calc(100% - 0px);
|
||||
min-height: 500px;
|
||||
padding:0px 20px;
|
||||
}
|
||||
|
||||
/* */
|
||||
::v-deep .el-tree {
|
||||
|
||||
color: #ffffff;
|
||||
/* // 整体背景透明 */
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__inner {
|
||||
/*// checkbox 背景透明 */
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content:hover {
|
||||
/* // hover 节点背景色，否则是白色 */
|
||||
background: rgba(104, 147, 215, 0.4);
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node:focus>.el-tree-node__content {
|
||||
/* // focus 节点背景透明，否则是白色 */
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
/* padding:0px; */
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
/* margin-bottom:5px; */
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table__fixed-right::before,
|
||||
.el-table__fixed::before {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-form--inline {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-ctrl {
|
||||
display: block;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid hsl(240, 100%, 37%, 0.2);
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 0.0625rem solid #00b2ff;
|
||||
color: #fff;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #00b2ff;
|
||||
/* line-height: 2.1875rem; */
|
||||
}
|
||||
|
||||
::v-deep .el-button--small {
|
||||
padding: 0.625rem 2.1875rem;
|
||||
}
|
||||
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
/* margin-left: 1.875rem; */
|
||||
}
|
||||
|
||||
::v-deep .el-table,
|
||||
.el-table__expanded-cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* “表格内背景颜色“ */
|
||||
::v-deep.el-table th,
|
||||
::v-deep.el-table tr,
|
||||
::v-deep.el-table td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 按钮样式修改 */
|
||||
::v-deep .el-button--success {
|
||||
background: #266a94;
|
||||
color: #00f261;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-button--info {
|
||||
background: #482c27;
|
||||
color: #8ac2da;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::v-deep.el-button--primary {
|
||||
background: #266a94;
|
||||
color: #8ac2da;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::v-deep.el-button--primary {
|
||||
background: #578ef0;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
|
||||
::v-deep.el-table tbody tr:hover>td {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
/* 第一个 dialog修改 */
|
||||
::v-deep.dialog_one .el-dialog {
|
||||
background: #266a94 !important;
|
||||
border: 1px solid #10a2e1;
|
||||
}
|
||||
|
||||
::v-deep.dialog_one .el-dialog__title {
|
||||
color: #00b2ff;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
::v-deep.dialog_one .el-dialog__header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 第二个 dialog 修改 */
|
||||
::v-deep.dialog_two .el-dialog {
|
||||
background: rgba(37, 61, 75, 0.7) !important;
|
||||
border: 1px solid #797979;
|
||||
}
|
||||
|
||||
::v-deep.dialog_two .el-dialog__body {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
::v-deep.dialog_two .el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table__cell {
|
||||
background: none;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .cell {
|
||||
padding: 0px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
/* background:hsl(212, 43%, 49%,0.5); */
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
::v-deep .number {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .btn-next {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .btn-prev {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button:disabled {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .disabled {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions__body {
|
||||
background: none;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions-row {
|
||||
background: none;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-descriptions-item__label {
|
||||
background: hsl(212, 43%, 49%, 0.5);
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
|
||||
border-color: hsl(212, 43%, 49%, 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper {}
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
display: block !important;
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
|
||||
/* 滑道样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 10px;
|
||||
background: #304156;
|
||||
border-radius: 6px;
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
|
||||
/* 定义滑块的样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
border-radius: 0px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
|
||||
/* 定义滑块鼠标移入时的样式 */
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 99999999999999;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-pagination .el-select {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-pager .number {
|
||||
padding: 0px;
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .el-input__inner {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-ctrl {
|
||||
/* display:none; */
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-ctrl-attrib-inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content .is-disabled .el-input__inner {
|
||||
background-color: none !important;
|
||||
}
|
||||
|
||||
::v-deep .mapboxgl-map canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li {
|
||||
min-width: 25px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border::after,
|
||||
.el-table--group::after,
|
||||
.el-table::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border,
|
||||
.el-table--group {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border th.el-table__cell,
|
||||
.el-table__fixed-right-patch {
|
||||
/* border:0px; */
|
||||
}
|
||||
|
||||
::v-deep .el-table--border .el-table__cell,
|
||||
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding: 15px 0px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
const validateMobile = function (rule, value, callback) {
|
||||
let newValue = value.replace(/[^0-9]/gi, '')
|
||||
if (value !== newValue) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else if (newValue.length !== 11) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validID = function(rule, value, callback) {
|
||||
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
|
||||
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||||
if (reg.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请输入正确的身份证号码"));
|
||||
}
|
||||
}
|
||||
var validateStock = (rule, value, callback) => {
|
||||
if (!value || value == 0) {
|
||||
callback(new Error("不能为空"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
export { validateMobile ,validID,validateStock}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="gridman-container">
|
||||
<div class="gridman-header">
|
||||
<div class="back-button" @click="backPath"></div>
|
||||
网格化管理
|
||||
</div>
|
||||
<div class="gridman-body">
|
||||
|
|
@ -49,6 +50,16 @@
|
|||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
backPath(){
|
||||
console.log(this.$route);
|
||||
if(this.$route.path != '/gridman_navigation'){
|
||||
this.$router.push({'path':'/gridman'})
|
||||
}else{
|
||||
this.$router.push({'path':'/index'})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -73,9 +84,18 @@
|
|||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.back-button{
|
||||
width:140px;
|
||||
height:40px;
|
||||
position:absolute;
|
||||
top:60px;
|
||||
left:40px;
|
||||
cursor:pointer;
|
||||
|
||||
}
|
||||
.gridman-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 100px);
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,18 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="info">
|
||||
<p>您好，{{userName}}</p>
|
||||
<p>欢迎进入网格化管理系统！</p>
|
||||
</div>
|
||||
<div class="gridman-navigation">
|
||||
<div class="nav-item" v-for="(item,index) in navList" :key="index" :style="{'top':item.top+'px'}" @click="$router.push({'path':item.url})">
|
||||
<img :src="'/img/gridman/nav-'+(index+1)+'.png'" alt="">
|
||||
<div class="nav-lable">{{item.lable}}</div>
|
||||
<img :src="'/img/gridman/nav-'+(index+1)+'.png'" alt="" @click="$router.push({'path':item.url})">
|
||||
<div class="nav-lable" @click="$router.push({'path':item.url})">{{item.lable}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -15,11 +23,12 @@
|
|||
},
|
||||
data(){
|
||||
return {
|
||||
userName:localStorage.getItem("userName"),
|
||||
navList:[
|
||||
{
|
||||
lable:"重点人群",
|
||||
url:"",
|
||||
top:0,
|
||||
top:30,
|
||||
},{
|
||||
lable:"区域划分",
|
||||
url:"",
|
||||
|
|
@ -42,8 +51,8 @@
|
|||
top:90,
|
||||
},{
|
||||
lable:"网格员",
|
||||
url:"",
|
||||
top:0,
|
||||
url:"/gridman_grid",
|
||||
top:30,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -52,7 +61,17 @@
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.info{
|
||||
width:1370px;
|
||||
height:100px;
|
||||
position:absolute;
|
||||
top:30%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-80%);
|
||||
font-size:28px;
|
||||
color:#fff;
|
||||
line-height:40px;
|
||||
}
|
||||
.gridman-navigation{
|
||||
height:200px;
|
||||
width:1470px;
|
||||
|
|
@ -60,8 +79,7 @@
|
|||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-30%);
|
||||
|
||||
transform: translate(-50%,-45%);
|
||||
}
|
||||
|
||||
.gridman-navigation::after{
|
||||
|
|
@ -79,18 +97,33 @@
|
|||
margin:0px 30px;
|
||||
cursor:pointer;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.nav-item:hover{
|
||||
/* box-shadow: 0px 30px 30px rgba(255,255,255,0.1); */
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-lable{
|
||||
color:#005edb;
|
||||
}
|
||||
.nav-item:hover img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.gridman-navigation .nav-item img{
|
||||
width:150px;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.nav-lable{
|
||||
width:150px;
|
||||
position:relative;
|
||||
top:20px;
|
||||
font-size:24px;
|
||||
font-size:20px;
|
||||
letter-spacing: 1px;
|
||||
text-align:center;
|
||||
color:#fff;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue