zhny_ui/ems-ui-cloud/src/views/largeScreen/source/right.vue

<template>
  <div>
    <CusModule title="告警信息">
      <div class="seamless-header">
        <div>告警内容</div>
        <div>告警设备</div>
        <div>告警时间</div>
      </div>
      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
        <div class="seamless-item" v-for="(item, index) in listData" :key="index">
          <div>{{ item.name }}</div>
          <div>{{ item.type }}</div>
          <div>{{ item.createTime }}</div>
        </div>
      </vue-seamless-scroll>
    </CusModule>
    <CusModule class="module-top" title="节能减排（今年）">
      <div class="energy">
        <div class="energy-item">
          <div class="energy-item-value">{{reduce.coal}}</div>
          <div class="energy-item-name">标煤当量(吨)</div>
        </div>
        <div class="energy-item">
          <div class="energy-item-value">{{reduce.co2}}</div>
          <div class="energy-item-name">CO2当量(吨)</div>
        </div>
        <div class="energy-item">
          <div class="energy-item-value">{{reduce.tree}}</div>
          <div class="energy-item-name">植树当量(棵)</div>
        </div>
      </div>
    </CusModule>
    <CusModule class="module-top" title="发电趋势预测">
      <BaseChart height="350px" width="100%" :option="lineOptions" />
    </CusModule>
  </div>
</template>
<script>
import CusModule from '../components/CusModule.vue';
import BaseChart from '@/components/BaseChart/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {dateFormat} from '@/utils';
import * as echarts from 'echarts'
import {mapState} from 'vuex';
export default {
  name: 'SourceRight',
  data () {
    return {
      lineData: [],
      reduce: {
        coal: '',
        co2: '',
        tree:''
      },
      classOption: {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止
      },
      listData: [
        {
          name: '光伏板故障',
          type: 'AF1001',
          createTime: '2024-10-07 12:15:46'
        },
        {
          name: '变电柜故障',
          type: 'AB1068',
          createTime: '2024-10-08 11:11:41'
        },
        {
          name: '光伏板故障',
          type: 'AF1066',
          createTime: '2024-10-09 15:15:46'
        },
        {
          name: '变电相故障',
          type: 'AC1061',
          createTime: '2024-10-08 11:11:41'
        },
        {
          name: '变电柜故障',
          type: 'AB1076',
          createTime: '2024-10-10 12:33:40'
        },
        {
          name: '光伏板故障',
          type: 'AF1008',
          createTime: '2024-10-10 12:35:40'
        }
      ]

    }
  },
  components: {
    CusModule,
    BaseChart,
    vueSeamlessScroll
  },
  computed: {
    ...mapState('userState', ['areaType']),
    lineOptions () {
      return {
        legend: {
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          name: "kW·h",
          splitLine: {
            show: true,
            lineStyle: {
              color: '#334E5E'
            }
          },
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          data: this.lineData.map(item=>item.xData),
        },
        series: [
          {
            type: 'line',
            name: "发电量",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#80DBE1", // 线条颜色
              },
            },
            itemStyle: {
              color: "#80DBE1",
              borderColor: "#fff",
              borderWidth: 3
            },
            areaStyle: { //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(81, 139, 152,0.8)"
                },
                {
                  offset: 1,
                  color: "rgba(81, 139, 152, 0)"
                }
                ], false),
                shadowColor: 'rgba(81, 139, 152, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              }
            },
            data: this.lineData.map(item=>item.yData),
          },
        ],
      }
    }
  },
  watch: {
    areaType () {
      this.lineData = this.getDatesOfLastTenDays()
      this.getReduceData()
    }
  },
  mounted () {
    this.lineData = this.getDatesOfLastTenDays()
    this.getReduceData()
  },
  methods: {
    getDatesOfLastTenDays () {
      var dates = [];
      var today = new Date();
      for (var i = 1; i < 11; i++) {
        var pastDate = new Date(today);
        pastDate.setDate(today.getDate() + i); // 减去i天
        var formattedDate = dateFormat(pastDate, 'MM-dd');
        dates.push(formattedDate);
      }
      return dates.map(item => ({
        xData: item,
        yData: parseFloat(((Math.random() * 100 + 100)).toFixed(1))
      }));
    },
    getReduceData () {
      this.reduce.coal =parseFloat(((Math.random() * 100 + 500)).toFixed(1))
      this.reduce.co2 =parseFloat(((Math.random() * 100 + 600)).toFixed(1))
      this.reduce.tree =Math.floor(Math.random() * 100 + 1000)
    }
  }
}
</script>
<style lang='scss' scoped>
@import url("../index.scss");

.energy {
  display: flex;

  .energy-item {
    position: relative;
    flex: 1;
    flex-shrink: 0;
    height: 169px;
    background: url('~@/assets/images/net/r1-item_bg.png') no-repeat;
    background-size: cover;

    .energy-item-value {
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 100px;
      font-size: 14px;
      font-weight: bold;
    }

    .energy-item-name {
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 20px;
      font-size: 14px;
    }
  }
}
.seamless-header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  color: #7DBAFF;
  background: #1B4A64;
  font-size: 16px;

  >div:first-of-type,
  >div:last-of-type {
    flex-basis: 35%;
  }

  >div {
    text-align: center;
  }
}

.seamless-warp {
  overflow: hidden;
  height: 200px;

  .seamless-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;

    &:nth-child(odd) {
      background: #000;
    }

    >div:first-of-type,
    >div:last-of-type {
      flex-basis: 38%;
    }

    >div {
      text-align: center;
      font-size: 13px;
    }
  }
}
</style>