From 3a360df84e1db575b6863fa54615650f8da802b4 Mon Sep 17 00:00:00 2001
From: zhaoqiang <2117596534@qq.com>
Date: Sun, 14 Jul 2024 17:14:14 +0800
Subject: [PATCH] update
---
src/api/carPage/index.ts | 12 +
src/views/pages/carPage/index.vue | 456 +++++++++++++-----------------
2 files changed, 204 insertions(+), 264 deletions(-)
create mode 100644 src/api/carPage/index.ts
diff --git a/src/api/carPage/index.ts b/src/api/carPage/index.ts
new file mode 100644
index 0000000..2e88c58
--- /dev/null
+++ b/src/api/carPage/index.ts
@@ -0,0 +1,12 @@
+import request from "@/utils/http/request";
+
+export function powerCurve_api(data: any) {
+ return request({
+ url: "/api/wwpm/biz/v1/pipe/power_curve",
+ method: "POST",
+ data,
+ });
+}
+
+
+
diff --git a/src/views/pages/carPage/index.vue b/src/views/pages/carPage/index.vue
index d721940..b722c91 100644
--- a/src/views/pages/carPage/index.vue
+++ b/src/views/pages/carPage/index.vue
@@ -2,26 +2,15 @@
<template>
<div class="carpage_container" :style="styleVar">
<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="showPanel">
- <div
- class="icon_panel_left_off"
- @click="carleftContentFlag = true"
- v-if="!carleftContentFlag"
- ></div>
+ <div class="icon_panel_left_off" @click="carleftContentFlag = true" v-if="!carleftContentFlag"></div>
</div>
<!-- 左展开箭头 -->
<div class="carleft" v-if="carleftContentFlag">
<!-- 左收缩箭头 -->
- <div
- class="icon_panel_left_on"
- @click="carleftContentFlag = false"
- v-if="carleftContentFlag"
- ></div>
+ <div class="icon_panel_left_on" @click="carleftContentFlag = false" v-if="carleftContentFlag"></div>
<!-- 左收缩箭头 -->
<!-- 显示树节点以及所有的父节点 -->
<div class="top_box"></div>
@@ -33,44 +22,29 @@
<div class="car_left_box content_bg">
<carTree></carTree>
</div>
-
+
</div>
</div>
</div>
<div class="content_right">
- <div
- :class="` animated ${hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'}`"
- :style="{ opacity: hideRight ? '1' : '0' }"
- >
+ <div :class="` animated ${hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'}`" :style="{ opacity: hideRight ? '1' : '0' }">
<!-- 右展开箭头 -->
<div class="showPanel">
- <div
- class="icon_panel_right_off"
- @click="carrightFlag = true"
- v-if="!carrightFlag"
- ></div>
+ <div class="icon_panel_right_off" @click="carrightFlag = true" v-if="!carrightFlag"></div>
</div>
<!-- 右展开箭头 -->
<div class="top_box" v-if="carrightFlag">
- <div
- :class="[
+ <div :class="[
pageFalg === ite.id ? 'tabp_active' : 'tabp_default',
'tab_box',
- ]"
- v-for="ite in tabPageList"
- @click="changePage(ite.id)"
- >
+ ]" v-for="ite in tabPageList" @click="changePage(ite.id)">
{{ ite.pname }}
</div>
</div>
<div class="carPage" v-if="pageFalg === '1'">
<div class="carright" v-if="carrightFlag">
<!-- 右收缩箭头 -->
- <div
- class="icon_panel_right_on"
- @click="carrightFlag = false"
- v-if="carrightFlag"
- ></div>
+ <div class="icon_panel_right_on" @click="carrightFlag = false" v-if="carrightFlag"></div>
<!-- 右收缩箭头 -->
<div class="car_right_box content_bg">
<div class="load_m_box">
@@ -80,10 +54,7 @@
<div class="info2_m">
<div class="top1_box">
- <img
- src="@/assets/images/mainPage/icon4_xixiao.png"
- alt=""
- />
+ <img src="@/assets/images/mainPage/icon4_xixiao.png" alt="" />
<div class="left1_box">
<div class="name">
<div class="cen">
@@ -104,7 +75,7 @@
<load_echart :eName="eName1"></load_echart>
</div>
</div>
-
+
<div class="load_runstatus_box">
<div class="infotitle"><span>充电桩运行状态</span></div>
<div class="list_box">
@@ -131,33 +102,26 @@
</div>
<div class="list_content">
<div class="c_info" v-for="item in chargingList">
- <img
- src="@/assets/images/device/chongdainzhaung.png"
- alt=""
- />
+ <img src="@/assets/images/device/chongdainzhaung.png" alt="" />
<div class="r_info">
<div class="t_info">
<span class="c-blue">{{ item.c_name }}</span>
<div class="tval">
- <div
- :class="[
+ <div :class="[
item.c_status === '充电中'
? 'b-green'
: item.c_status === '未使用'
? 'b-gary'
: 'b-yellow',
'yuand',
- ]"
- ></div>
- <div
- :class="[
+ ]"></div>
+ <div :class="[
item.c_status === '充电中'
? 'c-green'
: item.c_status === '未使用'
? 'c-gary'
: 'c-yellow',
- ]"
- >
+ ]">
{{ item.c_status }}
</div>
</div>
@@ -182,21 +146,14 @@
<div class="analysisPage" v-if="pageFalg === '2'">
<div class="carright" v-if="carrightFlag">
<!-- 右收缩箭头 -->
- <div
- class="icon_panel_right_on"
- @click="carrightFlag = false"
- v-if="carrightFlag"
- ></div>
+ <div class="icon_panel_right_on" @click="carrightFlag = false" v-if="carrightFlag"></div>
<!-- 右收缩箭头 -->
<div class="car_right_box content_bg">
<div class="charging_address">
<div class="infotitle"><span>充电桩选址服务</span></div>
<div class="info1">
<div class="suggest">
- <img
- src="@/assets/images/device/chongdainzhaung.png"
- alt=""
- />
+ <img src="@/assets/images/device/chongdainzhaung.png" alt="" />
<div class="suggest_box">
<div class="s1">充电桩选址服务</div>
<div class="s2">
@@ -210,11 +167,7 @@
<div class="infotitle"><span>充电服务推荐</span></div>
<div class="info1">
<div class="suggest">
- <img
- src="@/assets/images/carPage/charging.png"
- alt=""
- class="charging"
- />
+ <img src="@/assets/images/carPage/charging.png" alt="" class="charging" />
<div class="suggest_box">
<div class="s1">充电服务推荐</div>
<div class="s2">
@@ -265,15 +218,12 @@
</div>
<div class="content">
<div class="table_box1">
- <el-table
- :data="
+ <el-table :data="
adjustTableData.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">{{ scope.row.name }}</span>
@@ -297,16 +247,7 @@
</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>
@@ -314,78 +255,72 @@
</template>
<script setup lang="ts">
-import {
- ref,
- computed,
- watch,
- onMounted,
- reactive,
- onUnmounted,
- nextTick,
- getCurrentInstance,
- inject,
-} from "vue";
-import { ElMessage } from "element-plus";
-import { getColorFun } from "@/hooks/getColorFun/index";
-import { app_load, api_send, api_register } from "@/ue4Player/app";
-import load_echart from "./load_echart.vue";
-import load_c_echart from "./load_c_echart.vue";
+import { ref, computed, watch, onMounted, reactive, onUnmounted, nextTick, getCurrentInstance, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getColorFun } from '@/hooks/getColorFun/index'
+import { app_load, api_send, api_register } from '@/ue4Player/app'
+import load_echart from './load_echart.vue'
+import load_c_echart from './load_c_echart.vue'
-import load_info_echart from "./load_info_echart.vue";
-import cdz_echart from "./cdz_echart.vue";
-import carTree from "@/views/commonPage/carTree.vue";
-onMounted(() => {});
+import load_info_echart from './load_info_echart.vue'
+import cdz_echart from './cdz_echart.vue'
+import carTree from '@/views/commonPage/carTree.vue'
+import { powerCurve_api } from '@/api/carPage/index'
+onMounted(() => {
+ // 获取右侧数据
+ getPowerCurve_api()
+})
// 车网互动专题切换栏
let tabPageList = reactive([
- { id: "1", pname: "车网互动" },
- { id: "2", pname: "决策分析" },
-]);
+ { id: '1', pname: '车网互动' },
+ { id: '2', pname: '决策分析' }
+])
// 切换页面功能
-let pageFalg = ref("1");
+let pageFalg = ref('1')
const changePage = (val: string) => {
- pageFalg.value = val;
-};
+ pageFalg.value = val
+}
// 左侧页面标识
-let carleftContentFlag = ref(true);
+let carleftContentFlag = ref(true)
// 右侧页面标识
-let carrightFlag = ref(true);
+let carrightFlag = ref(true)
// 负荷管理切换
-let loadtabDateFlag = ref(1);
+let loadtabDateFlag = ref(1)
const loadEchart = reactive([
{
id: 1,
- name: "高速充电桩群",
+ name: '高速充电桩群'
},
{
id: 2,
- name: "谊景村",
- },
-]);
+ name: '谊景村'
+ }
+])
const loadhandleTabDate = (val: any) => {
- loadtabDateFlag.value = val.id;
-};
+ loadtabDateFlag.value = val.id
+}
// load_echart 传参
-let eName1 = ref("负载率");
-let eName2 = ref("负载情况");
+let eName1 = ref('负载率')
+let eName2 = ref('负载情况')
// 地图标识
let lengendDate = reactive([
{
id: 1,
- lengendName: "充电桩分布热力图",
- checkFlag: false,
+ lengendName: '充电桩分布热力图',
+ checkFlag: false
},
{
id: 2,
- lengendName: "新能源车辆热力图",
- checkFlag: false,
- },
-]);
+ lengendName: '新能源车辆热力图',
+ checkFlag: false
+ }
+])
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 => {
@@ -411,150 +346,165 @@ let handleSelectCheck = (datas: any) => {
// console.log("SwitchStationstatus", "Switchstationstatus");
// });
// }
-};
+}
// 中
// 调节次数信息
-const adjustInfoFlag = ref(false);
+const adjustInfoFlag = ref(false)
// 表格
interface User {
- name: string;
- type: string;
- start_date: any;
- end_date: string;
- number: string;
- isEdit?: boolean;
+ name: string
+ type: string
+ start_date: any
+ end_date: string
+ number: string
+ isEdit?: boolean
}
// 可调资源信息
let adjustTableData = reactive<User[]>([
{
- name: "**光伏",
- type: "光伏",
- number: "2",
- start_date: "2023-04-30 12:30:00",
- end_date: "00:00:00",
+ name: '**光伏',
+ type: '光伏',
+ number: '2',
+ start_date: '2023-04-30 12:30:00',
+ end_date: '00:00:00'
},
{
- name: "**光伏",
- type: "光伏",
- number: "2",
- start_date: "2023-04-30 12:30:00",
- end_date: "00:00:00",
+ name: '**光伏',
+ type: '光伏',
+ number: '2',
+ start_date: '2023-04-30 12:30:00',
+ end_date: '00:00:00'
},
{
- name: "**储能",
- type: "储能",
- number: "2",
- start_date: "2023-04-30 12:30:00",
- end_date: "00:00:00",
+ name: '**储能',
+ type: '储能',
+ number: '2',
+ start_date: '2023-04-30 12:30:00',
+ end_date: '00:00:00'
},
{
- name: "**储能",
- type: "储能",
- number: "2",
- start_date: "2023-04-30 12:30:00",
- end_date: "00:00:00",
- },
-]);
+ name: '**储能',
+ type: '储能',
+ number: '2',
+ start_date: '2023-04-30 12:30:00',
+ end_date: '00:00:00'
+ }
+])
// 分页
-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
+}
-const hideLeft = ref<boolean>(true); //默认页面显示
-const hideRight = ref<boolean>(true); //默认页面显示 右边
+const hideLeft = ref<boolean>(true) //默认页面显示
+const hideRight = ref<boolean>(true) //默认页面显示 右边
interface ChargingList {
- c_name: string;
- c_status: string;
- c_load: string;
- c_total: string;
+ c_name: string
+ c_status: string
+ c_load: string
+ c_total: string
}
// 右侧充电桩运行状态
let chargingList = reactive<ChargingList[]>([
- { c_name: "充电桩1号", c_status: "充电中", c_load: "30", c_total: "1475" },
- { c_name: "充电桩4号", c_status: "充电中", c_load: "45", c_total: "235" },
- { c_name: "充电桩2号", c_status: "充电中", c_load: "50", c_total: "675" },
- { c_name: "充电桩7号", c_status: "未充电", c_load: "32", c_total: "244" },
- { c_name: "充电桩12号", c_status: "未充电", c_load: "48", c_total: "368" },
- { c_name: "充电桩3号", c_status: "未充电", c_load: "56", c_total: "123" },
+ { c_name: '充电桩1号', c_status: '充电中', c_load: '30', c_total: '1475' },
+ { c_name: '充电桩4号', c_status: '充电中', c_load: '45', c_total: '235' },
+ { c_name: '充电桩2号', c_status: '充电中', c_load: '50', c_total: '675' },
+ { c_name: '充电桩7号', c_status: '未充电', c_load: '32', c_total: '244' },
+ { c_name: '充电桩12号', c_status: '未充电', c_load: '48', c_total: '368' },
+ { c_name: '充电桩3号', c_status: '未充电', c_load: '56', c_total: '123' },
- { c_name: "充电桩3号", c_status: "未充电", c_load: "23", c_total: "566" },
-]);
+ { c_name: '充电桩3号', c_status: '未充电', c_load: '23', c_total: '566' }
+])
// 组件卸载调用
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 getPowerCurve_api = () => {
+ powerCurve_api({
+ mrid: '1242690000004712'
+ }).then((res: any) => {
+ console.log(res,'resresres');
+
+ })
+}
+//
+//
+//
// 根据不同的屏幕宽度换算字体大小
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>
@@ -602,7 +552,7 @@ const styleVar = computed(() => {
top: changeHeight(25);
width: changeHeight(26.51);
height: changeHeight(26.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;
@@ -618,19 +568,19 @@ const styleVar = computed(() => {
}
.blueShadow {
/* 精品可视化素材店 */
- font-family: "PingFang SC";
+ font-family: 'PingFang SC';
font-style: normal;
font-weight: 600;
text-shadow: 0px 0px 10px #00f0ff;
}
// 公共标题
.title_bg {
- background: url("@/assets/images/carPage/car_titlebg.png") no-repeat;
+ background: url('@/assets/images/carPage/car_titlebg.png') no-repeat;
background-size: 100% 100%;
}
// 公共背景
.content_bg {
- background: url("@/assets/images/common/tree_content_bg.png") no-repeat;
+ background: url('@/assets/images/common/tree_content_bg.png') no-repeat;
background-size: 100% 100%;
}
// 公共二级标题
@@ -640,7 +590,7 @@ const styleVar = computed(() => {
height: changeHeight(60);
line-height: changeHeight(60);
- background: url("@/assets/images/common/common_title.png") no-repeat;
+ background: url('@/assets/images/common/common_title.png') no-repeat;
background-size: 100% 100%;
font-size: changeHeight(40);
// background-color: red;
@@ -727,7 +677,7 @@ const styleVar = computed(() => {
margin-top: changeHeight(100);
margin-top: changeHeight(17);
// margin-top: 0.5%;
- font-family: "PingFang SC";
+ font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
color: #ffffff;
@@ -751,8 +701,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);
@@ -769,7 +718,7 @@ const styleVar = computed(() => {
.icon_panel_left_on {
position: absolute;
background: salmon;
- 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);
@@ -826,7 +775,7 @@ const styleVar = computed(() => {
width: changeHeight(368.31);
height: changeHeight(180.28);
// padding: changeHeight(25) changeHeight(5) changeHeight(0) changeHeight(10);
- background: url("@/assets/images/legend/legend_bg.png") no-repeat;
+ background: url('@/assets/images/legend/legend_bg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
@@ -872,7 +821,7 @@ const styleVar = computed(() => {
display: none !important;
// margin-top: changeHeight(40);
- }
+ }
}
}
}
@@ -895,7 +844,7 @@ const styleVar = computed(() => {
top: 50%;
.icon_panel_right_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);
@@ -915,8 +864,7 @@ const styleVar = computed(() => {
// 右 箭头展开
.icon_panel_right_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);
@@ -1019,8 +967,7 @@ const styleVar = computed(() => {
top: changeHeight(0.5);
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);
@@ -1033,8 +980,7 @@ const styleVar = computed(() => {
.bottom {
width: changeHeight(640.16);
height: changeHeight(80.31);
- background: url("@/assets/images/carPage/car_left_cbg.png")
- no-repeat;
+ background: url('@/assets/images/carPage/car_left_cbg.png') no-repeat;
background-size: 100% 100%;
padding-right: changeHeight(53);
padding-left: changeHeight(33);
@@ -1075,10 +1021,9 @@ const styleVar = computed(() => {
}
}
.load_runstatus_box {
-
height: 100%;
width: 95%;
-
+
.yuand {
width: changeHeight(15);
height: changeHeight(15);
@@ -1107,8 +1052,7 @@ const styleVar = computed(() => {
color: #ffca74;
}
.list_box {
-
- margin-top:2%;
+ margin-top: 2%;
height: changeHeight(54);
padding-left: changeHeight(74);
width: 90%;
@@ -1128,8 +1072,7 @@ const styleVar = computed(() => {
margin-top: 2%;
// height: changeHeight(370);
- height:64%;
-
+ height: 64%;
padding-left: changeHeight(44);
overflow: auto;
@@ -1254,8 +1197,7 @@ const styleVar = computed(() => {
left: 6%;
width: changeHeight(965.19);
height: changeHeight(410.59);
- background: url("@/assets/images/carPage/car_right_info2bg.png")
- no-repeat;
+ background: url('@/assets/images/carPage/car_right_info2bg.png') no-repeat;
background-size: 100% 100%;
.bgls {
width: 100%;
@@ -1289,7 +1231,7 @@ const styleVar = computed(() => {
display: flex;
align-items: center;
font-size: changeHeight(40);
- background: url("@/assets/images/btnType/tabPage_default.png") no-repeat;
+ background: url('@/assets/images/btnType/tabPage_default.png') no-repeat;
background-size: 100% 100%;
.tab_box {
width: changeHeight(346);
@@ -1299,7 +1241,7 @@ const styleVar = computed(() => {
justify-content: center;
}
.tabp_active {
- background: url("@/assets/images/btnType/tabPage_active.png") no-repeat;
+ background: url('@/assets/images/btnType/tabPage_active.png') no-repeat;
background-size: 102% 105%;
}
.tabp_default {
@@ -1367,7 +1309,7 @@ const styleVar = computed(() => {
box-sizing: border-box;
width: changeHeight(740.17);
height: changeHeight(801.49);
- background: url("@/assets/images/osPage/run_detail_bg.png") no-repeat;
+ background: url('@/assets/images/osPage/run_detail_bg.png') no-repeat;
background-size: 100% 100%;
padding-top: 1%;
padding-left: changeHeight(27);
@@ -1393,8 +1335,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;
@@ -1448,11 +1389,7 @@ const styleVar = computed(() => {
// background-image: url("@/assets/images/chargingPage/add_icon_bg.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
- background: linear-gradient(
- 180deg,
- rgba(2, 45, 88, 0.8) 0%,
- rgba(6, 178, 232, 0.8) 100%
- ) !important;
+ background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%) !important;
mix-blend-mode: normal;
border: 1px solid #00c2ff;
color: #ffffff !important;
@@ -1461,11 +1398,7 @@ const styleVar = computed(() => {
// background-image: url("@/assets/images/chargingPage/add_bg.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
- background: linear-gradient(
- 180deg,
- rgba(2, 45, 88, 0.8) 0%,
- rgba(6, 178, 232, 0.8) 100%
- ) !important;
+ background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%) !important;
mix-blend-mode: normal;
border: 1px solid #00c2ff;
color: #ffffff !important;
@@ -1593,11 +1526,7 @@ const styleVar = computed(() => {
.el-table {
border: transparent !important;
- background: linear-gradient(
- 180deg,
- #01233c 0%,
- rgba(8, 150, 255, 0.42) 100%
- );
+ background: linear-gradient(180deg, #01233c 0%, rgba(8, 150, 255, 0.42) 100%);
}
}
}
@@ -1680,7 +1609,7 @@ const styleVar = computed(() => {
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);
@@ -1706,8 +1635,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;
@@ -1786,11 +1714,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 {