lg_frontend/pages/youzuzhi/paifang.vue

<template>
  <new-bg>
    <flex-col>
      <system-title @click="changeTab" show-back custom-title="有组织排放" :btns="btns"/>

      <ModuleContent padding="0px 20px 20px">
        <div style="height: 144px;width: 100%;">
          <ModuleContent2 bg bg-str :border="false">
            <butgroup2 style="height: 100%;">
              <ModuleContent2 bg bg-color border>
                <miaoshu title="全厂有组织排放源" :value="count.comeCount" color="rgba(42, 207, 255, 1)"></miaoshu>
              </ModuleContent2>

              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
                <miaoshu title="全厂重要排放源" :value="count.outCount" color="rgba(255, 171, 87, 1)"></miaoshu>
              </ModuleContent2>

              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
                <miaoshu title="当前区域排放源" :value="count.inCount" color="rgba(122, 175, 255, 1)"></miaoshu>
              </ModuleContent2>

              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
                <miaoshu title="当前区域其中重要排放源" :value="count.addCount" color="rgba(76, 243, 129, 1)"></miaoshu>
              </ModuleContent2>
            </butgroup2>
          </ModuleContent2>
        </div>

        <div class="paifang" style="height: calc(100% - 144px);overflow: hidden">
          <a-row style="height: 100%;margin-top: 16px;" :gutter="16">
            <a-col :span="3" style="height: 100%;">
              <web3-title>工序步骤</web3-title>
              <div class="gongxu-box">
                <div class="gongxu-item" v-for="item in gongxu" :key="item.id">
                  {{ item.name }}
                </div>
              </div>
            </a-col>
            <a-col :span="17" 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="/youzuzhi/paifangtongji">环保排放统计</nuxt-link>
                  </cus-button>
                  <!--            <cus-button>
                                <nuxt-link to="/cleanTravel/bangcheng">磅秤台账</nuxt-link>
                                </cus-button>
                              <cus-button>门禁监控</cus-button>-->
                </butgroup>
              </div>
            </a-col>
            <a-col :span="4" style="height: 100%;">
              <web3-title>排放源清单</web3-title>
              <a-table :columns="columns" :data-source="data"/>
            </a-col>
          </a-row>
        </div>
      </ModuleContent>
    </flex-col>
  </new-bg>
</template>

<script>
import Map from "../../components/Map.vue";
import NewBg from "../../components/NewBg.vue";
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
import FlexCol from "../../components/FlexCol.vue";
import ModuleContent from "../../components/ModuleContent.vue";
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
import Miaoshu from "../../components/smallCommon/miaoshu.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import Web3Title from "../../components/smallCommon/Web3Title.vue";
import CusButton from "../../components/smallCommon/CusButton.vue";
import Butgroup from "../../components/smallCommon/butgroup.vue";

export default {
  name: "paifang",
  components: {
    Butgroup, CusButton,
    Web3Title,
    ModuleContent2, Miaoshu, Butgroup2,
    ModuleContent,
    FlexCol,
    SystemTitle,
    NewBg,
    Map
  },
  data() {
    return {
      btns: [
        { title: 'VOC', key: '1' },
        { title: 'CEMS', key: '2' },
      ],
      count: {},
      data: [],
      gongxu: [],
      columns: [
        {title: '名词', key: 'name'},
        {title: 'NO', key: 'NO'},
        {title: 'SO2', key: 'SO2'},
        {title: 'TSP', key: 'TSP'},
      ]
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    changeTab (tab) {
      this.getData(tab)
    },
    getData (deviceType) {
      this.$http.get('/api/Organized/listanddevice', {
        organizedType: 1,
        deviceType: deviceType
      }).then(({data}) => {
        this.gongxu = data || []
      })
    }
  }
}
</script>

<style scoped lang="less">
.mt16 {
  margin-top: 16px;
}
.gongxu-box {
  height: calc(100% - 48px);
  overflow-y: auto;
  .gongxu-item {
    cursor: pointer;
    padding: 16px 0;
    color: #fff;
    font-size: 18px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.54);
  }
}
</style>