From e3d8742e37ad5c9905c8ffbcc15fbfff0f0ece4f Mon Sep 17 00:00:00 2001
From: LiuY <1622779752@qq.com>
Date: Fri, 12 Jan 2024 15:47:04 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E9=A6=96=E9=A1=B5=E7=BB=9F=E8=AE=A1-?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=88=BF=E5=B1=8B=E7=B1=BB=E5=9E=8B=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=202=E3=80=81=E6=A5=BC=E5=AE=87=E7=BB=9F=E8=AE=A1-?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=88=BF=E5=B1=8B=E7=B1=BB=E5=9E=8B=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/assets/home/css/index4.css         |   2 +-
 src/main/resources/static/default.html        | 114 ++++++++++++++++--
 .../templates/home/building-details.html      |  85 +++++++++----
 3 files changed, 165 insertions(+), 36 deletions(-)

diff --git a/src/main/resources/static/assets/home/css/index4.css b/src/main/resources/static/assets/home/css/index4.css
index d79b27c..d1cf88c 100644
--- a/src/main/resources/static/assets/home/css/index4.css
+++ b/src/main/resources/static/assets/home/css/index4.css
@@ -135,7 +135,7 @@ body {
     background-color: rgba(255, 255, 255, .2);
 }
 
-.cell_box span {
+.top_box span {
     /* display: flex; */
     position: absolute;
     top: 50%;
diff --git a/src/main/resources/static/default.html b/src/main/resources/static/default.html
index de6025e..bde6c3a 100644
--- a/src/main/resources/static/default.html
+++ b/src/main/resources/static/default.html
@@ -45,13 +45,11 @@
                         <div class="icon_2">
                             <img src="assets/home/images/bj222.png" alt="" style="width: 100%; height: 100%;">
                         </div>
-
                     </div>
                     <div class="data">
                         <span>
                             <h5>稀土路街道</h5>
                         </span>
-
                         <span>
                             <em>{{ xiTupersonCount }}</em>
                             <i>人</i>
@@ -64,13 +62,11 @@
                         <div class="icon_2">
                             <img src="assets/home/images/bj333.png" alt="" style="width: 100%; height: 100%;">
                         </div>
-
                     </div>
                     <div class="data">
                         <span>
                             <h5>民馨路街道</h5>
                         </span>
-
                         <span>
                             <em>{{ mingXinpersonCount }}</em>
                             <i>人</i>
@@ -83,13 +79,11 @@
                         <div class="icon_2">
                             <img src="assets/home/images/bj444.png" alt="" style="width: 100%; height: 100%;">
                         </div>
-
                     </div>
                     <div class="data">
                         <span>
                             <h5>万水泉镇</h5>
                         </span>
-
                         <span>
                             <em>{{ wanShuiQuanpersonCount }}</em>
                             <i>人</i>
@@ -133,7 +127,7 @@
     <!-- 右边页面 -->
     <div class="right_div">
         <!--政治面貌-->
-        <div class="flex_r1 sub_div">
+        <div style="flex: 3;" class="sub_div">
             <div class="politics">
                 <div class="politics_top">
                     <img src="assets/home/images/箭头.png" alt="">
@@ -145,7 +139,7 @@
             </div>
         </div>
         <!--性别统计-->
-        <div class="flex_r2 sub_div">
+        <div style="flex: 2;" class="sub_div">
             <div class="gender">
                 <div class="gender_top">
                     <img src="assets/home/images/箭头.png" alt="">
@@ -187,8 +181,22 @@
 
             </div>
         </div>
+        <!-- 房屋类型 -->
+        <div style="flex: 3;" class="sub_div">
+            <div class="society">
+                <div class="society_top">
+                    <img src="assets/home/images/箭头.png" alt="">
+                    <h4>房屋类型</h4>
+                </div>
+                <div class="society_bottom">
+                    <div class="bar" id="houseTypeChart"></div>
+                </div>
+            </div>
+        </div>
+
+
         <!-- 特殊信息类人员情况 -->
-        <div class="flex_r3 sub_div">
+       <!-- <div class="flex_r3 sub_div">
             <div class="special">
                 <div class="special_top">
                     <img src="assets/home/images/箭头.png" alt="">
@@ -211,7 +219,11 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div>-->
+
+
+
+
         <!-- 社会保障类人员 -->
        <!-- <div class="flex_r4 sub_div">
             <div class="society">
@@ -752,6 +764,87 @@
                     });
 
                 },
