|
|
@@ -0,0 +1,1338 @@
|
|
|
+<template>
|
|
|
+ <vue-fullscreen
|
|
|
+ v-model="isFullscreen"
|
|
|
+ :exit-on-click-wrapper="false"
|
|
|
+ class="h-[100%]"
|
|
|
+ >
|
|
|
+ <div class="page" :class="{ 'fullscreen-active': isFullscreen }">
|
|
|
+ <!-- 顶部区域 -->
|
|
|
+ <div class="top_box">
|
|
|
+ <div class="top_content">
|
|
|
+ <!-- 左侧日期范围 -->
|
|
|
+ <div class="left_date">
|
|
|
+ <div class="date_tabs">
|
|
|
+ <span
|
|
|
+ :class="['tab_item', dateTab1 === '3' ? 'active' : '']"
|
|
|
+ @click="switchDateTab('dateTab1', '3')"
|
|
|
+ >年</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="['tab_item', dateTab1 === '2' ? 'active' : '']"
|
|
|
+ @click="switchDateTab('dateTab1', '2')"
|
|
|
+ >月</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="['tab_item', dateTab1 === '1' ? 'active' : '']"
|
|
|
+ @click="switchDateTab('dateTab1', '1')"
|
|
|
+ >日</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 中间标题 -->
|
|
|
+ <div class="title">
|
|
|
+ <span class="title_text">克拉玛依宇信工业科技股份有限公司</span>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧天气和时间 -->
|
|
|
+ <div class="right_info">
|
|
|
+ <div class="time_box">
|
|
|
+ <span class="time_text">{{ currentTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="fullscreen-btn" @click="toggleFullscreen">
|
|
|
+ <i
|
|
|
+ :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主内容区域 -->
|
|
|
+ <div class="page_content">
|
|
|
+ <!-- 第一行 -->
|
|
|
+ <div class="row row_1">
|
|
|
+ <!-- 左侧：企业整体经营概览 -->
|
|
|
+ <div class="panel panel_left_overview">
|
|
|
+ <div class="panel_header">
|
|
|
+ <img src="@/assets/pcs/titleIcon.png" alt="" />
|
|
|
+ <span>企业整体经营概览</span>
|
|
|
+ </div>
|
|
|
+ <div class="panel_content overview_content">
|
|
|
+ <div class="overview_row">
|
|
|
+ <div class="overview_card">
|
|
|
+ <div class="overview_left">
|
|
|
+ <div class="overview_icon">
|
|
|
+ <img src="@/assets/Component.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overview_right">
|
|
|
+ <div class="overview_label"
|
|
|
+ >{{ dateTabLabel() }}营业收入</div
|
|
|
+ >
|
|
|
+ <div class="overview_value">
|
|
|
+ <span class="value_num"
|
|
|
+ >{{
|
|
|
+ formatNum(
|
|
|
+ overview.monthlyRevenue
|
|
|
+ ? overview.monthlyRevenue / 10000
|
|
|
+ : 0,
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ <span class="value_unit">万</span>
|
|
|
+ </div>
|
|
|
+ <div class="overview_trend">
|
|
|
+ <span
|
|
|
+ class="trend_text"
|
|
|
+ v-html="renderTrend(overview.steamOutputTrend)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overview_card">
|
|
|
+ <div class="overview_left">
|
|
|
+ <div class="overview_icon">
|
|
|
+ <img src="@/assets/Component.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overview_right">
|
|
|
+ <div class="overview_label"
|
|
|
+ >{{ dateTabLabel() }}蒸汽产出</div
|
|
|
+ >
|
|
|
+ <div class="overview_value">
|
|
|
+ <span class="value_num">{{ overview.steamOutput }}</span>
|
|
|
+ <span class="value_unit">M³</span>
|
|
|
+ </div>
|
|
|
+ <div class="overview_trend">
|
|
|
+ <span
|
|
|
+ class="trend_text"
|
|
|
+ v-html="renderTrend(overview.steamOutputTrend)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overview_row">
|
|
|
+ <div class="overview_card">
|
|
|
+ <div class="overview_left">
|
|
|
+ <div class="overview_icon">
|
|
|
+ <img src="@/assets/Component.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overview_right">
|
|
|
+ <div class="overview_label"
|
|
|
+ >{{ dateTabLabel() }}能源消耗(电)</div
|
|
|
+ >
|
|
|
+ <div class="overview_value">
|
|
|
+ <span class="value_num">{{
|
|
|
+ overview.monthlyElectricityUsage
|
|
|
+ }}</span>
|
|
|
+ <span class="value_unit">KWH</span>
|
|
|
+ </div>
|
|
|
+ <div class="overview_trend">
|
|
|
+ <span
|
|
|
+ class="trend_text"
|
|
|
+ v-html="renderTrend(overview.electricityUsageTrend)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overview_card">
|
|
|
+ <div class="overview_left">
|
|
|
+ <div class="overview_icon">
|
|
|
+ <img src="@/assets/Component.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overview_right">
|
|
|
+ <div class="overview_label"
|
|
|
+ >{{ dateTabLabel() }}能源消耗(煤)</div
|
|
|
+ >
|
|
|
+ <div class="overview_value">
|
|
|
+ <span class="value_num">{{
|
|
|
+ overview.monthlyCoalUsage
|
|
|
+ }}</span>
|
|
|
+ <span class="value_unit">吨</span>
|
|
|
+ </div>
|
|
|
+ <div class="overview_trend">
|
|
|
+ <span
|
|
|
+ class="trend_text"
|
|
|
+ v-html="renderTrend(overview.coalUsageTrend)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 中间：核心产出与能耗 -->
|
|
|
+ <div class="panel panel_center_core">
|
|
|
+ <div class="panel_header">
|
|
|
+ <img src="@/assets/pcs/titleIcon.png" alt="" />
|
|
|
+ <span>核心产出与能耗</span>
|
|
|
+ </div>
|
|
|
+ <div class="panel_content core_content">
|
|
|
+ <div class="today_card">
|
|
|
+ <div class="today_value">{{ overview.steamOutput }} </div>
|
|
|
+ <div class="today_label">{{ dateTabLabel() }}蒸汽总量 (m³)</div>
|
|
|
+ </div>
|
|
|
+ <div class="today_card">
|
|
|
+ <div class="today_value"
|
|
|
+ >{{ overview.monthlyElectricityUsage }}
|
|
|
+ </div>
|
|
|
+ <div class="today_label"
|
|
|
+ >{{ dateTabLabel() }}用电总量 (kwh)</div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="today_card">
|
|
|
+ <div class="today_value">{{ overview.monthlyCoalUsage }} </div>
|
|
|
+ <div class="today_label">{{ dateTabLabel() }}用煤总量 (吨)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧：设备数据概览 -->
|
|
|
+ <div class="panel panel_right_device">
|
|
|
+ <div class="panel_header">
|
|
|
+ <img src="@/assets/pcs/titleIcon.png" alt="" />
|
|
|
+ <span>设备数据概览</span>
|
|
|
+ </div>
|
|
|
+ <div class="panel_content device_content">
|
|
|
+ <div class="device_chart_wrap">
|
|
|
+ <v-chart
|
|
|
+ ref="deviceRef"
|
|
|
+ style="height: 100%"
|
|
|
+ :option="deviceOption"
|
|
|
+ />
|
|
|
+ <div class="device_center">
|
|
|
+ <div class="center_value">{{ deviceAlarmCount }}</div>
|
|
|
+ <div class="center_label">设备告警数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 第二行标题 -->
|
|
|
+ <div class="section_title">
|
|
|
+ <img src="@/assets/pcs/titleIcon.png" alt="" />
|
|
|
+ <span>三大场站分项决策分析矩阵</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 第二行：三大场站 -->
|
|
|
+ <div class="row row_2">
|
|
|
+ <div class="panel station_panel">
|
|
|
+ <div class="panel_header">
|
|
|
+ <img src="@/assets/home/icon.png" alt="" />
|
|
|
+ <span class="station_title">{{
|
|
|
+ stationData[0]?.stationName || '5#场站'
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="panel_content station_content">
|
|
|
+ <div class="station_info">
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">收入表现</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text">
|
|
|
+ {{ stationData[0]?.stationName || '5#场站'
|
|
|
+ }}{{ dateTabLabel() }}结算收入：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(
|
|
|
+ stationData[0]?.monthlyRevenue
|
|
|
+ ? stationData[0].monthlyRevenue / 10000
|
|
|
+ : 0,
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">万元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">产出指标</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ dateTabLabel() }}蒸汽总量：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(stationData[0]?.steamOutput, 0)
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">M³</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">能源消耗</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ dateTabLabel() }}标煤总消耗：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(stationData[0]?.monthlyCoalTotal, 0)
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">吨</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="station_chart">
|
|
|
+ <v-chart
|
|
|
+ ref="stationRef0"
|
|
|
+ style="height: 100%"
|
|
|
+ :option="stationOption0"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel station_panel">
|
|
|
+ <div class="panel_header">
|
|
|
+ <img src="@/assets/home/icon.png" alt="" />
|
|
|
+ <span class="station_title">{{
|
|
|
+ stationData[1]?.stationName || '6#场站'
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="panel_content station_content">
|
|
|
+ <div class="station_info">
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">收入表现</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ stationData[1]?.stationName || '6#场站'
|
|
|
+ }}{{ dateTabLabel() }}结算收入：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(
|
|
|
+ stationData[1]?.monthlyRevenue
|
|
|
+ ? stationData[1].monthlyRevenue / 10000
|
|
|
+ : 0,
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">万元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">产出指标</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ dateTabLabel() }}蒸汽总量：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(stationData[1]?.steamOutput, 0)
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">M³</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">能源消耗</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ dateTabLabel() }}标煤总消耗：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(stationData[1]?.monthlyCoalTotal, 0)
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">吨</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="station_chart">
|
|
|
+ <v-chart
|
|
|
+ ref="stationRef1"
|
|
|
+ style="height: 100%"
|
|
|
+ :option="stationOption1"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel station_panel">
|
|
|
+ <div class="panel_header">
|
|
|
+ <img src="@/assets/home/icon.png" alt="" />
|
|
|
+ <span class="station_title">{{
|
|
|
+ stationData[2]?.stationName || '7#场站'
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="panel_content station_content">
|
|
|
+ <div class="station_info">
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">收入表现</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ stationData[2]?.stationName || '7#场站'
|
|
|
+ }}{{ dateTabLabel() }}结算收入：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(
|
|
|
+ stationData[2]?.monthlyRevenue
|
|
|
+ ? stationData[2].monthlyRevenue / 10000
|
|
|
+ : 0,
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">万元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">产出指标</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ dateTabLabel() }}蒸汽总量：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(stationData[2]?.steamOutput, 0)
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">M³</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info_group">
|
|
|
+ <div class="info_title">能源消耗</div>
|
|
|
+ <div class="info_row">
|
|
|
+ <span class="info_text"
|
|
|
+ >{{ dateTabLabel() }}标煤总消耗：</span
|
|
|
+ >
|
|
|
+ <span class="info_num">{{
|
|
|
+ formatNum(stationData[2]?.monthlyCoalTotal, 0)
|
|
|
+ }}</span>
|
|
|
+ <span class="info_unit">吨</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="station_chart">
|
|
|
+ <v-chart
|
|
|
+ ref="stationRef2"
|
|
|
+ style="height: 100%"
|
|
|
+ :option="stationOption2"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vue-fullscreen>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import VChart from 'vue-echarts';
|
|
|
+ import { echartsMixin } from '@/utils/echarts-mixin';
|
|
|
+ import { use } from 'echarts/core';
|
|
|
+ import { CanvasRenderer } from 'echarts/renderers';
|
|
|
+ import {
|
|
|
+ BarChart,
|
|
|
+ LineChart,
|
|
|
+ PieChart,
|
|
|
+ PictorialBarChart
|
|
|
+ } from 'echarts/charts';
|
|
|
+ import {
|
|
|
+ GridComponent,
|
|
|
+ TooltipComponent,
|
|
|
+ LegendComponent,
|
|
|
+ TitleComponent
|
|
|
+ } from 'echarts/components';
|
|
|
+ use([
|
|
|
+ CanvasRenderer,
|
|
|
+ BarChart,
|
|
|
+ LineChart,
|
|
|
+ PieChart,
|
|
|
+ PictorialBarChart,
|
|
|
+ GridComponent,
|
|
|
+ TooltipComponent,
|
|
|
+ LegendComponent,
|
|
|
+ TitleComponent
|
|
|
+ ]);
|
|
|
+ import { component } from 'vue-fullscreen';
|
|
|
+ import { equipment, stationCards, dashboardOverview } from '@/api/ems';
|
|
|
+ export default {
|
|
|
+ name: 'DecisionSupport',
|
|
|
+ components: { VChart, VueFullscreen: component },
|
|
|
+ mixins: [
|
|
|
+ echartsMixin(['deviceRef', 'stationRef0', 'stationRef1', 'stationRef2'])
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ timer: null,
|
|
|
+ timeTimer: null,
|
|
|
+ isFullscreen: false,
|
|
|
+ currentTime: '',
|
|
|
+ dateTab1: '2',
|
|
|
+ overview: {
|
|
|
+ monthlyRevenue: '',
|
|
|
+ revenueTrend: '',
|
|
|
+ monthlyCoalUsage: '',
|
|
|
+ coalUsageTrend: '',
|
|
|
+ monthlyElectricityUsage: '',
|
|
|
+ electricityUsageTrend: '',
|
|
|
+ monthlyWaterUsage: '',
|
|
|
+ steamOutput: '',
|
|
|
+ steamOutputTrend: '',
|
|
|
+ waterCost: '',
|
|
|
+ waterCostTrend: ''
|
|
|
+ },
|
|
|
+ deviceOption: {},
|
|
|
+ stationOption0: {},
|
|
|
+ stationOption1: {},
|
|
|
+ stationOption2: {},
|
|
|
+ deviceAlarmCount: 0,
|
|
|
+ deviceFaultRate: 0,
|
|
|
+ deviceRunningRate: 0,
|
|
|
+ alarmCountTrend: 0,
|
|
|
+ faultRateTrend: 0,
|
|
|
+ runningRateTrend: 0,
|
|
|
+ totalDeviceCount: 0,
|
|
|
+ stationData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isFullscreen() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.resizeAllCharts();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.resizeAllCharts();
|
|
|
+ }, 300);
|
|
|
+ this.init();
|
|
|
+ this.updateTime();
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.init();
|
|
|
+ }, 60000);
|
|
|
+ this.timeTimer = setInterval(() => {
|
|
|
+ this.updateTime();
|
|
|
+ }, 1000);
|
|
|
+ this.setRootFontSize();
|
|
|
+ window.addEventListener('resize', this.handleResize);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('resize', this.handleResize);
|
|
|
+ clearInterval(this.timer);
|
|
|
+ clearInterval(this.timeTimer);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateTime() {
|
|
|
+ const now = new Date();
|
|
|
+ const y = now.getFullYear();
|
|
|
+ const m = now.getMonth() + 1;
|
|
|
+ const d = now.getDate();
|
|
|
+ const h = String(now.getHours()).padStart(2, '0');
|
|
|
+ const min = String(now.getMinutes()).padStart(2, '0');
|
|
|
+ const s = String(now.getSeconds()).padStart(2, '0');
|
|
|
+ this.currentTime = `${y}-${m}-${d} ${h}:${min}:${s}`;
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.initDeviceData();
|
|
|
+ this.initStationData();
|
|
|
+ this.dashboardOverview();
|
|
|
+ },
|
|
|
+ dashboardOverview() {
|
|
|
+ dashboardOverview({
|
|
|
+ statisticsCycle: this.dateTab1
|
|
|
+ }).then((res) => {
|
|
|
+ this.overview = res;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设备数据概览
|
|
|
+ initDeviceData() {
|
|
|
+ equipment({
|
|
|
+ statisticsCycle: this.dateTab1
|
|
|
+ }).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ this.deviceAlarmCount = res.deviceAlarmCount || 0;
|
|
|
+ this.deviceFaultRate = this.toNumber(res.deviceFaultRate);
|
|
|
+ this.deviceRunningRate = this.toNumber(res.deviceRunningRate);
|
|
|
+ this.alarmCountTrend = res.alarmCountTrend || 0;
|
|
|
+ this.faultRateTrend = res.faultRateTrend || 0;
|
|
|
+ this.runningRateTrend = res.runningRateTrend || 0;
|
|
|
+ this.totalDeviceCount = res.totalDeviceCount || 0;
|
|
|
+ this.deviceOption = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ backgroundColor: 'rgba(10, 25, 50, 0.9)',
|
|
|
+ borderColor: '#00d4ff',
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: { color: '#fff' }
|
|
|
+ },
|
|
|
+ legend: { show: false },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '设备状态',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['47%', '75%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ startAngle: 126,
|
|
|
+ avoidLabelOverlap: true,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside',
|
|
|
+ formatter: '{d}%\n{b}',
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ lineHeight: 20
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ length: 15,
|
|
|
+ length2: 25,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255,255,255,0.5)',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 0
|
|
|
+ },
|
|
|
+ selectedMode: true,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: this.deviceFaultRate,
|
|
|
+ name: '设备故障率',
|
|
|
+ itemStyle: { color: '#ff4444' },
|
|
|
+ selected: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.deviceRunningRate,
|
|
|
+ name: '设备运行率',
|
|
|
+ itemStyle: { color: '#00d4ff' }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 场站数据
|
|
|
+ async initStationData() {
|
|
|
+ const stationIds = [
|
|
|
+ '2051928982747131905', // 5#站
|
|
|
+ '2051904180841918465', // 6#站
|
|
|
+ '2051870061349089281' // 7#站
|
|
|
+ ];
|
|
|
+ // const stationData = [];
|
|
|
+ this.stationData = [];
|
|
|
+ for (const regionId of stationIds) {
|
|
|
+ try {
|
|
|
+ const res = await stationCards({
|
|
|
+ statisticsCycle: this.dateTab1,
|
|
|
+ regionId
|
|
|
+ });
|
|
|
+ this.stationData.push(res[0] || null);
|
|
|
+ } catch (e) {
|
|
|
+ // this.stationData.push(null);
|
|
|
+ console.error('场站数据请求失败', regionId, e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.stationData, ' this.stationData');
|
|
|
+ // this.stationData = stationData;
|
|
|
+ const pieColors = [
|
|
|
+ ['#00d4ff', '#ff6b6b', '#ffd93d', '#6bcb77'],
|
|
|
+ ['#00d4ff', '#ff6b6b', '#ffd93d', '#6bcb77'],
|
|
|
+ ['#00d4ff', '#ff6b6b', '#ffd93d', '#6bcb77']
|
|
|
+ ];
|
|
|
+ const stationOptions = this.stationData.map((item, idx) => {
|
|
|
+ const colors = pieColors[idx];
|
|
|
+ console.log(colors);
|
|
|
+ if (!item) {
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ backgroundColor: 'rgba(10, 25, 50, 0.9)',
|
|
|
+ borderColor: '#00d4ff',
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: { color: '#fff' }
|
|
|
+ },
|
|
|
+ legend: { show: false },
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ backgroundColor: 'rgba(10, 25, 50, 0.9)',
|
|
|
+ borderColor: '#00d4ff',
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: { color: '#fff' }
|
|
|
+ },
|
|
|
+ legend: { show: false },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '能源消耗',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['45%', '75%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'center',
|
|
|
+ formatter: `${item.steamOutput || 0}\n蒸汽总量(m³)`,
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 14,
|
|
|
+ lineHeight: 20
|
|
|
+ },
|
|
|
+ labelLine: { show: false },
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: 'rgba(5, 27, 66, 0.8)'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: item.monthlyWaterTotal || 0,
|
|
|
+ name: '用水(m³)',
|
|
|
+ itemStyle: { color: colors[0] }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: item.monthlyElectricityTotal || 0,
|
|
|
+ name: '用电(KWH)',
|
|
|
+ itemStyle: { color: colors[1] }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: item.monthlyCoalTotal || 0,
|
|
|
+ name: '用煤(吨)',
|
|
|
+ itemStyle: { color: colors[2] }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: item.monthlyEnergyCost || 0,
|
|
|
+ name: '费用(元)',
|
|
|
+ itemStyle: { color: colors[3] }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.stationOption0 = stationOptions[0] || {};
|
|
|
+ this.stationOption1 = stationOptions[1] || {};
|
|
|
+ this.stationOption2 = stationOptions[2] || {};
|
|
|
+ },
|
|
|
+ switchDateTab(key, val) {
|
|
|
+ this[key] = val;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ getCycleParam() {
|
|
|
+ const map = { 1: '3', 2: '2', 3: '1' };
|
|
|
+ return map[this.dateTab1] || this.dateTab1;
|
|
|
+ },
|
|
|
+ dateTabLabel() {
|
|
|
+ const map = { 1: '日', 2: '月度', 3: '年度' };
|
|
|
+ return map[this.dateTab1] || '';
|
|
|
+ },
|
|
|
+
|
|
|
+ formatNum(val, fixed = 0) {
|
|
|
+ if (val === null || val === undefined || val === '') return '0';
|
|
|
+ return Number(val).toFixed(fixed);
|
|
|
+ },
|
|
|
+ toNumber(val) {
|
|
|
+ if (typeof val === 'number') return val;
|
|
|
+ if (typeof val === 'string') return Number(val.replace('%', '')) || 0;
|
|
|
+ return Number(val) || 0;
|
|
|
+ },
|
|
|
+ renderTrend(trend) {
|
|
|
+ const num = Number(trend);
|
|
|
+ if (isNaN(num) || num === 0) return '环比持平 0';
|
|
|
+ if (num > 0) return '环比增速 <i class="el-icon-top"></i> ' + num + '%';
|
|
|
+ return '环比下降 <i class="el-icon-bottom"></i> ' + Math.abs(num) + '%';
|
|
|
+ },
|
|
|
+ switchStationTab(idx, val) {
|
|
|
+ const key = 'stationTab' + idx;
|
|
|
+ this[key] = val;
|
|
|
+ },
|
|
|
+ toggleFullscreen() {
|
|
|
+ this.isFullscreen = !this.isFullscreen;
|
|
|
+ },
|
|
|
+ handleResize() {
|
|
|
+ this.setRootFontSize();
|
|
|
+ this.resizeAllCharts();
|
|
|
+ },
|
|
|
+ setRootFontSize() {
|
|
|
+ const width = window.innerWidth;
|
|
|
+ const baseWidth = 1920;
|
|
|
+ const baseFontSize = 16;
|
|
|
+ const fontSize = (width / baseWidth) * baseFontSize;
|
|
|
+ document.documentElement.style.fontSize = fontSize + 'px';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 96px);
|
|
|
+ background-color: #051b42;
|
|
|
+ background-image: url('@/assets/home/image_207.png');
|
|
|
+ background-size: cover;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 顶部区域
|
|
|
+ .top_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ background-image: url('@/assets/home/herder.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .top_content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 0;
|
|
|
+ .title_text {
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
+ background-image: linear-gradient(to top, #009dff, 15%, #fff);
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left_date {
|
|
|
+ margin-top: 1%;
|
|
|
+ z-index: 1;
|
|
|
+ .date_range {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ color: #38fff9;
|
|
|
+ font-size: 14px;
|
|
|
+ background: rgba(0, 119, 229, 0.2);
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ i {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ z-index: 1;
|
|
|
+ .weather_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ .weather_icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .weather_text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .weather_date {
|
|
|
+ color: #38fff9;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .weather_temp {
|
|
|
+ color: #38fff9;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time_box {
|
|
|
+ .time_text {
|
|
|
+ color: #38fff9;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'DS-DIGI';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fullscreen-btn {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(56, 255, 249, 0.15);
|
|
|
+ border: 1px solid #38fff9;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #38fff9;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: rgba(56, 255, 249, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 主内容区域
|
|
|
+ .page_content {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 18px 15px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ gap: 45px;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row_1 {
|
|
|
+ .panel {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ padding-bottom: 30px;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row_2 {
|
|
|
+ .station_panel {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date_tabs {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+ .tab_item {
|
|
|
+ padding: 8px 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ background: rgba(0, 212, 255, 0.3);
|
|
|
+ // border-color: #00d4ff;
|
|
|
+ // color: #38fff9;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 面板通用样式
|
|
|
+ .panel {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .panel_header {
|
|
|
+ height: 40px;
|
|
|
+ min-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ background-image: url('@/assets/pcs/titleb.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 8px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel_content {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ min-height: 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 企业整体经营概览
|
|
|
+ .overview_content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .overview_row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overview_card {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border-radius: 6px;
|
|
|
+ max-width: calc(50% - 4px);
|
|
|
+ .overview_left {
|
|
|
+ margin-right: 15px;
|
|
|
+ .overview_icon {
|
|
|
+ width: 88x;
|
|
|
+ height: 88px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overview_right {
|
|
|
+ .overview_label {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #dceff3cc;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ .overview_value {
|
|
|
+ .value_num {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: 'DS-DIGI';
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+ .value_unit {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overview_trend {
|
|
|
+ margin-top: 2px;
|
|
|
+ .trend_text {
|
|
|
+ font-size: 11px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ color: #ff6b6b;
|
|
|
+ .trend_icon {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 核心产出与能耗
|
|
|
+ .core_content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ padding: 4px 8px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .core_item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .core_value {
|
|
|
+ font-size: 1.6vw;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: 'DS-Digital';
|
|
|
+ color: #38fff9;
|
|
|
+ text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .core_label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ .core_unit {
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设备数据概览
|
|
|
+ .device_content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 15px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .device_left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .device_label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ .dot {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .device_label_text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .device_pct {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: 'DS-DIGI';
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .device_sub {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device_chart_wrap {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ .device_center {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ pointer-events: none;
|
|
|
+ .center_label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .center_value {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: 'DS-Digital';
|
|
|
+ color: #38fff9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row_2 {
|
|
|
+ padding-bottom: 35px;
|
|
|
+ }
|
|
|
+ // 第二行标题
|
|
|
+ .section_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 0 15px;
|
|
|
+ height: 40px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background-image: url('@/assets/pcs/titleb.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 35px;
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 场站面板
|
|
|
+ .station_panel {
|
|
|
+ background-image: url('@/assets/home/item.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .panel_header {
|
|
|
+ height: 12.5%;
|
|
|
+ min-height: 32px;
|
|
|
+ background-image: none;
|
|
|
+ img {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ }
|
|
|
+ .station_title {
|
|
|
+ font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .station_content {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 15px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ gap: 10px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .station_info {
|
|
|
+ flex: 1.2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ .info_group {
|
|
|
+ position: absolute;
|
|
|
+ .info_title {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #d5dbeb;
|
|
|
+ padding: 6px 10px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ rgba(0, 120, 215, 0.4) 0%,
|
|
|
+ rgba(0, 80, 160, 0.1) 100%
|
|
|
+ );
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .info_row {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: 6px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ margin-left: 10px;
|
|
|
+ .info_text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .info_num {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: 'DS-DIGI';
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .info_unit {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info_group:nth-of-type(1) {
|
|
|
+ top: 5%;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .info_title {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info_group:nth-of-type(2) {
|
|
|
+ top: 35%;
|
|
|
+ width: 45%;
|
|
|
+
|
|
|
+ .info_title {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info_group:nth-of-type(3) {
|
|
|
+ width: 44%;
|
|
|
+ top: 70%;
|
|
|
+ .info_title {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .station_chart {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 全屏样式
|
|
|
+ .fullscreen-active {
|
|
|
+ height: 100vh !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 深色主题表格样式
|
|
|
+ ::deep(.el-table__row > td) {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ ::deep(.el-table th.is-leaf) {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ ::deep(.el-table),
|
|
|
+ ::deep(.el-table__expanded-cell) {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ ::deep(.el-table::before) {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ ::deep(.el-table__inner-wrapper) {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ ::deep(.el-table tr) {
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ ::deep(.el-table td) {
|
|
|
+ border-bottom: 1px solid rgba(56, 255, 249, 0.1) !important;
|
|
|
+ }
|
|
|
+ ::deep(.el-table__body tr:hover > td) {
|
|
|
+ background-color: rgba(255, 123, 48, 0.3) !important;
|
|
|
+ }
|
|
|
+ ::deep(.el-table__body-wrapper) {
|
|
|
+ overflow-y: auto !important;
|
|
|
+ }
|
|
|
+ ::deep(.el-input__inner) {
|
|
|
+ color: #fff;
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .today_card {
|
|
|
+ width: 32%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: center;
|
|
|
+ .today_value {
|
|
|
+ font-size: 1.6vw;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: 'DS-Digital';
|
|
|
+ color: #fff;
|
|
|
+ // margin-bottom: 4px;
|
|
|
+ background-image: url('@/assets/home/centerBk.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ min-height: 120px;
|
|
|
+ min-width: 160px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ .today_label {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .today_chart {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
