colorList

.env.development

@@ -4,9 +4,13 @@ VUE_APP_TITLE = 人口数据管理系统
 # 开发环境配置
 ENV = 'development'
 
-# 政务网/开发环境
+# # 政务网/开发环境
-VUE_APP_BASE_API_HTML = "http://122.193.93.182:19002"
+# VUE_APP_BASE_API_HTML = "http://122.193.93.182:19002"
-VUE_APP_BASE_API = 'http://122.193.93.182:19002'
+# VUE_APP_BASE_API = 'http://122.193.93.182:19002'
+
+# 测试/开发环境
+VUE_APP_BASE_API_HTML = "http://192.168.0.120:19002"
+VUE_APP_BASE_API = "http://192.168.0.120:19002"
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/taicangpop/new.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function getColorList(query) {
+  return request({
+    url: "/taicangpop/data/newGroupHouseData",
+    method: "get",
+    params: query,
+  });
+}

src/store/modules/taicang.js

@@ -1,5 +1,6 @@
 import { getYj } from "@/api/taicangpop/block.js";
 import { getxiaoqu } from "@/api/home";
+import { getColorList } from "@/api/taicangpop/new.js";
 
 const taicang = {
   state: {
@@ -30,22 +31,7 @@ const taicang = {
         kaiguo: {},
       },
     },
-    colorListL: [
+    colorListL: [],
-      { name: "HZ", house: 0, person: 0 },
-      { name: "HL", house: 0, person: 0 },
-      { name: "HO", house: 0, person: 0 },
-      { name: "HF", house: 0, person: 0 },
-      { name: "NZ", house: 0, person: 0 },
-      { name: "NL", house: 0, person: 0 },
-      { name: "NO", house: 0, person: 0 },
-      { name: "NF", house: 0, person: 0 },
-      { name: "户籍", house: 0, person: 0 },
-      { name: "流动", house: 0, person: 0 },
-      { name: "中共党员", house: 0, person: 0 },
-      { name: "帮扶对象", house: 0, person: 0 },
-      { name: "重点人群", house: 0, person: 0 },
-      { name: "退伍军人", house: 0, person: 0 },
-    ],
   },
   mutations: {
     SET_YJ_TOTAL: (state, total) => {
@@ -54,6 +40,13 @@ const taicang = {
     SET_INTRODUCE: (state, introduce) => {
       state.xiaoquIntroduce = introduce;
     },
+    SET_COLOR_LIST: (state, list) => {
+      state.colorListL = handleColor(
+        list,
+        state.leftColor,
+        state.rightTopColor
+      );
+    },
   },
   actions: {
     /**预警总数 */
@@ -71,11 +64,19 @@ 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();
+        });
+      });
+    },
+
+    /**获取colorList */
+    GetcolorList({ commit }, queryParams) {
+      return new Promise((resolve, reject) => {
+        getColorList().then((res) => {
+          commit("SET_COLOR_LIST", res.data);
           resolve();
         });
       });
@@ -83,4 +84,21 @@ const taicang = {
   },
 };
 
+function handleColor(list, leftColor, rightTopColor) {
+  list.map((item) => {
+    let isColor = /^[a-zA-Z]+$/.test(item.name);
+    console.log(isColor);
+    if (isColor) {
+      item.color = item.name;
+      for (let key in leftColor) {
+        if (item.name == key) {
+          item.leftColor = leftColor[key];
+          item.rightTopColor = rightTopColor[key];
+        }
+      }
+    }
+  });
+  return list;
+}
+
 export default taicang;

src/views/components/IndexModel/components/colorList.vue

@@ -2,12 +2,13 @@
   <div class="color-list">
     <div class="list-item" v-for="(item, index) in colorListL" :key="index">
       <div class="item-name">
-        {{ item.name }}
+        <ColorCell :item="item" v-if="item.color" style="margin-right: 12px" />
+        <span> {{ item.name }}</span>
       </div>
       <div class="item-value">
-        <span>6160</span>
+        <span>{{ item.house }}</span>
         <span> 户 </span>
-        <span>20646</span>
+        <span>{{ item.person }}</span>
         <span> 人 </span>
       </div>
     </div>
@@ -16,7 +17,11 @@
 
 <script>
 import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
 export default {
+  components: {
+    ColorCell,
+  },
   data() {
     return {};
   },
@@ -34,7 +39,9 @@ export default {
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;
-  padding: 25px;
+  padding: 0 28px;
+  padding-top: 20px;
+  padding-bottom: 37px;
   .list-item {
     flex: 1;
     display: flex;
@@ -42,6 +49,8 @@ export default {
     justify-content: space-between;
     border-bottom: 1px solid rgba(0, 156, 255, 0.2);
     .item-name {
+      display: flex;
+      align-items: center;
       font-size: 15px;
       color: #abc7ed;
       font-family: "Alibaba-PuHuiTi-Regular.otf";
@@ -50,7 +59,7 @@ export default {
       span:nth-child(odd) {
         font-size: 16px;
         color: #52ccff;
-        font-family: "DIN-Regular-2.otf";
+        font-family: "DIN-Medium-2.otf";
       }
       span:nth-child(even) {
         font-size: 14px;
@@ -58,16 +67,16 @@ export default {
       }
     }
   }
-  .list-item:nth-child(9) .item-value,
+  .list-item:nth-child(10) .item-value,
-  .list-item:nth-child(10) .item-value {
+  .list-item:nth-child(11) .item-value {
     span:nth-child(odd) {
       font-size: 16px;
       color: #ffb400;
-      font-family: "DIN-Regular-2.otf";
+      font-family: "DIN-Medium-2.otf";
     }
   }
-  .list-item:nth-child(9),
+  .list-item:nth-child(10),
-  .list-item:nth-child(10) {
+  .list-item:nth-child(11) {
     .item-name {
       color: #fff;
     }

src/views/components/IndexModel/left.vue

@@ -110,8 +110,9 @@ export default {
     background-size: 100% 100%;
     overflow: hidden;
     & > div {
-      padding-right: 10px;
+      padding-right: 8px;
       height: 100%;
+      line-height: 25px;
       font-size: 15px;
       color: #d3e9ff;
       overflow-y: auto;

src/views/index.vue

@@ -43,6 +43,7 @@ export default {
   },
   mounted() {
     this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
+    this.$store.dispatch("GetcolorList", this.dept.deptId);
   },
   methods: {},
 };