yanglijie/smart-large-screen-light-gz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

浅色版2

Browse Source
This commit is contained in:
lnljyang
2026-01-06 11:58:33 +08:00
parent 36c6f01eb1
commit 64e9a61472
5 changed files with 741 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -7,7 +7,7 @@
-->
<template>
<div id="app">
<router-view/>
<router-view />
</div>
</template>
@@ -15,7 +15,7 @@
#app {
width: 100vw;
height: 100vh;
background-color: #091a40;
background-color: #fafafa;
// overflow: hidden;
}
</style>
</style>

366
src/views/indexs/center-map.vue
View File

@@ -9,30 +9,44 @@
<div class="centermap">
<div class="maptitle">
<div class="zuo"></div>
<span class="titletextBefore">今年碳减排总量<span class="titletext">{{ totalCarbon/1000 }}</span>吨</span>
<span class="titletextBefore"
>今年碳减排总量<span class="titletext">{{ totalCarbon / 1000 }}</span
>吨</span
>
<div class="you"></div>
</div>
<div class="mileagetitle">
<div class="zuo"></div>
<span class="titletextBefore">总里程数<span class="titletext">{{ totalMileage }}</span>万km</span>
<span class="titletextBefore"
>总里程数<span class="titletext">{{ totalMileage }}</span
>万km</span
>
<div class="you"></div>
</div>
<div class="mapwrap">
<dv-border-box-13>
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
中国
</div>
</div>
<div class="quanguo1" @click="goToPage()" v-if="showType === 1">
车辆实况
</div>
<div class="quanguo2" @click="changeShow1()" :style="{ backgroundColor: currentBgColor2 }">
<div >车辆信息</div>
<div
class="quanguo2"
@click="changeShow1()"
:style="{ backgroundColor: currentBgColor2 }"
>
<div>车辆信息</div>
</div>
<div class="quanguo3" @click="changeShow2()" :style="{ backgroundColor: currentBgColor3 }">
<div >加氢站</div>
<div
class="quanguo3"
@click="changeShow2()"
:style="{ backgroundColor: currentBgColor3 }"
>
<div>加氢站</div>
</div>
<div class="quanguo4" v-if="code === 'china'">
<div >全国车辆范围</div>
<div class="quanguo4" v-if="code === 'china'">
<div>全国车辆范围</div>
</div>
<Echart id="CenterMap" :options="options" ref="CenterMap" />
<!-- <dv-flyline-chart :config="config" style="width:100%;height:100%;" /> -->
@@ -56,10 +70,10 @@ export default {
//code:"440000",
echartBindClick: false,
isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面
currentMap : 'china', // 当前显示的地图层级
showType: 1, //显示内容类型： 1车辆信息，2加氢站信息
currentBgColor2:'',
currentBgColor3:'',
currentMap: "china", // 当前显示的地图层级
showType: 1, //显示内容类型： 1车辆信息，2加氢站信息
currentBgColor2: "",
currentBgColor3: "",
};
},
created() {},
@@ -67,22 +81,22 @@ export default {
mounted() {
console.log(this.xzqCode);
this.getYearData();
this.showType = 1;
this.currentBgColor2 = '#158e8e';
this.currentBgColor2 = "#158e8e";
//this.getData("china");
this.getData(this.code);
},
methods: {
changeShow1(){
changeShow1() {
this.showType = 1;
this.currentBgColor2 = '#158e8e';
this.currentBgColor3 = '';
this.currentBgColor2 = "#158e8e";
this.currentBgColor3 = "";
this.getData(this.code);
},
changeShow2(){
this.currentBgColor2 = '';
this.currentBgColor3 = '#158e8e';
changeShow2() {
this.currentBgColor2 = "";
this.currentBgColor3 = "#158e8e";
this.showType = 2;
this.getData(this.code);
},
@@ -90,29 +104,35 @@ export default {
//window.open("http://localhost:9528/vehicle-management/vehicle-state?"+this.code, "_blank");
//window.open("http://47.100.49.118:8090/vehicle-situation?"+this.code, "_blank");
window.open("http://127.0.0.1:9528/vehicle-situation?"+this.code, "_blank");
window.open(
"http://127.0.0.1:9528/vehicle-situation?" + this.code,
"_blank"
);
//window.open("http://192.168.0.219:9528/vehicle-situation?"+this.code, "_blank");
},
parseAdcodeLevel(adcode) {
const codeStr = String(adcode);
if (codeStr.endsWith('0000')) return 'province'; // 省级（如 440000）
if (codeStr.endsWith('00')) return 'city'; // 市级（如 440300）
return 'district'; // 区县级（如 440305）
if (codeStr.endsWith("0000")) return "province"; // 省级（如 440000）
if (codeStr.endsWith("00")) return "city"; // 市级（如 440300）
return "district"; // 区县级（如 440305）
},
getYearData() {
currentGET("big3").then((res) => {
console.log('年度碳排量');
console.log(res);
this.totalCarbon = res.data.yearCarbon || "0";
this.totalMileage = res.data.yearMileage || "0";
});
console.log("年度碳排量");
console.log(res);
this.totalCarbon = res.data.yearCarbon || "0";
this.totalMileage = res.data.yearMileage || "0";
});
},
getData(code) {
console.log("code", code);
this.currentMap = this.parseAdcodeLevel(code);
//2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息
if(this.showType === 1){
currentGET("big9", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => {
//2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息
if (this.showType === 1) {
currentGET("big9", {
regionCode: code,
adcodeLevel: this.currentMap,
}).then((res) => {
console.log("map车辆分布", res);
//if (res.success)
if (res.status) {
@@ -122,9 +142,12 @@ export default {
this.$Message.warning(res.msg);
}
});
}else if(this.showType === 2){
//改为显示全国所有加氢站信息 停止使用big14 使用big15 2025.10.16 szy
currentGET("big15", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => {
} else if (this.showType === 2) {
//改为显示全国所有加氢站信息 停止使用big14 使用big15 2025.10.16 szy
currentGET("big15", {
regionCode: code,
adcodeLevel: this.currentMap,
}).then((res) => {
console.log("加氢站_map分布", res);
//if (res.success)
if (res.status) {
@@ -145,33 +168,32 @@ export default {
async getGeojson(name, mydata) {
this.code = name;
this.currentMap = name;
console.log('当前地图层级');
console.log("当前地图层级");
console.log(this.currentMap);
//如果要展示南海群岛并且展示的是中国的话
let geoname=name
let geoname = name;
if (this.isSouthChinaSea && name == "china") {
geoname = "chinaNanhai";
}
//如果有注册地图的话就不用再注册 了
let mapjson = echarts.getMap(name);
console.log('已经是否已存在的地图数据');
console.log("已经是否已存在的地图数据");
if (mapjson) {
mapjson = mapjson.geoJson;
}
else
{
} else {
//console.log('当前未注册地图');
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
return res;
});
echarts.registerMap(name, mapjson);
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
(res) => {
return res;
}
);
echarts.registerMap(name, mapjson);
}
console.log(mapjson);
console.log(mapjson);
let cityCenter = {};
let arr = mapjson.features;
let arr = mapjson.features;
//根据geojson获取省份中心点
//根据geojson获取省份中心点
arr.map((item) => {
cityCenter[item.properties.name] =
item.properties.centroid || item.properties.center;
@@ -179,62 +201,65 @@ export default {
let newData = [];
mydata.map((item) => {
if (cityCenter[item.name]) {
if(item.vehicleTotal===undefined || item.vehicleTotal===null ){
if (item.vehicleTotal === undefined || item.vehicleTotal === null) {
item.vehicleTotal = 0;
}
if(item.onLineCount===undefined || item.onLineCount===null){
if (item.onLineCount === undefined || item.onLineCount === null) {
item.onLineCount = 0;
}
if(item.dayMileage===undefined || item.dayMileage===null){
if (item.dayMileage === undefined || item.dayMileage === null) {
item.dayMileage = 0;
}
if(item.dayHydrogen===undefined || item.dayHydrogen===null){
if (item.dayHydrogen === undefined || item.dayHydrogen === null) {
item.dayHydrogen = 0;
}
if(item.dayCarbon===undefined || item.dayCarbon===null){
if (item.dayCarbon === undefined || item.dayCarbon === null) {
item.dayCarbon = 0;
}
newData.push({
name: item.name,
value: cityCenter[item.name].concat(item.vehicleTotal).concat(item.onLineCount).concat(item.dayMileage).concat(item.dayHydrogen).concat(item.dayCarbon),
value: cityCenter[item.name]
.concat(item.vehicleTotal)
.concat(item.onLineCount)
.concat(item.dayMileage)
.concat(item.dayHydrogen)
.concat(item.dayCarbon),
});
}
});
console.log('开始初始化地图');
console.log("开始初始化地图");
console.log(newData);
this.init(name, mydata, newData);
},
async getGeojson2(name, mydata) {
this.code = name;
this.currentMap = name;
console.log('加氢站_当前地图层级');
console.log("加氢站_当前地图层级");
console.log(this.currentMap);
//如果要展示南海群岛并且展示的是中国的话
let geoname=name
let geoname = name;
if (this.isSouthChinaSea && name == "china") {
geoname = "chinaNanhai";
}
//如果有注册地图的话就不用再注册 了
let mapjson = echarts.getMap(name);
console.log('加氢站_已经是否已存在的地图数据');
console.log("加氢站_已经是否已存在的地图数据");
if (mapjson) {
mapjson = mapjson.geoJson;
}
else
{
} else {
//console.log('当前未注册地图');
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
return res;
});
echarts.registerMap(name, mapjson);
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
(res) => {
return res;
}
);
echarts.registerMap(name, mapjson);
}
console.log(mapjson);
console.log(mapjson);
let cityCenter = {};
let arr = mapjson.features;
let arr = mapjson.features;
//根据geojson获取省份中心点
//根据geojson获取省份中心点
arr.map((item) => {
cityCenter[item.properties.name] =
item.properties.centroid || item.properties.center;
@@ -242,27 +267,31 @@ export default {
let newData = [];
mydata.map((item) => {
if (cityCenter[item.name]) {
if(item.siteTotalCount===undefined || item.siteTotalCount===null ){
if (
item.siteTotalCount === undefined ||
item.siteTotalCount === null
) {
item.siteTotalCount = 0;
}
if(item.siteCount===undefined || item.siteCount===null){
if (item.siteCount === undefined || item.siteCount === null) {
item.siteCount = 0;
}
}
newData.push({
name: item.name,
value: cityCenter[item.name].concat(item.siteTotalCount).concat(item.siteCount),
value: cityCenter[item.name]
.concat(item.siteTotalCount)
.concat(item.siteCount),
});
}
});
console.log('加氢站_开始初始化地图');
console.log("加氢站_开始初始化地图");
console.log(newData);
this.init2(name, mydata, newData);
},
},
init(name, data, data2) {
console.log('init_data');
console.log("init_data");
console.log(data);
console.log('init_data2');
console.log("init_data2");
console.log(data2);
let top = 45;
let zoom = 1.05;
@@ -288,11 +317,11 @@ export default {
{ gte: 500, label: "500辆以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 100, lte: 500, label: "100-500辆" },
{ gte: 50, lte: 100, label: "50-100辆" },
{ lte: 50, label: "1-50辆" },// 不指定 min，表示 min 为无限大（-Infinity）。
{ lte: 50, label: "1-50辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。
],
inRange: {
// 渐变颜色，从小到大
color: [
color: [
// "#c3d7df",
// "#5cb3cc",
// "#8abcd1",
@@ -321,7 +350,7 @@ export default {
series: [
{
name: "MAP",
type: "map",
type: "map",
map: name,
// zlevel: 2,
// aspectScale: 0.78,
@@ -338,7 +367,7 @@ export default {
//console.log(params);
if (params.data) {
//return params.name + "：" + params.data["value"][2];
//return params.name + "：" + params.data.vehicleTotal + "辆";
//return params.name + "：" + params.data.vehicleTotal + "辆";
return `${params.name}<br>车辆总数: ${params.data.vehicleTotal}<br>GPS在线数: ${params.data.onLineCount}<br>当日里程: ${params.data.dayMileage}km<br>当日用氢量: ${params.data.dayHydrogen}kg<br>当日减碳: ${params.data.dayCarbon}kg`;
} else {
return params.name;
@@ -347,7 +376,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#000000",
color: "#fff",
},
},
label: {
@@ -364,7 +393,8 @@ export default {
},
rich: {},
},
emphasis: { //高亮时显示
emphasis: {
//高亮时显示
label: {
show: false,
},
@@ -402,13 +432,15 @@ export default {
{
//data: data2,
//type: "effectScatter",
data: data2.filter(item => item.value && item.value.length > 2 && item.value[2] > 0),
data: data2.filter(
(item) => item.value && item.value.length > 2 && item.value[2] > 0
),
type: "scatter",
coordinateSystem: "geo",
symbol: 'image://' + require('../../assets/img/cars.png'),
symbol: "image://" + require("../../assets/img/cars.png"),
symbolSize: function (val) {
return 20;
//return 4;
//return 4;
},
legendHoverLink: true,
// showEffectOn: "render",
@@ -427,34 +459,54 @@ export default {
if (params.data) {
console.log("params.data");
console.log(params.data);
console.log(params.data.name + "\n 车辆总数: "+params.data["value"][2] + "\n GPS在线数: " + params.data["value"][3]);
return params.data.name + "<br> 车辆总数: "+params.data["value"][2] + "<br> GPS在线数: " + params.data["value"][3] + "<br>当日里程: " + params.data["value"][4] + "km<br>当日用氢量: " + params.data["value"][5] + "kg<br>当日减碳: " + params.data["value"][6] + "kg";
console.log(
params.data.name +
"\n 车辆总数: " +
params.data["value"][2] +
"\n GPS在线数: " +
params.data["value"][3]
);
return (
params.data.name +
"<br> 车辆总数: " +
params.data["value"][2] +
"<br> GPS在线数: " +
params.data["value"][3] +
"<br>当日里程: " +
params.data["value"][4] +
"km<br>当日用氢量: " +
params.data["value"][5] +
"kg<br>当日减碳: " +
params.data["value"][6] +
"kg"
);
//return '${params.name} <br />车辆总数：${params.data[value][2]} <br /> GPS在线总数：${ params.data.[value][3]}';
}
}
},
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#000000",
color: "#fff",
},
},
label: {
label: {
formatter: (param) => {
//return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28
//return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28
//return param.name.slice(0, 2) ;
if (param.data && param.data.value && param.data.value.length > 2 && param.data.value[2] > 0) {
if (
param.data &&
param.data.value &&
param.data.value.length > 2 &&
param.data.value[2] > 0
) {
return param.data.value[2]; // 显示车辆总数
}
return '';
return "";
},
fontSize: 11,
fontSize: 16,
offset: [0, 2],
position: "bottom",
textBorderColor: "#000000",
textShadowColor: "#000",
textShadowBlur: 10,
textBorderWidth: 0,
color: "#000000",
color: "#000",
show: true,
},
// colorBy: "data",
@@ -467,18 +519,18 @@ export default {
},
},
],
//动画效果
// animationDuration: 1000,
// animationEasing: 'linear',
// animationDurationUpdate: 1000
//动画效果
// animationDuration: 1000,
// animationEasing: 'linear',
// animationDurationUpdate: 1000
};
this.options = option;
},
//2025.9.11 szy add begin
init2(name, data, data2) {
console.log('init_data');
console.log("init_data");
console.log(data);
console.log('init_data2');
console.log("init_data2");
console.log(data2);
let top = 45;
let zoom = 1.05;
@@ -497,12 +549,11 @@ export default {
{ gte: 100, label: "100 座以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 30, lte: 100, label: "30-100 座" },
{ gte: 10, lte: 30, label: "10-30 座" },
{ lte: 10, label: "1-10 座" },// 不指定 min，表示 min 为无限大（-Infinity）。
{ lte: 10, label: "1-10 座" }, // 不指定 min，表示 min 为无限大（-Infinity）。
],
inRange: {
// 渐变颜色，从小到大
color: [
color: [
// "#66a9c9",
// "#2f90b9",
// "#1781b5",
@@ -528,7 +579,7 @@ export default {
series: [
{
name: "MAP",
type: "map",
type: "map",
map: name,
// zlevel: 2,
// aspectScale: 0.78,
@@ -544,7 +595,7 @@ export default {
//console.log("series 1 formatter");
//console.log(params);
if (params.data) {
//return params.name + "：" + params.data["value"][2];
//return params.name + "：" + params.data["value"][2];
return `${params.name}<br>加氢站总数: ${params.data.siteTotalCount}<br>当前运营总数: ${params.data.siteCount}`;
} else {
return params.name;
@@ -570,7 +621,8 @@ export default {
},
rich: {},
},
emphasis: { //高亮时显示
emphasis: {
//高亮时显示
label: {
show: false,
},
@@ -630,9 +682,21 @@ export default {
if (params.data) {
console.log("params.data");
console.log(params.data);
console.log(params.data.name + "\n 加氢站总数:"+params.data["value"][2] + "\n 当前运营总数:" + params.data["value"][3]);
return params.data.name + "<br> 加氢站总数："+params.data["value"][2] + "<br> 当前运营总数: " + params.data["value"][3];
}
console.log(
params.data.name +
"\n 加氢站总数:" +
params.data["value"][2] +
"\n 当前运营总数:" +
params.data["value"][3]
);
return (
params.data.name +
"<br> 加氢站总数：" +
params.data["value"][2] +
"<br> 当前运营总数: " +
params.data["value"][3]
);
}
},
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)",
@@ -640,11 +704,11 @@ export default {
color: "#000000",
},
},
label: {
label: {
formatter: (param) => {
//return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28
//return param.name.slice(0, 2) + "\n "+param.data["value"][2]; //2025.03.31
return param.name.slice(0, 2) ;
return param.name.slice(0, 2);
},
fontSize: 11,
offset: [0, 2],
@@ -666,10 +730,10 @@ export default {
},
},
],
//动画效果
// animationDuration: 1000,
// animationEasing: 'linear',
// animationDurationUpdate: 1000
//动画效果
// animationDuration: 1000,
// animationEasing: 'linear',
// animationDurationUpdate: 1000
};
this.options = option;
},
@@ -685,7 +749,7 @@ export default {
if (this.echartBindClick) return;
//单击切换到级地图，当mapCode有值,说明可以切换到下级地图
this.$refs.CenterMap.chart.on("click", (params) => {
console.log(params);
console.log(params);
let xzqData = xzqCode[params.name];
if (xzqData) {
this.getData(xzqData.adcode);
@@ -694,7 +758,7 @@ export default {
}
});
this.echartBindClick = true;
}
},
},
destroyed() {
// 销毁事件监听
@@ -706,7 +770,6 @@ export default {
};
</script>
<style lang="scss" scoped>
.mileagetitle {
height: 40px;
display: flex;
@@ -719,10 +782,10 @@ export default {
font-weight: 900;
letter-spacing: 4px;
background: linear-gradient(
92deg,
#0072ff 0%,
#00eaff 48.8525390625%,
#01aaff 100%
92deg,
#0072ff 0%,
#00eaff 48.8525390625%,
#01aaff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -828,20 +891,21 @@ export default {
.quanguo1 {
position: absolute;
right: 20px;
top: 24px;
width: 100px;
height: 28px;
border: 1px solid #00eded;
border-radius: 10px;
color: #000000;
text-align: center;
line-height: 26px;
letter-spacing: 6px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
font-family: "微软雅黑", sans-serif;
z-index: 9999;
right: 20px;
top: 24px;
width: 100px;
height: 28px;
border: 1px solid #00eded;
border-radius: 10px;
color: #000000;
text-align: center;
line-height: 26px;
letter-spacing: 6px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
0 0 6px rgba(0, 237, 237, 0.4);
font-family: "微软雅黑", sans-serif;
z-index: 9999;
}
.quanguo2 {
@@ -857,7 +921,8 @@ export default {
line-height: 26px;
letter-spacing: 6px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
0 0 6px rgba(0, 237, 237, 0.4);
font-family: "微软雅黑", sans-serif;
z-index: 9999;
}
@@ -875,17 +940,18 @@ export default {
line-height: 26px;
letter-spacing: 6px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
0 0 6px rgba(0, 237, 237, 0.4);
font-family: "微软雅黑", sans-serif;
z-index: 9999;
}
.quanguo4{
.quanguo4 {
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
left: 50%; /* 左边缘对齐 */
transform: translateX(-50%); /* 向左移动自身宽度的50%以实现水平居中 */
bottom:10px;
bottom: 10px;
color: #000000;
}
}

631
src/views/indexs/left-top.vue
View File

@@ -1,331 +1,324 @@
<template>
<div class="cards-container">
<!-- 四个卡片 -->
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[0].value }}</span>
<span class="unit">{{ cards[0].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[0].label }}</div>
</div>
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-0"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/1.svg" class="images"/>
</div>
<div class="cards-container">
<!-- 四个卡片 -->
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[0].value }}</span>
<span class="unit">{{ cards[0].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[0].label }}</div>
</div>
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[1].value }}</span>
<span class="unit">{{ cards[1].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[1].label }}</div>
</div>
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-1"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/2.svg" class="images"/>
</div>
</div>
</div>
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[2].value }}</span>
<span class="unit">{{ cards[2].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[2].label }}</div>
</div>
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-2"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/3.svg" class="images"/>
</div>
</div>
</div>
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[3].value }}</span>
<span class="unit">{{ cards[3].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[3].label }}</div>
</div>
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-3"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/4.svg" class="images"/>
</div>
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-0"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/1.svg" class="images" />
</div>
</div>
</div>
</template>
<script>
import { currentGET } from 'api/modules'
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[1].value }}</span>
<span class="unit">{{ cards[1].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[1].label }}</div>
</div>
export default {
name: "BlinkingIcons",
data() {
return {
cards: [
{
id: 1,
value: "452/807",
unit: "辆",
label: "在线车数",
srcValue: "@/assets/img/left_top_lv.png",
},
{
id: 2,
value: "561",
unit: "kg",
label: "当日减碳",
srcValue: "@/assets/img/left/1.svg",
},
{
id: 3,
value: "534",
unit: "kg",
label: "当日用氢量",
srcValue: "@/assets/img/left/1.svg",
},
{
id:4,
value: "3300",
unit: "km",
label: "当日里程",
srcValue: "@/assets/img/left/1.svg",
},
],
};
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-1"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/2.svg" class="images" />
</div>
</div>
</div>
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[2].value }}</span>
<span class="unit">{{ cards[2].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[2].label }}</div>
</div>
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-2"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/3.svg" class="images" />
</div>
</div>
</div>
<div class="card">
<!-- 数值与文字 -->
<div class="card-info">
<!-- 主数值（高亮） -->
<div class="value-line">
<span class="number">{{ cards[3].value }}</span>
<span class="unit">{{ cards[3].unit }}</span>
</div>
<!-- 标签说明 -->
<div class="label">{{ cards[3].label }}</div>
</div>
<!-- 图标及其闪动背景 -->
<div class="icon-wrapper">
<!-- 背后闪动的竖直矩形 -->
<div class="icon-bg icon-bg-3"></div>
<!-- 圆形平台 -->
<div class="platform-circle"></div>
<!-- 图标本身（此处用Unicode或自定义图标） -->
<div class="icon">
<img src="@/assets/img/left/4.svg" class="images" />
</div>
</div>
</div>
</div>
</template>
<script>
import { currentGET } from "api/modules";
export default {
name: "BlinkingIcons",
data() {
return {
cards: [
{
id: 1,
value: "452/807",
unit: "辆",
label: "在线车数",
srcValue: "@/assets/img/left_top_lv.png",
},
{
id: 2,
value: "561",
unit: "kg",
label: "当日减碳",
srcValue: "@/assets/img/left/1.svg",
},
{
id: 3,
value: "534",
unit: "kg",
label: "当日用氢量",
srcValue: "@/assets/img/left/1.svg",
},
{
id: 4,
value: "3300",
unit: "km",
label: "当日里程",
srcValue: "@/assets/img/left/1.svg",
},
],
};
},
mounted() {
this.getData();
},
methods: {
getData() {
currentGET("big1").then((res) => {
console.log("当日实况");
console.log(res);
let onLineCount = 0;
let vehicleCount = 0;
let dayCarbon = 0;
let dayHydrogen = 0;
let dayMileage = 0;
if (res !== null && res.data !== null) {
if (res.data.onLineCount !== null) onLineCount = res.data.onLineCount;
if (res.data.vehicleCount !== null)
vehicleCount = res.data.vehicleCount;
if (res.data.dayCarbon !== null) dayCarbon = res.data.dayCarbon;
if (res.data.dayHydrogen !== null) dayHydrogen = res.data.dayHydrogen;
if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
}
let change = this.cards[0];
change.value = onLineCount + "/" + vehicleCount;
this.$set(this.cards, 0, change);
change = this.cards[1];
change.value = dayCarbon;
this.$set(this.cards, 1, change);
change = this.cards[2];
change.value = dayHydrogen;
this.$set(this.cards, 2, change);
change = this.cards[3];
change.value = dayMileage;
this.$set(this.cards, 3, change);
});
},
mounted() {
this.getData();
},
methods: {
getData() {
currentGET("big1").then((res) => {
console.log('当日实况');
console.log(res);
let onLineCount = 0;
let vehicleCount = 0;
let dayCarbon = 0;
let dayHydrogen = 0;
let dayMileage = 0;
},
};
</script>
if(res !==null && res.data !==null )
{
if(res.data.onLineCount !== null)
onLineCount = res.data.onLineCount;
if(res.data.vehicleCount !== null)
vehicleCount = res.data.vehicleCount;
if(res.data.dayCarbon !== null)
dayCarbon = res.data.dayCarbon;
if(res.data.dayHydrogen !== null)
dayHydrogen = res.data.dayHydrogen;
if(res.data.dayMileage !== null)
dayMileage = res.data.dayMileage;
}
let change = this.cards[0];
change.value = onLineCount + "/" + vehicleCount;
this.$set(this.cards, 0, change);
change = this.cards[1];
change.value = dayCarbon;
this.$set(this.cards, 1, change);
change = this.cards[2];
change.value = dayHydrogen;
this.$set(this.cards, 2, change);
change = this.cards[3];
change.value = dayMileage;
this.$set(this.cards, 3, change);
});
},
}
};
</script>
<style scoped>
/* 整体背景 */
.cards-container {
display: flex;
justify-content: space-around;
align-items: flex-end;
padding-left: 0px;
padding-top: 30px;
padding-bottom: 30px;
background-image: url("../../assets/img/left/u665.svg");
background-repeat: no-repeat;
background-position: 0% 100%;
<style scoped>
/* 整体背景 */
.cards-container {
display: flex;
justify-content: space-around;
align-items: flex-end;
padding-left: 0px;
padding-top: 30px;
padding-bottom: 30px;
background-image: url("../../assets/img/left/u665.svg");
background-repeat: no-repeat;
background-position: 0% 100%;
}
.images{
width: 65px;
height: 70px;
margin-left: 10px;
margin-top: -5px;
.images {
width: 65px;
height: 70px;
margin-left: 10px;
margin-top: -5px;
}
/* 单个卡片 */
.card {
position: relative;
width: 180px;
text-align: center;
color: #000000;
}
/* 卡片信息区域 */
.card-info {
margin-bottom: 120px; /* 给下方图标区域留出空间 */
margin-left: 10px;
}
.value-line {
font-size: 20px;
margin-bottom: 8px;
width: 120px;
}
.number {
color: #1890ff;
font-weight: 700;
margin-right: 6px;
}
.unit {
font-size: 14px;
opacity: 0.8;
}
.label {
font-size: 16px;
color: #262626;
}
/* 图标容器 */
.icon-wrapper {
position: absolute;
bottom: 0;
left: 54%;
transform: translateX(-50%);
width: 100%;
height: 100px;
overflow: visible;
}
/* 背后闪动的竖直矩形 */
.icon-bg {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 100%;
border-radius: 6px;
background-image: url("../../assets/img/left/u676.svg");
background-repeat: no-repeat;
animation: blink 1s infinite alternate;
top: -15%;
}
.icon-bg-0 {
animation-delay: 0s;
}
.icon-bg-1 {
animation-delay: 0.2s;
}
.icon-bg-2 {
animation-delay: 0.4s;
}
.icon-bg-3 {
animation-delay: 0.6s;
}
/* 圆形平台 */
.platform-circle {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 20px;
background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
border-radius: 50%;
box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
}
/* 图标 */
.icon {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
font-size: 28px;
color: #00e4ff;
}
/* 关键帧动画：闪动 */
@keyframes blink {
0% {
opacity: 0.5;
}
/* 单个卡片 */
.card {
position: relative;
width: 180px;
text-align: center;
color: #000000;
100% {
opacity: 1;
}
/* 卡片信息区域 */
.card-info {
margin-bottom: 120px; /* 给下方图标区域留出空间 */
margin-left:10px;
}
.value-line {
font-size: 20px;
margin-bottom: 8px;
width:120px;
}
.number {
color: #45f3ff; /* 高亮数字颜色 */
margin-right: 6px;
}
.unit {
font-size: 14px;
opacity: 0.8;
}
.label {
font-size: 16px;
color: #b9e4ff;
}
/* 图标容器 */
.icon-wrapper {
position: absolute;
bottom: 0;
left: 54%;
transform: translateX(-50%);
width: 100%;
height: 100px;
overflow: visible;
}
/* 背后闪动的竖直矩形 */
.icon-bg {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 100%;
border-radius: 6px;
background-image: url("../../assets/img/left/u676.svg");
background-repeat: no-repeat;
animation: blink 1s infinite alternate;
top: -15%;
}
.icon-bg-0 {
animation-delay: 0s;
}
.icon-bg-1 {
animation-delay: 0.2s;
}
.icon-bg-2 {
animation-delay: 0.4s;
}
.icon-bg-3 {
animation-delay: 0.6s;
}
/* 圆形平台 */
.platform-circle {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 20px;
background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
border-radius: 50%;
box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
}
/* 图标 */
.icon {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
font-size: 28px;
color: #00e4ff;
}
/* 关键帧动画：闪动 */
@keyframes blink {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* 图标模拟，可用 Font Awesome 等替换 */
.icon-phone::before {
content: "☎";
}
.icon-shield::before {
content: "⛨";
}
.icon-star::before {
content: "★";
}
.icon-protect::before {
content: "🛡";
}
</style>
}
/* 图标模拟，可用 Font Awesome 等替换 */
.icon-phone::before {
content: "☎";
}
.icon-shield::before {
content: "⛨";
}
.icon-star::before {
content: "★";
}
.icon-protect::before {
content: "🛡";
}
</style>

64
src/views/indexs/right-bottom.vue
View File

@@ -11,7 +11,11 @@
</thead>
</table>
<div class="scroll-wrapper">
<vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
<vue-seamless-scroll
:data="tableData"
:class-option="scrollOptions"
class="scroll-container"
>
<table>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
@@ -29,7 +33,7 @@
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { currentGET } from 'api/modules'
import { currentGET } from "api/modules";
export default {
components: { vueSeamlessScroll },
data() {
@@ -54,44 +58,36 @@ export default {
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
],
};
},
mounted() {
this.getExchangeData();
this.getExchangeData();
},
methods: {
methods: {
getExchangeData() {
currentGET("big4").then(res => {
currentGET("big4").then((res) => {
console.log("交易所数据：");
//console.log(this.tableData1);
console.log(res.data);
this.tableData = res.data;
this.tableData.forEach((item, index) => {
if(index % 2 !== 0)
{
item.exchangeColor = "#00ffcc";
item.priceColor = "#ffffff";
item.regionColor = "#ffffff";
this.$set(this.tableData, index, item);
}
else
{
if (index % 2 !== 0) {
item.exchangeColor = "rgb(0, 186, 255)";
item.priceColor = "rgb(26, 26, 26)";
item.regionColor = "rgb(26, 26, 26)";
this.$set(this.tableData, index, item);
} else {
//console.log("偶数index: " + index);
item.exchangeColor = "#ffcc00";
item.priceColor = "#ffcc00";
item.regionColor = "#ffcc00";
this.$set(this.tableData, index, item);
item.exchangeColor = "rgb(221, 160, 221)";
item.priceColor = "rgb(221, 160, 221)";
item.regionColor = "rgb(221, 160, 221)";
this.$set(this.tableData, index, item);
//this.$set(this.tableData, index, modifiedItem);
}
});
});
// console.log("转换后交易所数据：");
// console.log(this.tableData);
// console.log("转换后交易所数据：");
// console.log(this.tableData);
},
},
};
@@ -112,7 +108,8 @@ table {
text-align: left;
}
th, td {
th,
td {
padding: 12px;
color: #000000;
font-size: 14px;
@@ -120,8 +117,11 @@ th, td {
}
thead {
background: #013f6a;
background: linear-gradient(135deg, #f8faff, #e6f3ff);
padding: 10%;
color: #2c3e50;
border-bottom: 2px solid #3498db;
font-weight: 600;
}
.scroll-wrapper {
@@ -134,10 +134,14 @@ thead {
}
tr {
border-bottom: 1px solid #0a2a4a;
border-bottom: 1px solid #e8f4fd;
transition: background-color 0.3s ease;
}
tr:nth-child(even) {
background: rgba(255, 255, 255, 0.05);
tr:nth-child(2n) {
background: rgba(52, 152, 219, 0.03);
}
tr:nth-child(odd) {
background: hsla(0, 0%, 100%, 0.8);
}
</style>

268
src/views/indexs/right-top-day.vue
View File

@@ -1,57 +1,111 @@
<template>
<!-- <transition name="yh-setting-fade"> -->
<!-- <transition name="yh-setting-fade"> -->
<div class="table-container">
<table @click="tableClick">
<thead>
<tr>
<th style="width:24%">车牌号</th>
<th style="width:19%">当前总里程</th>
<th style="width:19%">当日里程</th>
<th style="width:19%">当日用氢量</th>
<th style="width:19%">当日碳减排</th>
<th style="width: 24%">车牌号</th>
<th style="width: 19%">当前总里程</th>
<th style="width: 19%">当日里程</th>
<th style="width: 19%">当日用氢量</th>
<th style="width: 19%">当日碳减排</th>
</tr>
</thead>
</table>
<div class="scroll-wrapper">
<vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
<vue-seamless-scroll
:data="tableData"
:class-option="scrollOptions"
class="scroll-container"
>
<table @click="tableClick">
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
<td style="width:24%">{{ item.plateNumber }}</td>
<td style="width:19%">{{ item.totalMileage }}km</td>
<td style="width:19%">{{ item.dayMileage }}km</td>
<td style="width:19%">{{ item.dayHydrogen }}kg</td>
<td style="width:19%">{{ item.dayCarbon }}kg</td>
<td style="width: 24%">{{ item.plateNumber }}</td>
<td style="width: 19%">{{ item.totalMileage }}km</td>
<td style="width: 19%">{{ item.dayMileage }}km</td>
<td style="width: 19%">{{ item.dayHydrogen }}kg</td>
<td style="width: 19%">{{ item.dayCarbon }}kg</td>
</tr>
</tbody>
</table>
</vue-seamless-scroll>
</div>
<div class="dialog-container" >
<div class="dialog-container">
<!-- :body-style="{ maxHeight: 'calc(100vh - 510px)', overflow: 'auto' }" -->
<el-dialog title="车辆当日信息" :visible.sync="setVehicleDialog" class="dialog_el" height="400px" width="803px" center
:lock-scroll="false"
:append-to-body="true"
:modal-append-to-body="true"
<el-dialog
title="车辆当日信息"
:visible.sync="setVehicleDialog"
class="dialog_el"
height="400px"
width="803px"
center
:lock-scroll="false"
:append-to-body="true"
:modal-append-to-body="true"
>
<!-- width="100%" class="dialog-table" -->
<div class="dialog-body-wrapper">
<el-table
:data="tableData"
border
class="vehicleTable"
height="600px"
width="800px"
:default-sort="{ prop: 'totalMileage', order: 'descending' }"
>
<!-- width="100%" class="dialog-table" -->
<div class="dialog-body-wrapper">
<el-table :data="tableData" border class="vehicleTable" height="600px" width="800px" :default-sort="{prop: 'totalMileage', order: 'descending'}">
<el-table-column type="index" prop="tableIndex" label="序号" width="80px"></el-table-column>
<el-table-column prop="plateNumber" label="车牌号" width="120px" sortable></el-table-column>
<el-table-column prop="totalMileage" label="当前总里程" width="140px" :formatter="formatMileageKm" sortable></el-table-column>
<el-table-column prop="dayMileage" label="当日里程" width="130px" :formatter="formatMileageKm" sortable></el-table-column>
<el-table-column prop="dayHydrogen" label="当日用氢量" width="140px" :formatter="formatHydrogenKg" sortable></el-table-column>
<el-table-column prop="dayCarbon" label="当日碳减排" width="140px" :formatter="formatHydrogenKg" sortable></el-table-column>
<el-table-column
type="index"
prop="tableIndex"
label="序号"
width="80px"
></el-table-column>
<el-table-column
prop="plateNumber"
label="车牌号"
width="120px"
sortable
></el-table-column>
<el-table-column
prop="totalMileage"
label="当前总里程"
width="140px"
:formatter="formatMileageKm"
sortable
></el-table-column>
<el-table-column
prop="dayMileage"
label="当日里程"
width="130px"
:formatter="formatMileageKm"
sortable
></el-table-column>
<el-table-column
prop="dayHydrogen"
label="当日用氢量"
width="140px"
:formatter="formatHydrogenKg"
sortable
></el-table-column>
<el-table-column
prop="dayCarbon"
label="当日碳减排"
width="140px"
:formatter="formatHydrogenKg"
sortable
></el-table-column>
</el-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="closeButton" type="primary" size="small" @click="closeDialog">关闭</el-button>
</span>
<span slot="footer" class="dialog-footer">
<el-button
class="closeButton"
type="primary"
size="small"
@click="closeDialog"
>关闭</el-button
>
</span>
</el-dialog>
</div>
</div>
@@ -60,16 +114,15 @@
</template>
<script>
import Vue from 'vue'
import Vue from "vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import { currentGET } from 'api/modules'
import { Dialog,Table, TableColumn } from 'element-ui'
import 'element-ui/lib/theme-chalk/table.css'
import 'element-ui/lib/theme-chalk/table-column.css'
Vue.component('el-dialog', Dialog)
Vue.use(Table)
Vue.use(TableColumn)
import { currentGET } from "api/modules";
import { Dialog, Table, TableColumn } from "element-ui";
import "element-ui/lib/theme-chalk/table.css";
import "element-ui/lib/theme-chalk/table-column.css";
Vue.component("el-dialog", Dialog);
Vue.use(Table);
Vue.use(TableColumn);
export default {
components: { vueSeamlessScroll },
data() {
@@ -83,23 +136,22 @@ export default {
waitTime: 2000, // 等待时间，滚动间隔
},
tableData: [],
setVehicleDialog:false,
setVehicleDialog: false,
};
},
mounted() {
this.getExchangeData();
this.getExchangeData();
},
methods: {
tableClick(){
console.log('tableClick')
methods: {
tableClick() {
console.log("tableClick");
this.setVehicleDialog = true;
},
closeDialog(){
closeDialog() {
this.setVehicleDialog = false;
},
getExchangeData() {
currentGET("big13").then(res => {
currentGET("big13").then((res) => {
console.log("当日汇总数据：");
console.log(res.data);
this.tableData = res.data;
@@ -107,17 +159,13 @@ export default {
//this.tableData = res.data.slice(0, 20);
});
},
formatMileageKm(row, column, cellValue, index){
if(row.nodeName === null)
return '0km';
else
return cellValue + 'km';
formatMileageKm(row, column, cellValue, index) {
if (row.nodeName === null) return "0km";
else return cellValue + "km";
},
formatHydrogenKg(row, column, cellValue, index) {
if(row.nodeName === null)
return '0kg';
else
return cellValue + 'kg';
if (row.nodeName === null) return "0kg";
else return cellValue + "kg";
},
},
};
@@ -137,38 +185,43 @@ table {
text-align: center; /* 修改为居中对齐 */
}
th {
padding: 10px 12px;
color: #000000;
th,
td {
padding: 12px;
color: #2d3748;
font-size: 14px;
width: 20%;
text-align: center; /* 确保单元格内容居中 */
height: 50px; /* 固定行高，与数据行保持一致 */
box-sizing: border-box;
width: 24%;
border-right: 1px solid rgba(79, 209, 197, 0.2);
}
th {
color: #000;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
td {
padding: 10px 12px;
color:rgb(0, 255, 204);
color: #000;
font-size: 14px;
width: 20%;
text-align: center; /* 确保单元格内容居中 */
}
thead {
background: #013f6a;
padding: 10%;
color: #ffffff;
font-weight: 600;
}
.dialog_el >>> .el-dialog__body {
/* //border-top: 1px solid #dcdfe6;
//border-bottom: 1px solid #dcdfe6; */
//border-bottom: 1px solid #dcdfe6; */
max-height: 60vh !important;
min-height: 100px;
overflow-y: hidden;
/* background: #013f6a; */
}
.vehicleTable{
.vehicleTable {
/* width: 100%; */
text-align: center; /* 确保单元格内容居中 */
}
@@ -178,13 +231,12 @@ thead {
/* width: 20%; */
text-align: center; /* 确保单元格内容居中 */
}
.vehicleTable >>> td{
.vehicleTable >>> td {
text-align: center; /* 确保单元格内容居中 */
}
.closeButton{
color: gray;
.closeButton {
color: #fff;
background-color: #013f6a;
}
/* 内容容器滚动设置 */
.dialog-body-wrapper {
@@ -198,34 +250,60 @@ thead {
width: 300px;
height: 0px; /* 适配大屏，数据较多可增加高度 */
overflow: hidden;
background-color: #031a47;
border-radius: 8px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(240, 249, 255, 0.95) 100%
);
border-radius: 12px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(79, 209, 197, 0.15);
}
.dialog_el .el-table {
background-color: transparent !important;
/* width: 100%; */
/* back */
border-radius: 8px;
overflow: hidden;
}
.dialog_el .el-table th {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
color: #ffffff !important;
font-weight: 600 !important;
}
.dialog_el .el-table td {
background-color: rgba(255, 255, 255, 0.7) !important;
color: #2d3748 !important;
border-bottom: 1px solid rgba(79, 209, 197, 0.1) !important;
}
.dialog_el .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: rgba(79, 209, 197, 0.1) !important;
}
/* .dialog-table{
background-color: #031a47;
} */
background-color: #ffffff;
} */
/* .dialog-table {
// background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%);
background-color: #013f6a;
// text-align: center;
} */
// background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%);
background-color: #f5f7fa;
// text-align: center;
} */
/* .dialog-table th {
background-color: #011946 !important;
color: #000000;
}
.dialog-table td {
background-color: rgba(255,255,255,0.8);
} */
background-color: #e3f2fd !important;
color: white;
}
.dialog-table td {
background-color: rgba(255,255,255,0.8);
} */
.scroll-wrapper {
height: 550px; /*适配大屏，数据较多可增加高度 */
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.scroll-container table {
@@ -233,10 +311,16 @@ thead {
}
tr {
border-bottom: 1px solid #0a2a4a;
border-bottom: 1px solid rgba(79, 209, 197, 0.1);
transition: all 0.2s ease;
}
tr:nth-child(even) {
background: rgba(255, 255, 255, 0.05);
background: rgba(79, 209, 197, 0.05);
}
tr:hover {
background: rgba(79, 209, 197, 0.1);
transform: translateX(2px);
}
</style>