光伏功能页面

src/views/dashboard-pv/components/bottom-right/disposition.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="bottom-left-wrapper">
+    <ItemBox
+      :title="$t('dashboard.revenueTrend')"
+      @handleSetting="handleSetting"
+    >
+      <!-- <ItemBox :title="$t('dashboard.revenueTrend')"
+    :show-curve-setting="true"
+    @handleSetting="handleSetting"> -->
+      <div slot="header">
+        <div class="header-right-box">
+          <div
+            class="header-title"
+            :class="{ active: currentType === 'month' }"
+            @click="selectTime('month')"
+          >
+            {{ $t("dashboard.month") }}
+          </div>
+          <div
+            class="header-title"
+            :class="{ active: currentType === 'year' }"
+            @click="selectTime('year')"
+          >
+            {{ $t("dashboard.year") }}
+          </div>
+        </div>
+      </div>
+      <div v-loading="loading" class="charts-box">
+        <Chart :options="runOptions" :class-name="'chart'" />
+      </div>
+    </ItemBox>
+  </div>
+</template>
+
+<script>
+import { GetDynamicRealtimeCurve } from '@/api/home-page/index'
+import * as echarts from 'echarts'
+// import { chartYIndex } from '@/utils/index'
+export default {
+  name: 'Index',
+  props: {
+    stationId: {
+      type: Number,
+      default: 0
+    },
+    permissionId: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      currentType: 'month',
+      runOptions: undefined,
+      serviceList: [],
+      nameArr: [],
+      color: ['#FF9900'],
+      color2: [
+        [
+          {
+            offset: 0.0,
+            color: 'rgba(206, 235, 255, 0.1)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(206, 235, 255, 0.2)'
+          }
+        ],
+        [
+          {
+            offset: 0.0,
+            color: 'rgba(255, 184, 0, 0.1)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(255, 184, 0, 0.2)'
+          }
+        ]
+      ],
+      loading: false
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    const currentData = []
+    for (let i = 1; i < 32; i++) {
+      currentData.push({
+        date: i,
+        chargeElec: Number((Math.random() * 9000 + 1000).toFixed(2))
+      })
+    }
+    this.initCharts(currentData, 1)
+  },
+  methods: {
+    selectTime(type) {
+      this.currentType = type
+      this.getData()
+    },
+    handleSetting() {
+      this.$emit('handleSetting')
+    },
+    async getData() {
+      this.loading = true
+      const params = {
+        stationId: this.stationId,
+        pageLocation: 'runChart',
+        permissionId: this.permissionId
+      }
+      try {
+        const res = await GetDynamicRealtimeCurve(params)
+        if (res.data) {
+          // this.initCharts(res.data)
+        }
+      } catch (error) {
+        // console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    // 新增代码
+
+    initCharts(val, type) {
+      const x_data = []
+      const charge_data = []
+      // const discharge_data = []
+      // let benefit_data = [0, 0, 0, 0, 0, 0, 0]
+      if (val && val.length > 0) {
+        val.forEach((item) => {
+          x_data.push(item.date)
+          charge_data.push(item.chargeElec)
+          // discharge_data.push(item.dischargeElec)
+        })
+      }
+      this.runOptions = {
+        grid: {
+          top: '25%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          containLabel: true
+        },
+        legend: {},
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0,)',
+          borderColor: 'rgba(0,0,0,0,);',
+          borderWidth: 0,
+          textStyle: {
+            width: 160,
+            height: 250,
+            lineHeight: 24,
+            color: '#ffffff',
+            fontSize: '14',
+            fontFamily: 'SourceHanSansCN-Normal'
+          },
+          formatter: (params) => {
+            // 获取xAxis data中的数据
+            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
+            params.forEach((item) => {
+              dataStr += `<div>
+                    <div style="margin: 0 8px;">
+                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[0]};"></span>
+                      <span>${item.seriesName}</span>
+                      <span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
+                    </div>
+                  </div>`
+            })
+            const div = `<div style='border: 1px solid ;
+                          border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
+                          box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
+            return div
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: x_data,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#90e9d8'
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: '#CEEBFF'
+            },
+
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: this.$t('glance.wRMB'),
+            nameTextStyle: {
+              color: ' rgba(255, 255, 255, 0.5)'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#90e9d8'
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: '#CEEBFF'
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true, // 强制显示分割线（默认已开启，确保不被隐藏）
+              lineStyle: {
+                type: 'dashed', // 线型设为虚线
+                color: 'rgba(255,255,255,0.2)', // 虚线颜色（可自定义，如 #999、rgba(0,0,0,0.1)）
+                width: 1, // 虚线宽度
+                dashOffset: 5 // 虚线偏移量（可选，调整虚线起始位置）
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: `${this.$t('state.powerGeneration')}`,
+            type: 'bar',
+            data: charge_data,
+            barWidth: 14, // 柱状图的宽度
+            color: '#ff9900',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255, 153, 0,0.90)' },
+                { offset: 1, color: 'rgba(255, 153, 0, 0.0)' }
+              ])
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.bottom-left-wrapper {
+  width: 100%;
+  height: 100%;
+
+  .header-right-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .header-title {
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0em;
+      color: rgba(206, 235, 255, 0.5);
+      white-space: nowrap;
+      padding: 0 10px;
+      cursor: pointer;
+      font-family: Source Han Sans CN;
+
+      &.active {
+        color: #ffffff;
+        background: linear-gradient(
+          90deg,
+          rgba(0, 148, 255, 0) 0%,
+          rgba(0, 148, 255, 0.43) 51%,
+          rgba(0, 148, 255, 0) 99%
+        );
+      }
+    }
+  }
+}
+.charts-box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>