slibra-module-web/src/views/carbon/index.vue

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { NPopselect, useMessage } from 'naive-ui';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import autofit from 'autofit.js'
import { carbonApi } from '@/api/carbon'
import { echartLineOptions, echartGraphOptions, echart3DOptions, echartColumnarOptions } from './echartOptions';

import SvgIcon from '@/components/SvgIcon';
import { TheDrawerForm, TheDrawerList, TheModalTable } from './components';

import DataBorad from './components/screen/DataBorad.vue'
import DataScroll from './components/screen/DataScroll.vue'
import LayoutCard from './components/screen/LayoutCard.vue'

const router = useRouter();
const message = useMessage();

let timerId = null;
let echartMonth = null;
let echartSewage = null;
let echartEnergy = null;
let echartMdu = null;
const tDay = dayjs();
const currentTimer = ref(tDay.format('HH:mm:ss'));
const currentMonth = tDay.format('YYYY.MM.DD');
const allMonth = ref([]);
const inpVal = ref('')
const historyDetails = ref({});

const echartMonthRef = ref(null);
const echartSewageRef = ref(null);
const echartEnergyRef = ref(null);
const echartMudRef = ref(null);
const isVisibleDrawerForm = ref(false);
const isVisibleDrawerList = ref(false);
const isVisibleDrawerTable = ref(false);

const scrollData = ref([]);
const scrollMapping = [
  { label: '化石源的CO₂排放量', key: 'wsHsytkhCo2', value: '' },
  { label: '污水处理阶段排放的CH₄的CO₂当量', key: 'wsSjclCh4Co2', value: '' },
  { label: '污水处理阶段排放的N₂O的CO₂当量', key: 'wsTdN2oCo2', value: '' },
  { label: '污水厂电力消耗产生的总碳排放量', key: 'nyyjDlxhZhdlCo2', value: '' },
  { label: '进水泵房碳排', key: 'nyyjDlxhJsbfCo2', value: '' },
  { label: '鼓风机房碳排', key: 'nyyjDlxhGfjfCo2', value: '' },
  { label: '脱水机房碳排', key: 'nyyjDlxhTsjfCo2', value: '' },
  { label: '消毒间碳排', key: 'nyyjDlxhXdjCo2', value: '' },
  { label: '深度处理用电碳排', key: 'nyyjDlxhSdclCo2', value: '' },
  { label: '污泥处置用电碳排', key: 'nyyjDlxhWnczCo2', value: '' },
  { label: '生活区碳排', key: 'nyyjDlxhShqCo2', value: '' },
  { label: '其他碳排', key: 'nyyjDlxhQtCo2', value: '' },
  { label: '燃料消耗产生的碳排放量', key: 'nyyjGrrlCo2', value: '' },
  { label: '污泥厌氧消化过程排放的CH₄的CO₂当量', key: 'wnclYyzqCo2', value: '' },
  { label: '单独处理污泥厌氧消化产生沼液的CO₂当量', key: 'wnclDdclCo2', value: '' },
  { label: '污泥好氧发酵过程排放的N₂O的CO₂当量', key: 'wnclHyfjN2oCo2', value: '' },
  { label: '污泥好氧发酵过程排放的CH₄的CO₂当量', key: 'wnclWnfsCo2', value: '' },
  { label: '污泥焚烧过程排放的CH₄的CO₂当量', key: 'wnclBwqrsCh4Co2', value: '' },
  { label: '污泥焚烧过程排放的N₂O的CO₂当量', key: 'wnclBwqrsN2oCo2', value: '' },
  { label: '污泥热解过程排放的CH₄的CO₂当量', key: 'wnclWnrjByhCo2', value: '' },
  { label: '污泥热解过程排放的N₂O的CO₂当量', key: 'wnclWnrjQtN2oCo2', value: '' },
  { label: '光伏发电替碳量', key: 'thGfCo2', value: '' },
  { label: '回用水替代供水的替碳量', key: 'thZssCo2', value: '' },
  { label: '污泥产物土地利用的替碳量', key: 'thWnClhCo2', value: '' },
];

const selectOptions = computed(() => allMonth.value.map(item => ({ label: item, value: item })));

const handleType = async ( type ) => {

  if (type === 'down') {
    return message.warning("该功能暂未开通");
  }

  if (type === 'info') {
    isVisibleDrawerTable.value = true;
  }

  if (type === 'list') {
    isVisibleDrawerList.value = true;
  }

  if (type === 'add') {
    isVisibleDrawerForm.value = true;
  }
}

const handleBackPage = () => router.back();
const getCurrentTimer = () => dayjs().format('HH:mm:ss');

const initAllMonth = async () => {
  const { data: month } = await carbonApi.getAllMonth();
  allMonth.value = month;
  return month;
}

