<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 15:18:03
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-25 16:27:10
 * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
 * @Description: 道路资产大屏-附属设施分布
-->

<template>
  <div class="content">
    <div class="ancillary-top"><span>{{sum}}</span></div>
    <div class="ancillary-bottom">
      <div
        :class="`ancillary-bottom-${index}`"
        v-for="(item, index) in ancillaryList"
        :key="`ancillary-${index}`"
      >
        <div>{{ item.label }}</div>
        <div>
          <span>{{ item.value }}</span
          ><a>个</a>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { ancillaryList, ancillaryCount } from "@/api/xj/screen/road-screen";
export default {
  name: "AncillaryFacilities",
  data() {
    return {
      // 附属设施总数
      sum: 0,
      // 附属设施分布数据
      ancillaryList: [],
    };
  },
  created() {
    this.getAncillaryList();
    this.getSum();
  },
  methods: {
    /* 获取附属设施分总数 */
    getSum() {
      ancillaryCount().then(({ code, data }) => {
        if (code === 200) {
          this.sum = data.count;
        }
      });
    },

    /* 获取附属设施分布数据 */
    getAncillaryList() {
      ancillaryList().then(({ code, data }) => {
        if (code === 200) {
          this.ancillaryList = data;
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  color: #ffffff;

  .ancillary-top {
    height: 9rem;
    width: 100%;
    display: flex;
    justify-content: center;
    line-height: 8rem;
    padding-right: 2rem;
    background-image: url("../../../assets/screen/road/ancillary-top.png");
    background-repeat: no-repeat;
    background-size: 90% 80%;
    background-position: 50%;

    span {
      font-size: 1.5rem;
      font-weight: 800;
      font-family: "DouYu";
      background: linear-gradient(
        to bottom,
        #ffffff,
        #2773d0
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
    }
  }

  .ancillary-bottom {
    height: calc(100% - 9rem);
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    > div {
      width: 45%;
      height: 22%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding-left: 3.5rem;
      font-size: 0.8rem;

      span {
        font-size: 0.8rem;
        font-weight: 800;
        font-family: "DouYu";
      }

      a {
        font-size: 0.7rem;
        color: #aac6c7;
        padding-left: 0.5rem;
      }
    }

    .ancillary-bottom-0 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-0.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #ac8018;
      }
    }

    .ancillary-bottom-1 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #ac8018;
      }
    }

    .ancillary-bottom-2 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #08afa3;
      }
    }

    .ancillary-bottom-3 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-3.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #08afa3;
      }
    }

    .ancillary-bottom-4 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-4.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #3f84e3;
      }
    }

    .ancillary-bottom-5 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-5.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #3f84e3;
      }
    }

    .ancillary-bottom-6 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-6.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #ac8018;
      }
    }

    .ancillary-bottom-7 {
      background-image: url("../../../assets/screen/road/ancillary-bottom-7.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 50%;

      span {
        color: #ac8018;
      }
    }
  }
}
</style>
  