🎉 init

pyt

2025-03-21 8c444abd0f834bc4903a2c3e39af912a085e4db8

🎉 init

 package-lock.json

@@ -997,7 +997,6 @@
      "version": "7.26.10",
      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.26.10.tgz",
      "integrity": "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==",
      "dev": true,
      "requires": {
        "regenerator-runtime": "^0.14.0"
      }
@@ -1056,6 +1055,56 @@
      "dev": true,
      "requires": {
        "@hapi/hoek": "^9.0.0"
      }
    },
    "@jiaminghi/bezier-curve": {
      "version": "0.0.9",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
      "requires": {
        "@babel/runtime": "^7.5.5"
      }
    },
    "@jiaminghi/c-render": {
      "version": "0.4.3",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
      "requires": {
        "@babel/runtime": "^7.5.5",
        "@jiaminghi/bezier-curve": "*",
        "@jiaminghi/color": "*",
        "@jiaminghi/transition": "*"
      }
    },
    "@jiaminghi/charts": {
      "version": "0.2.18",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
      "requires": {
        "@babel/runtime": "^7.5.5",
        "@jiaminghi/c-render": "^0.4.3"
      }
    },
    "@jiaminghi/color": {
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
    },
    "@jiaminghi/data-view": {
      "version": "2.10.0",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
      "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
      "requires": {
        "@babel/runtime": "^7.5.5",
        "@jiaminghi/charts": "*"
      }
    },
    "@jiaminghi/transition": {
      "version": "1.1.11",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
      "requires": {
        "@babel/runtime": "^7.5.5"
      }
    },
    "@jridgewell/gen-mapping": {
@@ -3557,6 +3606,22 @@
      "resolved": "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz",
      "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
      "dev": true
    },
    "echarts": {
      "version": "5.6.0",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
      "requires": {
        "tslib": "2.3.0",
        "zrender": "5.6.1"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    },
    "ee-first": {
      "version": "1.1.1",
@@ -6712,8 +6777,7 @@
    "regenerator-runtime": {
      "version": "0.14.1",
      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
      "dev": true
      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
    },
    "regenerator-transform": {
      "version": "0.15.2",
@@ -7992,6 +8056,19 @@
        }
      }
    },
    "vue-demi": {
      "version": "0.13.11",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
    },
    "vue-echarts": {
      "version": "7.0.3",
      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
      "requires": {
        "vue-demi": "^0.13.11"
      }
    },
    "vue-hot-reload-api": {
      "version": "2.3.4",
      "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -8831,6 +8908,21 @@
      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
      "dev": true
    },
    "zrender": {
      "version": "5.6.1",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
      "requires": {
        "tslib": "2.3.0"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    }
  }
}

 package.json

@@ -7,9 +7,12 @@
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "core-js": "^3.8.3",
    "echarts": "^5.6.0",
    "register-service-worker": "^1.7.2",
    "vue": "^2.6.14",
    "vue-echarts": "^7.0.3",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
@@ -19,8 +22,8 @@
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "less": "^4.2.2",
    "less-loader": "^8.1.1",
    "vue-template-compiler": "^2.6.14"
  }
}

 src/App.vue

@@ -1,32 +1,29 @@
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  padding: 30px;
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000033;
}

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
#app {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

 src/assets/027_日历@2x.png

 src/assets/center-top-left.png

 src/assets/center-top-right.png

 src/assets/中心背景@2x.png

 src/assets/背景色.png

 src/assets/顶部@2x.png

 src/components/HelloWorld.vue

File was deleted

 src/components/datascreen/CenterPanel.vue

New file
@@ -0,0 +1,223 @@
<template>
  <div class="center-panel">
    <!-- 中间上部数据 -->
    <div class="center-top panel-item">
      <div class="map-data">
        <div class="data-item">
          <img src="@/assets/center-top-left.png" alt="">
          <div>
            <div class="label">申请总户数(户)</div>
            <div class="value">8888</div>
          </div>

        </div>
        <div class="data-item">
          <img src="@/assets/center-top-right.png" alt="">
          <div>
            <div class="label">本月应补偿总额(万元)</div>
            <div class="value">8888 <span>环比</span><span class="value-change value-change-down">-4%</span></div>
          </div>
        </div>
        <div class="data-item">
          <img src="@/assets/center-top-right.png" alt="">
          <div>
            <div class="label">下月应补偿总额(万元)</div>
            <div class="value">8888 <span>环比</span><span class="value-change value-change-up">+4%</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间地图 -->
    <div class="center-middle panel-item">
      <div class="map-title">辖区分布</div>
      <div class="map-chart">
        <v-chart class="chart" :option="mapOption" autoresize />
      </div>
    </div>

    <!-- 中间下部数据 -->
    <div class="center-bottom panel-item">
      <div class="box-title">处理进度</div>
      <div class="progress-list">
        <div class="progress-item" v-for="(item, index) in progressList" :key="index">
          <div class="progress-info">
            <span class="label">{{ item.label }}</span>
            <span class="value">{{ item.value }}</span>
          </div>
          <div class="progress-bar">
            <div class="progress" :style="{ width: item.percentage + '%' }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CenterPanel',
  data() {
    return {
      mapOption: {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: ['65%', '80%'],
          center: ['50%', '50%'],
          label: {
            show: false
          },
          data: [
            { value: 8888, name: '已完成' },
            { value: 1112, name: '未完成' }
          ],
          itemStyle: {
            color: function (params) {
              const colorList = ['#00ffff', 'rgba(0,255,255,0.2)'];
              return colorList[params.dataIndex];
            }
          }
        }]
      },
      progressList: [
        { label: '已受理', value: '2021103000001', percentage: 90 },
        { label: '已审核', value: '2021103000002', percentage: 70 },
        { label: '已完成', value: '2021103000003', percentage: 50 }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.center-panel {
  position: absolute;
  left: 481px;
  right: 481px;
  top: 111px;
  bottom: 20px;
  display: flex;
  flex-direction: column;

  .panel-item {
    background: rgba(0, 0, 255, 0.1);
    border-radius: 10px;
  }

  .center-top {
    height: 202px;
    background: url('@/assets/中心背景@2x.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .center-middle {
    flex: 1;

    .map-title {
      font-size: 24px;
      color: #7cb9e8;
    }

    .map-chart {
      height: calc(100% - 44px);
    }
  }

  .center-bottom {
    height: 245px;

    .progress-list {
      height: calc(100% - 35px);
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .progress-item {
        .progress-info {
          display: flex;
          justify-content: space-between;

          .label {
            color: #7cb9e8;
          }

          .value {
            color: #00ffff;
          }
        }

        .progress-bar {
          width: 100%;
          height: 6px;
          background: rgba(0, 255, 255, 0.1);
          border-radius: 3px;

          .progress {
            height: 100%;
            background: linear-gradient(to right, #00ffff, #7cb9e8);
            border-radius: 3px;
            transition: width 0.3s ease;
          }
        }
      }
    }
  }

  .map-data {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;

    .data-item {
      display: flex;
      width: 268px;

      img {
        width: 94px;
        height: 80px;
      }

      .label {
        font-size: 14px;
        margin-left: 9px;
        font-size: 12px;
        margin-top: 24px;
      }

      .value {
        font-size: 24px;
        color: transparent;
        background: linear-gradient(90deg, #FAFDFF 0%, #9AE1FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        margin-left: 5px;
        span {
          font-size: 12px;
        }

        .value-change-up {
          color: #00ffff;
        }

        .value-change-down {
          color: #FEDB65;
        }
      }
    }
  }

  .box-title {
    font-size: 20px;
    color: #7cb9e8;
  }

  .chart {
    width: 100%;
    height: calc(100% - 35px);
  }
}
</style>

 src/components/datascreen/HeaderPanel.vue

New file
@@ -0,0 +1,115 @@
<template>
  <div class="header">
    <!-- 左侧天气 -->
    <div class="weather">
      <!-- <img :src="require(`@/assets/weather/${weatherInfo.icon}.png`)" alt="weather" class="weather-icon"> -->
      <span class="weather-text">{{ weatherInfo.text }}</span>
    </div>
    
    <!-- 中间标题 -->
    <div class="title">崇州市自主安置购房信息化大数据平台</div>
    
    <!-- 右侧时间 -->
    <div class="datetime">
      <img src="@/assets/027_日历@2x.png" alt="calendar" class="calendar-icon">
      <div class="time">{{ currentTime }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderPanel',
  data() {
    return {
      currentTime: '',
      weatherInfo: {
        text: '晴',
        icon: 'sunny'  // 对应天气图标文件名
      }
    };
  },
  mounted() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
    this.getWeather();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const date = String(now.getDate()).padStart(2, '0');
      const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
      const weekDay = weekDays[now.getDay()];
      this.currentTime = `${year}年${month}月${date}日 星期${weekDay}`;
    },
    getWeather() {
      // 这里可以接入实际的天气 API
      // 目前使用模拟数据
      this.weatherInfo = {
        text: '晴',
        icon: 'sunny'
      };
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 86px;
  background: url('@/assets/顶部@2x.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  position: relative;

  .weather {
    display: flex;
    margin-top: 61px;
    
    .weather-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .weather-text {
      color: #fff;
      font-size: 16px;
    }
  }

  .title {
    font-size: 38px;
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    line-height: 86px;
    left: 50%;
    transform: translateX(-50%);
  }

  .datetime {
    display: flex;
    margin-top: 61px;
    .calendar-icon {
      width: 22px;
      height: 21px;
      margin-right: 10px;
    }

    .time {
      font-size: 16px;
      color: #fff;
    }
  }
}
</style> 

 src/components/datascreen/LeftPanel.vue

New file
@@ -0,0 +1,176 @@
<template>
  <div class="left-panel">
    <!-- 参与统计 -->
    <div class="statistics-box panel-item">
      <div class="box-title">已参与自主购房安置统计</div>
      <div class="statistics-content">
        <div class="stat-item">
          <div class="number">{{ totalHouseholds }}</div>
          <div class="label">总参与户数(户)</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ totalPeople }}</div>
          <div class="label">总参与人数(人)</div>
        </div>
      </div>
    </div>
    
    <!-- 各街道参与排名 -->
    <div class="ranking-box panel-item">
      <div class="box-title">各街道/乡参与排名</div>
      <div class="ranking-list">
        <div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
          <span class="rank">{{ index + 1 }}</span>
          <span class="name">{{ item.name }}</span>
          <div class="progress-bar">
            <div class="progress" :style="{ width: item.percentage + '%' }"></div>
          </div>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
    </div>

    <!-- 安置房完成比 -->
    <div class="line-chart panel-item">
      <div class="box-title">安置房完成比</div>
      <div class="pie-chart">
        <v-chart class="chart" :option="pieOption" autoresize />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftPanel',
  data() {
    return {
      totalHouseholds: 87695,
      totalPeople: 876995,
      rankingList: [
        { name: '崇州街道', percentage: 90, value: '999户' },
        { name: '羊马乡', percentage: 85, value: '999户' },
        { name: '万家镇', percentage: 80, value: '999户' },
        { name: '崇阳街道', percentage: 75, value: '999户' },
        { name: '白头镇', percentage: 70, value: '999户' },
        { name: '金鸡乡', percentage: 65, value: '999户' },
        { name: '西江镇', percentage: 60, value: '999户' },
        { name: '观胜镇', percentage: 55, value: '999户' }
      ],
      pieOption: {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: ['65%', '80%'],
          label: {
            show: false
          },
          data: [
            { value: 34.5, name: '商业用房' },
            { value: 30, name: '住宅' },
            { value: 35.5, name: '其他' }
          ],
          itemStyle: {
            color: function(params) {
              const colorList = ['#00ffff', '#7cb9e8', 'rgba(0,255,255,0.5)'];
              return colorList[params.dataIndex];
            }
          }
        }]
      }
    };
  }
};
</script>

<style lang="less" scoped>
.left-panel {
  position: absolute;
  top: 111px;
  left: 20px;
  width: 440px;
  bottom: 20px;
  .statistics-box {
    height: 196px;
  }
  .ranking-box {
    height: 466px;
    margin-top: 21px;
  }
  .line-chart {
    height: 244px;
    margin-top: 21px;

  }

  .panel-item {
    background: rgba(0,0,255,0.1);
    border: 1px solid rgba(0,255,255,0.2);
    border-radius: 10px;
  }

  .box-title {
    font-size: 20px;
    color: #7cb9e8;
  }

  .statistics-content {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .number {
        font-size: 36px;
        color: #00ffff;
      }

      .label {
        font-size: 14px;
        color: #7cb9e8;
      }
    }
  }

  .ranking-item {
    display: flex;
    align-items: center;

    .rank {
      width: 20px;
      color: #00ffff;
    }

    .name {
      width: 80px;
    }

    .progress-bar {
      flex: 1;
      height: 6px;
      background: rgba(0,255,255,0.1);
      border-radius: 3px;

      .progress {
        height: 100%;
        background: linear-gradient(to right, #00ffff, #7cb9e8);
        border-radius: 3px;
      }
    }

    .value {
      width: 60px;
      text-align: right;
      color: #00ffff;
    }
  }

  .chart {
    width: 100%;
    height: calc(100% - 35px);
  }
}
</style> 

 src/components/datascreen/RightPanel.vue

