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.
522 lines
17 KiB
522 lines
17 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 :currentLevelData="currentLevelData" />
|
|
</div>
|
|
|
|
<div class="m-box">
|
|
<title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`" />
|
|
<jdtphx :currentLevelData="currentLevelData" :id="orgId" />
|
|
</div>
|
|
</div>
|
|
<div class="g-center">
|
|
<div :class="listShow ? 'm-map' : 'g-center-open'" style="overflow: hidden">
|
|
<map-top :currentLevelData="currentLevelData" :peopleType="peopleType" @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" />
|
|
</div>
|
|
<div class="m-box m-rybox">
|
|
<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>
|
|
|
|
<div class="g-right">
|
|
<div class="m-box">
|
|
<title-box text="人房数据统计" />
|
|
<rfsjtj :currentLevelData="currentLevelData" />
|
|
</div>
|
|
<!-- 街道概览 -->
|
|
<div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
|
|
<title-box text="各社区人房数据更新排行">
|
|
<span class="date-span">
|
|
<el-date-picker popper-class="date-current-weiyi" :append-to-body="false" 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">
|
|
<title-box text="各社区12345投诉事件统计">
|
|
<span class="date-span">
|
|
<el-date-picker popper-class="date-current-weiyi" :append-to-body="false" 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">
|
|
<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" />
|
|
</div>
|
|
<!-- 社区概览-->
|
|
<div v-if="currentLevel === 'community'" class="m-box">
|
|
<title-box text="社区满意度自查结果">
|
|
<span class="date-span">
|
|
<el-date-picker popper-class="date-current-weiyi" :append-to-body="false" v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
|
|
</span>
|
|
</title-box>
|
|
<CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate" />
|
|
</div>
|
|
<div v-if="currentLevel === 'community'" class="m-box">
|
|
<title-box text="事件&回访">
|
|
<span class="date-span">
|
|
<el-date-picker popper-class="date-current-weiyi" :append-to-body="false" 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" />
|
|
</div>
|
|
<!-- 网格 -->
|
|
<div v-if="currentLevel === 'grid'" class="m-box">
|
|
<title-box text="社区网格数据更新排行">
|
|
<span class="date-span">
|
|
<el-date-picker popper-class="date-current-weiyi" :append-to-body="false" 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" />
|
|
</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 GridUpdateRanking from "@/views/dataBoard/overview/components/GridUpdateRanking.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 FollowUp from "@/views/dataBoard/overview/components/FollowUp.vue";
|
|
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
|
|
|
|
import { requestPostBi } from "@/js/dai/request-bipass";
|
|
import { requestPost } from "@/js/dai/request";
|
|
import { spliceIntoChunks } from "@/utils/index";
|
|
|
|
export default {
|
|
name: "renfang",
|
|
|
|
components: {
|
|
gridMap,
|
|
cptLoading,
|
|
cptBread,
|
|
titleBox,
|
|
jdjs,
|
|
jdtphx,
|
|
mapTop,
|
|
jdwgy,
|
|
rfsjtj,
|
|
sqrfph,
|
|
sq12345,
|
|
DynamicHumanRoomData,
|
|
CommunityResult,
|
|
EventAndFollowUp,
|
|
RankingGridData,
|
|
GridUpdateRanking,
|
|
FollowUp,
|
|
Tabs,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
rfphDate: this.$moment().subtract(1, "month").format("YYYY-MM"),
|
|
sq12345Date: this.$moment().subtract(1, "month").format("YYYY-MM"),
|
|
sqzcDate: this.$moment().subtract(1, "month").format("YYYY-MM"),
|
|
sjhfDate: this.$moment().subtract(1, "month").format("YYYY-MM"),
|
|
sqwggxDate: this.$moment().subtract(1, "month").format("YYYY-MM"),
|
|
orgData: {
|
|
children: [],
|
|
}, //当前组织对象
|
|
orgId: "",
|
|
orgLevel: "",
|
|
currentLevel: "",
|
|
currentLevelData: {
|
|
orgId: this.$store.state.chooseArea.chooseName.orgId,
|
|
orgLevel: this.$store.state.chooseArea.chooseName.level,
|
|
meta: { title: "人房总览" },
|
|
},
|
|
breadList: [
|
|
{
|
|
orgId: "",
|
|
orgLevel: "",
|
|
id: "",
|
|
level: "",
|
|
meta: { title: "人房总览" },
|
|
},
|
|
],
|
|
peopleList: {
|
|
staffGrid: "网格员",
|
|
staffDepartment: "单位/组织",
|
|
staffAgency: "社区工作者",
|
|
chief: "楼长/单元长",
|
|
publicWelfareNum: "公益岗",
|
|
volunteer: "志愿者",
|
|
unit: "微网格",
|
|
building: "楼栋",
|
|
},
|
|
displayedResiId: "",
|
|
displayedHouseId: "",
|
|
dynamicType: 1,
|
|
dynamicTypeList: [
|
|
{
|
|
value: 1,
|
|
label: "更新动态",
|
|
},
|
|
{
|
|
value: 2,
|
|
label: "网格更新排行",
|
|
},
|
|
],
|
|
eventType: 1,
|
|
eventTypeList: [
|
|
{
|
|
value: 1,
|
|
label: "12345事件",
|
|
},
|
|
{
|
|
value: 2,
|
|
label: "事件回访",
|
|
},
|
|
],
|
|
customerName: "",
|
|
peopleType: "staffAgency",
|
|
listShow: true,
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
// const queryOrgId = getQueryPara("orgId");
|
|
// const queryOrgLevel = getQueryPara("orgLevel");
|
|
// this.init(queryOrgId, queryOrgLevel);
|
|
this.changeCustomerName();
|
|
this.getMapData();
|
|
},
|
|
|
|
watch: {
|
|
"$store.state.chooseArea.chooseName"(val) {
|
|
if (val.orgId) {
|
|
this.currentLevelData = {
|
|
...this.currentLevelData,
|
|
...val,
|
|
orgLevel: val.level,
|
|
};
|
|
// this.getMapData();
|
|
}
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
changeCustomerName() {
|
|
this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
|
|
},
|
|
changeType(e) {
|
|
this.peopleType = e;
|
|
},
|
|
dynamicTypeChange(val) {
|
|
this.dynamicType = val;
|
|
},
|
|
eventTypeChange(val) {
|
|
this.eventType = val;
|
|
},
|
|
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) {
|
|
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) {
|
|
this.$refs.map.clearMarkert();
|
|
if (item.id) {
|
|
if (item.level == "grid") {
|
|
this.customerName = item.parentName + "-" + item.name;
|
|
} else {
|
|
this.customerName = item.name || item.meta.title;
|
|
}
|
|
this.currentLevelData = {
|
|
orgId: item.id,
|
|
orgLevel: item.level,
|
|
};
|
|
} else {
|
|
this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
|
|
this.currentLevelData = {
|
|
...this.$store.state.chooseArea.chooseName,
|
|
orgLevel: this.$store.state.chooseArea.chooseName.level,
|
|
};
|
|
}
|
|
this.toBread({
|
|
orgId: item.id,
|
|
orgLevel: item.level,
|
|
meta: { title: item.name },
|
|
name: item.name,
|
|
parentName: item.parentName,
|
|
});
|
|
},
|
|
goBackMap() {
|
|
const item = this.breadList[this.breadList.length - 2];
|
|
this.clickAgencyItem(item);
|
|
},
|
|
toBread(item) {
|
|
const { orgId } = item;
|
|
const { breadList } = this;
|
|
let index = breadList.findIndex((val) => val.orgId === orgId);
|
|
if (index >= 0) {
|
|
this.breadList = breadList.slice(0, index + 1);
|
|
} else {
|
|
breadList.push({ ...item, id: item.orgId, level: item.orgLevel });
|
|
this.breadList = breadList;
|
|
}
|
|
this.getMapData(item.orgId, item.orgLevel);
|
|
},
|
|
getCenterPoint(geoCoordinateList) {
|
|
const geoCoordinateListFlat = geoCoordinateList.reduce((s, v) => {
|
|
return (s = s.concat(v))
|
|
}, [])
|
|
const total = geoCoordinateListFlat.length
|
|
let X = 0
|
|
let Y = 0
|
|
let Z = 0
|
|
for (const g of geoCoordinateListFlat) {
|
|
const lat = g.lat * Math.PI / 180
|
|
const lon = g.lng * Math.PI / 180
|
|
const x = Math.cos(lat) * Math.cos(lon)
|
|
const y = Math.cos(lat) * Math.sin(lon)
|
|
const z = Math.sin(lat)
|
|
X += x
|
|
Y += y
|
|
Z += z
|
|
}
|
|
|
|
X = X / total
|
|
Y = Y / total
|
|
Z = Z / total
|
|
const Lon = Math.atan2(Y, X)
|
|
const Hyp = Math.sqrt(X * X + Y * Y)
|
|
const Lat = Math.atan2(Z, Hyp)
|
|
|
|
return { lng: Lon * 180 / Math.PI, lat: Lat * 180 / Math.PI }
|
|
},
|
|
// 点击搜索结果条目，在地图上显示点和详情弹窗
|
|
handleClickSearchItem(item) {
|
|
if (!item.longitude) {
|
|
return this.$message.error("请先设置坐标");
|
|
}
|
|
this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
|
|
},
|
|
setNum(data) {
|
|
// data
|
|
console.log("hhghjgjhgjhgjh");
|
|
let params = [];
|
|
let org = this.orgData.children;
|
|
org.forEach((item) => {
|
|
data.forEach((item2) => {
|
|
let coordinates = spliceIntoChunks(item.coordinates.split(",").map((item) => parseFloat(item)),2)
|
|
let coordinates2 = coordinates.map(item3 => {
|
|
return [{
|
|
lat: item3[1],
|
|
lng: item3[0]
|
|
}]
|
|
})
|
|
let index = parseInt(coordinates.length / 2)
|
|
console.log(index,coordinates,'coordinates',coordinates2,this.getCenterPoint(coordinates2))
|
|
let centerLngLat = this.getCenterPoint(coordinates2)
|
|
// spliceIntoChunks
|
|
if (item2.orgId === item.id && item.coordinates) {
|
|
params.push({
|
|
...item2,
|
|
peopleType: this.peopleList[this.peopleType],
|
|
latitude: centerLngLat.lat,
|
|
longitude: centerLngLat.lng,
|
|
coordinates
|
|
});
|
|
}
|
|
});
|
|
});
|
|
// if (params.length) {
|
|
console.log("hhghjgjhgjhgjh111");
|
|
this.$refs.map.setNum(params);
|
|
console.log("hhghjgjhgjhgjh2222");
|
|
// }
|
|
},
|
|
upDownShow() {
|
|
this.listShow = !this.listShow;
|
|
},
|
|
setPoint(data) {
|
|
// if (data) {
|
|
this.$refs.map.setPoint(data, this.currentLevel, this.peopleType);
|
|
// }
|
|
},
|
|
//获取地图上显示的组织数据
|
|
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";
|
|
});
|
|
},
|
|
|
|
//获取地图上显示的组织数据
|
|
async 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 };
|
|
} 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" scoped>
|
|
.up-style {
|
|
width: 51%;
|
|
|
|
img {
|
|
height: 12px;
|
|
width: 12px;
|
|
}
|
|
|
|
img:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.go-back {
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 100px;
|
|
left: 16px;
|
|
right: 0;
|
|
|
|
img {
|
|
height: 36px;
|
|
width: 36px;
|
|
}
|
|
|
|
img:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.date-current-weiyi {
|
|
background: #000;
|
|
}
|
|
</style>
|
|
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
|
|
|
|
<style lang="scss" scoped>
|
|
.tabs {
|
|
padding: 10px 11px 0px;
|
|
}
|
|
</style>
|
|
|