lg_frontend/pages/wuzuzhi/paifang.vue

<template>
  <new-bg>
    <flex-col>
      <system-title show-back custom-title="无组织排放" :btns="btns"/>
      <ModuleContent padding="0px 20px 20px">

        <a-row :gutter="16" style="height: 100%;margin-top: 16px;">
          <a-col :span="4" style="height: 100%;">
            <div class="con" style="height: 100%;display: flex;flex-direction: column; width: 100%;">

              <web3-title>设备数量统计</web3-title>
              <Split height="10"></Split>
              <ModuleContent2  height="30%">
                <cus-desc :data="tongji" :columns="descColumns"></cus-desc>
              </ModuleContent2>
              <web3-title>报警类型数据分析</web3-title>
              <Split height="10"></Split>
              <ModuleContent2 >
              </ModuleContent2>
            </div>

          </a-col>
          <a-col :span="16" style="height: 100%;">
            <div style="height: 100%;position: relative">
            <div class="map-cv" style="height: calc(100% - 80px);position: relative">
              <Map></Map>
            </div>
            <butgroup>
              <cus-button>
                <nuxt-link to="/wuzuzhi/xichejiguanli">洗车机管理</nuxt-link>
              </cus-button>
              <cus-button>
                <nuxt-link to="/wuzuzhi/huanjingzhili">环境治理</nuxt-link>
              </cus-button>
              <cus-button>
                <nuxt-link to="/wuzuzhi/huanweixunhang">环卫巡航</nuxt-link>
              </cus-button>
            </butgroup>
            </div>
          </a-col>
          <a-col :span="4">
            <a-card title="国Ⅵ输车辆" size="small">
              <p>card content</p>
            </a-card>
          </a-col>
        </a-row>
      </ModuleContent>
      >
    </flex-col>
  </new-bg>
</template>

<script>
import Map from "../../components/Map.vue";
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
import NewBg from "../../components/NewBg.vue";
import FlexCol from "../../components/FlexCol.vue";
import ModuleContent from "../../components/ModuleContent.vue";
import Butgroup from "../../components/smallCommon/butgroup.vue";
import CusButton from "../../components/smallCommon/CusButton.vue";
import Web3Title from "../../components/smallCommon/Web3Title.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import Split from "../../components/smallCommon/Split.vue";
import CusDesc from "../../components/smallCommon/CusDesc.vue";

export default {
  name: "paifang",
  components: {
    CusDesc,
    Split,
    ModuleContent2,
    Web3Title,
    CusButton, Butgroup,
    ModuleContent,
    FlexCol, NewBg, SystemTitle,
    Map
  },
  data () {
    return {
      tongji: {},
      descColumns: [
        { title: '设备数量', key: 'total' },
        { title: '运行设备数量', key: 'total' },
        { title: '设备异常数量', key: 'total' },
        { title: '关闭设备数量', key: 'total' },
      ]
    }
  }
}
</script>


<style scoped lang="less">

</style>