const initEchart = () => {
  const { 
    recent7Datas, extraMap, wsTdN2oCo2, wsSjclCh4Co2, wjtykuCo2, wsHsytkhCo2,
    wnclYyzqCo2,
    wnclDdclCo2,
    wnclHyfjCh4Co2, wnclHyfjN2oCo2,
    wnclWnfsCo2,
    wnclBwqrsCh4Co2, wnclBwqrsN2oCo2,
    wnclWnrjQtCh4Co2, wnclWnrjQtN2oCo2,
    nyyjDlxhZhdlCo = 0,  wscljdyjxhCo = 0, gdsnyrlCo2 = 0, nyyjGrrlCo = 0
  } = historyDetails.value;

  // 近7月碳排放趋势
  echartMonth.setOption(echartLineOptions(recent7Datas));

  // 污水处理生化反应
  echartSewage.setOption(echartGraphOptions([wsTdN2oCo2, wsSjclCh4Co2, wjtykuCo2, wsHsytkhCo2]));

  // echartEnergy.dispose();
  // 能源、药剂
  echartEnergy.setOption(echart3DOptions([nyyjDlxhZhdlCo,  wscljdyjxhCo, gdsnyrlCo2, nyyjGrrlCo]));

  // 污泥处理-生化反应
  echartMdu.setOption(echartColumnarOptions([
    wnclYyzqCo2,
    wnclDdclCo2,
    wnclHyfjCh4Co2 + wnclHyfjN2oCo2,
    wnclWnfsCo2,
    wnclBwqrsCh4Co2 + wnclBwqrsN2oCo2,
    wnclWnrjQtCh4Co2 + wnclWnrjQtN2oCo2
  ]));

  const scrollList = Object.entries(extraMap).map(([k, v], i) => {
    return v.map((child, index) => {
      return {
        label: child.dictLabel,
        key: index + i,
        value: child.val
      }
    })
  }).flat(Infinity);

  // 滚动区域
  scrollData.value = [...scrollList, ...scrollMapping].map(item => {
    const temp = { ...item };
    Object.entries(historyDetails.value).forEach(([k, v]) => {
      if ( temp.key === k ) {
        temp.value = v;
      }
    })
    return temp;
  }).filter(({ value }) => value);

}

const initPageData = async () => {
  const { data } = await carbonApi.getDetails(inpVal.value);

  historyDetails.value = data;

  echartMonth = echarts.init(echartMonthRef.value, 'light');
  echartSewage = echarts.init(echartSewageRef.value, 'light');
  echartEnergy = echarts.init(echartEnergyRef.value, 'light');
  echartMdu = echarts.init(echartMudRef.value, 'light');

  initEchart();
}

// select 的 options选中
const handleSelectChecked = (time) => {
  inpVal.value = time;
  initPageData();
}

const onSubmit = async () => {
  isVisibleDrawerForm.value = false;
  if ( !allMonth.value.length ) {
    const [ firstMonth ] = await initAllMonth();
    inpVal.value = firstMonth;

    initPageData();
  } else {
    initAllMonth();
    initPageData();
  }
}

const windowResize = () => {
  echartMonth.resize();
  echartSewage.resize();
  echartEnergy.resize();
  echartMdu.resize();
};

onMounted(async () => {
  const [ firstMonth ] = await initAllMonth();

  autofit.init({
    dw: 1920,
    dh: 1080,
    el:"#screenViewport",
    resize: true
  })

  if ( !firstMonth ) {
    return message.warning("当前未查询到对应的数据，请新增核算");
  }

  inpVal.value = firstMonth;

  initPageData();

  window.addEventListener("resize", windowResize);

  timerId = setInterval(() => currentTimer.value = getCurrentTimer(), 1000)
})

onUnmounted(() => {
  window.removeEventListener("resize", windowResize);
  clearInterval(timerId);
  echartMonth && echartMonth.dispose();
  echartSewage && echartSewage.dispose();
  echartEnergy && echartEnergy.dispose();
  echartMdu && echartMdu.dispose();
  autofit.off()
})

</script>

