You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
11 KiB
385 lines
11 KiB
<template>
|
|
<div>
|
|
<cpt-bread
|
|
@tap="clickBreadItem"
|
|
v-if="breadList.length > 1"
|
|
:bread-list="breadList"
|
|
/>
|
|
<div class="g-row">
|
|
<div class="g-left">
|
|
<div class="m-box">
|
|
<title-box :text="`${
|
|
currentLevel === 'district'?'区':
|
|
currentLevel === 'street'?'街道':
|
|
currentLevel === 'community'?'社区':
|
|
currentLevel === 'grid'?'网格':''
|
|
}介绍`"/>
|
|
<jdjs/>
|
|
</div>
|
|
|
|
<div class="m-box">
|
|
<title-box :text="`${
|
|
currentLevel === 'district'?'区':
|
|
currentLevel === 'street'?'街道':
|
|
currentLevel === 'community'?'社区':
|
|
currentLevel === 'grid'?'网格':''
|
|
}图谱画像`"/>
|
|
<jdtphx :id="orgId"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-center">
|
|
<div class="m-map">
|
|
<map-top/>
|
|
<grid-map
|
|
ref="map"
|
|
@clickAgency="clickAgencyItem"
|
|
:srcGridData="orgData"
|
|
@clickDotBtn="handleClickDotBtn"
|
|
/>
|
|
</div>
|
|
<div class="m-box m-rybox">
|
|
<title-box text="XX街道网格员"/>
|
|
<jdwgy/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-right">
|
|
<div class="m-box">
|
|
<title-box text="人房数据统计"/>
|
|
<rfsjtj/>
|
|
</div>
|
|
<!-- 街道概览 -->
|
|
<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>
|
|
</span>
|
|
</title-box>
|
|
<sqrfph :date="rfphDate"/>
|
|
</div>
|
|
<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="选择月"
|
|
/>
|
|
</span>
|
|
</title-box>
|
|
<sq12345 :date="sq12345Date"/>
|
|
</div>
|
|
|
|
<!-- 社区&网格-->
|
|
<div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box">
|
|
<title-box text="人房数据动态更新"/>
|
|
<DynamicHumanRoomData/>
|
|
</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="选择月"
|
|
/>
|
|
</span>
|
|
</title-box>
|
|
<CommunityResult :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="选择月"
|
|
/>
|
|
</span>
|
|
</title-box>
|
|
<EventAndFollowUp :date="sjhfDate"/>
|
|
</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="选择月"
|
|
/>
|
|
</span>
|
|
</title-box>
|
|
<RankingGridData :date="sqwggxDate"/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<cpt-loading v-show="false"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import gridMap from "@/views/dataBoard/cpts/map/index";
|
|
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
|
|
import cptLoading from "@/views/dataBoard/cpts/loading";
|
|
import titleBox from "@/views/dataBoard/satisfactionEval/components/Title";
|
|
import jdjs from "@/views/dataBoard/overview/components/jdjs.vue";
|
|
import jdtphx from "@/views/dataBoard/overview/components/jdtphx.vue";
|
|
import mapTop from "@/views/dataBoard/overview/components/map-top.vue";
|
|
import jdwgy from "@/views/dataBoard/overview/components/jdwgy.vue";
|
|
import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue";
|
|
import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue";
|
|
import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue";
|
|
|
|
import DynamicHumanRoomData from "@/views/dataBoard/overview/components/DynamicHumanRoomData.vue";
|
|
import CommunityResult from "@/views/dataBoard/overview/components/CommunityResult.vue";
|
|
import EventAndFollowUp from "@/views/dataBoard/overview/components/EventAndFollowUp.vue";
|
|
import RankingGridData from "@/views/dataBoard/overview/components/RankingGridData.vue";
|
|
|
|
|
|
import {requestPostBi} from "@/js/dai/request-bipass";
|
|
import {requestPost} from "@/js/dai/request";
|
|
import getQueryPara from "dai-js/modules/getQueryPara";
|
|
|
|
export default {
|
|
name: "renfang",
|
|
|
|
components: {
|
|
gridMap,
|
|
cptLoading,
|
|
cptBread,
|
|
titleBox,
|
|
jdjs,
|
|
jdtphx,
|
|
mapTop,
|
|
jdwgy,
|
|
rfsjtj,
|
|
sqrfph,
|
|
sq12345,
|
|
DynamicHumanRoomData,
|
|
CommunityResult,
|
|
EventAndFollowUp,
|
|
RankingGridData
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
rfphDate: this.$moment().format('YYYY-MM'),
|
|
sq12345Date: this.$moment().format('YYYY-MM'),
|
|
sqzcDate: this.$moment().format('YYYY-MM'),
|
|
sjhfDate: this.$moment().format('YYYY-MM'),
|
|
sqwggxDate: this.$moment().format('YYYY-MM'),
|
|
orgData: {
|
|
children: [],
|
|
}, //当前组织对象
|
|
orgId: "",
|
|
orgLevel: "",
|
|
currentLevel: "",
|
|
breadList: [
|
|
{
|
|
orgId: "",
|
|
orgLevel: "",
|
|
meta: {title: "人房总览"},
|
|
},
|
|
],
|
|
|
|
displayedResiId: "",
|
|
displayedHouseId: "",
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
// const queryOrgId = getQueryPara("orgId");
|
|
// const queryOrgLevel = getQueryPara("orgLevel");
|
|
// this.init(queryOrgId, queryOrgLevel);
|
|
if(this.$store.state.chooseArea.chooseName.orgId) {
|
|
this.getMapData()
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
"$store.state.chooseArea.chooseName"(val){
|
|
if(val.orgId) {
|
|
this.getMapData()
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async init(queryOrgId, queryOrgLevel) {
|
|
if (queryOrgId) {
|
|
this.orgId = queryOrgId;
|
|
this.orgLevel = queryOrgLevel || "agency";
|
|
} else {
|
|
this.orgId = this.$store.state.user.agencyId;
|
|
this.orgLevel = "agency";
|
|
}
|
|
|
|
//加载组织数据
|
|
this.loading = false;
|
|
await this.getMapData();
|
|
// await this.getSubMapData();
|
|
|
|
this.loading = true;
|
|
},
|
|
changeDate(e) {
|
|
this.rfphDate = e;
|
|
},
|
|
handleClickDotBtn(type, info) {
|
|
console.log("handleClickDotBtn", type, info);
|
|
if (type == "watch-resi") {
|
|
this.displayedResiId = info.user_id;
|
|
} else if (type == "watch-house") {
|
|
this.displayedHouseId = info.house_id;
|
|
}
|
|
},
|
|
|
|
clickBreadItem({item}) {
|
|
this.toBread(item);
|
|
},
|
|
|
|
clickAgencyItem(item) {
|
|
console.log(item, 'item')
|
|
this.toBread({
|
|
orgId: item.id,
|
|
orgLevel: item.level,
|
|
meta: {title: item.name},
|
|
});
|
|
},
|
|
|
|
toBread(item) {
|
|
const {orgId} = item;
|
|
const {breadList} = this;
|
|
let index = breadList.findIndex((val) => val.orgId === orgId);
|
|
// return console.log(item, breadList, index);
|
|
if (index >= 0) {
|
|
this.breadList = breadList.slice(0, index + 1);
|
|
} else {
|
|
breadList.push(item);
|
|
this.breadList = breadList;
|
|
}
|
|
this.getMapData(item.orgId,item.orgLevel)
|
|
},
|
|
|
|
// 点击搜索结果条目，在地图上显示点和详情弹窗
|
|
handleClickSearchItem(item) {
|
|
console.log("handleClickSearchItem", item);
|
|
if (!item.longitude) {
|
|
return this.$message.error("请先设置坐标");
|
|
}
|
|
this.$refs.map.setDotMarker(item, [
|
|
parseFloat(item.longitude),
|
|
parseFloat(item.latitude),
|
|
]);
|
|
},
|
|
|
|
//获取地图上显示的组织数据
|
|
async getMapData(orgId=this.$store.state.chooseArea.chooseName.orgId,level=this.$store.state.chooseArea.chooseName.level) {
|
|
console.log("=========================getMapData");
|
|
const url = "org_map";
|
|
this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
|
|
console.log(data,'datadatadata')
|
|
this.orgData = data;
|
|
this.orgId = this.orgData.org_id;
|
|
this.orgLevel = this.orgData.level;
|
|
this.currentLevel = this.orgData.agencyLevel;
|
|
console.log(this.orgData, 'orgData')
|
|
})
|
|
},
|
|
|
|
//获取地图上显示的组织数据
|
|
async getSubMapData() {
|
|
console.log("=========================getSubMapData");
|
|
const url = "sub_org_map";
|
|
|
|
const {data, code, msg} = await requestPostBi(
|
|
url,
|
|
{
|
|
queryParam: {
|
|
org_id: this.orgId,
|
|
},
|
|
},
|
|
{
|
|
// mockId: 61831860,
|
|
}
|
|
);
|
|
|
|
if (code === 0) {
|
|
const {orgData} = this;
|
|
orgData.children = data.map((item) => {
|
|
return {
|
|
...item,
|
|
id: item.org_id,
|
|
name: item.org_name,
|
|
latitude: parseFloat(item.latitude),
|
|
longitude: parseFloat(item.longitude),
|
|
coordinates: item.coordinates || "",
|
|
};
|
|
});
|
|
this.orgData = {...orgData};
|
|
console.log(
|
|
"==========================getSubMapData:result",
|
|
this.orgData
|
|
);
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async loadOrgData() {
|
|
const url = "/gov/org/agency/maporg";
|
|
let params = {
|
|
orgId: this.orgId,
|
|
level: this.orgLevel,
|
|
};
|
|
|
|
const {data, code, msg} = await requestPost(url, params);
|
|
if (code === 0) {
|
|
this.orgData = data;
|
|
this.orgId = this.orgId;
|
|
this.orgLevel = this.orgData.level;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
handelClickRkfxPei(val) {
|
|
console.log(val);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/dataBoard/overview/index.scss"
|
|
scoped
|
|
></style>
|
|
|