iot-front-ui/src/components/doubleCarbon/car/doubleCarbonCar.vue

<!--
    车辆排放页面
    @author 刘梦祥
    @date 2023年2月8日
-->
<template>
  <div class="doubleCarbon-main-box flexColumn">
    <a-spin class="spinStyle" size="large" tip="Loading..." v-show="searchLoading"></a-spin>
    <!-- 头部搜索区域 -->
    <div class="borderColor">
      <div class="flex flex_between margin5rem">
        <div class="flex">
          <div class="mr1rem">
            单位名称：
            <a-select
              style="width:200px;"
              v-model="searchParam.nameOfUnit"
              :allowClear="selectProps.allowClear"
              :mode="selectProps.mode"
              :options="options.nameOfUnit"
              :notFoundConent="selectProps.notFoundConent"
              :placeholder="selectProps.placeholder"
            ></a-select>
          </div>
          <div>
            时间范围： <a-month-picker id="startTime" format="YYYY-MM" @change="changeTimeRangeS" placeholder="开始时间" />~
            <a-month-picker id="endTime" format="YYYY-MM" @change="changeTimeRangeE" placeholder="结束时间" />
          </div>
        </div>
        <div>
          <a-button class="mr1rem" @click="reset">重置</a-button>
          <a-button type="primary" @click="search">查询</a-button>
        </div>
      </div>
      <div class="cardTitle margin5rem">核心指标</div>
      <div v-if="coreList.length > 0" class="flex flex_around coreListBox margin5rem">
        <div v-for="(item, index) in coreList" :key="'coreList' + index">
          <div class="core_title">{{ item.title }}</div>
          <div class="core_value">
            {{ item.value ? item.value : "--" }}<span class="core_unit">{{ item.unit ? item.unit : "" }}</span
            ><span class="core_leavel" v-if="item.leavel" :style="{ color: $constant.COLOR_LEAVEL[item.leavel] }">!</span>
          </div>
          <div v-if="item.info" class="core_info">
            <span class="core_info_title">{{ item.info.title }}</span
            ><span class="core_info_value" :style="{ color: $constant.COLOR_LEAVEL[item.info.leavel] }"
              >{{ item.info.value
              }}<i
                v-if="item.info.leavel && (item.info.leavel == 1 || item.info.leavel == 3)"
                :class="item.info.leavel == 3 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
            /></span>
          </div>
        </div>
      </div>
      <div class="flex flex_around coreListBox margin5rem" v-if="coreList.length == 0" style="height:120px;">
        <a-empty></a-empty>
      </div>
    </div>
    <!-- 碳排放分析和碳配额构成 -->
    <div class="flex" style="height:400px;">
      <div class="echartBox_left borderColor">
        <div class="cardTitle margin5rem">碳排放分析</div>
        <div class="margin5rem chartDomBox">
          <LineChart v-if="chartData.LineChartData" :echartData="chartData.LineChartData" />
          <a-empty v-else></a-empty>
        </div>
      </div>
      <div class="echartBox_right borderColor">
        <div class="cardTitle margin5rem">碳配额构成</div>
        <div class="margin5rem chartDomBox">
          <BarChart v-if="chartData.BarChartData" :echartData="chartData.BarChartData" />
          <a-empty v-else></a-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from "../../echart/LineChart.vue";
