zhaoqiang
/
v3tianjin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://58.87.70.254/zhaoqiang/v3tianjin

master
“yu” 2024-07-14 17:16:20 +08:00
parent ea3c57f04a 3a360df84e
commit d5135d7fa0
2 changed files with 204 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/carPage/index.ts Normal file
View File

@ -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,
});
}

448
src/views/pages/carPage/index.vue
View File

@ -2,26 +2,15 @@
<template> <template>
<div class="carpage_container" :style="styleVar"> <div class="carpage_container" :style="styleVar">
<div class="content_left"> <div class="content_left">
<div <div :class="`animated ${hideLeft ? 'fadeInLeftBig' : 'fadeOutLeftBig'}`" :style="{ opacity: hideLeft ? '1' : '0' }">
:class="`animated ${hideLeft ? 'fadeInLeftBig' : 'fadeOutLeftBig'}`"
:style="{ opacity: hideLeft ? '1' : '0' }"
>
<!-- 左展开箭头 --> <!-- 左展开箭头 -->
<div class="showPanel"> <div class="showPanel">
<div <div class="icon_panel_left_off" @click="carleftContentFlag = true" v-if="!carleftContentFlag"></div>
class="icon_panel_left_off"
@click="carleftContentFlag = true"
v-if="!carleftContentFlag"
></div>
</div> </div>
<!-- 左展开箭头 --> <!-- 左展开箭头 -->
<div class="carleft" v-if="carleftContentFlag"> <div class="carleft" v-if="carleftContentFlag">
<!-- 左收缩箭头 --> <!-- 左收缩箭头 -->
<div <div class="icon_panel_left_on" @click="carleftContentFlag = false" v-if="carleftContentFlag"></div>
class="icon_panel_left_on"
@click="carleftContentFlag = false"
v-if="carleftContentFlag"
></div>
<!-- 左收缩箭头 --> <!-- 左收缩箭头 -->
<!-- 显示树节点以及所有的父节点 --> <!-- 显示树节点以及所有的父节点 -->
<div class="top_box"></div> <div class="top_box"></div>
@ -38,39 +27,24 @@
</div> </div>
</div> </div>
<div class="content_right"> <div class="content_right">
<div <div :class="` animated ${hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'}`" :style="{ opacity: hideRight ? '1' : '0' }">
:class="` animated ${hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'}`"
:style="{ opacity: hideRight ? '1' : '0' }"
>
<!-- 右展开箭头 --> <!-- 右展开箭头 -->
<div class="showPanel"> <div class="showPanel">
<div <div class="icon_panel_right_off" @click="carrightFlag = true" v-if="!carrightFlag"></div>
class="icon_panel_right_off"
@click="carrightFlag = true"
v-if="!carrightFlag"
></div>
</div> </div>
<!-- 右展开箭头 --> <!-- 右展开箭头 -->
<div class="top_box" v-if="carrightFlag"> <div class="top_box" v-if="carrightFlag">
<div <div :class="[
:class="[
pageFalg === ite.id ? 'tabp_active' : 'tabp_default', pageFalg === ite.id ? 'tabp_active' : 'tabp_default',
'tab_box', 'tab_box',
]" ]" v-for="ite in tabPageList" @click="changePage(ite.id)">
v-for="ite in tabPageList"
@click="changePage(ite.id)"
>
{{ ite.pname }} {{ ite.pname }}
</div> </div>
</div> </div>
<div class="carPage" v-if="pageFalg === '1'"> <div class="carPage" v-if="pageFalg === '1'">
<div class="carright" v-if="carrightFlag"> <div class="carright" v-if="carrightFlag">
<!-- 右收缩箭头 --> <!-- 右收缩箭头 -->
<div <div class="icon_panel_right_on" @click="carrightFlag = false" v-if="carrightFlag"></div>
class="icon_panel_right_on"
@click="carrightFlag = false"
v-if="carrightFlag"
></div>
<!-- 右收缩箭头 --> <!-- 右收缩箭头 -->
<div class="car_right_box content_bg"> <div class="car_right_box content_bg">
<div class="load_m_box"> <div class="load_m_box">
@ -80,10 +54,7 @@
<div class="info2_m"> <div class="info2_m">
<div class="top1_box"> <div class="top1_box">
<img <img src="@/assets/images/mainPage/icon4_xixiao.png" alt="" />
src="@/assets/images/mainPage/icon4_xixiao.png"
alt=""
/>
<div class="left1_box"> <div class="left1_box">
<div class="name"> <div class="name">
<div class="cen"> <div class="cen">
@ -131,33 +102,26 @@
</div> </div>
<div class="list_content"> <div class="list_content">
<div class="c_info" v-for="item in chargingList"> <div class="c_info" v-for="item in chargingList">
<img <img src="@/assets/images/device/chongdainzhaung.png" alt="" />
src="@/assets/images/device/chongdainzhaung.png"
alt=""
/>
<div class="r_info"> <div class="r_info">
<div class="t_info"> <div class="t_info">
<span class="c-blue">{{ item.c_name }}</span> <span class="c-blue">{{ item.c_name }}</span>
<div class="tval"> <div class="tval">
<div <div :class="[
:class="[
item.c_status === '充电中' item.c_status === '充电中'
? 'b-green' ? 'b-green'
: item.c_status === '未使用' : item.c_status === '未使用'
? 'b-gary' ? 'b-gary'
: 'b-yellow', : 'b-yellow',
'yuand', 'yuand',
]" ]"></div>
></div> <div :class="[
<div
:class="[
item.c_status === '充电中' item.c_status === '充电中'
? 'c-green' ? 'c-green'
: item.c_status === '未使用' : item.c_status === '未使用'
? 'c-gary' ? 'c-gary'
: 'c-yellow', : 'c-yellow',
]" ]">
>
{{ item.c_status }} {{ item.c_status }}
</div> </div>
</div> </div>
@ -182,21 +146,14 @@
<div class="analysisPage" v-if="pageFalg === '2'"> <div class="analysisPage" v-if="pageFalg === '2'">
<div class="carright" v-if="carrightFlag"> <div class="carright" v-if="carrightFlag">
<!-- 右收缩箭头 --> <!-- 右收缩箭头 -->
<div <div class="icon_panel_right_on" @click="carrightFlag = false" v-if="carrightFlag"></div>
class="icon_panel_right_on"
@click="carrightFlag = false"
v-if="carrightFlag"
></div>
<!-- 右收缩箭头 --> <!-- 右收缩箭头 -->
<div class="car_right_box content_bg"> <div class="car_right_box content_bg">
<div class="charging_address"> <div class="charging_address">
<div class="infotitle"><span>充电桩选址服务</span></div> <div class="infotitle"><span>充电桩选址服务</span></div>
<div class="info1"> <div class="info1">
<div class="suggest"> <div class="suggest">
<img <img src="@/assets/images/device/chongdainzhaung.png" alt="" />
src="@/assets/images/device/chongdainzhaung.png"
alt=""
/>
<div class="suggest_box"> <div class="suggest_box">
<div class="s1">充电桩选址服务</div> <div class="s1">充电桩选址服务</div>
<div class="s2"> <div class="s2">
@ -210,11 +167,7 @@
<div class="infotitle"><span>充电服务推荐</span></div> <div class="infotitle"><span>充电服务推荐</span></div>
<div class="info1"> <div class="info1">
<div class="suggest"> <div class="suggest">
<img <img src="@/assets/images/carPage/charging.png" alt="" class="charging" />
src="@/assets/images/carPage/charging.png"
alt=""
class="charging"
/>
<div class="suggest_box"> <div class="suggest_box">
<div class="s1">充电服务推荐</div> <div class="s1">充电服务推荐</div>
<div class="s2"> <div class="s2">
@ -265,15 +218,12 @@
</div> </div>
<div class="content"> <div class="content">
<div class="table_box1"> <div class="table_box1">
<el-table <el-table :data="
:data="
adjustTableData.slice( adjustTableData.slice(
(currentPage - 1) * pageSize, (currentPage - 1) * pageSize,
currentPage * pageSize currentPage * pageSize
) )
" " style="width: 100%; height: 100%">
style="width: 100%; height: 100%"
>
<el-table-column label="调节设备" align="center"> <el-table-column label="调节设备" align="center">
<template #default="scope"> <template #default="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span> <span style="margin-left: 10px">{{ scope.row.name }}</span>
@ -297,16 +247,7 @@
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
<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>
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> </div>
</div> </div>
@ -314,78 +255,72 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { import { ref, computed, watch, onMounted, reactive, onUnmounted, nextTick, getCurrentInstance, inject } from 'vue'
ref, import { ElMessage } from 'element-plus'
computed, import { getColorFun } from '@/hooks/getColorFun/index'
watch, import { app_load, api_send, api_register } from '@/ue4Player/app'
onMounted, import load_echart from './load_echart.vue'
reactive, import load_c_echart from './load_c_echart.vue'
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 load_info_echart from './load_info_echart.vue'
import cdz_echart from "./cdz_echart.vue"; import cdz_echart from './cdz_echart.vue'
import carTree from "@/views/commonPage/carTree.vue"; import carTree from '@/views/commonPage/carTree.vue'
onMounted(() => {}); import { powerCurve_api } from '@/api/carPage/index'
onMounted(() => {
// 获取右侧数据
getPowerCurve_api()
})
// 车网互动专题切换栏 // 车网互动专题切换栏
let tabPageList = reactive([ let tabPageList = reactive([
{ id: "1", pname: "车网互动" }, { id: '1', pname: '车网互动' },
{ id: "2", pname: "决策分析" }, { id: '2', pname: '决策分析' }
]); ])
// 切换页面功能 // 切换页面功能
let pageFalg = ref("1"); let pageFalg = ref('1')
const changePage = (val: string) => { 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([ const loadEchart = reactive([
{ {
id: 1, id: 1,
name: "高速充电桩群", name: '高速充电桩群'
}, },
{ {
id: 2, id: 2,
name: "谊景村", name: '谊景村'
}, }
]); ])
const loadhandleTabDate = (val: any) => { const loadhandleTabDate = (val: any) => {
loadtabDateFlag.value = val.id; loadtabDateFlag.value = val.id
}; }
// load_echart 传参 // load_echart 传参
let eName1 = ref("负载率"); let eName1 = ref('负载率')
let eName2 = ref("负载情况"); let eName2 = ref('负载情况')
// 地图标识 // 地图标识
let lengendDate = reactive([ let lengendDate = reactive([
{ {
id: 1, id: 1,
lengendName: "充电桩分布热力图", lengendName: '充电桩分布热力图',
checkFlag: false, checkFlag: false
}, },
{ {
id: 2, id: 2,
lengendName: "新能源车辆热力图", lengendName: '新能源车辆热力图',
checkFlag: false, checkFlag: false
}, }
]); ])
let handleSelectCheck = (datas: any) => { let handleSelectCheck = (datas: any) => {
// 让选中的项样式发生变化 // 让选中的项样式发生变化
datas.checkFlag = !datas.checkFlag; datas.checkFlag = !datas.checkFlag
// if (data.lengendName === "中压光伏" || data.lengendName === "低压光伏" || data.lengendName === "充电站" || data.lengendName === "储能站") { // if (data.lengendName === "中压光伏" || data.lengendName === "低压光伏" || data.lengendName === "充电站" || data.lengendName === "储能站") {
// // bottomconterListtest.includes(props.gettreeprovidecityname) // // bottomconterListtest.includes(props.gettreeprovidecityname)
// bottomconterListtest.forEach(item => { // bottomconterListtest.forEach(item => {
@ -411,150 +346,165 @@ let handleSelectCheck = (datas: any) => {
// console.log("SwitchStationstatus", "Switchstationstatus"); // console.log("SwitchStationstatus", "Switchstationstatus");
// }); // });
// } // }
}; }
// 中 // 中
// 调节次数信息 // 调节次数信息
const adjustInfoFlag = ref(false); const adjustInfoFlag = ref(false)
// 表格 // 表格
interface User { interface User {
name: string; name: string
type: string; type: string
start_date: any; start_date: any
end_date: string; end_date: string
number: string; number: string
isEdit?: boolean; isEdit?: boolean
} }
// 可调资源信息 // 可调资源信息
let adjustTableData = reactive<User[]>([ let adjustTableData = reactive<User[]>([
{ {
name: "**光伏", name: '**光伏',
type: "光伏", type: '光伏',
number: "2", number: '2',
start_date: "2023-04-30 12:30:00", start_date: '2023-04-30 12:30:00',
end_date: "00:00:00", end_date: '00:00:00'
}, },
{ {
name: "**光伏", name: '**光伏',
type: "光伏", type: '光伏',
number: "2", number: '2',
start_date: "2023-04-30 12:30:00", start_date: '2023-04-30 12:30:00',
end_date: "00:00:00", end_date: '00:00:00'
}, },
{ {
name: "**储能", name: '**储能',
type: "储能", type: '储能',
number: "2", number: '2',
start_date: "2023-04-30 12:30:00", start_date: '2023-04-30 12:30:00',
end_date: "00:00:00", end_date: '00:00:00'
}, },
{ {
name: "**储能", name: '**储能',
type: "储能", type: '储能',
number: "2", number: '2',
start_date: "2023-04-30 12:30:00", start_date: '2023-04-30 12:30:00',
end_date: "00:00:00", end_date: '00:00:00'
}, }
]); ])
// 分页 // 分页
let currentPage = ref<number>(1); let currentPage = ref<number>(1)
let pageSize = ref<number>(6); //每页显示的个数 let pageSize = ref<number>(6) //每页显示的个数
let total = ref<number>(40); let total = ref<number>(40)
const handleSizeChange = (size: number) => { const handleSizeChange = (size: number) => {
// console.log(`${size} items per page`); // console.log(`${size} items per page`);
pageSize.value = size; pageSize.value = size
}; }
const handleCurrentChange = (page: number) => { const handleCurrentChange = (page: number) => {
currentPage.value = page; currentPage.value = page
}; }
const hideLeft = ref<boolean>(true); //默认页面显示 const hideLeft = ref<boolean>(true) //默认页面显示
const hideRight = ref<boolean>(true); //默认页面显示 右边 const hideRight = ref<boolean>(true) //默认页面显示 右边
interface ChargingList { interface ChargingList {
c_name: string; c_name: string
c_status: string; c_status: string
c_load: string; c_load: string
c_total: string; c_total: string
} }
// 右侧充电桩运行状态 // 右侧充电桩运行状态
let chargingList = reactive<ChargingList[]>([ let chargingList = reactive<ChargingList[]>([
{ c_name: "充电桩1号", c_status: "充电中", c_load: "30", c_total: "1475" }, { c_name: '充电桩1号', c_status: '充电中', c_load: '30', c_total: '1475' },
{ c_name: "充电桩4号", c_status: "充电中", c_load: "45", c_total: "235" }, { c_name: '充电桩4号', c_status: '充电中', c_load: '45', c_total: '235' },
{ c_name: "充电桩2号", c_status: "充电中", c_load: "50", c_total: "675" }, { c_name: '充电桩2号', c_status: '充电中', c_load: '50', c_total: '675' },
{ c_name: "充电桩7号", c_status: "未充电", c_load: "32", c_total: "244" }, { c_name: '充电桩7号', c_status: '未充电', c_load: '32', c_total: '244' },
{ c_name: "充电桩12号", c_status: "未充电", c_load: "48", c_total: "368" }, { 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: '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(() => { onUnmounted(() => {
hideLeft.value = false; hideLeft.value = false
hideRight.value = false; hideRight.value = false
}); })
// 跳转三维 // 跳转三维
const handleThree = (val) => { const handleThree = val => {
const list = { const list = {
location: "(X=18705617.163,Y=1826842.166,Z=4299675.505)", location: '(X=18705617.163,Y=1826842.166,Z=4299675.505)',
rotation: "Pitch=-89.9,Yaw=-90.542,Roll=0", rotation: 'Pitch=-89.9,Yaw=-90.542,Roll=0'
}; }
api_send("CameraMove", list, () => { api_send('CameraMove', list, () => {
console.log("CameraMove"); console.log('CameraMove')
}); })
let _list = { let _list = {
CityID: val, CityID: val,
status: "1", status: '1'
}; }
api_send("ShowCityEdge", _list, () => { api_send('ShowCityEdge', _list, () => {
console.log("ShowCityEdge"); console.log('ShowCityEdge')
}); })
}; }
//
//
//
let getPowerCurve_api = () => {
powerCurve_api({
mrid: '1242690000004712'
}).then((res: any) => {
console.log(res,'resresres');
})
}
//
//
//
// 根据不同的屏幕宽度换算字体大小 // 根据不同的屏幕宽度换算字体大小
const transformFontSize = (fontsize: number) => { const transformFontSize = (fontsize: number) => {
// 获取屏幕宽度 // 获取屏幕宽度
const width = window.screen.width; const width = window.screen.width
const height = window.screen.height; const height = window.screen.height
let ratio: any = 0; let ratio: any = 0
if (width > 3000) { if (width > 3000) {
ratio = width / 4240; ratio = width / 4240
} else { } else {
ratio = width / 2220; ratio = width / 2220
} }
// 取下整 // 取下整
return parseInt(fontsize * ratio); return parseInt(fontsize * ratio)
}; }
// 动态获取宽高 // 动态获取宽高
let ctwh = ref(); let ctwh = ref()
let ctht = ref(); let ctht = ref()
const updateCtw = () => { const updateCtw = () => {
if (window.screen.width > 1900) { if (window.screen.width > 1900) {
ctwh.value = Number(window.screen.width); ctwh.value = Number(window.screen.width)
ctht.value = Number(window.screen.height); ctht.value = Number(window.screen.height)
} else { } else {
ctwh.value = Number(1920); ctwh.value = Number(1920)
ctht.value = Number(1080); ctht.value = Number(1080)
} }
}; }
// 使用watch来监听$route的变化 // 使用watch来监听$route的变化
watch( watch(
() => window.location.pathname, () => window.location.pathname,
(newPath) => { newPath => {
updateCtw(); updateCtw()
}, },
{ immediate: true } { immediate: true }
); )
const styleVar = computed(() => { const styleVar = computed(() => {
return { return {
"--box-width": ctwh.value + "px", '--box-width': ctwh.value + 'px',
"--box-height": ctht.value + "px", '--box-height': ctht.value + 'px'
}; }
}); })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -602,7 +552,7 @@ const styleVar = computed(() => {
top: changeHeight(25); top: changeHeight(25);
width: changeHeight(26.51); width: changeHeight(26.51);
height: 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-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 6; z-index: 6;
@ -618,19 +568,19 @@ const styleVar = computed(() => {
} }
.blueShadow { .blueShadow {
/* 精品可视化素材店 */ /* 精品可视化素材店 */
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
text-shadow: 0px 0px 10px #00f0ff; text-shadow: 0px 0px 10px #00f0ff;
} }
// 公共标题 // 公共标题
.title_bg { .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%; background-size: 100% 100%;
} }
// 公共背景 // 公共背景
.content_bg { .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%; background-size: 100% 100%;
} }
// 公共二级标题 // 公共二级标题
@ -640,7 +590,7 @@ const styleVar = computed(() => {
height: changeHeight(60); height: changeHeight(60);
line-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%; background-size: 100% 100%;
font-size: changeHeight(40); font-size: changeHeight(40);
// background-color: red; // background-color: red;
@ -727,7 +677,7 @@ const styleVar = computed(() => {
margin-top: changeHeight(100); margin-top: changeHeight(100);
margin-top: changeHeight(17); margin-top: changeHeight(17);
// margin-top: 0.5%; // margin-top: 0.5%;
font-family: "PingFang SC"; font-family: 'PingFang SC';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
@ -751,8 +701,7 @@ const styleVar = computed(() => {
top: 50%; top: 50%;
.icon_panel_left_off { .icon_panel_left_off {
position: absolute; position: absolute;
background: url("@/assets/images/btnType/icon_panel_right.png") background: url('@/assets/images/btnType/icon_panel_right.png') no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: changeHeight(42.28); width: changeHeight(42.28);
height: changeHeight(52.02); height: changeHeight(52.02);
@ -769,7 +718,7 @@ const styleVar = computed(() => {
.icon_panel_left_on { .icon_panel_left_on {
position: absolute; position: absolute;
background: salmon; 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%; background-size: 100% 100%;
width: changeHeight(42.28); width: changeHeight(42.28);
height: changeHeight(52.02); height: changeHeight(52.02);
@ -826,7 +775,7 @@ const styleVar = computed(() => {
width: changeHeight(368.31); width: changeHeight(368.31);
height: changeHeight(180.28); height: changeHeight(180.28);
// padding: changeHeight(25) changeHeight(5) changeHeight(0) changeHeight(10); // 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%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -895,7 +844,7 @@ const styleVar = computed(() => {
top: 50%; top: 50%;
.icon_panel_right_off { .icon_panel_right_off {
position: absolute; 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%; background-size: 100% 100%;
width: changeHeight(42.28); width: changeHeight(42.28);
height: changeHeight(52.02); height: changeHeight(52.02);
@ -915,8 +864,7 @@ const styleVar = computed(() => {
// 右 箭头展开 // 右 箭头展开
.icon_panel_right_on { .icon_panel_right_on {
position: absolute; position: absolute;
background: url("@/assets/images/btnType/icon_panel_right.png") background: url('@/assets/images/btnType/icon_panel_right.png') no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: changeHeight(42.28); width: changeHeight(42.28);
height: changeHeight(52.02); height: changeHeight(52.02);
@ -1019,8 +967,7 @@ const styleVar = computed(() => {
top: changeHeight(0.5); top: changeHeight(0.5);
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
background: url("@/assets/images/btnType/fontbg.png") background: url('@/assets/images/btnType/fontbg.png') no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding-left: changeWidth(82); padding-left: changeWidth(82);
padding-right: changeWidth(82); padding-right: changeWidth(82);
@ -1033,8 +980,7 @@ const styleVar = computed(() => {
.bottom { .bottom {
width: changeHeight(640.16); width: changeHeight(640.16);
height: changeHeight(80.31); height: changeHeight(80.31);
background: url("@/assets/images/carPage/car_left_cbg.png") background: url('@/assets/images/carPage/car_left_cbg.png') no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding-right: changeHeight(53); padding-right: changeHeight(53);
padding-left: changeHeight(33); padding-left: changeHeight(33);
@ -1075,7 +1021,6 @@ const styleVar = computed(() => {
} }
} }
.load_runstatus_box { .load_runstatus_box {
height: 100%; height: 100%;
width: 95%; width: 95%;
@ -1107,8 +1052,7 @@ const styleVar = computed(() => {
color: #ffca74; color: #ffca74;
} }
.list_box { .list_box {
margin-top: 2%;
margin-top:2%;
height: changeHeight(54); height: changeHeight(54);
padding-left: changeHeight(74); padding-left: changeHeight(74);
width: 90%; width: 90%;
@ -1128,8 +1072,7 @@ const styleVar = computed(() => {
margin-top: 2%; margin-top: 2%;
// height: changeHeight(370); // height: changeHeight(370);
height:64%; height: 64%;
padding-left: changeHeight(44); padding-left: changeHeight(44);
overflow: auto; overflow: auto;
@ -1254,8 +1197,7 @@ const styleVar = computed(() => {
left: 6%; left: 6%;
width: changeHeight(965.19); width: changeHeight(965.19);
height: changeHeight(410.59); height: changeHeight(410.59);
background: url("@/assets/images/carPage/car_right_info2bg.png") background: url('@/assets/images/carPage/car_right_info2bg.png') no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.bgls { .bgls {
width: 100%; width: 100%;
@ -1289,7 +1231,7 @@ const styleVar = computed(() => {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: changeHeight(40); 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%; background-size: 100% 100%;
.tab_box { .tab_box {
width: changeHeight(346); width: changeHeight(346);
@ -1299,7 +1241,7 @@ const styleVar = computed(() => {
justify-content: center; justify-content: center;
} }
.tabp_active { .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%; background-size: 102% 105%;
} }
.tabp_default { .tabp_default {
@ -1367,7 +1309,7 @@ const styleVar = computed(() => {
box-sizing: border-box; box-sizing: border-box;
width: changeHeight(740.17); width: changeHeight(740.17);
height: changeHeight(801.49); 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%; background-size: 100% 100%;
padding-top: 1%; padding-top: 1%;
padding-left: changeHeight(27); padding-left: changeHeight(27);
@ -1393,8 +1335,7 @@ const styleVar = computed(() => {
.titlebg { .titlebg {
width: changeHeight(842.04); width: changeHeight(842.04);
height: changeHeight(57.23); height: changeHeight(57.23);
background: url("@/assets/images/osPage/run_detail_titlebg.png") background: url('@/assets/images/osPage/run_detail_titlebg.png') no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1448,11 +1389,7 @@ const styleVar = computed(() => {
// background-image: url("@/assets/images/chargingPage/add_icon_bg.png"); // background-image: url("@/assets/images/chargingPage/add_icon_bg.png");
// background-size: 100% 100%; // background-size: 100% 100%;
// background-repeat: no-repeat; // background-repeat: no-repeat;
background: linear-gradient( background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%) !important;
180deg,
rgba(2, 45, 88, 0.8) 0%,
rgba(6, 178, 232, 0.8) 100%
) !important;
mix-blend-mode: normal; mix-blend-mode: normal;
border: 1px solid #00c2ff; border: 1px solid #00c2ff;
color: #ffffff !important; color: #ffffff !important;
@ -1461,11 +1398,7 @@ const styleVar = computed(() => {
// background-image: url("@/assets/images/chargingPage/add_bg.png"); // background-image: url("@/assets/images/chargingPage/add_bg.png");
// background-size: 100% 100%; // background-size: 100% 100%;
// background-repeat: no-repeat; // background-repeat: no-repeat;
background: linear-gradient( background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%) !important;
180deg,
rgba(2, 45, 88, 0.8) 0%,
rgba(6, 178, 232, 0.8) 100%
) !important;
mix-blend-mode: normal; mix-blend-mode: normal;
border: 1px solid #00c2ff; border: 1px solid #00c2ff;
color: #ffffff !important; color: #ffffff !important;
@ -1593,11 +1526,7 @@ const styleVar = computed(() => {
.el-table { .el-table {
border: transparent !important; border: transparent !important;
background: linear-gradient( background: linear-gradient(180deg, #01233c 0%, rgba(8, 150, 255, 0.42) 100%);
180deg,
#01233c 0%,
rgba(8, 150, 255, 0.42) 100%
);
} }
} }
} }
@ -1680,7 +1609,7 @@ const styleVar = computed(() => {
width: changeHeight(1156.86); width: changeHeight(1156.86);
height: changeHeight(620.62); height: changeHeight(620.62);
box-sizing: border-box; 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%; background-size: 100% 100%;
padding-top: 1%; padding-top: 1%;
padding-left: changeHeight(27); padding-left: changeHeight(27);
@ -1706,8 +1635,7 @@ const styleVar = computed(() => {
.titlebg { .titlebg {
width: changeHeight(842.04); width: changeHeight(842.04);
height: changeHeight(57.23); height: changeHeight(57.23);
background: url("@/assets/images/osPage/run_detail_titlebg.png") background: url('@/assets/images/osPage/run_detail_titlebg.png') no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1786,11 +1714,11 @@ const styleVar = computed(() => {
width: changeHeight(100.8); width: changeHeight(100.8);
} }
.bg1 { .bg1 {
background: url("@/assets/images/btnType/btnblue.png") no-repeat; background: url('@/assets/images/btnType/btnblue.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.bg2 { .bg2 {
background: url("@/assets/images/btnType/btngreen.png") no-repeat; background: url('@/assets/images/btnType/btngreen.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.beforeEchart { .beforeEchart {