lg_frontend/pages/youzuzhi/paifang.vue

<template>
  <new-bg>
    <flex-col>
      <system-title @click="changeTab" show-back/>
      <Map></Map>
      <ModuleContent padding="0px 50px 20px" class="event-none" none-event>
        <web2-title>有组织排放</web2-title>
        <a-row style="margin-top: 16px;" :gutter="16" class="event-none">
          <a-col :span="17">
            <div style="height: 112px;width: 100%;" class="event-auto">
              <ModuleContent2  :border="false" padding="0">
                <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 class="gongxu-wrapper event-auto">
                <web3-title>工序步骤</web3-title>
                <div class="gongxu-box">
                  <div class="gongxu-item" v-for="item in gongxu" :key="item.id">
                    {{ item.name }}
                  </div>
                </div>
              </div>

            </div>
          </a-col>
          <a-col :span="7">
            <faguang class="custom-tab">
              <a-tabs default-active-key="1" class="custom-tab">
                <a-tab-pane key="1" tab="VOC">
                  <web3-title>排放源清单</web3-title>
                  <a-table :columns="columns" :data-source="data"/>
                </a-tab-pane>
                <a-tab-pane key="2" tab="CEMS" force-render>
                  <web3-title>排放源清单</web3-title>
                  <a-table :columns="columns" :data-source="data"/>
                </a-tab-pane>
              </a-tabs>
            </faguang>
          </a-col>
        </a-row>

        <butgroup class="bottom-btn">
          <cus-button>
            <nuxt-link to="/youzuzhi/paifangtongji">环保排放统计</nuxt-link>
          </cus-button>
        </butgroup>
      </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";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import Faguang from "../../components/smallCommon/Faguang.vue";

export default {
  name: "paifang",
  components: {
    Faguang,
    Web2Title,
    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 ({ key }) {
      this.getData(key)
    },
    getData (deviceType) {
      this.$get('/api/Organized/listanddevice', {
        organizedType: 1,
        deviceType: deviceType
      }).then(({data}) => {
        this.gongxu = data || []
      })
    }
  }
}
</script>

<style scoped lang="less">
.mt16 {
  margin-top: 16px;
}
.gongxu-wrapper {
  width: 132px;
  max-height: 500px;
  margin-top: 16px;
}
.gongxu-box {
  height: calc(100% - 48px);
  overflow-y: auto;
  .gongxu-item {
    cursor: pointer;
    color: #fff;
    border-bottom: 1px solid rgba(238, 238, 238, 0.54);
    width: 132px;
    height: 48px;
    opacity: 1;
    background: rgba(0, 128, 247, 0.5);
    box-sizing: border-box;
    margin-top: 16px;
    line-height: 48px;
    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: top;
    &.selected, &:hover {
      background: rgba(7, 65, 119, 0.98);
      font-weight: 500;
      color: rgba(45, 205, 255, 1);
    }
  }
}
</style>