<template>
  <div class="screen-viewprot" id="screenViewport">
    <header class="header">
      <div class="flex items-center">
        <NPopselect :options="selectOptions" v-model:value="inpVal" scrollable :on-update:value="handleSelectChecked">
          <div class="calendar space-x-[4px]">
            <span class="calendar-text">{{ inpVal }}</span>
          </div>
        </NPopselect>
        <div class="timer-inner">
          <p class="time">{{ currentTimer }}</p>
          <p class="day text-[13px]">{{ currentMonth }}</p>
        </div>
        <button class="back-btn_group" @click="handleBackPage">
          <SvgIcon name="carbon-icon-back" size="36"></SvgIcon>
          <span class="btn">返回</span>
        </button>
      </div>
    </header>
    <main class="main">

      <LayoutCard title="近7月碳排放趋势">
        <div ref="echartMonthRef" class="w-full h-full"></div>
      </LayoutCard>

      <DataBorad :data="historyDetails"></DataBorad>

      <LayoutCard title="污水处理生化反应">
        <div ref="echartSewageRef" class="w-full h-full"></div>
      </LayoutCard>

      <LayoutCard title="能源、药剂">
        <div class="energy-inner">
          <div ref="echartEnergyRef" class="w-full h-full"></div>
        </div>
      </LayoutCard>

      <DataScroll :data="scrollData"></DataScroll>

      <LayoutCard title="污泥处理-生化反应">
        <div ref="echartMudRef" class="w-full h-full"></div>
      </LayoutCard>

    </main>
    <ul class="footer">
      <li><img src="@/assets/images/carbon/bg-btn-1.png" alt="下载报告" class="img" @click="handleType('down')"></li>
      <li><img src="@/assets/images/carbon/bg-btn-2.png" alt="申报信息" class="img" @click="handleType('list')"></li>
      <li><img src="@/assets/images/carbon/bg-btn-3.png" alt="核算历史" class="img" @click="handleType('info')"></li>
      <li><img src="@/assets/images/carbon/bg-btn-4.png" alt="新增核算" class="img" @click="handleType('add')"></li>
    </ul>
  </div>

  <TheDrawerForm v-model="isVisibleDrawerForm" @on-submit="onSubmit" :all-month="allMonth"/>
  <TheDrawerList v-model="isVisibleDrawerList" :data="historyDetails" />
  <TheModalTable v-model="isVisibleDrawerTable"/>
</template>

<style lang="scss" scoped>
$bg-path: '@/assets/images/carbon/';
$text-color_primary: #C2D8EF;

.screen-viewprot {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 100px 1fr 100px;
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/carbon/bg.png") 50% / cover no-repeat;
}

.header {
  @include flex(x, start, end);
  padding: 0 18px;
  background: url("@/assets/images/carbon/bg-header.png") left top no-repeat;
  background-size: cover;

  .calendar {
    width: 90px;
    height: 30px;
    padding-left: 8px;
    margin-right: 54px;
    background: url("@/assets/images/carbon/bg-calendar.png") no-repeat,
      url("@/assets/images/carbon/bg-calendar-direction.png") 62px center no-repeat;
    background-size: 100% 100%, 10px 10px;
    font-size: 14px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0, 22, 35, 0.75);
    line-height: 30px;
    font-family: D-DIN-PRO-700-Bold;
    cursor: pointer;

    span {
      box-shadow: 0px 1px 0px 0px #001623BF;
    }
  }

  .timer-inner {
    padding: 16px 8px;
    margin-right: 40px;
    font-family: 'D-DIN-PRO-700-Bold';
    font-weight: bold;
    color: $text-color_primary;
    text-align: right;

    .time {
      width: 80px;
      font-size: 24px;
      line-height: 24px;
      box-shadow: 0px 1px 3px 0px #050C198A;
    }
  }

  .back-btn_group {
    @include flex(x, center, center);
    font-size: 14px;
    line-height: 18px;
    color: $text-color_primary;
  }
}

.main {
  display: grid;
  grid-gap: 26px 26px;
  padding: 30px 48px 0 48px;
  grid-template-columns: 490px 1fr 490px;
  grid-template-rows: minmax(300px, 50%) minmax(300px, 50%);
  color: #fff;

  .energy-inner {
    width: 100%;
    height: 100%;
    font-family: 'D-DIN-PRO-700-Bold';
    // background: url('@/assets/images/carbon/bg-3d.png') 17% 80% no-repeat;
  }
}

.footer {
  @include flex(x, center, center);
  background: url("@/assets/images/carbon/Group 1321315504 (1).png") center center no-repeat;
  background-size: cover;

  li {
    width: 180px;
    cursor: pointer;

    .img {
      width: 100%;
    }
  }
}
</style>

<style lang="scss">
.calendar {
  .el-input__wrapper {
    padding: 0;
    padding-left: 16px;
    background: transparent;
    box-shadow: none;

    .el-input__prefix,
    .el-input__suffix {
      display: none;
    }

    .el-input__inner {
      font-family: 'D-DIN-PRO-700-Bold';
      font-size: 12px;
      color: #fff;
      cursor: pointer;
    }

    &:hover {
      box-shadow: none;
    }
  }

  .el-input__wrapper.is-focus {
    box-shadow: none;
  }
}

.el-month-table td.current:not(.disabled) .el-date-table-cell__text, .el-year-table td.current:not(.disabled) .el-date-table-cell__text {
  background: #3153f5;
}
</style>