Skip to content

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

登录退出、事件详情查看

parent f134acb8
Expand all 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
This diff is collapsed.
src/view/components/screenRight.vue
View file @ 5b2c91d6
This diff is collapsed.
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