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'
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>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>街道全域治理活地图</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" />
</head>
<body>
<div id="app"></div>
<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 @@
"unplugin-vue-components": "^0.26.0",
"vue": "^3.3.11",
"vue-router": "^4.0.13",
"vue3-seamless-scroll": "^2.0.1",
"vuex": "^4.1.0"
},
"devDependencies": {
......@@ -2108,6 +2109,14 @@
"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": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
......@@ -2495,6 +2504,14 @@
"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": {
"version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
......@@ -4042,6 +4059,11 @@
"resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"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": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
......@@ -4288,6 +4310,14 @@
"@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": {
"version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
......
package.json
View file @ 5b2c91d6
......@@ -18,6 +18,7 @@
"unplugin-vue-components": "^0.26.0",
"vue": "^3.3.11",
"vue-router": "^4.0.13",
"vue3-seamless-scroll": "^2.0.1",
"vuex": "^4.1.0"
},
"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() {
return request({
url: '/wcwy/large/community/list/0',
method: 'get'
})
url: "/wcwy/large/community/list/0",
method: "get",
});
}
// 获取小区列表
export function getHouseList(communityId) {
return request({
url: '/wcwy/large/getHouseList/' + communityId,
method: 'get'
})
url: "/wcwy/large/getHouseList/" + communityId,
method: "get",
});
}
//获取小区详情
export function getHouseInfo(id) {
return request({
url: '/wcwy/large/house/' + id,
method: 'get'
})
url: "/wcwy/large/house/" + id,
method: "get",
});
}
// 获取业委会列表
export function getOwnerList(data) {
return request({
url: '/wcwy/house/ownerlist',
method: 'post',
data
})
url: "/wcwy/house/ownerlist",
method: "post",
data,
});
}
// 获取事件列表
export function getEventList(data) {
return request({
url: '/wcwy/large/event/list',
method: 'post',
data
})
url: "/wcwy/large/event/list",
method: "post",
data,
});
}
// 获取事件统计数量
export function getEventCount(data) {
return request({
url: '/wcwy/large/event/colour',
method: 'post',
data
})
}
\ No newline at end of file
url: "/wcwy/large/event/colour",
method: "post",
data,
});
}
// 获取事件详情
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(() => {
top: 0;
left: 0;
width: 100%;
background: url("@/assets/top_bg.png") no-repeat;
// background: url("@/assets/top_bg.png") no-repeat;
background-size: 100% 100%;
height: 10%;
}
......@@ -121,7 +121,7 @@ onUnmounted(() => {
height: 97px;
width: 100%;
display: flex;
background: url("@/assets/top_tile.png") no-repeat;
// background: url("@/assets/top_tile.png") no-repeat;
background-size: 100% 100%;
.button-box {
pointer-events: auto;
......@@ -136,7 +136,7 @@ onUnmounted(() => {
color: #eff7ff;
text-align: center;
line-height: 44px;
background: url("@/assets/top_btn.png") no-repeat;
// background: url("@/assets/top_btn.png") no-repeat;
background-size: 100% 100%;
}
}
......@@ -166,4 +166,4 @@ onUnmounted(() => {
}
}
}
</style>
\ No newline at end of file
</style>
src/router/router.js
View file @ 5b2c91d6
import { createRouter, createWebHashHistory } from "vue-router";
import { getToken } from "../utils/auth";
import index from "../view/index.vue";
import Login from '../view/login.vue'
import Login from "../view/login.vue";
const routes = [
{
path: "/",
......@@ -16,4 +17,14 @@ const router = createRouter({
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";
//绘制图标
export function drawIcon(position, imgName, data = {}) {
return viewer.entities.add({
position: position,
data,
billboard: {
image: new URL(
`../assets/imgs/${imgName}.png`,
import.meta.url
).href, // 图标图片的路径
width: 40,
height: 50 ,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
})
return viewer.entities.add({
position: position,
data,
billboard: {
image: new URL(`../assets/imgs/${imgName}.png`, import.meta.url).href, // 图标图片的路径
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({
position: position,
data,
......@@ -29,9 +33,65 @@ export function drawLabel(position, text, backgroundColor, data = {}, labelOptio
backgroundColor: Cesium.Color.fromCssColorString(backgroundColor),
backgroundPadding: new Cesium.Cartesian2(10, 8),
font: "18px sans-serif",
pixelOffset: new Cesium.Cartesian2( 0, -50),
pixelOffset: new Cesium.Cartesian2(0, -75),
...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>
<div class="community-select-box">
<div class="_header line-y fs-14">
<img src="../../assets/imgs/sqtb_icon.png" />
选择社区
</div>
<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">
<img v-show="index === selectIndex" src="../../assets/imgs/sqxx_icon.png"/> {{ item.name }}
</div>
</div>
<div class="show-btn line-xy" @click="showToggle">
<img :src="showList ? getAssetImg('jt_up') : getAssetImg('jt_down')" />
<div class="community-select-box">
<div class="_header line-y fs-14">
<img src="../../assets/imgs/sqtb_icon.png" />
选择社区
</div>
<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"
>
<img
v-show="index === selectIndex"
src="../../assets/imgs/sqxx_icon.png"
/>
{{ item.name }}
</div>
</div>
<div class="show-btn line-xy" @click="showToggle">
<img :src="showList ? getAssetImg('jt_up') : getAssetImg('jt_down')" />
</div>
</div>
</template>
<script setup>
import { ref, defineEmits, watch, onMounted } from "vue";
const props = defineProps(['communityList'])
const emit = defineEmits(['communityChange'])
let showList = ref(false)
let selectIndex = ref(-1)
const props = defineProps(["communityList"]);
const emit = defineEmits(["communityChange"]);
let showList = ref(false);
let selectIndex = ref(-1);
function getAssetImg(imgName) {
return new URL(`../../assets/imgs/${imgName}.png`, import.meta.url).href;
}
function showToggle() {
showList.value = !showList.value
showList.value = !showList.value;
}
function itemClick(item, index) {
console.log('itemClick', item, index)
selectIndex.value = index
emit('communityChange', selectIndex.value)
console.log("itemClick", item, index);
selectIndex.value = index;
emit("communityChange", selectIndex.value);
}
onMounted(() => {
itemClick(props.communityList[0], 0)
})
itemClick(props.communityList[0], 0);
});
</script>
<style lang="scss" scoped>
.community-select-box{
z-index: 999;
position: fixed;
top: 200px;
right: 460px;
width: 120px;
background-color: rgba($color: #091927, $alpha: 0.7);
._header{
height: 44px;
padding-left: 10px;
color: #77C8FF;
img{
margin-right: 8px;
}
.community-select-box {
z-index: 1;
position: fixed;
top: 200px;
right: 460px;
width: 120px;
background-color: rgba($color: #091927, $alpha: 0.7);
._header {
height: 44px;
padding-left: 10px;
color: #77c8ff;
img {
margin-right: 8px;
}
.community-list{
max-height: 0;
overflow: hidden;
transition: max-height 0.1s;
.community-item{
height: 28px;
color: #fff;
padding-left: 30px;
position: relative;
cursor: pointer;
img{
position: absolute;
left: 12px;
top: 7px;
}
}
.active{
background: url('../../assets/imgs/sq_hover.png') no-repeat;
color: #77C8FF;
background-size: 100% 100%;
}
.community-list {
max-height: 0;
overflow: hidden;
transition: max-height 0.1s;
.community-item {
height: 28px;
color: #fff;
padding-left: 30px;
position: relative;
cursor: pointer;
img {
position: absolute;
left: 12px;
top: 7px;
}
}
.show{
max-height: 800px;
transition: max-height 1s;
}
.show-btn{
cursor: pointer;
padding: 10px 0;
.active {
background: url("../../assets/imgs/sq_hover.png") no-repeat;
color: #77c8ff;
background-size: 100% 100%;
}
}
</style>
\ No newline at end of file
.show {
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 @@
<div class="member-table-container">
<div class="_header line-xy fs-18">
<div class="title">业主委员会成员信息</div>
<img @click="close" src="../../assets/imgs/close_icon.png"/>
<img @click="close" src="../../assets/imgs/close_icon.png" />
</div>
<div class="table-box">
<div class="table-header line-y fs-16">
......@@ -17,7 +17,11 @@
<div class="table-header-item i">联系方式</div>
</div>
<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 b">{{ item.name }}</div>
<div class="item-value c">{{ item.sex }}</div>
......@@ -35,69 +39,70 @@
<script setup>
const props = defineProps(["ownerList"]);
const emit = defineEmits(['close'])
const emit = defineEmits(["close"]);
function close() {
emit('close')
emit("close");
}
</script>
<style lang="scss" scoped>
.member-table-container{
.member-table-container {
position: absolute;
z-index: 999;
top: -20px;
right: 430px;
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%;
color: #77C8FF;
._header{
color: #77c8ff;
._header {
position: relative;
img{
img {
cursor: pointer;
position: absolute;
right: 0;
top: -10px;
}
}
.table-box{
border: 1px solid #1772A0;
.table-box {
border: 1px solid #1772a0;
border-right: none;
margin-top: 13px;
.table-header{
color: #77C8FF;
.table-header-item{
border-right: 1px solid #1772A0;
.table-header {
color: #77c8ff;
.table-header-item {
border-right: 1px solid #1772a0;
text-align: center;
line-height: 30px;
height: 30px;
width: 85px;
}
}
.table-list{
color: #F6FCFE;
.table-item{
border-top: 1px solid #1772A0;
.table-list {
color: #f6fcfe;
.table-item {
border-top: 1px solid #1772a0;
height: 30px;
.item-value{
.item-value {
text-align: center;
line-height: 30px;
width: 85px;
border-right: 1px solid #1772A0;
border-right: 1px solid #1772a0;
}
}
}
.c{
.c {
width: 60px !important;
}
.g {
width: 65px !important;
}
.h{
.h {
width: 156px !important;
}
.i{
.i {
width: 100px !important;
}
}
}
</style>
\ No newline at end of file
</style>
src/view/components/screenHeader.vue
View file @ 5b2c91d6
<template>
<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="week">{{ timeInfo.todayWeek }}</div>
<div class="time">{{ timeInfo.nowtime }}</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 id="he-plugin-simple"></div>
</div>
</div>
<div class="logout" @click="logout">退出登录</div>
</div>
</template>
<script setup>
import {
onMounted,
ref,
reactive,
} from "vue";
import { removeToken } from "../../utils/auth";
import { useRouter } from "vue-router";
import { onMounted, ref, reactive } from "vue";
const weekMap = ["日", "一", "二", "三", "四", "五", "六"];
const timeInfo = reactive({
nowtime: "",
......@@ -34,71 +33,89 @@ function getNowTime() {
let date =
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
timeInfo.nowtime =
twoDigits(today.getHours()) +
":" +
twoDigits(today.getMinutes())
twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes());
timeInfo.todayDate = date;
timeInfo.todayWeek = "星期" + weekMap[today.getDay()];
}
let router = new useRouter();
function logout() {
ElMessageBox.confirm("确定退出登录吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
removeToken();
router.push("/login");
})
.catch(() => {});
}
onMounted(() => {
window.WIDGET = {
CONFIG: {
modules: "02",
background: "5",
tmpColor: "FFFFFF",
tmpSize: "20",
cityColor: "FFFFFF",
citySize: "16",
aqiColor: "FFFFFF",
aqiSize: "16",
weatherIconSize: "26",
alertIconSize: "18",
padding: "4px 10px 10px 50px",
shadow: "0",
language: "auto",
fixed: "false",
vertical: "top",
horizontal: "left",
key: "45d56907b4ad4ead870bfd4f515e8b97",
},
};
let script = document.createElement("script");
script.src =
"https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
document.getElementById("he-plugin-simple").appendChild(script);
getNowTime()
})
CONFIG: {
modules: "02",
background: "5",
tmpColor: "FFFFFF",
tmpSize: "20",
cityColor: "FFFFFF",
citySize: "16",
aqiColor: "FFFFFF",
aqiSize: "16",
weatherIconSize: "26",
alertIconSize: "18",
padding: "4px 10px 10px 50px",
shadow: "0",
language: "auto",
fixed: "false",
vertical: "top",
horizontal: "left",
key: "45d56907b4ad4ead870bfd4f515e8b97",
},
};
let script = document.createElement("script");
script.src =
"https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
document.getElementById("he-plugin-simple").appendChild(script);
getNowTime();
});
</script>
<style lang="scss" scoped>
.screen-header{
.screen-header {
z-index: 999;
width: 100%;
height: 85px;
position: fixed;
background: url('../../assets/imgs/top_title.png') no-repeat;
background: url("../../assets/imgs/top_title.png") no-repeat;
background-size: 100% 100%;
padding: 0 36px;
.screen-header__right{
.screen-header__right {
margin-left: auto;
display: flex;
}
.date{
font-family: 'SourceHanSansCN';
.date {
font-family: "SourceHanSansCN";
font-style: italic;
font-size: 18px;
color: #CDD6E3;
color: #cdd6e3;
}
.week{
.week {
margin: 0 24px;
font-family: 'SourceHanSansCN';
font-family: "SourceHanSansCN";
font-style: italic;
font-size: 18px;
color: #CDD6E3;
color: #cdd6e3;
}
.time{
font-family: 'YouSheBiaoTiHei';
color: #FFCE64;
.time {
font-family: "YouSheBiaoTiHei";
color: #ffce64;
font-size: 30px;
}
}
</style>
\ No newline at end of file
.logout {
height: 20px;
color: #fff;
margin-top: 5px;
cursor: pointer;
}
</style>
src/view/components/screenLeft.vue
View file @ 5b2c91d6
......@@ -6,26 +6,39 @@
<div class="content-item-box line-y">
<div class="content-item line-y">
<img src="../../assets/imgs/xq_tb_icon.png" />
<div class="text">
<div class="value">{{ currentHouseInfo.name }}</div>
<div class="label">小区名称</div>
</div>
<el-tooltip
popper-class="tooltip"
effect="light"
:content="currentHouseInfo.name"
placement="bottom"
>
<div class="text">
<div class="value">{{ currentHouseInfo.name }}</div>
<div class="label">小区名称</div>
</div>
</el-tooltip>
</div>
<div class="content-item line-y">
<img src="../../assets/imgs/jfsj_tb_icon.png" />
<div class="text">
<div
class="value"
style="
color: #6effe5;
font-family: 'YouSheBiaoTiHei';
font-size: 18px;
"
>
{{ currentHouseInfo.deliveryDate }}
</div>
<div class="label">交付时间</div>
</div>
<el-tooltip
popper-class="tooltip"
effect="light"
:content="currentHouseInfo.deliveryDate"
placement="bottom"
><div class="text">
<div
class="value"
style="
color: #6effe5;
font-family: 'YouSheBiaoTiHei';
font-size: 18px;
"
>
{{ currentHouseInfo.deliveryDate }}
</div>
<div class="label">交付时间</div>
</div></el-tooltip
>
</div>
</div>
<div class="info-box">
......@@ -47,14 +60,17 @@
@mouseleave="itemLeave(index)"
:key="item.label"
>
<div class="value" :title="currentHouseInfo[item.valueKey]" :style="{ color: item.color }">
{{ currentHouseInfo[item.valueKey]
}}<span style="font-size: 14px; font-family: 'SourceHanSansCN'"></span>
<div class="value" :style="{ color: item.color }">
{{ currentHouseInfo[item.valueKey] || "--"
}}<span
style="font-size: 14px; font-family: 'SourceHanSansCN'"
></span>
</div>
<div class="label">{{ item.label }}</div>
</div>
<div class="standard-box" v-show="standardShow">
<div class="title">{{ popupData.title }}</div>
<div class="content">{{ popupData.content }}</div>
</div>
</div>
<div class="tab-box line-x">
......@@ -73,39 +89,43 @@
<div class="rate-chart-container">
<div class="rate-chart-item">
<div class="_title line-xy">
<img src="../../assets//imgs/sjx_icon.png"/>
<img src="../../assets//imgs/sjx_icon.png" />
车位占比
</div>
<div id="carportChart"></div>
<div class="legend-box fs-12">
<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="value">{{currentHouseInfo.publicParkingTotal}}个</div>
<div class="value">
{{ currentHouseInfo.publicParkingTotal }}个
</div>
</div>
<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="value">{{currentHouseInfo.personalParkingTotal}}个</div>
<div class="value">
{{ currentHouseInfo.personalParkingTotal }}个
</div>
</div>
</div>
</div>
<div class="rate-chart-item">
<div class="_title line-xy">
<img src="../../assets//imgs/sjx_icon.png"/>
<img src="../../assets//imgs/sjx_icon.png" />
入住率
</div>
<div id="checkinChart"></div>
<div class="legend-box fs-12">
<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="value">{{currentHouseInfo.occupancyRate}}</div>
<div class="value">{{ currentHouseInfo.occupancyRate }}</div>
</div>
<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="value">{{currentHouseInfo.rentalRate}}</div>
<div class="value">{{ currentHouseInfo.rentalRate }}</div>
</div>
</div>
</div>
......@@ -119,10 +139,12 @@
import { onMounted, ref, reactive, watch } from "vue";
import * as echarts from "echarts";
const props = defineProps(["currentHouseInfo"]);
let pieChart = null;
let carportChart = null;
let checkinChart = null;
let standardShow =ref(false)
let standardShow = ref(false);
let popupData = ref({});
let tabIndex = ref(0);
let baseInfoData = ref([
{ label: "所属社区", valueKey: "communityName" },
......@@ -133,41 +155,70 @@ let baseInfoData = ref([
let overviewData = ref([
{ label: "占地面积", valueKey: "coverSpace", color: "#05EA81", unit: "㎡" },
{ label: "总建筑面积", valueKey: "floorSpace", color: "#FABB24", unit: "㎡" },
{ label: "物业办公用房面积", valueKey: "propertyOfficeSpace", color: "#FFEC56", unit: "㎡", },
{ label: "社区公房面积", valueKey: "communityOfficeSpace", color: "#05EA81", unit: "㎡" },
{ label: "物业经营用房面积", valueKey: "propertyBusinessSituation", color: "#009AFF", unit: "㎡" },
{ label: "物业一级收费标准", valueKey: "propertyFees", color: "#FABB24", unit: "元/月" },
{
label: "物业办公用房面积",
valueKey: "propertyOfficeSpace",
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) => {
pieChartInit()
carportChartInit()
checkinChartInit()
})
watch(
() => props.currentHouseInfo,
(val) => {
pieChartInit();
carportChartInit();
checkinChartInit();
}
);
function itemHover(index) {
if (index === 5) {
standardShow.value = true
if ([1, 4, 5].includes(index)) {
standardShow.value = true;
const valueKey = overviewData.value[index].valueKey;
popupData.value = {
title: overviewData.value[index].label,
content: props.currentHouseInfo[valueKey],
};
}
}
function itemLeave(index) {
if (index === 5) {
standardShow.value = false
if ([1, 4, 5].includes(index)) {
standardShow.value = false;
}
}
function pieChartInit() {
let data = [
{name: '高层', value: props.currentHouseInfo.houseHighTotal},
{name: '小高层', value: props.currentHouseInfo.houseSmallHighTotal},
{name: '多层', value: props.currentHouseInfo.houseManyTotal},
{name: '别墅', value: props.currentHouseInfo.houseVillaTotal},
{name: '商铺', value: props.currentHouseInfo.houseBusinessTotal},
{name: '公寓', value: props.currentHouseInfo.houseApartmentTotal},
]
{ name: "高层", value: props.currentHouseInfo.houseHighTotal },
{ name: "小高层", value: props.currentHouseInfo.houseSmallHighTotal },
{ name: "多层", value: props.currentHouseInfo.houseManyTotal },
{ name: "别墅", value: props.currentHouseInfo.houseVillaTotal },
{ name: "商铺", value: props.currentHouseInfo.houseBusinessTotal },
{ name: "公寓", value: props.currentHouseInfo.houseApartmentTotal },
];
pieChart = echarts.init(document.getElementById("pieChart"));
pieChart.setOption({
grid: {
top: '10%',
bottom: '10%'
},
top: "10%",
bottom: "10%",
},
legend: {
show: false,
},
......@@ -178,150 +229,189 @@ function pieChartInit() {
{
name: "房屋类型统计",
type: "pie",
radius: [10, 80],
radius: [35, 70],
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
label: {
show: true,
formatter: "{b} {d}%",
color: "#fff",
},
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() {
let sum = Number(props.currentHouseInfo.personalParkingTotal) + Number(props.currentHouseInfo.publicParkingTotal)
let sum =
Number(props.currentHouseInfo.personalParkingTotal) +
Number(props.currentHouseInfo.publicParkingTotal);
let color = [
[Number(props.currentHouseInfo.publicParkingTotal) / sum, "#1894EE"],
]
];
if (Number(props.currentHouseInfo.personalParkingTotal) > 0) {
color.push([1, "#05EA81"])
color.push([1, "#05EA81"]);
}
carportChart = echarts.init(document.getElementById("carportChart"));
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",
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,
},
],
value: 100,
},
],
})
},
],
graphic: {
type: "text",
left: "center",
top: "center",
style: {
text: sum,
textAlign: "center",
fill: "#E8F6FF", // 文本颜色
fontSize: 16, // 文本大小
},
},
});
}
function checkinChartInit() {
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;
let color = [
[occupancyRateNumber, "#39CAD1"],
[1, "#009AFF"],
]
];
checkinChart = echarts.init(document.getElementById("checkinChart"));
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",
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,
},
],
value: 100,
},
],
})
},
],
graphic: {
type: "text",
left: "center",
top: "center",
style: {
text: "100%",
textAlign: "center",
fill: "#E8F6FF", // 文本颜色
fontSize: 16, // 文本大小
},
},
});
}
</script>
......@@ -342,6 +432,7 @@ function checkinChartInit() {
background-size: 100% 100%;
padding: 15px 20px 10px;
.content-item-box {
display: flex;
justify-content: space-between;
}
.content-item {
......@@ -349,6 +440,11 @@ function checkinChartInit() {
margin-left: 10px;
.value {
color: #eff7ff;
width: 115px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.label {
font-size: 12px;
......@@ -364,6 +460,7 @@ function checkinChartInit() {
white-space: nowrap;
}
.value {
font-size: 14px;
}
}
}
......@@ -371,7 +468,7 @@ function checkinChartInit() {
}
.overview {
margin-top: 20px;
.content-container {
background: url("../../assets/imgs/left_box02.png") no-repeat;
background-size: 100% 100%;
......@@ -405,15 +502,22 @@ function checkinChartInit() {
font-size: 12px;
}
}
.standard-box{
.standard-box {
color: #fff;
padding: 20px;
position: absolute;
bottom: -158px;
left: 220px;
top: 0px;
left: 430px;
z-index: 999;
width: 287px;
height: 166px;
background: url('../../assets/imgs/tk_box01.png') no-repeat;
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;
}
}
}
.tab-box {
......@@ -438,42 +542,42 @@ function checkinChartInit() {
height: 180px;
width: 100%;
}
.rate-chart-container{
.rate-chart-container {
padding-top: 20px;
display: flex;
.rate-chart-item{
.rate-chart-item {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
._title{
._title {
color: #fff;
font-size: 16px;
img{
img {
margin-right: 6px;
}
}
#carportChart{
height: 140px
#carportChart {
height: 140px;
}
#checkinChart{
height: 140px
#checkinChart {
height: 140px;
}
.legend-box{
.legend-box {
padding: 0 20px;
width: 100%;
color: #E9F6FF;
color: #e9f6ff;
margin: 0 auto;
.legend-item{
.legend-item {
margin: 0 auto;
}
.color{
.color {
margin-right: 6px;
width: 20px;
height: 6px;
border-radius: 3px;
}
.value{
.value {
margin-left: auto;
}
}
......@@ -482,4 +586,9 @@ function checkinChartInit() {
}
}
}
</style>
\ No newline at end of file
</style>
<style lang="scss">
.tooltip {
color: #092b40;
}
</style>
src/view/components/screenRight.vue
View file @ 5b2c91d6
......@@ -12,7 +12,10 @@
</div>
<div class="company-info line-y">
<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>
<div class="info-content line-y">
......@@ -20,15 +23,18 @@
<div class="value">{{ currentHouseInfo.propertyManagerTel }}</div>
<div class="label">物业经理</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="label">物业联系人</div>
</div>
</div>
</div>
</div>
<div class="company-info line-y">
<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>
<div class="info-content line-y staffing">
......@@ -37,20 +43,42 @@
<div class="label">{{ item.label }}人数</div>
</div>
</div>
</div>
</div>
<div class="company-info line-y">
<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>
<div class="info-content examine">
<p v-if="currentHouseInfo.propertyAssessmentStatus === '是'">{{ currentHouseInfo.propertyAssessment }}</p>
<div
class="info-content examine"
@mouseenter="itemHover()"
@mouseleave="itemLeave()"
>
<p v-if="currentHouseInfo.propertyAssessmentStatus === '是'">
{{ currentHouseInfo.propertyAssessment }}
</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 class="company-info line-y">
<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>
<div class="info-content">
......@@ -59,306 +87,428 @@
<div class="label">合同期限</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 class="member-info line-y">
<div class="info-item">
<div class="label">缺额</div><div class="value">{{ currentHouseInfo.ownerVacancy }}</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 class="info-item">
<div class="label">党支部</div><div class="value">{{ currentHouseInfo.ownerParty }}</div>
<div class="member-info line-y">
<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 class="member-info line-y">
<div class="info-item" @click="tableShow = true">
<div class="label">人员信息</div><div class="value" style="cursor: pointer; width: 270px;" :title="ownerTitle" >{{ ownerTitle || '无' }}</div>
<div class="member-info line-y">
<div class="info-item" @click="tableShow = true">
<div class="label">人员信息</div>
<div
class="value"
style="cursor: pointer; width: 270px"
:title="ownerTitle"
>
{{ ownerTitle || "无" }}
</div>
</div>
</div>
</div>
<member-table
:ownerList="ownerList"
@close="tableShow = false"
v-if="tableShow"
></member-table>
</div>
<member-table :ownerList="ownerList" @close="tableShow = false" v-if="tableShow"></member-table>
</div>
<div class="event">
<div class="module-title">事件分析</div>
<div class="content-container">
<div class="count-box line-y">
<div class="count-item" v-for="item in countData" :key="item.color">
<div class="label fs-14">{{item.label}}等级</div>
<div class="value fs-24" :style="{'color': item.color}">{{item.value}}</div>
<div class="event">
<div class="module-title">事件分析</div>
<div class="content-container">
<div class="count-box line-y">
<div class="count-item" v-for="item in countData" :key="item.color">
<div class="label fs-14">{{ item.label }}色等级</div>
<div class="value fs-24" :style="{ color: item.color }">
{{ item.value }}
</div>
</div>
</div>
</div>
<div class="search-box">
<input placeholder="请输入关键字" v-model="keyword" />
<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 class="search-box">
<input placeholder="请输入关键字" v-model="keyword" />
<div class="search-btn line-xy fs-14">查询</div>
</div>
<div class="table-list">
<div class="table-item line-y" v-for="(item, index) in tableData" :key="index">
<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 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>
<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>
<detail
v-if="detailShow"
@close="detailShow = false"
:detailData="detailData"
/>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, reactive, watch} from "vue";
import { getOwnerList, getEventList, getEventCount } from '../../api/index.js'
import { onMounted, ref, reactive, watch } from "vue";
import {
getOwnerList,
getEventList,
getEventCount,
getEventInfo,
} from "../../api/index.js";
import memberTable from "./memberTable.vue";
import detail from "./detail.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const props = defineProps(["currentHouseInfo"]);
let ownerTitle = ref('')
let ownerList = ref('')
let tableShow = ref(false)
let ownerTitle = ref("");
let ownerList = ref("");
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([
{ label: '保安', valueKey: 'propertySafeTotal'},
{ label: '保洁', valueKey: 'propertyCleanTotal'},
{ label: '工程', valueKey: 'propertyProjectTotal'},
{ label: '客服', valueKey: 'propertyCustomTotal'},
])
{ label: "保安", valueKey: "propertySafeTotal" },
{ label: "保洁", valueKey: "propertyCleanTotal" },
{ label: "工程", valueKey: "propertyProjectTotal" },
{ label: "客服", valueKey: "propertyCustomTotal" },
]);
let countData = ref([
{ label: '红色', value: '12', color: '#F3232D'},
{ label: '黄色', value: '2', color: '#FFEC56'},
{ label: '绿色', value: '1108', color: '#05EA81'},
])
let tableData = ref([
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 1},
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 2},
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 3},
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 1},
{name: '90幢301室居民反映楼上有孩子在反映楼上有孩子在', degree: 2}
])
let keyword = ref('')
watch(() => props.currentHouseInfo, (val) => {
getOwnerListFunc(val.communityId, val.id)
getEventListFunc(val.id)
console.log('start', new Date(val.propertyStartTime))
console.log('end', new Date(val.propertyEndTime))
})
{ label: "红", value: "0", color: "#F3232D" },
{ label: "黄", value: "0", color: "#FFEC56" },
{ label: "绿", value: "0", color: "#05EA81" },
]);
let tableData = ref([]);
let keyword = ref("");
watch(
() => props.currentHouseInfo,
(val) => {
getOwnerListFunc(val.communityId, val.id);
getEventListFunc(val.id);
console.log("start", new Date(val.propertyStartTime));
console.log("end", new Date(val.propertyEndTime));
}
);
function getOwnerListFunc(communityId, houseId) {
getOwnerList({
communityId,
houseId
}).then(res => {
houseId,
}).then((res) => {
if (res.data.length) {
ownerList.value = res.data
ownerTitle.value = res.data.map(i => i.name).join('、')
ownerList.value = res.data;
ownerTitle.value = res.data.map((i) => i.name).join("、");
}
})
});
}
function getEventListFunc(houseId) {
getEventCount({
houseId
}).then(res => {
console.log('getEventCount', res)
})
houseId,
}).then((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({
houseId
}).then(res => {
console.log('getEventList', res)
})
houseId,
}).then((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>
<style lang="scss" scoped>
.screen-right{
.screen-right {
height: 100vh;
position: fixed;
right: 0;
top: 0;
width: 500px;
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%;
padding: 60px 20px 0 70px;
.patrol{
.content-container{
background: url('../../assets/imgs/right_box01.png') no-repeat;
.patrol {
.content-container {
background: url("../../assets/imgs/right_box01.png") no-repeat;
background-size: 100% 100%;
padding: 6px 20px 10px;
}
.label{
color: #CAEAFF;
.label {
color: #caeaff;
}
.company-name{
.text{
.company-name {
.text {
margin-left: 16px;
.value{
color: #F6FCFE;
.value {
color: #f6fcfe;
}
}
}
}
.company-info{
.company-info {
padding: 15px 0 6px;
border-bottom: 2px solid rgba($color: #70C5FF, $alpha: 0.2);
.text{
border-bottom: 2px solid rgba($color: #70c5ff, $alpha: 0.2);
.text {
margin-left: 16px;
.value{
color: #F6FCFE;
.value {
color: #f6fcfe;
}
}
.icon{
.icon {
width: 50px;
display: flex;
flex-direction: column;
align-items: center;
img{
margin-right: 10px;
img {
margin-bottom: 6px;
}
}
.info-content{
margin-left: 20px;
.info-item{
.info-content {
position: relative;
.info-item {
display: flex;
flex-direction: column;
align-items: center;
.value{
font-size: 16px;
.value {
font-size: 14px;
color: #fff;
}
.label{
.label {
font-size: 12px;
color: #CAEAFF;
color: #caeaff;
}
}
}
.staffing{
.staffing {
flex: 1;
justify-content: space-between;
}
.examine{
.examine p {
width: 300px;
color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.standard-box {
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;
margin-top: 20px;
.content-container{
background: url('../../assets/imgs/right_box02.png') no-repeat;
.content-container {
background: url("../../assets/imgs/right_box02.png") no-repeat;
background-size: 100% 100%;
.member-info{
background: url('../../assets/imgs/yzwyh_list.png') no-repeat;
.member-info {
background: url("../../assets/imgs/yzwyh_list.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 15px;
padding: 5px 20px;
.info-item{
.info-item {
display: flex;
justify-content: space-between;
.label{
.label {
white-space: nowrap;
width: 50px;
text-align: right;
color: #CAEAFF;
color: #caeaff;
}
.value{
.value {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-left: 20px;
color: #F6FCFE;
color: #f6fcfe;
}
}
}
}
}
.event{
.event {
margin-top: 20px;
.content-container{
background: url('../../assets/imgs/right_box03.png') no-repeat;
position: relative;
.content-container {
background: url("../../assets/imgs/right_box03.png") no-repeat;
background-size: 100% 100%;
.count-box{
.count-box {
justify-content: space-between;
padding: 5px 40px;
.count-item{
.count-item {
display: flex;
flex-direction: column;
align-items: center;
.label{
color: #CAEAFF;
.label {
color: #caeaff;
}
.value{
font-family: 'YouSheBiaoTiHei';
.value {
font-family: "YouSheBiaoTiHei";
}
}
}
.search-box{
.search-box {
width: 334px;
height: 30px;
border: 1px solid #0199DF;
border: 1px solid #0199df;
border-radius: 2px;
margin: 0 auto 12px;
padding-left: 10px;
display: flex;
input{
input {
flex: 1;
background-color: transparent;
border: none;
color: #009AFF;
&::placeholder{
color: #009aff;
&::placeholder {
font-size: 14px;
color: #009AFF;
color: #009aff;
}
&:focus{
&:focus {
outline: none;
}
}
.search-btn{
width: 43px;height: 100%;
.search-btn {
width: 43px;
height: 100%;
cursor: pointer;
color: #fff;
background-color: #0199DF;
background-color: #0199df;
}
}
.table-box{
.table-box {
color: #fff;
.table-header{
.table-header {
}
.table-list{
.table-item{
height: 40px;
.degree{
.table-list {
height: 190px;
overflow: hidden;
.table-item {
height: calc(190px / 5);
cursor: pointer;
.degree {
width: 12px;
height: 12px;
border-radius: 50%;
}
}
}
.num{
.num {
width: 50px;
}
.name{
.name {
width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.degree{
.degree {
margin: 0 auto;
}
}
}
}
}
</style>
\ No newline at end of file
</style>
src/view/index.vue
View file @ 5b2c91d6
......@@ -3,89 +3,108 @@
<screen-header></screen-header>
<screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
<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>
</template>
<script setup>
import { onMounted, ref, watch, nextTick } from 'vue'
import { cesiumInit } from '../utils/cesium.js'
import { onMounted, ref, watch, nextTick } from "vue";
import { cesiumInit } from "../utils/cesium.js";
import * as Cesium from "cesium";
import screenHeader from './components/screenHeader.vue';
import screenLeft from './components/screenLeft.vue';
import screenRight from './components/screenRight.vue';
import communitySelect from './components/communitySelect.vue';
import { drawIcon, drawLabel } from '../utils/cesiumTools'
import { getCommunityList, getHouseList, getHouseInfo } from '../api/index.js'
import { getUserType } from '../api/user'
const communitySelectRef = ref(null)
let viewer = null
let communityList = ref([])
let userTypeInfo = ref({})
let currentCommunityInfo = ref({})
let currentHouseInfo = ref({})
import screenHeader from "./components/screenHeader.vue";
import screenLeft from "./components/screenLeft.vue";
import screenRight from "./components/screenRight.vue";
import communitySelect from "./components/communitySelect.vue";
import { drawLabel } from "../utils/cesiumTools";
import { getCommunityList, getHouseList, getHouseInfo } from "../api/index.js";
import { getUserType } from "../api/user";
const communitySelectRef = ref(null);
let viewer = null;
let communityList = ref([]);
let userTypeInfo = ref({});
let currentCommunityInfo = ref({});
let currentHouseInfo = ref({});
watch(currentCommunityInfo, (val) => {
console.log('currentCommunityInfo', val)
let position = JSON.parse(val.solid)
flyTo({longitude: position.x, latitude: position.y})
getHouseListFunc(val.id)
})
console.log("currentCommunityInfo", val);
let position = JSON.parse(val.solid);
flyTo({ longitude: position.x, latitude: position.y });
getHouseListFunc(val.id);
});
function communityChangeHandle(index) {
currentCommunityInfo.value = communityList.value[index]
currentCommunityInfo.value = communityList.value[index];
}
// 获取登录用户信息
function getUserTypeInfo() {
getUserType().then(res => {
userTypeInfo.value = res.data
getUserType().then((res) => {
if (!res.data) userTypeInfo.value = { type: 6 };
else userTypeInfo.value = res.data;
if (userTypeInfo.value.type === 6) {
// 街道管理员
drawCommunityMarker(communityList.value)
drawCommunityMarker(communityList.value);
} else if (userTypeInfo.value.type === 4) {
// 社区管理员
let communityInfo = communityList.value.find(item => item.id === userTypeInfo.value.communityId)
console.log('communityInfo', communityInfo)
drawCommunityMarker([communityInfo])
getHouseListFunc(userTypeInfo.value.communityId)
let communityInfo = communityList.value.find(
(item) => item.id === userTypeInfo.value.communityId
);
console.log("communityInfo", communityInfo);
drawCommunityMarker([communityInfo]);
getHouseListFunc(userTypeInfo.value.communityId);
} else if (userTypeInfo.value.type === 5) {
// 小区管理员
getHouseInfoFunc(userTypeInfo.value.houseId)
getHouseInfoFunc(userTypeInfo.value.houseId);
}
})
});
}
// 获取小区列表
function getHouseListFunc(communityId) {
getHouseList(communityId).then(res => {
drawHouseMarker(res.data)
getHouseInfoFunc(res.data[0].id)
})
getHouseList(communityId).then((res) => {
drawHouseMarker(res.data);
getHouseInfoFunc(res.data[0].id);
});
}
// 绘制社区标记
function drawCommunityMarker(arr) {
arr.forEach(item => {
let position = degreesToCartesian(JSON.parse(item.solid))
drawLabel(position, item.name, '#0B6832', {...item, type: 'community'})
drawIcon(position, 'green_dw_icon', {...item, type: 'community'})
})
arr.forEach((item) => {
let position = degreesToCartesian(JSON.parse(item.solid));
drawLabel(position, item.name, "#0B6832", "green_dw_icon", {
...item,
type: "community",
});
});
}
// 绘制小区标记
function drawHouseMarker(arr) {
arr.forEach(item => {
let position = JSON.parse(item.solid)
drawLabel(position, item.name, '#003860', {...item, type: 'house'})
drawIcon(position, 'blue_dw_icon', {...item, type: 'house'})
})
arr.forEach((item) => {
let position = JSON.parse(item.solid);
drawLabel(position, item.name, "#003860", "blue_dw_icon", {
...item,
type: "house",
});
});
}
// 获取小区信息
function getHouseInfoFunc(houseId) {
getHouseInfo(houseId).then(res => {
currentHouseInfo.value = res.data
let position = JSON.parse(currentHouseInfo.value.solid)
drawIcon(position, 'blue_dw_icon')
drawLabel(position, currentHouseInfo.value.name, '#003860')
flyTo(cartesianToDegrees(position))
})
getHouseInfo(houseId).then((res) => {
currentHouseInfo.value = res.data;
let { solid, coordinates } = currentHouseInfo.value;
drawLabel(
JSON.parse(solid),
currentHouseInfo.value.name,
"#003860",
"blue_dw_icon"
);
// drawPolygonLine(JSON.parse(coordinates));
flyTo(cartesianToDegrees(JSON.parse(solid)));
});
}
// cesium笛卡尔坐标转成经纬度坐标
function cartesianToDegrees(cartesian) {
......@@ -97,7 +116,7 @@ function cartesianToDegrees(cartesian) {
latitude,
};
}
// cesium 经纬度转笛卡尔坐标
// cesium 经纬度转笛卡尔坐标
function degreesToCartesian(position) {
let cartesian3 = Cesium.Cartesian3.fromDegrees(position.x, position.y);
return cartesian3;
......@@ -111,33 +130,33 @@ function flyTo(position) {
1200 // 最后一个参数是高度（单位：米）
),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0.0,
pitch: Cesium.Math.toRadians(-85),
heading: 0,
roll: 0,
},
duration: 0.5, // 飞行时间（单位：秒）
duration: 1.5, // 飞行时间（单位：秒）
});
}
onMounted(async () => {
let communityRes = await getCommunityList()
getUserTypeInfo()
communityList.value = communityRes.data
viewer = cesiumInit('cesiumContainer')
let communityRes = await getCommunityList();
getUserTypeInfo();
communityList.value = communityRes.data;
viewer = cesiumInit("cesiumContainer");
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((click) => {
let pickObj = viewer.scene.pick(click.position)
let pickObj = viewer.scene.pick(click.position);
if (pickObj) {
console.log('pickObj', pickObj)
let type = pickObj.id._data.type
if (type === 'community') {
console.log("pickObj", pickObj);
let type = pickObj.id._data.type;
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);
})
});
</script>
<style lang="scss" scoped>
......@@ -146,4 +165,4 @@ onMounted(async () => {
width: 100vw;
height: 100vh;
}
</style>
\ No newline at end of file
</style>
vite.config.js
View file @ 5b2c91d6
import { defineConfig } from 'vite'
import { defineConfig } from "vite";
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 Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [vue(), cesium(), AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),],
base: "./",
plugins: [
vue(),
cesium(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
server: {
host: "0.0.0.0",
open: true,
proxy: {
"/api": {
target: "http://192.168.10.4:10024/",
"/prod-api": {
// target: "http://192.168.10.4:10024",
target: "https://xcsq.zjhmit.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
......@@ -29,4 +34,4 @@ export default defineConfig({
"@": "/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