jiangyy
2 years ago
33 changed files with 731 additions and 419 deletions
@ -0,0 +1,2 @@ |
|||
NODE_ENV=development |
|||
VUE_APP_SCREEN=dev |
|||
@ -0,0 +1,3 @@ |
|||
NODE_ENV=production |
|||
|
|||
VUE_APP_SCREEN=prod |
|||
@ -0,0 +1,2 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_SCREEN=prod:sit |
|||
@ -0,0 +1,2 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_SCREEN=prod:uat |
|||
@ -0,0 +1,14 @@ |
|||
import request from 'utils/request' |
|||
import config from 'utils/config' |
|||
|
|||
const baseURL = config.screenBaseUrl |
|||
|
|||
// 获取下拉框组织机构tree
|
|||
export function getOrgTree() { |
|||
return request({ |
|||
baseURL, |
|||
url: '/shibei/data/report/screen/agency/tree', |
|||
method: 'POST', |
|||
data: {} |
|||
}) |
|||
} |
|||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<div class="screen-title"> |
|||
<img v-if="type==='long'" |
|||
class="screen-title-image" |
|||
src="./../../assets/icon/title-content.png" /> |
|||
<img v-else |
|||
class="screen-title-image" |
|||
src="./../../assets/icon/title-content-half.png" /> |
|||
<div class="screen-title-name"> {{titleName}}</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'screen-title', |
|||
data () { |
|||
return { |
|||
dataList: [], |
|||
dropdownMenuVisible: true |
|||
} |
|||
}, |
|||
props: { |
|||
titleName: { |
|||
type: String, |
|||
required: true, |
|||
default: '' |
|||
}, |
|||
type: { |
|||
type: String, |
|||
required: false, |
|||
default: 'long' |
|||
} |
|||
|
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-title { |
|||
height: 50px; |
|||
width: 620px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
|
|||
&-image { |
|||
height: 100%; |
|||
} |
|||
&-name { |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 49px; |
|||
letter-spacing: 2px; |
|||
|
|||
font-size: 22px; |
|||
font-family: MF LangQian (Noncommercial); |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #ffffff; |
|||
text-shadow: 0px 2px 4px #009ba9; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,26 +1,14 @@ |
|||
const getter = { |
|||
scale: state => state.basic.scale, |
|||
agencyId: state => state.anningScreen.agencyId, |
|||
monthId: state => state.anningScreen.monthId, |
|||
shibeiScale: state => state.shibeiScreen.shibeiScale, |
|||
shibeiAId: state => state.shibeiScreen.shibeiAId, |
|||
shibeiAgencyType: state => state.shibeiScreen.shibeiAgencyType, |
|||
shibeiMapCenter: state => state.shibeiScreen.shibeiMapCenter, |
|||
projectBoxVisible: state => state.shibeiScreen.projectBoxVisible, |
|||
projectId: state => state.shibeiScreen.projectId, |
|||
standardScale: state => state.standardScreen.standardScale, |
|||
standardAId: state => state.standardScreen.standardAId, |
|||
standardAgencyType: state => state.standardScreen.standardAgencyType, |
|||
standardMapCenter: state => state.standardScreen.standardMapCenter, |
|||
standardProjectBoxVisible: state => state.standardScreen.standardProjectBoxVisible, |
|||
standardProjectId: state => state.standardScreen.standardProjectId, |
|||
luzhouScale: state => state.luzhouScreen.luzhouScale, |
|||
luzhouAId: state => state.luzhouScreen.luzhouAId, |
|||
luzhouAgencyType: state => state.luzhouScreen.luzhouAgencyType, |
|||
luzhouMapCenter: state => state.luzhouScreen.luzhouMapCenter, |
|||
changjiangScale: state => state.changjiangScreen.changjiangScale, |
|||
changjiangDeptId: state => state.changjiangScreen.changjiangDeptId, |
|||
changjiangDeptName: state => state.changjiangScreen.changjiangDeptName |
|||
scale: (state) => state.basic.scale, |
|||
agencyId: (state) => state.anningScreen.agencyId, |
|||
monthId: (state) => state.anningScreen.monthId, |
|||
shibeiScale: (state) => state.shibeiScreen.shibeiScale, |
|||
shibeiAId: (state) => state.shibeiScreen.shibeiAId, |
|||
shibeiName: (state) => state.shibeiScreen.shibeiName, |
|||
shibeiAgencyType: (state) => state.shibeiScreen.shibeiAgencyType, |
|||
shibeiMapCenter: (state) => state.shibeiScreen.shibeiMapCenter, |
|||
projectBoxVisible: (state) => state.shibeiScreen.projectBoxVisible, |
|||
projectId: (state) => state.shibeiScreen.projectId |
|||
} |
|||
|
|||
export default getter |
|||
|
|||
@ -1,236 +0,0 @@ |
|||
<template> |
|||
<div class="agency-select"> |
|||
<div class="item">{{cityName}}</div> |
|||
<div class="item">{{districtName}}</div> |
|||
<div class="item" |
|||
ref="street" |
|||
@click="onChangeStreet"> |
|||
<div>{{selectStreet.label === '全部党工委' ? '党工委' : selectStreet.label}}</div> |
|||
<svg-icon icon-class="bottom-sword" |
|||
fill="#fff"> |
|||
</svg-icon> |
|||
<screen-dropdown-menu top="40px" |
|||
:menuList="streetList" |
|||
:visible.sync="streetDropMenuVisible" |
|||
:defaultSelected="selectStreet.value" |
|||
@onChooseItem="onChooseStreet"> |
|||
</screen-dropdown-menu> |
|||
</div> |
|||
<div class="item" |
|||
ref="community" |
|||
@click="onChangeCommunity"> |
|||
<div>{{selectCommunity.label === '全部社区' ? '社区' : selectCommunity.label}}</div> |
|||
<svg-icon icon-class="bottom-sword" |
|||
fill="#fff"> |
|||
</svg-icon> |
|||
<screen-dropdown-menu top="40px" |
|||
:menuList="communityList" |
|||
:visible.sync="communityDropMenuVisible" |
|||
:defaultSelected="selectCommunity.value" |
|||
@onChooseItem="onChooseCommunity"> |
|||
</screen-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// import { getOrgTree } from 'api/shibeiScreen/screenContentLeft' |
|||
import { mapGetters, mapActions } from 'vuex' |
|||
export default { |
|||
name: 'agency-select', |
|||
data () { |
|||
return { |
|||
streetList: [], |
|||
communityList: [{ |
|||
label: '全部社区', |
|||
value: '', |
|||
center: [] |
|||
}], |
|||
selectStreet: { |
|||
label: '全部党工委', |
|||
value: '', |
|||
center: [] |
|||
}, |
|||
selectCommunity: { |
|||
label: '全部社区', |
|||
value: '', |
|||
center: [] |
|||
}, |
|||
streetDropMenuVisible: false, |
|||
communityDropMenuVisible: false, |
|||
cityName: '青岛市', |
|||
districtName: '' |
|||
} |
|||
}, |
|||
created () { |
|||
// this.getOrgTree() |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiAId', 'shibeiAgencyType']) |
|||
}, |
|||
watch: { |
|||
shibeiAId (value) { |
|||
if (this.shibeiAgencyType === 'district') { |
|||
this.communityList = [{ label: '全部社区', value: '', center: [] }] |
|||
this.selectStreet = { label: '全部党工委', value: '', center: [] } |
|||
this.selectCommunity = { label: '全部社区', value: '', center: [] } |
|||
} else if (this.shibeiAgencyType === 'community') { |
|||
const item = this.streetList.find(item => item.value === this.shibeiAId) |
|||
this.selectStreet = { label: item.label, value: item.value, center: item.centerMark } |
|||
this.selectCommunity = { label: '全部社区', value: '', center: [] } |
|||
this.communityList = [{ |
|||
label: '全部社区', value: '', center: [] |
|||
}] |
|||
this.communityList = [...this.communityList, ...item.children] |
|||
} else if (this.shibeiAgencyType === 'grid') { |
|||
this.recurrenceAgencyId(this.shibeiAId, this.streetList) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
window.addEventListener('click', e => { |
|||
if (this.$refs.street && !this.$refs.street.contains(e.target)) { |
|||
if (this.streetDropMenuVisible) { |
|||
this.streetDropMenuVisible = !this.streetDropMenuVisible |
|||
} |
|||
} |
|||
if (this.$refs.community && !this.$refs.community.contains(e.target)) { |
|||
if (this.communityDropMenuVisible) { |
|||
this.communityDropMenuVisible = !this.communityDropMenuVisible |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
...mapActions({ |
|||
set_shibeiAgencyId: 'SET_SHIBEIAGENCYID', |
|||
set_shibeiAgencyType: 'SET_SHIBEIAGENCYTYPE', |
|||
set_shibeiMapCenter: 'SET_SHIBEIMAPCENTER' |
|||
}), |
|||
async getOrgTree () { |
|||
try { |
|||
const res = await getOrgTree() |
|||
console.log(res) |
|||
this.streetList = [] |
|||
this.streetList.push({ |
|||
label: '全部党工委', |
|||
value: '', |
|||
center: [], |
|||
children: [] |
|||
}) |
|||
this.districtName = res.data.label |
|||
this.streetList = [...this.streetList, ...res.data.children] |
|||
} catch (err) { |
|||
console.error(err) |
|||
} |
|||
}, |
|||
onChangeStreet () { |
|||
this.streetDropMenuVisible = !this.streetDropMenuVisible |
|||
}, |
|||
onChangeCommunity () { |
|||
this.communityDropMenuVisible = !this.communityDropMenuVisible |
|||
}, |
|||
onChooseStreet (item) { |
|||
this.selectStreet = { |
|||
label: item.label, |
|||
value: item.value, |
|||
center: item.centerMark || item.center || [] |
|||
} |
|||
this.selectCommunity = { |
|||
label: '全部社区', |
|||
value: '', |
|||
center: [] |
|||
} |
|||
this.communityList = [] |
|||
this.communityList.push({ |
|||
label: '全部社区', |
|||
value: '', |
|||
center: [] |
|||
}) |
|||
this.communityList = [...this.communityList, ...item.children] |
|||
if (this.selectCommunity.value) { |
|||
this.set_shibeiAgencyId(this.selectCommunity.value) |
|||
this.set_shibeiAgencyType('grid') |
|||
this.set_shibeiMapCenter(this.selectCommunity.center) |
|||
} else if (this.selectStreet.value) { |
|||
this.set_shibeiAgencyId(this.selectStreet.value) |
|||
this.set_shibeiAgencyType('community') |
|||
this.set_shibeiMapCenter(this.selectStreet.center) |
|||
} else { |
|||
// this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b') |
|||
this.set_shibeiAgencyId('1175270520603930625') |
|||
this.set_shibeiAgencyType('district') |
|||
// this.set_shibeiMapCenter([120.312565, 36.021688]) |
|||
this.set_shibeiMapCenter([120.364165, 36.103091]) |
|||
} |
|||
}, |
|||
onChooseCommunity (item) { |
|||
this.selectCommunity = { |
|||
label: item.label, |
|||
value: item.value, |
|||
center: item.centerMark |
|||
} |
|||
if (this.selectCommunity.value) { |
|||
this.set_shibeiAgencyId(this.selectCommunity.value) |
|||
this.set_shibeiAgencyType('grid') |
|||
this.set_shibeiMapCenter(this.selectCommunity.center) |
|||
} else if (this.selectStreet.value) { |
|||
this.set_shibeiAgencyId(this.selectStreet.value) |
|||
this.set_shibeiAgencyType('community') |
|||
this.set_shibeiMapCenter(this.selectStreet.center) |
|||
} else { |
|||
// this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b') |
|||
this.set_shibeiAgencyId('1175270520603930625') |
|||
this.set_shibeiAgencyType('district') |
|||
// this.set_shibeiMapCenter([120.312565, 36.021688]) |
|||
this.set_shibeiMapCenter([120.364165, 36.103091]) |
|||
} |
|||
}, |
|||
recurrenceAgencyId (agencyId, list) { |
|||
try { |
|||
list.forEach(item => { |
|||
if (item.children && item.children.length > 0) { |
|||
if (item.value === agencyId) { |
|||
throw (item) |
|||
} else { |
|||
if (item.children && item.children.length > 0) { |
|||
this.recurrenceAgencyId(agencyId, item.children) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
} catch (err) { |
|||
this.selectCommunity = { label: err.label, value: err.value, center: err.centerMark } |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.agency-select { |
|||
width: 100%; |
|||
height: 40px; |
|||
box-sizing: border-box; |
|||
padding-bottom: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
.item { |
|||
width: 100%; |
|||
height: 32px; |
|||
background: #031b3d; |
|||
border: 1px solid #03327e; |
|||
border-radius: 3px; |
|||
color: #fefefe; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 17px; |
|||
position: relative; |
|||
& + .item { |
|||
margin-left: 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<div class="screen-center"> |
|||
screen-left |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: "screen-center", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-center { |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="screen-content"> |
|||
<div class="screen-content-left"> |
|||
<img class="screen-image" |
|||
src="./../assets/icon/contentLeft.png" /> |
|||
</div> |
|||
<screen-left></screen-left> |
|||
<screen-center></screen-center> |
|||
<screen-right></screen-right> |
|||
<div class="screen-content-right"> |
|||
<img class="screen-image" |
|||
src="./../assets/icon/contentRight.png" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenLeft from "./screenLeft/screenLeft"; |
|||
import screenCenter from "./screenCenter/screenCenter"; |
|||
import screenRight from "./screenRight/screenRight"; |
|||
export default { |
|||
name: "screen-content", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
screenLeft, |
|||
screenCenter, |
|||
screenRight |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-content { |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
padding: 18px 0 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
&-left { |
|||
position: absolute; |
|||
left: 0; |
|||
} |
|||
&-right { |
|||
position: absolute; |
|||
right: 0; |
|||
} |
|||
.screen-image { |
|||
height: 986px; |
|||
width: 30px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,91 +0,0 @@ |
|||
<template> |
|||
<div id="screen-header"> |
|||
<div class="main-title"> |
|||
<div class="title-img" |
|||
:style="{ |
|||
width: imgWidth + 'px', |
|||
height: imgHeight + 'px'}"> |
|||
<img :src="titleImg" /> |
|||
|
|||
</div> |
|||
<div class="title-span">党建引领基层治理大数据</div> |
|||
</div> |
|||
<div class="subtitle-left"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
</div> |
|||
<div class="subtitle-right1"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
</div> |
|||
<div class="subtitle-right2"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { debounce } from './../utils/common' |
|||
export default { |
|||
name: 'screen-header', |
|||
data () { |
|||
return { |
|||
titleImg: require('./../assets/icon/title.png'), |
|||
imgWidth: 2110, |
|||
imgHeight: 120, |
|||
scale: 1 |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.setScale() |
|||
window.addEventListener('resize', debounce(this.setScale)) |
|||
}, |
|||
methods: { |
|||
getScale () { |
|||
const oHeader = document.querySelector('#screen-header') |
|||
const vh = oHeader.clientHeight / this.imgHeight |
|||
const vw = oHeader.clientWidth / this.imgWidth |
|||
return vh < vw ? vw : vh |
|||
}, |
|||
setScale () { |
|||
this.scale = this.getScale() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
.screen-header { |
|||
display: flex; |
|||
} |
|||
.main-title { |
|||
width: 100%; |
|||
height: 120px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.title-img { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform-origin: 0 0; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
.title-span { |
|||
font-size: 46px; |
|||
font-family: "HYZongYiJ"; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
letter-spacing: 8px; |
|||
|
|||
position: absolute; |
|||
left: 50%; |
|||
top: 35%; |
|||
transform-origin: 0 0; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<div class="bg-content left1"> |
|||
<div class='b-dlzz'> |
|||
<screen-title :titleName="'动力主轴'"></screen-title> |
|||
<div class="dlzz-tree">图表</div> |
|||
<div class="dlzz-static"> |
|||
<div class="dlzz-static-item"> |
|||
<img class="item-img" |
|||
src="./../../assets/icon/dlzz-lyxz.png" /> |
|||
<div class="item-content"> |
|||
<div class="item-title">{{lyxz.title}}</div> |
|||
<div class="item-num">{{lyxz.num}}</div> |
|||
</div> |
|||
</div> |
|||
<div class="dlzz-static-item"> |
|||
<img class="item-img" |
|||
src="./../../assets/icon/dlzz-lyxz.png" /> |
|||
<div class="item-content"> |
|||
<div class="item-title">{{dyzx.title}}</div> |
|||
<div class="item-num">{{dyzx.num}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dlzz-static-item"> |
|||
<img class="item-img" |
|||
src="./../../assets/icon/dlzz-lyxz.png" /> |
|||
<div class="item-content"> |
|||
<div class="item-title">{{dqff.title}}</div> |
|||
<div class="item-num">{{dqff.num}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dlzz-static-item"> |
|||
<img class="item-img" |
|||
src="./../../assets/icon/dlzz-lyxz.png" /> |
|||
<div class="item-content"> |
|||
<div class="item-title">{{yz.title}}</div> |
|||
<div class="item-num">{{yz.num}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class='b-dyfc'> |
|||
<screen-title :titleName="'党员风采'"></screen-title> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: "screen-left1", |
|||
data () { |
|||
return { |
|||
lyxz: { |
|||
title: '楼院党小组', |
|||
num: 32 |
|||
}, |
|||
dyzx: { |
|||
title: '党员中心户', |
|||
num: 187 |
|||
}, |
|||
dqff: { |
|||
title: '党群服务中心', |
|||
num: 32 |
|||
}, |
|||
yz: { |
|||
title: '驿站总数', |
|||
num: 45 |
|||
}, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.left1 { |
|||
margin-right: 12px; |
|||
|
|||
.b-dlzz { |
|||
box-sizing: border-box; |
|||
height: 585px; |
|||
|
|||
.dlzz-tree { |
|||
height: 455px; |
|||
} |
|||
|
|||
.dlzz-static { |
|||
background: linear-gradient( |
|||
0deg, |
|||
rgba(0, 204, 211, 0.38) 0%, |
|||
rgba(10, 218, 234, 0) 100% |
|||
); |
|||
|
|||
box-sizing: border-box; |
|||
padding: 14px 24px 16px 17px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
&-item { |
|||
display: flex; |
|||
.item-img { |
|||
height: 50px; |
|||
width: 50px; |
|||
} |
|||
|
|||
.item-content { |
|||
margin-left: 6px; |
|||
|
|||
.item-title { |
|||
font-size: 16px; |
|||
font-family: Alibaba PuHuiTi; |
|||
font-weight: 400; |
|||
color: #c1e8ff; |
|||
opacity: 0.75; |
|||
} |
|||
|
|||
.item-num { |
|||
font-size: 24px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.b-dyfc { |
|||
margin-top: 8px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,24 @@ |
|||
<template> |
|||
<div class="bg-content left2"> |
|||
<screen-title :titleName="'一网治理'"></screen-title> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: "screen-left2", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.left2 { |
|||
margin-right: 12px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
<template> |
|||
<div class="bg-content left3"> |
|||
<div class='b-ljdw'> |
|||
<screen-title :titleName="'联建单位分析'"></screen-title> |
|||
</div> |
|||
<div class='b-ljhd'> |
|||
<screen-title :titleName="'联建活动'"></screen-title> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: "screen-left3", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.left3 { |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
.b-ljdw { |
|||
height: 461px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,35 @@ |
|||
<template> |
|||
<div class=" screen-left"> |
|||
<left-1></left-1> |
|||
<left-2></left-2> |
|||
<left-3></left-3> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import left1 from "./left1" |
|||
import left2 from "./left2" |
|||
import left3 from "./left3" |
|||
|
|||
export default { |
|||
name: "screen-left", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
left1, |
|||
left2, |
|||
left3 |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-left { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-left: 36px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<div class="bg-content right1"> |
|||
<div class='b-qzys'> |
|||
<screen-title :titleName="'群众议事'"></screen-title> |
|||
</div> |
|||
<div class='b-ytal'> |
|||
<screen-title :titleName="'议题案例'"></screen-title> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: "screen-right1", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.right1 { |
|||
margin-left: 12px; |
|||
} |
|||
.b-qzys { |
|||
height: 653px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,38 @@ |
|||
<template> |
|||
<div class="bg-content right2"> |
|||
<div class='b-dyxfmf'> |
|||
<screen-title :titleName="'党员先锋模范'"></screen-title> |
|||
</div> |
|||
<div class='b-dylxqz'> |
|||
<screen-title :titleName="'党员联系群众'"></screen-title> |
|||
</div> |
|||
<div class='b-xjph'> |
|||
<screen-title :titleName="'先进排行榜单'"></screen-title> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: "screen-right2", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.right2 { |
|||
margin-left: 12px; |
|||
} |
|||
.b-dyxfmf { |
|||
height: 328px; |
|||
} |
|||
.b-dylxqz { |
|||
height: 327px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<div class="bg-content right3"> |
|||
<div class='b-row1'> |
|||
<div b-sjtj> |
|||
<screen-title :titleName="'数据统计'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
<div b-myd> |
|||
<screen-title :titleName="'满意度'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
</div> |
|||
<div class='b-row2'> |
|||
<div b-sjlx> |
|||
<screen-title :titleName="'事件类型分析'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
<div b-dxal> |
|||
<screen-title :titleName="'典型案例'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
</div> |
|||
<div class='b-hztj'> |
|||
<screen-title :titleName="'汇总统计'"></screen-title> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: "screen-right3", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.right3 { |
|||
margin-left: 12px; |
|||
} |
|||
.b-row1 { |
|||
height: 328px; |
|||
display: flex; |
|||
} |
|||
|
|||
.b-row2 { |
|||
height: 327px; |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,35 @@ |
|||
<template> |
|||
<div class="screen-right"> |
|||
<right-1></right-1> |
|||
<right-2></right-2> |
|||
<right-3></right-3> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import right1 from "./right1" |
|||
import right2 from "./right2" |
|||
import right3 from "./right3" |
|||
|
|||
export default { |
|||
name: "screen-right", |
|||
data () { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
right1, |
|||
right2, |
|||
right3 |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-right { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-right: 36px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue