xjsaas-ui/src/views/index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-08 09:26:24
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-15 11:16:08
 * @FilePath: \znxjxt-ui\src\views\index.vue
 * @Description: 系统首页
-->
<template>
  <div class="app-container">
    <fssm-scroll :showBar="false">
      <div class="top-content">
        <div
          class="top-div"
          :class="`top-div-${index}`"
          v-for="(item, index) in topList"
          :key="`top-div-${index}`"
        >
          <div class="name">{{ item.name }}</div>
          <div class="value">
            <span>{{ item.value }}</span
            >{{ item.unit }}
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="daily-content">
          <daily-index></daily-index>
        </div>
        <div class="disease-content">
          <disease-index></disease-index>
        </div>
      </div>
      <div class="bottom-content">
        <div class="road-content">
          <road-index></road-index>
        </div>
        <div class="traffic-content">
          <traffic-index></traffic-index>
        </div>
      </div>
    </fssm-scroll>
  </div>
</template>
<script>
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
import DailyIndex from "./index-components/daily-index.vue";
import DiseaseIndex from "./index-components/disease-index.vue";
import RoadIndex from "./index-components/road-index.vue";
import TrafficIndex from "./index-components/traffic-index.vue";
import { getTotalCount } from "@/api/xj/index/index";
export default {
  name: "Index",
  components: {
    FssmScroll,
    DailyIndex,
    DiseaseIndex,
    RoadIndex,
    TrafficIndex,
  },
  data() {
    return {
      // 顶栏循环数据
      topList: [],
    };
  },
  created() {
    this.getTopData();
  },
  methods: {
    /* 获取顶栏数据 */
    getTopData() {
      getTotalCount().then(({ code, data }) => {
        if (code === 200) {
          this.topList = [
            { name: "路面病害总数", value: data.road, unit: "个" },
            { name: "交安事件病害总数 ", value: data.event, unit: "个" },
            { name: "桥隧病害总数", value: data.bridge, unit: "个" },
            { name: "绿化病害总数", value: data.green, unit: "个" },
          ];
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 1rem;
  height: calc(100vh - 5.4rem);
}

.top-content {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: url("../assets/index/top-content.png") no-repeat;
  background-size: 100%;

  .top-div {
    width: 22%;
    height: 80%;
    padding: 1.5rem;

    .name {
      font-family: "DouYu";
    }

    .value {
      line-height: 4rem;

      span {
        font-size: 1.8rem;
      }
    }
  }

  .top-div-0 {
    background: url("../assets/index/top-div-0.png") no-repeat;
    background-size: 100%;
  }

  .top-div-1 {
    background: url("../assets/index/top-div-1.png") no-repeat;
    background-size: 100%;
  }

  .top-div-2 {
    background: url("../assets/index/top-div-2.png") no-repeat;
    background-size: 100%;
  }

  .top-div-3 {
    background: url("../assets/index/top-div-3.png") no-repeat;
    background-size: 100%;
  }
}

.middle-content {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: space-between;

  .daily-content,
  .disease-content {
    width: 49.5%;
    height: calc(100% - 1rem);
    margin-top: 1rem;
  }

  .daily-content {
    background: url("../assets/index/daily-content.png") no-repeat;
    background-size: 100%;
  }

  .disease-content {
    background: url("../assets/index/disease-content.png") no-repeat;
    background-size: 107% 100%;
  }
}

.bottom-content {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: space-between;

  .road-content,
  .traffic-content {
    width: 49.5%;
    height: calc(100% - 1rem);
    margin-top: 1rem;
    background: url("../assets/index/road-content.png") no-repeat;
    background-size: 112% 100%;
  }
}
</style>