Browse Source

代码提交

feature
张若晨 2 years ago
parent
commit
05e1309f81
  1. 3
      src/assets/scss/dataBoard/overview/index.scss
  2. 232
      src/views/dataBoard/overview/index.vue

3
src/assets/scss/dataBoard/overview/index.scss

@ -47,7 +47,7 @@
} }
.m-rybox { .m-rybox {
width: 884px; width: 910px;
} }
.m-subbox { .m-subbox {
@ -354,6 +354,7 @@
.m-jdwgy { .m-jdwgy {
height: auto!important; height: auto!important;
width: 100%;
padding: 12px 16px; padding: 12px 16px;
} }

232
src/views/dataBoard/overview/index.vue

@ -8,26 +8,86 @@
<div class="g-row"> <div class="g-row">
<div class="g-left"> <div class="g-left">
<div class="m-box"> <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" /> <jdjs :currentLevelData="currentLevelData" />
</div> </div>
<div class="m-box"> <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" /> <jdtphx :currentLevelData="currentLevelData" :id="orgId" />
</div> </div>
</div> </div>
<div class="g-center"> <div class="g-center">
<div class="m-map" style="overflow: hidden"> <div
<map-top :currentLevelData="currentLevelData" @changeType="changeType" :level="currentLevel" /> :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"> <div v-if="breadList.length > 1" class="go-back" @click="goBackMap">
<img src="~@/assets/images/shuju/overview/go-back.png" /> <img src="~@/assets/images/shuju/overview/go-back.png" />
</div> </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>
<div class="m-box m-rybox"> <div class="m-box m-rybox">
<title-box :text="`${customerName}${peopleList[peopleType]}`" /> <title-box :text="`${customerName}${peopleList[peopleType]}`">
<jdwgy :peopleType="peopleType" :currentLevelData="currentLevelData" :level="currentLevel" @setNum="setNum" @setPoint="setPoint" /> <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>
</div> </div>
@ -37,57 +97,136 @@
<rfsjtj :currentLevelData="currentLevelData" /> <rfsjtj :currentLevelData="currentLevelData" />
</div> </div>
<!-- 街道概览 --> <!-- 街道概览 -->
<div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box"> <div
v-if="currentLevel === 'street' || currentLevel === 'district'"
class="m-box"
>
<title-box text="各社区人房数据更新排行"> <title-box text="各社区人房数据更新排行">
<span class="date-span"> <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> </span>
</title-box> </title-box>
<sqrfph :currentLevelData="currentLevelData" :date="rfphDate" /> <sqrfph :currentLevelData="currentLevelData" :date="rfphDate" />
</div> </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投诉事件统计"> <title-box text="各社区12345投诉事件统计">
<span class="date-span"> <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> </span>
</title-box> </title-box>
<sq12345 :currentLevelData="currentLevelData" :date="sq12345Date" /> <sq12345 :currentLevelData="currentLevelData" :date="sq12345Date" />
</div> </div>
<!-- 社区&网格--> <!-- 社区&网格-->
<div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box"> <div
v-if="currentLevel === 'community' || currentLevel === 'grid'"
class="m-box"
>
<title-box text="人房数据动态更新" /> <title-box text="人房数据动态更新" />
<Tabs v-model="dynamicType" :list="dynamicTypeList" v-if="currentLevel === 'community'" @changeVal="dynamicTypeChange" /> <Tabs
<DynamicHumanRoomData :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 1" /> v-model="dynamicType"
<GridUpdateRanking :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 2" /> :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>
<!-- 社区概览--> <!-- 社区概览-->
<div v-if="currentLevel === 'community'" class="m-box"> <div v-if="currentLevel === 'community'" class="m-box">
<title-box text="社区满意度自查结果"> <title-box text="社区满意度自查结果">
<span class="date-span"> <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> </span>
</title-box> </title-box>
<CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate" /> <CommunityResult
:currentLevelData="currentLevelData"
:date="sqzcDate"
/>
</div> </div>
<div v-if="currentLevel === 'community'" class="m-box"> <div v-if="currentLevel === 'community'" class="m-box">
<title-box text="事件&回访"> <title-box text="事件&回访">
<span class="date-span"> <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> </span>
</title-box> </title-box>
<Tabs v-model="eventType" :list="eventTypeList" @changeVal="eventTypeChange" /> <Tabs
<EventAndFollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" /> v-model="eventType"
<FollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 2" /> :list="eventTypeList"
@changeVal="eventTypeChange"
/>
<EventAndFollowUp
:currentLevelData="currentLevelData"
:date="sjhfDate"
v-if="eventType === 1"
/>
<FollowUp
:currentLevelData="currentLevelData"
:date="sjhfDate"
v-if="eventType === 2"
/>
</div> </div>
<!-- 网格 --> <!-- 网格 -->
<div v-if="currentLevel === 'grid'" class="m-box"> <div v-if="currentLevel === 'grid'" class="m-box">
<title-box text="社区网格数据更新情况排行"> <title-box text="社区网格数据更新情况排行">
<span class="date-span"> <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> </span>
</title-box> </title-box>
<RankingGridData :currentLevelData="currentLevelData" :date="sqwggxDate" /> <RankingGridData
:currentLevelData="currentLevelData"
:date="sqwggxDate"
/>
</div> </div>
</div> </div>
</div> </div>
@ -235,7 +374,8 @@ export default {
methods: { methods: {
changeCustomerName() { changeCustomerName() {
this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台"; this.customerName =
localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
}, },
changeType(e) { changeType(e) {
this.peopleType = e; this.peopleType = e;
@ -290,7 +430,8 @@ export default {
orgLevel: item.level, orgLevel: item.level,
}; };
} else { } else {
this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台"; this.customerName =
localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
this.currentLevelData = { this.currentLevelData = {
...this.$store.state.chooseArea.chooseName, ...this.$store.state.chooseArea.chooseName,
orgLevel: this.$store.state.chooseArea.chooseName.level, orgLevel: this.$store.state.chooseArea.chooseName.level,
@ -326,7 +467,10 @@ export default {
if (!item.longitude) { if (!item.longitude) {
return this.$message.error("请先设置坐标"); 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) { setNum(data) {
// 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"; const url = "org_map";
this.$http.post(`/gov/org/agency/maporg`, { orgId, level }).then(({ data: { data } }) => { this.$http
this.orgData = data; .post(`/gov/org/agency/maporg`, { orgId, level })
this.orgId = this.orgData.id; .then(({ data: { data } }) => {
this.orgLevel = this.orgData.level; this.orgData = data;
this.currentLevel = this.orgData.agencyLevel; this.orgId = this.orgData.id;
this.currentLevelData = { this.orgLevel = this.orgData.level;
orgId: this.orgId, this.currentLevel = this.orgData.agencyLevel;
orgLevel: this.currentLevel, this.currentLevelData = {
}; orgId: this.orgId,
this.peopleType = this.currentLevel === "grid" ? "unit" : "staffAgency"; orgLevel: this.currentLevel,
}); };
this.peopleType =
this.currentLevel === "grid" ? "unit" : "staffAgency";
});
}, },
// //
@ -463,7 +613,11 @@ export default {
background: #000; background: #000;
} }
</style> </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> <style lang="scss" scoped>
.tabs { .tabs {

Loading…
Cancel
Save