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 {
width: 884px;
width: 910px;
}
.m-subbox {
@ -354,6 +354,7 @@
.m-jdwgy {
height: auto!important;
width: 100%;
padding: 12px 16px;
}

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

@ -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 {

Loading…
Cancel
Save