Skip to content

M
map-property-screen
Commit f134acb8 authored by zhangzhaohui's avatar zhangzhaohui
Browse files
Options

增加地图交互

parent 6e0ef467
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 85 deletions
src/api/index.js
View file @ f134acb8
......@@ -27,4 +27,20 @@ export function getOwnerList(data) {
method: 'post',
data
})
}
// 获取事件列表
export function getEventList(data) {
return request({
url: '/wcwy/large/event/list',
method: 'post',
data
})
}
// 获取事件统计数量
export function getEventCount(data) {
return request({
url: '/wcwy/large/event/colour',
method: 'post',
data
})
}
\ No newline at end of file
src/utils/cesium.js
View file @ f134acb8
......@@ -20,6 +20,16 @@ export function cesiumInit(id) {
// requestVertexNormals: true, // required for terrain lighting
// }),
});
const token = "789e558be762ff832392a0393fd8a4f1";
const tdtUrl = "https://t{s}.tianditu.gov.cn/";
const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
const imgMap = new Cesium.UrlTemplateImageryProvider({
url: tdtUrl + "DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
subdomains: subdomains,
tilingScheme: new Cesium.WebMercatorTilingScheme(),
maximumLevel: 18,
});
const imageryLayer = viewer.imageryLayers.addImageryProvider(imgMap);
viewer.scene.screenSpaceCameraController.inertiaTranslate = 0;
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权信息
viewer.scene.postProcessStages.fxaa.enabled = true; //开启抗锯齿
......
src/utils/cesiumTools.js
View file @ f134acb8
......@@ -2,38 +2,31 @@ import * as Cesium from "cesium";
import { viewer } from "./cesium.js";
//绘制图标
export function drawIcon(position, type) {
const iconSize = 23;
export function drawIcon(position, imgName, data = {}) {
return viewer.entities.add({
position: position,
data: {},
data,
billboard: {
image: new URL(
`../assets/imgs/blue_dw_icon.png`,
`../assets/imgs/${imgName}.png`,
import.meta.url
).href, // 图标图片的路径
width: 40,
height: 50 ,
// pixelOffset: new Cesium.Cartesian2(
// idx * iconSize - iconOffset,
// -10
// // -iconSize * 2
// ),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
})
}
export function drawLabel(position, text, data = {}, labelOptions = {}) {
export function drawLabel(position, text, backgroundColor, data = {}, labelOptions = {}) {
return viewer.entities.add({
position: position,
data: data,
data,
label: {
text,
fillColor: Cesium.Color.WHITE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
showBackground: true,
backgroundColor: Cesium.Color.fromCssColorString('#003860'),
backgroundColor: Cesium.Color.fromCssColorString(backgroundColor),
backgroundPadding: new Cesium.Cartesian2(10, 8),
font: "18px sans-serif",
pixelOffset: new Cesium.Cartesian2( 0, -50),
......
src/view/components/communitySelect.vue
View file @ f134acb8
......@@ -16,16 +16,11 @@
</template>
<script setup>
import { ref, defineEmits, watch } from "vue";
import { ref, defineEmits, watch, onMounted } from "vue";
const props = defineProps(['communityList'])
const emit = defineEmits(['communityChange'])
let showList = ref(false)
let selectIndex = ref(-1)
watch(() => props.communityList, (val) => {
if (val.length) {
itemClick(val[0], 0)
}
})
function getAssetImg(imgName) {
return new URL(`../../assets/imgs/${imgName}.png`, import.meta.url).href;
}
......@@ -33,9 +28,13 @@ function showToggle() {
showList.value = !showList.value
}
function itemClick(item, index) {
console.log('itemClick', item, index)
selectIndex.value = index
emit('communityChange', selectIndex.value)
}
onMounted(() => {
itemClick(props.communityList[0], 0)
})
</script>
<style lang="scss" scoped>
......
src/view/components/screenLeft.vue
View file @ f134acb8
......@@ -81,12 +81,12 @@
<div class="legend-item line-y">
<div class="color" style="background: #1894EE"></div>
<div class="label">公共停车位数量</div>
<div class="value">197个</div>
<div class="value">{{currentHouseInfo.publicParkingTotal}}个</div>
</div>
<div class="legend-item line-y">
<div class="color" style="background: #05EA81"></div>
<div class="label">产权车位数量</div>
<div class="value">20个</div>
<div class="value">{{currentHouseInfo.personalParkingTotal}}个</div>
</div>
</div>
</div>
......@@ -100,12 +100,12 @@
<div class="legend-item line-y">
<div class="color" style="background: #39CAD1"></div>
<div class="label">业主入住率</div>
<div class="value">80%</div>
<div class="value">{{currentHouseInfo.occupancyRate}}</div>
</div>
<div class="legend-item line-y">
<div class="color" style="background: #009AFF"></div>
<div class="label">业主出租率</div>
<div class="value">20%</div>
<div class="value">{{currentHouseInfo.rentalRate}}</div>
</div>
</div>
</div>
......@@ -139,6 +139,9 @@ let overviewData = ref([
{ label: "物业一级收费标准", valueKey: "propertyFees", color: "#FABB24", unit: "元/月" },
]);
watch(() => props.currentHouseInfo, (val) => {
pieChartInit()
carportChartInit()
checkinChartInit()
})
function itemHover(index) {
if (index === 5) {
......@@ -151,6 +154,14 @@ function itemLeave(index) {
}
}
function pieChartInit() {
let data = [
{name: '高层', value: props.currentHouseInfo.houseHighTotal},
{name: '小高层', value: props.currentHouseInfo.houseSmallHighTotal},
{name: '多层', value: props.currentHouseInfo.houseManyTotal},
{name: '别墅', value: props.currentHouseInfo.houseVillaTotal},
{name: '商铺', value: props.currentHouseInfo.houseBusinessTotal},
{name: '公寓', value: props.currentHouseInfo.houseApartmentTotal},
]
pieChart = echarts.init(document.getElementById("pieChart"));
pieChart.setOption({
grid: {
......@@ -165,7 +176,7 @@ function pieChartInit() {
},
series: [
{
name: "Nightingale Chart",
name: "房屋类型统计",
type: "pie",
radius: [10, 80],
center: ["50%", "50%"],
......@@ -173,19 +184,19 @@ function pieChartInit() {
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 40, name: "rose 1" },
{ value: 38, name: "rose 2" },
{ value: 32, name: "rose 3" },
{ value: 30, name: "rose 4" },
{ value: 28, name: "rose 5" },
{ value: 26, name: "rose 6" },
],
data,
},
],
});
}
function carportChartInit() {
let sum = Number(props.currentHouseInfo.personalParkingTotal) + Number(props.currentHouseInfo.publicParkingTotal)
let color = [
[Number(props.currentHouseInfo.publicParkingTotal) / sum, "#1894EE"],
]
if (Number(props.currentHouseInfo.personalParkingTotal) > 0) {
color.push([1, "#05EA81"])
}
carportChart = echarts.init(document.getElementById("carportChart"));
carportChart.setOption({
series: [
......@@ -215,10 +226,7 @@ function carportChartInit() {
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.8, "#1894EE"],
[1, "#05EA81"],
],
color,
},
},
axisTick: {
......@@ -249,6 +257,13 @@ function carportChartInit() {
})
}
function checkinChartInit() {
var percentIndex = props.currentHouseInfo.occupancyRate.indexOf("%");
var numStr = props.currentHouseInfo.occupancyRate.substring(0, percentIndex).replace(/[^0-9.]/g, '');
var occupancyRateNumber = parseFloat(numStr) / 100;
let color = [
[occupancyRateNumber, "#39CAD1"],
[1, "#009AFF"],
]
checkinChart = echarts.init(document.getElementById("checkinChart"));
checkinChart.setOption({
series: [
......@@ -278,10 +293,7 @@ function checkinChartInit() {
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.8, "#39CAD1"],
[1, "#009AFF"],
],
color,
},
},
axisTick: {
......@@ -311,11 +323,6 @@ function checkinChartInit() {
],
})
}
onMounted(() => {
pieChartInit();
carportChartInit();
checkinChartInit()
});
</script>
<style lang="scss" scoped>
......
src/view/components/screenRight.vue
View file @ f134acb8
......@@ -31,10 +31,10 @@
<img src="../../assets/imgs/rypz_icon.png" style="width: 28px; height: 29px;" />
<div class="label fs-12">人员配置</div>
</div>
<div class="info-content">
<div class="info-item">
<div class="value">8</div>
<div class="label">保安人数</div>
<div class="info-content line-y staffing">
<div class="info-item" v-for="item in staffingList">
<div class="value">{{ currentHouseInfo[item.valueKey] }}</div>
<div class="label">{{ item.label }}人数</div>
</div>
</div>
</div>
......@@ -43,11 +43,9 @@
<img src="../../assets/imgs/glkh_icon.png" style="width: 27px; height: 26px;" />
<div class="label fs-12">管理考核</div>
</div>
<div class="info-content">
<div class="info-item">
<div class="value">每周</div>
<div class="label">楼道清理</div>
</div>
<div class="info-content examine">
<p v-if="currentHouseInfo.propertyAssessmentStatus === '是'">{{ currentHouseInfo.propertyAssessment }}</p>
<p v-else>无</p>
</div>
</div>
<div class="company-info line-y">
......@@ -125,12 +123,18 @@
<script setup>
import { onMounted, ref, reactive, watch} from "vue";
import { getOwnerList } from '../../api/index.js'
import { getOwnerList, getEventList, getEventCount } from '../../api/index.js'
import memberTable from "./memberTable.vue";
const props = defineProps(["currentHouseInfo"]);
let ownerTitle = ref('')
let ownerList = ref('')
let tableShow = ref(false)
let staffingList = ref([
{ label: '保安', valueKey: 'propertySafeTotal'},
{ label: '保洁', valueKey: 'propertyCleanTotal'},
{ label: '工程', valueKey: 'propertyProjectTotal'},
{ label: '客服', valueKey: 'propertyCustomTotal'},
])
let countData = ref([
{ label: '红色', value: '12', color: '#F3232D'},
{ label: '黄色', value: '2', color: '#FFEC56'},
......@@ -146,6 +150,9 @@ let tableData = ref([
let keyword = ref('')
watch(() => props.currentHouseInfo, (val) => {
getOwnerListFunc(val.communityId, val.id)
getEventListFunc(val.id)
console.log('start', new Date(val.propertyStartTime))
console.log('end', new Date(val.propertyEndTime))
})
function getOwnerListFunc(communityId, houseId) {
getOwnerList({
......@@ -158,6 +165,18 @@ function getOwnerListFunc(communityId, houseId) {
}
})
}
function getEventListFunc(houseId) {
getEventCount({
houseId
}).then(res => {
console.log('getEventCount', res)
})
getEventList({
houseId
}).then(res => {
console.log('getEventList', res)
})
}
</script>
<style lang="scss" scoped>
......@@ -222,6 +241,13 @@ function getOwnerListFunc(communityId, houseId) {
}
}
}
.staffing{
flex: 1;
justify-content: space-between;
}
.examine{
color: #fff;
}
}
}
.member{
......
src/view/index.vue
View file @ f134acb8
......@@ -3,12 +3,12 @@
<screen-header></screen-header>
<screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
<screen-right :currentHouseInfo="currentHouseInfo"></screen-right>
<community-select :communityList="communityList" @communityChange="communityChangeHandle"></community-select>
<community-select ref="communitySelectRef" v-if="userTypeInfo.type === 6" :communityList="communityList" @communityChange="communityChangeHandle"></community-select>
</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref, watch, nextTick } from 'vue'
import { cesiumInit } from '../utils/cesium.js'
import * as Cesium from "cesium";
import screenHeader from './components/screenHeader.vue';
......@@ -18,25 +18,33 @@ import communitySelect from './components/communitySelect.vue';
import { drawIcon, drawLabel } from '../utils/cesiumTools'
import { getCommunityList, getHouseList, getHouseInfo } from '../api/index.js'
import { getUserType } from '../api/user'
const communitySelectRef = ref(null)
let viewer = null
let communityList = ref([])
let userTypeInfo = ref({})
let currentCommunityId = ref('')
let currentCommunityInfo = ref({})
let currentHouseInfo = ref({})
watch(currentCommunityId, (val) => {
getHouseListFunc(val)
watch(currentCommunityInfo, (val) => {
console.log('currentCommunityInfo', val)
let position = JSON.parse(val.solid)
flyTo({longitude: position.x, latitude: position.y})
getHouseListFunc(val.id)
})
function communityChangeHandle(index) {
currentCommunityId.value = communityList.value[index].id
currentCommunityInfo.value = communityList.value[index]
}
// 获取登录用户信息
function getUserTypeInfo() {
getUserType().then(res => {
userTypeInfo.value = res.data
if (userTypeInfo.value.type === 3) {
if (userTypeInfo.value.type === 6) {
// 街道管理员
drawCommunityMarker(communityList.value)
} else if (userTypeInfo.value.type === 4) {
// 社区管理员
let communityInfo = communityList.value.find(item => item.id === userTypeInfo.value.communityId)
console.log('communityInfo', communityInfo)
drawCommunityMarker([communityInfo])
getHouseListFunc(userTypeInfo.value.communityId)
} else if (userTypeInfo.value.type === 5) {
......@@ -46,39 +54,89 @@ function getUserTypeInfo() {
})
}
// 获取小区列表
function getHouseListFunc(communityId) {
getHouseList(communityId).then(res => {
console.log(res)
drawHouseMarker(res.data)
getHouseInfoFunc(res.data[0].id)
})
}
// 绘制社区标记
function drawCommunityMarker(arr) {
arr.forEach(item => {
let position = degreesToCartesian(JSON.parse(item.solid))
drawLabel(position, item.name, '#0B6832', {...item, type: 'community'})
drawIcon(position, 'green_dw_icon', {...item, type: 'community'})
})
}
// 绘制小区标记
function drawHouseMarker(arr) {
arr.forEach(item => {
let position = JSON.parse(item.solid)
drawLabel(position, item.name, '#003860', {...item, type: 'house'})
drawIcon(position, 'blue_dw_icon', {...item, type: 'house'})
})
}
// 获取小区信息
function getHouseInfoFunc(houseId) {
getHouseInfo(houseId).then(res => {
currentHouseInfo.value = res.data
let position = JSON.parse(currentHouseInfo.value.solid)
drawIcon(position, 'blue_dw_icon')
drawLabel(position, currentHouseInfo.value.name, '#003860')
flyTo(cartesianToDegrees(position))
})
}
// cesium笛卡尔坐标转成经纬度坐标
function cartesianToDegrees(cartesian) {
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
let longitude = Cesium.Math.toDegrees(cartographic.longitude);
let latitude = Cesium.Math.toDegrees(cartographic.latitude);
return {
longitude,
latitude,
};
}
// cesium 经纬度转笛卡尔坐标
function degreesToCartesian(position) {
let cartesian3 = Cesium.Cartesian3.fromDegrees(position.x, position.y);
return cartesian3;
}
// 镜头飞到某个位置
function flyTo(position) {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
position.longitude,
position.latitude,
1200 // 最后一个参数是高度（单位：米）
),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0.0,
},
duration: 0.5, // 飞行时间（单位：秒）
});
}
onMounted(async () => {
getCommunityList().then(res => {
communityList.value = res.data
})
let communityRes = await getCommunityList()
getUserTypeInfo()
// viewer = cesiumInit('cesiumContainer')
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(
// 121.51073873593016,
// 29.881809534805857,
// 800 // 最后一个参数是高度（单位：米）
// ),
// duration: 0, // 飞行时间（单位：秒）
// });
// const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// handler.setInputAction((click) => {
// const ray = viewer.camera.getPickRay(click.position);
// let position = viewer.scene.globe.pick(ray, viewer.scene);
// if (position) {
// drawIcon(position)
// drawLabel(position, '程博华庭')
// }
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
communityList.value = communityRes.data
viewer = cesiumInit('cesiumContainer')
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((click) => {
let pickObj = viewer.scene.pick(click.position)
if (pickObj) {
console.log('pickObj', pickObj)
let type = pickObj.id._data.type
if (type === 'community') {
// 社区
} else if (type === 'house') {
// 小区
getHouseInfoFunc(pickObj.id._data.id)
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
})
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment