社区简介

master
许宏杰 2 months ago
parent 28f6136aa2
commit 682031ec2e

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 849 B

@ -200,3 +200,5 @@ aside {
color: #fff;
}
}
/*全局滚动条样式结束*/

@ -8,6 +8,8 @@ const getters = {
token: (state) => state.user.token,
avatar: (state) => state.user.avatar,
name: (state) => state.user.name,
userId: (state) => state.user.id,
dept: (state) => state.user.dept,
introduction: (state) => state.user.introduction,
roles: (state) => state.user.roles,
permissions: (state) => state.user.permissions,
@ -18,6 +20,6 @@ const getters = {
leftColor: (state) => state.taicang.leftColor,
rightTopColor: (state) => state.taicang.rightTopColor,
yjTotal: (state) => state.taicang.yjTotal,
userId: (state) => state.user.id,
xiaoquIntroduce: (state) => state.taicang.xiaoquIntroduce,
};
export default getters;

@ -1,4 +1,5 @@
import { getYj } from "@/api/taicangpop/block.js";
import { getxiaoqu } from "@/api/home";
const taicang = {
state: {
@ -23,13 +24,23 @@ const taicang = {
NO: "#7f8c95",
NF: "#008c5e",
},
xiaoquIntroduce: {
intro: {
shequ: {},
kaiguo: {},
},
},
},
mutations: {
SET_YJ_TOTAL: (state, total) => {
state.yjTotal = total;
},
SET_INTRODUCE: (state, introduce) => {
state.xiaoquIntroduce = introduce;
},
},
actions: {
/**预警总数 */
GetYjtotal({ commit }, queryParams) {
return new Promise((resolve, reject) => {
getYj().then((res) => {
@ -38,6 +49,21 @@ const taicang = {
});
});
},
/**
* 获取小区详情
*/
GetXiaoquInfo({ commit }, deptId) {
return new Promise((resolve, reject) => {
// console.log(deptId);
getxiaoqu(deptId).then((res) => {
res.data.intro = JSON.parse(res.data.intro);
commit("SET_INTRODUCE", res.data);
// console.log("小区", res.data);
resolve();
});
});
},
},
};

@ -1,101 +1,117 @@
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { login, logout, getInfo } from "@/api/login";
import { getToken, setToken, removeToken } from "@/utils/auth";
const user = {
state: {
token: getToken(),
id: '',
name: '',
avatar: '',
id: "",
name: "",
avatar: "",
roles: [],
permissions: []
dept: {},
permissions: [],
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
state.token = token;
},
SET_ID: (state, id) => {
state.id = id
state.id = id;
},
SET_NAME: (state, name) => {
state.name = name
state.name = name;
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
state.avatar = avatar;
},
SET_ROLES: (state, roles) => {
state.roles = roles
state.roles = roles;
},
SET_DEPT: (state, dept) => {
state.dept = dept;
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
state.permissions = permissions;
},
},
actions: {
// 登录
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
const username = userInfo.username.trim();
const password = userInfo.password;
const code = userInfo.code;
const uuid = userInfo.uuid;
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
setToken(res.token)
commit('SET_TOKEN', res.token)
resolve()
}).catch(error => {
reject(error)
})
})
login(username, password, code, uuid)
.then((res) => {
setToken(res.token);
commit("SET_TOKEN", res.token);
resolve();
})
.catch((error) => {
reject(error);
});
});
},
// 获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.user
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', res.roles)
commit('SET_PERMISSIONS', res.permissions)
} else {
commit('SET_ROLES', ['ROLE_DEFAULT'])
}
commit('SET_ID', user.userId)
commit('SET_NAME', user.userName)
commit('SET_AVATAR', avatar)
resolve(res)
}).catch(error => {
reject(error)
})
})
getInfo()
.then((res) => {
const user = res.user;
const avatar =
user.avatar == "" || user.avatar == null
? require("@/assets/images/profile.jpg")
: process.env.VUE_APP_BASE_API + user.avatar;
if (res.roles && res.roles.length > 0) {
// 验证返回的roles是否是一个非空数组
commit("SET_ROLES", res.roles);
commit("SET_PERMISSIONS", res.permissions);
} else {
commit("SET_ROLES", ["ROLE_DEFAULT"]);
}
commit("SET_DEPT", user.dept);
commit("SET_ID", user.userId);
commit("SET_NAME", user.userName);
commit("SET_AVATAR", avatar);
resolve(res);
})
.catch((error) => {
reject(error);
});
});
},
// 退出系统
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
logout(state.token)
.then(() => {
commit("SET_TOKEN", "");
commit("SET_ROLES", []);
commit("SET_PERMISSIONS", []);
removeToken();
resolve();
})
.catch((error) => {
reject(error);
});
});
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
}
return new Promise((resolve) => {
commit("SET_TOKEN", "");
removeToken();
resolve();
});
},
},
};
export default user
export default user;

@ -0,0 +1,135 @@
<template>
<div class="model-left">
<introduceTitle title="社区概况" />
<div class="community-table">
<div class="table-row">
<div class="row-lable">地名</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.diming }}</div>
</div>
<div class="table-row">
<div class="row-lable">隶属</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.lishu }}</div>
</div>
<div class="table-row">
<div class="row-lable">行政代码</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.xzdaima }}</div>
</div>
<div class="table-row">
<div class="row-lable">身份证前6位</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.id6 }}</div>
</div>
<div class="table-row">
<div class="row-lable">长途区号</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.ctquhao }}</div>
</div>
<div class="table-row">
<div class="row-lable">邮政编码</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.youzheng }}</div>
</div>
<div class="table-row">
<div class="row-lable">车牌号码</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.chep }}</div>
</div>
<div class="table-row">
<div class="row-lable">行政级别</div>
<div class="row-value">{{ xiaoquIntroduce.intro.shequ.jibie }}</div>
</div>
</div>
<div class="introduce-content">
<div>{{ xiaoquIntroduce.intro.kaiguo.text || "暂无数据" }}</div>
</div>
</div>
</template>
<script>
import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
import { mapGetters } from "vuex";
export default {
components: { introduceTitle },
data() {
return {};
},
mounted() {},
computed: {
...mapGetters(["xiaoquIntroduce"]),
},
};
</script>
<style lang="scss" scoped>
.model-left {
flex: 1;
padding: 25px 0;
display: flex;
flex-direction: column;
overflow: hidden;
.community-table {
margin-top: 20px;
height: 290px;
border: 1px solid #1b4296;
border-radius: 6px;
display: flex;
flex-direction: column;
overflow: hidden;
.table-row {
flex: 1;
display: flex;
align-items: center;
font-family: "Alibaba-PuHuiTi-Regular.otf";
border-bottom: 1px solid #1b4296;
.row-lable {
padding: 7px 0;
width: 30%;
text-align: center;
font-size: 15px;
color: #00ff9c;
border-right: 1px solid #1b4296;
overflow: hidden;
}
.row-value {
padding: 7px;
flex: 1;
font-size: 15px;
color: #d3e9ff;
}
}
& .table-row:last-child {
border-bottom: 0px;
}
}
.introduce-content {
flex: 1;
box-sizing: border-box;
margin-top: 20px;
padding: 35px 15px;
padding-right: 0;
background: url("~@/assets/images/ui/introduce-text.png");
background-size: 100% 100%;
overflow: hidden;
& > div {
padding-right: 10px;
height: 100%;
font-size: 15px;
color: #d3e9ff;
overflow-y: auto;
}
}
}
/*全局滚动条样式*/
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
height: 10px;
width: 1px;
background: rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-track {
background: transparent;
}
</style>

@ -0,0 +1,13 @@
<template>
<div></div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style></style>