import BarChart from "../../echart/BarChart.vue";
import PieChart from "../../echart/PieChart.vue";
// 模拟数据
import  AnalogData from "../AnalogData.js"
export default {
  components: {
    LineChart,
    BarChart,
    PieChart
  },
  data() {
    return {
      // selectProps配置
      selectProps: {
        allowClear: true, // 支持清除
        mode: "default", // 模式['default'|'multiple'|'tags'|'combobox']
        notFoundConent: "Not Found", // 当下拉列表为空时显示的内容
        placeholder: "请选择", // 选择框默认文字 string|slot
        showArrow: true, // 是否显示下拉小箭头
        size: "large" // 选择框大小['large'|'small']
      },
      // 单位名称option可选值
      options: {
        nameOfUnit: [] // options 数据，如果设置则不需要手动构造 selectOption 节点
      },
      // loading状态
      searchLoading: true,
      // 头部搜索条件中绑定值
      monthArr: [],
      searchParam: {
        nameOfUnit: undefined,
        timeRange: [undefined, undefined]
      },
      // 头部核心指标循环显示数据
      coreList: [],
      // 双碳新闻模拟数据
      DoubleCarbonNewsInfoList: [],
      // 双碳新闻弹窗打开状态
      showModalStatus: false,
      // 弹窗暂存数据对象
      showModalInfo: {
        title: "--",
        content: "--",
        author: "--",
        pushTime: "--"
      },
      // chart暂存数据对象
      chartData: []
    };
  },
  created() {},
  mounted() {
    // 页面初始化
    this.init();
    //默认是当年的1月到12月
    this.defaulTimeRangeS();
    this.defaulTimeRangeE();
  },
  methods: {
    // 开始时间初始化
    defaulTimeRangeS() {
      this.searchParam.timeRange[0] = this.$moment()
        .startOf("year")
        .format("YYYY-MM-DD 00:00:00");
      document.getElementById("startTime").querySelector("input").value = this.$moment()
        .startOf("year")
        .format("YYYY-MM");
    },
    // 结束时间初始化
    defaulTimeRangeE() {
      this.searchParam.timeRange[1] = this.$moment()
        .endOf("year")
        .format("YYYY-MM-DD 23:59:59");
      document.getElementById("endTime").querySelector("input").value = this.$moment()
        .endOf("year")
        .format("YYYY-MM");
    },
    // 修改开始时间时
    changeTimeRangeS(date, dateStr) {
      // 修改时间前判断是否合理
      if (this.searchParam.timeRange[1]) {
        if (
          this.$moment(this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00")).diff(
            this.$moment(this.searchParam.timeRange[1])
          ) > 0
        ) {
          this.$message.error("开始时间不能大于结束时间！请重新选择！");
          setTimeout(() => {
            document.getElementById("startTime").querySelector("input").value = this.$moment()
              .startOf("year")
              .format("YYYY-MM");
          }, 10);
        }
      }
      if (dateStr) {
        this.searchParam.timeRange[0] = this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00");
      } else {
        this.searchParam.timeRange[0] = undefined;
      }
    },
    // 修改结束时间时
    changeTimeRangeE(date, dateStr) {
      // 修改时间前判断是否合理
      if (this.searchParam.timeRange[0]) {
        if (
          this.$moment(this.searchParam.timeRange[0]).diff(
            this.$moment(
              this.$moment(dateStr, "YYYY-MM")
                .endOf("month")
                .format("YYYY-MM-DD 23:59:59")
            )
          ) > 0
        ) {
          this.$message.error("结束时间不能小于开始时间！请重新选择！");
          setTimeout(() => {
            document.getElementById("endTime").querySelector("input").value = this.$moment()
              .endOf("year")
              .format("YYYY-MM");
          }, 10);
        }
      }
      if (dateStr) {
        this.searchParam.timeRange[1] = this.$moment(dateStr, "YYYY-MM")
          .endOf("month")
          .format("YYYY-MM-DD 23:59:59");
      } else {
        this.searchParam.timeRange[1] = undefined;
      }
    },
    // 查询事件
    search() {
      // 时间范围条件不合理判断
      if (this.searchParam.timeRange[0] || this.searchParam.timeRange[1]) {
        if (!this.searchParam.timeRange[0]) {
          this.$message.info("请选择开始时间！");
          return;
        } else if (!this.searchParam.timeRange[1]) {
          this.$message.info("请选择结束时间！");
          return;
        }
      }
      this.searchLoading = true;
      console.log("查询条件：", this.searchParam.nameOfUnit, this.searchParam.timeRange[0], this.searchParam.timeRange[1]);
      setTimeout(() => {
        this.searchLoading = false;
      }, 1000);
    },
    // 重置事件
    reset() {
      document.getElementById("startTime").querySelector("input").value = this.$moment()
        .startOf("year")
        .format("YYYY-MM");
      document.getElementById("endTime").querySelector("input").value = this.$moment()
        .endOf("year")
        .format("YYYY-MM");
      this.searchParam = {
        nameOfUnit: undefined,
        timeRange: [
          this.$moment()
            .startOf("year")
            .format("YYYY-MM-DD 00:00:00"),
          this.$moment()
            .endOf("year")
            .format("YYYY-MM-DD 23:59:59")
        ]
      };
    },
    // 弹窗显示事件
    showModal(item) {
      this.showModalStatus = true;
      this.showModalInfo = item;
    },
    // 弹窗隐藏事件
    onCancel() {
      this.showModalStatus = false;
    },
    init() {
      // 初始化加载[单位名称列表、核心指标、碳排放分析、碳配额构成、碳排放占比、双碳新闻]
      setTimeout(() => {
        this.options.nameOfUnit = AnalogData.optionsNameOfUnit;
        this.coreList = AnalogData.core_List;
        this.chartData = AnalogData.CHART_DATA;
        this.DoubleCarbonNewsInfoList = AnalogData.doubleCarbonNewsInfoList;
        this.searchLoading = false;
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
// 复用样式
.flexColumn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  &_center {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
  }
  &_between {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
  }
  &_around {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-around;
  }
}
.borderColor {
  border: 1px solid #e7eaf1;
}
.margin5rem {
  margin: 0.5rem;
}
.padding5rem {
  padding: 0.5rem;
}
// 页面主题样式
.doubleCarbon-main-box {
  position: relative;
  width: 100%;
  height: 100%;
  & * {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    ::-webkit-scrollbar {
      width: 0 !important;
    }
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  & > div {
    // padding: 5px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
  }
  .spinStyle {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    z-index: 2;
  }
}
// 头部搜索框和（重置、查询）按钮之间的间距样式
.mr1rem {
  margin-right: 1rem;
}
// 每个card标题的字体样式
.cardTitle {
  padding-left: 5px;
  font-size: 14px;
  font-weight: bold;
  border-left: 5px solid @primary-color;
}
// 核心指标
.coreListBox {
  border-radius: 0.5rem;
  background-color: rgb(233, 246, 253);
  & > div {
    position: relative;
    // border-left: 1px solid #909399;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    border-radius: 0.5rem;
    &:hover {
      background-color: rgb(210, 239, 255);
    }
    // &::before {
    //   content: "";
    //   position: absolute;
    //   left: -10px;
    //   height: calc(100% - 20px);
    //   width: 1px;
    //   background: #c9c9c9;
    // }
  }
}
// 核心指标中value的样式
.core {
  &_title {
    font-size: 12px;
    padding-bottom: 10px;
  }
  &_leavel {
    font-size: 16px;
    font-weight: bold;
  }
  &_value {
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }
  &_unit {
    padding-left: 0.5rem;
    font-size: 12px;
    font-weight: bold;
    color: #909399;
  }
  &_info {
    padding-top: 10px;
    font-size: 12px;
    &_title {
      color: #afafaf;
    }
    &_value {
      padding-left: 0.5rem;
      font-weight: bold;
    }
  }
}
// echartBox样式
.echartBox {
  &_left {
    width: calc(100% - 300px - 10px);
    height: 100%;
  }
  &_right {
    margin-left: 10px;
    width: 300px;
    height: 100%;
  }
}
.chartDomBox {
  position: relative;
  width: calc(100% - 20px);
  height: calc(100% - 41px);
  display: flex;
  justify-content: center;
}
.DoubleCarbonNews {
  padding: 10px 0;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  border-bottom: 1px solid #c9c9c9;
  &:hover {
    color: @primary-color;
  }
  & > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  & > div:nth-child(1) {
    width: 15%;
  }
  & > div:nth-child(2) {
    height: 21px;
    overflow: hidden;
    width: calc(50% - 110px);
  }
  & > div:nth-child(3) {
    width: 20%;
  }
  & > div:nth-child(4) {
    width: 15%;
  }
  & > div:nth-child(5) {
    width: 30px;
  }
}
// loading样式
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
}
</style>