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 class="item-1">
        <CommunityMap :center="[105,34]" :zoom="4" />
      </div>
      <div class="middle-wrap">
        <div class="item-2"><User />></div>
        <div class="item-3">
          <Resident :showOperate="false" class="b1-resident" />
        </div>
        <div class="item-4">
          <CommunityType :showBar="false" class="b1-community-type" />
        </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 CommunityMap from "../components/community-map"
  import CommunityType from "../components/community-type"
  import Resident from "../components/resident"
  import User from "../components/user"

  import { huiJiaApi } from "@/api"

  export default {
    name: "B1Screen",
    components: {
      implementationTotal,
      implementationIng,
      implementationNowYear,
      Market,
      CommunityType,
      Resident,
      User,
      CommunityMap,
    },
    data() {
      return {
        state: {
          data: [], // 进行中的实施服务列表
          market_vs_month: {
            customer: {
              // 新增企业
              last_month: 0,
              this_month: 0,
            },
            followup: {
              // 新增企业
              last_month: 0,
              this_month: 0,
            },
            contact: {
              // 新增联系人
              last_month: 0,
              this_month: 0,
            },
            residence: {
              // 新增小区
              last_month: 0,
              this_month: 0,
            },
            contract: {
              // 新增合同
              last_month: 0,
              this_month: 0,
            },
            household: {
              // 新增户数
              last_month: 0,
              this_month: 1,
            },
          }, // 市场拓展数据
          summary: {
            cities: 0, // 城市总数
            customers: 0, // 企业总数
            contracts: 0, // 合同总数
            perform_times: 0, // 履约次数
            service_time: 0, // 服务时长
            residences: 0, // 小区总数
            contracted_households: 0, // 签约户数
            actual_households: 0, // 实施户数
          }, // 实施服务，汇总
          year_summary: {
            cities: 0, // 履约城市
            customers: 0, // 服务企业
            residences: 0, // 服务小区
            contracts: 0, // 合同份数
            contracted_households: "0", // 签约户数
            actual_households: "0", // 实施户数
          },
          service_ing: {
            // 实施服务，进行中
            cities: 0,
            customers: 0,
            contracts: 0,
            residences: 0,
            contracted_households: "0",
            plan: 0,
          },
          service_last_month: {
            // 实施服务，上月
            cities: 0,
            customers: 0,
            contracts: 0,
            residences: 0,
            contracted_households: 0,
            actual_households: 0,
          },
        },
        serviceData: {},
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getServiceData() {
        // 图表字段顺序
        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]
          ),
        }
        this.serviceData = result
      },
      getData() {
        huiJiaApi.getScreenData().then((res) => {
          if (res && res.data) {
            this.state = res.data.data
            this.getServiceData()
          }
        })
      },
    },
  }
</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);
    .item-1 {
      width: calc(25% - $gap-padding - $gap-padding);
      height: calc(64% - $gap-padding - $gap-padding);
    }
    .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(37% - $gap-padding);
      }
      .item-3 {
        width: calc(50% - $gap-padding);
        height: calc(63% - $gap-padding);
      }
      .item-4 {
        width: calc(50% - $gap-padding);
        height: calc(63% - $gap-padding);
      }
    }
    .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>