master
“yu”
parent
1508fb3bb0
commit
d3e6ab8447
|
|
@ -84,6 +84,16 @@ export function getSvgData_api(data: any) {
|
|||
data,
|
||||
});
|
||||
}
|
||||
// 左下册 svg数据_量测
|
||||
export function getSvgMeasValue_api(data: any) {
|
||||
return request({
|
||||
url: "/api/wwpm/biz/v1/device/meas_value",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -60,13 +60,15 @@
|
|||
></div>
|
||||
<!-- 右收缩箭头 -->
|
||||
<div class="title_bg title">
|
||||
<div class="title_box">
|
||||
<div class="title_box" @click="nengliangtiaojie">
|
||||
<img
|
||||
src="@/assets/images/capAjustmentPage/ajust_logo.png"
|
||||
alt=""
|
||||
/>能量调节
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="capAjust_box content_bg" v-if="true"> -->
|
||||
|
||||
<div class="capAjust_box content_bg" v-if="allFlag">
|
||||
<div class="infotitle">
|
||||
<span>可调资源</span>
|
||||
|
|
@ -449,6 +451,119 @@
|
|||
</div>
|
||||
<div class="send_info" v-if="true"></div>
|
||||
</div>
|
||||
<div class="content_center_1">
|
||||
<!-- <div class="run_detail" v-if="true"> -->
|
||||
|
||||
<div class="run_detail" v-if="runDetailFlage_1">
|
||||
<div class="tip">
|
||||
<img src="@/assets/images/osPage/run_detail_icon.png" alt="" />
|
||||
<span class="jianbian">调节记录</span>
|
||||
<div class="closebtn" @click="runDetailFlage_1 = false"></div>
|
||||
</div>
|
||||
<!-- <div class="title">
|
||||
<div class="titlebg"><span>调节记录</span></div>
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<div class="table_box">
|
||||
<el-table
|
||||
:data=tableData_1
|
||||
style="width: 100%; height: 100%"
|
||||
>
|
||||
<el-table-column label="调节目标" align="center">
|
||||
<template #default="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="调节量" align="center">
|
||||
<template #default="scope">
|
||||
<span style="margin-left: 10px">{{
|
||||
scope.row.run_content
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行时间" width="265" align="center">
|
||||
<template #default="scope">
|
||||
<span style="margin-left: 10px">{{
|
||||
scope.row.run_time
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行状态" align="center">
|
||||
<template #default="scope">
|
||||
<span style="margin-left: 10px">{{
|
||||
scope.row.run_status === 1 ? "完成" : "未完成"
|
||||
}}</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>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="area_load" v-if="areaLoadFlag">
|
||||
<div class="tip">
|
||||
<img src="@/assets/images/osPage/area_load_icon.png" alt="" />
|
||||
<span class="jianbian">台区负载情况</span>
|
||||
<div class="closebtn" @click="areaLoadFlag = false"></div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="titlebg"><span>台区自制情况</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="number">
|
||||
<div class="rate">
|
||||
<div class="box">
|
||||
<div class="yuan"></div>
|
||||
<div class="key"> 转供次数 : </div>
|
||||
</div>
|
||||
<div class="val">
|
||||
<div class="ratekw"> 10</div>
|
||||
<span>次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="numberBefore">
|
||||
<div class="Btn1 bg1 fs25">转供前</div>
|
||||
<div class="beforeEchart">
|
||||
<beforeLine></beforeLine>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="number">
|
||||
<div class="rate">
|
||||
<div class="box">
|
||||
<div class="yuan"></div>
|
||||
<div class="key"> 转供功率 : </div>
|
||||
</div>
|
||||
<div class="val">
|
||||
<div class="ratekw"> 1023</div>
|
||||
<span>kW</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="numberBefore">
|
||||
<div class="Btn1 bg2 fs25">转供后</div>
|
||||
<div class="beforeEchart">
|
||||
<afterLine></afterLine>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -516,6 +631,16 @@ const getAllSourceAjust = () => {
|
|||
}
|
||||
});
|
||||
};
|
||||
|
||||
let runDetailFlage_1=ref(false)
|
||||
const nengliangtiaojie=()=>{
|
||||
runDetailFlage_1.value=true
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 获取线路的可调资源 参数是orgID 和mrid
|
||||
const getAllSourceAjust_Line = (mrid: string) => {
|
||||
let datainput = {
|
||||
|
|
@ -531,7 +656,7 @@ const getAllSourceAjust_Line = (mrid: string) => {
|
|||
|
||||
let treeNodeKey = ref(""); //点击设备树二级服务获取的台区id去获取台区负载率
|
||||
let treeNodes = ref("");
|
||||
// 设备树传来的设备树节点id treeNode是节点数据
|
||||
// 设备树传来的设备树节点id treeNode是节c点数据
|
||||
const getTreeKey = (treeNode: any) => {
|
||||
rateDate_willFlag.value = false;
|
||||
treeNodeKey.value = treeNode.key; //线路的id
|
||||
|
|
@ -836,6 +961,32 @@ const changeSourceInfo = (val: string) => {
|
|||
// // },
|
||||
// ]);
|
||||
|
||||
|
||||
// 执行明细
|
||||
// 执行明细
|
||||
// 表格
|
||||
interface TableDate {
|
||||
id: string;
|
||||
run_content: string;
|
||||
run_time: string;
|
||||
run_status: number;
|
||||
}
|
||||
let tableData_1 = reactive<TableDate[]>([
|
||||
{
|
||||
id: "西小站村V2G充电桩",
|
||||
run_content: "20",
|
||||
run_time: "2024-07-18 12:56",
|
||||
run_status: 1,
|
||||
},
|
||||
{
|
||||
id: "西小站电网台区储能",
|
||||
run_content: "8",
|
||||
run_time: "2024-07-18 12:32",
|
||||
run_status: 1,
|
||||
},
|
||||
,
|
||||
|
||||
]);
|
||||
// 右 -能量调节
|
||||
let progressContentFlag = ref(false);
|
||||
// 调节分析
|
||||
|
|
@ -1163,8 +1314,8 @@ const styleVar = computed(() => {
|
|||
position: absolute;
|
||||
right: changeHeight(16.98);
|
||||
top: changeHeight(25);
|
||||
width: changeHeight(26.51);
|
||||
height: changeHeight(26.51);
|
||||
width: changeHeight(46.51);
|
||||
height: changeHeight(46.51);
|
||||
background-image: url("@/assets/images/common/closebtn.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -2602,5 +2753,409 @@ const styleVar = computed(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
.content_center_1 {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.linesvgbox {
|
||||
box-sizing: border-box;
|
||||
width: changeHeight(1338.06);
|
||||
height: changeHeight(1218.37);
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
.tip {
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: changeHeight(59);
|
||||
margin-right: changeHeight(14);
|
||||
}
|
||||
|
||||
/* 精品可视化素材店 */
|
||||
|
||||
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;
|
||||
|
||||
span {
|
||||
margin-left: changeHeight(24);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 68%;
|
||||
margin-top: 1%;
|
||||
margin-top: 5%;
|
||||
|
||||
: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;
|
||||
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%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页样式
|
||||
:deep(.bottom) {
|
||||
//
|
||||
margin-right: changeHeight(27);
|
||||
height: 8%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
// 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);
|
||||
|
||||
.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);
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area_load {
|
||||
width: changeHeight(1747.34);
|
||||
height: changeHeight(937.4);
|
||||
box-sizing: border-box;
|
||||
background: url("@/assets/images/osPage/area_load_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 1%;
|
||||
padding-left: changeHeight(27);
|
||||
|
||||
.tip {
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: changeHeight(54);
|
||||
margin-right: changeHeight(14);
|
||||
}
|
||||
|
||||
/* 精品可视化素材店 */
|
||||
|
||||
font-weight: 600;
|
||||
font-size: changeHeight(50);
|
||||
}
|
||||
|
||||
.title {
|
||||
height: changeHeight(162);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.titlebg {
|
||||
width: 100%;
|
||||
height: changeHeight(82);
|
||||
background: url("@/assets/images/osPage/run_detail_titlebg.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin-left: 2%;
|
||||
font-weight: 400;
|
||||
font-size: changeHeight(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 75%;
|
||||
display: flex;
|
||||
margin-top: 1%;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
.number {
|
||||
height: changeHeight(95);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.yuan {
|
||||
background: #50ffff;
|
||||
width: changeHeight(15);
|
||||
height: changeHeight(15);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.key {
|
||||
font-size: changeHeight(35);
|
||||
}
|
||||
}
|
||||
|
||||
.val {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ratekw {
|
||||
/* 9999 */
|
||||
font-weight: 600;
|
||||
font-size: changeHeight(45);
|
||||
|
||||
// color: #12e7e3;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: changeHeight(5);
|
||||
font-size: changeHeight(35);
|
||||
// background-color: #00f0ff;
|
||||
margin-left: changeHeight(5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.numberBefore {
|
||||
position: relative;
|
||||
|
||||
.Btn1 {
|
||||
position: absolute;
|
||||
height: changeHeight(60);
|
||||
line-height: changeHeight(60);
|
||||
font-size: changeHeight(35);
|
||||
width: changeHeight(152.25);
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
background: url("@/assets/images/btnType/btnblue.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.bg2 {
|
||||
background: url("@/assets/images/btnType/btngreen.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.beforeEchart {
|
||||
height: changeHeight(560);
|
||||
width: changeHeight(800);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -331,7 +331,7 @@
|
|||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="ajustCar" v-if="false"> -->
|
||||
<!-- <div class="ajustCar" v-if="true"> -->
|
||||
|
||||
<div class="ajustCar" v-if="ajustCarPageFlag">
|
||||
<div class="tip">
|
||||
|
|
@ -382,7 +382,7 @@
|
|||
<el-date-picker
|
||||
v-model="formData.start_date"
|
||||
type="date"
|
||||
placeholder="Pick a date"
|
||||
placeholder="开始日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-col>
|
||||
|
|
@ -413,7 +413,7 @@
|
|||
<el-date-picker
|
||||
v-model="formData.end_date"
|
||||
type="date"
|
||||
placeholder="Pick a date"
|
||||
placeholder="结束日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-col>
|
||||
|
|
|
|||
|
|
@ -292,7 +292,7 @@
|
|||
<div class="cen">
|
||||
<div class="namebg">
|
||||
配网（
|
||||
<div class="fs35">线路总数：1007条</div>
|
||||
<div class="fs35">线路总数：978条</div>
|
||||
）
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -348,7 +348,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">2 <span>条</span></div>
|
||||
<div class="hu">1<span>条</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -383,7 +383,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">8427 <span>条</span></div>
|
||||
<div class="hu">8427 <span>台</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
|
|
@ -399,7 +399,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">8035 <span>条</span></div>
|
||||
<div class="hu">8035 <span>台</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
|
|
@ -538,7 +538,7 @@
|
|||
class="icon_panel_left_on"
|
||||
@click="stroedContentFlag = false"
|
||||
></div>
|
||||
<div class="title">
|
||||
<div class="title" @click="alert_tongzhi">
|
||||
<img src="@/assets/images/mainPage/icon_title4.png" alt="" />
|
||||
<span>储</span>
|
||||
</div>
|
||||
|
|
@ -665,6 +665,27 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 通知消息 -->
|
||||
<div class="content_center_alert1" v-if="true">
|
||||
<div class="run_detail" v-if="alert_tongzhiFlag">
|
||||
<div class="tip">
|
||||
<img src="@/assets/images/mainPage/icon_alert_pv.png" alt="" />
|
||||
<span class="jianbian">通知</span>
|
||||
<div class="closebtn" @click="alert_tongzhiFlag = false"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="box">
|
||||
<img src="@/assets/images/homePage/tongzhi.png" alt="" />
|
||||
<div class="gaobottom">
|
||||
<div class="gao">
|
||||
<!-- 接到10kV线路556调节需求30kW，时间17:00-18:00，待处理 -->
|
||||
[编号：48776100419]台区55608（10kV 556线路）于2024-07-12 14:36:54发生功率倒送，反向负载率1.52%。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="black_box" v-if="alert_pvFlag"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1267,6 +1288,10 @@ let storageEchart = reactive([
|
|||
const handlestorageTabDate = (val: any) => {
|
||||
storagetabDateFlag.value = val.id;
|
||||
};
|
||||
let alert_tongzhiFlag=ref(false)
|
||||
const alert_tongzhi=()=>{
|
||||
alert_tongzhiFlag.value=true
|
||||
}
|
||||
// 充放点量时间选择器
|
||||
let selectDateObj = ref(null);
|
||||
// 向线型图传参数
|
||||
|
|
@ -2892,6 +2917,421 @@ const styleVar = computed(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
.content_center_alert1 {
|
||||
z-index: 1001;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.run_detail {
|
||||
box-sizing: border-box;
|
||||
width: changeHeight(938);
|
||||
height: changeHeight(476.7);
|
||||
// width:changeHeight(1338.06);
|
||||
// height: changeHeight(1218.37);
|
||||
background: url("@/assets/images/homePage/jinggaobg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 1%;
|
||||
padding-left: changeHeight(27);
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
img {
|
||||
width: changeHeight(185);
|
||||
height: changeHeight(185);
|
||||
}
|
||||
.gaobottom {
|
||||
padding-left: 2%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: changeHeight(43);
|
||||
|
||||
span,
|
||||
.gao {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
height: 14%;
|
||||
// height: 7%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: changeHeight(49);
|
||||
margin-right: changeHeight(14);
|
||||
}
|
||||
|
||||
/* 精品可视化素材店 */
|
||||
|
||||
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;
|
||||
|
||||
span {
|
||||
margin-left: changeHeight(35);
|
||||
font-weight: 400;
|
||||
font-size: 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;
|
||||
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%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页样式
|
||||
:deep(.bottom) {
|
||||
//
|
||||
margin-right: changeHeight(27);
|
||||
height: 8%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
// 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);
|
||||
|
||||
.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);
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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-size: 100% 100%;
|
||||
padding-top: 1%;
|
||||
padding-left: changeHeight(27);
|
||||
.tip {
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: changeHeight(32.46);
|
||||
margin-right: changeHeight(14);
|
||||
}
|
||||
|
||||
/* 精品可视化素材店 */
|
||||
|
||||
font-weight: 600;
|
||||
font-size: changeHeight(35);
|
||||
}
|
||||
.title {
|
||||
height: changeHeight(105.88);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.titlebg {
|
||||
width: changeHeight(842.04);
|
||||
height: changeHeight(57.23);
|
||||
background: url("@/assets/images/osPage/run_detail_titlebg.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
span {
|
||||
margin-left: changeHeight(24);
|
||||
font-weight: 400;
|
||||
}
|
||||
// 下拉菜单
|
||||
:deep(.selectbox) {
|
||||
position: absolute;
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: red !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 75%;
|
||||
display: flex;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
flex: 1;
|
||||
.number {
|
||||
height: changeHeight(50);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.yuan {
|
||||
background: #50ffff;
|
||||
width: changeHeight(8);
|
||||
height: changeHeight(8);
|
||||
border-radius: changeHeight(8);
|
||||
}
|
||||
.key {
|
||||
font-size: changeHeight(18);
|
||||
}
|
||||
}
|
||||
.val {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ratekw {
|
||||
/* 9999 */
|
||||
font-weight: 600;
|
||||
font-size: changeHeight(25);
|
||||
|
||||
// color: #12e7e3;
|
||||
}
|
||||
span {
|
||||
margin-top: changeHeight(5);
|
||||
font-size: changeHeight(18);
|
||||
// background-color: #00f0ff;
|
||||
margin-left: changeHeight(5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.numberBefore {
|
||||
position: relative;
|
||||
.Btn1 {
|
||||
position: absolute;
|
||||
height: changeHeight(39.59);
|
||||
line-height: changeHeight(39.59);
|
||||
|
||||
width: changeHeight(100.8);
|
||||
}
|
||||
.bg1 {
|
||||
background: url("@/assets/images/btnType/btnblue.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bg2 {
|
||||
background: url("@/assets/images/btnType/btngreen.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.beforeEchart {
|
||||
height: changeHeight(400);
|
||||
width: changeHeight(550);
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.black_box {
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue