Skip to content

M
map-property-screen
Commit 5b2c91d6 authored by leidahong's avatar leidahong
Browse files
Options

登录退出、事件详情查看

parent f134acb8
Hide whitespace changes
Inline Side-by-side
Showing with 2287 additions and 1522 deletions
.env.development
View file @ 5b2c91d6
...@@ -4,6 +4,6 @@ ENV = 'development' ...@@ -4,6 +4,6 @@ ENV = 'development'
VITE_APP_BASE_API = '/api' VITE_APP_BASE_API = '/prod-api'
\ No newline at end of file
.env.production 0 → 100644
View file @ 5b2c91d6
ENV = 'production'
VITE_APP_BASE_API = '/prod-api'
index.html
View file @ 5b2c91d6
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<title>Vite + Vue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" /> <title>街道全域治理活地图</title>
</head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" />
<body> </head>
<div id="app"></div>
<script type="module" src="/src/main.js"></script> <body>
</body> <div id="app"></div>
</html> <script type="module" src="/src/main.js"></script>
</body>
</html>
\ No newline at end of file
package-lock.json
View file @ 5b2c91d6
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"unplugin-vue-components": "^0.26.0", "unplugin-vue-components": "^0.26.0",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue-router": "^4.0.13", "vue-router": "^4.0.13",
"vue3-seamless-scroll": "^2.0.1",
"vuex": "^4.1.0" "vuex": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
...@@ -2108,6 +2109,14 @@ ...@@ -2108,6 +2109,14 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/throttle-debounce": {
"version": "5.0.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
"engines": {
"node": ">=12.22"
}
},
"node_modules/to-regex-range": { "node_modules/to-regex-range": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
...@@ -2495,6 +2504,14 @@ ...@@ -2495,6 +2504,14 @@
"vue": "^3.2.0" "vue": "^3.2.0"
} }
}, },
"node_modules/vue3-seamless-scroll": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
"integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
"dependencies": {
"throttle-debounce": "5.0.0"
}
},
"node_modules/vuex": { "node_modules/vuex": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
...@@ -4042,6 +4059,11 @@ ...@@ -4042,6 +4059,11 @@
"resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
}, },
"throttle-debounce": {
"version": "5.0.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
},
"to-regex-range": { "to-regex-range": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
...@@ -4288,6 +4310,14 @@ ...@@ -4288,6 +4310,14 @@
"@vue/devtools-api": "^6.5.0" "@vue/devtools-api": "^6.5.0"
} }
}, },
"vue3-seamless-scroll": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
"integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
"requires": {
"throttle-debounce": "5.0.0"
}
},
"vuex": { "vuex": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
......
package.json
View file @ 5b2c91d6
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"unplugin-vue-components": "^0.26.0", "unplugin-vue-components": "^0.26.0",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue-router": "^4.0.13", "vue-router": "^4.0.13",
"vue3-seamless-scroll": "^2.0.1",
"vuex": "^4.1.0" "vuex": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
......
pnpm-lock.yaml
View file @ 5b2c91d6
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/index.js
View file @ 5b2c91d6
import request from '@/utils/request' import request from "@/utils/request";
// 获取社区列表 // 获取社区列表
export function getCommunityList() { export function getCommunityList() {
return request({ return request({
url: '/wcwy/large/community/list/0', url: "/wcwy/large/community/list/0",
method: 'get' method: "get",
}) });
} }
// 获取小区列表 // 获取小区列表
export function getHouseList(communityId) { export function getHouseList(communityId) {
return request({ return request({
url: '/wcwy/large/getHouseList/' + communityId, url: "/wcwy/large/getHouseList/" + communityId,
method: 'get' method: "get",
}) });
} }
//获取小区详情 //获取小区详情
export function getHouseInfo(id) { export function getHouseInfo(id) {
return request({ return request({
url: '/wcwy/large/house/' + id, url: "/wcwy/large/house/" + id,
method: 'get' method: "get",
}) });
} }
// 获取业委会列表 // 获取业委会列表
export function getOwnerList(data) { export function getOwnerList(data) {
return request({ return request({
url: '/wcwy/house/ownerlist', url: "/wcwy/house/ownerlist",
method: 'post', method: "post",
data data,
}) });
} }
// 获取事件列表 // 获取事件列表
export function getEventList(data) { export function getEventList(data) {
return request({ return request({
url: '/wcwy/large/event/list', url: "/wcwy/large/event/list",
method: 'post', method: "post",
data data,
}) });
} }
// 获取事件统计数量 // 获取事件统计数量
export function getEventCount(data) { export function getEventCount(data) {
return request({ return request({
url: '/wcwy/large/event/colour', url: "/wcwy/large/event/colour",
method: 'post', method: "post",
data data,
}) });
} }
\ No newline at end of file
// 获取事件详情
export function getEventInfo(id) {
return request({
url: "/wcwy/eventInfo/get/" + id,
method: "get",
});
}
src/components/header.vue
View file @ 5b2c91d6
...@@ -108,7 +108,7 @@ onUnmounted(() => { ...@@ -108,7 +108,7 @@ onUnmounted(() => {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: url("@/assets/top_bg.png") no-repeat; // background: url("@/assets/top_bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
height: 10%; height: 10%;
} }
...@@ -121,7 +121,7 @@ onUnmounted(() => { ...@@ -121,7 +121,7 @@ onUnmounted(() => {
height: 97px; height: 97px;
width: 100%; width: 100%;
display: flex; display: flex;
background: url("@/assets/top_tile.png") no-repeat; // background: url("@/assets/top_tile.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.button-box { .button-box {
pointer-events: auto; pointer-events: auto;
...@@ -136,7 +136,7 @@ onUnmounted(() => { ...@@ -136,7 +136,7 @@ onUnmounted(() => {
color: #eff7ff; color: #eff7ff;
text-align: center; text-align: center;
line-height: 44px; line-height: 44px;
background: url("@/assets/top_btn.png") no-repeat; // background: url("@/assets/top_btn.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
...@@ -166,4 +166,4 @@ onUnmounted(() => { ...@@ -166,4 +166,4 @@ onUnmounted(() => {
} }
} }
} }
</style> </style>
\ No newline at end of file
src/router/router.js
View file @ 5b2c91d6
import { createRouter, createWebHashHistory } from "vue-router"; import { createRouter, createWebHashHistory } from "vue-router";
import { getToken } from "../utils/auth";
import index from "../view/index.vue"; import index from "../view/index.vue";
import Login from '../view/login.vue' import Login from "../view/login.vue";
const routes = [ const routes = [
{ {
path: "/", path: "/",
...@@ -16,4 +17,14 @@ const router = createRouter({ ...@@ -16,4 +17,14 @@ const router = createRouter({
routes, routes,
}); });
export { router }; // 路由守卫
\ No newline at end of file // router.beforeEach((to, from, next) => {
// if (to.path === "/login") {
// next();
// } else {
// const token = getToken();
// if (token) next();
// else next("/login");
// }
// });
export { router };
src/utils/cesiumTools.js
View file @ 5b2c91d6
...@@ -3,21 +3,25 @@ import { viewer } from "./cesium.js"; ...@@ -3,21 +3,25 @@ import { viewer } from "./cesium.js";
//绘制图标 //绘制图标
export function drawIcon(position, imgName, data = {}) { export function drawIcon(position, imgName, data = {}) {
return viewer.entities.add({ return viewer.entities.add({
position: position, position: position,
data, data,
billboard: { billboard: {
image: new URL( image: new URL(`../assets/imgs/${imgName}.png`, import.meta.url).href, // 图标图片的路径
`../assets/imgs/${imgName}.png`, width: 40,
import.meta.url height: 50,
).href, // 图标图片的路径 disableDepthTestDistance: Number.POSITIVE_INFINITY,
width: 40, },
height: 50 , });
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
})
} }
export function drawLabel(position, text, backgroundColor, data = {}, labelOptions = {}) { export function drawLabel(
position,
text,
backgroundColor,
imgName,
data = {},
labelOptions = {}
) {
return viewer.entities.add({ return viewer.entities.add({
position: position, position: position,
data, data,
...@@ -29,9 +33,65 @@ export function drawLabel(position, text, backgroundColor, data = {}, labelOptio ...@@ -29,9 +33,65 @@ export function drawLabel(position, text, backgroundColor, data = {}, labelOptio
backgroundColor: Cesium.Color.fromCssColorString(backgroundColor), backgroundColor: Cesium.Color.fromCssColorString(backgroundColor),
backgroundPadding: new Cesium.Cartesian2(10, 8), backgroundPadding: new Cesium.Cartesian2(10, 8),
font: "18px sans-serif", font: "18px sans-serif",
pixelOffset: new Cesium.Cartesian2( 0, -50), pixelOffset: new Cesium.Cartesian2(0, -75),
...labelOptions, ...labelOptions,
},
billboard: {
image: new URL(`../assets/imgs/${imgName}.png`, import.meta.url).href, // 图标图片的路径
width: 40,
height: 50,
pixelOffset: new Cesium.Cartesian2(0, -25),
},
});
}
export function drawPolygonLine(position, color = "#37b9ff", withAlpha = 1) {
//缺口补齐
if (position.length >= 2 && position[0] !== position[position.length - 1])
position.push(position[0]);
return viewer.entities.add({
polyline: {
positions: position,
//material: Cesium.Color.RED.withAlpha(0.5),
material: Cesium.Color.fromCssColorString(color),
width: 2,
//disableDepthTestDistance: Number.POSITIVE_INFINITY,
//depthFailMaterial: Cesium.Color.fromCssColorString(color).withAlpha(withAlpha),
},
});
}
//绘制 canvas 文字
export function drawCanvasLabel(
position,
text,
backgroundColor,
data = {},
labelOptions = {}
) {
const canvas = canvasLabel(text, backgroundColor);
return viewer.entities.add({
position: position,
data,
billboard: {
image: canvas,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
}, },
}); });
} }
\ No newline at end of file function canvasLabel(text, backgroundColor) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "white";
context.font = "20px Arial";
const textWidth = context.measureText(text).width;
canvas.width = textWidth;
canvas.height = 30;
context.fillStyle = backgroundColor;
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillText(text, 5, 25);
return canvas;
}
src/view/components/communitySelect.vue
View file @ 5b2c91d6
<template> <template>
<div class="community-select-box"> <div class="community-select-box">
<div class="_header line-y fs-14"> <div class="_header line-y fs-14">
<img src="../../assets/imgs/sqtb_icon.png" /> <img src="../../assets/imgs/sqtb_icon.png" />
选择社区 选择社区
</div> </div>
<div class="community-list" :class="{'show': showList}"> <div class="community-list" :class="{ show: showList }">
<div class="community-item fs-14 line-y" @click="itemClick(item, index)" :class="{'active': index === selectIndex}" v-for="(item, index) in communityList"> <div
<img v-show="index === selectIndex" src="../../assets/imgs/sqxx_icon.png"/> {{ item.name }} class="community-item fs-14 line-y"
</div> @click="itemClick(item, index)"
</div> :class="{ active: index === selectIndex }"
<div class="show-btn line-xy" @click="showToggle"> v-for="(item, index) in communityList"
<img :src="showList ? getAssetImg('jt_up') : getAssetImg('jt_down')" /> >
<img
v-show="index === selectIndex"
src="../../assets/imgs/sqxx_icon.png"
/>
{{ item.name }}
</div> </div>
</div> </div>
<div class="show-btn line-xy" @click="showToggle">
<img :src="showList ? getAssetImg('jt_up') : getAssetImg('jt_down')" />
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, defineEmits, watch, onMounted } from "vue"; import { ref, defineEmits, watch, onMounted } from "vue";
const props = defineProps(['communityList']) const props = defineProps(["communityList"]);
const emit = defineEmits(['communityChange']) const emit = defineEmits(["communityChange"]);
let showList = ref(false) let showList = ref(false);
let selectIndex = ref(-1) let selectIndex = ref(-1);
function getAssetImg(imgName) { function getAssetImg(imgName) {
return new URL(`../../assets/imgs/${imgName}.png`, import.meta.url).href; return new URL(`../../assets/imgs/${imgName}.png`, import.meta.url).href;
} }
function showToggle() { function showToggle() {
showList.value = !showList.value showList.value = !showList.value;
} }
function itemClick(item, index) { function itemClick(item, index) {
console.log('itemClick', item, index) console.log("itemClick", item, index);
selectIndex.value = index selectIndex.value = index;
emit('communityChange', selectIndex.value) emit("communityChange", selectIndex.value);
} }
onMounted(() => { onMounted(() => {
itemClick(props.communityList[0], 0) itemClick(props.communityList[0], 0);
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.community-select-box{ .community-select-box {
z-index: 999; z-index: 1;
position: fixed; position: fixed;
top: 200px; top: 200px;
right: 460px; right: 460px;
width: 120px; width: 120px;
background-color: rgba($color: #091927, $alpha: 0.7); background-color: rgba($color: #091927, $alpha: 0.7);
._header{ ._header {
height: 44px; height: 44px;
padding-left: 10px; padding-left: 10px;
color: #77C8FF; color: #77c8ff;
img{ img {
margin-right: 8px; margin-right: 8px;
}
} }
.community-list{ }
max-height: 0; .community-list {
overflow: hidden; max-height: 0;
transition: max-height 0.1s; overflow: hidden;
.community-item{ transition: max-height 0.1s;
height: 28px; .community-item {
color: #fff; height: 28px;
padding-left: 30px; color: #fff;
position: relative; padding-left: 30px;
cursor: pointer; position: relative;
img{ cursor: pointer;
position: absolute; img {
left: 12px; position: absolute;
top: 7px; left: 12px;
} top: 7px;
}
.active{
background: url('../../assets/imgs/sq_hover.png') no-repeat;
color: #77C8FF;
background-size: 100% 100%;
} }
} }
.show{ .active {
max-height: 800px; background: url("../../assets/imgs/sq_hover.png") no-repeat;
transition: max-height 1s; color: #77c8ff;
} background-size: 100% 100%;
.show-btn{
cursor: pointer;
padding: 10px 0;
} }
} }
</style> .show {
\ No newline at end of file max-height: 800px;
transition: max-height 1s;
}
.show-btn {
cursor: pointer;
padding: 10px 0;
}
}
</style>
src/view/components/detail.vue 0 → 100644
View file @ 5b2c91d6
<template>
<div class="detail">
<div class="header">
<div class="title">事件详情</div>
<img @click="close" src="../../assets/imgs/close_icon.png" />
</div>
<div class="detail-container">
<div class="detail-item">
<div class="label">事件编号：</div>
<div class="val">{{ detailData.eventNo }}</div>
</div>
<div class="detail-item">
<div class="label">事件类型：</div>
<div class="val">{{ detailData.category }}</div>
</div>
<div class="detail-item">
<div class="label">事发地点：</div>
<div class="val">{{ detailData.address }}</div>
</div>
<div class="detail-item">
<div class="label">上报网络：</div>
<div class="val">{{ detailData.gridName }}</div>
</div>
<div class="detail-item">
<div class="label">事件描述：</div>
<div class="val" style="line-height: 0.42rem">
{{ detailData.description }}
</div>
</div>
<div class="detail-item">
<div class="label">涉及人数：</div>
<div class="val">{{ detailData.involvedNumber }}</div>
</div>
<div class="detail-item">
<div class="label">上报人：</div>
<div class="val">{{ detailData.reportName }}</div>
</div>
<div class="detail-item">
<div class="label">上报人电话：</div>
<div class="val">{{ detailData.reflectorMobile }}</div>
</div>
<div class="detail-item">
<div class="label">上报时间：</div>
<div class="val">{{ detailData.reportDate }}</div>
</div>
<div class="detail-item">
<div class="label">事件等级：</div>
<div class="val">{{ detailData.rankNo }}</div>
</div>
<div class="detail-item">
<div class="label">处理天数：</div>
<div class="val">{{ detailData.expectedDays }}天</div>
</div>
<div class="detail-item">
<div class="label">处理状态：</div>
<div class="val">{{ detailData.status }}</div>
</div>
<div class="detail-item">
<div class="label">处理时间：</div>
<div class="val">{{ detailData.registerDate }}</div>
</div>
<div class="detail-item" v-if="detailData.status === '已处理'">
<div class="label">处理内容：</div>
<div class="val">{{ detailData.processContent }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps(["detailData"]);
const emit = defineEmits(["close"]);
function close() {
emit("close");
}
</script>
<style lang="scss" scoped>
.detail {
position: absolute;
overflow: hidden;
width: 350px;
height: 380px;
transform: translateX(-100%);
left: -20px;
padding: 10px 5px;
box-sizing: border-box;
background-color: #143244e2;
background-size: 100% 100%;
color: #77c8ff;
top: 0;
.header {
padding: 0 5px;
display: flex;
justify-content: space-between;
align-items: center;
img {
cursor: pointer;
}
}
.detail-container {
height: 100%;
overflow-y: auto;
padding: 0.3rem 0.35rem 0;
box-sizing: border-box;
.detail-item {
height: 25px;
display: flex;
align-items: center;
.label {
color: #999;
font-size: 14px;
}
.val {
color: #ffffff;
font-size: 12px;
.img-box {
display: flex;
flex-wrap: wrap;
img {
width: 1.6rem;
height: 1.06rem;
margin-right: 0.14rem;
margin-bottom: 0.14rem;
}
}
.file-list {
.file-item {
margin-bottom: 0.2rem;
display: flex;
align-items: center;
.file-name {
color: #111;
font-size: 0.31rem;
}
.check-btn {
margin-left: 0.5rem;
border-radius: 0.21rem;
border: 1px solid #3978f8;
color: #3978f8;
font-size: 0.25rem;
padding: 0.1rem 0.2rem;
}
}
}
}
&:not(:last-child) {
margin-bottom: 0.35rem;
}
}
}
}
</style>
src/view/components/memberTable.vue
View file @ 5b2c91d6
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="member-table-container"> <div class="member-table-container">
<div class="_header line-xy fs-18"> <div class="_header line-xy fs-18">
<div class="title">业主委员会成员信息</div> <div class="title">业主委员会成员信息</div>
<img @click="close" src="../../assets/imgs/close_icon.png"/> <img @click="close" src="../../assets/imgs/close_icon.png" />
</div> </div>
<div class="table-box"> <div class="table-box">
<div class="table-header line-y fs-16"> <div class="table-header line-y fs-16">
...@@ -17,7 +17,11 @@ ...@@ -17,7 +17,11 @@
<div class="table-header-item i">联系方式</div> <div class="table-header-item i">联系方式</div>
</div> </div>
<div class="table-list fs-14"> <div class="table-list fs-14">
<div class="table-item line-y" v-for="(item, index) in props.ownerList" :key="item.div"> <div
class="table-item line-y"
v-for="(item, index) in props.ownerList"
:key="item.div"
>
<div class="item-value a">{{ item.jobs }}</div> <div class="item-value a">{{ item.jobs }}</div>
<div class="item-value b">{{ item.name }}</div> <div class="item-value b">{{ item.name }}</div>
<div class="item-value c">{{ item.sex }}</div> <div class="item-value c">{{ item.sex }}</div>
...@@ -35,69 +39,70 @@ ...@@ -35,69 +39,70 @@
<script setup> <script setup>
const props = defineProps(["ownerList"]); const props = defineProps(["ownerList"]);
const emit = defineEmits(['close']) const emit = defineEmits(["close"]);
function close() { function close() {
emit('close') emit("close");
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.member-table-container{ .member-table-container {
position: absolute; position: absolute;
z-index: 999;
top: -20px; top: -20px;
right: 430px; right: 430px;
padding: 30px 20px; padding: 30px 20px;
background: url('../../assets/imgs/tk_box02.png') no-repeat; background: url("../../assets/imgs/tk_box02.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #77C8FF; color: #77c8ff;
._header{ ._header {
position: relative; position: relative;
img{ img {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: 0; right: 0;
top: -10px; top: -10px;
} }
} }
.table-box{ .table-box {
border: 1px solid #1772A0; border: 1px solid #1772a0;
border-right: none; border-right: none;
margin-top: 13px; margin-top: 13px;
.table-header{ .table-header {
color: #77C8FF; color: #77c8ff;
.table-header-item{ .table-header-item {
border-right: 1px solid #1772A0; border-right: 1px solid #1772a0;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
width: 85px; width: 85px;
} }
} }
.table-list{ .table-list {
color: #F6FCFE; color: #f6fcfe;
.table-item{ .table-item {
border-top: 1px solid #1772A0; border-top: 1px solid #1772a0;
height: 30px; height: 30px;
.item-value{ .item-value {
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
width: 85px; width: 85px;
border-right: 1px solid #1772A0; border-right: 1px solid #1772a0;
} }
} }
} }
.c{ .c {
width: 60px !important; width: 60px !important;
} }
.g { .g {
width: 65px !important; width: 65px !important;
} }
.h{ .h {
width: 156px !important; width: 156px !important;
} }
.i{ .i {
width: 100px !important; width: 100px !important;
} }
} }
} }
</style> </style>
\ No newline at end of file
src/view/components/screenHeader.vue
View file @ 5b2c91d6
<template> <template>
<div class="screen-header line"> <div class="screen-header line">
<div class="screen-header__left line-y" style="height: 35px;"> <div class="screen-header__left line-y" style="height: 35px">
<div class="date">{{ timeInfo.todayDate }}</div> <div class="date">{{ timeInfo.todayDate }}</div>
<div class="week">{{ timeInfo.todayWeek }}</div> <div class="week">{{ timeInfo.todayWeek }}</div>
<div class="time">{{ timeInfo.nowtime }}</div> <div class="time">{{ timeInfo.nowtime }}</div>
</div> </div>
<div class="screen-header__right" style="padding-right: 140px;"> <div class="screen-header__right" style="padding-right: 140px">
<div class="weather-box"> <div class="weather-box">
<div id="he-plugin-simple"></div> <div id="he-plugin-simple"></div>
</div> </div>
</div> </div>
<div class="logout" @click="logout">退出登录</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { import { removeToken } from "../../utils/auth";
onMounted, import { useRouter } from "vue-router";
ref, import { onMounted, ref, reactive } from "vue";
reactive,
} from "vue";
const weekMap = ["日", "一", "二", "三", "四", "五", "六"]; const weekMap = ["日", "一", "二", "三", "四", "五", "六"];
const timeInfo = reactive({ const timeInfo = reactive({
nowtime: "", nowtime: "",
...@@ -34,71 +33,89 @@ function getNowTime() { ...@@ -34,71 +33,89 @@ function getNowTime() {
let date = let date =
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
timeInfo.nowtime = timeInfo.nowtime =
twoDigits(today.getHours()) + twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes());
":" +
twoDigits(today.getMinutes())
timeInfo.todayDate = date; timeInfo.todayDate = date;
timeInfo.todayWeek = "星期" + weekMap[today.getDay()]; timeInfo.todayWeek = "星期" + weekMap[today.getDay()];
} }
let router = new useRouter();
function logout() {
ElMessageBox.confirm("确定退出登录吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
removeToken();
router.push("/login");
})
.catch(() => {});
}
onMounted(() => { onMounted(() => {
window.WIDGET = { window.WIDGET = {
CONFIG: { CONFIG: {
modules: "02", modules: "02",
background: "5", background: "5",
tmpColor: "FFFFFF", tmpColor: "FFFFFF",
tmpSize: "20", tmpSize: "20",
cityColor: "FFFFFF", cityColor: "FFFFFF",
citySize: "16", citySize: "16",
aqiColor: "FFFFFF", aqiColor: "FFFFFF",
aqiSize: "16", aqiSize: "16",
weatherIconSize: "26", weatherIconSize: "26",
alertIconSize: "18", alertIconSize: "18",
padding: "4px 10px 10px 50px", padding: "4px 10px 10px 50px",
shadow: "0", shadow: "0",
language: "auto", language: "auto",
fixed: "false", fixed: "false",
vertical: "top", vertical: "top",
horizontal: "left", horizontal: "left",
key: "45d56907b4ad4ead870bfd4f515e8b97", key: "45d56907b4ad4ead870bfd4f515e8b97",
}, },
}; };
let script = document.createElement("script"); let script = document.createElement("script");
script.src = script.src =
"https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"; "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
document.getElementById("he-plugin-simple").appendChild(script); document.getElementById("he-plugin-simple").appendChild(script);
getNowTime() getNowTime();
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.screen-header{ .screen-header {
z-index: 999; z-index: 999;
width: 100%; width: 100%;
height: 85px; height: 85px;
position: fixed; position: fixed;
background: url('../../assets/imgs/top_title.png') no-repeat; background: url("../../assets/imgs/top_title.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 0 36px; padding: 0 36px;
.screen-header__right{ .screen-header__right {
margin-left: auto; margin-left: auto;
display: flex;
} }
.date{ .date {
font-family: 'SourceHanSansCN'; font-family: "SourceHanSansCN";
font-style: italic; font-style: italic;
font-size: 18px; font-size: 18px;
color: #CDD6E3; color: #cdd6e3;
} }
.week{ .week {
margin: 0 24px; margin: 0 24px;
font-family: 'SourceHanSansCN'; font-family: "SourceHanSansCN";
font-style: italic; font-style: italic;
font-size: 18px; font-size: 18px;
color: #CDD6E3; color: #cdd6e3;
} }
.time{ .time {
font-family: 'YouSheBiaoTiHei'; font-family: "YouSheBiaoTiHei";
color: #FFCE64; color: #ffce64;
font-size: 30px; font-size: 30px;
} }
} }
</style> .logout {
\ No newline at end of file height: 20px;
color: #fff;
margin-top: 5px;
cursor: pointer;
}
</style>
src/view/components/screenLeft.vue
View file @ 5b2c91d6
...@@ -6,26 +6,39 @@ ...@@ -6,26 +6,39 @@
<div class="content-item-box line-y"> <div class="content-item-box line-y">
<div class="content-item line-y"> <div class="content-item line-y">
<img src="../../assets/imgs/xq_tb_icon.png" /> <img src="../../assets/imgs/xq_tb_icon.png" />
<div class="text"> <el-tooltip
<div class="value">{{ currentHouseInfo.name }}</div> popper-class="tooltip"
<div class="label">小区名称</div> effect="light"
</div> :content="currentHouseInfo.name"
placement="bottom"
>
<div class="text">
<div class="value">{{ currentHouseInfo.name }}</div>
<div class="label">小区名称</div>
</div>
</el-tooltip>
</div> </div>
<div class="content-item line-y"> <div class="content-item line-y">
<img src="../../assets/imgs/jfsj_tb_icon.png" /> <img src="../../assets/imgs/jfsj_tb_icon.png" />
<div class="text"> <el-tooltip
<div popper-class="tooltip"
class="value" effect="light"
style=" :content="currentHouseInfo.deliveryDate"
color: #6effe5; placement="bottom"
font-family: 'YouSheBiaoTiHei'; ><div class="text">
font-size: 18px; <div
" class="value"
> style="
{{ currentHouseInfo.deliveryDate }} color: #6effe5;
</div> font-family: 'YouSheBiaoTiHei';
<div class="label">交付时间</div> font-size: 18px;
</div> "
>
{{ currentHouseInfo.deliveryDate }}
</div>
<div class="label">交付时间</div>
</div></el-tooltip
>
</div> </div>
</div> </div>
<div class="info-box"> <div class="info-box">
...@@ -47,14 +60,17 @@ ...@@ -47,14 +60,17 @@
@mouseleave="itemLeave(index)" @mouseleave="itemLeave(index)"
:key="item.label" :key="item.label"
> >
<div class="value" :title="currentHouseInfo[item.valueKey]" :style="{ color: item.color }"> <div class="value" :style="{ color: item.color }">
{{ currentHouseInfo[item.valueKey] {{ currentHouseInfo[item.valueKey] || "--"
}}<span style="font-size: 14px; font-family: 'SourceHanSansCN'"></span> }}<span
style="font-size: 14px; font-family: 'SourceHanSansCN'"
></span>
</div> </div>
<div class="label">{{ item.label }}</div> <div class="label">{{ item.label }}</div>
</div> </div>
<div class="standard-box" v-show="standardShow"> <div class="standard-box" v-show="standardShow">
<div class="title">{{ popupData.title }}</div>
<div class="content">{{ popupData.content }}</div>
</div> </div>
</div> </div>
<div class="tab-box line-x"> <div class="tab-box line-x">
...@@ -73,39 +89,43 @@ ...@@ -73,39 +89,43 @@
<div class="rate-chart-container"> <div class="rate-chart-container">
<div class="rate-chart-item"> <div class="rate-chart-item">
<div class="_title line-xy"> <div class="_title line-xy">
<img src="../../assets//imgs/sjx_icon.png"/> <img src="../../assets//imgs/sjx_icon.png" />
车位占比 车位占比
</div> </div>
<div id="carportChart"></div> <div id="carportChart"></div>
<div class="legend-box fs-12"> <div class="legend-box fs-12">
<div class="legend-item line-y"> <div class="legend-item line-y">
<div class="color" style="background: #1894EE"></div> <div class="color" style="background: #1894ee"></div>
<div class="label">公共停车位数量</div> <div class="label">公共停车位数量</div>
<div class="value">{{currentHouseInfo.publicParkingTotal}}个</div> <div class="value">
{{ currentHouseInfo.publicParkingTotal }}个
</div>
</div> </div>
<div class="legend-item line-y"> <div class="legend-item line-y">
<div class="color" style="background: #05EA81"></div> <div class="color" style="background: #05ea81"></div>
<div class="label">产权车位数量</div> <div class="label">产权车位数量</div>
<div class="value">{{currentHouseInfo.personalParkingTotal}}个</div> <div class="value">
{{ currentHouseInfo.personalParkingTotal }}个
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="rate-chart-item"> <div class="rate-chart-item">
<div class="_title line-xy"> <div class="_title line-xy">
<img src="../../assets//imgs/sjx_icon.png"/> <img src="../../assets//imgs/sjx_icon.png" />
入住率 入住率
</div> </div>
<div id="checkinChart"></div> <div id="checkinChart"></div>
<div class="legend-box fs-12"> <div class="legend-box fs-12">
<div class="legend-item line-y"> <div class="legend-item line-y">
<div class="color" style="background: #39CAD1"></div> <div class="color" style="background: #39cad1"></div>
<div class="label">业主入住率</div> <div class="label">业主入住率</div>
<div class="value">{{currentHouseInfo.occupancyRate}}</div> <div class="value">{{ currentHouseInfo.occupancyRate }}</div>
</div> </div>
<div class="legend-item line-y"> <div class="legend-item line-y">
<div class="color" style="background: #009AFF"></div> <div class="color" style="background: #009aff"></div>
<div class="label">业主出租率</div> <div class="label">业主出租率</div>
<div class="value">{{currentHouseInfo.rentalRate}}</div> <div class="value">{{ currentHouseInfo.rentalRate }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,10 +139,12 @@ ...@@ -119,10 +139,12 @@
import { onMounted, ref, reactive, watch } from "vue"; import { onMounted, ref, reactive, watch } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps(["currentHouseInfo"]); const props = defineProps(["currentHouseInfo"]);
let pieChart = null; let pieChart = null;
let carportChart = null; let carportChart = null;
let checkinChart = null; let checkinChart = null;
let standardShow =ref(false) let standardShow = ref(false);
let popupData = ref({});
let tabIndex = ref(0); let tabIndex = ref(0);
let baseInfoData = ref([ let baseInfoData = ref([
{ label: "所属社区", valueKey: "communityName" }, { label: "所属社区", valueKey: "communityName" },
...@@ -133,41 +155,70 @@ let baseInfoData = ref([ ...@@ -133,41 +155,70 @@ let baseInfoData = ref([
let overviewData = ref([ let overviewData = ref([
{ label: "占地面积", valueKey: "coverSpace", color: "#05EA81", unit: "㎡" }, { label: "占地面积", valueKey: "coverSpace", color: "#05EA81", unit: "㎡" },
{ label: "总建筑面积", valueKey: "floorSpace", color: "#FABB24", unit: "㎡" }, { label: "总建筑面积", valueKey: "floorSpace", color: "#FABB24", unit: "㎡" },
{ label: "物业办公用房面积", valueKey: "propertyOfficeSpace", color: "#FFEC56", unit: "㎡", }, {
{ label: "社区公房面积", valueKey: "communityOfficeSpace", color: "#05EA81", unit: "㎡" }, label: "物业办公用房面积",
{ label: "物业经营用房面积", valueKey: "propertyBusinessSituation", color: "#009AFF", unit: "㎡" }, valueKey: "propertyOfficeSpace",
{ label: "物业一级收费标准", valueKey: "propertyFees", color: "#FABB24", unit: "元/月" }, color: "#FFEC56",
unit: "㎡",
},
{
label: "社区公房面积",
valueKey: "communityOfficeSpace",
color: "#05EA81",
unit: "㎡",
},
{
label: "物业经营用房面积",
valueKey: "propertyBusinessSituation",
color: "#009AFF",
unit: "㎡",
},
{
label: "物业一级收费标准",
valueKey: "propertyFees",
color: "#FABB24",
unit: "元/月",
},
]); ]);
watch(() => props.currentHouseInfo, (val) => { watch(
pieChartInit() () => props.currentHouseInfo,
carportChartInit() (val) => {
checkinChartInit() pieChartInit();
}) carportChartInit();
checkinChartInit();
}
);
function itemHover(index) { function itemHover(index) {
if (index === 5) { if ([1, 4, 5].includes(index)) {
standardShow.value = true standardShow.value = true;
const valueKey = overviewData.value[index].valueKey;
popupData.value = {
title: overviewData.value[index].label,
content: props.currentHouseInfo[valueKey],
};
} }
} }
function itemLeave(index) { function itemLeave(index) {
if (index === 5) { if ([1, 4, 5].includes(index)) {
standardShow.value = false standardShow.value = false;
} }
} }
function pieChartInit() { function pieChartInit() {
let data = [ let data = [
{name: '高层', value: props.currentHouseInfo.houseHighTotal}, { name: "高层", value: props.currentHouseInfo.houseHighTotal },
{name: '小高层', value: props.currentHouseInfo.houseSmallHighTotal}, { name: "小高层", value: props.currentHouseInfo.houseSmallHighTotal },
{name: '多层', value: props.currentHouseInfo.houseManyTotal}, { name: "多层", value: props.currentHouseInfo.houseManyTotal },
{name: '别墅', value: props.currentHouseInfo.houseVillaTotal}, { name: "别墅", value: props.currentHouseInfo.houseVillaTotal },
{name: '商铺', value: props.currentHouseInfo.houseBusinessTotal}, { name: "商铺", value: props.currentHouseInfo.houseBusinessTotal },
{name: '公寓', value: props.currentHouseInfo.houseApartmentTotal}, { name: "公寓", value: props.currentHouseInfo.houseApartmentTotal },
] ];
pieChart = echarts.init(document.getElementById("pieChart")); pieChart = echarts.init(document.getElementById("pieChart"));
pieChart.setOption({ pieChart.setOption({
grid: { grid: {
top: '10%', top: "10%",
bottom: '10%' bottom: "10%",
}, },
legend: { legend: {
show: false, show: false,
}, },
...@@ -178,150 +229,189 @@ function pieChartInit() { ...@@ -178,150 +229,189 @@ function pieChartInit() {
{ {
name: "房屋类型统计", name: "房屋类型统计",
type: "pie", type: "pie",
radius: [10, 80], radius: [35, 70],
center: ["50%", "50%"], center: ["50%", "50%"],
roseType: "area", roseType: "area",
itemStyle: { label: {
borderRadius: 8, show: true,
formatter: "{b} {d}%",
color: "#fff",
}, },
data, data,
}, },
], ],
graphic: {
type: "text",
left: "center",
top: "center",
style: {
text: data.reduce((prev, curr) => prev + curr.value, 0) + "套",
textAlign: "center",
fill: "#E8F6FF", // 文本颜色
fontSize: 16, // 文本大小
},
},
}); });
} }
function carportChartInit() { function carportChartInit() {
let sum = Number(props.currentHouseInfo.personalParkingTotal) + Number(props.currentHouseInfo.publicParkingTotal) let sum =
Number(props.currentHouseInfo.personalParkingTotal) +
Number(props.currentHouseInfo.publicParkingTotal);
let color = [ let color = [
[Number(props.currentHouseInfo.publicParkingTotal) / sum, "#1894EE"], [Number(props.currentHouseInfo.publicParkingTotal) / sum, "#1894EE"],
] ];
if (Number(props.currentHouseInfo.personalParkingTotal) > 0) { if (Number(props.currentHouseInfo.personalParkingTotal) > 0) {
color.push([1, "#05EA81"]) color.push([1, "#05EA81"]);
} }
carportChart = echarts.init(document.getElementById("carportChart")); carportChart = echarts.init(document.getElementById("carportChart"));
carportChart.setOption({ carportChart.setOption({
series: [ series: [
{
type: "gauge",
startAngle: 240,
endAngle: -60,
min: 0,
max: 120,
splitNumber: 2,
itemStyle: {
color: "#ccc",
shadowColor: "#ccc",
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2,
},
progress: {
show: false,
roundCap: true,
width: 10,
},
pointer: {
show: false,
},
axisLine: {
roundCap: true,
lineStyle: {
width: 10,
color,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
distance: 30,
color: "auto",
fontSize: 20,
},
title: {
show: false,
},
detail: {
show: false,
},
data: [
{ {
type: "gauge", value: 100,
startAngle: 240,
endAngle: -60,
min: 0,
max: 120,
splitNumber: 2,
itemStyle: {
color: "#ccc",
shadowColor: "#ccc",
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2,
},
progress: {
show: false,
roundCap: true,
width: 10,
},
pointer: {
show: false,
},
axisLine: {
roundCap: true,
lineStyle: {
width: 10,
color,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
distance: 30,
color: "auto",
fontSize: 20,
},
title: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 100,
},
],
}, },
], ],
}) },
],
graphic: {
type: "text",
left: "center",
top: "center",
style: {
text: sum,
textAlign: "center",
fill: "#E8F6FF", // 文本颜色
fontSize: 16, // 文本大小
},
},
});
} }
function checkinChartInit() { function checkinChartInit() {
var percentIndex = props.currentHouseInfo.occupancyRate.indexOf("%"); var percentIndex = props.currentHouseInfo.occupancyRate.indexOf("%");
var numStr = props.currentHouseInfo.occupancyRate.substring(0, percentIndex).replace(/[^0-9.]/g, ''); var numStr = props.currentHouseInfo.occupancyRate
.substring(0, percentIndex)
.replace(/[^0-9.]/g, "");
var occupancyRateNumber = parseFloat(numStr) / 100; var occupancyRateNumber = parseFloat(numStr) / 100;
let color = [ let color = [
[occupancyRateNumber, "#39CAD1"], [occupancyRateNumber, "#39CAD1"],
[1, "#009AFF"], [1, "#009AFF"],
] ];
checkinChart = echarts.init(document.getElementById("checkinChart")); checkinChart = echarts.init(document.getElementById("checkinChart"));
checkinChart.setOption({ checkinChart.setOption({
series: [ series: [
{
type: "gauge",
startAngle: 240,
endAngle: -60,
min: 0,
max: 120,
splitNumber: 2,
itemStyle: {
color: "#ccc",
shadowColor: "#ccc",
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2,
},
progress: {
show: false,
roundCap: true,
width: 10,
},
pointer: {
show: false,
},
axisLine: {
roundCap: true,
lineStyle: {
width: 10,
color,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
distance: 30,
color: "auto",
fontSize: 20,
},
title: {
show: false,
},
detail: {
show: false,
},
data: [
{ {
type: "gauge", value: 100,
startAngle: 240,
endAngle: -60,
min: 0,
max: 120,
splitNumber: 2,
itemStyle: {
color: "#ccc",
shadowColor: "#ccc",
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2,
},
progress: {
show: false,
roundCap: true,
width: 10,
},
pointer: {
show: false,
},
axisLine: {
roundCap: true,
lineStyle: {
width: 10,
color,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
distance: 30,
color: "auto",
fontSize: 20,
},
title: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 100,
},
],
}, },
], ],
}) },
],
graphic: {
type: "text",
left: "center",
top: "center",
style: {
text: "100%",
textAlign: "center",
fill: "#E8F6FF", // 文本颜色
fontSize: 16, // 文本大小
},
},
});
} }
</script> </script>
...@@ -342,6 +432,7 @@ function checkinChartInit() { ...@@ -342,6 +432,7 @@ function checkinChartInit() {
background-size: 100% 100%; background-size: 100% 100%;
padding: 15px 20px 10px; padding: 15px 20px 10px;
.content-item-box { .content-item-box {
display: flex;
justify-content: space-between; justify-content: space-between;
} }
.content-item { .content-item {
...@@ -349,6 +440,11 @@ function checkinChartInit() { ...@@ -349,6 +440,11 @@ function checkinChartInit() {
margin-left: 10px; margin-left: 10px;
.value { .value {
color: #eff7ff; color: #eff7ff;
width: 115px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.label { .label {
font-size: 12px; font-size: 12px;
...@@ -364,6 +460,7 @@ function checkinChartInit() { ...@@ -364,6 +460,7 @@ function checkinChartInit() {
white-space: nowrap; white-space: nowrap;
} }
.value { .value {
font-size: 14px;
} }
} }
} }
...@@ -371,7 +468,7 @@ function checkinChartInit() { ...@@ -371,7 +468,7 @@ function checkinChartInit() {
} }
.overview { .overview {
margin-top: 20px; margin-top: 20px;
.content-container { .content-container {
background: url("../../assets/imgs/left_box02.png") no-repeat; background: url("../../assets/imgs/left_box02.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -405,15 +502,22 @@ function checkinChartInit() { ...@@ -405,15 +502,22 @@ function checkinChartInit() {
font-size: 12px; font-size: 12px;
} }
} }
.standard-box{ .standard-box {
color: #fff;
padding: 20px;
position: absolute; position: absolute;
bottom: -158px; top: 0px;
left: 220px; left: 430px;
z-index: 999; z-index: 999;
width: 287px; width: 287px;
height: 166px; font-size: 14px;
background: url('../../assets/imgs/tk_box01.png') no-repeat; background: url("../../assets/imgs/tk_box01.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title {
font-size: 16px;
color: #fff;
margin-bottom: 10px;
}
} }
} }
.tab-box { .tab-box {
...@@ -438,42 +542,42 @@ function checkinChartInit() { ...@@ -438,42 +542,42 @@ function checkinChartInit() {
height: 180px; height: 180px;
width: 100%; width: 100%;
} }
.rate-chart-container{ .rate-chart-container {
padding-top: 20px; padding-top: 20px;
display: flex; display: flex;
.rate-chart-item{ .rate-chart-item {
width: 50%; width: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
._title{ ._title {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
img{ img {
margin-right: 6px; margin-right: 6px;
} }
} }
#carportChart{ #carportChart {
height: 140px height: 140px;
} }
#checkinChart{ #checkinChart {
height: 140px height: 140px;
} }
.legend-box{ .legend-box {
padding: 0 20px; padding: 0 20px;
width: 100%; width: 100%;
color: #E9F6FF; color: #e9f6ff;
margin: 0 auto; margin: 0 auto;
.legend-item{ .legend-item {
margin: 0 auto; margin: 0 auto;
} }
.color{ .color {
margin-right: 6px; margin-right: 6px;
width: 20px; width: 20px;
height: 6px; height: 6px;
border-radius: 3px; border-radius: 3px;
} }
.value{ .value {
margin-left: auto; margin-left: auto;
} }
} }
...@@ -482,4 +586,9 @@ function checkinChartInit() { ...@@ -482,4 +586,9 @@ function checkinChartInit() {
} }
} }
} }
</style> </style>
\ No newline at end of file <style lang="scss">
.tooltip {
color: #092b40;
}
</style>
src/view/components/screenRight.vue
View file @ 5b2c91d6
...@@ -12,7 +12,10 @@ ...@@ -12,7 +12,10 @@
</div> </div>
<div class="company-info line-y"> <div class="company-info line-y">
<div class="icon"> <div class="icon">
<img src="../../assets/imgs/lxr_icon.png" style="width: 21px; height: 25px;" /> <img
src="../../assets/imgs/lxr_icon.png"
style="width: 21px; height: 25px"
/>
<div class="label fs-12">联系人</div> <div class="label fs-12">联系人</div>
</div> </div>
<div class="info-content line-y"> <div class="info-content line-y">
...@@ -20,15 +23,18 @@ ...@@ -20,15 +23,18 @@
<div class="value">{{ currentHouseInfo.propertyManagerTel }}</div> <div class="value">{{ currentHouseInfo.propertyManagerTel }}</div>
<div class="label">物业经理</div> <div class="label">物业经理</div>
</div> </div>
<div class="info-item" style="margin-left: 30px;"> <div class="info-item" style="margin-left: 30px">
<div class="value">{{ currentHouseInfo.propertyContactTel }}</div> <div class="value">{{ currentHouseInfo.propertyContactTel }}</div>
<div class="label">物业联系人</div> <div class="label">物业联系人</div>
</div> </div>
</div> </div>
</div> </div>
<div class="company-info line-y"> <div class="company-info line-y">
<div class="icon"> <div class="icon">
<img src="../../assets/imgs/rypz_icon.png" style="width: 28px; height: 29px;" /> <img
src="../../assets/imgs/rypz_icon.png"
style="width: 28px; height: 29px"
/>
<div class="label fs-12">人员配置</div> <div class="label fs-12">人员配置</div>
</div> </div>
<div class="info-content line-y staffing"> <div class="info-content line-y staffing">
...@@ -37,20 +43,42 @@ ...@@ -37,20 +43,42 @@
<div class="label">{{ item.label }}人数</div> <div class="label">{{ item.label }}人数</div>
</div> </div>
</div> </div>
</div> </div>
<div class="company-info line-y"> <div class="company-info line-y">
<div class="icon"> <div class="icon">
<img src="../../assets/imgs/glkh_icon.png" style="width: 27px; height: 26px;" /> <img
src="../../assets/imgs/glkh_icon.png"
style="width: 27px; height: 26px"
/>
<div class="label fs-12">管理考核</div> <div class="label fs-12">管理考核</div>
</div> </div>
<div class="info-content examine"> <div
<p v-if="currentHouseInfo.propertyAssessmentStatus === '是'">{{ currentHouseInfo.propertyAssessment }}</p> class="info-content examine"
@mouseenter="itemHover()"
@mouseleave="itemLeave()"
>
<p v-if="currentHouseInfo.propertyAssessmentStatus === '是'">
{{ currentHouseInfo.propertyAssessment }}
</p>
<p v-else>无</p> <p v-else>无</p>
<div
class="standard-box"
v-show="
standardShow && currentHouseInfo.propertyAssessment.length > 20
"
>
<div class="content">
{{ currentHouseInfo.propertyAssessment }}
</div>
</div>
</div> </div>
</div> </div>
<div class="company-info line-y"> <div class="company-info line-y">
<div class="icon"> <div class="icon">
<img src="../../assets/imgs/wyht_icon.png" style="width: 23px; height: 28px;" /> <img
src="../../assets/imgs/wyht_icon.png"
style="width: 23px; height: 28px"
/>
<div class="label fs-12">物业合同</div> <div class="label fs-12">物业合同</div>
</div> </div>
<div class="info-content"> <div class="info-content">
...@@ -59,306 +87,428 @@ ...@@ -59,306 +87,428 @@
<div class="label">合同期限</div> <div class="label">合同期限</div>
</div> </div>
</div> </div>
</div>
</div>
<div class="member">
<div class="module-title">业主委员会</div>
<div class="content-container fs-14">
<div class="member-info line-y">
<div class="info-item">
<div class="label">届次</div><div class="value">{{ currentHouseInfo.ownerSession || '无' }}</div>
</div>
<div class="info-item">
<div class="label">任期</div><div class="value">{{ currentHouseInfo.ownerStartTime ? currentHouseInfo.ownerStartTime + '至' + currentHouseInfo.ownerEndTime : '无' }}</div>
</div>
</div> </div>
<div class="member-info line-y"> </div>
<div class="info-item"> <div class="member">
<div class="label">缺额</div><div class="value">{{ currentHouseInfo.ownerVacancy }}</div> <div class="module-title">业主委员会</div>
<div class="content-container fs-14">
<div class="member-info line-y">
<div class="info-item">
<div class="label">届次</div>
<div class="value">
{{ currentHouseInfo.ownerSession || "无" }}
</div>
</div>
<div class="info-item">
<div class="label">任期</div>
<div class="value">
{{
currentHouseInfo.ownerStartTime
? currentHouseInfo.ownerStartTime +
"至" +
currentHouseInfo.ownerEndTime
: "无"
}}
</div>
</div>
</div> </div>
<div class="info-item"> <div class="member-info line-y">
<div class="label">党支部</div><div class="value">{{ currentHouseInfo.ownerParty }}</div> <div class="info-item">
<div class="label">缺额</div>
<div class="value">{{ currentHouseInfo.ownerVacancy }}</div>
</div>
<div class="info-item">
<div class="label">党支部</div>
<div class="value">{{ currentHouseInfo.ownerParty }}</div>
</div>
</div> </div>
</div> <div class="member-info line-y">
<div class="member-info line-y"> <div class="info-item" @click="tableShow = true">
<div class="info-item" @click="tableShow = true"> <div class="label">人员信息</div>
<div class="label">人员信息</div><div class="value" style="cursor: pointer; width: 270px;" :title="ownerTitle" >{{ ownerTitle || '无' }}</div> <div
class="value"
style="cursor: pointer; width: 270px"
:title="ownerTitle"
>
{{ ownerTitle || "无" }}
</div>
</div>
</div> </div>
</div> </div>
<member-table
:ownerList="ownerList"
@close="tableShow = false"
v-if="tableShow"
></member-table>
</div> </div>
<member-table :ownerList="ownerList" @close="tableShow = false" v-if="tableShow"></member-table> <div class="event">
</div> <div class="module-title">事件分析</div>
<div class="event"> <div class="content-container">
<div class="module-title">事件分析</div> <div class="count-box line-y">
<div class="content-container"> <div class="count-item" v-for="item in countData" :key="item.color">
<div class="count-box line-y"> <div class="label fs-14">{{ item.label }}色等级</div>
<div class="count-item" v-for="item in countData" :key="item.color"> <div class="value fs-24" :style="{ color: item.color }">
<div class="label fs-14">{{item.label}}等级</div> {{ item.value }}
<div class="value fs-24" :style="{'color': item.color}">{{item.value}}</div> </div>
</div>
</div> </div>
</div> <div class="search-box">
<div class="search-box"> <input placeholder="请输入关键字" v-model="keyword" />
<input placeholder="请输入关键字" v-model="keyword" /> <div class="search-btn line-xy fs-14">查询</div>
<div class="search-btn line-xy fs-14">查询</div>
</div>
<div class="table-box fs-14">
<div class="table-header line-y">
<div class="table-header-item num line-x">编号</div>
<div class="table-header-item name">名称</div>
<div class="table-header-item degree line-x">预警等级</div>
</div> </div>
<div class="table-list"> <div class="table-box fs-14">
<div class="table-item line-y" v-for="(item, index) in tableData" :key="index"> <div class="table-header line-y">
<div class="item-value num line-x">{{ index + 1 }}</div> <div class="table-header-item num line-x">编号</div>
<div class="item-value name">{{ item.name }}</div> <div class="table-header-item name">名称</div>
<div class="item-value degree line-x" :style="{'background-color': ['#FF0400', '#FFFF00', '#05EA81'][item.degree - 1]}"></div> <div class="table-header-item degree line-x">预警等级</div>
</div> </div>
<vue3-seamless-scroll
class="table-list"
:list="tableData"
:speed="scrollParams.speed"
:step="scrollParams.step"
:interval="scrollParams.interval"
:hover="true"
>
<div
class="table-item line-y"
v-for="(item, index) in tableData"
:key="index"
@click="itemClick(item)"
>
<div class="item-value num line-x">{{ index + 1 }}</div>
<div class="item-value name">{{ item.name }}</div>
<div
class="item-value degree line-x"
:style="{
'background-color': ['#FF0400', '#FFFF00', '#05EA81'][
item.degree - 1
],
}"
></div>
</div>
</vue3-seamless-scroll>
</div> </div>
</div> </div>
<detail
v-if="detailShow"
@close="detailShow = false"
:detailData="detailData"
/>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref, reactive, watch} from "vue"; import { onMounted, ref, reactive, watch } from "vue";
import { getOwnerList, getEventList, getEventCount } from '../../api/index.js' import {
getOwnerList,
getEventList,
getEventCount,
getEventInfo,
} from "../../api/index.js";
import memberTable from "./memberTable.vue"; import memberTable from "./memberTable.vue";
import detail from "./detail.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const props = defineProps(["currentHouseInfo"]); const props = defineProps(["currentHouseInfo"]);
let ownerTitle = ref('') let ownerTitle = ref("");
let ownerList = ref('') let ownerList = ref("");
let tableShow = ref(false) let tableShow = ref(false);
let detailShow = ref(false);
let detailData = ref({});
let standardShow = ref(false);
const scrollParams = ref({
speed: 10,
interval: 6000,
step: 0.5,
});
let staffingList = ref([ let staffingList = ref([
{ label: '保安', valueKey: 'propertySafeTotal'}, { label: "保安", valueKey: "propertySafeTotal" },
{ label: '保洁', valueKey: 'propertyCleanTotal'}, { label: "保洁", valueKey: "propertyCleanTotal" },
{ label: '工程', valueKey: 'propertyProjectTotal'}, { label: "工程", valueKey: "propertyProjectTotal" },
{ label: '客服', valueKey: 'propertyCustomTotal'}, { label: "客服", valueKey: "propertyCustomTotal" },
]) ]);
let countData = ref([ let countData = ref([
{ label: '红色', value: '12', color: '#F3232D'}, { label: "红", value: "0", color: "#F3232D" },
{ label: '黄色', value: '2', color: '#FFEC56'}, { label: "黄", value: "0", color: "#FFEC56" },
{ label: '绿色', value: '1108', color: '#05EA81'}, { label: "绿", value: "0", color: "#05EA81" },
]) ]);
let tableData = ref([ let tableData = ref([]);
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 1}, let keyword = ref("");
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 2}, watch(
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 3}, () => props.currentHouseInfo,
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 1}, (val) => {
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 2} getOwnerListFunc(val.communityId, val.id);
]) getEventListFunc(val.id);
let keyword = ref('') console.log("start", new Date(val.propertyStartTime));
watch(() => props.currentHouseInfo, (val) => { console.log("end", new Date(val.propertyEndTime));
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) { function getOwnerListFunc(communityId, houseId) {
getOwnerList({ getOwnerList({
communityId, communityId,
houseId houseId,
}).then(res => { }).then((res) => {
if (res.data.length) { if (res.data.length) {
ownerList.value = res.data ownerList.value = res.data;
ownerTitle.value = res.data.map(i => i.name).join('、') ownerTitle.value = res.data.map((i) => i.name).join("、");
} }
}) });
} }
function getEventListFunc(houseId) { function getEventListFunc(houseId) {
getEventCount({ getEventCount({
houseId houseId,
}).then(res => { }).then((res) => {
console.log('getEventCount', res) const colorMap = {
}) 红: "#F3232D",
黄: "#FFEC56",
绿: "#05EA81",
};
countData.value = res.data.map((i) => {
return {
label: i.alarm_status,
value: i.sums,
color: colorMap[i.alarm_status],
};
});
});
getEventList({ getEventList({
houseId houseId,
}).then(res => { }).then((res) => {
console.log('getEventList', res) const colorMap = {
}) 红: 1,
黄: 2,
绿: 3,
};
tableData.value = res.data.map((i) => {
return {
name: i.eventName,
degree: colorMap[i.alarmStatus],
id: i.id,
};
});
});
}
async function itemClick(item) {
detailData.value = (await getEventInfo(item.id)).data;
detailShow.value = true;
}
function itemHover() {
standardShow.value = true;
}
function itemLeave(index) {
standardShow.value = false;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.screen-right{ .screen-right {
height: 100vh; height: 100vh;
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
width: 500px; width: 500px;
z-index: 998; z-index: 998;
background: url('../../assets/imgs/right_zd.png') no-repeat; background: url("../../assets/imgs/right_zd.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 60px 20px 0 70px; padding: 60px 20px 0 70px;
.patrol{ .patrol {
.content-container{ .content-container {
background: url('../../assets/imgs/right_box01.png') no-repeat; background: url("../../assets/imgs/right_box01.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 6px 20px 10px; padding: 6px 20px 10px;
} }
.label{ .label {
color: #CAEAFF; color: #caeaff;
} }
.company-name{ .company-name {
.text{ .text {
margin-left: 16px; margin-left: 16px;
.value{ .value {
color: #F6FCFE; color: #f6fcfe;
} }
}
} }
} .company-info {
.company-info{
padding: 15px 0 6px; padding: 15px 0 6px;
border-bottom: 2px solid rgba($color: #70C5FF, $alpha: 0.2); border-bottom: 2px solid rgba($color: #70c5ff, $alpha: 0.2);
.text{ .text {
margin-left: 16px; margin-left: 16px;
.value{ .value {
color: #F6FCFE; color: #f6fcfe;
} }
} }
.icon{ .icon {
width: 50px; width: 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
img{ margin-right: 10px;
img {
margin-bottom: 6px; margin-bottom: 6px;
} }
} }
.info-content{ .info-content {
margin-left: 20px; position: relative;
.info-item{ .info-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.value{ .value {
font-size: 16px; font-size: 14px;
color: #fff; color: #fff;
} }
.label{ .label {
font-size: 12px; font-size: 12px;
color: #CAEAFF; color: #caeaff;
} }
} }
} }
.staffing{ .staffing {
flex: 1; flex: 1;
justify-content: space-between; justify-content: space-between;
} }
.examine{ .examine p {
width: 300px;
color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.standard-box {
color: #fff; color: #fff;
padding: 20px;
position: absolute;
top: 0px;
left: -390px;
z-index: 999;
max-width: 287px;
font-size: 14px;
background: url("../../assets/imgs/tk_box01.png") no-repeat;
background-size: 100% 100%;
.title {
font-size: 16px;
color: #fff;
margin-bottom: 10px;
}
} }
} }
} }
.member{ .member {
position: relative; position: relative;
margin-top: 20px; margin-top: 20px;
.content-container{ .content-container {
background: url('../../assets/imgs/right_box02.png') no-repeat; background: url("../../assets/imgs/right_box02.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.member-info{ .member-info {
background: url('../../assets/imgs/yzwyh_list.png') no-repeat; background: url("../../assets/imgs/yzwyh_list.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: 15px; margin-bottom: 15px;
padding: 5px 20px; padding: 5px 20px;
.info-item{ .info-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.label{ .label {
white-space: nowrap; white-space: nowrap;
width: 50px; width: 50px;
text-align: right; text-align: right;
color: #CAEAFF; color: #caeaff;
} }
.value{ .value {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-left: 20px; margin-left: 20px;
color: #F6FCFE; color: #f6fcfe;
} }
} }
} }
} }
} }
.event{ .event {
margin-top: 20px; margin-top: 20px;
.content-container{ position: relative;
background: url('../../assets/imgs/right_box03.png') no-repeat; .content-container {
background: url("../../assets/imgs/right_box03.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.count-box{ .count-box {
justify-content: space-between; justify-content: space-between;
padding: 5px 40px; padding: 5px 40px;
.count-item{ .count-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.label{ .label {
color: #CAEAFF; color: #caeaff;
} }
.value{ .value {
font-family: 'YouSheBiaoTiHei'; font-family: "YouSheBiaoTiHei";
} }
} }
} }
.search-box{ .search-box {
width: 334px; width: 334px;
height: 30px; height: 30px;
border: 1px solid #0199DF; border: 1px solid #0199df;
border-radius: 2px; border-radius: 2px;
margin: 0 auto 12px; margin: 0 auto 12px;
padding-left: 10px; padding-left: 10px;
display: flex; display: flex;
input{ input {
flex: 1; flex: 1;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: #009AFF; color: #009aff;
&::placeholder{ &::placeholder {
font-size: 14px; font-size: 14px;
color: #009AFF; color: #009aff;
} }
&:focus{ &:focus {
outline: none; outline: none;
} }
} }
.search-btn{ .search-btn {
width: 43px;height: 100%; width: 43px;
height: 100%;
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
background-color: #0199DF; background-color: #0199df;
} }
} }
.table-box{ .table-box {
color: #fff; color: #fff;
.table-header{
.table-header {
} }
.table-list{ .table-list {
.table-item{ height: 190px;
height: 40px; overflow: hidden;
.degree{ .table-item {
height: calc(190px / 5);
cursor: pointer;
.degree {
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50%; border-radius: 50%;
} }
} }
} }
.num{ .num {
width: 50px; width: 50px;
} }
.name{ .name {
width: 240px; width: 240px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.degree{ .degree {
margin: 0 auto; margin: 0 auto;
} }
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
src/view/index.vue
View file @ 5b2c91d6
...@@ -3,89 +3,108 @@ ...@@ -3,89 +3,108 @@
<screen-header></screen-header> <screen-header></screen-header>
<screen-left :currentHouseInfo="currentHouseInfo"></screen-left> <screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
<screen-right :currentHouseInfo="currentHouseInfo"></screen-right> <screen-right :currentHouseInfo="currentHouseInfo"></screen-right>
<community-select ref="communitySelectRef" v-if="userTypeInfo.type === 6" :communityList="communityList" @communityChange="communityChangeHandle"></community-select> <community-select
ref="communitySelectRef"
v-if="userTypeInfo.type === 6"
:communityList="communityList"
@communityChange="communityChangeHandle"
></community-select>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref, watch, nextTick } from 'vue' import { onMounted, ref, watch, nextTick } from "vue";
import { cesiumInit } from '../utils/cesium.js' import { cesiumInit } from "../utils/cesium.js";
import * as Cesium from "cesium"; import * as Cesium from "cesium";
import screenHeader from './components/screenHeader.vue'; import screenHeader from "./components/screenHeader.vue";
import screenLeft from './components/screenLeft.vue'; import screenLeft from "./components/screenLeft.vue";
import screenRight from './components/screenRight.vue'; import screenRight from "./components/screenRight.vue";
import communitySelect from './components/communitySelect.vue'; import communitySelect from "./components/communitySelect.vue";
import { drawIcon, drawLabel } from '../utils/cesiumTools' import { drawLabel } from "../utils/cesiumTools";
import { getCommunityList, getHouseList, getHouseInfo } from '../api/index.js' import { getCommunityList, getHouseList, getHouseInfo } from "../api/index.js";
import { getUserType } from '../api/user' import { getUserType } from "../api/user";
const communitySelectRef = ref(null) const communitySelectRef = ref(null);
let viewer = null let viewer = null;
let communityList = ref([]) let communityList = ref([]);
let userTypeInfo = ref({}) let userTypeInfo = ref({});
let currentCommunityInfo = ref({}) let currentCommunityInfo = ref({});
let currentHouseInfo = ref({}) let currentHouseInfo = ref({});
watch(currentCommunityInfo, (val) => { watch(currentCommunityInfo, (val) => {
console.log('currentCommunityInfo', val) console.log("currentCommunityInfo", val);
let position = JSON.parse(val.solid) let position = JSON.parse(val.solid);
flyTo({longitude: position.x, latitude: position.y})
getHouseListFunc(val.id) flyTo({ longitude: position.x, latitude: position.y });
}) getHouseListFunc(val.id);
});
function communityChangeHandle(index) { function communityChangeHandle(index) {
currentCommunityInfo.value = communityList.value[index] currentCommunityInfo.value = communityList.value[index];
} }
// 获取登录用户信息 // 获取登录用户信息
function getUserTypeInfo() { function getUserTypeInfo() {
getUserType().then(res => { getUserType().then((res) => {
userTypeInfo.value = res.data if (!res.data) userTypeInfo.value = { type: 6 };
else userTypeInfo.value = res.data;
if (userTypeInfo.value.type === 6) { if (userTypeInfo.value.type === 6) {
// 街道管理员 // 街道管理员
drawCommunityMarker(communityList.value) drawCommunityMarker(communityList.value);
} else if (userTypeInfo.value.type === 4) { } else if (userTypeInfo.value.type === 4) {
// 社区管理员 // 社区管理员
let communityInfo = communityList.value.find(item => item.id === userTypeInfo.value.communityId) let communityInfo = communityList.value.find(
console.log('communityInfo', communityInfo) (item) => item.id === userTypeInfo.value.communityId
drawCommunityMarker([communityInfo]) );
getHouseListFunc(userTypeInfo.value.communityId) console.log("communityInfo", communityInfo);
drawCommunityMarker([communityInfo]);
getHouseListFunc(userTypeInfo.value.communityId);
} else if (userTypeInfo.value.type === 5) { } else if (userTypeInfo.value.type === 5) {
// 小区管理员 // 小区管理员
getHouseInfoFunc(userTypeInfo.value.houseId) getHouseInfoFunc(userTypeInfo.value.houseId);
} }
});
})
} }
// 获取小区列表 // 获取小区列表
function getHouseListFunc(communityId) { function getHouseListFunc(communityId) {
getHouseList(communityId).then(res => { getHouseList(communityId).then((res) => {
drawHouseMarker(res.data) drawHouseMarker(res.data);
getHouseInfoFunc(res.data[0].id) getHouseInfoFunc(res.data[0].id);
}) });
} }
// 绘制社区标记 // 绘制社区标记
function drawCommunityMarker(arr) { function drawCommunityMarker(arr) {
arr.forEach(item => { arr.forEach((item) => {
let position = degreesToCartesian(JSON.parse(item.solid)) let position = degreesToCartesian(JSON.parse(item.solid));
drawLabel(position, item.name, '#0B6832', {...item, type: 'community'}) drawLabel(position, item.name, "#0B6832", "green_dw_icon", {
drawIcon(position, 'green_dw_icon', {...item, type: 'community'}) ...item,
}) type: "community",
});
});
} }
// 绘制小区标记 // 绘制小区标记
function drawHouseMarker(arr) { function drawHouseMarker(arr) {
arr.forEach(item => { arr.forEach((item) => {
let position = JSON.parse(item.solid) let position = JSON.parse(item.solid);
drawLabel(position, item.name, '#003860', {...item, type: 'house'}) drawLabel(position, item.name, "#003860", "blue_dw_icon", {
drawIcon(position, 'blue_dw_icon', {...item, type: 'house'}) ...item,
}) type: "house",
});
});
} }
// 获取小区信息 // 获取小区信息
function getHouseInfoFunc(houseId) { function getHouseInfoFunc(houseId) {
getHouseInfo(houseId).then(res => { getHouseInfo(houseId).then((res) => {
currentHouseInfo.value = res.data currentHouseInfo.value = res.data;
let position = JSON.parse(currentHouseInfo.value.solid) let { solid, coordinates } = currentHouseInfo.value;
drawIcon(position, 'blue_dw_icon')
drawLabel(position, currentHouseInfo.value.name, '#003860') drawLabel(
flyTo(cartesianToDegrees(position)) JSON.parse(solid),
}) currentHouseInfo.value.name,
"#003860",
"blue_dw_icon"
);
// drawPolygonLine(JSON.parse(coordinates));
flyTo(cartesianToDegrees(JSON.parse(solid)));
});
} }
// cesium笛卡尔坐标转成经纬度坐标 // cesium笛卡尔坐标转成经纬度坐标
function cartesianToDegrees(cartesian) { function cartesianToDegrees(cartesian) {
...@@ -97,7 +116,7 @@ function cartesianToDegrees(cartesian) { ...@@ -97,7 +116,7 @@ function cartesianToDegrees(cartesian) {
latitude, latitude,
}; };
} }
// cesium 经纬度转笛卡尔坐标 // cesium 经纬度转笛卡尔坐标
function degreesToCartesian(position) { function degreesToCartesian(position) {
let cartesian3 = Cesium.Cartesian3.fromDegrees(position.x, position.y); let cartesian3 = Cesium.Cartesian3.fromDegrees(position.x, position.y);
return cartesian3; return cartesian3;
...@@ -111,33 +130,33 @@ function flyTo(position) { ...@@ -111,33 +130,33 @@ function flyTo(position) {
1200 // 最后一个参数是高度（单位：米） 1200 // 最后一个参数是高度（单位：米）
), ),
orientation: { orientation: {
heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-85),
pitch: Cesium.Math.toRadians(-90), heading: 0,
roll: 0.0, roll: 0,
}, },
duration: 0.5, // 飞行时间（单位：秒） duration: 1.5, // 飞行时间（单位：秒）
}); });
} }
onMounted(async () => { onMounted(async () => {
let communityRes = await getCommunityList() let communityRes = await getCommunityList();
getUserTypeInfo() getUserTypeInfo();
communityList.value = communityRes.data communityList.value = communityRes.data;
viewer = cesiumInit('cesiumContainer') viewer = cesiumInit("cesiumContainer");
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((click) => { handler.setInputAction((click) => {
let pickObj = viewer.scene.pick(click.position) let pickObj = viewer.scene.pick(click.position);
if (pickObj) { if (pickObj) {
console.log('pickObj', pickObj) console.log("pickObj", pickObj);
let type = pickObj.id._data.type let type = pickObj.id._data.type;
if (type === 'community') { if (type === "community") {
// 社区 // 社区
} else if (type === 'house') { } else if (type === "house") {
// 小区 // 小区
getHouseInfoFunc(pickObj.id._data.id) getHouseInfoFunc(pickObj.id._data.id);
} }
} }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -146,4 +165,4 @@ onMounted(async () => { ...@@ -146,4 +165,4 @@ onMounted(async () => {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
</style> </style>
\ No newline at end of file
vite.config.js
View file @ 5b2c91d6
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import cesium from "vite-plugin-cesium"; import cesium from "vite-plugin-cesium";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite"; import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite"; import AutoImport from "unplugin-auto-import/vite";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
base: './', base: "./",
plugins: [vue(), cesium(), AutoImport({ plugins: [
resolvers: [ElementPlusResolver()], vue(),
}), cesium(),
Components({ AutoImport({
resolvers: [ElementPlusResolver()], resolvers: [ElementPlusResolver()],
}),], }),
Components({
resolvers: [ElementPlusResolver()],
}),
],
server: { server: {
host: "0.0.0.0", host: "0.0.0.0",
open: true, open: true,
proxy: { proxy: {
"/api": { "/prod-api": {
target: "http://192.168.10.4:10024/", // target: "http://192.168.10.4:10024",
target: "https://xcsq.zjhmit.com",
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""), rewrite: (path) => path.replace(/^\/api/, ""),
}, },
...@@ -29,4 +34,4 @@ export default defineConfig({ ...@@ -29,4 +34,4 @@ export default defineConfig({
"@": "/src", "@": "/src",
}, },
}, },
}) });
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