ZZJ
2022-01-26 1e09a7a01a6c1888e1a2a832eb007fb8c2b653a0
src/pages/internetEquipment/views/helemetEquipment.vue
@@ -3,142 +3,48 @@
    <helemetHead />
    <mapIndex />
    <div class="footer">
      <realTimeModule :warnArr="warnArr"/>
      <elecModule :warnArr="warnArr"/>
      <historyModule :warnArr="warnArr"/>
      <realTimeModule :boundArr="boundArr" />
      <elecModule :lowBatteryArr="lowBatteryArr" />
      <historyModule :warnArr="warnArr" />
    </div>
  </div>
</template>
<script>
import helemetHead from '@/pages/internetEquipment/components/helemetHead'
import mapIndex from '@/pages/internetEquipment/module/mapIndex'
import realTimeModule from '@/pages/internetEquipment/module/realTimeModule'
import elecModule from '@/pages/internetEquipment/module/elecModule'
import historyModule from '@/pages/internetEquipment/module/historyModule'
import helemetHead from "@/pages/internetEquipment/components/helemetHead";
import mapIndex from "@/pages/internetEquipment/module/mapIndex";
import realTimeModule from "@/pages/internetEquipment/module/realTimeModule";
import elecModule from "@/pages/internetEquipment/module/elecModule";
import historyModule from "@/pages/internetEquipment/module/historyModule";
import { lowBattery, historyWarn, outBound } from "@/api/helemt";
export default {
  data (){
  async created() {
    const res = await lowBattery();
    this.lowBatteryArr = res.data.items;
    const res2 = await historyWarn();
    console.log(res2.data);
    this.warnArr = res2.data.items;
    const res3 = await outBound();
    this.boundArr = res3.data.items;
  },
  data() {
    return {
      warnArr:[{
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },{
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 10.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      },
      {
        code:"A100640819DA3B",
        image:"/images/settings/background.png",
        location:"朝阳科技园",
        time:"2021-09-21 12:23",
        longitude:"23.2344",
        latitude:"45.4455",
        warn:"未在电子围栏区域",
        processed:false,
        elec: 50.2
      }]
    }
      boundArr: [],
      warnArr: [],
      lowBatteryArr: [],
    };
  },
  components: {
    helemetHead,
    mapIndex,
    realTimeModule,
    elecModule,
    historyModule
  }
}
    historyModule,
  },
};
</script>
<style scoped lang="scss">
@@ -147,20 +53,39 @@
}
.helmet-equipment {
    padding: 20px;
    width: 100%;
    height: 100%;
    background: #FBFCFE;
  position: relative;
  padding: 20px;
  width: 100%;
  height: 100%;
  background: #fbfcfe;
    .map-index {
      margin: 20px 0;
  .map-index {
    margin: 20px 0;
  }
  .footer {
    position: absolute;
    top: 540px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: start;
    color: #4f4f4f;
    .real-time-module {
      flex: 2.35;
      height: 100%;
    }
    .elec-module {
      flex: 1;
      margin: 0 20px;
      height: 100%;
    }
    .footer {
      height: 292px;
      display: flex;
      justify-content: space-between;
      color: #4F4F4F;
    .history-module {
      flex: 1;
      height: 100%;
    }
  }
}
</style>