对接大屏下面接口

13404089107

2025-03-24 09946a79821295bd03144808c0670e399af1ed31

对接大屏下面接口

 package-lock.json

@@ -2871,6 +2871,11 @@
      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
      "dev": true
    },
    "claygl": {
      "version": "1.3.0",
      "resolved": "https://mirrors.cloud.tencent.com/npm/claygl/-/claygl-1.3.0.tgz",
      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
    },
    "clean-css": {
      "version": "5.3.3",
      "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.3.tgz",
@@ -3722,6 +3727,15 @@
        }
      }
    },
    "echarts-gl": {
      "version": "2.0.9",
      "resolved": "https://mirrors.cloud.tencent.com/npm/echarts-gl/-/echarts-gl-2.0.9.tgz",
      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
      "requires": {
        "claygl": "^1.2.1",
        "zrender": "^5.1.1"
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",

 src/components/datascreen/CenterPanel.vue

@@ -40,22 +40,24 @@
      <div class="compensation-table">
        <div class="table-header">
          <div class="batch-number txt-center">安置批次</div>
          <div class="household-count txt-center">安置户数</div>
          <div class="household-count txt-center">户主名称</div>
          <div class="people-count txt-center">安置人数</div>
          <div class="progress-wrapper txt-center">补偿阶段</div>
        </div>
        <div class="table-content">
          <div class="table-row" v-for="(item, index) in compensationList" :key="index">
            <div class="batch-number pl-20">{{ item.batchNumber }}</div>
            <div class="household-count">{{ item.householdCount }}</div>
            <div class="people-count">{{ item.peopleCount }}</div>
          <div class="table-row" v-for="(item, index) in data.quarterProcessResponses" :key="index">
            <div class="batch-number text-center">{{ item.batchNumber }}</div>
            <div class="household-count text-center">{{ item.householdHead }}</div>
            <div class="people-count text-center">{{ item.currentCount }}</div>
            <div class="progress-wrapper">
              <div class="progress-bar">
                <div class="progress-fill">
                  <div class="progress-color" :class="item.point>=25?'progress-yellow':item.point>=50?'progress-green':item.point>=75?'progress-blue':'progress-gray'"></div>
                  <div class="progress-color"
                    :class="item.process <= 5 ? 'progress-yellow' : item.process <= 10&&item.process>5 ? 'progress-green' : item.process <= 15&&item.process>10 ? 'progress-blue' : 'progress-gray'">
                  </div>
                </div>
              </div>
              <div class="progress-text">{{ item.stage }}/20</div>
              <div class="progress-text">{{ item.process }}/20</div>
            </div>
          </div>
        </div>
@@ -85,42 +87,7 @@
        { label: '已完成', value: '2021103000003', percentage: 50 }
      ],
      compensationList: [
        {
          batchNumber: '2021103000001',
          householdCount: '8355',
          peopleCount: '238355',
          progress: 50,
          yellowProgress: 20,
          blueProgress: 30,
          stage: '1'
        },
        {
          batchNumber: '2021103000001',
          householdCount: '8355',
          peopleCount: '238355',
          progress: 60,
          yellowProgress: 25,
          blueProgress: 35,
          stage: '2'
        },
        {
          batchNumber: '2021103000001',
          householdCount: '8355',
          peopleCount: '238355',
          progress: 75,
          yellowProgress: 30,
          blueProgress: 45,
          stage: '2'
        },
        {
          batchNumber: '2021103000001',
          householdCount: '8355',
          peopleCount: '238355',
          progress: 90,
          yellowProgress: 35,
          blueProgress: 55,
          stage: '2'
        }

      ]
    };
  }
@@ -130,6 +97,10 @@
<style lang="less" scoped>
.pl-20 {
  padding-left: 20px;
}

.text-center {
  text-align: center;
}

.center-panel {
@@ -206,6 +177,16 @@
        height: 174px;
        display: flex;
        overflow-y: auto;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;

        /* IE 和 Edge */
        &::-webkit-scrollbar {
          display: none;
          /* Chrome, Safari 和 Opera */
        }

        flex-direction: column;
        justify-content: space-between;