lg_frontend/pages/wuzuzhi/huanjingzhili.vue

<!--峰煤监控系统-->
<template>
  <new-bg>
    <div class="center-panel">
      <Map type="middle" @pointClick="pointClick" />
    </div>
    <flex-col class="main">
      <system-title/>
      <ModuleContent none-event padding="0 20px 20px">
        <BFC>
          <flex-col slot="left" width="412">
            <web2-title>环境治理</web2-title>
            <ModuleContent padding="20px 0" height="218">
              <div class="video"></div>
            </ModuleContent>
            <ModuleContent2 border bg bg-color padding="0 20px 20px">
              <flex-col>
                <web3-title>视频列表</web3-title>
                <ModuleContent padding="0" height="160"></ModuleContent>
                <web3-title>日志信息</web3-title>
                <ModuleContent padding="0"></ModuleContent>
              </flex-col>
            </ModuleContent2>
          </flex-col>
          <flex-col slot="right" width="412">
            <ModuleContent2 border bg bg-color padding="0 20px 20px">
              <web3-title>雾炮</web3-title>
            </ModuleContent2>
            <split height="20px"></split>
            <ModuleContent2 border bg bg-color padding="0 20px 20px">
              <web3-title>雾帘</web3-title>
            </ModuleContent2>
            <split height="20px"></split>
            <ModuleContent2 border bg bg-color padding="0 20px 20px">
              <web3-title>天雾</web3-title>
            </ModuleContent2>
          </flex-col>
          <div class="center" slot="center">
            <butgroup :bg="false">
              <cus-button3>一号焦炭料棚</cus-button3>
              <cus-button3>二号焦炭料棚</cus-button3>
              <cus-button3>三号焦炭料棚</cus-button3>
              <cus-button3>四号焦炭料棚</cus-button3>
              <cus-button3>五号焦炭料棚</cus-button3>
            </butgroup>
            <ModuleContent2 border bg bg-color padding="0 20px 20px" height="301" class="real-data">
              <web3-title>实时数据</web3-title>
            </ModuleContent2>
          </div>
        </BFC>
      </ModuleContent>
    </flex-col>
  </new-bg>
</template>

<script>
import {mapActions, mapState} from "vuex";
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
import FlexCol from "../../components/FlexCol.vue";
import ModuleContent from "../../components/ModuleContent.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import NewBg from "../../components/NewBg.vue";
import BFC from "../../components/BFC.vue";
import Butgroup from "../../components/smallCommon/butgroup.vue";
import CusButton from "../../components/smallCommon/CusButton.vue";
import Web3Title from "../../components/smallCommon/Web3Title.vue";
import CusButton2 from "../../components/smallCommon/CusButton2.vue";
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
import CusDesc from "../../components/smallCommon/CusDesc.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import Miaoshu from "../../components/smallCommon/miaoshu.vue";
import bgStr from '../../assets/images/new/矩形 17.png'
import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable2";
import Split from "../../components/smallCommon/Split.vue";
import CusButton3 from "../../components/smallCommon/CusButton3.vue";

export default {
  name: "PeakCoalMonitoring",
  components: {
    CusButton3,
    Split,
    Miaoshu,
    ModuleContent2,
    CusDesc,
    Butgroup2,
    CusButton2,
    Web3Title,
    CusButton,
    Butgroup,
    BFC,
    Web2Title,
    NewBg,
    ModuleContent,
    FlexCol,
    SystemTitle,
    PeakCustomTable
  },
  data() {
    return {
      bgStr,
      tableH: 513,

      dataSource: [
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        }
      ],
      columnsForTable:  [
        {
          title: '设备掉线',
          dataIndex: 'deviceName',
          width: '33.333%'
        },
        {
          title: '故障异常',
          dataIndex: 'errorName',
          width: '33.333%'
        },
        {
          title: '异常报警',
          dataIndex: 'errorImg',
          width: '33.333%'
        }
      ],
      columns: [
        {
          title: '排放标准',
          key: 'bz',
        },
        {
          title: 'VIN',
          key: 'vin',
        },
        {
          title: '发动机号',
          key: 'fdjh',
        },
        {
          title: '注册日期',
          key: 'zcr',
        }
      ]
    }
  },
  computed: {
    ...mapState({
      title: state => state.system.title,
    })
  },
  mounted() {
    this.$nextTick(() => {
      const win = window.top
      this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({data}) => {
        win.document.title = data.home.title
        this.setTitle(data.home.title)
        this.setInfo(data)
      })

      if (this.$refs.module) {
        const offsetHeight = this.$refs.module.$el.offsetHeight - 40
        this.tableH = offsetHeight
      }
    })
  },
  methods: {
    ...mapActions('system', ['setTitle', 'setInfo']),
    /**
     * 图层构造器
     * @param { object } props
     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
     * @param { object } props.data 图层类型
     */
    pointClick({layerType, data}) {
      // todo
      if (layerType == 'wz') {
        this.$open(WZDialog, {
          type: 'middle'
        }, {
          screenType: 'middle',
          title: '微站',
          width: 1100,
          onClose() {
            console.log(1);
          }
        })
      } else if (layerType === 'sdjcy') {
        this.$open(SDJCYDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '深度检测仪',
          width: 1100,
          onClose() {
            console.log(1);
          }
        })
      } else if (layerType === 'zkz') {
        this.$open(ZKZDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '质控站',
          width: 1100,
          onClose() {
            console.log(1);
          }
        })
      } else if (layerType === 'gbz') {
        this.$open(GBZDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '国标站',
          width: 1100,
          onClose() {
            console.log(1);
          }
        })
      } else if (layerType === 'cems') {
        this.$open(CEMSDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: 'CEMS',
          width: 1100,
          onClose() {
            console.log(1);
          }
        })
      } else if (layerType === 'jkd') {
        this.$open(pointDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '监控点',
          width: 1100,
          onClose() {
            console.log(1);
          }
        })
      }
    },
  }
}
</script>

<style>
body, html, #__nuxt, #__layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #09151F;
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}

.list-enter, .list-leave-to
  /* .list-leave-active for below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(30px);
}
</style>

<style scoped lang="less">
@import "../../assets/styles/mixin";
.center {
  padding: 0 20px;
  position: relative;
  height: 100%;
  pointer-events: none;
  .real-data {
    pointer-events: auto;
    position: absolute;
    bottom: 0;
    width: calc(100% - 40px);
  }
}
.center-panel{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.main {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 2;
  pointer-events: none;
}
.sou-suo-kuang {
  height: 100%;
  width: 580px;
  box-sizing: border-box;
  padding: 0 32px 0;


  .search {
    /deep/ .ant-input {
      color: #fff;
      background: rgba(5, 38, 93, 1);
      border: 1.28px solid rgba(35, 209, 232, 1);
      &:hover {
        color: #fff;
        background: rgba(5, 38, 93, 1);
        border: 1.28px solid rgba(35, 209, 232, 1);

      }
    }
    width: 100%;
    height: 90px;
    box-sizing: border-box;
    padding: 28px 16px;

    background: rgba(24, 131, 201, 0.2);


    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 23.17px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    line-height: 32px;

    .input {
      margin-left: 10px;
    }

  }

}

.liebiao {
  height: 100%;

}

.car-preview {
  width: 100%;
  height: 260px;
}

.desc {
  background: rgba(24, 131, 201, 0.2);
  border: 1px solid rgba(15, 81, 122, 1);
}
.table-content{
  padding-top: 20px;
  flex: 1;
  height: 100%;
}

.video {
  height: 178px;
}

</style>