zhny_ui/ems-ui/src/views/index.vue

<template>
  <div class="home">
    <div class="home-row">
      <el-card class="box-card">
        <div slot="header" class="box-header">
          <span>能耗汇总</span>
          <div class="header-right">
            <div :class="{ 'selected': activeDate === item.value }" v-for="item in dateList" :key="item.name"
              @click="dateChange(item)">{{ item.name }}</div>
          </div>
        </div>
        <div class="summary">
          <div class="summary-item">
            <div>
              <div class="summary-bg">
                <img class="energyImg" src="@/assets/images/energy.svg" alt="">
              </div>
              <div class="summary-title">
                <div>电消耗</div>
                <div class="summary-value">
                  <span class="value">122</span>
                  <span class="unit">kW·h</span>
                </div>
                <div class="summary-value">
                  <span class="value">182</span>
                  <span class="unit">元</span>
                </div>
              </div>
            </div>
            <div>
              <div class="summary-bg">
                <img src="@/assets/images/water.svg" alt="">
              </div>
              <div class="summary-title">
                <div>水消耗</div>
                <div class="summary-value">
                  <span class="value">132</span>
                  <span class="unit">吨</span>
                </div>
                <div class="summary-value">
                  <span class="value">162</span>
                  <span class="unit">元</span>
                </div>
              </div>
            </div>
          </div>
          <div class="summay-chart">
            <SubTitle title="费用【单位：元】" style="padding-left: 30px;"/>
            <div class="cost">
              <span>总费用</span>
              <span>344元</span>
            </div>
            <BaseChart  width="100%" height="250px" :option="useOptions" />
          </div>

        </div>

      </el-card>
    </div>
    <el-card class="box-card">
      <div slot="header" class="box-header">
        <span>用能趋势分析</span>
        <div class="header-right">
          <div :class="{ 'selected': activeDimension === item.value }" v-for="item in dimensionList" :key="item.name"
            @click="dimensionChange(item)">{{ item.name }}</div>
        </div>
      </div>
      <BaseChart width="100%" height="250px" :option="energyOptions" />
    </el-card>
  </div>
</template>

<script>
import BaseChart from '@/components/BaseChart'
import SubTitle from '@/components/SubTitle/index.vue'
export default {
  name: "Index",
  data () {
    return {
      activeDate: '1',
      dateList: [
        {name: '上月', value: '1'},
        {name: '本月', value: '2'},
        {name: '去年', value: '3'},
        {name: '本年', value: '4'},
      ],
      activeDimension: '1',
      dimensionList: [
        {name: '小时', value: '1'},
        {name: '天', value: '2'},
        {name: '月', value: '3'},
        {name: '年', value: '4'},
      ],
      consumList: [
        {
          name: '综合能耗',
          value: '',
          unit: '',
          cost: ''
        }
      ]
    };
  },
  components: {BaseChart,SubTitle},
  computed: {
    useOptions () {
      return {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: '5%',
          left: '5%'
        },
        series: [
          {
            name: '费用',
            type: 'pie',
            radius: ['35%', '55%'],
            data: [{
              name: '水费', value: '162',
              itemStyle: {
                normal: {
                  color: '#1396DB'
                }
              }
            }, {
              name: '电费', value: '182',
              itemStyle: {
                normal: {
                  color: '#F4EA29'
                }
              }
            }],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{d}%',
            },

            labelLine: {
              show: true,
              length: 30, // 标签线长度
              lineStyle: {
                width: 1,
                type: 'dashed', // 设置虚线样式
              }
            }
          }
        ]
      }

    },
    energyOptions () {
      const dataArr = []
      let dataObj = {
        name: "用能趋势分析",
        type: "bar",
        year: ["2015", "2016", "2017", "2018", "2019", "2020"],
        val: [
          {
            name: '水',
            value: ["0", "0", "20", "11", "18", "5"]
          },
          {
            name: '电',
            value: ["4", "10", "2", "22", "12", "3"]
          }
        ]
      }
      dataObj.val.map(item => {
        const newArr = {
          name: item.name,
          type: 'bar',
          smooth: true,
          symbolSize: 8,
          data: item.value,
          barWidth: '17%',
          itemStyle: {
            normal: {
              color: item.name === '水' ? '#1396DB' : '#F4EA29'
            }
          }
        }

        dataArr.push(newArr)
      })
      return {
        toolbox: {
          itemGap: 10,
          itemSize: 16,
          right: 10,
          top: 0,
          show: true,
          feature: {
            magicType: {
              show: true,
              type: ['bar', 'line']
            },
            saveAsImage: {
              show: true
            }
          }
        },
        // color: ['#f0c725', '#16f892'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          x: 'center',
          top: '0',
          textStyle: {
            // color: '#c1cadf',
            fontSize: 14
          }
        },
        grid: {
          left: '5%',
          right: '6%',
          top: '5%',
          bottom: '10%',
          containLabel: false
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          data: dataObj.year,
          axisLine: {
            lineStyle: {
              // color: 'rgba(240,199,37,1)'
            }
          },
          axisLabel: {
            interval: 0,
            // color: '#c1cadf',
            fontSize: '15'
          }
        }],
        yAxis: [{
          type: 'value',
          name: '(处)',
          nameTextStyle: {
            // color: '#c1cadf',
            align: 'right',
            lineHeight: 10
          },
          axisLine: {
            lineStyle: {
              // color: 'rgba(240,199,37,1)'
            }
          },
          axisLabel: {
            interval: 0,
            // color: '#c1cadf',
            fontSize: '15'
          },
          splitLine: {
            show: false
          }
        }],
        series: dataArr
      }

    }
  },
  methods: {
    dateChange (item) {
      this.activeDate = item.value
    },
    dimensionChange (item) {
      this.activeDimension = item.value
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  padding: 0 10px;
}

.home-row {
  display: flex;
  justify-content: space-between;

  .box-card:last-of-type {
    margin-left: 10px;
  }
}

.box-card {
  margin-top: 10px;
  width: 100%;

  .box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;

    .header-right {
      display: flex;
      color: #98999b;
      font-weight: normal;
      font-size: 14px;

      >div {
        display: flex;
        align-items: center;
        cursor: pointer;

        &:not(:last-of-type):after {
          content: '';
          height: 12px;
          width: 1px;
          background: #d5d8e0;
          margin: 0 3px;
        }
      }

      .selected {
        color: #409EFF;
      }
    }
  }
}

.summary {
  display: flex;
  justify-content: space-around;
  .summay-chart {
    flex: 1;
    position: relative;
    .cost{
      position: absolute;
      top: 53%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .summary-item {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;

    >div {
      display: flex;
      align-items: center;
      justify-content: center;

      .summary-bg {
        margin-top: 20px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border: 3px solid #d5d8e0;
        box-shadow: 0px 4px 10px 0px rgba(69, 89, 120, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          height: 60px;
        }

        .energyImg {
          height: 90px;
        }
      }

      .summary-title {
        margin-left: 10px;

        >div:first-child {
          font-weight: bold;
          color: #333;
          margin-bottom: 10px;
        }

        .summary-value {
          margin-top: 5px;
        }

        .value {
          font-size: 18px;
          font-weight: bold;
        }

        .unit {
          margin-left: 10px;
          font-size: 12px;
          color: #bbbcbf;
        }
      }
    }
  }
}
</style>