Browse Source
modified: babel.config.js modified: package-lock.json modified: package.json modified: src/api/index.js renamed: src/assets/icon/jiantou-D@2x.png -> src/assets/icon/arrow.png new file: src/assets/icon/arrow2.png renamed: src/assets/icon/框@2x.png -> src/assets/icon/bg-part.png new file: src/assets/icon/dyfc1.png new file: src/assets/icon/dyfc2.png new file: src/assets/icon/dyfc3.png deleted: src/assets/icon/jiantou-D 拷贝@2x.png renamed: src/assets/icon/点1@2x.png -> src/assets/icon/point.png new file: src/components/screen-popup-ydzl/index.vue new file: src/components/screen-popup/index.vue modified: src/main.js new file: src/style/agencySelect.scss modified: src/style/global.scss new file: src/style/left2.scss modified: src/utils/request.js modified: src/views/agencySelect.vue modified: src/views/screenLeft/left1.vue modified: src/views/screenLeft/left2.vuemaster
jiangyuying
2 years ago
23 changed files with 1449 additions and 66 deletions
@ -1,5 +1,12 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/cli-plugin-babel/preset' |
|||
presets: ['@vue/app'], |
|||
plugins: [ |
|||
[ |
|||
'component', |
|||
{ |
|||
libraryName: 'element-ui', |
|||
styleLibraryName: 'theme-chalk' |
|||
} |
|||
] |
|||
] |
|||
} |
|||
|
|||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 831 B |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,128 @@ |
|||
<template> |
|||
<div class="screen-popup-ydzl" |
|||
:style="{height: visible?'65px':'0px', opacity: popupVisible ? '1' : '0','--left': left,'--top': top,'--width':width,'--fontSize':fontSize }"> |
|||
<div class="screen-popup-ydzl-border" |
|||
:style="{overflowY: 'hidden' }"> |
|||
<div class="screen-popup-ydzl-content"> |
|||
<div>{{memberInfo.name}}</div> |
|||
<div>{{memberInfo.phone}}</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'screen-popup-ydzl', |
|||
data () { |
|||
return { |
|||
|
|||
popupVisible: true |
|||
} |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: () => false |
|||
}, |
|||
top: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
|
|||
left: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '174px' |
|||
}, |
|||
fontSize: { |
|||
type: String, |
|||
default: '20px' |
|||
}, |
|||
memberInfo: { |
|||
type: Object, |
|||
default: () => { } |
|||
} |
|||
|
|||
|
|||
}, |
|||
watch: { |
|||
|
|||
// 下拉菜单显示隐藏 |
|||
visible: { |
|||
immediate: true, |
|||
handler: function (value) { |
|||
this.popupVisible = value |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// onChooseItem (item) { |
|||
// this.dataList.forEach(data => { |
|||
// if (data.value === item.value) { |
|||
// data.select = true |
|||
// } else { |
|||
// data.select = false |
|||
// } |
|||
// }) |
|||
// this.$emit('onChooseItem', item) |
|||
// this.popupVisible = false |
|||
// this.$emit('update:visible', false) |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-popup-ydzl { |
|||
width: var(--width); |
|||
|
|||
position: absolute; |
|||
// box-shadow: 0 2px 12px 0 #5c7bc7; |
|||
border: 1px solid #00a4b9; |
|||
color: #fff; |
|||
line-height: 30px; |
|||
font-size: var(--fontSize); |
|||
background: rgb(9, 67, 85); |
|||
z-index: 100000; |
|||
left: var(--left); |
|||
top: var(--top); |
|||
border-radius: 4px; |
|||
max-height: 260px; |
|||
transition: height 0.1s linear, opacity 0.1s linear; |
|||
&-content { |
|||
padding: 5px; |
|||
text-align: center; |
|||
} |
|||
&-border { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
border-radius: 4px; |
|||
box-sizing: border-box; |
|||
// padding: 10px 0 0; |
|||
&::-webkit-scrollbar { |
|||
/*滚动条整体样式*/ |
|||
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ |
|||
height: 1px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
/*滚动条里面小方块*/ |
|||
background: linear-gradient(-90deg, #09b8e5 0%, #09f0e3 99%); |
|||
border-radius: 3px; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
/*滚动条里面轨道*/ |
|||
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|||
background: #428ba2; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,134 @@ |
|||
<template> |
|||
<div class="screen-popup" |
|||
:style="{ opacity: popupVisible ? '1' : '0','--left': left||'','--right': right||'','--top': top||'', '--bottom': bottom||'','--width':width,'--height':height }"> |
|||
<div class="screen-popup-border" |
|||
:style="{overflowY: 'auto' }"> |
|||
<div class="screen-popup-content"> |
|||
{{showContent}} |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'screen-popup', |
|||
data () { |
|||
return { |
|||
|
|||
popupVisible: true |
|||
} |
|||
}, |
|||
props: { |
|||
showContent: { |
|||
type: String, |
|||
required: true, |
|||
default: '' |
|||
}, |
|||
|
|||
visible: { |
|||
type: Boolean, |
|||
default: () => false |
|||
}, |
|||
top: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
bottom: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
left: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
right: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '60px' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '60px' |
|||
} |
|||
}, |
|||
watch: { |
|||
|
|||
// 下拉菜单显示隐藏 |
|||
visible: { |
|||
immediate: true, |
|||
handler: function (value) { |
|||
this.popupVisible = value |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// onChooseItem (item) { |
|||
// this.dataList.forEach(data => { |
|||
// if (data.value === item.value) { |
|||
// data.select = true |
|||
// } else { |
|||
// data.select = false |
|||
// } |
|||
// }) |
|||
// this.$emit('onChooseItem', item) |
|||
// this.popupVisible = false |
|||
// this.$emit('update:visible', false) |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-popup { |
|||
width: var(--width); |
|||
height: var(--height); |
|||
position: absolute; |
|||
// box-shadow: 0 2px 12px 0 #5c7bc7; |
|||
border: 1px solid #00a4b9; |
|||
color: #fff; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
background: rgb(9, 67, 85); |
|||
z-index: 100000; |
|||
left: var(--left); |
|||
bottom: var(--bottom); |
|||
top: var(--top); |
|||
right: var(--right); |
|||
border-radius: 4px; |
|||
max-height: 260px; |
|||
transition: height 0.1s linear, opacity 0.1s linear; |
|||
&-content { |
|||
padding: 10px; |
|||
} |
|||
&-border { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
border-radius: 4px; |
|||
box-sizing: border-box; |
|||
// padding: 10px 0 0; |
|||
&::-webkit-scrollbar { |
|||
/*滚动条整体样式*/ |
|||
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ |
|||
height: 1px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
/*滚动条里面小方块*/ |
|||
background: linear-gradient(-90deg, #09b8e5 0%, #09f0e3 99%); |
|||
border-radius: 3px; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
/*滚动条里面轨道*/ |
|||
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|||
background: #428ba2; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
.agency-select { |
|||
box-sizing: border-box; |
|||
|
|||
// margin-top: 0px; |
|||
margin-left: 39px; |
|||
display: flex; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #fefefe; |
|||
letter-spacing: 3px; |
|||
.name-item { |
|||
height: 45px; |
|||
align-items: center; |
|||
line-height: 40px; |
|||
} |
|||
.item { |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
width: 210px; |
|||
height: 42px; |
|||
padding: 13px 11px 15px 10px; |
|||
margin-left: 20px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: rgba(0, 159, 199, 0.23); |
|||
border-radius: 1px; |
|||
font-size: 15px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: #c1e8ff; |
|||
letter-spacing: 2px; |
|||
|
|||
// white-space: nowrap; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
|
|||
&:hover { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,215 @@ |
|||
.left2 { |
|||
margin-right: 12px; |
|||
} |
|||
.d-title { |
|||
margin-top: 17px; |
|||
margin-left: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
> img { |
|||
width: 26px; |
|||
height: 26px; |
|||
} |
|||
> div { |
|||
font-size: 18px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
margin-left: 2px; |
|||
} |
|||
} |
|||
.grid-title { |
|||
margin-top: 5px; |
|||
height: 40px; |
|||
} |
|||
|
|||
.frame { |
|||
padding: 20px 20px 10px; |
|||
|
|||
&-row { |
|||
width: 580px; |
|||
height: 36px; |
|||
background: #24bef1; |
|||
border-radius: 1px; |
|||
|
|||
font-size: 20px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
text-shadow: 0px 2px 4px #007fa9; |
|||
|
|||
text-align: center; |
|||
line-height: 36px; |
|||
} |
|||
|
|||
&-onerow { |
|||
position: relative; |
|||
margin-top: 5px; |
|||
width: 578px; |
|||
height: 30px; |
|||
background: rgba(36, 190, 241, 0.7); |
|||
border-radius: 2px; |
|||
|
|||
text-align: center; |
|||
line-height: 30px; |
|||
|
|||
.rowitem { |
|||
font-size: 18px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
&-arrow { |
|||
margin-top: 5px; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
> img { |
|||
height: 34px; |
|||
width: 34px; |
|||
} |
|||
} |
|||
|
|||
&-multirow { |
|||
width: 580px; |
|||
height: 60px; |
|||
border: 2px dashed #92b5cd; |
|||
|
|||
border-radius: 2px; |
|||
|
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
.multirowitem { |
|||
position: relative; |
|||
width: 174px; |
|||
height: 30px; |
|||
background-color: rgba(36, 190, 241, 0.7); |
|||
border-radius: 2px; |
|||
|
|||
line-height: 30px; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: rgb(255, 255, 255); |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.grid { |
|||
margin-top: 3px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.grid-item { |
|||
text-align: center; |
|||
|
|||
.frame-arrow2 { |
|||
> img { |
|||
height: 24px; |
|||
width: 24px; |
|||
} |
|||
} |
|||
|
|||
.grid-member { |
|||
width: 285px; |
|||
height: 254px; |
|||
background: rgba(36, 190, 241, 0.3); |
|||
border-radius: 4px; |
|||
box-sizing: border-box; |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
padding: 14px 0 14px 14px; |
|||
|
|||
&-title { |
|||
width: 100px; |
|||
height: 26px; |
|||
background: rgba(255, 255, 255, 0.8); |
|||
border-radius: 2px; |
|||
|
|||
text-align: center; |
|||
font-size: 16px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 500; |
|||
color: #006fbd; |
|||
line-height: 26px; |
|||
} |
|||
|
|||
&-main { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
height: 200px; |
|||
|
|||
.memberitem { |
|||
margin-top: 14px; |
|||
margin-right: 12px; |
|||
width: 76px; |
|||
height: 26px; |
|||
background: rgba(36, 190, 241, 0.8); |
|||
|
|||
border-radius: 2px; |
|||
position: relative; |
|||
|
|||
font-size: 16px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 300; |
|||
color: #ffffff; |
|||
line-height: 26px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
/*滚动条整体样式*/ |
|||
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ |
|||
height: 1px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
/*滚动条里面小方块*/ |
|||
background: linear-gradient(-90deg, #09b8e5 0%, #09f0e3 99%); |
|||
border-radius: 3px; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
/*滚动条里面轨道*/ |
|||
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|||
background: #428ba2; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.left2-static { |
|||
margin-top: 10px 23px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.static-item { |
|||
&-title { |
|||
font-size: 16px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: #c1e8ff; |
|||
} |
|||
&-num { |
|||
font-size: 24px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
@ -1,24 +1,556 @@ |
|||
<template> |
|||
<div class="bg-content left2"> |
|||
<screen-title :titleName="'一网治理'"></screen-title> |
|||
<div> |
|||
<div class="d-title"> |
|||
<img src="./../../assets/icon/point.png" /> |
|||
<div>{{'社区人员架构'}}</div> |
|||
</div> |
|||
|
|||
<div class="frame"> |
|||
<div class="frame-row"> |
|||
{{communityName}} |
|||
</div> |
|||
<div class="frame-arrow"> |
|||
<img src="./../../assets/icon/arrow.png" /> |
|||
|
|||
</div> |
|||
<div class="frame-multirow"> |
|||
<div class="multirowitem" |
|||
ref="showClgb" |
|||
@click="clickItem('showClgb')"> {{'处理干部包联社区'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showClgb'] "> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
|
|||
<div class="multirowitem" |
|||
ref="showYxgz" |
|||
@click="clickItem('showYxgz')"> {{'一线工作组'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showYxgz']"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
<div class="multirowitem" |
|||
ref="showDjzd" |
|||
@click="clickItem('showDjzd')"> {{'党建指导员'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showDjzd']"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
</div> |
|||
<div class="frame-arrow"> |
|||
<img src="./../../assets/icon/arrow.png" /> |
|||
</div> |
|||
<div class="frame-multirow"> |
|||
<div class="multirowitem" |
|||
ref="showSqsj" |
|||
@click="clickItem('showSqsj')"> {{'社区书记'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showSqsj']"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
<div class="multirowitem" |
|||
ref="showSqfsj" |
|||
@click="clickItem('showSqfsj')"> {{'社区副书记'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showSqfsj']"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
<div class="multirowitem" |
|||
ref="showDwwy" |
|||
@click="clickItem('showDwwy')"> {{'党委委员'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showDwwy']"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div class="d-title grid-title"> |
|||
<img src="./../../assets/icon/point.png" /> |
|||
<div>{{'网格人员架构'}}</div> |
|||
<div v-if="isStreet" |
|||
class="agency-select"> |
|||
<div class="item" |
|||
ref="grid" |
|||
@click="onChangeGrid"> |
|||
<div>{{selectGrid.label === '' ? '全部网格' : selectGrid.label}}</div> |
|||
<svg-icon icon-class="bottom-sword" |
|||
fill="#8ec6d8"> |
|||
</svg-icon> |
|||
<screen-dropdown-menu top="45px" |
|||
:menuList="gridList" |
|||
:visible.sync="gridDropMenuVisible" |
|||
:defaultSelected="selectGrid.value" |
|||
@onChooseItem="onChooseGrid"> |
|||
</screen-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="frame"> |
|||
<div class="frame-row"> |
|||
{{gridName}} |
|||
</div> |
|||
<div class="frame-arrow"> |
|||
<img src="./../../assets/icon/arrow.png" /> |
|||
|
|||
</div> |
|||
<div class="frame-onerow"> |
|||
<div class="rowitem" |
|||
ref="showWgzb" |
|||
@click="clickItem('showWgzb')"> {{'网格支部书记'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:width="width" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showWgzb']"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="frame-arrow"> |
|||
<img src="./../../assets/icon/arrow.png" /> |
|||
</div> |
|||
<div class="frame-onerow" |
|||
ref="showWgz" |
|||
@click="clickItem('showWgz')"> |
|||
<div class="rowitem"> {{'网格长'}} |
|||
<screen-popup-ydzl :top="top" |
|||
:left="left" |
|||
:width="width" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showObj['showWgz']"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="grid"> |
|||
<div class="grid-item"> |
|||
<div class="frame-arrow2"> |
|||
<img src="./../../assets/icon/arrow2.png" /> |
|||
</div> |
|||
|
|||
<div class="grid-member"> |
|||
<div class="grid-member-title">{{'专职网格员'}}</div> |
|||
<div v-if="isStreet" |
|||
class="grid-member-main"> |
|||
<div class="memberitem" |
|||
v-for="(item,index) in memberLeftList" |
|||
:key="index" |
|||
:ref="'leftMember'+index" |
|||
@click="clickLeftMemberItem(index)"> |
|||
{{item.name}} |
|||
|
|||
<screen-popup-ydzl :top="topMember" |
|||
:left="leftMember" |
|||
:width="widthMember" |
|||
:fontSize="fontSizeMember" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showLeftMember[index]"> |
|||
</screen-popup-ydzl> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="grid-item"> |
|||
<div class="frame-arrow2"> |
|||
<img src="./../../assets/icon/arrow2.png" /> |
|||
</div> |
|||
|
|||
<div class="grid-member"> |
|||
<div class="grid-member-title">{{'专职网格管理员'}}</div> |
|||
<div v-if="isStreet" |
|||
class="grid-member-main"> |
|||
<div class="memberitem" |
|||
v-for="(item,index) in memberRightList" |
|||
:key="index" |
|||
:ref="'rightMember'+index" |
|||
@click="clickRightMemberItem(index)"> |
|||
{{item.name}} |
|||
<screen-popup-ydzl :top="topMember" |
|||
:left="leftMember" |
|||
:width="widthMember" |
|||
:fontSize="fontSizeMember" |
|||
:memberInfo="memberInfo" |
|||
:visible.sync="showRightMember[index]"> |
|||
</screen-popup-ydzl> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="left2-static"> |
|||
<div class="static-item"> |
|||
<div class="static-item-title">网格支部</div> |
|||
<div class="static-item-num">32</div> |
|||
</div> |
|||
<div class="static-item"> |
|||
<div class="static-item-title">网格支部书记</div> |
|||
<div class="static-item-num">32</div> |
|||
</div> |
|||
<div class="static-item"> |
|||
<div class="static-item-title">网格长</div> |
|||
<div class="static-item-num">45</div> |
|||
</div> |
|||
<div class="static-item"> |
|||
<div class="static-item-title">专职网格员</div> |
|||
<div class="static-item-num">121</div> |
|||
</div> |
|||
<div class="static-item"> |
|||
<div class="static-item-title">专业网格管理员</div> |
|||
<div class="static-item-num">28</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { mapGetters } from "vuex" |
|||
|
|||
export default { |
|||
name: "screen-left2", |
|||
data () { |
|||
return { |
|||
communityName: "社区", |
|||
gridName: "网格", |
|||
gridList: [ |
|||
{ |
|||
name: '第一网格', |
|||
id: '1' |
|||
}, |
|||
{ |
|||
name: '第二网格', |
|||
id: '2' |
|||
}, |
|||
{ |
|||
name: '第三网格', |
|||
id: '3' |
|||
}, |
|||
], |
|||
|
|||
isStreet: false, |
|||
|
|||
top: '33px', |
|||
left: '0px', |
|||
width: '578px', |
|||
|
|||
showObj: { |
|||
showClgb: false, |
|||
showYxgz: false, |
|||
showDjzd: false, |
|||
showSqsj: false, |
|||
showSqfsj: false, |
|||
showDwwy: false, |
|||
|
|||
showWgzb: false, |
|||
showWgz: false, |
|||
}, |
|||
|
|||
gridDropMenuVisible: false, |
|||
selectGrid: { |
|||
value: '1', |
|||
label: '网格1' |
|||
}, |
|||
gridList: [ |
|||
{ |
|||
value: '1', |
|||
label: '网格1' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '网格2' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '网格3' |
|||
}, |
|||
], |
|||
|
|||
memberInfo: { |
|||
duty: '职务', |
|||
name: '张三', |
|||
phone: '15999999999' |
|||
}, |
|||
|
|||
memberLeftList: [ |
|||
{ |
|||
duty: '职务', |
|||
name: '左1', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左2', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左3', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左4', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左5', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左6', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左7', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左8', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左9', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左10', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左11', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左12', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左13', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左14', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左15', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '左16', |
|||
phone: '15111111111' |
|||
} |
|||
], |
|||
memberRightList: [ |
|||
{ |
|||
duty: '职务', |
|||
name: '右1', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '右2', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '右3', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '右4', |
|||
phone: '15111111111' |
|||
}, |
|||
{ |
|||
duty: '职务', |
|||
name: '右5', |
|||
phone: '15111111111' |
|||
}, |
|||
], |
|||
showLeftMember: [], |
|||
showRightMember: [], |
|||
topMember: '26px', |
|||
leftMember: '0px', |
|||
widthMember: '100px', |
|||
fontSizeMember: '15px' |
|||
|
|||
} |
|||
}, |
|||
created () { |
|||
|
|||
}, |
|||
watch: { |
|||
shibeiAId (value) { |
|||
console.log('切换区域id:' + value) |
|||
console.log('切换区域Name:' + this.shibeiName) |
|||
console.log('切换区域类型:' + this.shibeiAgencyType) |
|||
|
|||
this.communityName = this.shibeiName |
|||
if (this.shibeiAgencyType === 'street') { |
|||
this.isStreet = true |
|||
|
|||
} else { |
|||
this.isStreet = false |
|||
} |
|||
|
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiAId', 'shibeiName', 'shibeiAgencyType']) |
|||
}, |
|||
mounted () { |
|||
if (this.shibeiAgencyType === 'street') { |
|||
this.isStreet = true |
|||
this.gridName = this.selectGrid.label |
|||
} else { |
|||
this.isStreet = false |
|||
} |
|||
|
|||
this.showLeftMember = [] |
|||
this.showRightMember = [] |
|||
this.memberLeftList.forEach(element => { |
|||
this.showLeftMember.push(false) |
|||
}); |
|||
this.memberRightList.forEach(element => { |
|||
this.showRightMember.push(false) |
|||
}); |
|||
|
|||
|
|||
window.addEventListener('click', e => { |
|||
if (this.isStreet) { |
|||
for (let key in this.showObj) { |
|||
// debugger |
|||
if (this.$refs[key] && !this.$refs[key].contains(e.target)) { |
|||
if (this.showObj[key]) { |
|||
this.showObj[key] = !this.showObj[key] |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (this.$refs.grid && !this.$refs.grid.contains(e.target)) { |
|||
if (this.gridDropMenuVisible) { |
|||
this.gridDropMenuVisible = !this.gridDropMenuVisible |
|||
} |
|||
} |
|||
|
|||
this.showLeftMember.forEach((element, index) => { |
|||
if (this.$refs['leftMember' + index][0] && !this.$refs['leftMember' + index][0].contains(e.target)) { |
|||
if (this.showLeftMember[index]) { |
|||
const val = !this.showLeftMember[index] |
|||
this.$set(this.showLeftMember, index, val) |
|||
} |
|||
} |
|||
}); |
|||
this.showRightMember.forEach((element, index) => { |
|||
|
|||
if (this.$refs['rightMember' + index][0] && !this.$refs['rightMember' + index][0].contains(e.target)) { |
|||
|
|||
if (this.showRightMember[index]) { |
|||
const val = !this.showRightMember[index] |
|||
this.$set(this.showRightMember, index, val) |
|||
|
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
methods: { |
|||
initShow (type) { |
|||
for (let key in this.showObj) { |
|||
|
|||
if (key !== type) { |
|||
this.showObj[key] = false |
|||
} |
|||
} |
|||
|
|||
}, |
|||
clickItem (type) { |
|||
if (this.isStreet) { |
|||
this.initShow(type) |
|||
this.showObj[type] = !this.showObj[type] |
|||
} |
|||
|
|||
}, |
|||
onChangeGrid () { |
|||
this.gridDropMenuVisible = !this.gridDropMenuVisible |
|||
}, |
|||
onChooseGrid (gridItem) { |
|||
this.selectGrid = gridItem |
|||
this.gridName = this.selectGrid.label |
|||
}, |
|||
clickLeftMemberItem (index) { |
|||
|
|||
const position = (index + 1) % 3//计算在每一行第几个，确定popup的位置 |
|||
console.log(position) |
|||
if (position === 1) {//左1 |
|||
this.leftMember = '0px' |
|||
} else if (position === 2) { |
|||
this.leftMember = '-12px' |
|||
} else if (position === 0) { |
|||
this.leftMember = '-24px' |
|||
} |
|||
|
|||
const val = !this.showLeftMember[index] |
|||
this.$set(this.showLeftMember, index, val) |
|||
|
|||
}, |
|||
clickRightMemberItem (index) { |
|||
const position = (index + 1) % 3//计算在每一行第几个，确定popup的位置 |
|||
console.log(position) |
|||
if (position === 1) {//左1 |
|||
this.leftMember = '0px' |
|||
} else if (position === 2) { |
|||
this.leftMember = '-12px' |
|||
} else if (position === 0) { |
|||
this.leftMember = '-24px' |
|||
} |
|||
|
|||
const val = !this.showRightMember[index] |
|||
this.$set(this.showRightMember, index, val) |
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" src="style/left2.scss" scoped></style> |
|||
<style lang="scss" src="style/agencySelect.scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
.left2 { |
|||
margin-right: 12px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue