社区简介

src/assets/styles/index.scss

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

src/store/getters.js

@@ -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;

src/store/modules/taicang.js

@@ -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();
+        });
+      });
+    },
   },
 };
 

src/store/modules/user.js

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

src/views/components/IndexModel/left.vue

@@ -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>

src/views/components/IndexModel/right.vue

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

src/views/components/foldpanelLeft/index.vue

@@ -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 {

src/views/components/foldpanelRight/index.vue

@@ -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 {

src/views/components/index.js

@@ -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";

src/views/components/introduceTitle/index.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;

src/views/components/introduceTitle/subTtile.vue

@@ -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>

src/views/index.vue

@@ -1,39 +1,36 @@
 <template>
   <div class="pc-container">
     <NavigationBar></NavigationBar>
-    <foldpanelLeft>
+    <foldpanelLeft :title="xiaoquIntroduce.deptName + '简介'">
-      <introduceTitle
+      <IndexModelLeft />
-        title="娄东街道简介"
-        subTitle="INTRODUCTION"
-      ></introduceTitle>
     </foldpanelLeft>
-    <foldpanelRight>
+    <foldpanelRight></foldpanelRight>
-      <introduceTitle
-        title="统计分析"
-        subTitle="STATISTICAL ANALYSIS"
-      ></introduceTitle>
-    </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>