Skip to content

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

页面开发

parent 77ad091a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 7093 additions and 142 deletions
.env.development 0 → 100644
View file @ 6e0ef467
ENV = 'development'
VITE_APP_BASE_API = '/api'
\ No newline at end of file
index.html
View file @ 6e0ef467
......@@ -5,6 +5,7 @@
<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>
......
package-lock.json 0 → 100644
View file @ 6e0ef467
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 6e0ef467
......@@ -9,10 +9,21 @@
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.11"
"axios": "^1.5.0",
"echarts": "^5.1.1",
"element-plus": "^2.3.12",
"js-cookie": "^3.0.5",
"sass": "^1.62.0",
"unplugin-auto-import": "^0.17.3",
"unplugin-vue-components": "^0.26.0",
"vue": "^3.3.11",
"vue-router": "^4.0.13",
"vuex": "^4.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"vite": "^5.0.8"
"cesium": "^1.104.0",
"vite": "^5.0.8",
"vite-plugin-cesium": "^1.2.22"
}
}
pnpm-lock.yaml
View file @ 6e0ef467
This diff is collapsed.
src/App.vue
View file @ 6e0ef467
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<router-view></router-view>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
src/api/index.js 0 → 100644
View file @ 6e0ef467
import request from '@/utils/request'
// 获取社区列表
export function getCommunityList() {
return request({
url: '/wcwy/large/community/list/0',
method: 'get'
})
}
// 获取小区列表
export function getHouseList(communityId) {
return request({
url: '/wcwy/large/getHouseList/' + communityId,
method: 'get'
})
}
//获取小区详情
export function getHouseInfo(id) {
return request({
url: '/wcwy/large/house/' + id,
method: 'get'
})
}
// 获取业委会列表
export function getOwnerList(data) {
return request({
url: '/wcwy/house/ownerlist',
method: 'post',
data
})
}
\ No newline at end of file
src/api/user.js 0 → 100644
View file @ 6e0ef467
import request from '../utils/request'
// 获取验证码
export function getCodeImg() {
return request({
url: '/code',
headers: {
isToken: false
},
method: 'get',
timeout: 20000
})
}
// 登录方法
export function login(username, password, code, uuid) {
return request({
url: '/auth/login',
headers: {
isToken: false
},
method: 'post',
data: { username, password, code, uuid }
})
}
// 获取用户信息
export function getUserType() {
return request({
url: '/nishisei/user/getNishiseiInfo',
method: 'get'
})
}
\ No newline at end of file
src/components/HelloWorld.vue deleted 100644 → 0
View file @ 77ad091a
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Install
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
src/components/header.vue 0 → 100644
View file @ 6e0ef467
<template>
<div class="top-box" v-if="props.showBtn"></div>
<div class="title">
<div class="time-box">
<div class="time">{{ timeInfo.nowtime }}</div>
<div class="date">{{ timeInfo.todayDate }}</div>
<div class="week">{{ timeInfo.todayWeek }}</div>
</div>
<div class="weather-box" v-if="!props.showBtn">
<div id="he-plugin-simple"></div>
</div>
<div class="button-box" v-else>
<div class="btn" @click="toIndex">返回首页</div>
</div>
</div>
</template>
<script setup>
import {
inject,
onMounted,
watch,
ref,
computed,
reactive,
onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
const weekMap = ["日", "一", "二", "三", "四", "五", "六"];
const timeInfo = reactive({
nowtime: "",
todayDate: "",
todayWeek: "",
});
const props = defineProps({
showBtn: {
type: Boolean,
},
});
let timerID = ref(null);
let router = new useRouter();
function twoDigits(val) {
if (val < 10) return "0" + val;
return val;
}
function toIndex() {
router.go(-1);
}
function getNowTime() {
let today = new Date();
let date =
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
timeInfo.nowtime =
twoDigits(today.getHours()) +
":" +
twoDigits(today.getMinutes()) +
":" +
twoDigits(today.getSeconds());
timeInfo.todayDate = date;
timeInfo.todayWeek = "星期" + weekMap[today.getDay()];
}
onMounted(() => {
if (!props.showBtn) {
window.WIDGET = {
CONFIG: {
modules: "02",
background: "5",
tmpColor: "FFFFFF",
tmpSize: "30",
cityColor: "FFFFFF",
citySize: "16",
aqiColor: "FFFFFF",
aqiSize: "16",
weatherIconSize: "40",
alertIconSize: "18",
padding: "10px 10px 10px 10px",
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);
}
timerID.value = setInterval(() => {
getNowTime();
}, 1000);
});
onUnmounted(() => {
clearInterval(timerID.value);
});
</script>
<style lang="scss" scoped>
.top-box {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: url("@/assets/top_bg.png") no-repeat;
background-size: 100% 100%;
height: 10%;
}
.title {
position: absolute;
top: 0;
left: 0;
z-index: 1001;
color: #fff;
height: 97px;
width: 100%;
display: flex;
background: url("@/assets/top_tile.png") no-repeat;
background-size: 100% 100%;
.button-box {
pointer-events: auto;
margin-top: 30px;
margin-left: auto;
margin-right: 35px;
display: flex;
.btn {
cursor: pointer;
width: 178px;
height: 70px;
color: #eff7ff;
text-align: center;
line-height: 44px;
background: url("@/assets/top_btn.png") no-repeat;
background-size: 100% 100%;
}
}
.weather-box {
pointer-events: auto;
margin-top: 20px;
margin-left: auto;
margin-right: 35px;
display: flex;
}
.time-box {
display: flex;
color: #fff;
margin-top: 10px;
align-items: center;
padding-left: 48px;
.time {
font-size: 30px;
font-weight: bold;
}
.date {
font-size: 14px;
margin: 0 9px;
}
.week {
font-size: 18px;
}
}
}
</style>
\ No newline at end of file
src/main.js
View file @ 6e0ef467
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { router } from './router/router.js'
import store from './store';
import './style.css'
import 'element-plus/dist/index.css'
const app = createApp(App)
createApp(App).mount('#app')
app.use(router).use(store).mount('#app')
src/router/router.js 0 → 100644
View file @ 6e0ef467
import { createRouter, createWebHashHistory } from "vue-router";
import index from "../view/index.vue";
import Login from '../view/login.vue'
const routes = [
{
path: "/",
component: index,
},
{
path: "/login",
component: Login,
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export { router };
\ No newline at end of file
src/store/index.js 0 → 100644
View file @ 6e0ef467
import { createStore } from 'vuex';
const store = createStore({
state: () => ({
}),
mutations: {
}
}
);
export default store;
\ No newline at end of file
src/style.css
View file @ 6e0ef467
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "SourceHanSansCN";
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
@font-face {
font-family: "YouSheBiaoTiHei";
src: url("./font/YouSheBiaoTiHei-2.ttf");
}
a:hover {
color: #535bf2;
@font-face {
font-family: "SourceHanSansCN";
src: url("./font/SourceHanSansCN-Medium.otf");
}
body {
margin: 0;
.line{
display: flex;
}
.line-x{
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
justify-content: center;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
.line-y{
display: flex;
align-items: center;
}
.line-xy{
display: flex;
justify-content: center;
align-items: center;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
.fs-12{
font-size: 12px;
}
button:hover {
border-color: #646cff;
.fs-14{
font-size: 14px;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
.fs-16{
font-size: 16px;
}
.card {
padding: 2em;
.fs-18{
font-size: 18px;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
.fs-24{
font-size: 24px;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
.module-title{
background: url('./assets/imgs/title_bg.png') no-repeat;
background-size: 100% 100%;
height: 38px;
font-size: 18px;
color: #F6FCFE;
font-family: "SourceHanSansCN";
font-style: italic;
padding-left: 10px;
}
.font-Sans{
font-family: "SourceHanSansCN";
}
\ No newline at end of file
src/utils/auth.js 0 → 100644
View file @ 6e0ef467
import Cookies from "js-cookie";
const TokenKey = "Admin-Token";
export function getToken() {
// return sessionStorage.getItem(TokenKey);
return Cookies.get(TokenKey)
}
export function setToken(token) {
// return sessionStorage.setItem(TokenKey, token);
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
src/utils/cesium.js 0 → 100644
View file @ 6e0ef467
import * as Cesium from "cesium";
export let viewer;
export function cesiumInit(id) {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxNmQ2YWZkNC1iZWI0LTRkMzMtODk4ZS1kZWM4MjhkNmUxMmYiLCJpZCI6MTM0NjA5LCJpYXQiOjE2ODE5Njk4MDV9.rHXCnAN14gIQUTBu1B640rhRnVxfDsfaJDDPLutJAog";
viewer = new Cesium.Viewer(id, {
sceneModePicker: false, // 禁用场景模式切换
baseLayerPicker: false, // 禁用基础图层切换
geocoder: false, // 禁用地理编码器
navigationHelpButton: false, // 禁用导航帮助按钮
homeButton: false, // 禁用回到初始视图按钮
animation: false, // 禁用动画小部件
timeline: false, // 禁用时间线小部件
fullscreenButton: false, // 禁用全屏按钮
//开启地形深度检测
// terrainProvider: Cesium.createWorldTerrain({
// requestWaterMask: true, // required for water effects
// requestVertexNormals: true, // required for terrain lighting
// }),
});
viewer.scene.screenSpaceCameraController.inertiaTranslate = 0;
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权信息
viewer.scene.postProcessStages.fxaa.enabled = true; //开启抗锯齿
viewer.scene.globe.depthTestAgainstTerrain = true; //深度
//提高亮度
viewer.scene.light = new Cesium.DirectionalLight({
direction: viewer.scene.camera.directionWC,
});
viewer.scene.preRender.addEventListener(function (scene, time) {
viewer.scene.light.direction = Cesium.Cartesian3.clone(
viewer.scene.camera.directionWC,
viewer.scene.light.direction
);
});
// 亮度设置
var stages = viewer.scene.postProcessStages;
viewer.scene.brightness =
viewer.scene.brightness ||
stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
viewer.scene.brightness.enabled = true;
viewer.scene.brightness.uniforms.brightness = Number(1.4);
//加载模型
//取消entity事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK
);
return viewer;
}
\ No newline at end of file
src/utils/cesiumTools.js 0 → 100644
View file @ 6e0ef467
import * as Cesium from "cesium";
import { viewer } from "./cesium.js";
//绘制图标
export function drawIcon(position, type) {
const iconSize = 23;
return viewer.entities.add({
position: position,
data: {},
billboard: {
image: new URL(
`../assets/imgs/blue_dw_icon.png`,
import.meta.url
).href, // 图标图片的路径
width: 40,
height: 50 ,
// pixelOffset: new Cesium.Cartesian2(
// idx * iconSize - iconOffset,
// -10
// // -iconSize * 2
// ),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
})
}
export function drawLabel(position, text, data = {}, labelOptions = {}) {
return viewer.entities.add({
position: position,
data: data,
label: {
text,
fillColor: Cesium.Color.WHITE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
showBackground: true,
backgroundColor: Cesium.Color.fromCssColorString('#003860'),
backgroundPadding: new Cesium.Cartesian2(10, 8),
font: "18px sans-serif",
pixelOffset: new Cesium.Cartesian2( 0, -50),
...labelOptions,
},
});
}
\ No newline at end of file
src/utils/request.js 0 → 100644
View file @ 6e0ef467
import axios from "axios";
import { getToken, removeToken } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router"
const router = new useRouter()
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
//是否重新登录
export let isRelogin = { show: false };
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000,
});
service.interceptors.request.use(
(config) => {
config.headers["Authorization"] = "Bearer " + getToken();
return config;
},
(error) => {
console.log(error);
Promise.reject(error);
}
);
service.interceptors.response.use(
(res) => {
const code = res.data.code || 200;
const msg = res.data.msg || "未知错误";
if (code === 401 || code === 403) {
if (!isRelogin.show) {
isRelogin.show = true;
ElMessageBox.confirm(
"登录状态已过期，您可以继续留在该页面，或者重新登录",
"系统提示",
{
confirmButtonText: "重新登录",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
isRelogin.show = false;
removeToken()
router.replace('/login')
})
.catch(() => {
isRelogin.show = false;
});
}
return Promise.reject("无效的会话，或者会话已过期，请重新登录。");
} else if (code === 500) {
return Promise.reject(
// showToast({ message: "服务器错误", duration: 2000 })
ElMessage.error(msg)
);
} else if (code === 601) {
return Promise.reject("error");
} else if (code !== 200) {
return Promise.reject("error");
} else {
return res.data;
}
},
(error) => {
console.log("err-" + error);
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
// showToast({ message: message, duration: 2000 });
return Promise.reject(message);
}
);
export default service;
src/view/Login.vue 0 → 100644
View file @ 6e0ef467
<template>
<div class="screen" id="screen">
<top-header></top-header>
<div class="title"></div>
<el-form class="form" ref="formRef" :model="loginForm" :rules="loginRules" @keyup.enter.native="submitForm(formRef)">
<el-form-item label="" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入账号">
<template #prefix>
<img src="@/assets/imgs/user_icon.png" alt="">
</template>
</el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input v-model="loginForm.password" placeholder="请输入密码" type="password">
<template #prefix>
<img src="@/assets/imgs/password_icon.png" alt="">
</template>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input v-model="loginForm.code" auto-complete="off" style="width:266px;" placeholder="验证码">
<template #prefix>
<img src="@/assets/imgs/yzm_icon.png" alt="">
</template>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-button type="primary" @click="submitForm(formRef)">登录{{ $store.state.count }}</el-button>
</el-form>
</div>
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import topHeader from "@/components/header.vue";
import { setToken } from "@/utils/auth";
import { getCodeImg, login, getUserType } from "@/api/user";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
const store = useStore()
const loginForm = reactive({
username: "cbht",
password: "xcsq1234,",
code: "",
uuid: "",
rememberMe: false,
});
const codeUrl = ref("");
const captchaEnabled = ref(false);
const loginRules = {
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
};
function getCode() {
getCodeImg().then((res) => {
captchaEnabled.value =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img;
loginForm.uuid = res.uuid;
}
});
}
const formRef = ref(null);
const isSubmit = ref(false);
const router = new useRouter();
const submitForm = async (formEl) => {
if (!formEl) return;
const valid = await formEl.validate((valid) => valid);
if (!valid || isSubmit.value) return;
const username = loginForm.username;
// const password = encrypt(loginForm.password);
const password = loginForm.password;
const code = loginForm.code;
const uuid = loginForm.uuid;
login(username, password, code, uuid)
.then((res) => {
if (res.code === 200) {
setToken(res.data.access_token);
router.push("/");
}
})
.catch(() => {
if (captchaEnabled.value) {
getCode();
}
});
};
onMounted(() => {
getCode();
});
</script>
<style lang="scss" scoped>
#screen {
position: absolute;
width: 100vw;
height: 100vh;
transform-origin: 0% 0%;
top: 0;
overflow: hidden;
background: url("../assets/imgs/index_bg.jpg") no-repeat;
background-size: 100% 100%;
.title {
width: 169px;
height: 52px;
background: url("../assets/imgs/yhdl_text.png") no-repeat;
background-size: 100% 100%;
margin: 180px auto 0;
}
.form {
width: 662px;
height: 520px;
background: url("../assets/imgs/login_bg.png") no-repeat;
background-size: 100% 100%;
margin: 0 auto;
padding-top: 100px;
::v-deep .el-form-item {
width: 448px;
margin: 0 auto 20px;
}
::v-deep .el-input {
height: 56px;
border: 2px solid #2e558b;
color: #fff;
--el-input-border-color: #2e558b;
--el-input-hover-border-color: #2e558b;
--el-input-focus-border-color: #2e558b;
.el-input__inner {
color: #fff;
font-size: 20px;
&::placeholder {
color: #7788a0;
font-size: 20px;
}
}
}
.login-code {
height: 56px;
margin-left: 20px;
}
::v-deep .el-button {
width: 448px;
height: 56px;
background: #22b2ff;
margin-left: 107px;
border-radius: 0;
font-size: 20px;
}
::v-deep .el-input__wrapper {
background: transparent;
border-radius: 0;
border-color: #2e558b !important;
}
}
}
</style>
\ No newline at end of file
src/view/components/communitySelect.vue 0 → 100644
View file @ 6e0ef467
<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>
</div>
</template>
<script setup>
import { ref, defineEmits, watch } from "vue";
const props = defineProps(['communityList'])
const emit = defineEmits(['communityChange'])
let showList = ref(false)
let selectIndex = ref(-1)
watch(() => props.communityList, (val) => {
if (val.length) {
itemClick(val[0], 0)
}
})
function getAssetImg(imgName) {
return new URL(`../../assets/imgs/${imgName}.png`, import.meta.url).href;
}
function showToggle() {
showList.value = !showList.value
}
function itemClick(item, index) {
selectIndex.value = index
emit('communityChange', selectIndex.value)
}
</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-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%;
}
}
.show{
max-height: 800px;
transition: max-height 1s;
}
.show-btn{
cursor: pointer;
padding: 10px 0;
}
}
</style>
\ No newline at end of file
src/view/components/memberTable.vue 0 → 100644
View file @ 6e0ef467
<template>
<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"/>
</div>
<div class="table-box">
<div class="table-header line-y fs-16">
<div class="table-header-item a">职务</div>
<div class="table-header-item b">姓名</div>
<div class="table-header-item c">性别</div>
<div class="table-header-item d">出生年月</div>
<div class="table-header-item e">籍贯</div>
<div class="table-header-item f">文化程度</div>
<div class="table-header-item g">房号</div>
<div class="table-header-item h">政治面貌</div>
<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="item-value a">{{ item.jobs }}</div>
<div class="item-value b">{{ item.name }}</div>
<div class="item-value c">{{ item.sex }}</div>
<div class="item-value d">{{ item.birthdate }}</div>
<div class="item-value e">{{ item.nativePlace }}</div>
<div class="item-value f">{{ item.education }}</div>
<div class="item-value g">{{ item.roomNo }}</div>
<div class="item-value h">{{ item.politicalStatus }}</div>
<div class="item-value i">{{ item.tel }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps(["ownerList"]);
const emit = defineEmits(['close'])
function close() {
emit('close')
}
</script>
<style lang="scss" scoped>
.member-table-container{
position: absolute;
top: -20px;
right: 430px;
padding: 30px 20px;
background: url('../../assets/imgs/tk_box02.png') no-repeat;
background-size: 100% 100%;
color: #77C8FF;
._header{
position: relative;
img{
cursor: pointer;
position: absolute;
right: 0;
top: -10px;
}
}
.table-box{
border: 1px solid #1772A0;
border-right: none;
margin-top: 13px;
.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;
height: 30px;
.item-value{
text-align: center;
line-height: 30px;
width: 85px;
border-right: 1px solid #1772A0;
}
}
}
.c{
width: 60px !important;
}
.g {
width: 65px !important;
}
.h{
width: 156px !important;
}
.i{
width: 100px !important;
}
}
}
</style>
\ No newline at end of file
src/view/components/screenHeader.vue 0 → 100644
View file @ 6e0ef467
<template>
<div class="screen-header line">
<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="weather-box">
<div id="he-plugin-simple"></div>
</div>
</div>
</div>
</template>
<script setup>
import {
onMounted,
ref,
reactive,
} from "vue";
const weekMap = ["日", "一", "二", "三", "四", "五", "六"];
const timeInfo = reactive({
nowtime: "",
todayDate: "",
todayWeek: "",
});
function twoDigits(val) {
if (val < 10) return "0" + val;
return val;
}
function getNowTime() {
let today = new Date();
let date =
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
timeInfo.nowtime =
twoDigits(today.getHours()) +
":" +
twoDigits(today.getMinutes())
timeInfo.todayDate = date;
timeInfo.todayWeek = "星期" + weekMap[today.getDay()];
}
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()
})
</script>
<style lang="scss" scoped>
.screen-header{
z-index: 999;
width: 100%;
height: 85px;
position: fixed;
background: url('../../assets/imgs/top_title.png') no-repeat;
background-size: 100% 100%;
padding: 0 36px;
.screen-header__right{
margin-left: auto;
}
.date{
font-family: 'SourceHanSansCN';
font-style: italic;
font-size: 18px;
color: #CDD6E3;
}
.week{
margin: 0 24px;
font-family: 'SourceHanSansCN';
font-style: italic;
font-size: 18px;
color: #CDD6E3;
}
.time{
font-family: 'YouSheBiaoTiHei';
color: #FFCE64;
font-size: 30px;
}
}
</style>
\ No newline at end of file
src/view/components/screenLeft.vue 0 → 100644
View file @ 6e0ef467
This diff is collapsed.
src/view/components/screenRight.vue 0 → 100644
View file @ 6e0ef467
This diff is collapsed.
src/view/index.vue 0 → 100644
View file @ 6e0ef467
<template>
<div id="cesiumContainer">
<screen-header></screen-header>
<screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
<screen-right :currentHouseInfo="currentHouseInfo"></screen-right>
<community-select :communityList="communityList" @communityChange="communityChangeHandle"></community-select>
</div>
</template>
<script setup>
import { onMounted, ref, watch } 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'
let viewer = null
let communityList = ref([])
let userTypeInfo = ref({})
let currentCommunityId = ref('')
let currentHouseInfo = ref({})
watch(currentCommunityId, (val) => {
getHouseListFunc(val)
})
function communityChangeHandle(index) {
currentCommunityId.value = communityList.value[index].id
}
function getUserTypeInfo() {
getUserType().then(res => {
userTypeInfo.value = res.data
if (userTypeInfo.value.type === 3) {
// 街道管理员
} else if (userTypeInfo.value.type === 4) {
// 社区管理员
getHouseListFunc(userTypeInfo.value.communityId)
} else if (userTypeInfo.value.type === 5) {
// 小区管理员
getHouseInfoFunc(userTypeInfo.value.houseId)
}
})
}
function getHouseListFunc(communityId) {
getHouseList(communityId).then(res => {
console.log(res)
})
}
function getHouseInfoFunc(houseId) {
getHouseInfo(houseId).then(res => {
currentHouseInfo.value = res.data
})
}
onMounted(async () => {
getCommunityList().then(res => {
communityList.value = res.data
})
getUserTypeInfo()
// viewer = cesiumInit('cesiumContainer')
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(
// 121.51073873593016,
// 29.881809534805857,
// 800 // 最后一个参数是高度（单位：米）
// ),
// duration: 0, // 飞行时间（单位：秒）
// });
// const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// handler.setInputAction((click) => {
// const ray = viewer.camera.getPickRay(click.position);
// let position = viewer.scene.globe.pick(ray, viewer.scene);
// if (position) {
// drawIcon(position)
// drawLabel(position, '程博华庭')
// }
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
})
</script>
<style lang="scss" scoped>
#cesiumContainer {
overflow: hidden;
width: 100vw;
height: 100vh;
}
</style>
\ No newline at end of file
vite.config.js
View file @ 6e0ef467
import { defineConfig } from 'vite'
import cesium from "vite-plugin-cesium";
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({
plugins: [vue()],
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/",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
resolve: {
alias: {
"@": "/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