lg_frontend/pages/wuzuzhi/paifang.vue

<template>
  <new-bg>
    <flex-col>
      <system-title show-back/>
      <Map></Map>
      <ModuleContent padding="0px 50px 20px" class="event-none" none-event>
        <web2-title>无组织排放</web2-title>
        <a-row :gutter="16" style="height: calc(100% - 62px);margin-top: 16px;">
          <a-col :span="5" 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 :border="false"  height="30%" padding="0">
                <custom-desc2 default-value="0" :data="tongji" :columns="descColumns"></custom-desc2>
              </ModuleContent2>
              <web3-title>报警类型数据分析</web3-title>
              <Split height="10"></Split>
              <ModuleContent2 :border="false" padding="0">
              </ModuleContent2>
            </div>

          </a-col>
          <a-col span="14">
            <butgroup :bg="false">
              <cus-button5>干雾点位置</cus-button5>
              <cus-button5>TSP点位</cus-button5>
              <cus-button5>微站点位</cus-button5>
              <cus-button5>雾炮点位</cus-button5>
              <cus-button5>雾桩点位</cus-button5>
              <cus-button5>洗车机点位</cus-button5>
            </butgroup>
          </a-col>
          <a-col :span="5" class="event-auto" style="height: 100%;">
            <FlexCol>
              <ModuleContent2  :border="false" padding="0">

              </ModuleContent2>
              <web3-title>项目介绍</web3-title>
              <Split height="10"></Split>
              <ModuleContent2  :border="false" padding="0">
              </ModuleContent2>

            </FlexCol>
          </a-col>
        </a-row>

        <butgroup class="bottom-btn">
          <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>
      </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";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import CustomDesc2 from "../../components/smallCommon/CusDesc2.vue";
import CusButton3 from "../../components/smallCommon/CusButton3.vue";
import CusButton5 from "../../components/smallCommon/CusButton5.vue";

export default {
  name: "paifang",
  components: {
    CusButton5,
    CusButton3,
    CustomDesc2,
    Web2Title,
    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>