update
zhaoqiang
parent
e685cad683
commit
3a360df84e
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue