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 {