Browse Source

党群服务站

shibei_master
zhaoyongnian 3 years ago
parent
commit
b5d5f8c60d
  1. 2
      src/views/modules/plugins/power/poweraxis-add-or-update.vue
  2. 242
      src/views/modules/plugins/power/servicestation.vue
  3. 303
      src/views/modules/plugins/power/servicestationForm.vue
  4. 240
      src/views/modules/plugins/power/servicestationTable.vue

2
src/views/modules/plugins/power/poweraxis-add-or-update.vue

@ -81,12 +81,14 @@
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
readonly="true"
v-model="dataForm.longitude">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
readonly="true"
v-model="dataForm.latitude">
</el-input>
</div>

242
src/views/modules/plugins/power/servicestation.vue

@ -0,0 +1,242 @@
<template>
<div>
<div class="div_search">
<el-form :rules="dataRule" :inline="true">
<el-form-item label="所属组织" prop="deptName">
<el-cascader
style="width:350px"
placeholder="请选择所属组织"
:options="agencytree"
v-model="agencyId"
:props="{ expandTrigger: 'hover', label: 'orgName', value: 'orgId', children: 'subOrgList' }"
clearable/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="loadTree()">加载动力主轴</el-button>
</el-form-item>
</el-form>
</div>
<div class="div_main">
<div :style="{height:rowHeight}"
class="div_tree">
<el-input placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-scrollbar :style="{height:treeHeight}"
class="scrollar">
<el-tree ref="ref_tree"
v-loading="treeLoading"
class="filter_tree"
:data="treeData"
:props="defaultProps"
:highlight-current="true"
node-key="id"
:expand-on-click-node="false"
default-expand-all
:filter-node-method="filterNode"
@node-click="handleNodeClick">
</el-tree>
</el-scrollbar>
</div>
<div :style="{height:rowHeight}"
class="div_table">
<servicestation-table :axisStructId="axisStructId" ref="ref_communityTable"></servicestation-table>
</div>
</div>
</div>
</template>
<script>
import CDialog from '@c/CDialog'
import servicestationTable from './servicestationTable'
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
export default {
data () {
return {
agencytree: [], //
agencyId: '',
filterText: '',
treeLoading: false,
treeData: [],
defaultProps: {
children: 'children',
label: 'name'
},
selTreeObj: {},
centerPoint: [],
axisStructId: '' // id
}
},
async mounted () {
// this.treeLoading = true
// await this.loadTree()
await this.getAgencyTree()
// this.treeLoading = false
},
computed: {
rowHeight () {
return this.$store.state.inIframe ? this.clientHeight - 230 + this.iframeHeight + 'px' : this.clientHeight - 230 + 'px'
},
treeHeight () {
return this.$store.state.inIframe ? this.clientHeight - 310 + this.iframeHeight + 'px' : this.clientHeight - 310 + 'px'
},
...mapGetters(['clientHeight', 'iframeHeight']),
dataRule () {
return {
deptName:[
{ required: true, message: "请选择", trigger: "blur" }
]
}
}
},
methods: {
async loadTree () {
this.axisStructId = ''
if (this.agencyId.length === 0 || !this.agencyId) {
return this.$message.error('请选择所属组织')
}
this.treeLoading = true
const url = "/pli/power/data/axis/structTree"
let params = {
agencyId: this.agencyId[this.agencyId.length-1]
}
const { data, code, msg } = await requestPost(url, params)
this.treeLoading = false
if (code === 0) {
this.treeData = data
} else {
this.$message.error(msg)
}
},
handleNodeClick (obj) {
this.axisStructId = obj.id
},
filterNode (value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
//
async getAgencyTree(){
const url = '/data/aggregator/org/agencytree'
let params = {
agencyId:this.agencyId,
client:'gov'
}
const { data, code, msg } = await requestPost(url,params)
if (code === 0) {
let _data
if (data) {
_data = this.removeByOrgType(data, 'agency')
if (_data) {
this.agencytree = this.removeEmptySubOrgList(_data)
}
}
} else {
this.$message.error(msg)
}
},
removeByOrgType (orgArray, orgType) {
if (orgArray && orgArray.length > 0) {
for (let p = orgArray.length - 1; p >= 0; p--) {
let orgInfo = orgArray[p]
if (orgInfo) {
if (orgInfo.orgType !== orgType) {
orgArray.splice(p, 1)
} else {
this.removeByOrgType(orgInfo.subOrgList, orgType)
}
}
}
}
return orgArray
},
removeEmptySubOrgList (orgArray) {
orgArray.forEach((orgInfo) => {
if (orgInfo && orgInfo.subOrgList) {
if (orgInfo.subOrgList.length === 0) {
orgInfo.subOrgList = undefined
} else {
this.removeEmptySubOrgList(orgInfo.subOrgList)
}
}
})
return orgArray;
}
},
watch: {
filterText (val) {
this.$refs.ref_tree.filter(val);
}
},
components: {
servicestationTable, CDialog
}
}
</script>
<style lang="scss" scoped >
.div_search {
width: calc(100% - 5px);
background: #ffffff;
border-radius: 4px;
padding: 30px 20px 5px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.div_main {
margin-top: 10px;
display: flex;
}
.scrollar {
margin-top: 10px;
}
.div_tree {
flex: 0 0 280px;
background-color: #ffffff;
border-radius: 5px;
padding: 10px;
overflow-y: hidden;
}
.filter_tree {
overflow-x: auto;
}
.div_table {
margin-left: 15px;
// flex: 1;
width: calc(100% - 300px);
background-color: #ffffff;
border-radius: 5px;
padding: 10px;
}
.div_btn {
margin-top: 20px;
}
.row {
padding: 10px;
}
</style>
<style>
/* .aui-content > .el-tabs > .el-tabs__content {
padding: 0px;
} */
.el-tree-node:focus > .el-tree-node__content {
/* background-color: #ccc !important; */
color: #2195fe;
}
</style>
<style lang="scss" scoped>
.div_tree {
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
}
</style>

303
src/views/modules/plugins/power/servicestationForm.vue

@ -0,0 +1,303 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form ref="ref_form"
:inline="true"
:model="dataForm"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form">
<el-form-item label="服务站名称"
prop="name"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入服务站名称"
v-model="dataForm.name">
</el-input>
</el-form-item>
<el-form-item label="服务站地址"
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入服务站地址"
v-model="dataForm.address">
</el-input>
</el-form-item>
<el-form-item label="服务站坐标"
prop="longitude"
label-width="150px"
style="display: block">
<div style="width:500px">
<el-input class="item_width_4"
maxlength="50"
placeholder="请输入关键字"
v-model="keyWords">
</el-input>
<el-button style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap">查询</el-button>
<div id="app"
class="div_map"></div>
<div style="margin-top: 10px">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
readonly="true"
v-model="dataForm.longitude">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
readonly="true"
v-model="dataForm.latitude">
</el-input>
</div>
</div>
</el-form-item>
<el-form-item label-width="150px" label="排序">
<el-input-number v-model="dataForm.sort" :min="0" :max="10" label="请输入排序"></el-input-number>
</el-form-item>
</el-form>
</div>
<div class="div_btn">
<el-button size="small"
@click="handleCancle"> </el-button>
<el-button size="small"
v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"> </el-button>
</div>
</div>
</template>
<script>
import { requestPost } from '@/js/dai/request'
var map
var search
var markers
var infoWindowList
let loading //
export default {
data () {
return {
formType: 'add', // addeditdetail
btnDisable: false,
dataForm: {
structReferenceId: '', //ID
name: '', //
address: '', //
longitude: '', //
latitude: '', //
sort: '', //
},
keyWords: ''
}
},
components: {},
mounted () {
this.initMap()
},
methods: {
async initForm (type, row, agencyObj) {
this.$refs.ref_form.resetFields();
this.agencyObj = agencyObj
this.formType = type
console.log(row)
if (row) {
this.dataForm = JSON.parse(JSON.stringify(row))
map.setCenter(new TMap.LatLng(this.dataForm.latitude, this.dataForm.longitude))
this.setMarker(this.dataForm.latitude, this.dataForm.longitude)
}
// else {
// map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude))
// }
},
// init
initMap () {
//
var center = new window.TMap.LatLng(36.0722275, 120.38945519)
// map TMap.Map()
map = new window.TMap.Map(document.getElementById('app'), {
center: center, //
zoom: 17.2, //
pitch: 43.5, //
rotation: 45 //
})
search = new window.TMap.service.Search({ pageSize: 10 })
//
markers = new TMap.MultiMarker({
map: map,
geometries: []
})
infoWindowList = Array(10)
//
map.on('panend', () => {
this.handleMoveCenter()
})
this.handleMoveCenter()
},
setMarker (lat, lng) {
markers.setGeometries([])
markers.add([
{
id: '4',
styleId: 'marker',
position: new TMap.LatLng(lat, lng),
properties: {
title: 'marker4'
}
}
])
},
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close()
})
infoWindowList.length = 0
markers.setGeometries([])
//
search
.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds()
})
.then((result) => {
let { data } = result
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng }
} = data[0]
map.setCenter(new TMap.LatLng(lat, lng))
this.setMarker(lat, lng)
this.dataForm.latitude = lat
this.dataForm.longitude = lng
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter () {
//
const center = map.getCenter()
const lat = center.getLat()
const lng = center.getLng()
this.dataForm.latitude = lat
this.dataForm.longitude = lng
this.setMarker(lat, lng)
},
async handleComfirm () {
this.btnDisable = true
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.$refs['ref_form'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
} else {
this.addCommunity()
}
})
},
async addCommunity () {
let url = ''
this.dataForm.structReferenceId = this.axisStructId
if (this.formType === 'add') {
url = '/pli/power/serviceStation/save'
} else {
url = '/pli/power/serviceStation/update'
}
const { data, code, msg } = await requestPost(url, this.dataForm)
if (code === 0) {
this.$message({
type: 'success',
message: '操作成功'
})
this.resetData()
this.$emit('dialogOk')
this.btnDisable = false
} else {
this.btnDisable = false
this.$message.error(msg)
}
},
handleCancle () {
this.resetData()
this.$emit('dialogCancle')
},
resetData () {
this.keyWords = ''
this.dataForm = {
name: '', //
address: '', //
longitude: '', //
latitude: '' //
}
}
},
computed: {
dataRule () {
return {
name: [
{ required: true, message: '服务站名称不能为空', trigger: 'blur' },
{
min: 1,
max: 50,
message: '服务站名称长度在 1 到 50个字符',
trigger: 'blur'
}
],
address: [
{ required: true, message: '详细地址不能为空', trigger: 'blur' }
],
longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]
}
},
propertyRule () {
name: [
{ required: true, message: '物业名称不能为空', trigger: 'blur' }
// { min: 1, max: 50, message: ' 1 50', trigger: 'blur' }
]
}
},
props: {
axisStructId: { // id
type: String,
default: ''
}
},
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManageForm.scss";
</style>

