SaaS-DataScreen/src/views/hui-jia/b1-screen/index.vue

<template>
  <div class="b1-screen">
    <div class="logo">
      <img src="@/assets/images/hjkj1.png" class="logo-img" />
    </div>
    <div class="b1-screen-content">
      <div style="color: #fff" class="item-1">1</div>
      <div class="middle-wrap">
        <div style="color: #fff" class="item-2">2</div>
        <div style="color: #fff" class="item-3">3</div>
        <div style="color: #fff" class="item-4">4</div>
      </div>
      <div class="right-wrap">
        <Market :data="state.market_vs_month" />
        <implementationTotal :data="state.summary" />
      </div>
      <div class="bottom-wrap">
        <implementationIng :data="state.data" />
        <implementationNowYear :data="serviceData" />
      </div>
    </div>
  </div>
</template>

<script>
  import implementationTotal from "../components/implementary/total.vue"
  import implementationIng from "../components/implementary/ing.vue"
  import implementationNowYear from "../components/implementary/now-year.vue"
  import Market from "../components/market.vue"

  import { huiJiaApi } from "@/api"

  export default {
    name: "B1Screen",
    components: {
      implementationTotal,
      implementationIng,
      implementationNowYear,
      Market,
    },
    data() {
      return {
        state: {
          data: [
          ], // 进行中的实施服务列表
          market_vs_month: {
            customer: {
              // 新增企业
              last_month: 3,
              this_month: 2,
            },
            followup: {
              // 新增企业
              last_month: 0,
              this_month: 0,
            },
            contact: {
              // 新增联系人
              last_month: 1,
              this_month: 0,
            },
            residence: {
              // 新增小区
              last_month: 3,
              this_month: 4,
            },
            contract: {
              // 新增合同
              last_month: 5,
              this_month: 3,
            },
            household: {
              // 新增户数
              last_month: 0,
              this_month: 1,
            },
          }, // 市场拓展数据
          summary: {
            cities: 35, // 城市总数
            customers: 270, // 企业总数
            contracts: 349, // 合同总数
            perform_times: 815, // 履约次数
            service_time: 163990350, // 服务时长
            residences: 806, // 小区总数
            contracted_households: 473652, // 签约户数
            actual_households: 459667, // 实施户数
          }, // 实施服务，汇总
          year_summary: {
            cities: 14, // 履约城市
            customers: 35, // 服务企业
            residences: 71, // 服务小区
            contracts: 44, // 合同份数
            contracted_households: "24107", // 签约户数
            actual_households: "22808", // 实施户数
          },
          service_ing: {
            // 实施服务，进行中
            cities: 7,
            customers: 11,
            contracts: 11,
            residences: 9,
            contracted_households: "3040",
            plan: 0,
          },
          service_last_month: {
            // 实施服务，上月
            cities: 0,
            customers: 0,
            contracts: 0,
            residences: 0,
            contracted_households: 0,
            actual_households: 0,
          },
        },
        implementationData: {
          ing: {},
          nowYear: {},
          total: {},
        },
      }
    },
    computed: {
      serviceData() {
        // 图表字段顺序
        const properties = [
          "contracted_households",
          "contracts",
          "residences",
          "customers",
          "cities",
        ]
        const result = {
          year_summary: properties.map((key) => this.state.year_summary[key]),
          service_ing: properties.map((key) => this.state.service_ing[key]),
          service_last_month: properties.map(
            (key) => this.state.service_last_month[key]
          )
        }

        return result
      },
    },
    mounted() {
      huiJiaApi.getImplementaryData().then((res) => {
        this.implementationData = res.data.data
      })
    },
    methods: {
      getData() {
        huiJiaApi.getScreenData().then((res) => {
          if (res && res.data) {
            console.log("大屏数据----", res)
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  $gap-padding: halfW(8);
  .b1-screen {
    height: 100vh;
    width: 100vw;
    background: var(--page-bg);
    .logo {
      text-align: right;
      padding: halfH(10) 0;
      .logo-img {
        height: halfH(64);
      }
    }
  }
  .b1-screen-content {
    height: calc(100% - halfH(64) - halfH(28));
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: halfW(16);
    // padding: 0px halfW(16) halfW(16);
    .item-1 {
      width: calc(25% - $gap-padding - $gap-padding);
      height: calc(64% - $gap-padding - $gap-padding);
      background: #f5f5f5;
    }
    .middle-wrap {
      width: calc(
        50% - $gap-padding - $gap-padding - $gap-padding - $gap-padding
      );
      height: calc(64% - $gap-padding - $gap-padding);
      display: flex;
      flex-wrap: wrap;
      gap: halfW(16);
      justify-content: flex-start;
      align-items: center;
      .item-2 {
        flex: 0 0 100%;
        width: 100%;
        height: calc(50% - $gap-padding);
        background: #f5f5f5;
      }
      .item-3 {
        background: green;
        width: calc(50% - $gap-padding);
        height: calc(50% - $gap-padding);
      }
      .item-4 {
        width: calc(50% - $gap-padding);
        height: calc(50% - $gap-padding);
        background: green;
      }
    }
    .right-wrap {
      display: flex;
      flex-direction: column;
      width: calc(25% - $gap-padding - $gap-padding);
      height: calc(64% - $gap-padding);
      gap: calc($gap-padding * 2);
      .total-container {
        height: calc(50% - $gap-padding);
      }
      .market-container {
        height: calc(50% - $gap-padding);
      }
    }
    .bottom-wrap {
      display: flex;
      justify-content: space-around;
      gap: halfW(16);
      width: calc(
        100% - $gap-padding - $gap-padding - $gap-padding - $gap-padding
      );
      height: calc(36% - $gap-padding);
      .now-year-container {
        width: 50%;
      }
      .implementing-container {
        width: 50%;
      }
    }
  }
</style>