111

src/router/index.js

@@ -239,6 +239,11 @@ router.beforeEach((to, from, next) => {
           name: "人员类别分析",
           id: "5fwaefwaefawef5",
         },
+        {
+          url: "/visual/basicinfo/houseStatic/houseStatic",
+          name: "人房概览统计",
+          id: "5fwaefwaefawef6",
+        },
       ],
     },
     {

src/views/modules/visual/basicinfo/basicInfoCommunity.vue

@@ -184,6 +184,8 @@ export default {
       if (this.selBuildingId) {
         await this.loadRoom()
 
+      } else {
+        this.roomArray = []
       }
 
     },
@@ -250,6 +252,7 @@ export default {
 
     //点击用户
     handleClickUser (userId) {
+      this.handleCloseAllUser()
       this.$emit('toSubAgency', 'people', userId, "")
     },
     //获取右侧infolist数据

src/views/modules/visual/basicinfo/houseStatic/options.js

@@ -0,0 +1,176 @@
+
+export function pieOption (_charts) {
+  const center= ['50%', '50%']
+    return {
+      title: {
+        text: '0',
+        top: 125,
+        left: 196,
+        textAlign: 'center',
+        textStyle: {
+          width: '100%',
+          fontSize: 32,
+          color: '#FFFFFF',
+          fontWeight: 400,
+          align: 'center'
+        },
+        itemGap: 5,
+        subtext: '总数',
+        subtextStyle: {
+          fontSize: 16,
+          color: '#fff',
+          fontWeight: 400,
+          align: 'center'
+        }
+      },
+      tooltip: {
+        show: false
+      },
+      legend: {
+        top: 500,
+        bottom: 0,
+        itemWidth: 20,
+        itemHeight: 10,
+        textStyle: {
+          color: '#D2E7FF',
+          fontSize: 16,
+          lineHeight: 20,
+        },
+      
+      },
+      series: [
+        // 外侧圆环
+        {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 90,
+          hoverAnimation: false,
+          // tooltip: {
+          // },
+          center: center,
+          left: 'left',
+          radius: ['60%', '70%'],
+          width: 400,
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          data: [{
+            value: 480,
+            itemStyle: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+          ]
+        },
+  
+        // 突出的
+        {
+          hoverAnimation: false,
+          type: 'pie',
+          center: center,
+          radius: ['40%', '60%'],
+          avoidLabelOverlap: false,
+          selectedMode: 'single',
+          left: 'left',
+          width: 400,
+          startAngle: 90,
+          label: {
+            // show: false,
+            position: 'outside',
+            alignTo: 'edge',
+            // formatter: '{a|{c}}\n\n{name|{b}}',
+            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            minMargin: 5,
+            edgeDistance: 1,
+            lineHeight: 15,
+            color: '#fff',
+            fontSize: 12,
+            // distanceToLabelLine: -60,
+            rich: {
+              name: {
+                padding: [0, 6, 0, 6]
+              },
+              a: {
+                fontSize: 30,
+                color: '#fff',
+                padding: [0, 6, 6, 6]
+              },
+              r: {
+                backgroundColor: 'auto',
+                borderRadius: 6,
+                width: 6,
+                height: 6,
+                // padding: [3, 3, 0, -12]
+              }
+            }
+          },
+          labelLine: {
+            show: false,
+            smooth: 0.2,
+            length: 30,
+            length2: 0,
+            maxSurfaceAngle: 80
+          },
+          labelLayout: function (params) {
+            
+            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+            const points = params.labelLinePoints;
+            // Update the end point.
+            if (points) {
+              points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            }
+            
+            return {
+              labelLinePoints: points
+            };
+          },
+          itemStyle: {
+            
+          },
+          data: [],
+  
+        },
+           // 中间圆环
+           {
+            type: 'pie',
+            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+            startAngle: 90,
+            hoverAnimation: false,
+            center: center,
+            left: 'left',
+            width: 400,
+            // tooltip: {
+            // },
+            radius: ['0%', '25%'],
+            label: {
+            
+                show: false
+             
+            },
+            labelLine: {
+                show: false
+            
+            },
+            data: [
+              {
+                value: 360,
+                itemStyle: {
+                  color: 'rgba(8, 37, 134, 1)',
+                }
+              }
+            ]
+          },
+      ]
+  
+    }
+  }
+