Skip to content

M
map-property-screen
Commit 7f16a6ca authored by feiwenli's avatar feiwenli
Browse files
Options

增加登录

parent 4e66dee0
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2523 additions and 65 deletions
src/App.vue
View file @ 7f16a6ca
...@@ -2,5 +2,26 @@ ...@@ -2,5 +2,26 @@
<router-view></router-view> <router-view></router-view>
</template> </template>
<style scoped> <style >
@import url("@/css/common.scss");
* {
margin: 0;
padding: 0;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background-color: #00000000;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #0a496a;
}
::-webkit-scrollbar-thumb:hover {
background-color: #0c5277;
}
</style> </style>
src/api/screen.js 0 → 100644
View file @ 7f16a6ca
import request from "@/utils/request";
export function getCommunityList(params) {
return request({
url: "/atlas/lsc/communitylist",
method: "get",
params,
});
}
export function getHouseList(params) {
return request({
url: "/wcwy/house/list",
method: "get",
params,
});
}
export function getStreet(data) {
return request({
url: `/atlas/lsc/street`,
method: "post",
data,
});
}
//重大通知
export function getNoticeList(communityId) {
return request({
url: `/property/home/notice/list/${communityId}`,
method: "get",
});
}
//督导分析上半部分概况
export function getSupervisionOverviewList(communityId) {
return request({
url: `/property/home/supervision/analysis/overview/${communityId}`,
method: "get",
});
}
//督导分析列表
export function getSupervisionAnalysisList(communityId) {
return request({
url: `/property/home/supervision/analysis/list/${communityId}`,
method: "get",
});
}
//小区物业整体概况
export function getPropertyOverview(communityId) {
return request({
url: `/property/home/property/overview/${communityId}`,
method: "get",
});
}
//小区总览整体概况
export function getHouseOverview(communityId) {
return request({
url: `/property/home/house/overview/${communityId}`,
method: "get",
});
}
//小区业委会总体概况
export function getCommitteeOverview(communityId) {
return request({
url: `/property/home/committee/overview/${communityId}`,
method: "get",
});
}
//小区物业年龄结构
export function getAgeStructure(communityId) {
return request({
url: `/property/home/committee/age-structure/${communityId}`,
method: "get",
});
}
//小区物业学历结构
export function getEducationStructure(communityId) {
return request({
url: `/property/home/committee/education-structure/${communityId}`,
method: "get",
});
}
//小区总览柱状折线图
export function getBarLineChart(communityId) {
return request({
url: `/property/home/bar-line-chart/${communityId}`,
method: "get",
});
}
//事件受办情况
export function getEventUndertakeList(communityId) {
return request({
url: `/property/home/event/undertake/list/${communityId}`,
method: "get",
});
}
//事件分析
export function getEventAnalysisList(communityId) {
return request({
url: `/property/home/event/analysis/list/${communityId}`,
method: "get",
});
}
//重大会议动态
export function getEventMeetingList(communityId) {
return request({
url: `/property/home/meeting/list/${communityId}`,
method: "get",
});
}
//事件详情/property/home/event/info/{id}
export function getEventInfoDetail(id) {
return request({
url: `/property/home/event/info/${id}`,
method: "get",
});
}
\ No newline at end of file
src/assets/homeImgs/poster.png 0 → 100644
View file @ 7f16a6ca
This diff is collapsed.
src/components/echartMoudle.vue 0 → 100644
View file @ 7f16a6ca
<template>
<div :id="props.id" :style="'width:'+props.width+'px;height:'+props.height+'px;margin:0 auto'"></div>
</template>
<script setup>
import { ref, onMounted, watch, computed, onUnmounted } from "vue";
import * as echarts from "echarts";
const props = defineProps({
id: {
type: String,
required: true,
},
options: {
type: Object,
required: true,
},
width: {
type: Number,
required: true,
},
height: {
type: Number,
required: true,
},
});
const options = computed(() => {
console.log("props.options", props.options);
return props.options;
});
const myChart = ref("");
const getEchart = (options) => {
const chart = document.getElementById(props.id);
if (chart) {
myChart.value = echarts.init(chart);
myChart.value.setOption(options, true);
window.addEventListener("resize", function () {
myChart.value.resize();
});
}
};
watch(options, (newVal) => {
getEchart(newVal);
});
// onUnmounted(() => {
// if (myChart.value) {
// myChart.value.dispose(); // 销毁图表实例
// }
// });
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/eventAnalysis.vue 0 → 100644
View file @ 7f16a6ca
<template>
<div class="common-box" style="margin-top: 10px;">
<div class="common-box-title"><span>事件分析</span> </div>
<div class="box">
<div class="toptitle">
<div class="num">编号</div>
<div class="title">事件描述</div>
<div class="status">办理情况</div>
</div>
<div style="height:230px;width:100%">
<vue3-seamless-scroll :list="listData" :speed="speed" :step="2" :interval="interval" class="scroll" :limitScrollNum="6">
<div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
<span class="num">{{index+1}}</span>
<span class="title">{{item.eventName}}</span>
<span class="status" :style="`color:${{'未处理':'#F2B739','处理中':'#29E8A8','已处理':'#FFFFFF'}[item.status]}`">{{item.status}}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class=" dialog-box" v-show="showDialog">
<div class="content-box">
<div class="content">事件描述{{currentForm.eventName}}</div>
<div class="content">事件详情：{{currentForm.eventDetails}}</div>
<div class="content">事件地址：{{currentForm.address}}</div>
<div class="content">事件等级：{{currentForm.rankNo}}</div>
<div class="content">反映时间：{{currentForm.reportDate}}</div>
<div class="content">处理状态：{{currentForm.status}}</div>
<!-- <div class="content">
<span>处理评价：</span>
<el-rate v-model="currentForm.stars" disabled />
<span>{{currentForm.remark}}</span>
</div> -->
<img src="@/assets/homeImgs/close.png" class="close" alt="" @click.stop="close">
</div>
</div>
</div>
</div>
</template>
<script setup>
import { inject, onMounted, watch, ref, computed, reactive } from "vue";
import { getEventAnalysisList, getEventInfoDetail } from "@/api/screen";
const props = defineProps({
communityId: {
type: String,
},
});
const communityId = computed(() => {
return props.communityId;
});
const speed = ref(10);
const interval = ref(6000);
const showDialog = ref(false);
const currentForm = ref({});
watch(
communityId,
(newVal) => {
if (newVal) {
if (newVal === -1) {
getData("");
} else {
getData(newVal);
}
}
},
{ immediate: true }
);
const status = ref(false);
const listData = ref([]);
let optionHover = computed(() => {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
});
function getData(communityId) {
getEventAnalysisList(communityId).then((res) => {
if (res.code === 200) {
listData.value = res.data;
}
});
}
function toDetail(item) {
showDialog.value = true;
getEventInfoDetail(item.id).then((res) => {
currentForm.value = res.data;
});
}
const close = () => {
showDialog.value = false;
};
const formatName = (name) => {
let newStr = "";
if (name.length === 2) {
newStr = name.substr(0, 1) + "*";
} else if (name.length > 2) {
let char = "";
for (let i = 0, len = name.length - 2; i < len; i++) {
char += "*";
}
newStr = name.substr(0, 1) + char + char;
} else {
newStr = name;
}
return newStr;
};
const formatMobile = (mobile) => {
let newStr = "";
let char = "";
for (let i = 0, len = mobile.length - 7; i < len; i++) {
char += "*";
}
newStr = mobile.substr(0, 3) + char + mobile.substr(-4, 4);
return newStr;
};
</script>
<style lang="scss" scoped>
.box {
font-size: 18px;
color: #ffffff;
width: 100%;
margin: 0 auto;
background: url("@/assets/homeImgs/yjtj_boxbg.png") no-repeat;
background-size: 100% 100%;
margin-top: 10px;
padding-bottom: 20px;
.toptitle {
line-height: 40px;
}
.toptitle {
width: 98%;
display: flex;
margin: 0 auto;
// background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
// background-size: 100% 100%;
background: rgba(26, 92, 175, 0.25);
.num {
width: 60px;
margin-left: 16px;
text-align: center;
}
.title {
width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
width: 80px;
text-align: center;
}
}
.item {
width: 98%;
display: flex;
margin: 0 auto;
background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
background-size: 100% 100%;
.num {
width: 60px;
text-align: center;
}
.title {
width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.status {
width: 80px;
text-align: center;
}
}
}
.scroll {
height: 230px;
width: 450px;
margin: 0 auto;
overflow: hidden;
}
.scroll .item {
padding: 10px 0;
text-align: center;
background: none;
font-size: 18px;
border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
}
.dialog-box {
width: 20%;
max-height: 600px;
position: fixed;
top: 10%;
left: 50%;
transform: translate(-50%, 0);
z-index: 999;
background: url("@/assets/homeImgs/jdry_bg.png") no-repeat;
background-size: 100% 100%;
background-color: rgba(0, 0, 0, 0.8);
.content-box {
width: 95%;
height: 100%;
margin: 0 auto 10px;
overflow: hidden;
position: relative;
.content {
margin-top: 10px;
font-size: 14px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.close {
position: absolute;
right: 0px;
top: 10px;
z-index: 999;
}
}
}
</style>
\ No newline at end of file
src/components/eventTransact.vue 0 → 100644
View file @ 7f16a6ca
<template>
<div class="common-box1">
<div class="common-box-title1">
<img src="@/assets/homeImgs/title_icon.png" alt=""><span>事件受办情况</span>
</div>
<div class="content">
<div class="box">
<div class="toptitle">
<div class="id">编号</div>
<div class="house">小区</div>
<div class="num">受理数</div>
<div class="num" style="margin-right:100px">办结数</div>
<div class="dot_box">
<div class="dot"></div>
</div>
<div class="dot_box">
<div class="dot dot2"></div>
</div>
<div class="dot_box">
<div class="dot dot3"></div>
</div>
</div>
<div style="height:230px;width:100%">
<vue3-seamless-scroll :list="listData" :speed="speed" :step="2" :interval="interval" class="scroll" :limitScrollNum="6">
<div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
<span class="id">{{index+1}}</span>
<span class="house">{{item.houseName}}</span>
<div class="num">{{item.acceptance}}</div>
<div class="num" style="margin-right:100px">{{item.transaction}}</div>
<div class="dot_box">
<div class="dot">{{item.redLevel}}</div>
</div>
<div class="dot_box">
<div class="dot">{{item.yellowLevel}}</div>
</div>
<div class="dot_box">
<div class="dot">{{item.greenLevel}}</div>
</div>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { inject, onMounted, watch, ref, computed, nextTick } from "vue";
import { getEventUndertakeList } from "@/api/screen";
const currentIndex = ref(0);
const listData = ref([]);
const props = defineProps({
communityId: {
type: String,
},
});
const currentCommunityId = computed(() => {
return props.communityId;
});
watch(
currentCommunityId,
(newVal) => {
if (newVal) {
if (newVal === -1) {
getData("");
} else {
getData(newVal);
}
}
},
{ immediate: true }
);
const getData = (communityId) => {
getEventUndertakeList(communityId).then((res) => {
if (res.code === 200) {
listData.value = res.data;
}
});
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.common-box1 {
position: relative;
.content {
background-size: 100% 100%;
width: 833px;
height: 326px;
margin: 0 0 10px 20px;
display: flex;
flex-wrap: wrap;
.box {
font-size: 18px;
color: #ffffff;
width: 100%;
margin-top: 10px;
padding-bottom: 20px;
.toptitle {
line-height: 40px;
}
.toptitle {
width: 98%;
display: flex;
margin: 0 auto;
background: rgba(26, 92, 175, 0.25);
align-items: center;
.id {
width: 60px;
margin-left: 16px;
text-align: center;
}
.house {
width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.num {
width: 80px;
text-align: center;
margin-right: 60px;
}
.dot_box {
width: 80px;
.dot {
width: 14px;
height: 14px;
background: #ff0400;
border-radius: 50%;
}
.dot2 {
background: #f2b739;
}
.dot3 {
background: #0acf9a;
}
}
}
.item {
width: 98%;
display: flex;
margin: 0 auto;
align-items: center;
.id {
width: 60px;
margin-left: 16px;
text-align: center;
font-style: normal;
}
.house {
width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
color: #fff;
font-weight: 400;
font-style: normal;
}
.num {
width: 80px;
text-align: center;
margin-right: 60px;
}
.dot_box {
width: 80px;
text-align: center;
.dot {
width: 30px;
text-align: left;
}
}
}
}
}
}
.scroll {
height: 230px;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.scroll .item {
padding: 10px 0;
text-align: center;
background: none;
font-size: 18px;
border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
}
.common-box-title1 {
margin: 19px 0 10px 31px;
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
color: #bee8fc;
}
</style>
\ No newline at end of file
src/components/header.vue
View file @ 7f16a6ca
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
</div> </div>
<div class="weather-box" v-if="!props.showBtn"> <div class="weather-box" v-if="!props.showBtn">
<div id="he-plugin-simple"></div> <div id="he-plugin-simple"></div>
<div class="logout" @click="logout" v-if="!isLogin">退出登录</div>
<!-- <div class="logout" @click="toIndex">返回首页</div> -->
</div> </div>
<div class="button-box" v-else> <div class="button-box" v-else>
<div class="btn" @click="toIndex">返回首页</div> <div class="btn" @click="toIndex">返回首页</div>
...@@ -25,6 +27,7 @@ import { ...@@ -25,6 +27,7 @@ import {
reactive, reactive,
onUnmounted, onUnmounted,
} from "vue"; } from "vue";
import { removeToken } from "@/utils/auth";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const weekMap = ["日", "一", "二", "三", "四", "五", "六"]; const weekMap = ["日", "一", "二", "三", "四", "五", "六"];
const timeInfo = reactive({ const timeInfo = reactive({
...@@ -39,6 +42,9 @@ const props = defineProps({ ...@@ -39,6 +42,9 @@ const props = defineProps({
}, },
}); });
const isLogin = computed(() => {
return router.currentRoute.value.path === "/login";
});
let timerID = ref(null); let timerID = ref(null);
let router = new useRouter(); let router = new useRouter();
...@@ -62,34 +68,48 @@ function getNowTime() { ...@@ -62,34 +68,48 @@ function getNowTime() {
timeInfo.todayDate = date; timeInfo.todayDate = date;
timeInfo.todayWeek = "星期" + weekMap[today.getDay()]; timeInfo.todayWeek = "星期" + weekMap[today.getDay()];
} }
function logout() {
ElMessageBox.confirm("确定退出登录吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
removeToken();
router.push("/login");
})
.catch(() => {});
}
onMounted(() => { onMounted(() => {
if (!props.showBtn) { // if (!props.showBtn) {
window.WIDGET = { // window.WIDGET = {
CONFIG: { // CONFIG: {
modules: "02", // modules: "02",
background: "5", // background: "5",
tmpColor: "FFFFFF", // tmpColor: "FFFFFF",
tmpSize: "30", // tmpSize: "30",
cityColor: "FFFFFF", // cityColor: "FFFFFF",
citySize: "16", // citySize: "16",
aqiColor: "FFFFFF", // aqiColor: "FFFFFF",
aqiSize: "16", // aqiSize: "16",
weatherIconSize: "40", // weatherIconSize: "40",
alertIconSize: "18", // alertIconSize: "18",
padding: "10px 10px 10px 10px", // padding: "10px 10px 10px 10px",
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);
} // }
timerID.value = setInterval(() => { timerID.value = setInterval(() => {
getNowTime(); getNowTime();
...@@ -121,8 +141,8 @@ onUnmounted(() => { ...@@ -121,8 +141,8 @@ 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: cover;
.button-box { .button-box {
pointer-events: auto; pointer-events: auto;
margin-top: 30px; margin-top: 30px;
...@@ -136,7 +156,7 @@ onUnmounted(() => { ...@@ -136,7 +156,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%;
} }
} }
...@@ -145,7 +165,21 @@ onUnmounted(() => { ...@@ -145,7 +165,21 @@ onUnmounted(() => {
margin-top: 20px; margin-top: 20px;
margin-left: auto; margin-left: auto;
margin-right: 35px; margin-right: 35px;
display: flex; display: flex;
.logout {
cursor: pointer;
margin-top: 14px;
padding-top: 5px;
width: 120px;
height: 50px;
color: #eff7ff;
text-align: center;
background: url("@/assets/top_btn.png") no-repeat;
background-size: 100% 100%;
}
} }
.time-box { .time-box {
display: flex; display: flex;
......
src/components/houseGeneralView.vue 0 → 100644
View file @ 7f16a6ca
This diff is collapsed.
src/components/majorConferenceNews.vue 0 → 100644
View file @ 7f16a6ca
<template>
<div class="common-box" style="margin-top: 10px;">
<div class="common-box-title"><span>重大会议动态</span> </div>
<div class="box">
<div class="toptitle">
<div class="num">编号</div>
<div class="title">标题</div>
<div class="status">状态</div>
</div>
<div style="height:140px">
<vue3-seamless-scroll :list="listData" :speed="speed" :step="0.5" :interval="interval" class="scroll" :limitScrollNum="4">
<div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
<span class="num">{{index+1}}</span>
<span class="title">{{item.eventName}}</span>
<div class="status" :style="`color:${{'待处理':'#F2B739','进行中':'#29E8A8','已结束':'#FFFFFF'}[item.status]}`">{{item.status}}</div>
</div>
</vue3-seamless-scroll>
</div>
<!-- <div class=" dialog-box" v-show="showDialog">
<div class="content-box">
<div class="content">反映人姓名：{{currentForm.name}}</div>
<div class="content">反映人电话：{{currentForm.phone}}</div>
<div class="content">反映类型：{{currentForm.demandType}}</div>
<div class="content">反映时间：{{currentForm.createTime}}</div>
<div class="content">事件描述：{{currentForm.demand}}</div>
<div class="content">处理状态：{{currentForm.status}}</div>
<div class="content">
<span>处理评价：</span>
<el-rate v-model="currentForm.stars" disabled />
<span>{{currentForm.remark}}</span>
</div>
<img src="@/assets/homeImgs/close.png" class="close" alt="" @click.stop="close">
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { inject, onMounted, watch, ref, computed, reactive } from "vue";
import { getEventMeetingList } from "@/api/screen";
const props = defineProps({
communityId: {
type: String,
},
});
const communityId = computed(() => {
return props.communityId;
});
const speed = ref(10);
const interval = ref(6000);
const showDialog = ref(false);
const currentForm = ref({});
watch(
communityId,
(newVal) => {
if (newVal) {
if (newVal === -1) {
getData("");
} else {
getData(newVal);
}
}
},
{ immediate: true }
);
const status = ref(false);
const listData = ref([]);
let optionHover = computed(() => {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
});
function getData(communityId) {
getEventMeetingList(communityId).then((res) => {
if (res.code === 200) {
listData.value = res.data;
}
});
}
function toDetail(item) {
showDialog.value = true;
currentForm.value = item;
}
const close = () => {
showDialog.value = false;
};
const formatName = (name) => {
let newStr = "";
if (name.length === 2) {
newStr = name.substr(0, 1) + "*";
} else if (name.length > 2) {
let char = "";
for (let i = 0, len = name.length - 2; i < len; i++) {
char += "*";
}
newStr = name.substr(0, 1) + char + char;
} else {
newStr = name;
}
return newStr;
};
const formatMobile = (mobile) => {
let newStr = "";
let char = "";
for (let i = 0, len = mobile.length - 7; i < len; i++) {
char += "*";
}
newStr = mobile.substr(0, 3) + char + mobile.substr(-4, 4);
return newStr;
};
</script>
<style lang="scss" scoped>
.box {
font-size: 18px;
color: #ffffff;
width: 100%;
margin: 0 auto;
background: url("@/assets/homeImgs/yjtj_boxbg.png") no-repeat;
background-size: 100% 100%;
margin-top: 10px;
padding-bottom: 20px;
.toptitle {
line-height: 40px;
}
.toptitle,
.item {
width: 98%;
display: flex;
margin: 0 auto;
// background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
// background-size: 100% 100%;
background: rgba(26, 92, 175, 0.25);
.num {
width: 60px;
margin-left: 22px;
}
.title {
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
width: 80px;
text-align: right;
}
}
.item {
.num {
margin-left: 10px;
}
.title {
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.status {
width: 80px;
text-align: center;
margin-left: 20px;
}
}
}
.scroll {
width: 450px;
height: 140px;
margin: 0 auto;
overflow: hidden;
}
.scroll .item {
padding: 10px 0;
text-align: left;
background: none;
font-size: 18px;
border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
}
.dialog-box {
width: 20%;
max-height: 600px;
position: fixed;
top: 10%;
left: 50%;
transform: translate(-50%, 0);
z-index: 999;
background: url("@/assets/homeImgs/jdry_bg.png") no-repeat;
background-size: 100% 100%;
background-color: rgba(0, 0, 0, 0.8);
.content-box {
width: 95%;
height: 100%;
margin: 0 auto 10px;
overflow: hidden;
position: relative;
.content {
margin-top: 10px;
font-size: 14px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.close {
position: absolute;
right: 0px;
top: 10px;
z-index: 999;
}
}
}
</style>
\ No newline at end of file
src/components/materialNotice.vue 0 → 100644
View file @ 7f16a6ca
<template>
<div class="common-box" style="margin-top: 80px;">
<div class="common-box-title"><span>重大通知</span> </div>
<div class="material_notice">
<div style="height:150px">
<vue3-seamless-scroll :list="dataList" :speed="10" :step="0.5" :interval="interval" class="scroll" :limitScrollNum="4">
<div class="item" v-for="item in dataList">
<span class="title">{{item.eventName}}</span>
<span>{{item.createTime.slice(0,10)}}</span>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
</template>
<script setup>
import { inject, onMounted, watch, ref, computed } from "vue";
import { getNoticeList } from "../api/screen.js";
const props = defineProps({
communityId: {
type: String,
},
});
const dataList = ref([]);
const communityId = computed(() => {
return props.communityId;
});
const getData = (communityId) => {
getNoticeList(communityId).then((res) => {
dataList.value = res.data;
});
};
watch(
communityId,
(newVal) => {
if (newVal) {
if (newVal === -1) {
getData("");
} else {
getData(newVal);
}
}
},
{ immediate: true }
);
onMounted(() => {});
</script>
<style lang="scss" scoped>
.scroll {
width: 450px;
height: 150px;
margin: 0 auto;
overflow: hidden;
}
.material_notice {
font-size: 18px;
color: #ffffff;
line-height: 32px;
width: 470px;
padding: 5px 0 26px 0;
background: url("@/assets/homeImgs/sqjj_boxbg.png") no-repeat;
background-size: 100% 100%;
margin-top: 10px;
.item {
font-size: 16px;
color: #ffffff;
border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
font-weight: 400;
line-height: 49px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 21px;
.title {
display: inline-block;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
\ No newline at end of file
src/components/supervisoryAnalysis.vue 0 → 100644
View file @ 7f16a6ca
<template>
<div class="common-box" style="margin-top: 75px;">
<div class="common-box-title"><span>督导分析</span> </div>
<div class="box">
<div class="total_box">
<div class="total_item">
<div class="total_label">红色等级</div>
<div class="total_num" style="color: #EF403C;">{{dataForm.redLevel}}</div>
</div>
<div class="total_item">
<div class="total_label">黄色等级</div>
<div class="total_num" style="color: #FCBE37;">{{dataForm.yellowLevel}}</div>
</div>
<div class="total_item">
<div class="total_label">绿色等级</div>
<div class="total_num" style="color: #29E8A8;">{{dataForm.greenLevel}}</div>
</div>
</div>
<div class="toptitle">
<div class="num">编号</div>
<div class="title">名称</div>
<div class="status">预警等级</div>
</div>
<div style="height:140px">
<vue3-seamless-scroll :list="listData" :speed="speed" :step="2" :interval="interval" class="scroll" :limitScrollNum="4">
<div class="item" v-for="(item, index) in listData" :key="index" @click="toDetail(item)">
<span class="num">{{index+1}}</span>
<span class="title">{{item.eventName}}</span>
<div class="status" :style="`background:${{'绿':'#0ACF9A','黄':'#F2B739','红':'#FF0400'}[item.alarmStatus]}`"></div>
</div>
</vue3-seamless-scroll>
</div>
<!-- <div class="dialog-box" v-show="showDialog">
<div class="content-box">
<div class="content">反映人姓名：{{currentForm.name}}</div>
<div class=" content">反映人电话：{{currentForm.phone}}</div>
<div class="content">反映类型：{{currentForm.demandType}}</div>
<div class="content">反映时间：{{currentForm.createTime}}</div>
<div class="content">事件描述：{{currentForm.demand}}</div>
<div class="content">处理状态：{{currentForm.status}}</div>
<div class="content">
<span>处理评价：</span>
<el-rate v-model="currentForm.stars" disabled />
<span>{{currentForm.remark}}</span>
</div>
<img src="@/assets/homeImgs/close.png" class="close" alt="" @click.stop="close">
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { inject, onMounted, watch, ref, computed, reactive } from "vue";
import {
getSupervisionOverviewList,
getSupervisionAnalysisList,
} from "@/api/screen";
const props = defineProps({
communityId: {
type: String,
},
});
const communityId = computed(() => {
return props.communityId;
});
const speed = ref(10);
const interval = ref(6000);
const showDialog = ref(false);
const currentForm = ref({});
const dataForm = ref({});
watch(
communityId,
(newVal) => {
if (newVal) {
if (newVal === -1) {
getData("");
} else {
getData(newVal);
}
}
},
{ immediate: true }
);
const status = ref(false);
const listData = ref([]);
let optionHover = computed(() => {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
});
function getData(communityId = "") {
getSupervisionOverviewList(communityId).then((res) => {
if (res.code === 200) {
dataForm.value = res.data;
}
});
getSupervisionAnalysisList(communityId).then((res) => {
if (res.code === 200) {
listData.value = res.data;
}
});
}
function toDetail(item) {
showDialog.value = true;
currentForm.value = item;
}
const close = () => {
showDialog.value = false;
};
const formatName = (name) => {
let newStr = "";
if (name.length === 2) {
newStr = name.substr(0, 1) + "*";
} else if (name.length > 2) {
let char = "";
for (let i = 0, len = name.length - 2; i < len; i++) {
char += "*";
}
newStr = name.substr(0, 1) + char + char;
} else {
newStr = name;
}
return newStr;
};
const formatMobile = (mobile) => {
let newStr = "";
let char = "";
for (let i = 0, len = mobile.length - 7; i < len; i++) {
char += "*";
}
newStr = mobile.substr(0, 3) + char + mobile.substr(-4, 4);
return newStr;
};
</script>
<style lang="scss" scoped>
.total_box {
width: 100%;
margin: 10px auto 10px;
padding-top: 10px;
font-size: 16px;
display: flex;
.total_item {
width: 33%;
text-align: center;
}
.total_label {
color: #ffffff;
background: linear-gradient(
0deg,
rgba(77, 105, 157, 1) 0%,
rgba(127, 192, 243, 1) 50%,
rgba(215, 237, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.total_num {
font-weight: bold;
font-size: 30px;
margin: 5px 0 5px;
}
}
.box {
font-size: 18px;
color: #ffffff;
width: 100%;
margin: 0 auto;
background: url("@/assets/homeImgs/yjtj_boxbg.png") no-repeat;
background-size: 100% 100%;
margin-top: 10px;
padding-bottom: 20px;
.toptitle {
line-height: 40px;
}
.toptitle,
.item {
width: 98%;
display: flex;
margin: 0 auto;
// background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
// background-size: 100% 100%;
background: rgba(26, 92, 175, 0.25);
.num {
width: 60px;
margin-left: 16px;
text-align: center;
}
.title {
width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
width: 80px;
text-align: center;
}
}
.item {
.num {
// margin-left: 10px;
width: 50px;
text-align: left;
}
.title {
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
width: 14px;
height: 14px;
background: #f2b739;
border-radius: 50%;
margin-left: 30px;
}
}
}
.scroll {
width: 450px;
height: 140px;
margin: 0 auto;
overflow: hidden;
}
.scroll .item {
padding: 10px 0;
// text-align: left;
background: none;
font-size: 18px;
border-bottom: 0.5px solid rgba(124, 131, 163, 0.2);
}
.dialog-box {
width: 20%;
max-height: 600px;
position: fixed;
top: 10%;
left: 50%;
transform: translate(-50%, 0);
z-index: 999;
background: url("@/assets/homeImgs/jdry_bg.png") no-repeat;
background-size: 100% 100%;
background-color: rgba(0, 0, 0, 0.8);
.content-box {
width: 95%;
height: 100%;
margin: 0 auto 10px;
overflow: hidden;
position: relative;
.content {
margin-top: 10px;
font-size: 14px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.close {
position: absolute;
right: 0px;
top: 10px;
z-index: 999;
}
}
}
</style>
\ No newline at end of file
src/css/common.scss 0 → 100644
View file @ 7f16a6ca
.common-box {
width: 100%;
font-size: 20px;
.common-box-title {
width: 100%;
height: 44px;
line-height: 30px;
background: url("../assets/homeImgs/title.png") 100% 100% no-repeat;
text-indent: 40px;
span {
font-weight: 600;
font-style: italic;
// text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
background-image: linear-gradient(180deg,
rgba(49, 190, 255, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 1) 100%);
color: transparent;
-webkit-background-clip: text;
padding-right: 10px;
// display: inline-block;
}
}
}
.common-box1 {
width: 100%;
font-size: 20px;
background: url("../assets/homeImgs/yxsg_boxbg.png") 100% 100% no-repeat;
span {
font-weight: 600;
font-style: italic;
background-image: linear-gradient(180deg,
rgba(49, 190, 255, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 1) 100%);
color: transparent;
-webkit-background-clip: text;
}
}
\ No newline at end of file
src/main.js
View file @ 7f16a6ca
...@@ -4,6 +4,8 @@ import { router } from './router/router.js' ...@@ -4,6 +4,8 @@ import { router } from './router/router.js'
import store from './store'; import store from './store';
import './style.css' import './style.css'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App) const app = createApp(App)
app.use(vue3SeamlessScroll);
app.use(router).use(store).mount('#app') app.use(router).use(store).mount('#app')
src/router/router.js
View file @ 7f16a6ca
...@@ -2,15 +2,20 @@ import { createRouter, createWebHashHistory } from "vue-router"; ...@@ -2,15 +2,20 @@ import { createRouter, createWebHashHistory } from "vue-router";
import { getToken } from "../utils/auth"; 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";
import home from "../view/home.vue";
const routes = [ const routes = [
{ {
path: "/", path: "/index",
component: index, component: index,
}, },
{ {
path: "/login", path: "/login",
component: Login, component: Login,
}, },
{
path: "/",
component: home,
},
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
......
src/static/mapPoint.js 0 → 100644
View file @ 7f16a6ca
const pointList1 = [{ "x": 219, "y": 40 }, { "x": 203, "y": 40 }, { "x": 190, "y": 49 }, { "x": 176, "y": 57 }, { "x": 183, "y": 66 }, { "x": 182, "y": 78 }, { "x": 164, "y": 83 }, { "x": 144, "y": 87 }, { "x": 135, "y": 96 }, { "x": 110, "y": 100 }, { "x": 91, "y": 103 }, { "x": 81, "y": 94 }, { "x": 76, "y": 71 }, { "x": 64, "y": 76 }, { "x": 51, "y": 94 }, { "x": 40, "y": 102 }, { "x": 35, "y": 116 }, { "x": 49, "y": 119 }, { "x": 39, "y": 131 }, { "x": 35, "y": 151 }, { "x": 28, "y": 159 }, { "x": 48, "y": 167 }, { "x": 64, "y": 171 }, { "x": 72, "y": 189 }, { "x": 90, "y": 195 }, { "x": 96, "y": 207 }, { "x": 109, "y": 214 }, { "x": 124, "y": 218 }, { "x": 141, "y": 209 }, { "x": 155, "y": 199 }, { "x": 162, "y": 184 }, { "x": 170, "y": 170 }, { "x": 169, "y": 155 }, { "x": 182, "y": 148 }, { "x": 203, "y": 142 }, { "x": 219, "y": 132 }, { "x": 229, "y": 118 }, { "x": 240, "y": 105 }, { "x": 240, "y": 86 }, { "x": 232, "y": 72 }, { "x": 226, "y": 62 }, { "x": 226, "y": 51 }]
const pointList2 = [{ "x": 336, "y": 81 }, { "x": 322, "y": 91 }, { "x": 306, "y": 95 }, { "x": 295, "y": 101 }, { "x": 302, "y": 112 }, { "x": 301, "y": 119 }, { "x": 294, "y": 125 }, { "x": 276, "y": 122 }, { "x": 265, "y": 118 }, { "x": 254, "y": 120 }, { "x": 240, "y": 126 }, { "x": 231, "y": 130 }, { "x": 221, "y": 134 }, { "x": 209, "y": 142 }, { "x": 195, "y": 151 }, { "x": 181, "y": 155 }, { "x": 177, "y": 165 }, { "x": 175, "y": 175 }, { "x": 174, "y": 182 }, { "x": 160, "y": 194 }, { "x": 149, "y": 207 }, { "x": 147, "y": 216 }, { "x": 165, "y": 223 }, { "x": 178, "y": 228 }, { "x": 183, "y": 237 }, { "x": 188, "y": 245 }, { "x": 195, "y": 252 }, { "x": 207, "y": 254 }, { "x": 215, "y": 245 }, { "x": 228, "y": 251 }, { "x": 236, "y": 253 }, { "x": 245, "y": 261 }, { "x": 255, "y": 266 }, { "x": 268, "y": 268 }, { "x": 278, "y": 266 }, { "x": 289, "y": 255 }, { "x": 302, "y": 246 }, { "x": 308, "y": 232 }, { "x": 321, "y": 228 }, { "x": 319, "y": 212 }, { "x": 315, "y": 195 }, { "x": 325, "y": 183 }, { "x": 334, "y": 177 }, { "x": 343, "y": 165 }, { "x": 345, "y": 150 }, { "x": 357, "y": 141 }, { "x": 356, "y": 127 }, { "x": 342, "y": 120 }, { "x": 334, "y": 114 }, { "x": 339, "y": 102 }, { "x": 339, "y": 91 }]
const pointListAll = [
{
name: "西成社区",
keyName: "西城",
x: 640,
y: 520,
data: [{ "x": 505, "y": 421 }, { "x": 505, "y": 465 }, { "x": 503, "y": 498 }, { "x": 497, "y": 526 }, { "x": 482, "y": 593 }, { "x": 503, "y": 599 }, { "x": 579, "y": 609 }, { "x": 607, "y": 442 }, { "x": 505, "y": 421 }],
show: false,
},
{
name: '天一家园',
keyName: '天一家园',
x: 740,
y: 545,
data: [{ "x": 612, "y": 443 }, { "x": 584, "y": 607 }, { "x": 669, "y": 622 }, { "x": 699, "y": 460 }, { "x": 612, "y": 443 }],
show: false,
},
{
name: "青林湾社区",
keyName: '青林湾',
x: 815,
y: 126,
data: [{ "x": 659, "y": 55 }, { "x": 691, "y": 131 }, { "x": 691, "y": 248 }, { "x": 758, "y": 260 }, { "x": 769, "y": 23 }, { "x": 726, "y": 28 }, { "x": 689, "y": 40 }, { "x": 659, "y": 55 }],
show: false,
},
{
name: "广安社区",
keyName: "广安",
x: 820,
y: 356,
show: false,
data: [{ "x": 694, "y": 252 }, { "x": 693, "y": 269 }, { "x": 692, "y": 291 }, { "x": 698, "y": 309 }, { "x": 699, "y": 324 }, { "x": 692, "y": 343 }, { "x": 686, "y": 363 }, { "x": 679, "y": 381 }, { "x": 678, "y": 403 }, { "x": 673, "y": 424 }, { "x": 670, "y": 442 }, { "x": 668, "y": 455 }, { "x": 689, "y": 457 }, { "x": 711, "y": 457 }, { "x": 729, "y": 454 }, { "x": 748, "y": 454 }, { "x": 758, "y": 447 }, { "x": 782, "y": 323 }, { "x": 788, "y": 302 }, { "x": 791, "y": 283 }, { "x": 791, "y": 272 }, { "x": 754, "y": 263 }, { "x": 721, "y": 255 }],
}, {
name: "广华社区",
keyName: "广华",
x: 662,
y: 356,
show: false,
data: [{ "x": 510, "y": 301 }, { "x": 510, "y": 314 }, { "x": 509, "y": 329 }, { "x": 508, "y": 342 }, { "x": 508, "y": 359 }, { "x": 506, "y": 418 }, { "x": 539, "y": 427 }, { "x": 576, "y": 434 }, { "x": 614, "y": 438 }, { "x": 671, "y": 451 }, { "x": 673, "y": 426 }, { "x": 675, "y": 409 }, { "x": 679, "y": 391 }, { "x": 680, "y": 377 }, { "x": 683, "y": 364 }, { "x": 689, "y": 353 }, { "x": 693, "y": 337 }, { "x": 696, "y": 325 }, { "x": 695, "y": 309 }, { "x": 694, "y": 285 }, { "x": 693, "y": 268 }, { "x": 690, "y": 255 }, { "x": 682, "y": 254 }, { "x": 673, "y": 254 }, { "x": 657, "y": 259 }, { "x": 629, "y": 264 }, { "x": 578, "y": 280 }, { "x": 542, "y": 289 }]
},
{
name: "新星社区",
keyName: "新星",
x: 910,
y: 130,
show: false,
data: [{ "x": 772, "y": 22 }, { "x": 847, "y": 55 }, { "x": 816, "y": 161 }, { "x": 795, "y": 267 }, { "x": 757, "y": 262 }, { "x": 772, "y": 22 }],
},
{
name: "泰安社区",
keyName: "泰安",
x: 820,
y: 560,
show: false,
data: [{ "x": 702, "y": 458 }, { "x": 757, "y": 458 }, { "x": 738, "y": 545 }, { "x": 733, "y": 600 }, { "x": 734, "y": 633 }, { "x": 673, "y": 620 }, { "x": 702, "y": 458 }],
},
{
name: "春城社区",
keyName: "春城",
x: 500,
y: 495,
show: false,
data: [{ "x": 403, "y": 392 }, { "x": 502, "y": 416 }, { "x": 499, "y": 499 }, { "x": 479, "y": 589 }, { "x": 434, "y": 553 }, { "x": 349, "y": 507 }, { "x": 370, "y": 400 }, { "x": 404, "y": 403 }, { "x": 403, "y": 392 }],
},
{
name: "信谊社区",
keyName: "信谊",
x: 400,
y: 570,
show: false,
data: [{ "x": 264, "y": 463 }, { "x": 248, "y": 587 }, { "x": 337, "y": 565 }, { "x": 377, "y": 562 }, { "x": 417, "y": 564 }, { "x": 430, "y": 554 }, { "x": 264, "y": 463 }],
},
{
name: "徐家漕社区",
keyName: "徐家漕",
x: 350,
y: 580,
show: false,
data: [{ "x": 258, "y": 482 }, { "x": 222, "y": 472 }, { "x": 226, "y": 503 }, { "x": 195, "y": 504 }, { "x": 197, "y": 534 }, { "x": 199, "y": 556 }, { "x": 196, "y": 572 }, { "x": 210, "y": 569 }, { "x": 232, "y": 572 }, { "x": 232, "y": 589 }, { "x": 244, "y": 587 }, { "x": 258, "y": 482 }],
},
{
name: "后塘河社区",
keyName: "后塘河",
x: 220,
y: 526,
show: false,
data: [{ "x": 190, "y": 421 }, { "x": 261, "y": 462 }, { "x": 259, "y": 477 }, { "x": 221, "y": 467 }, { "x": 221, "y": 500 }, { "x": 191, "y": 498 }, { "x": 196, "y": 551 }, { "x": 193, "y": 566 }, { "x": 131, "y": 578 }, { "x": 124, "y": 556 }, { "x": 59, "y": 545 }, { "x": 71, "y": 504 }, { "x": 144, "y": 504 }, { "x": 147, "y": 483 }, { "x": 193, "y": 484 }, { "x": 182, "y": 463 }, { "x": 190, "y": 421 }],
},
{
name: "广泽社区",
keyName: "广泽",
x: 185,
y: 655,
show: false,
data: [{ "x": 58, "y": 548 }, { "x": 122, "y": 558 }, { "x": 126, "y": 591 }, { "x": 144, "y": 594 }, { "x": 144, "y": 603 }, { "x": 81, "y": 619 }, { "x": 88, "y": 640 }, { "x": 50, "y": 644 }, { "x": 47, "y": 633 }, { "x": 66, "y": 625 }, { "x": 61, "y": 601 }, { "x": 32, "y": 606 }, { "x": 58, "y": 548 }],
},
{
name: "五江口社区",
keyName: "五江口",
x: 515,
y: 235,
show: false,
data: [{ "x": 505, "y": 138 }, { "x": 503, "y": 412 }, { "x": 403, "y": 387 }, { "x": 402, "y": 330 }, { "x": 362, "y": 327 }, { "x": 357, "y": 313 }, { "x": 366, "y": 307 }, { "x": 362, "y": 298 }, { "x": 368, "y": 293 }, { "x": 356, "y": 285 }, { "x": 373, "y": 256 }, { "x": 381, "y": 258 }, { "x": 399, "y": 242 }, { "x": 392, "y": 235 }, { "x": 410, "y": 219 }, { "x": 429, "y": 235 }, { "x": 441, "y": 221 }, { "x": 438, "y": 212 }, { "x": 447, "y": 205 }, { "x": 454, "y": 211 }, { "x": 458, "y": 199 }, { "x": 486, "y": 206 }, { "x": 494, "y": 180 }, { "x": 491, "y": 172 }, { "x": 483, "y": 166 }, { "x": 472, "y": 165 }, { "x": 478, "y": 127 }, { "x": 487, "y": 135 }, { "x": 505, "y": 138 }],
},
{
name: "清风社区",
keyName: "清风",
x: 660,
y: 204,
show: false,
data: [{ "x": 509, "y": 137 }, { "x": 509, "y": 295 }, { "x": 629, "y": 263 }, { "x": 602, "y": 157 }, { "x": 603, "y": 142 }, { "x": 587, "y": 98 }, { "x": 555, "y": 115 }, { "x": 509, "y": 137 }],
},
{
name: "水岸心境社区",
keyName: "水岸心境",
x: 740,
y: 160,
show: false,
data: [{ "x": 589, "y": 96 }, { "x": 657, "y": 56 }, { "x": 688, "y": 134 }, { "x": 688, "y": 246 }, { "x": 631, "y": 262 }, { "x": 605, "y": 147 }, { "x": 589, "y": 96 }],
}
]
export { pointList1, pointList2, pointListAll }
\ No newline at end of file
src/utils/request.js
View file @ 7f16a6ca
...@@ -4,7 +4,6 @@ import { ElMessage, ElMessageBox } from "element-plus"; ...@@ -4,7 +4,6 @@ import { ElMessage, ElMessageBox } from "element-plus";
import { router } from "@/router/router"; import { router } from "@/router/router";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8"; axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
//是否重新登录 //是否重新登录
export let isRelogin = { show: false }; export let isRelogin = { show: false };
...@@ -16,6 +15,7 @@ const service = axios.create({ ...@@ -16,6 +15,7 @@ const service = axios.create({
service.interceptors.request.use( service.interceptors.request.use(
(config) => { (config) => {
config.headers["Authorization"] = getToken() ? "Bearer " + getToken() : ""; config.headers["Authorization"] = getToken() ? "Bearer " + getToken() : "";
// config.headers["Cache-Control"] = "no-cache"
return config; return config;
}, },
(error) => { (error) => {
......
src/view/components/communitySelect.vue
View file @ 7f16a6ca
...@@ -5,16 +5,8 @@ ...@@ -5,16 +5,8 @@
选择社区 选择社区
</div> </div>
<div class="community-list" :class="{ show: showList }"> <div class="community-list" :class="{ show: showList }">
<div <div class="community-item fs-14 line-y" @click="itemClick(item, index)" :class="{ active: index === selectIndex }" v-for="(item, index) in communityList">
class="community-item fs-14 line-y" <img v-show="index === selectIndex" src="../../assets/imgs/sqxx_icon.png" />
@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 }} {{ item.name }}
</div> </div>
</div> </div>
...@@ -26,7 +18,7 @@ ...@@ -26,7 +18,7 @@
<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", "currentCommunityInfo"]);
const emit = defineEmits(["communityChange"]); const emit = defineEmits(["communityChange"]);
let showList = ref(false); let showList = ref(false);
let selectIndex = ref(-1); let selectIndex = ref(-1);
...@@ -43,7 +35,10 @@ function itemClick(item, index) { ...@@ -43,7 +35,10 @@ function itemClick(item, index) {
emit("communityChange", selectIndex.value); emit("communityChange", selectIndex.value);
} }
onMounted(() => { onMounted(() => {
itemClick(props.communityList[0], 0); // itemClick(props.communityList[0], 0);
selectIndex.value = props.communityList.findIndex((i) => {
return props.currentCommunityInfo == i;
});
}); });
</script> </script>
......
src/view/components/screenHeader.vue
View file @ 7f16a6ca
...@@ -10,8 +10,11 @@ ...@@ -10,8 +10,11 @@
<div id="he-plugin-simple"></div> <div id="he-plugin-simple"></div>
</div> </div>
</div> </div>
<div class="logout" @click="logout">退出登录</div> <div class="logout" @click="toIndex">返回首页</div>
<div class="logout" style="margin-left:10px" @click="logout">退出登录</div>
</div> </div>
</template> </template>
<script setup> <script setup>
...@@ -50,6 +53,9 @@ function logout() { ...@@ -50,6 +53,9 @@ function logout() {
}) })
.catch(() => {}); .catch(() => {});
} }
function toIndex() {
router.go(-1);
}
onMounted(() => { onMounted(() => {
window.WIDGET = { window.WIDGET = {
CONFIG: { CONFIG: {
......
src/view/home.vue 0 → 100644
View file @ 7f16a6ca
<template>
<!-- <div id="index"> -->
<div class="screen" id="screen">
<top-header></top-header>
<div class="left-box">
<material-notice :communityId="currentCommunity.id"></material-notice>
<house-general-view :communityId="currentCommunity.id"></house-general-view>
</div>
<div class="right-box">
<supervisory-analysis :communityId="currentCommunity.id"></supervisory-analysis>
<event-analysis :communityId="currentCommunity.id"></event-analysis>
<major-conference-news :communityId="currentCommunity.id"></major-conference-news>
</div>
<div class="bottom-box">
<event-transact :communityId="currentCommunity.id"></event-transact>
</div>
</div>
<!-- 首页 -->
<div class="plan-img" id="plan-img" @mousewheel.prevent @click="changeCommunity" @dblclick="toMapArea" :style="{
width: imgWidth + 'px',
height: imgHeight + 'px',
}">
<canvas ref="canvas" style="z-index: 9999"></canvas>
<div class="block" :style="{
left: item.x + 'px',
top: item.y + 'px',
transform: 'translate(-50%, -50%)',
}" v-for="(item, idx) in pointListAll">
<img v-if="currentCommunity.id === item.id" :src="getAssetsImages(item.keyName)" class="mark-icon" />
</div>
</div>
</template>
<script setup>
import { pointListAll } from "../static/mapPoint";
import {
onMounted,
ref,
watch,
reactive,
computed,
provide,
onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import topHeader from "@/components/header.vue";
import materialNotice from "@/components/materialNotice.vue";
import supervisoryAnalysis from "@/components/supervisoryAnalysis.vue";
import eventAnalysis from "@/components/eventAnalysis.vue";
import majorConferenceNews from "@/components/majorConferenceNews.vue";
import eventTransact from "@/components/eventTransact.vue";
import houseGeneralView from "@/components/houseGeneralView.vue";
// import { getWcjdToken } from "@/api/wcjd";
import { getCommunityList, getStreet } from "@/api/screen";
import { getUserType } from "../api/user";
let imgWidth = 868; //底图的宽像素
let imgHeight = 671; //底图的高像素
let pointsList = ref([]); //绘制的点的数组 ，划区域用
let currentCommunity = ref({});
let currentCommunityImg = ref("");
const communityList = ref([]);
let showImg = ref(false);
let userTypeInfo = ref({});
watch(currentCommunity, (newVal) => {
if (newVal) {
showImg.value = true;
}
});
const honorRef = ref(null);
const promotionalVideoRef = ref(null);
function getAssetsImages(name) {
return new URL(`../assets/homeImgs/map_moudle/${name}.png`, import.meta.url)
.href;
}
function changeCommunity(e) {
console.log("点击到了", judge(e).id);
if (!determineType(e)) return;
if (judge(e).id) {
//点击空白处不修改currentCommunity
showImg.value = false;
currentCommunity.value = judge(e);
// honorRef.value.stopAutoplay();
} else {
getStreetInfo();
// honorRef.value.sartAutoplay();
}
}
const router = new useRouter();
//点击区域跳转地图
function toMapArea(e) {
if (!determineType(e)) return;
if (!currentCommunity.value.id) return;
router.push(
`/index?communityName=${judge(e).name}&communityId=${judge(e).id}`
);
}
//点击点位加点
function drawArea(e) {
e = e || window.event;
let x = e.offsetX || e.layerX;
let y = e.offsetY || e.layerY;
console.log(x, y);
pointsList.value.push({ x, y });
}
//保存描点点位数组
function savePoint() {
sessionStorage.setItem("point", JSON.stringify(pointsList.value));
}
//初始化区域模块
function getCanvas() {
const canvas = document.querySelector("canvas");
canvas.width = imgWidth;
canvas.height = imgHeight;
pointListAll.forEach((ele, idx) => {
let ctx = canvas.getContext("2d");
ctx.beginPath();
for (let i = 0; i < ele.data.length; i++) {
const dataTemp = ele.data[i];
if (i === 0) {
ctx.moveTo(dataTemp.x, dataTemp.y);
} else {
ctx.lineTo(dataTemp.x, dataTemp.y);
}
}
// ctx.fillStyle = "red";
// ctx.fill();
// ctx.stroke();
ctx.closePath();
});
}
// 判断点是否在某个多边形内
function pointInPolygon(targetPoint, targetPoints) {
let leftPointCount = 0;
let rightPointCount = 0; //左右点的个数
let _points = [];
//第一步：取出所有的点，并计算交点坐标
for (let i = 0, _length = targetPoints.length - 1; i < _length; i++) {
let p1 = targetPoints[i],
p2 = targetPoints[i + 1]; //取出当前点和当前点的下一个点
let point = calcCrossoverPoint(targetPoint, p1, p2);
//如果交点有效，则保存
if (point) {
_points.push(point);
}
}
// 第二步：计算给定的坐标点，左右两边的交点个数，奇数在范围内，偶数则不在
for (let j = 0, length = _points.length; j < length; j++) {
let x = _points[j];
if (x === targetPoint.x) {
return false; //在线上，直接返回不在范围内
} else {
targetPoint.x !== x && targetPoint.x > x
? leftPointCount++
: rightPointCount++;
}
}
//判断交点个数
return leftPointCount % 2 !== 0 && rightPointCount % 2 !== 0;
}
function calcCrossoverPoint(targetPoint, startPoint, endPoint) {
let crossoverPointX =
startPoint.x -
((startPoint.y - targetPoint.y) * (startPoint.x - endPoint.x)) /
(startPoint.y - endPoint.y);
//判断交点坐标是否有效，即交点在startPoint，endPoint构成的线段范围内
if (
(startPoint.y < targetPoint.y && endPoint.y >= targetPoint.y) ||
(endPoint.y < targetPoint.y && startPoint.y >= targetPoint.y)
) {
if (
(crossoverPointX >= startPoint.x && crossoverPointX <= endPoint.x) ||
(crossoverPointX <= startPoint.x && crossoverPointX >= endPoint.x)
) {
return crossoverPointX;
} else {
return false;
}
} else {
return false;
}
}
function determineType(e) {
const userType = userTypeInfo.value.type;
if (userType === 3 || userType === 6) return true;
if (userType === 5) {
if (judge(e).id === currentCommunity.value.id) return true;
else return false;
}
}
function judge(e) {
e = e || window.event;
let x = e.offsetX || e.layerX;
let y = e.offsetY || e.layerY;
let ele = {};
pointListAll.forEach((pointDataCopy, idx) => {
// 判断画布上有无图形
if (pointDataCopy.data.length > 0) {
let dot = { x, y };
if (pointInPolygon(dot, pointDataCopy.data)) {
ele = pointDataCopy;
} else {
return;
}
}
});
return ele;
}
function getCommunityLists() {
getCommunityList().then((res) => {
if (res.code === 200) {
communityList.value = res.data;
pointListAll.forEach((ele) => {
res.data.forEach((i) => {
if (ele.name === i.name) {
ele.id = i.id;
ele.synopsis = i.synopsis;
ele.promotionalVideo = i.promotionalVideo;
ele.cover = i.cover;
}
});
});
if (userTypeInfo.value.type == 3) {
getStreetInfo();
} else {
const id = userTypeInfo.value.communityId || "";
currentCommunity.value = pointListAll.find((ele) => ele.id === id) || {
id: -1,
};
}
console.log("currentCommunity");
getCanvas();
}
});
}
//3dtiles Token
async function getTilesToken() {
localStorage.setItem("wcjdToken", (await getWcjdToken()).data.datas.token);
}
function getStreetInfo() {
getStreet({}).then((res) => {
if (res.code === 200) {
currentCommunity.value = res.data;
currentCommunity.value.id = "";
}
});
}
// 获取登录用户信息
function getUserTypeInfo() {
getUserType().then((res) => {
if (!res.data) userTypeInfo.value = { type: 6 };
else userTypeInfo.value = res.data;
getCommunityLists();
});
}
onMounted(() => {
// getTilesToken();
getUserTypeInfo();
});
</script>
<style lang="scss" scoped>
.point {
width: 10px;
height: 10px;
background: green;
border-radius: 5px;
z-index: 999;
position: absolute;
}
.plan-img {
margin: 30px auto 0;
position: relative;
overflow: hidden;
background: url("../assets/homeImgs/map_nor.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.block {
cursor: pointer;
z-index: 29;
position: absolute;
display: flex;
width: 349px;
height: 253px;
user-select: none;
pointer-events: none;
.mark-icon {
position: absolute;
transform-origin: 0% 0%;
top: 0;
left: 0;
z-index: 30;
}
}
}
#screen {
position: absolute;
width: 100%;
height: 100vh;
transform-origin: 0% 0%;
top: 0;
bottom: 0;
overflow: hidden;
background: url("../assets/homeImgs/index_bg.jpg") no-repeat;
background-size: 100% 100%;
.left-box {
position: absolute;
left: 26px;
top: 0px;
height: 100vh;
width: 25%;
// overflow: hidden;
}
.right-box {
position: absolute;
right: 26px;
top: 0;
height: 100vh;
z-index: 999;
width: 25%;
}
.bottom-box {
pointer-events: auto;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, 0);
width: 44.6%;
display: flex;
justify-content: center;
//padding-bottom: 20px;
z-index: 1000;
flex-direction: column;
align-items: center;
}
.honor {
top: 820px;
}
}
</style>
src/view/index.vue
View file @ 7f16a6ca
...@@ -4,17 +4,8 @@ ...@@ -4,17 +4,8 @@
<screen-left :currentHouseInfo="currentHouseInfo"></screen-left> <screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
<screen-right :currentHouseInfo="currentHouseInfo"></screen-right> <screen-right :currentHouseInfo="currentHouseInfo"></screen-right>
<searchBox <searchBox v-if="userTypeInfo.type === 6" @searchChange="searchChangeHandle" ref="searchBoxRef"></searchBox>
v-if="userTypeInfo.type === 6" <community-select ref="communitySelectRef" v-if="userTypeInfo.type === 6" :communityList="communityList" @communityChange="communityChangeHandle"></community-select>
@searchChange="searchChangeHandle"
ref="searchBoxRef"
></searchBox>
<community-select
ref="communitySelectRef"
v-if="userTypeInfo.type === 6"
:communityList="communityList"
@communityChange="communityChangeHandle"
></community-select>
</div> </div>
</template> </template>
...@@ -30,6 +21,7 @@ import searchBox from "./components/searchBox.vue"; ...@@ -30,6 +21,7 @@ import searchBox from "./components/searchBox.vue";
import { 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";
import { useRoute } from "vue-router";
const communitySelectRef = ref(null); const communitySelectRef = ref(null);
const searchBoxRef = ref(null); const searchBoxRef = ref(null);
let viewer = null; let viewer = null;
...@@ -37,6 +29,9 @@ let communityList = ref([]); ...@@ -37,6 +29,9 @@ let communityList = ref([]);
let userTypeInfo = ref({}); let userTypeInfo = ref({});
let currentCommunityInfo = ref({}); let currentCommunityInfo = ref({});
let currentHouseInfo = ref({}); let currentHouseInfo = ref({});
const route = new useRoute();
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);
...@@ -72,14 +67,17 @@ function getUserTypeInfo() { ...@@ -72,14 +67,17 @@ function getUserTypeInfo() {
if (userTypeInfo.value.type === 6) { if (userTypeInfo.value.type === 6) {
// 街道管理员 // 街道管理员
drawCommunityMarker(communityList.value); let communityInfo = communityList.value.find((item) => {
return item.id === Number(route.query.communityId);
});
currentCommunityInfo.value = communityInfo;
drawCommunityMarker([communityInfo]);
} else if (userTypeInfo.value.type === 4) { } else if (userTypeInfo.value.type === 4) {
// 社区管理员 let communityInfo = communityList.value.find((item) => {
let communityInfo = communityList.value.find( return item.id === userTypeInfo.value.communityId;
(item) => item.id === userTypeInfo.value.communityId });
);
console.log("communityInfo", communityInfo); console.log("communityInfo", communityInfo);
drawCommunityMarker([communityInfo]); currentCommunityInfo.value = communityInfo;
getHouseListFunc(userTypeInfo.value.communityId); getHouseListFunc(userTypeInfo.value.communityId);
} else if (userTypeInfo.value.type === 5) { } else if (userTypeInfo.value.type === 5) {
// 小区管理员 // 小区管理员
......
vite.config.js
View file @ 7f16a6ca
...@@ -22,8 +22,8 @@ export default defineConfig({ ...@@ -22,8 +22,8 @@ export default defineConfig({
open: true, open: true,
proxy: { proxy: {
"/prod-api": { "/prod-api": {
// target: "http://192.168.10.4:10024", target: "http://122.112.172.186:8050",
target: "https://xcsq.zjhmit.com", // target: "https://xcsq.zjhmit.com",
// target: "http://o5476b3227.oicp.vip:10081", // target: "http://o5476b3227.oicp.vip:10081",
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/prod-api/, ""), rewrite: (path) => path.replace(/^\/prod-api/, ""),
......
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