240
src/views/modules/plugins/power/servicestationTable.vue

@ -0,0 +1,240 @@
<template>
<div>
<div class="div_search">
<div class="resi-cell">
<div class="resi-cell-label">服务站名</div>
<div class="resi-cell-value">
<el-input v-model="ownerName"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入服务站名">
</el-input>
</div>
</div>
<el-button style="margin-left:10px"
class="diy-button--search"
size="small"
@click="handleSearch">查询</el-button>
</div>
<div class="div_btn">
<el-button style=""
class="diy-button--add"
size="small"
@click="handleAdd">添加</el-button>
</div>
<div class="div_table">
<el-table ref="ref_table"
:data="tableData"
border
:height="tableHeight"
v-loading="tableLoading"
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
style="width: 100%">
<el-table-column prop="name"
label="服务站名称"
width="150">
</el-table-column>
<el-table-column prop="address"
label="服务站地址">
</el-table-column>
<el-table-column prop="createdTime"
label="创建时间">
</el-table-column>
<el-table-column label="操作"
fixed="right"
width="120"
header-align="center"
align="center"
class="operate">
<template slot-scope="scope">
<el-button type="text"
class="div-table-button--delete"
size="small"
@click="handleDelete(scope.row.id)">删除</el-button>
<el-button type="text"
class="div-table-button--edit"
size="small"
@click="handleEdit(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total"
:total="total">
</el-pagination>
</div>
</div>
<!-- 修改弹出框 -->
<el-dialog :visible.sync="formShow"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="formTitle"
width="850px"
top="5vh"
class="dialog-h"
@closed="diaClose">
<servicestation-form ref="ref_form"
@dialogCancle="addFormCancle"
@dialogOk="addFormOk"
:axisStructId="axisStructId"></servicestation-form>
</el-dialog>
</div>
</template>
<script>
import ServicestationForm from './servicestationForm'
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
export default {
data () {
return {
total: 0,
pageSize: 20,
pageNo: 0,
tableLoading: false,
ownerName: '',
tableData: [],
//form
formShow: false,
formTitle: '添加'
}
},
components: {
ServicestationForm
},
computed: {
tableHeight () {
return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeight : this.clientHeight - 410
},
...mapGetters(['clientHeight', 'iframeHeight'])
},
methods: {
async loadTable () {
this.tableLoading = true
const url = "/pli/power/serviceStation/page"
let params = {
pageSize: this.pageSize,
pageNo: this.pageNo,
axisStructId: this.axisStructId,
ownerName: this.ownerName
}
const { data, code, msg, total } = await requestPost(url, params)
if (code === 0) {
this.total = data.total || 0;
this.tableData = data.list ? data.list.map((item) => { return item }) : []
} else {
this.$message.error(msg)
}
this.tableLoading = false
},
//
async handleDelete (id) {
this.$confirm("确认删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.deleteKernelhousehold(id)
}).catch(err => {
console.log('取消删除')
})
},
async deleteKernelhousehold (id) {
const url = "/pli/power/serviceStation/delete"
const { data, code, msg } = await requestPost(url, [id])
if (code === 0) {
this.$message({
type: "success",
message: "删除成功"
});
this.loadTable()
} else {
this.$message.error(msg)
}
},
handleSizeChange (val) {
this.pageSize = val
this.pageNo = 1
this.loadTable()
},
handleCurrentChange (val) {
this.pageNo = val
this.loadTable()
},
handleSearch () {
if (!this.axisStructId) {
return this.$message.error('请选择动力主轴节点')
}
this.loadTable()
},
diaClose () {
// this.$refs.ref_form.resetData()
this.formShow = false
},
handleAdd () {
if (this.axisStructId) {
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('add', null, {})
})
} else {
return this.$message.error('请选择动力主轴节点')
}
},
//
handleEdit (row) {
this.formTitle = '修改'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('edit', row, {})
})
},
addFormCancle () {
this.formShow = false
},
addFormOk () {
this.formShow = false
this.loadTable()
},
},
props: {
axisStructId: {
type: String,
default: '',
}
},
watch: {
axisStructId (newName) {
if (newName) {
this.pageSize = 20
this.pageNo = 1
this.loadTable()
} else {
this.pageSize = 20
this.pageNo = 0
this.total = 0;
this.tableData = []
}
}
},
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManage.scss";
</style>
<style >
.el-message.is-closable .el-message__content {
line-height: 20px;
}
</style>
Loading…
Cancel
Save