大屏
This commit is contained in:
33
src/api/large/index.ts
Normal file
33
src/api/large/index.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
// 查询图表总数据
|
||||||
|
export function getPowerStationOverview() {
|
||||||
|
return request({
|
||||||
|
url: '/ginlong/api/getPowerStationOverview',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//能源收益
|
||||||
|
export function getStationMonthOverview(params: any) {
|
||||||
|
return request({
|
||||||
|
url: '/ginlong/api/getStationMonthOverview',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//能源收益
|
||||||
|
export function getInverterListOverview(params: any) {
|
||||||
|
return request({
|
||||||
|
url: '/ginlong/api/getInverterListOverview',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//警告
|
||||||
|
export function getAlarmListOverview(params?: any) {
|
||||||
|
return request({
|
||||||
|
url: '/ginlong/api/getAlarmListOverview',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
27252
src/assets/china.json
Normal file
27252
src/assets/china.json
Normal file
File diff suppressed because it is too large
Load Diff
7522
src/assets/cq.json
Normal file
7522
src/assets/cq.json
Normal file
File diff suppressed because it is too large
Load Diff
86
src/assets/styles/element.scss
Normal file
86
src/assets/styles/element.scss
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
// 选择框样式
|
||||||
|
.el-select {
|
||||||
|
.el-select__wrapper {
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 0.1px solid #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select__placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.9) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-popper {
|
||||||
|
background: transparent !important;
|
||||||
|
border: 1px solid rgba(24, 177, 219, 0.3) !important;
|
||||||
|
|
||||||
|
.el-popper__arrow:before {
|
||||||
|
background: rgba(10, 79, 84, 0.5) !important;
|
||||||
|
border: 1px solid rgba(10, 79, 84, 1) !important;
|
||||||
|
right: 0;
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select-dropdown__item {
|
||||||
|
color: rgba(255, 255, 255, 0.9) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-hovering {
|
||||||
|
background: rgba(10, 79, 84, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 日期组件样式
|
||||||
|
.el-input__wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1px 11px;
|
||||||
|
background-color: transparent !important;
|
||||||
|
background-image: none;
|
||||||
|
// border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
||||||
|
// cursor: text;
|
||||||
|
// transition: var(--el-transition-box-shadow);
|
||||||
|
// transform: translate3d(0, 0, 0);
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 0.1px solid #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
color: #fff !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table-cell__text {
|
||||||
|
color: #fff !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-picker {
|
||||||
|
/* --el-datepicker-text-color: var(--el-text-color-regular); */
|
||||||
|
--el-datepicker-off-text-color: var(--el-text-color-placeholder);
|
||||||
|
--el-datepicker-header-text-color: #fff !important;
|
||||||
|
--el-datepicker-icon-color: #fff !important;
|
||||||
|
/* --el-datepicker-border-color: var(--el-disabled-border-color); */
|
||||||
|
/* --el-datepicker-inner-border-color: var(--el-border-color-light); */
|
||||||
|
/* --el-datepicker-inrange-bg-color: var(--el-border-color-extra-light); */
|
||||||
|
/* --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light); */
|
||||||
|
/* --el-datepicker-active-color: var(--el-color-primary); */
|
||||||
|
--el-datepicker-hover-text-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-picker__header-label {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-picker-panel {
|
||||||
|
color: #fff !important;
|
||||||
|
background: rgba(10, 79, 84, 0.85) !important;
|
||||||
|
|
||||||
|
// border-radius: var(--el-border-radius-base);
|
||||||
|
// line-height: 30px;
|
||||||
|
}
|
||||||
@ -9,6 +9,12 @@
|
|||||||
@use 'element-plus/dist/index.css';
|
@use 'element-plus/dist/index.css';
|
||||||
@use './dialog.scss';
|
@use './dialog.scss';
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'AlimamaShuHeiTi';
|
||||||
|
src: url('@/assets/font/庞门正道标题体2.0增强版.ttf') format('truetype');
|
||||||
|
// font-weight: normal;
|
||||||
|
// font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
169
src/components/EchartBox/index.vue
Normal file
169
src/components/EchartBox/index.vue
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="echartBox" class="echarts"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import china from '@/assets/china.json';
|
||||||
|
import cq from '@/assets/cq.json';
|
||||||
|
import { ref, onMounted, watchEffect, onBeforeUnmount } from 'vue';
|
||||||
|
import * as echarts from 'echarts/core';
|
||||||
|
import {
|
||||||
|
BarChart, // 柱状图
|
||||||
|
// 系列类型的定义后缀都为 SeriesOption
|
||||||
|
BarSeriesOption,
|
||||||
|
LineChart, // 折线图
|
||||||
|
LineSeriesOption,
|
||||||
|
PieChart, // 饼图
|
||||||
|
PieSeriesOption,
|
||||||
|
PictorialBarChart,
|
||||||
|
MapChart,
|
||||||
|
ScatterChart,
|
||||||
|
EffectScatterChart,
|
||||||
|
LinesChart
|
||||||
|
} from 'echarts/charts';
|
||||||
|
import {
|
||||||
|
// 组件类型的定义后缀都为 ComponentOption
|
||||||
|
// 标题
|
||||||
|
TitleComponent,
|
||||||
|
TitleComponentOption,
|
||||||
|
// 提示框
|
||||||
|
TooltipComponent,
|
||||||
|
TooltipComponentOption,
|
||||||
|
// 直角坐标系
|
||||||
|
GridComponent,
|
||||||
|
GridComponentOption,
|
||||||
|
// 图例
|
||||||
|
LegendComponent,
|
||||||
|
LegendComponentOption,
|
||||||
|
// 数据集组件
|
||||||
|
DatasetComponent,
|
||||||
|
DatasetComponentOption,
|
||||||
|
// 内置数据转换器组件 (filter, sort)
|
||||||
|
TransformComponent,
|
||||||
|
DataZoomComponent,
|
||||||
|
DataZoomComponentOption,
|
||||||
|
// 极坐标
|
||||||
|
PolarComponent,
|
||||||
|
PolarComponentOption,
|
||||||
|
MarkLineComponentOption,
|
||||||
|
MarkLineComponent,
|
||||||
|
// MarkPoint
|
||||||
|
MarkPointComponent,
|
||||||
|
MarkPointComponentOption,
|
||||||
|
// VisualMap
|
||||||
|
VisualMapComponent,
|
||||||
|
VisualMapComponentOption,
|
||||||
|
// GeoComponent
|
||||||
|
GeoComponent,
|
||||||
|
GeoComponentOption
|
||||||
|
} from 'echarts/components';
|
||||||
|
import { LabelLayout, UniversalTransition } from 'echarts/features';
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import 'echarts-gl';
|
||||||
|
|
||||||
|
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
|
||||||
|
type ECOption = echarts.ComposeOption<
|
||||||
|
| BarSeriesOption
|
||||||
|
| LineSeriesOption
|
||||||
|
| PieSeriesOption
|
||||||
|
| TitleComponentOption
|
||||||
|
| TooltipComponentOption
|
||||||
|
| GridComponentOption
|
||||||
|
| DatasetComponentOption
|
||||||
|
| LegendComponentOption
|
||||||
|
| DataZoomComponentOption
|
||||||
|
| PolarComponentOption
|
||||||
|
| MarkLineComponentOption
|
||||||
|
| MarkPointComponentOption
|
||||||
|
| VisualMapComponentOption
|
||||||
|
| GeoComponentOption
|
||||||
|
>;
|
||||||
|
|
||||||
|
// 注册必须的组件
|
||||||
|
echarts.use([
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent,
|
||||||
|
DatasetComponent,
|
||||||
|
TransformComponent,
|
||||||
|
LegendComponent,
|
||||||
|
DataZoomComponent,
|
||||||
|
PolarComponent,
|
||||||
|
MarkLineComponent,
|
||||||
|
MarkPointComponent,
|
||||||
|
LabelLayout,
|
||||||
|
UniversalTransition,
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
LineChart,
|
||||||
|
PieChart,
|
||||||
|
VisualMapComponent,
|
||||||
|
PictorialBarChart,
|
||||||
|
GeoComponent,
|
||||||
|
MapChart,
|
||||||
|
ScatterChart,
|
||||||
|
EffectScatterChart,
|
||||||
|
LinesChart
|
||||||
|
]);
|
||||||
|
const props = defineProps({
|
||||||
|
option: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['echartsEvent']);
|
||||||
|
const echartBox = ref(null);
|
||||||
|
let chart!: echarts.ECharts;
|
||||||
|
|
||||||
|
const setChart = (option: ECOption): void => {
|
||||||
|
if (!props.option || !echartBox.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
chart.resize();
|
||||||
|
chart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetChart = (): void => {
|
||||||
|
const option = chart.getOption();
|
||||||
|
if (!option || !echartBox.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
chart.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
(echarts as any).registerMap('china', { geoJSON: china });
|
||||||
|
(echarts as any).registerMap('cq', { geoJSON: cq });
|
||||||
|
chart = echarts.init(echartBox.value as any);
|
||||||
|
|
||||||
|
emit('echartsEvent', chart);
|
||||||
|
setChart(props.option);
|
||||||
|
// 界面拉伸后重设
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
resetChart();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
if (chart) {
|
||||||
|
chart.clear();
|
||||||
|
}
|
||||||
|
setChart(props.option);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (chart) {
|
||||||
|
chart.dispose();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.echarts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -62,6 +62,11 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||||||
component: () => import('@/views/error/401.vue'),
|
component: () => import('@/views/error/401.vue'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/largeScreen',
|
||||||
|
component: () => import('@/views/largeScreen/index.vue'),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
@ -92,9 +97,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
// 动态路由，基于用户权限动态去加载
|
// 动态路由，基于用户权限动态去加载
|
||||||
export const dynamicRoutes: RouteRecordRaw[] = [
|
export const dynamicRoutes: RouteRecordRaw[] = [];
|
||||||
|
|
||||||
];
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建路由
|
* 创建路由
|
||||||
|
|||||||
318
src/views/largeScreen/components/centerPage.vue
Normal file
318
src/views/largeScreen/components/centerPage.vue
Normal file
@ -0,0 +1,318 @@
|
|||||||
|
<template>
|
||||||
|
<div class="centerPage">
|
||||||
|
<div class="centerPage_list">
|
||||||
|
<div class="card">
|
||||||
|
<div class="title">今日总发电量</div>
|
||||||
|
<div class="value">
|
||||||
|
<span style="color: rgba(29, 214, 255, 1)">{{ data?.dayEnergy ?? '0' }}</span>
|
||||||
|
<span style="color: rgba(156, 163, 175, 1); font-size: 12px">kMh</span>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="@/assets/large/center4.png" style="width: 16px; height: 16px" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) != 0">
|
||||||
|
<el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0"><Top /></el-icon>
|
||||||
|
<el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
|
||||||
|
<span>{{ Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0 ? '新增' : '减少' }}</span>
|
||||||
|
<span>{{ (Math.abs(Number(data?.dayEnergy) - Number(data?.dayEnergyOld)) / Number(data?.dayEnergy)) * 100 }} %</span>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-else>无</div>
|
||||||
|
<div class="target">目标: 14,200 kWh</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="title">发电效率</div>
|
||||||
|
<div class="value">
|
||||||
|
<span style="color: rgba(0, 227, 150, 1)">{{ data?.generateElectricity ?? '0' }}</span>
|
||||||
|
<span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="@/assets/large/center3.png" style="width: 16px; height: 16px" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) != 0">
|
||||||
|
<el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0"><Top /></el-icon>
|
||||||
|
<el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
|
||||||
|
<span>{{ Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0 ? '新增' : '减少' }}</span>
|
||||||
|
<span
|
||||||
|
>{{
|
||||||
|
(Math.abs(Number(data?.generateElectricity) - Number(data?.generateElectricityOld)) / Number(data?.generateElectricity)) * 100
|
||||||
|
}}
|
||||||
|
%</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-else>无</div>
|
||||||
|
|
||||||
|
<div class="target">基准: 90.0%</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="title">设备健康度</div>
|
||||||
|
<div class="value">
|
||||||
|
<span style="color: rgba(54, 207, 201, 1)">{{ data?.health ?? '0' }}</span>
|
||||||
|
<span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="@/assets/large/center2.png" style="width: 16px; height: 16px" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-if="Number(data?.health) - Number(data?.healthOld) != 0">
|
||||||
|
<el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.health) - Number(data?.healthOld) > 0"><Top /></el-icon>
|
||||||
|
<el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
|
||||||
|
<span>{{ Number(data?.health) - Number(data?.healthOld) > 0 ? '新增' : '减少' }}</span>
|
||||||
|
<span>{{ (Math.abs(Number(data?.health) - Number(data?.healthOld)) / Number(data?.health)) * 100 }} %</span>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-else>无</div>
|
||||||
|
<div class="target">检测: 24分钟前</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="title">CO2减排量</div>
|
||||||
|
<div class="value">
|
||||||
|
<span style="color: rgba(179, 0, 255, 1)">{{ data?.powerStationAvoidedCo2 ?? '0' }}</span>
|
||||||
|
|
||||||
|
<span style="color: rgba(156, 163, 175, 1); font-size: 12px">吨</span>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="@/assets/large/center1.png" style="width: 16px; height: 16px" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) != 0">
|
||||||
|
<el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0"
|
||||||
|
><Top
|
||||||
|
/></el-icon>
|
||||||
|
<el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
|
||||||
|
<span>{{ Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0 ? '新增' : '减少' }}</span>
|
||||||
|
<span
|
||||||
|
>{{
|
||||||
|
(Math.abs(Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old)) / Number(data?.powerStationAvoidedCo2)) * 100
|
||||||
|
}}
|
||||||
|
%</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="compare" v-else>无</div>
|
||||||
|
|
||||||
|
<div class="target">目标: 12560吨</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="centerPage_map">
|
||||||
|
<div ref="mapRef" class="map-container" style="width: 100%; height: 98%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getPowerStationOverview } from '@/api/large';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import china from '@/assets/china.json';
|
||||||
|
const data = ref<any>({});
|
||||||
|
|
||||||
|
// 地图容器引用
|
||||||
|
const mapRef = ref<HTMLDivElement | null>(null);
|
||||||
|
// ECharts实例
|
||||||
|
let myChart: any = null;
|
||||||
|
|
||||||
|
// 响应窗口大小变化
|
||||||
|
const handleResize = () => {
|
||||||
|
if (myChart) {
|
||||||
|
myChart.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化地图
|
||||||
|
const initEcharts = () => {
|
||||||
|
if (!mapRef.value) {
|
||||||
|
console.error('未找到地图容器元素');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 注册地图
|
||||||
|
echarts.registerMap('china', china as any);
|
||||||
|
|
||||||
|
// 地图数据
|
||||||
|
const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
|
||||||
|
|
||||||
|
// 散点数据
|
||||||
|
// 散点数据 - 使用图片标记并调整名称位置
|
||||||
|
const scatterData: any[] = [
|
||||||
|
{
|
||||||
|
name: '田东光伏智慧生态工地开发项目',
|
||||||
|
value: [107.15, 23.63],
|
||||||
|
// 使用图片作为标记（注意：需替换为你的图片实际路径）
|
||||||
|
symbol: 'diamond',
|
||||||
|
// 标记颜色
|
||||||
|
itemStyle: {
|
||||||
|
color: '#0166d6'
|
||||||
|
},
|
||||||
|
// 图片标记大小（宽, 高）
|
||||||
|
symbolSize: [20, 20],
|
||||||
|
// 名称样式设置
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{b}', // 显示名称
|
||||||
|
position: 'top', // 名称在图片上方
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12,
|
||||||
|
// 可选：添加文字背景以增强可读性
|
||||||
|
backgroundColor: 'rgba(3, 26, 52, 0.7)',
|
||||||
|
padding: [3, 6],
|
||||||
|
borderRadius: 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
// 初始化新实例，强制清除缓存
|
||||||
|
myChart = echarts.init(mapRef.value, null, {
|
||||||
|
renderer: 'canvas', // 明确指定渲染器
|
||||||
|
useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
|
||||||
|
});
|
||||||
|
// 配置项
|
||||||
|
const option: any = {
|
||||||
|
roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
|
||||||
|
geo: {
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
zoom: 5,
|
||||||
|
center: [107.15, 23.63],
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: '#031a34', // 地图区域底色
|
||||||
|
borderColor: '#1e3a6e', // 区域边框颜色
|
||||||
|
borderWidth: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: function (params: any) {
|
||||||
|
return params.name + (params.value ? `：${params.value}` : '');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
geoIndex: 0,
|
||||||
|
// 关键：在series级别定义emphasis，优先级最高
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#fff', // 强制设置hover颜色
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: '#02417e' // 重复设置确保生效
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 确保没有使用默认样式
|
||||||
|
select: {
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: '#02417e'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: mapData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
data: scatterData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置配置项
|
||||||
|
myChart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 组件挂载时初始化
|
||||||
|
onMounted(() => {
|
||||||
|
// 确保DOM渲染完成
|
||||||
|
nextTick(() => {
|
||||||
|
initEcharts();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载时清理
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
if (myChart) {
|
||||||
|
myChart.dispose();
|
||||||
|
myChart = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const getDataList = () => {
|
||||||
|
getPowerStationOverview().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
if (res.code == 200) {
|
||||||
|
data.value = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getDataList();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.centerPage {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 10px 10px 10px;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
.centerPage_list {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
padding: 0 0px 10px 0px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 13px;
|
||||||
|
.card {
|
||||||
|
width: 220px;
|
||||||
|
background: rgba(12, 30, 53, 0.4); /* 深色背景，模拟科技感 */
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
font-size: 24px;
|
||||||
|
// font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.value span {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: rgba(29, 214, 255, 0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.compare {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #4ee44e; /* 绿色标识增长 */
|
||||||
|
padding-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
}
|
||||||
|
.target {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 4px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.centerPage_map {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
180
src/views/largeScreen/components/header.vue
Normal file
180
src/views/largeScreen/components/header.vue
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
<div class="header_left">
|
||||||
|
<div class="header_left_img">
|
||||||
|
<img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; padding-left: 10px">安全生产天数：</div>
|
||||||
|
<div class="header_left_text">
|
||||||
|
1,235
|
||||||
|
<span style="font-size: 12px">天</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<div class="title_text">智慧运维管理平台</div>
|
||||||
|
<div>Intelligent Operations Management Platform</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="top-bar">
|
||||||
|
<!-- 左侧：天气图标 + 日期文字 -->
|
||||||
|
<div class="left-section">
|
||||||
|
<img src="@/assets/large/weather.png" alt="天气图标" />
|
||||||
|
|
||||||
|
<span>
|
||||||
|
<span>多云 9°/18°</span>
|
||||||
|
<span style="padding-left: 20px"> {{ week[date.week] }} {{ date.ymd }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<div class="divider">
|
||||||
|
<div class="top-block"></div>
|
||||||
|
<div class="bottom-block"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 右侧：管理系统图标 + 文字 -->
|
||||||
|
<div class="right-section">
|
||||||
|
<img src="@/assets/large/setting.png" alt="设置图标" />
|
||||||
|
<span>管理系统</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||||
|
const date = ref({
|
||||||
|
ymd: '',
|
||||||
|
hms: '',
|
||||||
|
week: 0
|
||||||
|
});
|
||||||
|
const setTime = () => {
|
||||||
|
let date1 = new Date();
|
||||||
|
let year: any = date1.getFullYear();
|
||||||
|
let month: any = date1.getMonth() + 1;
|
||||||
|
let day: any = date1.getDate();
|
||||||
|
let hours: any = date1.getHours();
|
||||||
|
if (hours < 10) {
|
||||||
|
hours = '0' + hours;
|
||||||
|
}
|
||||||
|
let minutes: any = date1.getMinutes();
|
||||||
|
if (minutes < 10) {
|
||||||
|
minutes = '0' + minutes;
|
||||||
|
}
|
||||||
|
let seconds: any = date1.getSeconds();
|
||||||
|
if (seconds < 10) {
|
||||||
|
seconds = '0' + seconds;
|
||||||
|
}
|
||||||
|
date.value.ymd = year + '-' + month + '-' + day;
|
||||||
|
date.value.hms = hours + ':' + minutes + ':' + seconds;
|
||||||
|
date.value.week = date1.getDay();
|
||||||
|
};
|
||||||
|
// 添加定时器，每秒更新一次时间
|
||||||
|
const timer = setInterval(setTime, 1000);
|
||||||
|
// 组件卸载时清除定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.header_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.header_left_img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// padding-right: 10px;
|
||||||
|
}
|
||||||
|
.header_left_text {
|
||||||
|
font-weight: 500;
|
||||||
|
text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.title > div:first-child {
|
||||||
|
/* 第一个子元素的样式 */
|
||||||
|
font-size: 38px;
|
||||||
|
// font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title > div:last-child {
|
||||||
|
/* 最后一个子元素的样式 */
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.3em; /* 调整这个值来控制间距大小 */
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
/* 顶部栏容器：Flex 水平布局 + 垂直居中 */
|
||||||
|
.top-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
// background-color: #1e2128;
|
||||||
|
color: #fff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
/* 左侧区域（天气 + 日期）：自身也用 Flex 水平排列，确保元素在一行 */
|
||||||
|
.left-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-right: auto; /* 让右侧元素（管理系统）居右 */
|
||||||
|
}
|
||||||
|
.left-section img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 8px; /* 图标与文字间距 */
|
||||||
|
}
|
||||||
|
/* 分割线（视觉分隔，可根据需求调整样式） */
|
||||||
|
.divider {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
height: 100%; /* 根据需要调整高度 */
|
||||||
|
padding: 15px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider .top-block {
|
||||||
|
width: 3px;
|
||||||
|
height: 7px;
|
||||||
|
background: #19b5fb;
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider .bottom-block {
|
||||||
|
width: 3px;
|
||||||
|
height: 7px;
|
||||||
|
background: #19b5fb;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
/* 右侧区域（管理系统）：图标 + 文字水平排列 */
|
||||||
|
.right-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.right-section img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 6px; /* 图标与文字间距 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
614
src/views/largeScreen/components/leftPage.vue
Normal file
614
src/views/largeScreen/components/leftPage.vue
Normal file
@ -0,0 +1,614 @@
|
|||||||
|
<template>
|
||||||
|
<div class="left_page">
|
||||||
|
<div class="power">
|
||||||
|
<div class="left_title">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="left_title_img">
|
||||||
|
<img src="@/assets/large/power.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left_title_text">电站总览</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="left_title_list">
|
||||||
|
<div class="left_title_item">
|
||||||
|
<div>总装机容量</div>
|
||||||
|
<div>
|
||||||
|
<span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.capacity ?? '0' }}</span>
|
||||||
|
<span style="color: rgba(156, 163, 175, 1)">MW</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center" v-if="Number(data?.capacity) - Number(data.capacityOld) != 0">
|
||||||
|
<el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.capacity) - Number(data.capacityOld) > 0"><Top /></el-icon>
|
||||||
|
<el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
|
||||||
|
<span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
|
||||||
|
>{{ (Math.abs(Number(data?.capacity) - Number(data.capacityOld)) / Number(data?.capacity)) * 100 }}%较上月</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div v-else>无</div>
|
||||||
|
</div>
|
||||||
|
<div class="left_title_item">
|
||||||
|
<div>光伏板数量</div>
|
||||||
|
<div>
|
||||||
|
<span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.module ?? '0' }}</span>
|
||||||
|
<span style="color: rgba(156, 163, 175, 1)">块</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<!-- <el-icon><Top /></el-icon>
|
||||||
|
<span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)">2.4%较上月</span> -->
|
||||||
|
<span style="letter-spacing: 0.1em; color: rgba(156, 163, 175, 1)">- -</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="left_title_item">
|
||||||
|
<div>电站数量</div>
|
||||||
|
<div>
|
||||||
|
<span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.operatingRate ?? '0' }}</span>
|
||||||
|
<span style="color: rgba(156, 163, 175, 1)">座</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) != 0">
|
||||||
|
<el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0"><Top /></el-icon>
|
||||||
|
|
||||||
|
<el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
|
||||||
|
<span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
|
||||||
|
>{{ Math.abs(Number(data?.operatingRate) - Number(data?.operatingRateOld)) }}座{{
|
||||||
|
Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0 ? '新增' : '减少'
|
||||||
|
}}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div v-else>无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="box-sizing: border-box; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; margin-top: 5px">
|
||||||
|
<div class="inverter">
|
||||||
|
<div class="left_title">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="left_title_img">
|
||||||
|
<img src="@/assets/large/monitor.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left_title_text">逆变器监控</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="selectTime">
|
||||||
|
<div class="tab-container">
|
||||||
|
<div class="tab active" @click="switchTab(1)">日</div>
|
||||||
|
<div class="tab" @click="switchTab(2)">月</div>
|
||||||
|
<div class="tab" @click="switchTab(3)">年</div>
|
||||||
|
<!-- <div class="tab" @click="switchTab(4)">总</div> -->
|
||||||
|
</div>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value1"
|
||||||
|
type="date"
|
||||||
|
placeholder="请选择"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="changeTime"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
v-if="active == 1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value2"
|
||||||
|
type="month"
|
||||||
|
placeholder="请选择"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="changeTime"
|
||||||
|
value-format="YYYY-MM"
|
||||||
|
v-if="active == 2"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value3"
|
||||||
|
type="year"
|
||||||
|
placeholder="请选择"
|
||||||
|
size="small"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="changeTime"
|
||||||
|
value-format="YYYY"
|
||||||
|
v-if="active == 3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="bix">运行状态</div>
|
||||||
|
<div class="chart-container">
|
||||||
|
<div ref="chart" style="width: 100%; height: 50px"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left_title">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="left_title_img">
|
||||||
|
<img src="@/assets/large/Inversion.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left_title_text1">逆变器运行曲线</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="date_select">
|
||||||
|
<el-select v-model="value" clearable placeholder="请选择" style="width: 120px; margin-left: 20px" size="small">
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="brokenLine">
|
||||||
|
<EchartBoxTwo :option="lineOption"></EchartBoxTwo>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="left_title">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="left_title_img">
|
||||||
|
<img src="@/assets/large/income.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left_title_text">能源收益分析</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="income">
|
||||||
|
<EchartBoxTwo :option="barOption"></EchartBoxTwo>
|
||||||
|
</div>
|
||||||
|
<div class="income_list">
|
||||||
|
<div style="display: flex; justify-content: space-between">
|
||||||
|
<div style="width: 50%">累计收益</div>
|
||||||
|
<div style="width: 50%; color: rgba(29, 214, 255, 1)">￥{{ Number(data2.allInCome).toFixed(2) }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%">本月收益</div>
|
||||||
|
|
||||||
|
<div style="width: 50%; color: rgba(0, 227, 150, 1)">￥{{ Number(data2.monthInCome).toFixed(2) }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%">度电成本</div>
|
||||||
|
|
||||||
|
<div style="width: 50%; color: rgba(54, 207, 201, 1)">￥{{ Number(data2.price).toFixed(2) }}</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%">预计年收入</div>
|
||||||
|
<div style="width: 50%; color: rgba(179, 0, 255, 1)">￥{{ Number(data2.yearInCome).toFixed(2) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import EchartBoxTwo from '@/components/EchartBox/index.vue';
|
||||||
|
import { formatDate } from '@/utils/index';
|
||||||
|
|
||||||
|
import { getLineOption, getBarOptions } from './optionList';
|
||||||
|
import { getPowerStationOverview, getStationMonthOverview, getInverterListOverview } from '@/api/large';
|
||||||
|
|
||||||
|
// 直接在组件内部定义数据
|
||||||
|
const chartData = ref({
|
||||||
|
normal: '', // 正常设备数量
|
||||||
|
abnormal: '', // 异常设备数量
|
||||||
|
fault: '' // 故障设备数量
|
||||||
|
});
|
||||||
|
const value1: any = ref('');
|
||||||
|
|
||||||
|
const value2: any = ref('');
|
||||||
|
const value3: any = ref('');
|
||||||
|
const value = ref('1');
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '交流有功功率'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const active: any = ref('1');
|
||||||
|
const data = ref<any>({});
|
||||||
|
|
||||||
|
const getDataList = () => {
|
||||||
|
getPowerStationOverview().then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
data.value = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getDataList();
|
||||||
|
const changeTime = () => {
|
||||||
|
getEnergyData();
|
||||||
|
getInverterData();
|
||||||
|
};
|
||||||
|
const data2 = ref<any>({});
|
||||||
|
const getEnergyData = () => {
|
||||||
|
let date: any;
|
||||||
|
if (active.value == 2) {
|
||||||
|
date = value2.value;
|
||||||
|
value3.value = '';
|
||||||
|
value1.value = '';
|
||||||
|
} else if (active.value == 3) {
|
||||||
|
date = value3.value;
|
||||||
|
value1.value = '';
|
||||||
|
value2.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}`;
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
type: active.value == 1 ? 2 : active.value,
|
||||||
|
date: date ? date : formattedDate
|
||||||
|
};
|
||||||
|
getStationMonthOverview(params).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
getTurnoverList(res.data.data);
|
||||||
|
data2.value = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const data3 = ref<any>({});
|
||||||
|
const getInverterData = () => {
|
||||||
|
let date: any;
|
||||||
|
if (active.value == 1) {
|
||||||
|
date = value1.value;
|
||||||
|
value2.value = '';
|
||||||
|
value3.value = '';
|
||||||
|
} else if (active.value == 2) {
|
||||||
|
date = value2.value;
|
||||||
|
value3.value = '';
|
||||||
|
value1.value = '';
|
||||||
|
} else if (active.value == 3) {
|
||||||
|
date = value3.value;
|
||||||
|
value1.value = '';
|
||||||
|
value2.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
type: active.value,
|
||||||
|
date: date ? date : formattedDate
|
||||||
|
};
|
||||||
|
getInverterListOverview(params).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
pedestrianFlow(res.data.data);
|
||||||
|
chartData.value.fault = res.data.fault;
|
||||||
|
chartData.value.normal = res.data.normal;
|
||||||
|
chartData.value.abnormal = res.data.offline;
|
||||||
|
renderChart();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const switchTab = (tabNumber: number) => {
|
||||||
|
const tabs = document.querySelectorAll('.tab');
|
||||||
|
tabs.forEach((tab) => tab.classList.remove('active'));
|
||||||
|
// 给对应数值的标签添加active类（索引=数值-1）
|
||||||
|
tabs[tabNumber - 1].classList.add('active');
|
||||||
|
// 可以根据数值执行不同的操作
|
||||||
|
active.value = tabNumber;
|
||||||
|
|
||||||
|
// getInverterData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const chart = ref<HTMLElement | null>(null);
|
||||||
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
|
const totalAll = ref(0);
|
||||||
|
// 计算百分比数据（处理0值不占位）
|
||||||
|
const calculatePercentages = () => {
|
||||||
|
const { normal, abnormal, fault } = chartData.value;
|
||||||
|
|
||||||
|
const total = Number(normal) + Number(abnormal) + Number(fault);
|
||||||
|
totalAll.value = total;
|
||||||
|
|
||||||
|
if (total === 0) {
|
||||||
|
return {
|
||||||
|
normal: 0,
|
||||||
|
abnormal: 0,
|
||||||
|
fault: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
normal: Number(normal),
|
||||||
|
abnormal: Number(abnormal),
|
||||||
|
fault: Number(fault)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const lineOption = ref({});
|
||||||
|
const barOption = ref({});
|
||||||
|
|
||||||
|
const pedestrianFlow = (data?: any) => {
|
||||||
|
const xData = data.map((item) => item.time);
|
||||||
|
const yData = data.map((item) => item.content);
|
||||||
|
const lineData = {
|
||||||
|
xLabel: xData,
|
||||||
|
line1: yData
|
||||||
|
// line2: ['20', '50', '12', '65', '30', '60']
|
||||||
|
};
|
||||||
|
|
||||||
|
lineOption.value = getLineOption(lineData);
|
||||||
|
};
|
||||||
|
const getTurnoverList = (data?: any) => {
|
||||||
|
const xData = data.map((item) => item.time);
|
||||||
|
const yData = data.map((item) => {
|
||||||
|
// 先将content转换为数字，再调用toFixed
|
||||||
|
const num = Number(item.content);
|
||||||
|
return isNaN(num) ? 0 : Number(num.toFixed(2));
|
||||||
|
});
|
||||||
|
|
||||||
|
const barData = {
|
||||||
|
name: xData,
|
||||||
|
value: yData
|
||||||
|
};
|
||||||
|
barOption.value = getBarOptions(barData);
|
||||||
|
};
|
||||||
|
// 初始化图表
|
||||||
|
const initChart = () => {
|
||||||
|
if (!chart.value) return;
|
||||||
|
chartInstance = echarts.init(chart.value);
|
||||||
|
|
||||||
|
getEnergyData();
|
||||||
|
getInverterData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 渲染图表逆变器柱状图
|
||||||
|
const renderChart = () => {
|
||||||
|
// if (!chartInstance) return;
|
||||||
|
const percentages = calculatePercentages();
|
||||||
|
|
||||||
|
const option: echarts.EChartsOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: (params: any) => {
|
||||||
|
return `${params.marker} ${params.seriesName}: ${params.value}台`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
right: 10,
|
||||||
|
top: 0,
|
||||||
|
data: [
|
||||||
|
{ name: '正常', icon: 'circle' },
|
||||||
|
{ name: '异常', icon: 'circle' },
|
||||||
|
{ name: '故障', icon: 'circle' }
|
||||||
|
],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '-3%',
|
||||||
|
right: '3%',
|
||||||
|
top: '30px',
|
||||||
|
bottom: '3%'
|
||||||
|
// containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
max: totalAll.value,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%',
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: { show: false }, // 隐藏轴线
|
||||||
|
axisTick: { show: false } // 隐藏刻度
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
show: false,
|
||||||
|
data: ['设备状态分布']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '正常',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
data: [percentages.normal],
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(0, 227, 150, 1)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'insideLeft',
|
||||||
|
// formatter: `{c}%`,
|
||||||
|
color: '#fff',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '异常',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
data: [percentages.abnormal],
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(255, 171, 0, 1)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'inside',
|
||||||
|
// formatter: `{c}%`,
|
||||||
|
color: '#fff',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '故障',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
data: [percentages.fault],
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(255, 77, 79, 1)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'insideRight',
|
||||||
|
// formatter: `{c}%`,
|
||||||
|
color: '#fff',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.setOption(option);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
initChart();
|
||||||
|
window.addEventListener('resize', () => chartInstance?.resize());
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.left_page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
}
|
||||||
|
.power {
|
||||||
|
width: 100%;
|
||||||
|
// height: 20%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 10px 10px 10px;
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
.left_title_list {
|
||||||
|
width: 100%;
|
||||||
|
// padding-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.left_title_item {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: rgba(29, 214, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
:deep(.el-icon .top-icon) {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left_title_item > div:first-child {
|
||||||
|
/* 第一个子元素的样式 */
|
||||||
|
font-size: 12px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.left_title_item > div:nth-child(2) {
|
||||||
|
/* 第二个子元素的样式 */
|
||||||
|
padding-bottom: 5px;
|
||||||
|
/* 添加其他需要的样式 */
|
||||||
|
}
|
||||||
|
.left_title_item > div:last-child {
|
||||||
|
/* 第一个子元素的样式 */
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left_title {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
.left_title_img {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
.left_title_text {
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-left: 15px;
|
||||||
|
padding-top: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.left_title_text1 {
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-left: 15px;
|
||||||
|
padding-top: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-container {
|
||||||
|
display: flex;
|
||||||
|
// gap: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
padding: 4px;
|
||||||
|
border: 0.1px solid rgba(10, 79, 84, 1);
|
||||||
|
// border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
// font-family: Arial, sans-serif;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.tab.active {
|
||||||
|
background-color: #3b93fd;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.tab:hover:not(.active) {
|
||||||
|
background-color: #3b93fd;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.inverter {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
// height: 10%;
|
||||||
|
.selectTime {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.bix {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(156, 163, 175, 1);
|
||||||
|
top: 50px;
|
||||||
|
}
|
||||||
|
.date_select {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
right: 0;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.brokenLine {
|
||||||
|
width: 100%;
|
||||||
|
height: 23vh;
|
||||||
|
// margin-top: 10px;
|
||||||
|
}
|
||||||
|
.income {
|
||||||
|
width: 100%;
|
||||||
|
height: 20vh;
|
||||||
|
// margin-top: 20px;
|
||||||
|
}
|
||||||
|
.income_list {
|
||||||
|
width: 100%;
|
||||||
|
height: 9vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
// grid-gap: 10px;
|
||||||
|
// background-color: rgba(29, 214, 255, 0.1);
|
||||||
|
// border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
735
src/views/largeScreen/components/optionList.ts
Normal file
735
src/views/largeScreen/components/optionList.ts
Normal file
@ -0,0 +1,735 @@
|
|||||||
|
import * as echarts from 'echarts/core';
|
||||||
|
// import { PictorialBarChart } from 'echarts/charts'
|
||||||
|
// 客流量图
|
||||||
|
export const getOption = (xData: any, yData: any) => {
|
||||||
|
const data = {
|
||||||
|
xData,
|
||||||
|
yData
|
||||||
|
};
|
||||||
|
const maxData = Math.ceil(Math.max(...data.yData));
|
||||||
|
const barData = data.yData.map((item) => {
|
||||||
|
return maxData;
|
||||||
|
});
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
left: '8%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '20%'
|
||||||
|
// containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: data.xData,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: true,
|
||||||
|
type: 'value',
|
||||||
|
max: maxData,
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid',
|
||||||
|
color: 'rgba(73, 169, 191, 0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: '',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
// show: true,
|
||||||
|
start: 0,
|
||||||
|
end: 30,
|
||||||
|
bottom: 2, // 下滑块距离x轴底部的距离
|
||||||
|
height: 23
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'inside'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '柱图',
|
||||||
|
type: 'bar',
|
||||||
|
// barWidth: '10%',
|
||||||
|
data: barData,
|
||||||
|
tooltip: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
barGap: '-50%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(73, 169, 191, 0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '客单价',
|
||||||
|
type: 'line',
|
||||||
|
showAllSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(217, 231, 255, 0.3)',
|
||||||
|
shadowColor: 'rgba(0, 0, 0, .3)',
|
||||||
|
shadowBlur: 0
|
||||||
|
// shadowOffsetY: 5,
|
||||||
|
// shadowOffsetX: 5,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(224, 194, 22, 1)',
|
||||||
|
borderWidth: 0,
|
||||||
|
shadowBlur: 0
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false, // 显示数据标签
|
||||||
|
color: 'rgba(255, 208, 59, 1)'
|
||||||
|
},
|
||||||
|
data: data.yData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上菜分析图
|
||||||
|
export const getOption2 = (data: any) => {
|
||||||
|
const maxData = Math.max(...data.yData);
|
||||||
|
const option = {
|
||||||
|
// backgroundColor: "#38445E",
|
||||||
|
grid: {
|
||||||
|
left: '10%',
|
||||||
|
top: '13%',
|
||||||
|
bottom: '16%',
|
||||||
|
right: '10%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: data.xData,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 129, 109, 0.1)',
|
||||||
|
width: 1 //这里是为了突出显示加上的
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
splitNumber: 2,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 129, 109, 0.1)',
|
||||||
|
width: 1 //这里是为了突出显示加上的
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: 'rgba(255,255,255,.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,.5)',
|
||||||
|
width: 0.5,
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
// show: true,
|
||||||
|
|
||||||
|
start: 0,
|
||||||
|
end: 30,
|
||||||
|
bottom: 2, // 下滑块距离x轴底部的距离
|
||||||
|
height: 23
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'inside'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis', // 设置为 'item'，表示鼠标悬浮在图形上时显示 tooltip
|
||||||
|
// formatter: function (params) {
|
||||||
|
// return `订单数: ${params.data}` // 显示鼠标悬浮项的数量
|
||||||
|
// },
|
||||||
|
backgroundColor: '', // 设置提示框的背景颜色
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff' // 设置文字颜色
|
||||||
|
// fontSize: 14 // 设置文字大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '订单数',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
barCategoryGap: '0%',
|
||||||
|
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'top',
|
||||||
|
distance: 15,
|
||||||
|
color: 'rgba(255, 235, 59, 1)',
|
||||||
|
// fontWeight: "bolder",
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// color: {
|
||||||
|
// type: "linear",
|
||||||
|
// x: 0,
|
||||||
|
// y: 0,
|
||||||
|
// x2: 0,
|
||||||
|
// y2: 1,
|
||||||
|
// colorStops: [
|
||||||
|
// {
|
||||||
|
// offset: 0,
|
||||||
|
// color: "rgba(232, 94, 106, .8)", // 0% 处的颜色
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// offset: 1,
|
||||||
|
// color: "rgba(232, 94, 106, .1)", // 100% 处的颜色
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// global: false, // 缺省为 false
|
||||||
|
// },
|
||||||
|
color: function (params: any) {
|
||||||
|
if (params.data === maxData) {
|
||||||
|
return 'rgba(255, 219, 103, 0.6)';
|
||||||
|
} else {
|
||||||
|
return 'rgba(239, 244, 255, 0.45)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data.yData,
|
||||||
|
z: 10
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
};
|
||||||
|
//食堂周报图
|
||||||
|
export const getLineOption = (lineData: any) => {
|
||||||
|
const maxData = Math.ceil(Math.max(...lineData.line1));
|
||||||
|
const option = {
|
||||||
|
backgroundColor: '',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
color: '#7ec7ff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
borderColor: '#7ec7ff'
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// align: 'left',
|
||||||
|
// right: '5%',
|
||||||
|
// top: '1%',
|
||||||
|
// type: 'plain',
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#fff',
|
||||||
|
// fontSize: 12
|
||||||
|
// },
|
||||||
|
// // icon:'rect',
|
||||||
|
// itemGap: 15,
|
||||||
|
// itemWidth: 18,
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// name: '上周销售量'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '本周销售量'
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
grid: {
|
||||||
|
top: '12%',
|
||||||
|
left: '1%',
|
||||||
|
right: '3%',
|
||||||
|
bottom: '12%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: lineData.xLabel,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: true,
|
||||||
|
type: 'value',
|
||||||
|
max: maxData,
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid',
|
||||||
|
color: 'rgba(73, 169, 191, 0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
// show: true,
|
||||||
|
start: 0,
|
||||||
|
end: 30,
|
||||||
|
bottom: 2, // 下滑块距离x轴底部的距离
|
||||||
|
height: 23
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'inside'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '逆变器功率',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||||
|
showAllSymbol: false,
|
||||||
|
symbolSize: 0,
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: 'rgba(80, 164, 225, 1)', // 线条颜色
|
||||||
|
borderColor: 'rgba(0,0,0,.4)'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(80, 164, 225, 1)',
|
||||||
|
borderWidth: 2,
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(80, 164, 225, 0.4)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(80, 164, 225, 0)'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
|
||||||
|
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||||
|
},
|
||||||
|
data: lineData.line1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
};
|
||||||
|
//#endregion
|
||||||
|
|
||||||
|
// 菜品销售图
|
||||||
|
export const getDishesOption = (data?: any) => {
|
||||||
|
const res = data;
|
||||||
|
const dataIndex = 1;
|
||||||
|
const option = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10 // 增大标签与轴线间距
|
||||||
|
},
|
||||||
|
width: 60, // 增大Y轴宽度
|
||||||
|
data: res.name,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#93C9C3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '5%', // 设置网格区域与容器之间的边距
|
||||||
|
bottom: '5%', // 同理
|
||||||
|
left: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: res.ratio,
|
||||||
|
barMaxWidth: 25,
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 3,
|
||||||
|
color: 'rgba(12, 242, 216, 0.2)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: res.data,
|
||||||
|
barGap: '-100%',
|
||||||
|
barMaxWidth: 25,
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 3,
|
||||||
|
color: function (params: any) {
|
||||||
|
if (params.data <= 300) {
|
||||||
|
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ color: 'rgba(252, 105, 0, 1)', offset: 0 },
|
||||||
|
{ color: 'rgba(250, 42, 42, 1)', offset: 1 }
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ color: 'rgba(73, 169, 191, 1)', offset: 0 },
|
||||||
|
{ color: 'rgba(108, 248, 236, 1)', offset: 1 }
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: [200, -15],
|
||||||
|
formatter: function (params: any) {
|
||||||
|
if (params.data <= 300) {
|
||||||
|
return `{a| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
|
||||||
|
} else {
|
||||||
|
return `{b| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: 'rgba(255, 78, 51, 1)'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
color: 'rgba(255, 235, 59, 1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
};
|
||||||
|
// 菜品库存图
|
||||||
|
export const getInventoryOption = () => {
|
||||||
|
const res = {
|
||||||
|
data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
|
||||||
|
name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
|
||||||
|
ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
|
||||||
|
},
|
||||||
|
dataIndex = 1;
|
||||||
|
const option = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
show: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 10 // 增大标签与轴线间距
|
||||||
|
},
|
||||||
|
width: 20, // 增大Y轴宽度
|
||||||
|
data: res.name,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#93C9C3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '5%', // 设置网格区域与容器之间的边距
|
||||||
|
bottom: '5%', // 同理
|
||||||
|
left: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: res.ratio,
|
||||||
|
barMaxWidth: 6,
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 3,
|
||||||
|
color: 'rgba(12, 242, 216, 0.2)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: [0, -15],
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#fff',
|
||||||
|
formatter: function (params: any) {
|
||||||
|
return params.name;
|
||||||
|
}
|
||||||
|
// rich: {
|
||||||
|
// a: {
|
||||||
|
// color: "rgba(255, 78, 51, 1)",
|
||||||
|
// },
|
||||||
|
// b: {
|
||||||
|
// color: "rgba(255, 235, 59, 1)",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: res.data,
|
||||||
|
barGap: '-100%',
|
||||||
|
barMaxWidth: 6,
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 0,
|
||||||
|
color: function (params: any) {
|
||||||
|
if (params.dataIndex === dataIndex) {
|
||||||
|
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ color: 'rgba(255, 78, 51, 1)', offset: 0 },
|
||||||
|
{ color: 'rgba(252, 105, 0, 0)', offset: 1 }
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||||
|
{ color: 'rgba(242, 224, 27, 1)', offset: 0 },
|
||||||
|
{ color: 'rgba(236, 227, 127, 0.55)', offset: 0.5 },
|
||||||
|
{ color: 'rgba(230, 229, 227, 0.1)', offset: 1 }
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: [200, -15],
|
||||||
|
formatter: function (params: any) {
|
||||||
|
if (params.dataIndex === dataIndex) {
|
||||||
|
return `{a| ${params.value}g}`;
|
||||||
|
} else {
|
||||||
|
return `{b| ${params.value}g}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: 'rgba(255, 78, 51, 1)'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
color: 'rgba(255, 235, 59, 1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
};
|
||||||
|
export const getBarOptions = (data: any) => {
|
||||||
|
const option = {
|
||||||
|
backgroundColor: '',
|
||||||
|
grid: {
|
||||||
|
left: '7%',
|
||||||
|
top: '4%',
|
||||||
|
bottom: '25%',
|
||||||
|
right: '2%'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: '',
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: '{b0}：{c0}元',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
// borderColor: 'rgba(252, 217, 18, 1)'
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: data.name,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(108, 128, 151, 0.3)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
// show: true,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(108, 128, 151, 0.3)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
axisLabel: {
|
||||||
|
formatter: function (value) {
|
||||||
|
if (value >= 1000) {
|
||||||
|
value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
color: 'rgba(255, 255, 255, 0.8)'
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(108, 128, 151, 0.3)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(108, 128, 151, 0.3)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
// show: true,
|
||||||
|
start: 0,
|
||||||
|
end: 30,
|
||||||
|
bottom: 2, // 下滑块距离x轴底部的距离
|
||||||
|
height: 23
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'inside'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: data.value,
|
||||||
|
stack: '合并',
|
||||||
|
barWidth: '15',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.7,
|
||||||
|
color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{c}',
|
||||||
|
position: 'top',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10
|
||||||
|
// padding: 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// type: 'bar',
|
||||||
|
// stack: '合并',
|
||||||
|
// data: topData,
|
||||||
|
// barWidth: '15',
|
||||||
|
// itemStyle: {
|
||||||
|
// color: 'rgba(252, 217, 18, 1)'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
};
|
||||||
442
src/views/largeScreen/components/rightPage.vue
Normal file
442
src/views/largeScreen/components/rightPage.vue
Normal file
@ -0,0 +1,442 @@
|
|||||||
|
<template>
|
||||||
|
<div class="rightPage">
|
||||||
|
<div class="alarm-container">
|
||||||
|
<!-- 顶部标题栏 -->
|
||||||
|
<div class="header">
|
||||||
|
<img src="@/assets/large/right1.png" style="width: 17px; height: 18px" alt="" />
|
||||||
|
<span class="title">告警信息中心</span>
|
||||||
|
<!-- <el-badge :value="unhandledCount" class="unhandled-badge" type="danger"> {{ unhandledCount }}条未处理 </el-badge> -->
|
||||||
|
<span class="jgao">{{ alarmData.length }}条信息未处理</span>
|
||||||
|
</div>
|
||||||
|
<!-- 告警卡片列表（可循环渲染，这里演示单条） -->
|
||||||
|
<div class="alarm_list">
|
||||||
|
<el-card class="alarm-card" shadow="hover" v-for="(item, index) in alarmData" :key="index">
|
||||||
|
<div class="card-header">
|
||||||
|
<img src="@/assets/large/right2.png" style="width: 15px; height: 15px" alt="" />
|
||||||
|
<span class="card-title">{{ item.alarmMsg }}</span>
|
||||||
|
<span class="time">{{ formatDate(item.alarmBeginTime) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
{{ item.advice }}
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<el-tag type="danger" size="small">紧急</el-tag>
|
||||||
|
<el-tag type="danger" size="small">处理</el-tag>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overview">
|
||||||
|
<div class="left_title">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="left_title_img">
|
||||||
|
<img src="@/assets/large/right4.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left_title_text">项目概述</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview_content">
|
||||||
|
<div>项目名称：田东光伏智慧生态工地开发项目</div>
|
||||||
|
<div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
|
||||||
|
<div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
|
||||||
|
<div>占地面积：约10000亩</div>
|
||||||
|
<div>土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
|
||||||
|
<div>建设单位：这里是建设单位的名称</div>
|
||||||
|
<div>项目类型：集中式光伏电站</div>
|
||||||
|
<div>总装机容量：200MW</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="monitor">
|
||||||
|
<div class="left_title">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<div class="left_title_img">
|
||||||
|
<img src="@/assets/large/right3.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="left_title_text">设备状态监控</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-container">
|
||||||
|
<div class="container_item" v-for="(item, index) in deviceStats" :key="index">
|
||||||
|
<div class="container_item_one">
|
||||||
|
<div class="container_item_one_box">
|
||||||
|
<div class="box_img">
|
||||||
|
<img src="@/assets/large/right6.png" style="width: 20px; height: 20px" />
|
||||||
|
</div>
|
||||||
|
<div class="box_text">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div style="font-size: 12px">{{ item.total }}块</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-right">
|
||||||
|
<div class="progress-top">
|
||||||
|
<span
|
||||||
|
class="progress-percent"
|
||||||
|
:class="{
|
||||||
|
green1: item.rate >= 99, // 可根据需求调整颜色规则
|
||||||
|
orange1: item.rate < 99 && item.rate >= 90
|
||||||
|
}"
|
||||||
|
>{{ item.rate }}%</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bg">
|
||||||
|
<div
|
||||||
|
class="progress-fg"
|
||||||
|
:style="{ width: item.rate + '%' }"
|
||||||
|
:class="{
|
||||||
|
green: item.rate >= 99, // 可根据需求调整颜色规则
|
||||||
|
orange: item.rate < 99 && item.rate >= 90
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container_item_two">
|
||||||
|
<div>正常{{ item.normal }}台</div>
|
||||||
|
|
||||||
|
<div>异常{{ item.abnormal }}台</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { getAlarmListOverview } from '@/api/large';
|
||||||
|
import { formatDate } from '@/utils/index';
|
||||||
|
|
||||||
|
const alarmData: any = ref({});
|
||||||
|
const deviceStats = ref([
|
||||||
|
{
|
||||||
|
name: '光伏组件',
|
||||||
|
icon: '../../../assets/large/right5.png', // 示例图标
|
||||||
|
total: '25,680',
|
||||||
|
unit: '块',
|
||||||
|
rate: 99.2,
|
||||||
|
normal: '25,472',
|
||||||
|
abnormal: 208
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '逆变器',
|
||||||
|
icon: '@/assets/large/right6.png',
|
||||||
|
total: '1,246',
|
||||||
|
unit: '台',
|
||||||
|
rate: 98.6,
|
||||||
|
normal: '1,230',
|
||||||
|
abnormal: 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '汇流箱',
|
||||||
|
icon: '@/assets/large/right7.png',
|
||||||
|
total: '128',
|
||||||
|
unit: '台',
|
||||||
|
rate: 100,
|
||||||
|
normal: '128',
|
||||||
|
abnormal: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '变压器',
|
||||||
|
icon: '@/assets/large/right8.png',
|
||||||
|
total: '32',
|
||||||
|
unit: '台',
|
||||||
|
rate: 96.8,
|
||||||
|
normal: '31',
|
||||||
|
abnormal: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '通信设备',
|
||||||
|
icon: '@/assets/large/right9.png',
|
||||||
|
total: '246',
|
||||||
|
unit: '台',
|
||||||
|
rate: 95.2,
|
||||||
|
normal: '234',
|
||||||
|
abnormal: 12
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const getAlarm = () => {
|
||||||
|
getAlarmListOverview().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
alarmData.value = res.data;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getAlarm();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.rightPage {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-container {
|
||||||
|
border: 1px solid #1e2b3d; /* 深色背景模拟，可替换成项目背景 */
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #fff;
|
||||||
|
// box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部标题栏 */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.unhandled-badge {
|
||||||
|
margin-left: auto; /* 右对齐 */
|
||||||
|
}
|
||||||
|
.jgao {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #f56c6c;
|
||||||
|
background: rgba(255, 77, 79, 0.2);
|
||||||
|
padding: 5px 6px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-left: auto; /* 右对齐 */
|
||||||
|
}
|
||||||
|
.alarm_list {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 0;
|
||||||
|
height: 14vh;
|
||||||
|
overflow-y: auto; /* 垂直方向超出时显示滚动条 */
|
||||||
|
}
|
||||||
|
// 滚动条优化
|
||||||
|
.alarm_list::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
.alarm_list::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #0ff !important;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.alarm_list::-webkit-scrollbar-track {
|
||||||
|
background-color: rgba(0, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
/* 告警卡片 */
|
||||||
|
.alarm-card {
|
||||||
|
background: rgba(12, 30, 53, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #f56c6c;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: space-between;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.card-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #f56c6c;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
margin-left: auto; /* 右对齐 */
|
||||||
|
}
|
||||||
|
.card-content {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #dcdfe6;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.card-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.left_title {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
.left_title_img {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
.left_title_text {
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-left: 15px;
|
||||||
|
padding-top: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.left_title_text1 {
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-left: 15px;
|
||||||
|
padding-top: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.overview {
|
||||||
|
width: 100%;
|
||||||
|
height: 28vh;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #1e2b3d;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.overview_content {
|
||||||
|
height: 80%;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
overflow-y: auto; /* 垂直方向超出时显示滚动条 */
|
||||||
|
}
|
||||||
|
// 滚动条优化
|
||||||
|
.overview_content::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
.overview_content::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #0ff !important;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.overview_content::-webkit-scrollbar-track {
|
||||||
|
background-color: rgba(0, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.monitor {
|
||||||
|
width: 100%;
|
||||||
|
height: 39vh;
|
||||||
|
border: 1px solid #1e2b3d;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.stats-container {
|
||||||
|
width: 100%; /* 可根据实际场景调整宽度 */
|
||||||
|
height: 87%;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: auto; /* 垂直方向超出时显示滚动条 */
|
||||||
|
.container_item {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.container_item_one {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.container_item_one_box {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
.box_img {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(12, 30, 53, 0.6);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.box_text {
|
||||||
|
color: rgba(156, 163, 175, 1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 10px;
|
||||||
|
// align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 右侧区域：进度条 + 数据 */
|
||||||
|
.card-right {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin-left: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.progress-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.progress-percent {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.abnormal {
|
||||||
|
color: #ff9900; /* 异常数据颜色 */
|
||||||
|
}
|
||||||
|
.progress-bg {
|
||||||
|
height: 6px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
width: 100px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.progress-fg {
|
||||||
|
height: 100%;
|
||||||
|
width: 100px;
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
/* 进度条颜色区分（可扩展更多规则） */
|
||||||
|
.green {
|
||||||
|
background-color: #28a745;
|
||||||
|
}
|
||||||
|
.orange {
|
||||||
|
background-color: #ffc107;
|
||||||
|
}
|
||||||
|
.green1 {
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
.orange1 {
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container_item_two {
|
||||||
|
width: 90%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-left: auto;
|
||||||
|
color: rgba(156, 163, 175, 1);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动条优化
|
||||||
|
.stats-container::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-container::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #0ff;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-container::-webkit-scrollbar-track {
|
||||||
|
background-color: rgba(0, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
src/views/largeScreen/index.vue
Normal file
43
src/views/largeScreen/index.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="large-screen">
|
||||||
|
<Header />
|
||||||
|
<div class="nav">
|
||||||
|
<div class="nav_left">
|
||||||
|
<leftPage />
|
||||||
|
</div>
|
||||||
|
<div class="nav_center">
|
||||||
|
<centerPage />
|
||||||
|
</div>
|
||||||
|
<div class="nav_right">
|
||||||
|
<rightPage />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Header from './components/header.vue';
|
||||||
|
import leftPage from './components/leftPage.vue';
|
||||||
|
import centerPage from './components/centerPage.vue';
|
||||||
|
import rightPage from './components/rightPage.vue';
|
||||||
|
import '@/assets/styles/element.scss';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.large-screen {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('@/assets/large/bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-color: rgba(4, 7, 17, 1);
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 80px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
// padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr 1fr;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user