From 07448e135e5a335457186301c206d3d6872678df Mon Sep 17 00:00:00 2001
From: zhaoqiang <2117596534@qq.com>
Date: Sun, 14 Jul 2024 10:15:29 +0800
Subject: [PATCH] update
---
src/api/homePage/SoureceApi.ts | 13 +-
src/views/pages/homePage/runListenPage.vue | 1257 +++++++++-----------
2 files changed, 599 insertions(+), 671 deletions(-)
diff --git a/src/api/homePage/SoureceApi.ts b/src/api/homePage/SoureceApi.ts
index 4f0e59b..f1a55bf 100644
--- a/src/api/homePage/SoureceApi.ts
+++ b/src/api/homePage/SoureceApi.ts
@@ -2,8 +2,8 @@ import request from "@/utils/http/request";
// 首页 资源总览
// 源-网-荷-储”相关统计信息服务
-interface idInfo{
- orgID:string;
+interface idInfo {
+ orgID: string;
}
export function statInfo_api(data: idInfo) {
return request({
@@ -22,3 +22,12 @@ export function alert_api(data: idInfo) {
});
}
+
+// 获取运行监视---重过载告警统计
+export function runAlarm_api(data: idInfo) {
+ return request({
+ url: "/api/wwpm/biz/v1/max_load_rate",
+ method: "POST",
+ data,
+ });
+}
diff --git a/src/views/pages/homePage/runListenPage.vue b/src/views/pages/homePage/runListenPage.vue
index 783e156..fd1c9d7 100644
--- a/src/views/pages/homePage/runListenPage.vue
+++ b/src/views/pages/homePage/runListenPage.vue
@@ -4,19 +4,13 @@
<div class="runLisenPage_container" :style="styleVar">
<div class="runLisenPage">
<div class="content_left">
- <div
- :class="`animated ${hideLeft ? 'fadeInLeftBig' : 'fadeOutLeftBig'}`"
- :style="{ opacity: hideLeft ? '1' : '0' }"
- >
+ <div :class="`animated ${hideLeft ? 'fadeInLeftBig' : 'fadeOutLeftBig'}`" :style="{ opacity: hideLeft ? '1' : '0' }">
<div class="left_box">
<!-- 源 -->
<div>
<div class="common_box source_run" v-if="run_sourceContentFlag">
<!-- 左收缩箭头 -->
- <div
- class="icon_panel_left_on"
- @click="run_sourceContentFlag = false"
- ></div>
+ <div class="icon_panel_left_on" @click="run_sourceContentFlag = false"></div>
<div class="title">
<img src="@/assets/images/mainPage/icon_title1.png" alt="" />
<span>源</span>
@@ -25,28 +19,20 @@
<div class="title_info margin1">功率曲线</div>
<div class="source_echart">
<div class="tabDate">
- <div
- :class="[
+ <div :class="[
sourcetabDateFlag === item.id
? 'tab_active'
: 'tab_default',
'tab',
- ]"
- v-for="item in sourceEchart"
- @click="sourcehandleTabDate(item)"
- >
+ ]" v-for="item in sourceEchart" @click="sourcehandleTabDate(item)">
{{ item.name }}
</div>
</div>
<div class="source_echart_box">
<!--光伏曲线 -->
- <source_Photovoltaic_echart
- v-if="sourcetabDateFlag === 1"
- ></source_Photovoltaic_echart>
+ <source_Photovoltaic_echart v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart>
<!-- 厂站曲线 -->
- <source_factoryStation_echart
- v-else
- ></source_factoryStation_echart>
+ <source_factoryStation_echart v-else></source_factoryStation_echart>
</div>
<!-- <div class="ratebox">
<div class="rate">
@@ -75,10 +61,7 @@
</div>
<div class="sourceRunContent source_run" v-else>
<div class="showPanel">
- <div
- class="icon_panel_left_off"
- @click="run_sourceContentFlag = true"
- ></div>
+ <div class="icon_panel_left_off" @click="run_sourceContentFlag = true"></div>
</div>
</div>
</div>
@@ -86,10 +69,7 @@
<div>
<div class="load_run common_box" v-if="run_loadContentFlag">
<!-- 左收缩箭头 -->
- <div
- class="icon_panel_left_on"
- @click="run_loadContentFlag = false"
- ></div>
+ <div class="icon_panel_left_on" @click="run_loadContentFlag = false"></div>
<div class="title">
<img src="@/assets/images/mainPage/icon_title2.png" alt="" />
<span>荷</span>
@@ -98,16 +78,12 @@
<div class="title_info margin2">功率曲线</div>
<div class="load_echart">
<div class="tabDate">
- <div
- :class="[
+ <div :class="[
loadtabDateFlag === item.id
? 'tab_active'
: 'tab_default',
'tab',
- ]"
- v-for="item in loadEchart"
- @click="handleloadTabDate(item)"
- >
+ ]" v-for="item in loadEchart" @click="handleloadTabDate(item)">
{{ item.name }}
</div>
</div>
@@ -143,10 +119,7 @@
</div>
<div class="loadRunContent load_run" v-else>
<div class="showPanel">
- <div
- class="icon_panel_left_off"
- @click="run_loadContentFlag = true"
- ></div>
+ <div class="icon_panel_left_off" @click="run_loadContentFlag = true"></div>
</div>
</div>
</div>
@@ -158,10 +131,8 @@
<div class="scroll-text box" v-for="item in alertdata.alertArr">
<img src="@/assets/images/homePage/gaojing2.png" alt="" />
<div>
- <span
- >{{ item.name
- }}{{ item.type === "1" ? "线路" : "台区" }}</span
- >出现重过载，发生时间：{{ item.datetime }}
+ <span>{{ item.name
+ }}{{ item.type === "1" ? "线路" : "台区" }}</span>出现重过载，发生时间：{{ item.datetime }}
</div>
</div>
</div>
@@ -171,20 +142,14 @@
</div>
</div>
<div class="content_right">
- <div
- :class="` animated ${
+ <div :class="` animated ${
hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'
- }`"
- :style="{ opacity: hideRight ? '1' : '0' }"
- >
+ }`" :style="{ opacity: hideRight ? '1' : '0' }">
<!-- 网 -->
<div>
<div class="run_network common_box" v-if="runNetworkFlag">
<!-- 左收缩箭头 -->
- <div
- class="icon_panel_left_on"
- @click="runNetworkFlag = false"
- ></div>
+ <div class="icon_panel_left_on" @click="runNetworkFlag = false"></div>
<div class="title">
<img src="@/assets/images/mainPage/icon_title3.png" alt="" />
<span>网</span>
@@ -216,28 +181,20 @@
</div>
<div class="network_info">
<div class="tabDate networktab">
- <div
- :class="[
+ <div :class="[
networktabDateFlag === item.id
? 'tab_active'
: 'tab_default',
'tab',
- ]"
- v-for="item in networkEchart"
- @click="sourcehandleTabDate(item)"
- >
+ ]" v-for="item in networkEchart" @click="sourcehandleTabDate(item)">
{{ item.name }}
</div>
</div>
<div class="source_echart_box">
<!--光伏曲线 -->
- <source_Photovoltaic_echart_Line
- v-if="sourcetabDateFlag === 1"
- ></source_Photovoltaic_echart_Line>
+ <source_Photovoltaic_echart_Line v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart_Line>
<!-- 厂站曲线 -->
- <source_Photovoltaic_echart_Line
- v-else
- ></source_Photovoltaic_echart_Line>
+ <source_Photovoltaic_echart_Line v-else></source_Photovoltaic_echart_Line>
</div>
<!-- <div class="line">
<img
@@ -282,10 +239,7 @@
</div>
<div class="runNetworkContent run_network" v-else>
<div class="showPanel">
- <div
- class="icon_panel_left_off"
- @click="runNetworkFlag = true"
- ></div>
+ <div class="icon_panel_left_off" @click="runNetworkFlag = true"></div>
</div>
</div>
</div>
@@ -293,10 +247,7 @@
<div>
<div class="run_storage common_box" v-if="runStorageFlag">
<!-- 左收缩箭头 -->
- <div
- class="icon_panel_left_on"
- @click="runStorageFlag = false"
- ></div>
+ <div class="icon_panel_left_on" @click="runStorageFlag = false"></div>
<div class="title">
<img src="@/assets/images/mainPage/icon_title4.png" alt="" />
<span>储</span>
@@ -317,10 +268,7 @@
</div>
<div class="runStorageContent run_storage">
<div class="showPanel">
- <div
- class="icon_panel_left_off"
- @click="runStorageFlag = true"
- ></div>
+ <div class="icon_panel_left_off" @click="runStorageFlag = true"></div>
</div>
</div>
</div>
@@ -339,16 +287,13 @@
</div>
<div class="content">
<div class="table_box">
- <el-table
- :data="
+ <el-table :data="
tableData.tdate.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
)
- "
- style="width: 100%; height: 100%"
- >
-
+ " style="width: 100%; height: 100%">
+
<el-table-column label="名称" align="center">
<template #default="scope">
<span style="margin-left: 10px">{{
@@ -375,21 +320,12 @@
<span style="margin-left: 10px">{{ scope.row.datetime }}</span>
</template>
</el-table-column>
-
+
</el-table>
</div>
</div>
<div class="bottom">
- <el-pagination
- small
- background
- layout="prev,pager,next"
- v-model:current-page="currentPage"
- v-model:page-size="pageSize"
- :total="total"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- ></el-pagination>
+ <el-pagination small background layout="prev,pager,next" v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
</div>
</div>
</div>
@@ -398,99 +334,89 @@
</template>
<script setup lang="ts">
-import { ElCheckbox } from "element-plus";
-import {
- ref,
- computed,
- watch,
- onMounted,
- reactive,
- onUnmounted,
- nextTick,
- Ref,
- getCurrentInstance,
- inject,
- defineComponent,
-} from "vue";
-import { ArrowDown } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
-import { getColorFun } from "@/hooks/getColorFun/index";
-import { app_load, api_send, api_register } from "@/ue4Player/app";
-import threeDPie from "@/views/commonPage/3DPie.vue";
-import { id } from "element-plus/es/locale/index.mjs";
-import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults.mjs";
-import source_Photovoltaic_echart from "./threeLine.vue";
-import source_Photovoltaic_echart_Line from "./threeLine_Line.vue";
+import { ElCheckbox } from 'element-plus'
+import { ref, computed, watch, onMounted, reactive, onUnmounted, nextTick, Ref, getCurrentInstance, inject, defineComponent } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { getColorFun } from '@/hooks/getColorFun/index'
+import { app_load, api_send, api_register } from '@/ue4Player/app'
+import threeDPie from '@/views/commonPage/3DPie.vue'
+import { id } from 'element-plus/es/locale/index.mjs'
+import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs'
+import source_Photovoltaic_echart from './threeLine.vue'
+import source_Photovoltaic_echart_Line from './threeLine_Line.vue'
-import source_factoryStation_echart from "./twoLine.vue";
+import source_factoryStation_echart from './twoLine.vue'
-import oneLine_load from "./oneLine_load.vue";
+import oneLine_load from './oneLine_load.vue'
-import load_echart from "./oneLine.vue";
-import storage_echart from "./oneLine.vue";
-import threeEchart from "./3Dechart.vue";
+import load_echart from './oneLine.vue'
+import storage_echart from './oneLine.vue'
+import threeEchart from './3Dechart.vue'
-import { alert_api, statInfo_api } from "@/api/homePage/SoureceApi";
+import { alert_api, statInfo_api, runAlarm_api } from '@/api/homePage/SoureceApi'
onMounted(() => {
- getStatInfo();
- alertInfo();
+ getStatInfo()
+ alertInfo()
// 定时获取接口数据
// setInterval(() => {
// getStatInfo();
// }, 3000);
- handeleTable();
-});
+ handeleTable()
+ // 获取运行监视---重过载告警统计
+ getRunAlarm()
+})
// 源页面标识
-let sourceFlag = ref(true);
+let sourceFlag = ref(true)
// 荷页面标识
-let loadFlag = ref(true);
+let loadFlag = ref(true)
// tabPage 页面默认显示资源总览
-let tabPageFlag = ref(1);
+let tabPageFlag = ref(1)
const tabPage = reactive([
{
id: 1,
- pageName: "资源汇聚",
+ pageName: '资源汇聚'
},
{
id: 2,
- pageName: "运行监视",
- },
-]);
+ pageName: '运行监视'
+ }
+])
const handleTabPage = (val: number) => {
- tabPageFlag.value = val;
+ tabPageFlag.value = val
// 当前页面为不显示的时候
// hideLeft.value = false;
// hideRight.value = false;
-};
+}
-let infolistFlag=ref(false)//告警信息详情
+let infolistFlag = ref(false) //告警信息详情
// lengendDate
let lengendDate = reactive([
{
id: 1,
- lengendName: "源",
- checkFlag: false,
+ lengendName: '源',
+ checkFlag: false
},
{
id: 2,
- lengendName: "网",
- checkFlag: false,
+ lengendName: '网',
+ checkFlag: false
},
{
id: 3,
- lengendName: "荷",
- checkFlag: false,
+ lengendName: '荷',
+ checkFlag: false
},
{
id: 4,
- lengendName: "储",
- checkFlag: false,
- },
-]);
+ lengendName: '储',
+ checkFlag: false
+ }
+])
// const handleLegend = (val: number) => {
// lengendFlag.value = val + 1;
// val = 0;
@@ -498,7 +424,7 @@ let lengendDate = reactive([
// 右下角三维选中和取消勾选
let handleSelectCheck = (datas: any) => {
// 让选中的项样式发生变化
- datas.checkFlag = !datas.checkFlag;
+ datas.checkFlag = !datas.checkFlag
// if (data.lengendName === "中压光伏" || data.lengendName === "低压光伏" || data.lengendName === "充电站" || data.lengendName === "储能站") {
// // bottomconterListtest.includes(props.gettreeprovidecityname)
// bottomconterListtest.forEach(item => {
@@ -524,399 +450,390 @@ let handleSelectCheck = (datas: any) => {
// console.log("SwitchStationstatus", "Switchstationstatus");
// });
// }
-};
+}
// 左-源 -光伏
interface lenCoutInfoItem {
- length: number;
- count: number;
+ length: number
+ count: number
}
interface lenCoutInfo {
- [key: string]: lenCoutInfoItem;
+ [key: string]: lenCoutInfoItem
}
-let SourcePv_unit: Ref<lenCoutInfo | null> = ref(null); // 使用 ref 来创建一个响应式引用
-let unit10: Ref<lenCoutInfoItem | null> = ref({ length: 1010, count: 1010 }); //10kv光伏
-let unit35: Ref<lenCoutInfoItem | null> = ref({ length: 1010, count: 1010 }); //35kv光伏
-let unit380lowarr = reactive<any>([]); //380v一下光伏
-let unit380lowarrLength = ref(1010); //380v一下光伏的长度
-let unit380lowarrCount = ref(1010); //380v一下光伏的户数
+let SourcePv_unit: Ref<lenCoutInfo | null> = ref(null) // 使用 ref 来创建一个响应式引用
+let unit10: Ref<lenCoutInfoItem | null> = ref({ length: 1010, count: 1010 }) //10kv光伏
+let unit35: Ref<lenCoutInfoItem | null> = ref({ length: 1010, count: 1010 }) //35kv光伏
+let unit380lowarr = reactive<any>([]) //380v一下光伏
+let unit380lowarrLength = ref(1010) //380v一下光伏的长度
+let unit380lowarrCount = ref(1010) //380v一下光伏的户数
// 左-源-充电站
interface InfoItem {
- name?: number;
- ratedS?: number | undefined;
- length?: number | undefined;
- count?: number;
+ name?: number
+ ratedS?: number | undefined
+ length?: number | undefined
+ count?: number
}
interface Info {
- [key: string]: InfoItem;
+ [key: string]: InfoItem
}
// let SourcePvstation: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
let SourcePvstation: Ref<Info | null> = ref([
{
- name: "**厂站",
- ratedS: 1015,
+ name: '**厂站',
+ ratedS: 1015
},
{
- name: "**厂站",
- ratedS: 1015,
- },
-]); // 使用 ref 来创建一个响应式引用
+ name: '**厂站',
+ ratedS: 1015
+ }
+]) // 使用 ref 来创建一个响应式引用
// 左 -荷-充电桩
-let sumLoadrateds = ref<any>(0); //额定电压总功率
-let loadchargingPile: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
-let loadchargingPileratedS = ref<any>(10); //充电桩功率
-let loadchargingPilecount = ref<any>(10); //充电桩户数
+let sumLoadrateds = ref<any>(0) //额定电压总功率
+let loadchargingPile: Ref<Info | null> = ref(null) // 使用 ref 来创建一个响应式引用
+let loadchargingPileratedS = ref<any>(10) //充电桩功率
+let loadchargingPilecount = ref<any>(10) //充电桩户数
// 左-荷-空调
-let loadAirconditioner: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
-let loadAirconditionerratedS = ref<any>(10); //空调得功率
-let loadAirconditionercount = ref<any>(0); //空调得户数
+let loadAirconditioner: Ref<Info | null> = ref(null) // 使用 ref 来创建一个响应式引用
+let loadAirconditionerratedS = ref<any>(10) //空调得功率
+let loadAirconditionercount = ref<any>(0) //空调得户数
// 左-荷-微网
// let loadMicrogrid: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
-let loadMicrogridrratedS = ref<any>(0); //空调得功率
-let loadMicrogridcount = ref<any>(0); //空调得户数
+let loadMicrogridrratedS = ref<any>(0) //空调得功率
+let loadMicrogridcount = ref<any>(0) //空调得户数
// 右-储-用户侧
-let storedUserPart: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
-let storedUserPartAreaRatedS = ref<any>(10); //西小站得功率
-let storedUserPartAreaCount = ref<any>(10); //西小站得户数
+let storedUserPart: Ref<Info | null> = ref(null) // 使用 ref 来创建一个响应式引用
+let storedUserPartAreaRatedS = ref<any>(10) //西小站得功率
+let storedUserPartAreaCount = ref<any>(10) //西小站得户数
-let storedUserPartuserRatedS = ref<any>(10); //用户侧得功率
-let storedUserPartuserCount = ref<any>(10); //用户侧得户数
+let storedUserPartuserRatedS = ref<any>(10) //用户侧得功率
+let storedUserPartuserCount = ref<any>(10) //用户侧得户数
// 右 网 主配网
// 主网
-let networkLine: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
-let networkLine110RatedS = ref<any>(0); //主网110得功率
-let networkLine110Count = ref<any>(0); //主网110得条数
-let networkLine35RatedS = ref<any>(0); //主网110功率
-let networkLine35Count = ref<any>(0); //主网110条数
+let networkLine: Ref<Info | null> = ref(null) // 使用 ref 来创建一个响应式引用
+let networkLine110RatedS = ref<any>(0) //主网110得功率
+let networkLine110Count = ref<any>(0) //主网110得条数
+let networkLine35RatedS = ref<any>(0) //主网110功率
+let networkLine35Count = ref<any>(0) //主网110条数
// 配网
-let networkFeer: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
-let networkFeer10RatedS = ref<any>(0); //配网10得功率
-let networkFeer10Count = ref<any>(0); //配网10得条数
-let networkFeer35RatedS = ref<any>(0); //配网35得功率
-let networkFeer35Count = ref<any>(0); //配网35得条数
+let networkFeer: Ref<Info | null> = ref(null) // 使用 ref 来创建一个响应式引用
+let networkFeer10RatedS = ref<any>(0) //配网10得功率
+let networkFeer10Count = ref<any>(0) //配网10得条数
+let networkFeer35RatedS = ref<any>(0) //配网35得功率
+let networkFeer35Count = ref<any>(0) //配网35得条数
-let networkFeer380RatedS = ref<any>(1010); //配网380得功率
-let networkFeer380Count = ref<any>(0); //配网380得条数
+let networkFeer380RatedS = ref<any>(1010) //配网380得功率
+let networkFeer380Count = ref<any>(0) //配网380得条数
// getStatInfo接口数据
const getStatInfo = async () => {
try {
- let resPonse = await statInfo_api({});
+ let resPonse = await statInfo_api({})
nextTick(() => {
if (resPonse) {
// 成功获取到数据，进行后续处理
- console.log("接口数据：", resPonse);
- let statInfo: any = JSON.parse(JSON.stringify(resPonse));
+ console.log('接口数据：', resPonse)
+ let statInfo: any = JSON.parse(JSON.stringify(resPonse))
// SourcePv_unit 分布式光伏数据
- SourcePv_unit.value = statInfo.data.photo_voltaic_unit as any;
+ SourcePv_unit.value = statInfo.data.photo_voltaic_unit as any
for (const key in SourcePv_unit.value) {
if (SourcePv_unit.value.hasOwnProperty(key)) {
- const item = SourcePv_unit.value[key];
- if (key === "BV-AC00101") {
- unit10.value = item; //10kv数据
+ const item = SourcePv_unit.value[key]
+ if (key === 'BV-AC00101') {
+ unit10.value = item //10kv数据
// console.log(key,item,'10');
- } else if (key === "BV-AC00351") {
- unit35.value = item; //35kv数据
- } else if (key === "BV-AC03802") {
- unit380lowarr.push(item); //380v数据
- } else if (key === "BV-AC02202") {
- unit380lowarr.push(item); //220v数据
+ } else if (key === 'BV-AC00351') {
+ unit35.value = item //35kv数据
+ } else if (key === 'BV-AC03802') {
+ unit380lowarr.push(item) //380v数据
+ } else if (key === 'BV-AC02202') {
+ unit380lowarr.push(item) //220v数据
}
- unit380lowarrLength.value =
- unit380lowarr[0]?.length + unit380lowarr[1]?.length; //380v及其以下长度
- unit380lowarrCount.value =
- unit380lowarr[0]?.count + unit380lowarr[1]?.count; //380v及其以下户数
+ unit380lowarrLength.value = unit380lowarr[0]?.length + unit380lowarr[1]?.length //380v及其以下长度
+ unit380lowarrCount.value = unit380lowarr[0]?.count + unit380lowarr[1]?.count //380v及其以下户数
}
}
// SourcePvstation 光伏电站
- SourcePvstation.value = statInfo.data.photo_voltaic_station as any;
+ SourcePvstation.value = statInfo.data.photo_voltaic_station as any
// loadchargingPile 充电桩
- loadchargingPile.value = statInfo.data.charging_pile as Info;
+ loadchargingPile.value = statInfo.data.charging_pile as Info
// 荷 充电桩 功率
- loadchargingPileratedS.value = Object?.values(
- loadchargingPile.value
- ).reduce((sum, ite) => sum + ite.ratedS, 0);
+ loadchargingPileratedS.value = Object?.values(loadchargingPile.value).reduce((sum, ite) => sum + ite.ratedS, 0)
// 荷 充电桩 户数
- loadchargingPilecount.value = Object.values(
- loadchargingPile.value
- ).reduce((sum, ite) => sum + ite.count, 0);
+ loadchargingPilecount.value = Object.values(loadchargingPile.value).reduce((sum, ite) => sum + ite.count, 0)
// 功率 荷 空调 loadAirconditioner
- loadAirconditioner.value = statInfo.data.air_conditioner as Info;
+ loadAirconditioner.value = statInfo.data.air_conditioner as Info
for (const key in loadAirconditioner.value) {
if (loadAirconditioner.value.hasOwnProperty(key)) {
- const item = loadAirconditioner.value[key];
- if (key === "BV-AC02202") {
- console.log(item);
- loadAirconditionerratedS.value = item.ratedS; //空调功率
- loadAirconditionercount.value = item.count; //空调户数
- } else if (key === "micro_grid") {
- loadMicrogridrratedS.value = 0; //微网功率
- loadMicrogridcount.value = item.count; //微网户数
+ const item = loadAirconditioner.value[key]
+ if (key === 'BV-AC02202') {
+ console.log(item)
+ loadAirconditionerratedS.value = item.ratedS //空调功率
+ loadAirconditionercount.value = item.count //空调户数
+ } else if (key === 'micro_grid') {
+ loadMicrogridrratedS.value = 0 //微网功率
+ loadMicrogridcount.value = item.count //微网户数
}
}
}
// 荷 空调 功率
// loadAirconditionerratedS.value = 0
// 荷 充电桩 户数
- sumLoadrateds.value =
- loadMicrogridrratedS.value +
- loadAirconditionerratedS.value +
- loadchargingPileratedS.value;
+ sumLoadrateds.value = loadMicrogridrratedS.value + loadAirconditionerratedS.value + loadchargingPileratedS.value
//储 西小站
//储 用户侧 storedUserPart
- storedUserPart.value = statInfo.data.battery_unit as Info;
+ storedUserPart.value = statInfo.data.battery_unit as Info
for (const key in storedUserPart.value) {
if (storedUserPart.value.hasOwnProperty(key)) {
- const item = storedUserPart.value[key];
- if (key === "area_109283") {
- storedUserPartAreaRatedS.value = item.ratedS; //西小站储能功率
- storedUserPartAreaCount.value = item.count; //西小站储能户数
- } else if (key === "user_part") {
- storedUserPartuserRatedS.value = item.ratedS; //西小站储能功率
- storedUserPartuserCount.value = item.count; //西小站储能户数
+ const item = storedUserPart.value[key]
+ if (key === 'area_109283') {
+ storedUserPartAreaRatedS.value = item.ratedS //西小站储能功率
+ storedUserPartAreaCount.value = item.count //西小站储能户数
+ } else if (key === 'user_part') {
+ storedUserPartuserRatedS.value = item.ratedS //西小站储能功率
+ storedUserPartuserCount.value = item.count //西小站储能户数
}
}
}
// 网 主配网信息
// networkLine 主网
- networkLine.value = statInfo.data.line as Info;
+ networkLine.value = statInfo.data.line as Info
for (const key in networkLine.value) {
if (networkLine.value.hasOwnProperty(key)) {
- const item = networkLine.value[key];
- if (key === "BV-AC01101") {
- networkLine110RatedS.value = item.length; //主网110得功率
- networkLine110Count.value = item.count; //主网110得条数
- } else if (key === "BV-AC00351") {
- networkLine35RatedS.value = item.length; //主网110功率
- networkLine35Count.value = item.count; //主网110条数
+ const item = networkLine.value[key]
+ if (key === 'BV-AC01101') {
+ networkLine110RatedS.value = item.length //主网110得功率
+ networkLine110Count.value = item.count //主网110得条数
+ } else if (key === 'BV-AC00351') {
+ networkLine35RatedS.value = item.length //主网110功率
+ networkLine35Count.value = item.count //主网110条数
}
}
}
// networkFeer 配网
- networkFeer.value = statInfo.data.feeder as Info;
+ networkFeer.value = statInfo.data.feeder as Info
for (const key in networkFeer.value) {
if (networkFeer.value.hasOwnProperty(key)) {
- const item = networkFeer.value[key];
- if (key === "BV-AC00101") {
- networkFeer10RatedS.value = item.length; //主网110得功率
- networkFeer10Count.value = item.count; //主网110得条数
- } else if (key === "BV-AC00351") {
- networkFeer35RatedS.value = item.length; //主网110功率
- networkFeer35Count.value = item.count; //主网110条数
- } else if (key === "BV-AC03802") {
- networkFeer380RatedS.value = item.length; //主网110功率
- networkFeer380Count.value = item.count; //主网110条数
+ const item = networkFeer.value[key]
+ if (key === 'BV-AC00101') {
+ networkFeer10RatedS.value = item.length //主网110得功率
+ networkFeer10Count.value = item.count //主网110得条数
+ } else if (key === 'BV-AC00351') {
+ networkFeer35RatedS.value = item.length //主网110功率
+ networkFeer35Count.value = item.count //主网110条数
+ } else if (key === 'BV-AC03802') {
+ networkFeer380RatedS.value = item.length //主网110功率
+ networkFeer380Count.value = item.count //主网110条数
}
}
}
} else {
// 获取数据失败，进行相应处理
- console.log("无法获取接口数据");
+ console.log('无法获取接口数据')
}
- });
+ })
} catch (error) {
// 处理错误
- console.error("An error occurred in statInfo_api:", error);
+ console.error('An error occurred in statInfo_api:', error)
}
-};
+}
interface AlertArr {
- datetime: string;
- loadRate: string;
- mrid: string;
- name: string;
- type: string;
+ datetime: string
+ loadRate: string
+ mrid: string
+ name: string
+ type: string
}
interface Alertdata {
- alertArr: AlertArr[];
+ alertArr: AlertArr[]
}
let alertdata = reactive<Alertdata>({
- alertArr: [],
-});
+ alertArr: []
+})
// 告警信息
const alertInfo = () => {
alert_api({
- orgID: "8af8470a47aad8e20147aad92e400335",
- }).then((res) => {
- console.log(res, "88888889999");
+ orgID: '8af8470a47aad8e20147aad92e400335'
+ }).then(res => {
+ console.log(res, '88888889999')
if (res?.data.length > 0) {
- alertdata.alertArr = res.data;
- tableData.tdate=res.data;
- console.log(alertdata.alertArr, "0");
+ alertdata.alertArr = res.data
+ tableData.tdate = res.data
+ console.log(alertdata.alertArr, '0')
} else {
- console.log("没有数据");
+ console.log('没有数据')
}
- });
-};
+ })
+}
// 资源总览
// 荷
let leftData = reactive({
PVGenerationData: [
{
- name: "总发电量：",
- value: "10728.8",
- unit: "kWh",
+ name: '总发电量：',
+ value: '10728.8',
+ unit: 'kWh'
},
{
- name: "月发电量：",
- value: "1629.3",
- unit: "kWh",
+ name: '月发电量：',
+ value: '1629.3',
+ unit: 'kWh'
},
{
- name: "周发电量：",
- value: "409.2",
- unit: "kWh",
+ name: '周发电量：',
+ value: '409.2',
+ unit: 'kWh'
},
{
- name: "日发电量：",
- value: "62.5",
- unit: "kWh",
- },
+ name: '日发电量：',
+ value: '62.5',
+ unit: 'kWh'
+ }
],
carbonEmissionData: [
{
- name: "总碳排放：",
- value: "34071.2",
- unit: "kg",
+ name: '总碳排放：',
+ value: '34071.2',
+ unit: 'kg'
},
{
- name: "月碳排放：",
- value: "5162.3",
- unit: "kg",
+ name: '月碳排放：',
+ value: '5162.3',
+ unit: 'kg'
},
{
- name: "周碳排放：",
- value: "1304.1",
- unit: "kg",
+ name: '周碳排放：',
+ value: '1304.1',
+ unit: 'kg'
},
{
- name: "日碳排放：",
- value: "183.5",
- unit: "kg",
- },
+ name: '日碳排放：',
+ value: '183.5',
+ unit: 'kg'
+ }
],
threeDPieData: {
pieData: [
{
- name: "可再生能源", //名称
+ name: '可再生能源', //名称
value: 78, //值
itemStyle: {
- color: "#6BFF82", //半透明
- },
+ color: '#6BFF82' //半透明
+ }
},
{
- name: "其他能源",
+ name: '其他能源',
value: 22,
itemStyle: {
- color: "#00AAF3",
- },
- },
+ color: '#00AAF3'
+ }
+ }
],
total: 100,
center: 0,
legend: {
- orient: "horizontal",
- right: "center",
- top: "2%",
- itemGap: 30,
+ orient: 'horizontal',
+ right: 'center',
+ top: '2%',
+ itemGap: 30
},
grid3D: {
viewControl: {
distance: 500,
- alpha: 35,
- },
+ alpha: 35
+ }
},
- getHeight3D: 60,
- },
-});
+ getHeight3D: 60
+ }
+})
// 网
// 网盒子得标识
-let networkContentFlag = ref(true);
-let networkFlag = ref("1");
+let networkContentFlag = ref(true)
+let networkFlag = ref('1')
const changeNetWorkTab = (val: string) => {
- networkFlag.value = val;
-};
+ networkFlag.value = val
+}
// 运行监测
// 源运行检测的标识
-let run_sourceContentFlag = ref(true);
+let run_sourceContentFlag = ref(true)
// 荷运行检测标识
-let run_loadContentFlag = ref(true);
+let run_loadContentFlag = ref(true)
// 网运行检测标识
-let runNetworkFlag = ref(true);
+let runNetworkFlag = ref(true)
// 储能运行检测标识
-let runStorageFlag = ref(true);
+let runStorageFlag = ref(true)
// 源
// 切换tabDate
-let sourcetabDateFlag = ref(1);
+let sourcetabDateFlag = ref(1)
let sourceEchart = reactive([
{
id: 1,
- name: "光伏",
+ name: '光伏'
},
{
id: 2,
- name: "厂站",
- },
-]);
+ name: '厂站'
+ }
+])
// 网
-let networktabDateFlag = ref(1);
+let networktabDateFlag = ref(1)
let networkEchart = reactive([
{
id: 1,
- name: "线路",
+ name: '线路'
},
{
id: 2,
- name: "台区",
- },
-]);
+ name: '台区'
+ }
+])
const sourcehandleTabDate = (val: any) => {
- sourcetabDateFlag.value = val.id;
-};
+ sourcetabDateFlag.value = val.id
+}
// 荷
-let loadtabDateFlag = ref(1);
+let loadtabDateFlag = ref(1)
let loadEchart = reactive([
{
id: 1,
- name: "充电桩",
+ name: '充电桩'
},
{
id: 2,
- name: "空调",
- },
-]);
+ name: '空调'
+ }
+])
const handleloadTabDate = (val: any) => {
- loadtabDateFlag.value = val.id;
-};
+ loadtabDateFlag.value = val.id
+}
// 左
// 右
// 储
// 储能盒子得标识
-let stroedContentFlag = ref(true);
-let storagetabDateFlag = ref(1);
+let stroedContentFlag = ref(true)
+let storagetabDateFlag = ref(1)
let storageEchart = reactive([
{
id: 1,
- name: "充电",
+ name: '充电'
},
{
id: 2,
- name: "放电",
- },
-]);
+ name: '放电'
+ }
+])
const handlestorageTabDate = (val: any) => {
- storagetabDateFlag.value = val.id;
-};
+ storagetabDateFlag.value = val.id
+}
// 充放点量时间选择器
-let selectDateObj = ref(null);
+let selectDateObj = ref(null)
// 向线型图传参数
// 中1
@@ -924,124 +841,137 @@ let selectDateObj = ref(null);
// 表格
// let alert_pvFlag = ref(false);
-
interface TableDate {
- name: string;
- loadRate: string;
- datetime: string;
- type: string;
+ name: string
+ loadRate: string
+ datetime: string
+ type: string
}
interface TDATE {
- tdate: TableDate[];
+ tdate: TableDate[]
}
let tableData = reactive<TDATE>({
- tdate:[]
-});
+ tdate: []
+})
const handeleTable = () => {
// tableHeaderColor ({row, column, rowIndex, columnIndex}) {
// return 'text-align: center;'
// }
-};
+}
// 分页
-let currentPage = ref<number>(1);
-let pageSize = ref<number>(6); //每页显示的个数
-let total = ref<number>(40);
+let currentPage = ref<number>(1)
+let pageSize = ref<number>(6) //每页显示的个数
+let total = ref<number>(40)
const handleSizeChange = (size: number) => {
// console.log(`${size} items per page`);
- pageSize.value = size;
-};
+ pageSize.value = size
+}
const handleCurrentChange = (page: number) => {
- currentPage.value = page;
-};
+ currentPage.value = page
+}
//选择器
interface Infokey3 {
- id: string;
- label: string;
+ id: string
+ label: string
}
-const infovalue = ref("");
+const infovalue = ref('')
let infokeys = reactive<Infokey3[]>([
{
- id: "35kV",
- label: "35kV",
+ id: '35kV',
+ label: '35kV'
},
{
- id: "10kV",
- label: "10kV",
+ id: '10kV',
+ label: '10kV'
},
{
- id: "380V及以下",
- label: "380V及以下",
- },
-]);
+ id: '380V及以下',
+ label: '380V及以下'
+ }
+])
-const hideLeft = ref<boolean>(true); //默认页面显示
-const hideRight = ref<boolean>(true); //默认页面显示 右边
+const hideLeft = ref<boolean>(true) //默认页面显示
+const hideRight = ref<boolean>(true) //默认页面显示 右边
// 组件卸载调用
onUnmounted(() => {
- hideLeft.value = false;
- hideRight.value = false;
-});
+ hideLeft.value = false
+ hideRight.value = false
+})
// 跳转三维
-const handleThree = (val) => {
+const handleThree = val => {
const list = {
- location: "(X=18705617.163,Y=1826842.166,Z=4299675.505)",
- rotation: "Pitch=-89.9,Yaw=-90.542,Roll=0",
- };
- api_send("CameraMove", list, () => {
- console.log("CameraMove");
- });
+ location: '(X=18705617.163,Y=1826842.166,Z=4299675.505)',
+ rotation: 'Pitch=-89.9,Yaw=-90.542,Roll=0'
+ }
+ api_send('CameraMove', list, () => {
+ console.log('CameraMove')
+ })
let _list = {
CityID: val,
- status: "1",
- };
- api_send("ShowCityEdge", _list, () => {
- console.log("ShowCityEdge");
- });
-};
+ status: '1'
+ }
+ api_send('ShowCityEdge', _list, () => {
+ console.log('ShowCityEdge')
+ })
+}
+//
+//
+//
+// 获取运行监视---重过载告警统计
+let getRunAlarm = () => {
+ alert_api({
+ orgID: '8af8470a47aad8e20147aad92e400335'
+ }).then(res => {
+ console.log(res, '88888889999')
+ })
+}
+//
+//
+//
// 根据不同的屏幕宽度换算字体大小
const transformFontSize = (fontsize: number) => {
// 获取屏幕宽度
- const width = window.screen.width;
- const height = window.screen.height;
- let ratio: any = 0;
+ const width = window.screen.width
+ const height = window.screen.height
+ let ratio: any = 0
if (width > 3000) {
- ratio = width / 4240;
+ ratio = width / 4240
} else {
- ratio = width / 2220;
+ ratio = width / 2220
}
// 取下整
- return parseInt(fontsize * ratio);
-};
+ return parseInt(fontsize * ratio)
+}
// 动态获取宽高
-let ctwh = ref();
-let ctht = ref();
+let ctwh = ref()
+let ctht = ref()
const updateCtw = () => {
if (window.screen.width > 1900) {
- ctwh.value = Number(window.screen.width);
- ctht.value = Number(window.screen.height);
+ ctwh.value = Number(window.screen.width)
+ ctht.value = Number(window.screen.height)
} else {
- ctwh.value = Number(1920);
- ctht.value = Number(1080);
+ ctwh.value = Number(1920)
+ ctht.value = Number(1080)
}
-};
+}
// 使用watch来监听$route的变化
watch(
() => window.location.pathname,
- (newPath) => {
- updateCtw();
+ newPath => {
+ updateCtw()
},
{ immediate: true }
-);
+)
const styleVar = computed(() => {
return {
- "--box-width": ctwh.value + "px",
- "--box-height": ctht.value + "px",
- };
-});
+ '--box-width': ctwh.value + 'px',
+ '--box-height': ctht.value + 'px'
+ }
+})
</script>
<style lang="scss" scoped>
@@ -1095,7 +1025,7 @@ const styleVar = computed(() => {
top: changeHeight(25);
width: changeHeight(46.51);
height: changeHeight(46.51);
- background-image: url("@/assets/images/common/closebtn.png");
+ background-image: url('@/assets/images/common/closebtn.png');
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 6;
@@ -1140,7 +1070,7 @@ const styleVar = computed(() => {
height: changeHeight(38);
width: changeHeight(45);
height: changeHeight(45);
- background: url("@/assets/images/common/title_yuanicon.png") no-repeat;
+ background: url('@/assets/images/common/title_yuanicon.png') no-repeat;
background-size: 100% 100%;
}
// background: url("@/assets/images/common/common_title.png") no-repeat;
@@ -1154,7 +1084,7 @@ const styleVar = computed(() => {
margin-top: changeHeight(5);
width: changeHeight(580);
height: changeHeight(20);
- background: url("@/assets/images/common/title_lineicon.png") no-repeat;
+ background: url('@/assets/images/common/title_lineicon.png') no-repeat;
background-size: 100% 100%;
}
}
@@ -1165,7 +1095,7 @@ const styleVar = computed(() => {
flex-direction: column;
.title {
height: changeHeight(112.72);
- background: url("@/assets/images/mainPage/common_titlebg.png") no-repeat;
+ background: url('@/assets/images/mainPage/common_titlebg.png') no-repeat;
background-size: 100% 100%;
margin-bottom: changeHeight(21);
display: flex;
@@ -1186,7 +1116,7 @@ const styleVar = computed(() => {
}
.content {
flex: 1;
- background: url("@/assets/images/mainPage/common_contentbg.png") no-repeat;
+ background: url('@/assets/images/mainPage/common_contentbg.png') no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
@@ -1201,7 +1131,7 @@ const styleVar = computed(() => {
height: changeHeight(50.11);
font-size: changeHeight(40);
padding-left: changeWidth(77);
- background: url("@/assets/images/mainPage/bg_title.png") no-repeat;
+ background: url('@/assets/images/mainPage/bg_title.png') no-repeat;
background-size: 100% 100%;
}
.title_info1 {
@@ -1233,7 +1163,7 @@ const styleVar = computed(() => {
height: 100%;
display: flex;
// margin-top: changeHeight(17);
- font-family: "PingFang SC";
+ font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
color: #ffffff;
@@ -1266,7 +1196,8 @@ const styleVar = computed(() => {
align-items: center;
.b {
- width: changeHeight(200);cursor: pointer;
+ width: changeHeight(200);
+ cursor: pointer;
}
.box {
display: flex;
@@ -1318,7 +1249,7 @@ const styleVar = computed(() => {
// 运行检测
.runLisenPage {
- font-family: "PingFang SC";
+ font-family: 'PingFang SC';
font-style: normal;
// 切换
.tabDate {
@@ -1436,7 +1367,7 @@ const styleVar = computed(() => {
position: relative;
.icon_panel_left_on {
position: absolute;
- background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat;
+ background: url('@/assets/images/btnType/icon_panel_left.png') no-repeat;
background-size: 100% 100%;
width: changeHeight(42.28);
height: changeHeight(52.02);
@@ -1462,7 +1393,7 @@ const styleVar = computed(() => {
height: changeHeight(1014.74);
.icon_panel_left_on {
position: absolute;
- background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat;
+ background: url('@/assets/images/btnType/icon_panel_left.png') no-repeat;
background-size: 100% 100%;
width: changeHeight(42.28);
height: changeHeight(52.02);
@@ -1491,8 +1422,7 @@ const styleVar = computed(() => {
position: relative;
.icon_panel_left_on {
position: absolute;
- background: url("@/assets/images/btnType/icon_panel_right.png")
- no-repeat;
+ background: url('@/assets/images/btnType/icon_panel_right.png') no-repeat;
background-size: 100% 100%;
width: changeHeight(42.28);
height: changeHeight(52.02);
@@ -1559,8 +1489,7 @@ const styleVar = computed(() => {
// position: absolute;
// box-sizing: content-box;
// display: flex;
- background: url("@/assets/images/btnType/fontbg.png")
- no-repeat;
+ background: url('@/assets/images/btnType/fontbg.png') no-repeat;
background-size: 100% 100%;
padding-left: changeWidth(82);
padding-right: changeWidth(82);
@@ -1581,8 +1510,7 @@ const styleVar = computed(() => {
line-height: changeHeight(80.31);
display: flex;
justify-content: space-between;
- background: url("@/assets/images/mainPage/runlisten/network_bg.png")
- no-repeat;
+ background: url('@/assets/images/mainPage/runlisten/network_bg.png') no-repeat;
background-size: 100% 110%;
.val {
@@ -1615,8 +1543,7 @@ const styleVar = computed(() => {
position: relative;
.icon_panel_left_on {
position: absolute;
- background: url("@/assets/images/btnType/icon_panel_right.png")
- no-repeat;
+ background: url('@/assets/images/btnType/icon_panel_right.png') no-repeat;
background-size: 100% 100%;
width: changeHeight(42.28);
height: changeHeight(52.02);
@@ -1682,8 +1609,7 @@ const styleVar = computed(() => {
top: 50%;
.icon_panel_left_off {
position: absolute;
- background: url("@/assets/images/btnType/icon_panel_right.png")
- no-repeat;
+ background: url('@/assets/images/btnType/icon_panel_right.png') no-repeat;
background-size: 100% 100%;
width: changeHeight(42.28);
height: changeHeight(52.02);
@@ -1703,8 +1629,7 @@ const styleVar = computed(() => {
top: 50%;
.icon_panel_left_off {
position: absolute;
- background: url("@/assets/images/btnType/icon_panel_left.png")
- no-repeat;
+ background: url('@/assets/images/btnType/icon_panel_left.png') no-repeat;
background-size: 100% 100%;
width: changeHeight(42.28);
height: changeHeight(52.02);
@@ -1724,263 +1649,258 @@ const styleVar = computed(() => {
transform: translate(-50%, -50%);
.run_detail {
- box-sizing: border-box;
- width: changeHeight(1338.06);
- height: changeHeight(1218.37);
- background: url("@/assets/images/osPage/run_detail_bg.png") no-repeat;
- background-size: 100% 100%;
- padding-top: 1%;
- padding-left: changeHeight(27);
+ box-sizing: border-box;
+ width: changeHeight(1338.06);
+ height: changeHeight(1218.37);
+ background: url('@/assets/images/osPage/run_detail_bg.png') no-repeat;
+ background-size: 100% 100%;
+ padding-top: 1%;
+ padding-left: changeHeight(27);
- .tip {
- height: 7%;
- display: flex;
- align-items: center;
+ .tip {
+ height: 7%;
+ display: flex;
+ align-items: center;
- img {
- height: changeHeight(49);
- margin-right: changeHeight(14);
- }
-
- /* 精品可视化素材店 */
-
- font-weight: 600;
- font-size: changeHeight(45);
+ img {
+ height: changeHeight(49);
+ margin-right: changeHeight(14);
}
- .title {
- height: changeHeight(152);
+ /* 精品可视化素材店 */
+
+ font-weight: 600;
+ font-size: changeHeight(45);
+ }
+
+ .title {
+ height: changeHeight(152);
+ display: flex;
+ align-items: center;
+
+ .titlebg {
+ width: 100%;
+ height: changeHeight(82.15);
+ background: url('@/assets/images/osPage/run_detail_titlebg.png') no-repeat;
+ background-size: 100% 100%;
display: flex;
align-items: center;
- .titlebg {
- width: 100%;
- height: changeHeight(82.15);
- background: url("@/assets/images/osPage/run_detail_titlebg.png")
- no-repeat;
- background-size: 100% 100%;
- display: flex;
- align-items: center;
+ span {
+ margin-left: changeHeight(35);
+ font-weight: 400;
+ font-size: changeHeight(35);
+ }
+ }
+ }
- span {
- margin-left: changeHeight(35);
+ .content {
+ height: 68%;
+ margin-top: 1%;
+
+ :deep(.table_box) {
+ width: 100%;
+ height: 100%;
+ font-size: changeHeight(40) !important;
+
+ // 表格样式
+ .el-table,
+ tr,
+ th,
+ td {
+ background-color: transparent !important;
+ }
+
+ .el-table__body-wrapper {
+ color: #ffffff;
+ }
+
+ // 设置header的字体和高度
+ .el-table__header-wrapper {
+ .cell {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: changeHeight(40);
font-weight: 400;
- font-size: changeHeight(35);
+ height: changeHeight(93);
+ line-height: changeHeight(93);
}
}
- }
- .content {
- height: 68%;
- margin-top: 1%;
-
- :deep(.table_box) {
- width: 100%;
- height: 100%;
- font-size: changeHeight(40) !important;
-
- // 表格样式
- .el-table,
- tr,
- th,
+ // 设置行的字体和高度
+ .el-table__body-wrapper {
td {
- background-color: transparent !important;
+ // border-top: 1px solid rgba(255, 255, 255, 0.5);
+ // border-bottom: none;
}
- .el-table__body-wrapper {
- color: #ffffff;
- }
-
- // 设置header的字体和高度
- .el-table__header-wrapper {
- .cell {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: changeHeight(40);
- font-weight: 400;
- height: changeHeight(93);
- line-height: changeHeight(93);
- }
- }
-
- // 设置行的字体和高度
- .el-table__body-wrapper {
- td {
- // border-top: 1px solid rgba(255, 255, 255, 0.5);
- // border-bottom: none;
- }
-
- // 控制每行的高度
- .cell {
- display: flex;
- align-items: center;
- justify-content: center;
- height: changeHeight(100);
- line-height: changeHeight(40);
- font-size: changeHeight(38);
- // font-weight: 400;
- }
- }
-
- // el-table出现小白线 伪类
- .el-table__inner-wrapper:before {
- height: 0;
- }
-
- // 设置第一列单独样式
- .el-table td:nth-child(1) {
- color: #6ffbf7;
- font-size: changeHeight(45) !important;
- }
-
- // 设置第一列单独样式
- .el-table td:nth-child(2) {
- font-size: changeHeight(50) !important;
- }
-
- // 设置第一列单独样式
- .el-table td:nth-child(3) {
- font-size: changeHeight(35) !important;
- }
-
- // 设置第一列单独样式
- .el-table td:nth-child(4) {
- color: #43fb55;
- font-size: changeHeight(45) !important;
- }
-
- // 去除表格得所有边框
- .el-table thead tr > th {
- width: 90% !important;
- background-color: rgba(0, 100, 156, 0.8) !important;
- border: 0px 0px 10px #50ffff !important;
- color: #fff;
- }
-
- // 更改表格每行背景颜色
- .el-table tbody tr > td {
- // background-color: rgb(26,28,119);
- color: #fff;
- border: transparent !important;
- }
-
- // 鼠标滑过每行的颜色
- .el-table--enable-row-hover .el-table__body tr:hover > td {
- background-color: rgba(145, 245, 255, 0.1) !important;
- }
-
- // 去除表格上边框
- .el-table th.el-table__cell.is-leaf {
- border: transparent !important;
- }
-
- // 去除表格下边框
- .el-table::before,
- .el-table--group::after,
- .el-table--border::after {
- background-color: unset !important;
- border: transparent !important;
- }
-
- .el-table {
- border: transparent !important;
-
- background: linear-gradient(
- 180deg,
- #01233c 0%,
- rgba(8, 150, 255, 0.42) 100%
- );
+ // 控制每行的高度
+ .cell {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: changeHeight(100);
+ line-height: changeHeight(40);
+ font-size: changeHeight(38);
+ // font-weight: 400;
}
}
+
+ // el-table出现小白线 伪类
+ .el-table__inner-wrapper:before {
+ height: 0;
+ }
+
+ // 设置第一列单独样式
+ .el-table td:nth-child(1) {
+ color: #6ffbf7;
+ font-size: changeHeight(45) !important;
+ }
+
+ // 设置第一列单独样式
+ .el-table td:nth-child(2) {
+ font-size: changeHeight(50) !important;
+ }
+
+ // 设置第一列单独样式
+ .el-table td:nth-child(3) {
+ font-size: changeHeight(35) !important;
+ }
+
+ // 设置第一列单独样式
+ .el-table td:nth-child(4) {
+ color: #43fb55;
+ font-size: changeHeight(45) !important;
+ }
+
+ // 去除表格得所有边框
+ .el-table thead tr > th {
+ width: 90% !important;
+ background-color: rgba(0, 100, 156, 0.8) !important;
+ border: 0px 0px 10px #50ffff !important;
+ color: #fff;
+ }
+
+ // 更改表格每行背景颜色
+ .el-table tbody tr > td {
+ // background-color: rgb(26,28,119);
+ color: #fff;
+ border: transparent !important;
+ }
+
+ // 鼠标滑过每行的颜色
+ .el-table--enable-row-hover .el-table__body tr:hover > td {
+ background-color: rgba(145, 245, 255, 0.1) !important;
+ }
+
+ // 去除表格上边框
+ .el-table th.el-table__cell.is-leaf {
+ border: transparent !important;
+ }
+
+ // 去除表格下边框
+ .el-table::before,
+ .el-table--group::after,
+ .el-table--border::after {
+ background-color: unset !important;
+ border: transparent !important;
+ }
+
+ .el-table {
+ border: transparent !important;
+
+ background: linear-gradient(180deg, #01233c 0%, rgba(8, 150, 255, 0.42) 100%);
+ }
}
+ }
- // 分页样式
- :deep(.bottom) {
- //
- margin-right: changeHeight(27);
- height: 8%;
- display: flex;
- justify-content: center;
+ // 分页样式
+ :deep(.bottom) {
+ //
+ margin-right: changeHeight(27);
+ height: 8%;
+ display: flex;
+ justify-content: center;
- // align-items: flex-start;
- // 分页
- .el-pagination {
- .el-pagination__total {
+ // align-items: flex-start;
+ // 分页
+ .el-pagination {
+ .el-pagination__total {
+ border: 1px solid #fff;
+ border-radius: changeHeight(4);
+ padding: changeHeight(5) changeHeight(10);
+ color: rgba(255, 255, 255, 0.6);
+ }
+
+ .btn-prev,
+ .btn-next,
+ .el-pager li {
+ background-color: transparent;
+ color: rgba(87, 223, 242, 0.6);
+ border: 1px solid #57dff2;
+ border-radius: changeHeight(4);
+ margin: 0 changeHeight(5);
+ font-size: changeHeight(30);
+ padding: changeHeight(25) changeHeight(23); //图标大小
+ }
+
+ .el-icon {
+ font-size: changeHeight(25); //》 《箭头大小
+ }
+
+ .el-pager {
+ .is-active {
+ color: #6ffbf7;
+ }
+ }
+
+ .el-pagination__sizes {
+ margin-left: changeHeight(15);
+
+ .el-input {
+ width: changeHeight(100);
border: 1px solid #fff;
border-radius: changeHeight(4);
- padding: changeHeight(5) changeHeight(10);
- color: rgba(255, 255, 255, 0.6);
- }
- .btn-prev,
- .btn-next,
- .el-pager li {
- background-color: transparent;
- color: rgba(87, 223, 242, 0.6);
- border: 1px solid #57dff2;
+ .el-input__wrapper {
+ background-color: transparent;
+ box-shadow: none !important;
+
+ .el-input__inner {
+ color: rgba(255, 255, 255, 0.6);
+ }
+ }
+ }
+ }
+
+ .el-pagination__jump {
+ .el-input {
+ border: 1px solid #fff;
border-radius: changeHeight(4);
- margin: 0 changeHeight(5);
- font-size: changeHeight(30);
- padding: changeHeight(25) changeHeight(23); //图标大小
- }
- .el-icon {
- font-size: changeHeight(25); //》 《箭头大小
- }
+ .el-input__wrapper {
+ box-shadow: none;
+ background-color: transparent;
- .el-pager {
- .is-active {
- color: #6ffbf7;
- }
- }
-
- .el-pagination__sizes {
- margin-left: changeHeight(15);
-
- .el-input {
- width: changeHeight(100);
- border: 1px solid #fff;
- border-radius: changeHeight(4);
-
- .el-input__wrapper {
- background-color: transparent;
- box-shadow: none !important;
-
- .el-input__inner {
- color: rgba(255, 255, 255, 0.6);
- }
+ .el-input__inner {
+ color: rgba(255, 255, 255, 0.6);
}
}
}
- .el-pagination__jump {
- .el-input {
- border: 1px solid #fff;
- border-radius: changeHeight(4);
-
- .el-input__wrapper {
- box-shadow: none;
- background-color: transparent;
-
- .el-input__inner {
- color: rgba(255, 255, 255, 0.6);
- }
- }
- }
-
- span {
- color: rgba(255, 255, 255, 0.6);
- }
+ span {
+ color: rgba(255, 255, 255, 0.6);
}
}
}
}
+ }
.area_load {
width: changeHeight(1156.86);
height: changeHeight(620.62);
box-sizing: border-box;
- background: url("@/assets/images/osPage/area_load_bg.png") no-repeat;
+ background: url('@/assets/images/osPage/area_load_bg.png') no-repeat;
background-size: 100% 100%;
padding-top: 1%;
padding-left: changeHeight(27);
@@ -2006,8 +1926,7 @@ const styleVar = computed(() => {
.titlebg {
width: changeHeight(842.04);
height: changeHeight(57.23);
- background: url("@/assets/images/osPage/run_detail_titlebg.png")
- no-repeat;
+ background: url('@/assets/images/osPage/run_detail_titlebg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
@@ -2087,11 +2006,11 @@ const styleVar = computed(() => {
width: changeHeight(100.8);
}
.bg1 {
- background: url("@/assets/images/btnType/btnblue.png") no-repeat;
+ background: url('@/assets/images/btnType/btnblue.png') no-repeat;
background-size: 100% 100%;
}
.bg2 {
- background: url("@/assets/images/btnType/btngreen.png") no-repeat;
+ background: url('@/assets/images/btnType/btngreen.png') no-repeat;
background-size: 100% 100%;
}
.beforeEchart {