iot-front-ui/src/components/life/healthyHome/lifeHealthyHome.vue

<script>
import Query from "@/components/common/query.vue";
import Card from "@/components/common/card.vue";
import CoreData from "@/components/common/coreData.vue";
import LifeHealthyHomeChart from "@/components/life/healthyHome/components/lifeHealthyHomeChart.vue";
import LifeHealthyHomeMonitor from "@/components/life/healthyHome/components/lifeHealthyHomeMonitor.vue";
import apiLifeHealthyHome from "@/api/life/apiLifeHealthyHome";

export default {
  data() {
    let range = this.$util.dateUtil.getNearlyMonthRange();
    return {
      queryData: {
        company: '0',
        dept: '0',
        timeRange: range
      },
      coreData: [
        {
          title: '累计检查人数(人/月)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '健康人数(人/月)',
          num: 0,
          historyDesc: '同比',
          historyNum: 0
        },
        {
          title: '亚健康人数(人/月)',
          num: 0,
          unit: '元',
          historyDesc: '同比',
          historyNum: 0
        },
        {
          type: 1,
          isHighLight: false,
          title: '最多患病问题',
          content: ''
        },
        {
          type: 1,
          isHighLight: false,
          title: '值得关注',
          showStar: true,
          content: ''
        },
      ]
    }
  },
  components: {
    Query,
    Card,
    CoreData,
    LifeHealthyHomeChart,
    LifeHealthyHomeMonitor,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000)
    },
    reset() {
      console.log('reset')
    },
    search(data) {
      this.$util.asyncPromise(
          this.getCoreData(),
          this.$refs.LifeHealthyHomeChart.getData(),
      )
    },
    getCoreData() {
      return apiLifeHealthyHome.getCoreData(this.queryData).then(res=>{
        this.coreData[0].num = res.list[0].value
        this.coreData[0].historyNum = res.list[0].compare
        this.coreData[1].num = res.list[1].value
        this.coreData[1].historyNum = res.list[1].compare
        this.coreData[2].num = res.list[2].value
        this.coreData[2].historyNum = res.list[2].compare
        this.coreData[3].content = res.list[3].value
        this.coreData[4].content = res.worthAttention
      })
    }
  }
}
</script>

<template>
  <div class="lifeHealthyHome">
   <div class="page-query-core">
     <a-row>
       <a-col>
         <div class="lifeHealthyHome-query">
           <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset"
                  :search="search"></Query>
         </div>
       </a-col>
       <a-col>
         <div class="lifeHealthyHome-core">
           <Card title="核心指标">
             <CoreData :data-list="coreData"></CoreData>
           </Card>
         </div>
       </a-col>
     </a-row>
   </div>
    <a-row >
      <a-col :span="18">
        <div class="lifeHealthyHome-left">
          <div class="lifeHealthyHome-detail ioc-card-content">
            <Card title="小屋分析">
              <LifeHealthyHomeChart ref="LifeHealthyHomeChart" :query-data="queryData" :height="450"></LifeHealthyHomeChart>
            </Card>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="lifeHealthyHome-right">
          <div class="lifeHealthyHome-top ioc-card-content">
            <Card title="环境监测">
              <a-row :gutter="[12,18]" style="padding: 12px">
                <a-col style="color: #B3B3B3">
                  <div style="width: 50%;display: inline-block;text-align: center">
                    <span style="background-color: #73e6ac;display: inline-block;width: 14px;height: 14px;"></span>
                    <span style="display: inline-block;vertical-align: text-bottom;margin-left: 12px">室内</span>
                  </div>
                  <div style="width: 50%;display: inline-block;text-align: center">
                    <span style="background-color: #80d4ff;display: inline-block;width: 14px;height: 14px"></span>
                    <span style="display: inline-block;vertical-align: text-bottom;margin-left: 12px">室外</span>
                  </div>
                </a-col>
                <a-col :span="12">
                  <LifeHealthyHomeMonitor title="PM2.5" :value="'75'" icon="life/pm_green.png"></LifeHealthyHomeMonitor>
                </a-col>
                <a-col :span="12">
                  <LifeHealthyHomeMonitor title="PM2.5" :value="'75'" icon="life/pm_blue.png"></LifeHealthyHomeMonitor>
                </a-col>
                <a-col :span="12">
                  <LifeHealthyHomeMonitor title="湿 度" :value="'75'" icon="life/humidity_green.png"></LifeHealthyHomeMonitor>
                </a-col>
                <a-col :span="12">
                  <LifeHealthyHomeMonitor title="湿 度" :value="'75'" icon="life/humidity_blue.png"></LifeHealthyHomeMonitor>
                </a-col>
                <a-col :span="12">
                  <LifeHealthyHomeMonitor title="温 度" :value="'75'" icon="life/temperature_green.png"></LifeHealthyHomeMonitor>
                </a-col>
                <a-col :span="12">
                  <LifeHealthyHomeMonitor title="温 度" :value="'75'" icon="life/temperature_blue.png"></LifeHealthyHomeMonitor>
                </a-col>
              </a-row>
            </Card>
          </div>
        </div>
      </a-col>


    </a-row>

  </div>
</template>

<style lang="less" scoped>
.lifeHealthyHome {
  width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: top;
  .lifeHealthyHome-query {
    width: 100%;
  }
  .lifeHealthyHome-core {
    width: 100%;
  }
  .lifeHealthyHome-left {
    margin-top: 12px;
    margin-right: 6px;
    height: 490px;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 4px;
    > div {
      border-radius: 4px;
    }
  }
  .lifeHealthyHome-right {
    margin-top: 12px;
    margin-left: 6px;
    height: 490px;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 4px;
    > div {
      border-radius: 4px;
    }
  }
}
</style>