|
|
@ -8,26 +8,86 @@ |
|
|
|
<div class="g-row"> |
|
|
|
<div class="g-left"> |
|
|
|
<div class="m-box"> |
|
|
|
<title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`" /> |
|
|
|
<title-box |
|
|
|
:text="`${ |
|
|
|
currentLevel === 'district' |
|
|
|
? '区' |
|
|
|
: currentLevel === 'street' |
|
|
|
? '街道' |
|
|
|
: currentLevel === 'community' |
|
|
|
? '社区' |
|
|
|
: currentLevel === 'grid' |
|
|
|
? '网格' |
|
|
|
: '' |
|
|
|
}介绍`" |
|
|
|
/> |
|
|
|
<jdjs :currentLevelData="currentLevelData" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="m-box"> |
|
|
|
<title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`" /> |
|
|
|
<title-box |
|
|
|
:text="`${ |
|
|
|
currentLevel === 'district' |
|
|
|
? '区' |
|
|
|
: currentLevel === 'street' |
|
|
|
? '街道' |
|
|
|
: currentLevel === 'community' |
|
|
|
? '社区' |
|
|
|
: currentLevel === 'grid' |
|
|
|
? '网格' |
|
|
|
: '' |
|
|
|
}图谱画像`" |
|
|
|
/> |
|
|
|
<jdtphx :currentLevelData="currentLevelData" :id="orgId" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="g-center"> |
|
|
|
<div class="m-map" style="overflow: hidden"> |
|
|
|
<map-top :currentLevelData="currentLevelData" @changeType="changeType" :level="currentLevel" /> |
|
|
|
<div |
|
|
|
:class="listShow ? 'm-map' : 'g-center-open'" |
|
|
|
style="overflow: hidden" |
|
|
|
> |
|
|
|
<map-top |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
@changeType="changeType" |
|
|
|
:level="currentLevel" |
|
|
|
/> |
|
|
|
<div v-if="breadList.length > 1" class="go-back" @click="goBackMap"> |
|
|
|
<img src="~@/assets/images/shuju/overview/go-back.png" /> |
|
|
|
</div> |
|
|
|
<grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn" :level="currentLevel" :peopleType="peopleType" /> |
|
|
|
<grid-map |
|
|
|
ref="map" |
|
|
|
@clickAgency="clickAgencyItem" |
|
|
|
:srcGridData="orgData" |
|
|
|
@clickDotBtn="handleClickDotBtn" |
|
|
|
:level="currentLevel" |
|
|
|
:peopleType="peopleType" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="m-box m-rybox"> |
|
|
|
<title-box :text="`${customerName}${peopleList[peopleType]}`" /> |
|
|
|
<jdwgy :peopleType="peopleType" :currentLevelData="currentLevelData" :level="currentLevel" @setNum="setNum" @setPoint="setPoint" /> |
|
|
|
<title-box :text="`${customerName}${peopleList[peopleType]}`"> |
|
|
|
<div class="up-style" style="width: 51%"> |
|
|
|
<div> |
|
|
|
<img |
|
|
|
v-if="listShow" |
|
|
|
@click="upDownShow" |
|
|
|
src="~@/assets/images/overview/down-icon.png" |
|
|
|
/> |
|
|
|
<img |
|
|
|
v-else |
|
|
|
@click="upDownShow" |
|
|
|
src="~@/assets/images/overview/up-icon.png" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</title-box> |
|
|
|
<jdwgy |
|
|
|
v-show="listShow" |
|
|
|
:peopleType="peopleType" |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
:level="currentLevel" |
|
|
|
@setNum="setNum" |
|
|
|
@setPoint="setPoint" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
@ -37,57 +97,136 @@ |
|
|
|
<rfsjtj :currentLevelData="currentLevelData" /> |
|
|
|
</div> |
|
|
|
<!-- 街道概览 --> |
|
|
|
<div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box"> |
|
|
|
<div |
|
|
|
v-if="currentLevel === 'street' || currentLevel === 'district'" |
|
|
|
class="m-box" |
|
|
|
> |
|
|
|
<title-box text="各社区人房数据更新排行"> |
|
|
|
<span class="date-span"> |
|
|
|
<el-date-picker v-model="rfphDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月"> </el-date-picker> |
|
|
|
<el-date-picker |
|
|
|
v-model="rfphDate" |
|
|
|
format="yyyy-MM" |
|
|
|
value-format="yyyy-MM" |
|
|
|
@change="changeDate" |
|
|
|
type="month" |
|
|
|
:clearable="false" |
|
|
|
placeholder="选择月" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</span> |
|
|
|
</title-box> |
|
|
|
<sqrfph :currentLevelData="currentLevelData" :date="rfphDate" /> |
|
|
|
</div> |
|
|
|
<div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box"> |
|
|
|
<div |
|
|
|
v-if="currentLevel === 'street' || currentLevel === 'district'" |
|
|
|
class="m-box" |
|
|
|
> |
|
|
|
<title-box text="各社区12345投诉事件统计"> |
|
|
|
<span class="date-span"> |
|
|
|
<el-date-picker v-model="sq12345Date" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" /> |
|
|
|
<el-date-picker |
|
|
|
v-model="sq12345Date" |
|
|
|
format="yyyy-MM" |
|
|
|
value-format="yyyy-MM" |
|
|
|
type="month" |
|
|
|
:clearable="false" |
|
|
|
placeholder="选择月" |
|
|
|
/> |
|
|
|
</span> |
|
|
|
</title-box> |
|
|
|
<sq12345 :currentLevelData="currentLevelData" :date="sq12345Date" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 社区&网格--> |
|
|
|
<div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box"> |
|
|
|
<div |
|
|
|
v-if="currentLevel === 'community' || currentLevel === 'grid'" |
|
|
|
class="m-box" |
|
|
|
> |
|
|
|
<title-box text="人房数据动态更新" /> |
|
|
|
<Tabs v-model="dynamicType" :list="dynamicTypeList" v-if="currentLevel === 'community'" @changeVal="dynamicTypeChange" /> |
|
|
|
<DynamicHumanRoomData :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 1" /> |
|
|
|
<GridUpdateRanking :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 2" /> |
|
|
|
<Tabs |
|
|
|
v-model="dynamicType" |
|
|
|
:list="dynamicTypeList" |
|
|
|
v-if="currentLevel === 'community'" |
|
|
|
@changeVal="dynamicTypeChange" |
|
|
|
/> |
|
|
|
<DynamicHumanRoomData |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
:currentLevel="currentLevel" |
|
|
|
v-if="dynamicType === 1" |
|
|
|
/> |
|
|
|
<GridUpdateRanking |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
:currentLevel="currentLevel" |
|
|
|
v-if="dynamicType === 2" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<!-- 社区概览--> |
|
|
|
<div v-if="currentLevel === 'community'" class="m-box"> |
|
|
|
<title-box text="社区满意度自查结果"> |
|
|
|
<span class="date-span"> |
|
|
|
<el-date-picker v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" /> |
|
|
|
<el-date-picker |
|
|
|
v-model="sqzcDate" |
|
|
|
format="yyyy-MM" |
|
|
|
value-format="yyyy-MM" |
|
|
|
type="month" |
|
|
|
:clearable="false" |
|
|
|
placeholder="选择月" |
|
|
|
/> |
|
|
|
</span> |
|
|
|
</title-box> |
|
|
|
<CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate" /> |
|
|
|
<CommunityResult |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
:date="sqzcDate" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div v-if="currentLevel === 'community'" class="m-box"> |
|
|
|
<title-box text="事件&回访"> |
|
|
|
<span class="date-span"> |
|
|
|
<el-date-picker v-model="sjhfDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" /> |
|
|
|
<el-date-picker |
|
|
|
v-model="sjhfDate" |
|
|
|
format="yyyy-MM" |
|
|
|
value-format="yyyy-MM" |
|
|
|
@change="changeDate" |
|
|
|
type="month" |
|
|
|
:clearable="false" |
|
|
|
placeholder="选择月" |
|
|
|
/> |
|
|
|
</span> |
|
|
|
</title-box> |
|
|
|
<Tabs v-model="eventType" :list="eventTypeList" @changeVal="eventTypeChange" /> |
|
|
|
<EventAndFollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" /> |
|
|
|
<FollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 2" /> |
|
|
|
<Tabs |
|
|
|
v-model="eventType" |
|
|
|
:list="eventTypeList" |
|
|
|
@changeVal="eventTypeChange" |
|
|
|
/> |
|
|
|
<EventAndFollowUp |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
:date="sjhfDate" |
|
|
|
v-if="eventType === 1" |
|
|
|
/> |
|
|
|
<FollowUp |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
:date="sjhfDate" |
|
|
|
v-if="eventType === 2" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<!-- 网格 --> |
|
|
|
<div v-if="currentLevel === 'grid'" class="m-box"> |
|
|
|
<title-box text="社区网格数据更新情况排行"> |
|
|
|
<span class="date-span"> |
|
|
|
<el-date-picker v-model="sqwggxDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" /> |
|
|
|
<el-date-picker |
|
|
|
v-model="sqwggxDate" |
|
|
|
format="yyyy-MM" |
|
|
|
value-format="yyyy-MM" |
|
|
|
@change="changeDate" |
|
|
|
type="month" |
|
|
|
:clearable="false" |
|
|
|
placeholder="选择月" |
|
|
|
/> |
|
|
|
</span> |
|
|
|
</title-box> |
|
|
|
<RankingGridData :currentLevelData="currentLevelData" :date="sqwggxDate" /> |
|
|
|
<RankingGridData |
|
|
|
:currentLevelData="currentLevelData" |
|
|
|
:date="sqwggxDate" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -235,7 +374,8 @@ export default { |
|
|
|
|
|
|
|
methods: { |
|
|
|
changeCustomerName() { |
|
|
|
this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台"; |
|
|
|
this.customerName = |
|
|
|
localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台"; |
|
|
|
}, |
|
|
|
changeType(e) { |
|
|
|
this.peopleType = e; |
|
|
@ -290,7 +430,8 @@ export default { |
|
|
|
orgLevel: item.level, |
|
|
|
}; |
|
|
|
} else { |
|
|
|
this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台"; |
|
|
|
this.customerName = |
|
|
|
localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台"; |
|
|
|
this.currentLevelData = { |
|
|
|
...this.$store.state.chooseArea.chooseName, |
|
|
|
orgLevel: this.$store.state.chooseArea.chooseName.level, |
|
|
@ -326,7 +467,10 @@ export default { |
|
|
|
if (!item.longitude) { |
|
|
|
return this.$message.error("请先设置坐标"); |
|
|
|
} |
|
|
|
this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]); |
|
|
|
this.$refs.map.setDotMarker(item, [ |
|
|
|
parseFloat(item.longitude), |
|
|
|
parseFloat(item.latitude), |
|
|
|
]); |
|
|
|
}, |
|
|
|
setNum(data) { |
|
|
|
// data |
|
|
@ -357,19 +501,25 @@ export default { |
|
|
|
// } |
|
|
|
}, |
|
|
|
//获取地图上显示的组织数据 |
|
|
|
async getMapData(orgId = this.$store.state.chooseArea.chooseName.orgId, level = this.$store.state.chooseArea.chooseName.level) { |
|
|
|
async getMapData( |
|
|
|
orgId = this.$store.state.chooseArea.chooseName.orgId, |
|
|
|
level = this.$store.state.chooseArea.chooseName.level |
|
|
|
) { |
|
|
|
const url = "org_map"; |
|
|
|
this.$http.post(`/gov/org/agency/maporg`, { orgId, level }).then(({ data: { data } }) => { |
|
|
|
this.orgData = data; |
|
|
|
this.orgId = this.orgData.id; |
|
|
|
this.orgLevel = this.orgData.level; |
|
|
|
this.currentLevel = this.orgData.agencyLevel; |
|
|
|
this.currentLevelData = { |
|
|
|
orgId: this.orgId, |
|
|
|
orgLevel: this.currentLevel, |
|
|
|
}; |
|
|
|
this.peopleType = this.currentLevel === "grid" ? "unit" : "staffAgency"; |
|
|
|
}); |
|
|
|
this.$http |
|
|
|
.post(`/gov/org/agency/maporg`, { orgId, level }) |
|
|
|
.then(({ data: { data } }) => { |
|
|
|
this.orgData = data; |
|
|
|
this.orgId = this.orgData.id; |
|
|
|
this.orgLevel = this.orgData.level; |
|
|
|
this.currentLevel = this.orgData.agencyLevel; |
|
|
|
this.currentLevelData = { |
|
|
|
orgId: this.orgId, |
|
|
|
orgLevel: this.currentLevel, |
|
|
|
}; |
|
|
|
this.peopleType = |
|
|
|
this.currentLevel === "grid" ? "unit" : "staffAgency"; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
//获取地图上显示的组织数据 |
|
|
@ -463,7 +613,11 @@ export default { |
|
|
|
background: #000; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style> |
|
|
|
<style |
|
|
|
lang="scss" |
|
|
|
src="@/assets/scss/dataBoard/overview/index.scss" |
|
|
|
scoped |
|
|
|
></style> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.tabs { |
|
|
|