@ -6,6 +6,10 @@
:class="['panel-main', { collapsed: isCollapsed }]"
>
<div class="panel-box">
<introduceTitle
:title="title"
subTitle="INTRODUCTION"
></introduceTitle>
<slot></slot>
</div>
</div>
@ -24,7 +28,17 @@
</template>
<script>
import introduceTitle from "@/views/components/introduceTitle";
export default {
props: {
title: {
type: String,
default: "标题",
},
},
components: {
introduceTitle,
},
data() {
return {
isCollapsed: false,
@ -76,7 +90,9 @@ export default {
left: 25px;
right: 25px;
height: 100%;
width: calc(100% - 50px);
width: calc(390px - 50px);
display: flex;
flex-direction: column;
}
}
.collapsed {

@ -6,6 +6,10 @@
:class="['panel-main', { collapsed: isCollapsed }]"
>
<div class="panel-box">
<introduceTitle
title="统计分析"
subTitle="STATISTICAL ANALYSIS"
></introduceTitle>
<slot></slot>
</div>
</div>
@ -24,7 +28,9 @@
</template>
<script>
import introduceTitle from "@/views/components/introduceTitle";
export default {
components: { introduceTitle },
data() {
return {
isCollapsed: false,
@ -46,7 +52,7 @@ export default {
z-index: 10;
height: 100%;
box-sizing: border-box;
padding-top: 80px;
padding-top: 110px;
background: url("~@/assets/images/ui/panel_right.png");
background-size: 100% 100%;
.panel-container {
@ -76,7 +82,9 @@ export default {
left: 25px;
right: 25px;
height: 100%;
width: calc(100% - 50px);
width: calc(390px - 50px);
display: flex;
flex-direction: column;
}
}
.collapsed {

@ -1,3 +1,5 @@
export { default as foldpanelLeft } from "./foldpanelLeft";
export { default as foldpanelRight } from "./foldpanelRight";
export { default as introduceTitle } from "./introduceTitle";
export { default as IndexModelLeft } from "./IndexModel/left.vue";
export { default as IndexModelRight } from "./IndexModel/right.vue";

@ -1,7 +1,7 @@
<template>
<div class="introduce-title">
<span class="sub-title"> {{ subTitle }}</span>
<span class="main-title">{{ title }}</span>
<span class="sub-title"> {{ subTitle }}</span>
</div>
</template>
@ -29,7 +29,9 @@ export default {
background: url("~@/assets/images/ui/introduce-title.png");
background-size: 100% 100%;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding-left: 55px;
overflow: hidden;
.main-title {
padding: 4px 0;

@ -0,0 +1,39 @@
<template>
<div class="introduce-title">
<span class="main-title">{{ title }}</span>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "标题",
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.introduce-title {
height: 40px;
background: url("~@/assets/images/ui/user_title.png");
background-size: 100% 100%;
display: flex;
align-items: center;
overflow: hidden;
.main-title {
margin-left: 40px;
font-size: 19px;
color: #ffffff;
font-family: "xiniu";
background: linear-gradient(0deg, #00beff 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
</style>

@ -1,39 +1,36 @@
<template>
<div class="pc-container">
<NavigationBar></NavigationBar>
<foldpanelLeft>
<introduceTitle
title="娄东街道简介"
subTitle="INTRODUCTION"
></introduceTitle>
<foldpanelLeft :title="xiaoquIntroduce.deptName + '简介'">
<IndexModelLeft />
</foldpanelLeft>
<foldpanelRight>
<introduceTitle
title="统计分析"
subTitle="STATISTICAL ANALYSIS"
></introduceTitle>
</foldpanelRight>
<foldpanelRight></foldpanelRight>
<LeafletMap />
</div>
</template>
<script>
import NavigationBar from "@/components/NavigationBar/index.vue";
import { mapGetters } from "vuex";
import {
foldpanelLeft,
IndexModelLeft,
foldpanelRight,
introduceTitle,
IndexModelRight,
} from "@/views/components/index.js";
import LeafletMap from "@/components/LeafletMap";
export default {
name: "Index",
computed: {
...mapGetters(["dept", "xiaoquIntroduce"]),
},
components: {
NavigationBar,
foldpanelLeft,
IndexModelLeft,
foldpanelRight,
introduceTitle,
IndexModelRight,
LeafletMap,
},
data() {
@ -42,6 +39,9 @@ export default {
version: "3.8.8",
};
},
mounted() {
this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
},
methods: {},
};
</script>

Loading…
Cancel
Save