+                initHouseTyoeChart: function(){
+                    var self = this;
+                    var option = {
+                        color: ["#5189FF", "#FF9C3D", "#00FFBC", "#FFB200"],
+                        tooltip: {
+                            trigger: 'item',
+                            // 格式化提示内容：
+                            // a 代表series系列图表名称
+                            // b 代表series数据名称 data 里面的name
+                            // c 代表series数据值 data 里面的value
+                            // d代表  当前数据/总数据的比例
+                            // formatter: "{b} : {c}"
+                        },
+                        legend: {
+                            orient: 'vertical',
+                            top: '30%',
+                            left: 'left',
+                            align: 'auto',
+                            textStyle: {
+                                color: '#fff'
+                            }
+                        },
+                        series: [
+                            {
+                                // name: 'Access From',
+                                type: 'pie',
+                                radius: ['50%', '80%'],
+                                avoidLabelOverlap: false,
+                                itemStyle: {
+                                    borderRadius: 10,
+                                    borderColor: '#fff',
+                                    borderWidth: 0
+                                },
+                                label: {
+                                    show: true,
+                                    fontSize: 12,
+                                    color: '#fff',
+                                    fontWeight: 'bold',
+                                    formatter: '{b}{c}'
+                                    // position: 'center'
+                                },
+                                /*emphasis: {
+                                    label: {
+                                        show: true,
+                                        fontSize: 40,
+                                        fontWeight: 'bold'
+                                    }
+                                },*/
+                                labelLine: {
+                                    show: true
+                                },
+                                hoverOffset: 0,
+                                data: [
+                                    /*{ value: 31, name: "中国共产党员" },
+                                    { value: 29, name: "共青团员" },
+                                    { value: 25, name: "预备党员" },
+                                    { value: 15, name: "其他" }*/
+                                ]
+                            }
+                        ]
+                    };
+                    var myChart = echarts.init(document.getElementById('houseTypeChart'));
+                    $.ajax({
+                        url: self.apiHost + "app/query/sqlrelease/qf4f381b?area=",
+                        type: 'GET',
+                        dataType: 'JSON',
+                        headers: self.headers,
+                        success: function(data) {
+                            option.series[0]['data'].push({name: '出租房', value: data.chuZu});
+                            option.series[0]['data'].push({name: '空置房', value: data.kongFang});
+                            option.series[0]['data'].push({name: '自住房', value: data.ziZhu});
+                            option.series[0]['data'].push({name: '其他', value: data.qiTa});
+                            myChart.setOption(option);
+                        }
+                    });
+
+
+
+                },
+
+
                 // 二级页面 - 人口总数
                 personShow: function(){
                     layer.open({
@@ -897,6 +990,7 @@
                 /*this.initProtectPerson();*/
                 this.initPetitionRecord();
                 this.initSpecialPersonData();
+                this.initHouseTyoeChart();
             }
         });
 
diff --git a/src/main/resources/templates/home/building-details.html b/src/main/resources/templates/home/building-details.html
index b054360..a0b1b76 100644
--- a/src/main/resources/templates/home/building-details.html
+++ b/src/main/resources/templates/home/building-details.html
@@ -10,29 +10,54 @@
 
     <style>
         [v-clock] {display: none}
-      .table-a table {
-          border-spacing: 0.07rem;
-      }
+        .table-a table {
+            border-spacing: 0.07rem;
+        }
 
-      .table-a table td {
-          width: 0.5rem;
-          height: 0.15rem;
-          background-color: #FFFFFF;
-          text-align: center;
-      }
+        .table-a table td {
+            position: relative;
+            width: 0.5rem;
+            height: 0.15rem;
+            background-color: #FFFFFF;
+            /*text-align: center;*/
+        }
 
-      .blue-td {
-          background-color: #478dd3 !important;
-      }
+        .blue-td {
+            background-color: #478dd3 !important;
+        }
 
-      .red-div {
-          background-color: #D76861 !important;
-      }
 
-      .house-td:hover{
-          cursor: pointer;
-          background-color: yellow !important;
-      }
+        .house-td:hover{
+            cursor: pointer;
+            background-color: yellow !important;
+        }
+
+        .house-num-div {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .house-num {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100px;
+            height: 100px;
+        }
+
+        .house-type-div {
+            display: flex;
+           /* align-items: flex-end;*/
+            justify-content: flex-start;
+        }
+
+        .house-type-div span {
+            display: inline-block;
+            width: 20px;
+            height: 10px;
+        }
 
 
     </style>
@@ -57,11 +82,21 @@
                             <tr v-for="floors in unit.house">
                                 <td style="background-color: transparent"> {{ floors.follrs }}层</td>
                                 <!-- 循环户数 -->
-                                <td class="house-td" v-for="house in floors.follrsHouse" :class="{ 'blue-td': house.populationCount > 0 }" @click="houseShow(house.houseId)"> {{ house.houseNum }}</td>
+                                <td class="house-td" v-for="house in floors.follrsHouse" :class="{ 'blue-td': house.populationCount > 0 }" @click="houseShow(house.houseId)">
+                                    <div class="house-num-div">
+                                        <span class="house-num">{{ house.houseNum }}</span>
+                                        <div class="house-type-div">
+                                            <span style="background-color: #CC33FF" v-if="house.fangHuYiZhi != 0"></span><!--房户一致-->
+                                            <span style="background-color: #4D3900" v-if="house.ziZhu != 0"></span><!--自有住房-->
+                                            <span style="background-color: #7F7F7F" v-if="house.chuZu != 0"></span> <!-- 出租-->
+                                            <span style="background-color: #000000" v-if="house.kongZhi != 0"></span><!-- 空房-->
+                                        </div>
+                                    </div>
+                                </td>
                             </tr>
                             <tr>
                                 <td style="background-color: transparent"></td>
-                                <td colspan="99">{{ unit.unit }} 单元</td>
+                                <td colspan="99" style="text-align: center">{{ unit.unit }} 单元</td>
                             </tr>
                         </table>
                    <!-- </div>-->
@@ -103,9 +138,9 @@
         <!-- 网格员信息 -->
         <div class="div_flex_1 sub_div">
             <div class="grid_inspector ">
-                    <span class="span_1">
-                        <h4>网格员</h4>
-                    </span>
+                <span class="span_1">
+                    <h4>网格员</h4>
+                </span>
                 <!-- <h4>网格员</h4> -->
                 <span class="span_2" id="gridSpan">
                     <div class="module" v-for="grid in gridAdminList">
@@ -128,7 +163,6 @@
                         </div>
                     </div>
                 </span>
-
             </div>
         </div>
         <!-- 人员信息 -->
@@ -323,6 +357,7 @@
                         dataType: 'JSON',
                         headers: self.headers,
                         success: function(data) {
+                            console.log(data)
                             self.buildingData = data.data;
                         }
                     });