New file
@@ -0,0 +1,165 @@
<template>
  <div class="right-panel">
    <!-- 右侧第一块 -->
    <div class="panel-item top-panel-item">
      <div class="box-title">本月进度值比</div>
      <div class="circle-progress">
        <v-chart class="chart" :option="circleOption" autoresize />
      </div>
    </div>

    <!-- 右侧第二块 -->
    <div class="panel-item middle-panel-item">
      <div class="box-title">各季度进度值统计</div>
      <div class="bar-chart">
        <v-chart class="chart" :option="barOption" autoresize />
      </div>
    </div>

    <!-- 右侧第三块 -->
    <div class="panel-item bottom-panel-item">
      <div class="box-title">安置房类型分布</div>
      <div class="pie-chart">
        <v-chart class="chart" :option="typeDistOption" autoresize />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightPanel',
  data() {
    return {
      circleOption: {
        series: [{
          type: 'pie',
          radius: ['75%', '80%'],
          label: {
            show: false
          },
          data: [
            { 
              value: 78.8, 
              name: '完成率',
              itemStyle: {
                color: '#00ffff'
              }
            },
            { 
              value: 21.2, 
              name: '剩余',
              itemStyle: {
                color: 'rgba(0,255,255,0.2)'
              }
            }
          ]
        }]
      },
      barOption: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['2023年4月', '2023年5月', '2023年7月', '2023年10月'],
          axisLine: {
            lineStyle: {
              color: '#7cb9e8'
            }
          },
          axisLabel: {
            color: '#7cb9e8'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#7cb9e8'
            }
          },
          axisLabel: {
            color: '#7cb9e8'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(124,185,232,0.1)'
            }
          }
        },
        series: [{
          data: [120, 200, 150, 80],
          type: 'bar',
          itemStyle: {
            color: '#00ffff'
          }
        }]
      },
      typeDistOption: {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: ['65%', '80%'],
          label: {
            show: false
          },
          data: [
            { value: 40, name: '商品房' },
            { value: 30, name: '安置房' },
            { value: 30, name: '其他' }
          ],
          itemStyle: {
            color: function(params) {
              const colorList = ['#00ffff', '#7cb9e8', 'rgba(0,255,255,0.5)'];
              return colorList[params.dataIndex];
            }
          }
        }]
      }
    };
  }
};
</script>

<style lang="less" scoped>
.right-panel {
  position: absolute;
  top: 111px;
  right: 20px;
  width: 440px;
  bottom: 20px;

  .panel-item {
    background: rgba(0,0,255,0.1);
    border: 1px solid rgba(0,255,255,0.2);
    border-radius: 10px;
  }

  .top-panel-item {
    height: 268px;
  }

  .middle-panel-item {
    margin-top: 21px;
    height: 303px;
  }

  .bottom-panel-item {
    margin-top: 21px;
    height: 335px;
  }

  .box-title {
    font-size: 20px;
    color: #7cb9e8;
  }

  .chart {
    width: 100%;
    height: calc(100% - 35px);
  }
}
</style> 

 src/components/datascreen/chartConfig.js

New file
@@ -0,0 +1,10 @@
import Vue from 'vue';
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';

Vue.component('v-chart', ECharts); 

 src/router/index.js

@@ -1,22 +1,14 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import DataScreen from '../views/DataScreen.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    name: 'dataScreen',
    component: DataScreen
  }
]


 src/views/AboutView.vue

File was deleted

 src/views/DataScreen.vue

New file
@@ -0,0 +1,58 @@
<template>
  <div class="data-screen" :style="screenStyle">
    <header-panel />
    <left-panel />
    <center-panel />
    <right-panel />
  </div>
</template>

<script>
import HeaderPanel from '@/components/datascreen/HeaderPanel.vue';
import LeftPanel from '@/components/datascreen/LeftPanel.vue';
import CenterPanel from '@/components/datascreen/CenterPanel.vue';
import RightPanel from '@/components/datascreen/RightPanel.vue';
import '@/components/datascreen/chartConfig.js';

export default {
  name: 'DataScreen',
  components: {
    HeaderPanel,
    LeftPanel,
    CenterPanel,
    RightPanel
  },
  data() {
    return {
      screenStyle: {
        width: '1920px',
        height: '1080px',
        transform: `scale(${window.innerWidth / 1920})`,
        transformOrigin: 'left top'
      }
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenStyle.transform = `scale(${window.innerWidth / 1920})`;
    }
  }
};
</script>

<style lang="less" scoped>
.data-screen {
  position: relative;
  background: #000033;
  color: #fff;
  overflow: hidden;
  background: url('@/assets/背景色.png') no-repeat center center;
  background-size: 100% 100%;
}
</style> 

 src/views/HomeView.vue

File was deleted