lg_frontend/pages/home/index.vue

<!--峰煤监控系统-->
<template>
  <new-bg>
    <flex-col>
      <system-title />


    <div class="center-panel">
      <Map type="middle" @pointClick="pointClick" />
    </div>
    <flex-col class="main">
      <system-title/>
      <ModuleContent none-event padding="0px 20px 20px">
        <BFC>
          <flex-col slot="left" width="412">
            <ModuleContent2 bg bg-color padding="20px">
              <flex-col>
                <web3-title>本市空气质量</web3-title>
                <ModuleContent padding="0" height="210">
                  <pollution-information/>
                </ModuleContent>
                <web3-title>治理设备在线率</web3-title>
                <ModuleContent padding="20px 0" height="180">
                  <ProgressDesc></ProgressDesc>
                </ModuleContent>
                <web3-title>厂区环境趋势</web3-title>
                <ModuleContent padding="0" height="180">
                  <air-quality-trend-charts :data-source="airQualityTrendDataSource"/>
                </ModuleContent>
                <web3-title>设备报警信息汇总</web3-title>
                <ModuleContent padding="0">
                  <peak-custom-table :table-title="columnsForTable" :data-source="dataSource" :limit-move-num="3"/>
                </ModuleContent>
              </flex-col>
            </ModuleContent2>
          </flex-col>
          <flex-col slot="right" width="412">
            <ModuleContent2 bg bg-color padding="20px">
              <flex-col>
                <web3-title>
                  清洁运输比例
                  <template slot="action">
                    <butgroup2 style="height: 20px;line-height: 20px;">
                      <cus-button4 @click="active = 'yesterday'" :selected="active === 'yesterday'">昨日</cus-button4>
                      <cus-button4 @click="active = 'lastWeek'" :selected="active === 'lastWeek'">上周</cus-button4>
                    </butgroup2>
                  </template>
                </web3-title>
                <ModuleContent padding="0">
                  <PeakWarningTypeChart2 :color="['rgb(0 255, 255)', 'transparent']" :data-source="pieData"></PeakWarningTypeChart2>
                  <div class="c-title">
                    <div class="t">{{ Math.round(pieData[0].value * 100) }}%</div>
                    <div class="t2">运输比例</div>
                  </div>
                </ModuleContent>
                <web4-title>日排放量</web4-title>
                <ModuleContent padding="20px 0 0" height="140">
                  <div class="pf">
                    <div class="t">当前VOC的日排放量</div>
                    <div class="v">{{ todaypf.today?.voc || 0 }}mg/m3</div>
                  </div><div class="pf">
                  <div class="t">当前CEMS的日排放量</div>
                  <div class="v">{{ todaypf.today?.cems || 0 }}mg/m3</div>
                </div>

                </ModuleContent>
                <web4-title>周排放量</web4-title>
                <ModuleContent padding="0 ">
                  <peak-custom-table :table-title="columns2ForTable" :data-source="weekData" :limit-move-num="3"/>
                </ModuleContent>
                <web3-title>设备超标报警</web3-title>
                <ModuleContent padding="0 20px 20px">
                </ModuleContent>
              </flex-col>

            </ModuleContent2>

          </flex-col>
          <div class="center" slot="center">
            <butgroup :bg="false">
              <cus-button small :selected="mapTab==='rl'" @click="mapTab = 'rl'">热力地图</cus-button>
              <cus-button small :selected="mapTab==='wx'" @click="mapTab = 'wx'">卫星地图</cus-button>
            </butgroup>


            <butgroup class="real-data">
              <cus-button>
                <nuxt-link to="/youzuzhi/paifang">有组织</nuxt-link>
              </cus-button>
              <cus-button>
                <nuxt-link to="/wuzuzhi/paifang">无组织</nuxt-link>
                </cus-button>
              <cus-button>
                <nuxt-link to="/cleanTravel/home">清洁运输</nuxt-link>
                </cus-button>
              <cus-button>
                <nuxt-link to="/video/list">视频广场</nuxt-link>
                </cus-button>
            </butgroup>
          </div>
        </BFC>
      </ModuleContent>
    </flex-col>
    </flex-col>
  </new-bg>
</template>

<script>
import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation2";
import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
import MonitorData2 from "@/components/peak-coal-monitoring/MonitorData2";
import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
import WZDialog from "@/components/WZDialog";
import SDJCYDialog from "@/components/SDJCYDialog";
import ZKZDialog from "@/components/ZKZDialog";
import GBZDialog from "@/components/GBZDialog";
import CEMSDialog from "@/components/CEMSDialog";
import pointDialog from '@/components/PointDialog'
import {mapState} from "vuex";
import NewBg from "../../components/NewBg.vue";
import BFC from "../../components/BFC.vue";
import CusButton3 from "../../components/smallCommon/CusButton3.vue";
import Butgroup from "../../components/smallCommon/butgroup.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
import ModuleContent from "../../components/ModuleContent.vue";
import Split from "../../components/smallCommon/Split.vue";
import FlexCol from "../../components/FlexCol.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import Web3Title from "../../components/smallCommon/Web3Title.vue";
import ProgressDesc from "../../components/smallCommon/ProgressDesc.vue";
import Web4Title from "../../components/smallCommon/Web4Title.vue";
import CusButton from "../../components/smallCommon/CusButton.vue";
import AirQualityTrendCharts from "../../components/charts/AirQualityTrendCharts.vue";
import PeakCustomTable from "../../components/peak-coal-monitoring/PeakCustomTable2.vue";
import PeakWarningTypeChart2 from "../../components/charts/PeakWarningTypeChart2.vue";
import CusButton4 from "../../components/smallCommon/CusButton4.vue";
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
export default {
  name: "PeakCoalMonitoring",
  components: {
    Butgroup2,
    CusButton4,
    PeakWarningTypeChart2,
    PeakCustomTable,
    AirQualityTrendCharts,
    CusButton,
    Web4Title,
    ProgressDesc,
    Web3Title,
    Web2Title,
    FlexCol,
    Split,
    ModuleContent,
    SystemTitle,
    ModuleContent2,
    Butgroup,
    CusButton3,
    BFC,
    NewBg,
    AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule, MonitorData2},
  computed: {
    ...mapState({
      title: state => state.system.title,
      info: state => state.system.info || {},
      airQualityTrendDataSource: state => (state.system.info?.trend || []).map(item => {
        const { date, ...attr } = item
        const result = []
        for (const attrKey in attr) {
          const obj = { name: date }
          obj.attr = attrKey
          obj.value = attr[attrKey]
          result.push(obj)
        }
        console.log(result)
        return result
      }).flat(Infinity),
      dataSource: state => state.system.info?.alerts || []
    }),
    pieData () {
      if (this.info.cleanData && this.info.cleanData[this.active]) {
        return [
          {
            attr: '清运',
            name: '清洁',
            value: this.info.cleanData[this.active]
          },
          {
            attr: '清运',
            name: '剩余',
            value: 1 - this.info.cleanData[this.active]
          },
        ]
      }
      return [
        {
          attr: '清运',
          name: '清洁',
          value: 0
        },
        {
          attr: '清运',
          name: '剩余',
          value: 0
        },
      ]

    },
    todaypf () {
      return this.info.today || {}
    },
    columns2ForTable () {
      const week = this.todaypf.week || {}
      const columns = [
        {
          title: '类型',
          dataIndex: 'deviceName',
        }
      ]
      for (const weekKey in week) {
        if (week[weekKey] && week[weekKey].length > 0) {
          const data = week[weekKey]
          columns.push.apply(columns, data.map(item => ({
            title: item.Key,
            dataIndex: item.Key
          })))
          break
        }
      }
      const len = columns.length
      const per = 100 / len + '%'
      return columns.map((item, index) => {
        if (item === 0) return item
        return {
          ...item,
          width: per
        }
      })
    },
    weekData () {
      const week = this.todaypf.week || {}
      const results = []
      for (const weekKey in week) {
        const row = {
          deviceName:weekKey,
        }
        if (!week[weekKey].length) continue

        for (const weekElement of week[weekKey]) {
          console.log(weekElement)
          row[weekElement.Key] = weekElement.value
        }
        results.push(row)
      }
      return results
    }
  },
  data () {
    return {
      mapTab: 'rl',
      active: 'yesterday',

      columnsForTable: [
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          width: '33.333%'
        },
        {
          title: '报警时间',
          dataIndex: 'time',
          width: '33.333%'
        },
        {
          title: '报警内容',
          dataIndex: 'alarmName',
          width: '33.333%'
        },
      ]
    }
  },
  methods: {
    /**
     * 图层构造器
     * @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;
}

.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";
.pf {
  background: rgba(0, 186, 186, 0.08);
  padding: 15px 17px;
  border: 0.6px solid rgba(0, 186, 186, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  &:last-child {
    margin-top: 20px;
  }
  .t {
    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 16.46px;
    color: rgba(219, 234, 234, 1);
    text-align: left;
    vertical-align: top;
  }
  .v {
    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 16.46px;
    color: rgba(8, 255, 255, 1);
    text-align: right;
    vertical-align: top;

  }
}
.c-title {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  .t {
    /** 文本1 */
    font-size: 35.84px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 51.9px;
    color: rgba(55, 254, 247, 1);
    text-align: left;
    vertical-align: top;
  }
  .t2 {
    /** 文本1 */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20.27px;
    color: rgba(243, 255, 255, 1);
    text-align: center;
    vertical-align: top;

  }
}
.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>