<template> <div class="home" id="home"> <Row :gutter="14"> <Col span="6"> <div class="row-div1"> <Flex direction="row" style=" 100%;height: 100%"> <FlexItem flex="1"> <Flex direction="column" style=" 100%;height: 100%"> <FlexItem flex="1"> <div class="five-font center-content">项目总数</div> </FlexItem> <FlexItem flex="1"> <div class="center-content"> <img src="@/assets/images/file.png" width="40"> </div> </FlexItem> </Flex> </FlexItem> <FlexItem flex="1"> <div class="first-font num-content">{{projectCount}}</div> </FlexItem> </Flex> </div> </Col> <Col span="6"> <div class="row-div1"> <Flex direction="row" style=" 100%;height: 100%"> <FlexItem flex="1"> <Flex direction="column" style=" 100%;height: 100%"> <FlexItem flex="1"> <div class="five-font center-content">设备总数</div> </FlexItem> <FlexItem flex="1"> <div class="center-content"> <img src="@/assets/images/icon/device.png" width="38" height="34"> </div> </FlexItem> </Flex> </FlexItem> <FlexItem flex="1"> <div class="first-font num-content">{{configCount}}</div> </FlexItem> </Flex> </div> </Col> <Col span="6"> <div class="row-div1"> <Flex direction="row" style=" 100%;height: 100%"> <FlexItem flex="1"> <Flex direction="column" style=" 100%;height: 100%"> <FlexItem flex="1"> <div class="five-font center-content">监测点位</div> </FlexItem> <FlexItem flex="1"> <div class="center-content"> <img src="@/assets/images/icon/zuobiao.png" width="40"> </div> </FlexItem> </Flex> </FlexItem> <FlexItem flex="1"> <div class="first-font num-content">{{deviceCount}}</div> </FlexItem> </Flex> </div> </Col> <Col span="6"> <div class="row-div1"> <Flex direction="row" style=" 100%;height: 100%"> <FlexItem flex="1"> <Flex direction="column" style=" 100%;height: 100%"> <FlexItem flex="1"> <div class="five-font center-content">报警总数</div> </FlexItem> <FlexItem flex="1"> <div class="center-content"> <img src="@/assets/images/icon/alarm.png" width="40"> </div> </FlexItem> </Flex> </FlexItem> <FlexItem flex="1"> <div class="first-font num-content">{{alarmCount}}</div> </FlexItem> </Flex> </div> </Col> </Row> <Row :gutter="14"> <Col span="7"> <div class="row-div2" :style="{'height':logDivHeight/2+'px'}"> <Flex direction="column" style="height: 100%"> <FlexItem> <div class="item-title">故障统计<span></span></div> </FlexItem> <FlexItem flex="1"> <FaultStatistics></FaultStatistics> </FlexItem> </Flex> </div> </Col> <Col span="10"> <div class="row-div2" :style="{'height':logDivHeight/2+'px'}"> <Flex direction="column" style="height: 100%"> <FlexItem> <div class="item-title">采集数据<span></span></div> </FlexItem> <FlexItem flex="1"> <Collection></Collection> </FlexItem> </Flex> </div> </Col> <Col span="7"> <div class="row-div2" :style="{'height':logDivHeight/2+'px'}"> <Flex direction="column" style="height: 100%"> <FlexItem> <div class="item-title">诊断报告<span></span></div> </FlexItem> <FlexItem flex="1"> <DiagnosticReport></DiagnosticReport> </FlexItem> </Flex> </div> </Col> </Row> <Row :gutter="14"> <Col span="12"> <div class="row-div2" :style="{'height':logDivHeight/2+'px'}"> <Flex direction="column" style="height: 100%"> <FlexItem> <div class="item-title">实时报警<span></span> </div> </FlexItem> <FlexItem flex="1"> <AlarmRealTime></AlarmRealTime> </FlexItem> </Flex> </div> </Col> <Col span="12"> <div class="row-div2" :style="{'height':logDivHeight/2+'px'}"> <Flex direction="column" style="height: 100%"> <FlexItem> <div class="item-title">运行日志<span></span></div> </FlexItem> <FlexItem flex="1"> <RunLog></RunLog> </FlexItem> </Flex> </div> </Col> </Row> </div> </template> <script> import Flex from "../../components/ios/Flex"; import FlexItem from "../../components/ios/FlexItem"; import FaultStatistics from "./home-child/FaultStatistics"; import DaiDing from "./home-child/DaiDing"; import DiagnosticReport from "./home-child/DiagnosticReport"; import AlarmRealTime from "./home-child/AlarmRealTime"; import RunLog from "./home-child/RunLog"; import Collection from "./home-child/Collection"; export default { name: "HomeThird", components: {Collection, RunLog, AlarmRealTime, DiagnosticReport, DaiDing, FaultStatistics, FlexItem, Flex}, mounted(){ this.logDivHeight = document.getElementById("home").offsetHeight-182; let _this = this; window.addEventListener('resize', () => { _this.logDivHeight = document.getElementById("home").offsetHeight-182; }); }, data(){ return{ logDivHeight: 0, projectCount:0, configCount: 0, deviceCount: 0, alarmCount: 0, } }, created() { this.handleSearchCount() this.getInfo() }, methods: {//查询个人信息 getInfo(){ this.$http.get("/api/self/getInfo").then(res=>{ let body = res.data; if(body.code===200){ this.avatar = body.data.avatar this.realName = body.data.name window.sessionStorage.setItem("avatar",body.data.avatar) window.sessionStorage.setItem("realName",body.data.name) } }) }, //查询项目总数，设备总数，检测位点，报警总数 handleSearchCount(){ this.$http.get("/api/smart/getIndexDataNew").then(res=>{ let body = res.data; if(body.code===200){ this.projectCount = body.data.projectCount; this.configCount = body.data.configurationCount; this.deviceCount = body.data.sensorCount; this.alarmCount = body.data.alarmCount; } }) } } } </script> <style scoped lang="less"> @import '../../assets/css/index.less'; .home{ height: 100%; width: 100%; padding: 14px 14px; background-color: @third-background-color; .row-div1{ border-radius: 4px; height: 15% ; /*height: 126px;*/ background-color: @primary-background-color; } .row-div2{ margin-top: 14px; border-radius: 4px; background-color: @primary-background-color; } .row-div3{ margin-top: 14px; border-radius: 4px; background-color: @primary-background-color; } .center-content { height: 50px; line-height: 50px; width: 100%; overflow: hidden; text-align: center; } .num-content { height: 120px; line-height: 125px; width: 100%; overflow: hidden; text-align: center; font-size: 40px; } .item-title { width: 100%; font-size: 16px; font-weight: 500; color: #e8eaec; padding: 8px 15px 7px 15px; span { float: right; cursor: pointer; } } } </style>
要注意加高度的时候呀，给col里面的div加高度才管用。并且也需要给div加背景颜色才能显示出来gutter，不能只给row或者col加背景。