现有人员、场所信息显示调整

shuishen

2025-12-23 0b2b9598ce9ee00bb6b0bafdbdb159035a4bf547

现有人员、场所信息显示调整

 src/styles/media/index.scss

@@ -227,10 +227,19 @@
                                    }
                                }

                                .house-sub-tab {
                                    .sub-child-tab:last-child {
                                        margin-top: countSizeVh(8)
                                    }
                                }

                                .echarts-box {
                                    height: calc(100% - countSizeVh(46));
                                }

                                .house-echarts-box {
                                    height: calc(100% - countSizeVh(112));
                                }
                            }

                            .person-box {

 src/views/home/components/leftContainer.vue

@@ -7,8 +7,9 @@
            <span :class="{ choosed: peopletype == 0 }">现有人员</span>
          </div>
        </div>
        <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
                <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
          <div class="sub-tab" v-show="peopletype == 0">
            <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
              <div class="tab-title-small">人口总数:</div>
@@ -33,7 +34,8 @@
          </div>
        </el-main>

        <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin">
        </div>
      </div>

@@ -45,12 +47,14 @@
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" />
          <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
            <stop offset="0%" stop-color="#fff" stop-opacity="1" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
            <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
              <animateMotion dur="8s"
                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
@@ -64,16 +68,19 @@

        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
        </use>
      </svg>
    </div>
    <div class="house-box" style="position: relative;">
      <div class="box">
        <div class="title">场所信息</div>
        <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
          <div class="sub-tab">
                <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab house-sub-tab">
                        <div class="sub-child-tab">
            <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
              <div class="tab-title-small">九小场所:</div>
              <div class="tab-title-small">{{ placeNum }}</div>
@@ -82,27 +89,36 @@
              <div class="tab-title-small">重点场所:</div>
              <div class="tab-title-small">{{ otherPlaceNum }}</div>
            </div>
                        </div>
                        <div class="sub-child-tab">
            <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 2 }" @click="houseTabClick(2)">
              <div class="tab-title-small">风险隐患场所:</div>
              <div class="tab-title-small">{{ riskNum }}</div>
            </div>
                            <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 3 }" @click="houseTabClick(2)">
                                <div class="tab-title-small">企业信息:</div>
                                <div class="tab-title-small">{{ riskNum }}</div>
          </div>
          <div id="houseEcharts" class="echarts-box"></div>
                        </div>
                    </div>
                    <div id="houseEcharts" class="echarts-box house-echarts-box"></div>
        </el-main>
      </div>

      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
        </use>
      </svg>
    </div>
    <div class="land-box" style="position: relative;">
      <div class="box">
        <div class="title">现有院落</div>
        <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
                <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
          <div class="sub-tab" v-show="isAllPoliceStation">
            <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
              <div class="tab-title-small">院落:</div>
@@ -126,7 +142,8 @@
      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
        </use>
      </svg>
    </div>
@@ -1594,80 +1611,66 @@
            },
            confine: true
          },
          // legend: {
          //   orient: 'vertical',
          //   top: 'middle',
          //   right: '2%',
          //   y: '1%',
          //   itemGap: 15,
          //   textStyle: {
          //     color: '#fff'
          //   },
          //   align: 'left',
          //   formatter: function (name) {
          //     let data = dataArr
          //     let tarValue
          //     for (let i = 0; i < data.length; i++) {
          //       if (data[i].name == name) {
          //         tarValue = data[i].value
          //       }
          //     }
          //     let v = tarValue
          //     return `${name}  ${v} 人    `
          //   },
          // },
                    xAxis: {
                        type: 'category',
                        data: dataArr.map(item => item.name),

                        axisLabel: {
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(10),
                            formatter: function (params) {
                                var val = ""
                                if (params.length > 4) {
                                    val = params.substr(0, 4) + '...'
                                    return val
                                } else {
                                    return params
                                }
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        max: Math.floor(Math.max(...dataArr.map(item => item.value)) * 1.5),
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(12)
                        }
                    },
          series: [
            {

              type: 'pie',
              radius: [20, 50],
              center: ['50%', '50%'],

              data: dataArr,
              label: {
                            data: dataArr.map(item => item.value),
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                normal: {
                  formatter: function (params, ticket, callback) {
                    let msg
                    if (params.value > 10000) {
                      msg = (params.value / 10000).toFixed(2) + '万人'
                    } else {
                      msg = params.value + '人'
                    }
                    return `{white|${params.name}}{yellow|${msg}}`
                  },
                  rich: {
                    yellow: {
                      color: "#ffc72b",
                      fontSize: fontSize(12),
                      padding: [5, 4],
                      align: 'center'
                    },
                    total: {
                      color: "#ffc72b",
                      fontSize: fontSize(12),
                      align: 'center'
                    },
                    white: {
                      color: "#fff",
                      align: 'center',
                      fontSize: fontSize(12),
                      padding: [21, 0]
                    },
                    blue: {
                      color: '#49dff0',
                      fontSize: fontSize(12),
                      align: 'center'
                    },
                  }
                                    color: '#ed7c2f'
                },
              },
            }
                        },
          ],
          grid: {
            x: 10,
            y: 10,
            x2: 10,
            y2: 20
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
          },
        }
      }
@@ -1962,8 +1965,14 @@
    .sub-tab {
      padding: 10px;
      display: flex;
            flex-wrap: wrap;
      color: #99cccc;

            .sub-child-tab {
                width: 100%;
                display: flex;
            }

      .tab,
      .tab3 {
        margin: 0 10px;