修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/internetEquipment/components/helemetHead.vue

@@ -1,54 +1,67 @@
<template>
  <div class="helemetHead">
      <headCard v-for="(item,index) in cardData"
    <headCard
      v-for="(item, index) in cardData"
      :key="index"
      :number="item.number"
      :info="item.info"
      :icon="item.icon"
      :color="item.color"
      />
      :src="cardImage[index]"
    />

      <helemetEchart />

    <helemetEchart />
  </div>
</template>

<script>
import headCard from '@/pages/internetEquipment/components/headCard'
import helemetEchart from '@/pages/internetEquipment/components/helemetEchart'
import headCard from "@/pages/internetEquipment/components/headCard";
import helemetEchart from "@/pages/internetEquipment/components/helemetEchart";
import { getBanner } from "@/api/helemt";

export default {
    data (){
        return {
            cardData: [
                {number:233,info:"设备总量",icon:"\ue743",color:"#4E94FF"},
                {number:34,info:"本月新增",icon:"\ue743",color:"#FFAA44"},
                {number:45,info:"今日预警",icon:"\ue743",color:"#FF6464"},
            ]
        }
    },
    components :{
        headCard,
        helemetEchart
    }

}
  async created() {
    const res = await getBanner();
    this.cardData[0].number = res.data.deviceAmount;
    this.cardData[1].number = res.data.newDevice;
    this.cardData[2].number = res.data.todayAdded;
  },
  data() {
    return {
      cardData: [
        { number: 0, info: "设备总量", color: "#4E94FF" },
        { number: 0, info: "本月新增", color: "#FFAA44" },
        { number: 0, info: "今日预警", color: "#FF6464" },
      ],
      cardImage: [
        "/images/InternetDevice/Group 441.png",
        "/images/InternetDevice/Group 367.png",
        "/images/InternetDevice/Group 368.png",
      ],
    };
  },
  components: {
    headCard,
    helemetEchart,
  },
};
</script>

<style scoped lang="scss">
.helemetHead {
    display: flex;
  display: flex;

    .head-card {
        margin-right: 10px;
    }
  .head-card {
    flex: 1;
    margin-right: 10px;
  }

    .helemet-echart {
        margin-left: 10px;
        width: 570px;
        height: 90px;
        box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
        border-radius: 15px;
    }
  .helemet-echart {
    flex: 4;
    margin-left: 10px;
    width: 570px;
    height: 90px;
    box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
    border-radius: 15px;
  }
}
</style>