Merge branch 'master' of http://123.132.248.154:10000/xujingliang/Fei_Xian_Lin_Ye_Fang_Huo
commit
f456dcab66
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
|
|
@ -21,7 +21,7 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
|
|
|
|||
|
|
@ -21,26 +21,16 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center">
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" show-overflow-tooltip align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sex == 0 ? '男' : '女'}}</span>
|
||||
</template>
|
||||
<el-table-column prop="gender" label="性别" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cardNo" label="身份证号" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="politicalOutlook" label="政治面貌" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="education" label="学历" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
|
||||
@pagination="handleCurrentChange" />
|
||||
|
|
@ -50,11 +40,8 @@
|
|||
<el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini body-small addWindow"
|
||||
v-el-drag-dialog :title="titleStr" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="addServiceVisible">
|
||||
<el-container style="overflow-y:hidden;">
|
||||
<el-container v-if="addServiceVisible">
|
||||
<AddForm @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<AddForm v-if="addServiceVisible" @addSuccess="addSuccess" :detailInfo="detailInfo"
|
||||
@close="addServiceVisible = false"></AddForm>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
|
@ -68,6 +55,7 @@
|
|||
import extend from "@/extensions/delRows.js"
|
||||
import * as modules from '@/api/modules'
|
||||
import * as login from '@/api/login'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import permissionBtn from '@/components/PermissionBtn'
|
||||
|
|
@ -103,7 +91,7 @@
|
|||
pageSize: 20,
|
||||
name: null,
|
||||
},
|
||||
detailInfo:[]
|
||||
detailInfo: []
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -122,7 +110,7 @@
|
|||
methods: {
|
||||
add() {
|
||||
this.addServiceVisible = true;
|
||||
this.detailInfo=[]
|
||||
this.detailInfo = []
|
||||
this.titleStr = '添加'
|
||||
},
|
||||
addSuccess() {
|
||||
|
|
@ -131,7 +119,7 @@
|
|||
},
|
||||
del() {
|
||||
var _this = this
|
||||
if(this.multipleSelection.length != 1){
|
||||
if (this.multipleSelection.length != 1) {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '请选择一条数据进行删除'
|
||||
|
|
@ -143,7 +131,7 @@
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
postMethodCommon("/Grid/DeleteKeyUser?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
postMethodCommon("/FireGrid/DeleteFireFighter?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
|
|
@ -161,7 +149,7 @@
|
|||
|
||||
},
|
||||
react() {
|
||||
if(this.multipleSelection.length != 1){
|
||||
if (this.multipleSelection.length != 1) {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '请选择一条数据进行编辑'
|
||||
|
|
@ -234,21 +222,11 @@
|
|||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
getMethodCommon("/Grid/LoadKeyUser", this.listQuery).then(res => {
|
||||
getMethodCommon("/FireGrid/GetFireFighter", this.listQuery).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.tableData = res.data
|
||||
this.tableData.forEach((item, index) => {
|
||||
switch (item.state) {
|
||||
case 0: this.tableData[index].state = "未审核";
|
||||
break;
|
||||
case 1: this.tableData[index].state = "审核通过";
|
||||
break;
|
||||
case 2: this.tableData[index].state = "未通过";
|
||||
break;
|
||||
case 3: this.tableData[index].state = "全部";
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
this.total = res.count
|
||||
this.listLoading = false
|
||||
}
|
||||
|
|
@ -280,9 +258,40 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination__jump{
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/*滚动条宽度*/
|
||||
height: 10px;
|
||||
/*滚动条高度*/
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
box-shadow: 0px 1px 3px #071e4a inset;
|
||||
/*滚动条的背景区域的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0px 1px 3px #00a0e9 inset;
|
||||
/*滚动条的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .sticky {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
|
@ -363,6 +372,13 @@
|
|||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 10px;
|
||||
/*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
border-left: 1px solid #00EDE8;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,24 @@
|
|||
<template>
|
||||
<div style="width:100%;height:100%;overflow:auto;padding:0px 23px; background: rgba(0, 9, 34, 0.6);">
|
||||
<div style="width:100%;height:40vh;padding:0px 23px; z-index:10;background: rgba(0, 9, 34, 0.6);">
|
||||
<el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">
|
||||
<el-form-item label="姓名: " prop="userName">
|
||||
<el-input v-model="addForm.userName" style="width:300px ;"></el-input>
|
||||
<el-form-item label="姓名: " prop="name">
|
||||
<el-input v-model="addForm.name" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="身份证号: " prop="cardNo" >
|
||||
<el-input v-model="addForm.cardNo" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话: " prop="phone">
|
||||
<el-input v-model="addForm.phone" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="性别: " prop="sex">
|
||||
<el-radio-group v-model="addForm.sex">
|
||||
<el-radio label="0">男</el-radio>
|
||||
<el-radio label="1">女</el-radio>
|
||||
<el-form-item label="性别: " prop="gender">
|
||||
<el-radio-group v-model="addForm.gender">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="政治面貌：" prop="politicalOutlook">
|
||||
<el-select v-model="addForm.politicalOutlook" placeholder="请选择" style="width:300px ;">
|
||||
<el-option label="群众" value="群众"></el-option>
|
||||
<el-option label="中共党员" value="中共党员"></el-option>
|
||||
</el-select>
|
||||
<el-form-item :label="'所属乡镇'">
|
||||
<treeselect :options="orgsTree" :default-expand-level="3" :multiple="true" :flat="true" :open-on-click="true"
|
||||
:open-on-focus="true" :clear-on-select="true" v-model="selectOrgs" style="z-index: 2026;">
|
||||
</treeselect>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学历：" prop="education">
|
||||
<el-select v-model="addForm.education" placeholder="请选择" style="width:300px ;">
|
||||
<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>
|
||||
<el-form-item style="margin-top: 16%;">
|
||||
<el-button @click="close()">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" v-if="detailInfo.length == 0">保存</el-button>
|
||||
<el-button type="primary" @click="createForm('form')" v-else>编辑</el-button>
|
||||
|
|
@ -48,6 +27,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listToTreeSelect } from '@/utils'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { postMethodCommon, getMethodCommon } from '../../../../api/common';
|
||||
import { validateMobile, validID, validateStock } from './validate.js'
|
||||
import form from '../../../../store/modules/form';
|
||||
|
|
@ -55,64 +37,111 @@
|
|||
// let BASE_IMAGE_URL = BASE_IMAGE_API_URL;
|
||||
export default {
|
||||
name: "AddForm",
|
||||
props:['detailInfo'],
|
||||
props: ['detailInfo'],
|
||||
components: {
|
||||
Treeselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
BASE_IMAGE_URL: BASE_IMAGE_URL,
|
||||
addForm: {
|
||||
sex: "0"
|
||||
gender: "男"
|
||||
},
|
||||
rules: {
|
||||
userName: [
|
||||
name: [
|
||||
{ required: true, message: '姓名不能为空', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '电话不能为空', trigger: 'blur' },
|
||||
{ validator: validateMobile.bind(this), trigger: 'blur' }
|
||||
],
|
||||
sex: [
|
||||
gender: [
|
||||
{ required: true, message: '性别不能为空', 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' },
|
||||
],
|
||||
},
|
||||
|
||||
dialogFormVisible: false,
|
||||
orgsTree: [], // 用户可访问到的所有机构组成的树
|
||||
selectRoles: [], // 用户分配的角色
|
||||
selectRoleNames: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.detailInfo)
|
||||
if(this.detailInfo.length == 1){
|
||||
this.addForm=this.detailInfo[0]
|
||||
this.addForm.sex = this.addForm.sex.toString()
|
||||
}else{
|
||||
this.addForm={
|
||||
sex:"0"
|
||||
if (this.detailInfo.length == 1) {
|
||||
this.getDetail()
|
||||
} else {
|
||||
this.addForm = {
|
||||
gender: "男"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectOrgs: {
|
||||
get: function () {
|
||||
console.log(this.detailInfo)
|
||||
if (this.detailInfo.length == 1) {
|
||||
return this.addForm.street
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
set: function (v) {
|
||||
console.log('set org:', v)
|
||||
var _this = this
|
||||
_this.addForm.street = v
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _this = this;
|
||||
var querys = {
|
||||
regionName: localStorage.getItem("areaENName")
|
||||
}
|
||||
getMethodCommon("/Grid/LoadAllGrid", querys).then(res => {
|
||||
console.log("data", res.data);
|
||||
if (res.code == 200) {
|
||||
var list = res.data
|
||||
var arr = this.traverse(list)
|
||||
console.log(arr)
|
||||
_this.orgsTree = arr;
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
getDetail() {
|
||||
getMethodCommon("/FireGrid/GetSingleFireFighter?id=" + this.detailInfo[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.addForm = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
traverse(arr) {
|
||||
if (arr && arr.length > 0) {
|
||||
var list = []
|
||||
arr.forEach(childelement => {
|
||||
list.push({
|
||||
id: childelement.id,
|
||||
label: childelement.areaName,
|
||||
parentId: childelement.pId || null,
|
||||
children: this.traverse(childelement.child)
|
||||
})
|
||||
});
|
||||
return list
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
var _this =this
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/AddKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/AddFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"添加成功"
|
||||
type: "success",
|
||||
message: "添加成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -122,19 +151,18 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
createForm(){
|
||||
var _this =this
|
||||
createForm() {
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/EditKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/EditFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"编辑成功"
|
||||
type: "success",
|
||||
message: "编辑成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -151,6 +179,10 @@
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .vue-treeselect__control {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,26 +21,17 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center">
|
||||
<el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" show-overflow-tooltip align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sex == 0 ? '男' : '女'}}</span>
|
||||
</template>
|
||||
<el-table-column prop="gender" label="性别" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cardNo" label="身份证号" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="politicalOutlook" label="政治面貌" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="education" label="学历" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
|
||||
@pagination="handleCurrentChange" />
|
||||
|
|
@ -50,11 +41,7 @@
|
|||
<el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini body-small addWindow"
|
||||
v-el-drag-dialog :title="titleStr" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="addServiceVisible">
|
||||
<el-container style="overflow-y:hidden;">
|
||||
<el-container v-if="addServiceVisible">
|
||||
<AddForm @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<AddForm v-if="addServiceVisible" @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
|
@ -68,6 +55,7 @@
|
|||
import extend from "@/extensions/delRows.js"
|
||||
import * as modules from '@/api/modules'
|
||||
import * as login from '@/api/login'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import permissionBtn from '@/components/PermissionBtn'
|
||||
|
|
@ -114,7 +102,7 @@
|
|||
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
// this.getList()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
|
@ -143,7 +131,7 @@
|
|||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
postMethodCommon("/Grid/DeleteKeyUser?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
postMethodCommon("/FireGrid/DeleteFireFighter?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
|
|
@ -234,21 +222,11 @@
|
|||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
getMethodCommon("/Grid/LoadKeyUser", this.listQuery).then(res => {
|
||||
getMethodCommon("/FireGrid/GetFireFighter", this.listQuery).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.tableData = res.data
|
||||
this.tableData.forEach((item, index) => {
|
||||
switch (item.state) {
|
||||
case 0: this.tableData[index].state = "未审核";
|
||||
break;
|
||||
case 1: this.tableData[index].state = "审核通过";
|
||||
break;
|
||||
case 2: this.tableData[index].state = "未通过";
|
||||
break;
|
||||
case 3: this.tableData[index].state = "全部";
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
this.total = res.count
|
||||
this.listLoading = false
|
||||
}
|
||||
|
|
@ -280,6 +258,35 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/*滚动条宽度*/
|
||||
height: 10px;
|
||||
/*滚动条高度*/
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
box-shadow: 0px 1px 3px #071e4a inset;
|
||||
/*滚动条的背景区域的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0px 1px 3px #00a0e9 inset;
|
||||
/*滚动条的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination__jump{
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,24 @@
|
|||
<template>
|
||||
<div style="width:100%;height:100%;overflow:auto;padding:0px 23px; background: rgba(0, 9, 34, 0.6);">
|
||||
<div style="width:100%;height:40vh;padding:0px 23px; z-index:10;background: rgba(0, 9, 34, 0.6);">
|
||||
<el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">
|
||||
<el-form-item label="姓名: " prop="userName">
|
||||
<el-input v-model="addForm.userName" style="width:300px ;"></el-input>
|
||||
<el-form-item label="姓名: " prop="name">
|
||||
<el-input v-model="addForm.name" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="身份证号: " prop="cardNo" >
|
||||
<el-input v-model="addForm.cardNo" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话: " prop="phone">
|
||||
<el-input v-model="addForm.phone" style="width:300px ;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="性别: " prop="sex">
|
||||
<el-radio-group v-model="addForm.sex">
|
||||
<el-radio label="0">男</el-radio>
|
||||
<el-radio label="1">女</el-radio>
|
||||
<el-form-item label="性别: " prop="gender">
|
||||
<el-radio-group v-model="addForm.gender">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="政治面貌：" prop="politicalOutlook">
|
||||
<el-select v-model="addForm.politicalOutlook" placeholder="请选择" style="width:300px ;">
|
||||
<el-option label="群众" value="群众"></el-option>
|
||||
<el-option label="中共党员" value="中共党员"></el-option>
|
||||
</el-select>
|
||||
<el-form-item :label="'所属乡镇'">
|
||||
<treeselect :options="orgsTree" :default-expand-level="3" :multiple="true" :flat="true" :open-on-click="true"
|
||||
:open-on-focus="true" :clear-on-select="true" v-model="selectOrgs" style="z-index: 2026;">
|
||||
</treeselect>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学历：" prop="education">
|
||||
<el-select v-model="addForm.education" placeholder="请选择" style="width:300px ;">
|
||||
<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>
|
||||
<el-form-item style="margin-top: 16%;">
|
||||
<el-button @click="close()">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" v-if="detailInfo.length == 0">保存</el-button>
|
||||
<el-button type="primary" @click="createForm('form')" v-else>编辑</el-button>
|
||||
|
|
@ -48,6 +27,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listToTreeSelect } from '@/utils'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { postMethodCommon, getMethodCommon } from '../../../../api/common';
|
||||
import { validateMobile, validID, validateStock } from './validate.js'
|
||||
import form from '../../../../store/modules/form';
|
||||
|
|
@ -55,64 +37,111 @@
|
|||
// let BASE_IMAGE_URL = BASE_IMAGE_API_URL;
|
||||
export default {
|
||||
name: "AddForm",
|
||||
props:['detailInfo'],
|
||||
props: ['detailInfo'],
|
||||
components: {
|
||||
Treeselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
BASE_IMAGE_URL: BASE_IMAGE_URL,
|
||||
addForm: {
|
||||
sex: "0"
|
||||
gender: "男"
|
||||
},
|
||||
rules: {
|
||||
userName: [
|
||||
name: [
|
||||
{ required: true, message: '姓名不能为空', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '电话不能为空', trigger: 'blur' },
|
||||
{ validator: validateMobile.bind(this), trigger: 'blur' }
|
||||
],
|
||||
sex: [
|
||||
gender: [
|
||||
{ required: true, message: '性别不能为空', 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' },
|
||||
],
|
||||
},
|
||||
|
||||
dialogFormVisible: false,
|
||||
orgsTree: [], // 用户可访问到的所有机构组成的树
|
||||
selectRoles: [], // 用户分配的角色
|
||||
selectRoleNames: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.detailInfo)
|
||||
if(this.detailInfo.length == 1){
|
||||
this.addForm=this.detailInfo[0]
|
||||
this.addForm.sex = this.addForm.sex.toString()
|
||||
}else{
|
||||
this.addForm={
|
||||
sex:"0"
|
||||
if (this.detailInfo.length == 1) {
|
||||
this.getDetail()
|
||||
} else {
|
||||
this.addForm = {
|
||||
gender: "男"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectOrgs: {
|
||||
get: function () {
|
||||
console.log(this.detailInfo)
|
||||
if (this.detailInfo.length == 1) {
|
||||
return this.addForm.street
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
set: function (v) {
|
||||
console.log('set org:', v)
|
||||
var _this = this
|
||||
_this.addForm.street = v
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _this = this;
|
||||
var querys = {
|
||||
regionName: localStorage.getItem("areaENName")
|
||||
}
|
||||
getMethodCommon("/Grid/LoadAllGrid", querys).then(res => {
|
||||
console.log("data", res.data);
|
||||
if (res.code == 200) {
|
||||
var list = res.data
|
||||
var arr = this.traverse(list)
|
||||
console.log(arr)
|
||||
_this.orgsTree = arr;
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
getDetail() {
|
||||
getMethodCommon("/FireGrid/GetSingleFireFighter?id=" + this.detailInfo[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
this.addForm = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
traverse(arr) {
|
||||
if (arr && arr.length > 0) {
|
||||
var list = []
|
||||
arr.forEach(childelement => {
|
||||
list.push({
|
||||
id: childelement.id,
|
||||
label: childelement.areaName,
|
||||
parentId: childelement.pId || null,
|
||||
children: this.traverse(childelement.child)
|
||||
})
|
||||
});
|
||||
return list
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
var _this =this
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/AddKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/AddFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"添加成功"
|
||||
type: "success",
|
||||
message: "添加成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -122,19 +151,18 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
createForm(){
|
||||
var _this =this
|
||||
createForm() {
|
||||
var _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(_this.addForm)
|
||||
_this.addForm.sex = Number(_this.addForm.sex)
|
||||
postMethodCommon("/Grid/EditKeyUser", _this.addForm).then(response => {
|
||||
postMethodCommon("/FireGrid/EditFireFighter", _this.addForm).then(response => {
|
||||
if (response.code == 200) {
|
||||
// 上传shp
|
||||
this.$emit("addSuccess");
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"编辑成功"
|
||||
type: "success",
|
||||
message: "编辑成功"
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -151,6 +179,10 @@
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .vue-treeselect__control {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,30 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="grid-list-container">
|
||||
<div class="list-box">
|
||||
<div class="list-item list-item-header" >
|
||||
<div class="search-container">
|
||||
<!-- 人员名称 -->
|
||||
<el-input clearable size="mini" prefix-icon="el-icon-search" style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'人员姓名'"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
<el-button type="default" size="mini" >重置</el-button>
|
||||
<el-button type="primary" size="mini" >搜索</el-button>
|
||||
</div>
|
||||
<div class="list-header" >
|
||||
<div class="list-item-box" style="width:15%;">名称</div>
|
||||
<div class="list-item-box" style="width:15%;">类型</div>
|
||||
<div class="list-item-box" style="width:15%;">督查长</div>
|
||||
<div class="list-item-box" style="width:40%;">副督查长</div>
|
||||
<div class="list-item-box" style="width:15%;">操作</div>
|
||||
<div class="list-item-box" style="width:45%;">副督查长</div>
|
||||
<div class="list-item-box" style="width:10%;">操作</div>
|
||||
</div>
|
||||
<div class="list-item" v-for="(item,index) in listData" :key="index">
|
||||
<div class="list-box">
|
||||
<div class="list-item" v-for="(item,index) in listData" :key="index" >
|
||||
<div class="list-item-box" style="width:15%;">{{item.name}}</div>
|
||||
<div class="list-item-box" style="width:15%;">{{item.type}}</div>
|
||||
<div class="list-item-box" style="width:15%;">{{item.user}}</div>
|
||||
<div class="list-item-box" style="width:40%;">{{item.users}}</div>
|
||||
<div class="list-item-box" style="width:15%;">
|
||||
<div class="operate-button operate-edit"><i class="el-icon el-icon-edit"></i></div>
|
||||
<div class="list-item-box" style="width:45%;">{{item.users}}</div>
|
||||
<div class="list-item-box" style="width:10%;">
|
||||
<div class="operate-button operate-edit" @click="userListContainer = true"><i class="el-icon el-icon-edit"></i></div>
|
||||
<div class="operate-button operate-delete"><i class="el-icon el-icon-delete"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,20 +38,29 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grider-list-container">
|
||||
<div class="grider-list-item">
|
||||
<el-form :model="ruleForm" size="mini" label-width="90px" class="demo-ruleForm">
|
||||
<div class="map-container" id="mapContainer">
|
||||
|
||||
</div>
|
||||
<div class="grider-list-container" v-if="userListContainer">
|
||||
<div class="grid-info-contianer">
|
||||
<p>名称：东蒙镇</p>
|
||||
<p>名称：类型</p>
|
||||
<p>督察长：徐景良</p>
|
||||
</div>
|
||||
<div class="grid-list-box">
|
||||
<div class="grider-list-item" v-for="(item,index) in userList" :key="index">
|
||||
<el-form :model="item" size="mini" label-width="90px" class="demo-ruleForm">
|
||||
<el-form-item label="姓称：" prop="areaName">
|
||||
<el-input ></el-input>
|
||||
<el-input v-model="item.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位：" prop="households">
|
||||
<el-input type="number"></el-input>
|
||||
<el-input v-model="item.unit"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="防火职务：" prop="households">
|
||||
<el-input type="number"></el-input>
|
||||
<el-input v-model="item.work"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="督察职务：" prop="households">
|
||||
<el-input type="number"></el-input>
|
||||
<el-input v-model="item.ducha"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="height:40px;">
|
||||
|
|
@ -50,6 +68,7 @@
|
|||
<div class="operate-button operate-delete"><i class="el-icon el-icon-delete"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -60,12 +79,7 @@
|
|||
data(){
|
||||
return {
|
||||
listData : [
|
||||
{
|
||||
name:"东蒙镇",
|
||||
type:"乡镇",
|
||||
user:"徐景良",
|
||||
users:"徐景良、石超、张斌、张凯"
|
||||
},{
|
||||
{
|
||||
name:"东蒙镇",
|
||||
type:"乡镇",
|
||||
user:"徐景良",
|
||||
|
|
@ -125,6 +139,7 @@
|
|||
ruleForm:{
|
||||
|
||||
},
|
||||
userListContainer:false,
|
||||
userList:[
|
||||
{
|
||||
name:"徐景良",
|
||||
|
|
@ -147,8 +162,45 @@
|
|||
work:"",
|
||||
ducha:false,
|
||||
}
|
||||
]
|
||||
],
|
||||
globalMap:null,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initMap();
|
||||
},
|
||||
methods:{
|
||||
initMap() {
|
||||
//mapbox 2.0以后的版本需要accessToken 到官网注册下载
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
this.globalMap = new this.$mapboxgl.Map({
|
||||
container: "mapContainer",
|
||||
center: [117.7075, 35.43222222],
|
||||
zoom: 9.7,
|
||||
maxZoom: 20,
|
||||
minZoom: 5,
|
||||
pitch: 0,
|
||||
style: "mapbox://styles/mapbox/streets-v11"
|
||||
});
|
||||
|
||||
// 地图加载完毕事件
|
||||
let _this = this;
|
||||
|
||||
_this.globalMap.addControl(new this.$mapboxgl.NavigationControl(), 'top-right');
|
||||
|
||||
this.globalMap.on("load", function () {
|
||||
|
||||
_this.globalMap.addSource('mapbox-dem', {
|
||||
'type': 'raster-dem',
|
||||
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
|
||||
'tileSize': 512,
|
||||
'maxzoom': 14
|
||||
});
|
||||
// add the DEM source as a terrain layer with exaggerated height
|
||||
_this.globalMap.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
|
||||
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -158,6 +210,7 @@
|
|||
width:100%;
|
||||
height: 100%;
|
||||
padding:20px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.grid-list-container{
|
||||
|
|
@ -166,11 +219,25 @@
|
|||
background:#11192e;
|
||||
float:left;
|
||||
}
|
||||
.search-container{
|
||||
width:100%;
|
||||
height:50px;
|
||||
padding:10px 15px;
|
||||
}
|
||||
|
||||
.list-box{
|
||||
width:100%;
|
||||
height: calc(100% - 50px);
|
||||
width: calc( 100% - 0px);
|
||||
height: calc(100% - 150px);
|
||||
padding:20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.list-header{
|
||||
width:calc( 100% - 60px);
|
||||
padding:0px 20px;
|
||||
margin:0px auto;
|
||||
height:50px;
|
||||
background:#1c2746;
|
||||
}
|
||||
.page-container{
|
||||
width:100%;
|
||||
|
|
@ -183,7 +250,7 @@
|
|||
width:100%;
|
||||
height:50px;
|
||||
background:#1c2746;
|
||||
margin-bottom:8px;
|
||||
margin-bottom:12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color:#ccc;
|
||||
|
|
@ -196,7 +263,7 @@
|
|||
background:#261e31;
|
||||
}
|
||||
|
||||
.list-item .list-item-box{
|
||||
.list-item-box{
|
||||
float:left;
|
||||
width:20%;
|
||||
line-height:50px;
|
||||
|
|
@ -222,15 +289,40 @@
|
|||
color:#fd5252;
|
||||
background:#fd52524f;
|
||||
}
|
||||
|
||||
/* 地图 */
|
||||
.map-container{
|
||||
width:50%;
|
||||
float:left;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
/* 人员 */
|
||||
.grider-list-container{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
right:0px;
|
||||
width:26%;
|
||||
float:right;
|
||||
height:100%;
|
||||
height: calc( 100% - 40px);
|
||||
background:#11192e;
|
||||
padding:30px;
|
||||
padding:15px;
|
||||
overflow-y:auto;
|
||||
z-index:99999;
|
||||
}
|
||||
|
||||
.grid-info-contianer{
|
||||
width:100%;
|
||||
height:120px;
|
||||
padding:15px;
|
||||
background:#1c2746;
|
||||
color:#fff;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
.grid-list-box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 135px);
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.grider-list-item{
|
||||
|
|
@ -253,5 +345,36 @@
|
|||
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="gridman-container">
|
||||
<div class="gridman-header">
|
||||
<div class="back-button" @click="backPath"></div>
|
||||
网格化管理
|
||||
<div class="back-button" @click="backPath"></div>
|
||||
{{title}}
|
||||
</div>
|
||||
<div class="gridman-body">
|
||||
<router-view></router-view>
|
||||
<router-view @updateProjectId="updateProjectIdParent"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -13,59 +13,63 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'index',
|
||||
created(){
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
title : '网格化管理'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
backPath(){
|
||||
console.log(this.$route);
|
||||
if(this.$route.path != '/gridman_navigation'){
|
||||
this.$router.push({'path':'/gridman'})
|
||||
}else{
|
||||
this.$router.push({'path':'/index'})
|
||||
}
|
||||
methods: {
|
||||
updateProjectIdParent(msg) {
|
||||
this.title = msg
|
||||
},
|
||||
backPath() {
|
||||
this.title = '网格化管理'
|
||||
if (this.$route.path != '/gridman_navigation') {
|
||||
this.$router.push({ 'path': '/gridman' })
|
||||
} else {
|
||||
this.$router.push({ 'path': '/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gridman-container{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
background-image:url(/img/gridman/bg.png);
|
||||
background-size:100% 100%;
|
||||
.gridman-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(/img/gridman/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.gridman-header{
|
||||
width:100%;
|
||||
height:99px;
|
||||
background-image:url(/img/gridman/header.png);
|
||||
background-size:100% 100%;
|
||||
text-align: center;
|
||||
color:#fff;
|
||||
line-height:90px;
|
||||
font-size:36px;
|
||||
letter-spacing: 5px;
|
||||
.gridman-header {
|
||||
width: 100%;
|
||||
height: 99px;
|
||||
background-image: url(/img/gridman/header.png);
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 90px;
|
||||
font-size: 36px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.back-button{
|
||||
width:140px;
|
||||
height:40px;
|
||||
position:absolute;
|
||||
top:60px;
|
||||
left:40px;
|
||||
cursor:pointer;
|
||||
.back-button {
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.gridman-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 100px);
|
||||
}
|
||||
|
||||
.gridman-body {
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,9 +6,9 @@
|
|||
<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="" @click="$router.push({'path':item.url})">
|
||||
<div class="nav-lable" @click="$router.push({'path':item.url})">{{item.lable}}</div>
|
||||
<div class="nav-item" v-for="(item,index) in navList" :key="index" :style="{'top':item.top+'px'}" @click="goItem(item)">
|
||||
<img :src="'/img/gridman/nav-'+(index+1)+'.png'" alt="" @click="goItem(item)">
|
||||
<div class="nav-lable" @click="goItem(item)">{{item.lable}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,6 +60,12 @@
|
|||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
goItem(item){
|
||||
this.$router.push({'path':item.url})
|
||||
this.$emit('updateProjectId',item.lable)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,467 +1,444 @@
|
|||
<template>
|
||||
<div class="site-content">
|
||||
|
||||
<sticky :className="'sub-navbar'">
|
||||
<div class="filter-container">
|
||||
|
||||
<el-input @keyup.enter.native="handleFilter" size="mini" prefix-icon="el-icon-search"
|
||||
style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'名称'"
|
||||
v-model="listQuery.name">
|
||||
</el-input>
|
||||
|
||||
<el-button type="primary" size="mini" @click="getList()">查询</el-button>
|
||||
<el-button type="primary" size="mini" @click="add()">添加</el-button>
|
||||
<el-button type="warning" size="mini" @click="react()">编辑</el-button>
|
||||
<el-button type="danger" size="mini" @click="del()">删除</el-button>
|
||||
|
||||
<permission-btn moduleName='modulemanager' :size="'mini'" v-on:btn-event="onBtnClicked"></permission-btn>
|
||||
|
||||
</div>
|
||||
</sticky>
|
||||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" show-overflow-tooltip align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sex == 0 ? '男' : '女'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cardNo" label="身份证号" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="politicalOutlook" label="政治面貌" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="education" label="学历" show-overflow-tooltip align="center">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize"
|
||||
@pagination="handleCurrentChange" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="town">
|
||||
费县
|
||||
</div>
|
||||
|
||||
<el-dialog width="40%" height="60%" top=" calc(50vh - 340px)" class="dialog-mini body-small addWindow"
|
||||
v-el-drag-dialog :title="titleStr" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="addServiceVisible">
|
||||
<el-container style="overflow-y:hidden;">
|
||||
<el-container v-if="addServiceVisible">
|
||||
<AddForm @addSuccess="addSuccess" :detailInfo="detailInfo" @close="addServiceVisible = false"></AddForm>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-dialog>
|
||||
<!-- 乡镇网格 -->
|
||||
<div class="street-container xiangzhen">
|
||||
<div class="street-container-title">
|
||||
<span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">乡镇网格</span>
|
||||
</div>
|
||||
|
||||
<div class="container-box">
|
||||
<div class="item" v-for="(item,index) in towns" :key="index" @click="townChange(item)" :style="{'border-color':currentTown==item.xzqmc ? '#a51748':'#1A4E90'}">
|
||||
<div class="item-title">{{item.xzqmc}}</div>
|
||||
<div class="item-info"> <span>督察长</span> <span v-for="(it,idx) in item.dcz" :key="idx" >{{it.name}}</span></div>
|
||||
<div class="item-info"> <span>副督察长</span> <span v-for="(it,idx) in item.fdcz" :key="idx" >{{it.name}}</span></div>
|
||||
<div class="item-info"> <span>防火职务</span> 县级包领导</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消防 -->
|
||||
<div class="street-container xiaofang" style="width:315px;">
|
||||
<div class="street-container-title">
|
||||
<span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">消防员</span>
|
||||
</div>
|
||||
|
||||
<div class="container-box">
|
||||
<div class="item" v-for="(item,index) in firefighter" :key="index">
|
||||
<div class="item-name">
|
||||
{{item.name}}
|
||||
</div>
|
||||
<div class="item-sex-phone">
|
||||
<div class="item-sex">性别：{{item.gender}}</div>
|
||||
<div class="item-phone">电话：{{item.phone}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 自然村落 -->
|
||||
<div class="street-container cun">
|
||||
<div class="street-container-title">
|
||||
<span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">自然村落</span>
|
||||
</div>
|
||||
|
||||
<div class="container-box">
|
||||
<div class="item" v-for="(item,index) in villages" :key="index" @click="currentVillage=item.AreaName;getGrids(item.Id);getTrees(item.Id);" :style="{'border-color':currentVillage==item.AreaName ? '#a51748':'#1A4E90'}">
|
||||
<div class="item-title">{{item.AreaName}}</div>
|
||||
<div class="item-village-info">
|
||||
<div class="item-info">户数 {{item.Households}}</div>
|
||||
<div class="item-info">人数 {{item.PeopleNum}}</div>
|
||||
</div>
|
||||
<div class="item-grid-count">
|
||||
<p style="font-weight:bold;font-size:20px;">{{item.count}}</p>
|
||||
<p >网格数</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 护林员 -->
|
||||
<div class="street-container hulinyuan">
|
||||
<div class="street-container-title">
|
||||
<span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">护林员</span>
|
||||
</div>
|
||||
|
||||
<div class="container-box">
|
||||
<div class="item" v-for="(item,index) in trees" :key="index">
|
||||
<div class="item-title">{{currentVillage}}</div>
|
||||
<div class="item-info">姓名 {{item.Name}}</div>
|
||||
<div class="item-info">电话 {{item.Account}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 网格 -->
|
||||
<div class="street-container wangge">
|
||||
<div class="street-container-title">
|
||||
<span style="background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">网格</span>
|
||||
</div>
|
||||
|
||||
<div class="container-box">
|
||||
<div class="item" v-for="(item,index) in grids" :key="index">
|
||||
<div class="item-title">{{item.AreaName}}</div>
|
||||
<div class="item-info">户数 {{item.Households}}</div>
|
||||
<div class="item-info">网格员 {{item.UserName}}</div>
|
||||
<div class="item-info">身份 {{item.PoliticalOutlook}}</div>
|
||||
<div class="item-info">类型 {{item.UserType}}</div>
|
||||
<div class="item-info">电话 {{item.Phone}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination'
|
||||
import { listToTreeSelect } from '@/utils'
|
||||
import extend from "@/extensions/delRows.js"
|
||||
import * as modules from '@/api/modules'
|
||||
import * as login from '@/api/login'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import permissionBtn from '@/components/PermissionBtn'
|
||||
import elDragDialog from '@/directive/el-dragDialog'
|
||||
import iconData from '@/assets/public/css/comIconfont/iconfont/iconfont.json'
|
||||
import { getMethodCommon, postMethodCommon } from "@/api/common";
|
||||
import AddForm from './widget/AddForm';
|
||||
import Sticky from '@/components/Sticky'
|
||||
|
||||
import { getMethodCommon } from '../../../api/common'
|
||||
export default {
|
||||
name: 'module',
|
||||
components: {
|
||||
permissionBtn,
|
||||
Pagination,
|
||||
AddForm,
|
||||
Sticky
|
||||
},
|
||||
mixins: [extend],
|
||||
directives: {
|
||||
waves,
|
||||
elDragDialog
|
||||
},
|
||||
data() {
|
||||
name: 'index',
|
||||
data(){
|
||||
return {
|
||||
tableKey: 0,
|
||||
titleStr: '添加',
|
||||
tableData: [],
|
||||
addServiceVisible: false,
|
||||
total: 0,
|
||||
listQuery: {
|
||||
// 查询条件
|
||||
pageIndex: 1,
|
||||
pageSize: 20,
|
||||
name: null,
|
||||
},
|
||||
detailInfo:[]
|
||||
|
||||
towns:[],
|
||||
firefighter:[],
|
||||
villages:[],
|
||||
trees:[],
|
||||
grids:[],
|
||||
currentTown:null,
|
||||
currentVillage:null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
created(){
|
||||
this.getTownsList();
|
||||
},
|
||||
filters: {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.addServiceVisible = true;
|
||||
this.detailInfo=[]
|
||||
this.titleStr = '添加'
|
||||
},
|
||||
addSuccess() {
|
||||
this.addServiceVisible = false;
|
||||
this.getList();
|
||||
},
|
||||
del() {
|
||||
var _this = this
|
||||
if(this.multipleSelection.length != 1){
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '请选择一条数据进行删除'
|
||||
});
|
||||
return;
|
||||
methods:{
|
||||
townChange(item){
|
||||
if(this.currentTown == item.xzqmc){
|
||||
|
||||
}else{
|
||||
this.currentTown = item.xzqmc;
|
||||
this.trees = [];
|
||||
this.grids = [];
|
||||
this.getFireFighters(item.gid);
|
||||
this.getVillages(item.gid)
|
||||
}
|
||||
this.$confirm('确定删除所选数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
postMethodCommon("/Grid/DeleteKeyUser?Id=" + _this.multipleSelection[0].id, {}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功",
|
||||
})
|
||||
}
|
||||
_this.getList();
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
react() {
|
||||
if(this.multipleSelection.length != 1){
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '请选择一条数据进行编辑'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.detailInfo = this.multipleSelection
|
||||
this.addServiceVisible = true;
|
||||
this.titleStr = '编辑'
|
||||
},
|
||||
rowClick(row) {
|
||||
this.$refs.mainTable.clearSelection()
|
||||
this.$refs.mainTable.toggleRowSelection(row)
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val
|
||||
},
|
||||
onBtnClicked: function (domId) {
|
||||
console.log('you click:' + domId)
|
||||
switch (domId) {
|
||||
case 'btnAdd':
|
||||
this.addServiceVisible = true;
|
||||
break
|
||||
case 'btnEdit':
|
||||
if (this.multipleSelection.length != 1) {
|
||||
this.$message({
|
||||
message: '只能选中一个进行编辑',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.handleUpdate()
|
||||
break
|
||||
case 'btnDel':
|
||||
if (this.multipleSelection.length < 1) {
|
||||
this.$message({
|
||||
message: '至少删除一个',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.handleDelete()
|
||||
break
|
||||
case 'btnAddMenu':
|
||||
this.handleAddMenu()
|
||||
break
|
||||
case 'btnEditMenu':
|
||||
if (this.selectMenus.length !== 1) {
|
||||
this.$message({
|
||||
message: '只能选中一个进行编辑',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.handleEditMenu(this.selectMenus[0])
|
||||
break
|
||||
case 'btnDelMenu':
|
||||
if (this.selectMenus.length < 1) {
|
||||
this.$message({
|
||||
message: '至少删除一个',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.handleDelMenus(this.selectMenus)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
getMethodCommon("/Grid/LoadKeyUser", this.listQuery).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.tableData = res.data
|
||||
this.tableData.forEach((item, index) => {
|
||||
switch (item.state) {
|
||||
case 0: this.tableData[index].state = "未审核";
|
||||
break;
|
||||
case 1: this.tableData[index].state = "审核通过";
|
||||
break;
|
||||
case 2: this.tableData[index].state = "未通过";
|
||||
break;
|
||||
case 3: this.tableData[index].state = "全部";
|
||||
break;
|
||||
}
|
||||
getTownsList(){
|
||||
getMethodCommon("/FireGrid/GetTownInfos").then(res=>{
|
||||
if(res.code == 200){
|
||||
this.towns = res.result;
|
||||
let currentTown = this.towns.find((item,index)=>{
|
||||
return item.xzqmc == '东蒙镇'
|
||||
})
|
||||
this.total = res.count
|
||||
this.listLoading = false
|
||||
this.currentTown = currentTown.xzqmc
|
||||
this.getFireFighters(currentTown.gid);
|
||||
this.getVillages(currentTown.gid);
|
||||
}
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.pageIndex = 1
|
||||
this.getList()
|
||||
getFireFighters(id){
|
||||
getMethodCommon("/FireGrid/GetFireFighterById",{streetid:id}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.firefighter = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.pageSize = val
|
||||
this.getList()
|
||||
getVillages(id){
|
||||
getMethodCommon("/FireGrid/GetVillageByTownId",{id:id}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.villages = res.result;
|
||||
if(this.villages.length>0){
|
||||
this.currentVillage = this.villages[0].AreaName;
|
||||
this.getGrids(this.villages[0].Id);
|
||||
this.getTrees(this.villages[0].Id);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.pageIndex = val.page
|
||||
this.listQuery.pageSize = val.limit
|
||||
this.getList()
|
||||
getGrids(id){
|
||||
getMethodCommon("/FireGrid/GetGridInfoByVillageId",{id:id}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.grids = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
handleUpdate() {
|
||||
this.editForm = this.multipleSelection[0];
|
||||
this.editServiceVisible = true;
|
||||
},
|
||||
|
||||
|
||||
getTrees(id){
|
||||
getMethodCommon("/FireGrid/GetUserByVillageId",{id:id}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.trees = res.result;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination__jump{
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .sticky {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
}
|
||||
|
||||
::v-deep .dialog-mini .el-dialog__header {
|
||||
background: rgba(10, 39, 78, 1);
|
||||
}
|
||||
|
||||
::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
|
||||
color: #fff;
|
||||
<style scoped>
|
||||
.container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:30px 0px;
|
||||
position:relative;
|
||||
background-image:url(/img/gridman/yizhangtu-bg.png);
|
||||
background-size:100% 100%;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions__body {
|
||||
background: rgba(0, 9, 34, 1);
|
||||
color: #fff;
|
||||
.container-box{
|
||||
width:100%;
|
||||
height: calc( 100% - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-descriptions-item__label.is-bordered-label {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
color: #fff;
|
||||
.container-box::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(0, 9, 34, 1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
background: rgba(10, 39, 78, 1);
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-loading-mask {
|
||||
background: rgba(0, 9, 34, 0.9);
|
||||
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.site-container {
|
||||
width: 100%;
|
||||
.town{
|
||||
width:88px;
|
||||
height: 100%;
|
||||
background-image: url(/img/gridman/bg.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
width: 100%;
|
||||
height: 99px;
|
||||
background-image: url(/img/gridman/header.png);
|
||||
background-size: 100% 100%;
|
||||
background: linear-gradient(270deg, #1A5093 0%, #051836 100%);
|
||||
border-radius: 0px 30px 30px 0px;
|
||||
border-image: linear-gradient(270deg, rgba(37, 112, 206, 1), rgba(25, 77, 141, 0)) 1 1;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 90px;
|
||||
font-size: 36px;
|
||||
letter-spacing: 5px;
|
||||
line-height: calc( 100vh - 300px);
|
||||
font-size:18px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 4%;
|
||||
left: 2%;
|
||||
/* 乡镇 */
|
||||
.street-container{
|
||||
width:388px;
|
||||
height:100%;
|
||||
margin:0px 10px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.site-content {
|
||||
width: 100%;
|
||||
height: 94%;
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
.street-container .street-container-title{
|
||||
width:100%;
|
||||
height:70px;
|
||||
background-image:url(/img/gridman/xiangzhen.png);
|
||||
background-size:100% 100%;
|
||||
line-height:70px;
|
||||
color:#fff;
|
||||
text-indent:20px;
|
||||
font-size:20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: 100%;
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
.item{
|
||||
width:100%;
|
||||
height:200px;
|
||||
background: linear-gradient(180deg, rgba(7,27,67,0.1) 0%, #0F315F 100%);
|
||||
margin:10px 0px;
|
||||
border-top:2px solid #1A4E90;
|
||||
padding:15px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
border-left: 1px solid #00EDE8;
|
||||
.item-title{
|
||||
font-size:16px;
|
||||
color:#fff;
|
||||
text-indent:20px;
|
||||
height:30px;
|
||||
width:100%;
|
||||
position:relative;
|
||||
}
|
||||
.item-title::after{
|
||||
content:"";
|
||||
width:3px;
|
||||
height:22px;
|
||||
background:#1A4E90;
|
||||
position:absolute;
|
||||
top:2px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__body tr:hover td {
|
||||
background: rgba(24, 77, 143, 0.4) !important;
|
||||
cursor: pointer;
|
||||
.item-info{
|
||||
width:100%;
|
||||
height:30px;
|
||||
color:#fff;
|
||||
line-height:30px;
|
||||
margin-top:10px;
|
||||
border: 1px solid #11376A;
|
||||
padding-left:25px;
|
||||
background-image:url(/img/gridman/wenan.png);
|
||||
background-size:100% 100%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__body tr.current-row td {
|
||||
cursor: pointer;
|
||||
background: rgba(24, 77, 143, 0.4) !important;
|
||||
.item-info::after{
|
||||
width:5px;
|
||||
height:5px;
|
||||
background:#FACD44;
|
||||
border-radius: 50%;
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:12.5px;
|
||||
left:12.5px;
|
||||
}
|
||||
|
||||
::v-deep .el-table tr {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
border: none;
|
||||
color: #fff;
|
||||
.item-info span{
|
||||
display:block;
|
||||
float:left;
|
||||
width:110px;
|
||||
}
|
||||
.xiaofang .street-container-title{
|
||||
background-image:url(/img/gridman/xiangfangyuan.png);
|
||||
}
|
||||
.xiaofang .item{
|
||||
width:100%;
|
||||
height:105px;
|
||||
/* border-left:9px solid #E00266; */
|
||||
background: linear-gradient(145deg, #670D2C 0%, #250C2F 100%);
|
||||
background-image:url(/img/gridman/xiaofangyuan-1.png);
|
||||
background-size:100% 100%;
|
||||
border-top:0px;
|
||||
}
|
||||
.xiaofang .item-name{
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
background-image:url(/img/gridman/item-name.png);
|
||||
background-size:100% 100%;
|
||||
line-height:66px;
|
||||
text-align:center;
|
||||
color:#fff;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.xiaofang .item-sex-phone{
|
||||
float:left;
|
||||
color:#fff;
|
||||
margin-left:15px;
|
||||
line-height:30px;
|
||||
}
|
||||
|
||||
.xiaofang .item-sex-phone .item-sex{
|
||||
border-radius: 15px;
|
||||
padding:0px 12px;
|
||||
border: 1px solid #720A3C;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
.xiaofang .item-sex-phone .item-phone{
|
||||
border-radius: 15px;
|
||||
padding:0px 12px;
|
||||
border: 1px solid #720A3C;
|
||||
}
|
||||
|
||||
.cun .item{
|
||||
height:130px;
|
||||
background: linear-gradient(180deg, rgba(7,27,67,0.1) 0%, #0F315F 100%);
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: rgba(0, 9, 34, 0.6);
|
||||
color: #fff;
|
||||
border: 1px solid #00EDE8;
|
||||
|
||||
.cun .item-title::after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total,
|
||||
.el-pagination__jump {
|
||||
color: #fff;
|
||||
.cun .item-village-info{
|
||||
float:left;
|
||||
width:50%;
|
||||
height:80px;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid #00EDE8;
|
||||
.cun .item-grid-count{
|
||||
float:left;
|
||||
height:40px;
|
||||
padding-top:10px;
|
||||
color:#fff;
|
||||
line-height:20px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--border .el-table__cell,
|
||||
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
|
||||
border-right: 1px solid #00EDE8;
|
||||
}
|
||||
|
||||
::v-deep .pagination-container {
|
||||
background: rgba(0, 9, 34, 0.6) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.selectIcon-box {
|
||||
text-align: center;
|
||||
border: 1px solid #eeeeee;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.el-col {
|
||||
padding: 10px 0;
|
||||
border-right: 1px solid #eeeeee;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
|
||||
&.active {
|
||||
.iconfont {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
.cun .item-village-info .item-info{
|
||||
width:100%;
|
||||
height:20px;
|
||||
background-image:none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.hulinyuan{
|
||||
width:250px;
|
||||
}
|
||||
|
||||
.custom-icon-input::before {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
.hulinyuan .street-container-title{
|
||||
height:60px;
|
||||
line-height:60px;
|
||||
background-image:url(/img/gridman/hulinyuan.png);
|
||||
}
|
||||
.hulinyuan .item{
|
||||
border-top:0px;
|
||||
padding:0px;
|
||||
height:238px;
|
||||
background: linear-gradient(180deg, rgba(51,52,36,0.23) 0%, #B67F10 100%);
|
||||
}
|
||||
.hulinyuan .item-title{
|
||||
background: linear-gradient(270deg, rgba(51,51,36,0) 0%, #EAC63C 100%);
|
||||
}
|
||||
.hulinyuan .item-title::after{
|
||||
display:none;
|
||||
}
|
||||
.hulinyuan .item-info{
|
||||
width: calc( 100% - 30px);
|
||||
margin:0 15px;
|
||||
margin-top:10px;
|
||||
background-image: none;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(270deg, rgba(233, 197, 60, 0), rgba(233, 197, 60, 1)) 1 1;
|
||||
}
|
||||
|
||||
.hulinyuan .item-info::after{
|
||||
width:2px;
|
||||
height:12px;
|
||||
top:8px;
|
||||
left:0px;
|
||||
}
|
||||
.wangge{
|
||||
width:329px;
|
||||
}
|
||||
|
||||
.wangge .street-container-title{
|
||||
height:60px;
|
||||
line-height:60px;
|
||||
background-image:url(/img/gridman/wangge.png);
|
||||
}
|
||||
|
||||
.wangge .item{
|
||||
border-top:0px;
|
||||
padding:0px;
|
||||
height:238px;
|
||||
background: linear-gradient(180deg, rgba(51,52,36,0.23) 0%, #B67F10 100%);
|
||||
}
|
||||
.wangge .item-title{
|
||||
background: linear-gradient(270deg, rgba(51,51,36,0) 0%, #EAC63C 100%);
|
||||
}
|
||||
.wangge .item-title::after{
|
||||
display:none;
|
||||
}
|
||||
.wangge .item-info{
|
||||
width: calc( 100% - 30px);
|
||||
margin:0 15px;
|
||||
margin-top:10px;
|
||||
background-image: none;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(270deg, rgba(233, 197, 60, 0), rgba(233, 197, 60, 1)) 1 1;
|
||||
}
|
||||
|
||||
.wangge .item-info::after{
|
||||
width:2px;
|
||||
height:12px;
|
||||
top:8px;
|
||||
left:0px;
|
||||
}
|
||||
.wangge{
|
||||
width:329px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="app-container flex-item">
|
||||
<div class="fh">
|
||||
<el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick"
|
||||
highlight-current-row style="width: 100%;" height="calc(100% - 54px)" @row-click="rowClick"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55">
|
||||
</el-table-column>
|
||||
|
|
@ -594,6 +594,35 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/*滚动条宽度*/
|
||||
height: 10px;
|
||||
/*滚动条高度*/
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
box-shadow: 0px 1px 3px #071e4a inset;
|
||||
/*滚动条的背景区域的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的背景区域的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0px 1px 3px #00a0e9 inset;
|
||||
/*滚动条的内阴影*/
|
||||
border-radius: 10px;
|
||||
/*滚动条的圆角*/
|
||||
background-color: rgba(0, 9, 34, 1);
|
||||
|
||||
/*滚动条的背景颜色*/
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination__jump{
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue